@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800;900&display=swap');

:root {
  --font-sans-rounded: "Nunito", ui-rounded, "SF Pro Rounded", "Arial Rounded MT", Arial, Helvetica, sans-serif;
  --page-padding: 40px;
  --surface-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
  --element-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  font-family: var(--font-sans-rounded);
  color: rgba(0, 0, 0, 0.75);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

h1,
h2,
h3 {
  font-weight: 700;
  letter-spacing: 0.2px;
  margin: 0;
}

html {
  background-color: transparent;
}

body {
  background: transparent !important;
  position: relative;
}

:where(.content, .container) {
  width: 100%;
  margin: 0;
  padding: 10px 10px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

:where(.content, .container)> :where(*:not(style)) {
  margin-block-start: 0;
  margin-block-end: 0;
  display: block;
  width: 100%;
}

:where(.content, .container) {
  max-width: var(--dashboard-max-width, 1280px);
  margin-left: auto;
  margin-right: auto;
}

.dashboard-shell {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--dashboard-shell-gap, 36px);
  width: 100%;
  container-type: inline-size;
  container-name: dashboard-layout;
}

.dashboard-left {
  flex: 0 1 clamp(300px, 48vw, var(--dashboard-left-max, 800px));
  min-width: 300px;
  max-width: var(--dashboard-left-max, 800px);
  display: flex;
  flex-direction: column;
  gap: 0;
  text-align: center;
  padding-left: 0;
  padding-right: 0;
  align-items: center;
}

.dashboard-left>* {
  margin-block-start: 0;
  margin-block-end: 0;
}

.dashboard-left> :where(*:not(style)) {
  display: block;
  width: 100%;
}

.dashboard-left .collab-block,
.dashboard-left .buttons-wrap {
  display: contents;
}

.dashboard-left .button-card {
  width: 100%;
  max-width: var(--dashboard-left-max, 800px);
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

.dashboard-left titulo-element {
  display: block;
  width: 100%;
  margin: 0 auto;
}

.landing-shell {
  width: 100%;
  max-width: min(1100px, calc(100vw - 48px));
  margin: 0 auto;
  padding: clamp(24px, 6vw, 60px) clamp(18px, 5vw, 36px) clamp(60px, 8vw, 88px);
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vw, 44px);
}

.landing-shell> :where(section, div) {
  width: 100%;
}

.hero-section {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 4vw, 36px);
}

.info-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.75fr);
  gap: clamp(22px, 4vw, 36px);
  align-items: stretch;
}

.info-grid-column {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 32px);
}

@media (max-width: 1080px) {
  .landing-shell {
    padding-inline: clamp(18px, 6vw, 32px);
  }

  .info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .landing-shell {
    padding: 32px 18px 72px;
  }

  .hero-section {
    gap: 24px;
  }
}

.dashboard-left botones-element,
.dashboard-left botones-html,
.dashboard-left botones-html-mini,
.dashboard-left botones-html-toggle,
.dashboard-left botones-html-toggle-mini,
.dashboard-left botones-html-multitoggle,
.dashboard-left botones-html-multitoggle-mini,
.dashboard-left botones-pagina-principal,
.dashboard-left data-controller {
  display: block;
  width: 100%;
}

.buttons-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.buttons-wrap>* {
  width: 100%;
}

.dashboard-left .button-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.dashboard-left .button-container:first-of-type {
  margin-top: 24px;
}

.dashboard-left .button-container :is(
  botones-element,
  botones-html,
  botones-html-mini,
  botones-html-toggle,
  botones-html-toggle-mini,
  botones-html-multitoggle,
  botones-html-multitoggle-mini
) {
  width: 100%;
}

.dashboard-left #empleadoDigitalController {
  margin-top: 0;
}

.dashboard-left autorizaciones-element#auth {
  display: block;
  width: 100%;
  margin-top: 0;
}

.dashboard-left #titleStatic {
  margin: 0;
  text-align: center;
}

.dashboard-left #titleStatic:empty {
  display: none;
}

.dashboard-left h1,
.dashboard-left titulo-element,
.dashboard-left titulo-texto-plano,
.dashboard-left botones-element,
.dashboard-left botones-html,
.dashboard-left botones-html-mini,
.dashboard-left botones-html-toggle,
.dashboard-left botones-html-toggle-mini,
.dashboard-left botones-html-multitoggle,
.dashboard-left botones-html-multitoggle-mini,
.dashboard-left botones-pagina-principal,
.dashboard-left data-controller,
.dashboard-left qr-image,
.dashboard-left .button-card {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.dashboard-left .button-card {
  padding: 0;
  margin: 0;
}

.dashboard-left titulo-texto-plano#userName {
  margin-top: 0;
  margin-bottom: 0;
}

.dashboard-left titulo-texto-plano.credits-text {
  margin-top: 0;
  margin-bottom: 0;
}

.dashboard-left qr-image.qr-block,
.dashboard-left embedded-signup.qr-block {
  margin-top: 0;
  margin-bottom: 12px;
}

.dashboard-left .quick-access-wrap {
  width: 100%;
  display: block;
  margin-top: 0;
  margin-bottom: 0;
}

.dashboard-left .quick-access-wrap > botones-pagina-principal {
  display: block;
  width: 100%;
}

.dashboard-right {
  flex: 1 1 auto;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

#titleStatic {
  text-align: center !important;
}

qr-image {
  display: block;
  width: 100%;
  margin: 2px auto 0;
}

.button-card {
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.button-card :is(
  botones-element,
  botones-html,
  botones-html-mini,
  botones-html-toggle,
  botones-html-toggle-mini,
  botones-html-multitoggle,
  botones-html-multitoggle-mini
) {
  width: 100%;
}

@media (max-width: 1180px) {
  .dashboard-shell {
    justify-content: center;
    align-items: flex-start;
  }

  .dashboard-left {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 980px) {
  .dashboard-shell {
    gap: 28px;
    align-items: flex-start;
  }

  .content {
    padding: 10px 10px 48px;
  }

  .dashboard-left {
    align-items: center;
  }
}

@media (max-width: 820px) {
  .content {
    padding: 0 0 36px;
    text-align: center;
  }

  .dashboard-shell {
    align-items: flex-start;
    justify-content: center;
  }

  .dashboard-left {
    max-width: 480px;
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  .content {
    padding: 0 0 32px;
  }
}

.dashboard-shell[data-dashboard-collapsed="true"] {
  flex-direction: column;
  gap: 0;
  align-items: center;
  justify-content: flex-start;
}

.dashboard-shell[data-dashboard-collapsed="true"] .dashboard-left {
  flex: 1 1 auto;
  width: 100%;
  max-width: 480px;
  gap: 0;
  text-align: center;
  padding-left: 0;
  padding-right: 0;
  align-items: center;
}

.dashboard-shell[data-dashboard-collapsed="true"] .dashboard-right {
  display: none;
}

@container dashboard-layout (max-width: 820px) {
  .dashboard-shell {
    flex-direction: column;
    gap: 0;
    align-items: center;
    justify-content: flex-start;
  }

  .dashboard-left {
    flex: 1 1 auto;
    width: 100%;
    max-width: 480px;
    gap: 0;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
    align-items: center;
  }

  .dashboard-right {
    display: none;
  }

  #titleStatic {
    text-align: center !important;
  }

  .dashboard-left titulo-texto-plano {
    display: block;
    text-align: center !important;
  }

  .dashboard-left qr-image {
    margin-top: 6px;
  }
}

/* -------------------------------------------------------
   Dashboard layout alignment (wide viewports)
   ----------------------------------------------------- */
:root {
  --dashboard-max-width: 3500px;
  --dashboard-left-max: 800px;
  --dashboard-panel-max: calc(var(--dashboard-max-width) - var(--dashboard-left-max, 800px) - 36px);
}

.dashboard-shell {
  max-width: var(--dashboard-max-width);
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

.dashboard-right {
  flex: 0 1 var(--dashboard-panel-max);
  max-width: var(--dashboard-panel-max);
}

@media (max-width: 1180px) {
  .dashboard-shell {
    max-width: 100%;
  }
}

@container dashboard-layout (max-width: 820px) {
  .dashboard-shell {
    max-width: 100%;
  }

  .dashboard-right {
    flex: 1 1 auto;
    max-width: 100%;
  }
}

/* Páginas sin dashboard: mantener ancho máximo y centrar contenido */
.content:not(:has(.dashboard-shell)) {
  max-width: var(--dashboard-left-max, 800px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
}

.content:not(:has(.dashboard-shell)) {
  padding-left: 16px;
  padding-right: 16px;
}

@media (max-width: 640px) {
  .content:not(:has(.dashboard-shell)) {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* -------------------------------------------------------
   Skeleton Loading States (Optimized & Beautified)
   ----------------------------------------------------- */

@keyframes skeleton-wave {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

:not(:defined) {
  display: block;
  position: relative;
  overflow: hidden;
  margin-bottom: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background-color: transparent !important;
  border: none !important;
}

:not(:defined)::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;

  /* Base color matching background-element (Blue preserved) */
  background-color: #e0f2fe;

  /* Enhanced White Wave Effect: Softer, wider, and more natural */
  background-image: linear-gradient(100deg,
      transparent 20%,
      rgba(255, 255, 255, 0.6) 50%,
      transparent 80%);

  /* Double width to allow smooth travel */
  background-size: 200% 100%;

  opacity: 1;

  /* Slower, continuous animation for premium feel */
  animation: skeleton-wave 1.5s infinite linear;

  /* Performance optimization hint */
  will-change: background-position;
}

:not(:defined):not(:where(
  agente-en-convos-registradas,
  agregar-a-favoritos,
  agregar-citas,
  agregar-cliente,
  agregar-cuenta,
  agregar-reservacion,
  agregar-etiquetas-y-apodos,
  agregar-excepcion,
  agregar-reporte,
  agregar-vacacion,
  ai-chat,
  alternative-time-period-picker,
  analizar-personal-nuevo,
  apexcare-dashboard,
  apodos-para-clientes,
  apple-orange,
  assets-element,
  autorizaciones-element,
  backend-table,
  background-effect-gold,
  background-element,
  boton-opi,
  botones-element,
  botones-html,
  botones-html-mini,
  botones-html-toggle,
  botones-html-toggle-mini,
  botones-html-multitoggle,
  botones-html-multitoggle-mini,
  botones-mini,
  botones-multi-toggle,
  botones-pagina-principal,
  botones-toggle,
  botones-toggle-mini,
  branch-picker,
  btn-group,
  buscar-cliente,
  business-context,
  campo-agente,
  campo-articulos-venta,
  campo-clientes-venta,
  campo-dinero,
  campo-password,
  campo-password-login,
  campos-transacciones,
  campo-telefono,
  campo-texto,
  campo-texto-login,
  campo-texto-multi-linea,
  capacidades-empleado-digital,
  category-plugin-adapter,
  citas-pedidos,
  cliente-info-adicional,
  configuracion-perfil-meta,
  empleado-digital-costos-ia-launcher,
  feedback-de-empleado-digital,
  configurar-analisis,
  configurar-perfiles-clientes,
  confirmar-cerrar-sesion,
  confirm-delete,
  conocimientos-del-empleado-digital,
  context-preset,
  convos-registradas,
  cpm-loading-spinner,
  crear-cuenta,
  dashboard,
  dashboard-chat-card,
  data-controller,
  data-controller-helper,
  date-picker,
  descripcion-productos,
  disponibilidad-procesada,
  download-import-knowledge-items,
  duration-picker,
  embedded-signup,
  encuesta-mensaje-final,
  encuesta-para-quien,
  encuesta-registrar-resumen,
  etiquetas-y-apodos,
  follow-up-dashboard,
  follow-up-notification-sync,
  filtro-clientes,
  forgot-password,
  formato-respuestas,
  giro-element,
  graficas-dashboard,
  index-button,
  index-capabilities-card,
  index-comparison-card,
  index-links-tray,
  index-next-step-card,
  index-panel-card,
  index-plans-card,
  index-sectors-card,
  index-tarjeta-iniciar-sesion,
  informacion-de-sesion,
  informacion-encuesta-prospectos,
  jornada-element,
  limite-de-reportes,
  mensaje-inactividad,
  message-length,
  metodo-de-pago,
  mi-custom-element,
  mision-vision-valores,
  mostrar-autorizaciones-roles,
  mostrar-autorizaciones-usuario,
  mostrar-clientes-agregar-sucursal,
  mostrar-personal,
  mostrar-personal-agregar-sucursal,
  mostrar-productos,
  mostrar-productos-agregar-sucursal,
  mostrar-servicios,
  mostrar-servicios-agregar-sucursal,
  multi-branch-selector,
  next-gen-slider,
  objetivo-agente,
  ophub-version,
  ordenar-clientes,
  panel-anticipo,
  payment-method-picker,
  politica-privacidad-page,
  pop-up,
  precio-calculadora,
  qr-image,
  quantity-picker,
  reporte-nombre-alternativo,
  reportes-planes-dashboard,
  rol-picker,
  selector-milestones-globales,
  selector-modelo-venta,
  selector-politica-mora,
  sobre-nosotros-page,
  tarjeta-citas,
  tarjeta-fecha-duracion,
  tarjeta-mi-cuenta,
  tarjeta-pedidos,
  tarjetas-clientes,
  tarjetas-cuentas,
  tarjetas-element,
  tarjetas-inventario,
  tarjetas-inventario-productos,
  tarjetas-inventario-servicios,
  tarjetas-reportes,
  tarjetas-transacciones,
  tarjeta-transaccion,
  test-notificar-despues-de-reporte,
  tiempo-sin-citas,
  time-picker,
  tipo-reporte,
  titulo-element,
  titulo-texto-plano,
  toasts-element,
  usar-perfil,
  uso-de-emojis,
  ver-citas,
  ver-reservaciones,
  voz-hombre-mujer
)) {
  display: inline;
  position: static;
  overflow: visible;
  margin-bottom: revert !important;
  padding: revert !important;
  box-sizing: inherit !important;
  border: revert !important;
}

:not(:defined):not(:where(
  agente-en-convos-registradas,
  agregar-a-favoritos,
  agregar-citas,
  agregar-cliente,
  agregar-cuenta,
  agregar-reservacion,
  agregar-etiquetas-y-apodos,
  agregar-excepcion,
  agregar-reporte,
  agregar-vacacion,
  ai-chat,
  alternative-time-period-picker,
  analizar-personal-nuevo,
  apexcare-dashboard,
  apodos-para-clientes,
  apple-orange,
  assets-element,
  autorizaciones-element,
  backend-table,
  background-effect-gold,
  background-element,
  boton-opi,
  botones-element,
  botones-html,
  botones-html-mini,
  botones-html-toggle,
  botones-html-toggle-mini,
  botones-html-multitoggle,
  botones-html-multitoggle-mini,
  botones-mini,
  botones-multi-toggle,
  botones-pagina-principal,
  botones-toggle,
  botones-toggle-mini,
  branch-picker,
  btn-group,
  buscar-cliente,
  business-context,
  campo-agente,
  campo-articulos-venta,
  campo-clientes-venta,
  campo-dinero,
  campo-password,
  campo-password-login,
  campos-transacciones,
  campo-telefono,
  campo-texto,
  campo-texto-login,
  campo-texto-multi-linea,
  capacidades-empleado-digital,
  category-plugin-adapter,
  citas-pedidos,
  cliente-info-adicional,
  configuracion-perfil-meta,
  empleado-digital-costos-ia-launcher,
  feedback-de-empleado-digital,
  configurar-analisis,
  configurar-perfiles-clientes,
  confirmar-cerrar-sesion,
  confirm-delete,
  conocimientos-del-empleado-digital,
  context-preset,
  convos-registradas,
  cpm-loading-spinner,
  crear-cuenta,
  dashboard,
  dashboard-chat-card,
  data-controller,
  data-controller-helper,
  date-picker,
  descripcion-productos,
  disponibilidad-procesada,
  download-import-knowledge-items,
  duration-picker,
  embedded-signup,
  encuesta-mensaje-final,
  encuesta-para-quien,
  encuesta-registrar-resumen,
  etiquetas-y-apodos,
  follow-up-dashboard,
  follow-up-notification-sync,
  filtro-clientes,
  forgot-password,
  formato-respuestas,
  giro-element,
  graficas-dashboard,
  index-button,
  index-capabilities-card,
  index-comparison-card,
  index-links-tray,
  index-next-step-card,
  index-panel-card,
  index-plans-card,
  index-sectors-card,
  index-tarjeta-iniciar-sesion,
  informacion-de-sesion,
  informacion-encuesta-prospectos,
  jornada-element,
  limite-de-reportes,
  mensaje-inactividad,
  message-length,
  metodo-de-pago,
  mi-custom-element,
  mision-vision-valores,
  mostrar-autorizaciones-roles,
  mostrar-autorizaciones-usuario,
  mostrar-clientes-agregar-sucursal,
  mostrar-personal,
  mostrar-personal-agregar-sucursal,
  mostrar-productos,
  mostrar-productos-agregar-sucursal,
  mostrar-servicios,
  mostrar-servicios-agregar-sucursal,
  multi-branch-selector,
  next-gen-slider,
  objetivo-agente,
  ophub-version,
  ordenar-clientes,
  panel-anticipo,
  payment-method-picker,
  politica-privacidad-page,
  pop-up,
  precio-calculadora,
  qr-image,
  quantity-picker,
  reporte-nombre-alternativo,
  reportes-planes-dashboard,
  rol-picker,
  selector-milestones-globales,
  selector-modelo-venta,
  selector-politica-mora,
  sobre-nosotros-page,
  tarjeta-citas,
  ver-reservaciones,
  agregar-reservacion,
  tarjeta-fecha-duracion,
  tarjeta-mi-cuenta,
  tarjeta-pedidos,
  tarjetas-clientes,
  tarjetas-cuentas,
  tarjetas-element,
  tarjetas-inventario,
  tarjetas-inventario-productos,
  tarjetas-inventario-servicios,
  tarjetas-reportes,
  tarjetas-transacciones,
  tarjeta-transaccion,
  test-notificar-despues-de-reporte,
  tiempo-sin-citas,
  time-picker,
  tipo-reporte,
  titulo-element,
  titulo-texto-plano,
  toasts-element,
  usar-perfil,
  uso-de-emojis,
  ver-citas,
  ver-reservaciones,
  voz-hombre-mujer
))::before {
  content: none !important;
  animation: none !important;
}

/* -------------------------------------------------------
   Group A: Mini Wrappers (Height: 39px)
   Matches `botones-mini` + 5px margin
   ----------------------------------------------------- */
botones-mini:not(:defined),
botones-html-mini:not(:defined),
botones-html-toggle-mini:not(:defined),
botones-html-multitoggle-mini:not(:defined),
branch-picker:not(:defined),
date-picker:not(:defined),
time-picker:not(:defined),
tipo-reporte:not(:defined),
rol-picker:not(:defined),
quantity-picker:not(:defined),
alternative-time-period-picker:not(:defined),
multi-branch-selector:not(:defined),
data-controller:not(:defined),
/* Assumed visible branch button */
duration-picker:not(:defined),
botones-toggle-mini:not(:defined),
botones-multi-toggle:not(:defined),
campo-dinero:not(:defined),
voz-hombre-mujer:not(:defined),
ordenar-clientes:not(:defined),
filtro-clientes:not(:defined),
download-import-knowledge-items:not(:defined),
limite-de-reportes:not(:defined),
configuracion-perfil-meta:not(:defined),
empleado-digital-costos-ia-launcher:not(:defined),
feedback-de-empleado-digital:not(:defined),
usar-perfil:not(:defined) {
  height: 39px !important;
  width: 100%;
  padding: 0 !important;
}

campo-telefono:not(:defined) {
  height: 37px !important;
  width: 100%;
  padding: 0 !important;
}

cliente-info-adicional:not(:defined) {
  height: 39px !important;
  width: 100%;
  padding: 0 !important;
}

/* -------------------------------------------------------
   Group B: Invisible Elements
   Logic, audio, or popups that should not take space
   ----------------------------------------------------- */
autorizaciones-element:not(:defined),
background-element:not(:defined),
informacion-de-sesion:not(:defined),
pop-up:not(:defined),
toasts-element:not(:defined),
cpm-loading-spinner:not(:defined),
assets-element:not(:defined),
backend-table:not(:defined),
ophub-version:not(:defined),
business-context:not(:defined),
context-preset:not(:defined),
data-controller-helper:not(:defined),
background-effect-gold:not(:defined),
background-effect-gold:not(:defined),
agregar-etiquetas-y-apodos:not(:defined),
etiquetas-y-apodos:not(:defined),
metodo-de-pago:not(:defined),
/* Modal/Popup based */
/* Modal/Popup based */
agregar-cuenta:not(:defined),
/* Modal/Popup based */
agregar-citas:not(:defined),
/* Modal/Popup based */
crear-cuenta:not(:defined),
crear-cuenta:not(:defined),
precio-calculadora:not(:defined),
apodos-para-clientes:not(:defined),
forgot-password:not(:defined),
category-plugin-adapter:not(:defined),
follow-up-notification-sync:not(:defined),
panel-anticipo:not(:defined),
selector-milestones-globales:not(:defined),
selector-politica-mora:not(:defined) {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  animation: none !important;
}

/* -------------------------------------------------------
   Group C: Standard Button Wrappers (Height: 50px)
   Matches `botones-element` + 5px margin
   ----------------------------------------------------- */
botones-element:not(:defined),
botones-html:not(:defined),
botones-html-toggle:not(:defined),
botones-html-multitoggle:not(:defined),
message-length:not(:defined),
uso-de-emojis:not(:defined),
objetivo-agente:not(:defined),
formato-respuestas:not(:defined),
mensaje-inactividad:not(:defined),
configurar-perfiles-clientes:not(:defined),
btn-group:not(:defined),
index-button:not(:defined),
botones-toggle:not(:defined),
botones-multi-toggle:not(:defined),
apple-orange:not(:defined),
ver-citas:not(:defined),
ver-citas:not(:defined),
confirm-delete:not(:defined),
confirmar-cerrar-sesion:not(:defined),
tarjeta-citas:not(:defined),
agregar-reservacion:not(:defined),
ver-reservaciones:not(:defined),
agregar-cliente:not(:defined),
agregar-excepcion:not(:defined),
agregar-vacacion:not(:defined),
mostrar-autorizaciones-usuario:not(:defined),
tarjeta-pedidos:not(:defined) {
  height: 50px !important;
  width: 100%;
  padding: 0 !important;
}

selector-modelo-venta:not(:defined) {
  height: 50px !important;
  width: 100%;
  padding: 0 !important;
}

payment-method-picker:not(:defined) {
  height: 47px !important;
  width: 100%;
  padding: 0 !important;
}

next-gen-slider:not(:defined) {
  height: 51px !important;
  width: 100%;
  padding: 0 !important;
}

/* -------------------------------------------------------
   Modificar Personal: ajustes de skeleton de 1px menos
   ----------------------------------------------------- */
botones-html-mini:not(:defined),
rol-picker:not(:defined),
multi-branch-selector:not(:defined),
usar-perfil:not(:defined) {
  height: 38px !important;
}

botones-html:not(:defined),
agregar-excepcion:not(:defined),
agregar-vacacion:not(:defined),
mostrar-autorizaciones-usuario:not(:defined) {
  height: 49px !important;
}

/* Empleado Digital: skeleton adjustments for dashboard-left context */
.dashboard-left botones-html-multitoggle:not(:defined) {
  height: 46px !important;
}

.dashboard-left configuracion-perfil-meta:not(:defined),
.dashboard-left empleado-digital-costos-ia-launcher:not(:defined),
.dashboard-left voz-hombre-mujer:not(:defined),
.dashboard-left feedback-de-empleado-digital:not(:defined) {
  height: 38px !important;
}

/* Main page principal buttons.
   Main page renders 10 logical rows in total:
   - one bloque with btn-count="2" columns="1" (2 filas)
   - eight bloques with btn-count="1" (1 fila cada uno)
   ~48px per row. Total: 96 + 8*48 = 480px (matches parent skeleton). */
botones-pagina-principal botones-html[btn-count="1"]:not(:defined) {
  height: 48px !important;
}

botones-pagina-principal botones-html[btn-count="2"]:not(:defined) {
  height: 96px !important;
}

botones-pagina-principal botones-html:not([btn-count]):not(:defined) {
  height: 48px !important;
}

/* -------------------------------------------------------
   Group D: Inputs (Height: 60px / 120px)
   ----------------------------------------------------- */
campo-texto:not(:defined) {
  height: 54px !important;
  width: 100%;
  padding: 0 !important;
}

campo-password:not(:defined) {
  height: 51px !important;
  width: 100%;
  padding: 0 !important;
}

campo-password-login:not(:defined),
campo-texto-login:not(:defined),
campo-articulos-venta:not(:defined),
campo-clientes-venta:not(:defined),
reporte-nombre-alternativo:not(:defined) {
  height: 49px !important;
  width: 100%;
  padding: 0 !important;
}

campo-texto-multi-linea:not(:defined) {
  height: 120px !important;
  width: 100%;
  padding: 0 !important;
}

campo-agente:not(:defined) {
  height: 45px !important;
  width: 100%;
  padding: 0 !important;
}

campos-transacciones:not(:defined) {
  height: 160px !important;
  width: 100%;
  padding: 0 !important;
}

buscar-cliente:not(:defined) {
  height: 220px !important;
  width: 100%;
  padding: 0 !important;
}

agregar-reporte:not(:defined) {
  height: 260px !important;
  width: 100%;
  padding: 0 !important;
}

/* -------------------------------------------------------
   Group E: Complex Cards & Dashboards
   Calculated approximate heights
   ----------------------------------------------------- */

/* Small Cards / List Items (~100px) */
tarjetas-element:not(:defined),
tarjetas-inventario:not(:defined),
tarjetas-clientes:not(:defined),
tarjetas-transacciones:not(:defined),
tarjetas-cuentas:not(:defined),
tarjetas-inventario-productos:not(:defined),
tarjetas-inventario-servicios:not(:defined),
tarjeta-mi-cuenta:not(:defined),
tarjeta-fecha-duracion:not(:defined),
convos-registradas:not(:defined),
agente-en-convos-registradas:not(:defined) {
  height: 100px !important;
  width: 100%;
  padding: 0 !important;
}

tarjetas-reportes:not(:defined) {
  height: 160px !important;
  width: 100%;
  padding: 0 !important;
}

conocimientos-del-empleado-digital:not(:defined) {
  height: 170px !important;
  width: 100%;
  padding: 0 !important;
}

/* Jornada Element (~296px) */
jornada-element:not(:defined) {
  height: 296px !important;
  width: 100%;
  padding: 0 !important;
}

/* Medium Cards (~200px) */
tiempo-sin-citas:not(:defined),
dashboard-chat-card:not(:defined),
tarjeta-transaccion:not(:defined),
mision-vision-valores:not(:defined),
ai-chat:not(:defined),
index-capabilities-card:not(:defined),
index-comparison-card:not(:defined),
index-next-step-card:not(:defined),
index-panel-card:not(:defined),
index-plans-card:not(:defined),
index-sectors-card:not(:defined),
index-sectors-card:not(:defined),
index-tarjeta-iniciar-sesion:not(:defined) {
  height: 200px !important;
  width: 100%;
  padding: 0 !important;
}

/* Group G: Special Large Cards */
encuesta-para-quien:not(:defined) {
  height: 310px !important;
  width: 100%;
  padding: 0 !important;
}

/* Capacidades: 10 sliders (9×45+40=445) + 5px gap + button (~42px) + branch (~39px) ≈ 531px */
capacidades-empleado-digital:not(:defined) {
  height: 531px !important;
  width: 100%;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
}

/* Group H: Medium Cards (150px) */
informacion-encuesta-prospectos:not(:defined) {
  height: 150px;
  margin-bottom: 20px;
}

/* Group I: Inputs with Labels (70px) */
reporte-nombre-alternativo:not(:defined) {
  height: 70px;
  margin-bottom: 10px;
}

/* Group C: Button Wrappers (50px) */
encuesta-registrar-resumen:not(:defined),
encuesta-mensaje-final:not(:defined),
test-notificar-despues-de-reporte:not(:defined) {
  height: 50px;
  margin-bottom: 10px;
}

/* Main page buttons (~490px): 10 logical rows × ~49px each */
botones-pagina-principal:not(:defined) {
  height: 490px !important;
  width: 100%;
  padding: 0 !important;
}

/* Large Blocks / Dashboards (~750px) */
dashboard:not(:defined),
apexcare-dashboard:not(:defined),
citas-pedidos:not(:defined),
analizar-personal-nuevo:not(:defined),
configurar-analisis:not(:defined),
descripcion-productos:not(:defined),
disponibilidad-procesada:not(:defined),
disponibilidad-procesada:not(:defined),
follow-up-dashboard:not(:defined),
graficas-dashboard:not(:defined),
reportes-planes-dashboard:not(:defined) {
  height: 750px !important;
  width: 100%;
  padding: 0 !important;
}

/* Widgets auxiliares de main.html (~160px / ~400px) */
agregar-a-favoritos:not(:defined) {
  height: 160px !important;
  width: 100%;
  padding: 0 !important;
}

embedded-signup:not(:defined) {
  height: 400px !important;
  width: 100%;
  padding: 0 !important;
}

/* -------------------------------------------------------
   Group F: Titles & Text
   ----------------------------------------------------- */
titulo-element:not(:defined) {
  height: 49px !important;
  width: 100%;
  padding: 0 !important;
  background-color: transparent !important;
  border: none !important;
}

/* Dashboard pages with porcentaje="90": text wraps to 2 lines in narrow
   dashboard-left column on desktop, fits 1 line on collapsed mobile layout.
   2-line height: 46.8px font × 0.95 line-height × 2 lines = 89px.
   Below 821px the dashboard collapses to single column → default 49px (1 line). */
@media (min-width: 821px) {
  .dashboard-left titulo-element[porcentaje="90"]:not(:defined) {
    height: 89px !important;
  }
}

titulo-texto-plano:not(:defined) {
  height: 29px !important;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 !important;
}

titulo-texto-plano#userName:not(:defined) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

titulo-texto-plano#userName[data-skeleton] {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* -------------------------------------------------------
   Group G: Specific Feature Wrappers (Lists)
   Usually wrap a list of cards or a table
   ----------------------------------------------------- */
mostrar-autorizaciones-roles:not(:defined),
mostrar-clientes-agregar-sucursal:not(:defined),
mostrar-personal:not(:defined),
mostrar-personal-agregar-sucursal:not(:defined),
mostrar-productos:not(:defined),
mostrar-productos-agregar-sucursal:not(:defined),
mostrar-servicios:not(:defined),
mostrar-servicios-agregar-sucursal:not(:defined) {
  height: 300px !important;
  width: 100%;
  padding: 0 !important;
}

/* -------------------------------------------------------
   Group H: Images & Media
   ----------------------------------------------------- */
qr-image:not(:defined) {
  width: 100% !important;
  max-width: 500px !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* -------------------------------------------------------
   Group I: Layout Components
   ----------------------------------------------------- */
index-links-tray:not(:defined) {
  height: 80px !important;
  width: 100%;
  padding: 0 !important;
}

giro-element:not(:defined) {
  height: 100px !important;
  width: 100%;
}

mi-custom-element:not(:defined) {
  height: 50px !important;
  width: 100%;
}

sobre-nosotros-page:not(:defined),
politica-privacidad-page:not(:defined) {
  height: 500px !important;
  width: 100%;
}

/* -------------------------------------------------------
   Group J: Floating Action Button
   Pill-shaped skeleton matching the real FAB position/size.
   Desktop: :host(right:20px) + .bubble-button(position:relative;right:20px) = 40px from viewport right.
   Height: padding(14+14) + bubble-ring(28) = 56px.
   Width: min-width:120px (border-box on <button> per UA stylesheet).
   Mobile: :host(right:0), button 25% visible via translate+clip → 120×0.25 = 30px.
   Mobile compensation: border-radius clamping on narrow element creates wider
   visual area than the real button's clipped curve. Reduce by 2px each axis
   (28×54) to match the perceived area of the real button's 30px-radius curve.
   ----------------------------------------------------- */
boton-opi:not(:defined) {
  display: block !important;
  position: fixed !important;
  bottom: 20px !important;
  right: 40px !important;
  width: 120px !important;
  height: 56px !important;
  border-radius: 30px !important;
  z-index: 2147483000 !important;
  overflow: hidden !important;
}

@media (max-width: 768px) {
  boton-opi:not(:defined) {
    right: 0 !important;
    width: 28px !important;
    height: 54px !important;
    border-radius: 30px 0 0 30px !important;
  }
}