/* ==========================================================
   Onion UI Theme: capa visual compartida del panel
   ========================================================== */

:root {
  --app-primary: #5b22b8;
  --app-primary-dark: #2f1458;
  --app-primary-soft: #f3f1ff;
  --app-bg: #f3f1ff;
  --app-surface: #ffffff;
  --app-border: #e8e8ef;
  --app-muted: #8f8f8f;
  --app-text: #4b5563;
  --app-radius: 14px;
  --app-card-radius: 16px;
  --app-field-height: 40px;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

html[data-theme="blue"] {
  --app-primary: #2563eb;
  --app-primary-dark: #172554;
  --app-primary-soft: #eff6ff;
  --app-bg: #f4f7ff;
}

html[data-theme="green"] {
  --app-primary: #059669;
  --app-primary-dark: #064e3b;
  --app-primary-soft: #ecfdf5;
  --app-bg: #f1fbf7;
}

html[data-theme="rose"] {
  --app-primary: #e11d48;
  --app-primary-dark: #4c0519;
  --app-primary-soft: #fff1f2;
  --app-bg: #fff6f7;
}

body.dashboard-page,
body.app-shell-page,
.products-page,
.clients-page,
.inventory-page,
.users-shell-page,
.billing-page,
.cash-page {
  background: var(--app-bg) !important;
}

body.app-shell-page {
  width: 100%;
  margin: 0;
  padding: 0;
}

.app-pagination {
  width: 100%;
  min-height: 62px;
  padding: 12px 16px;
  border-top: 1px solid var(--app-border);
  background: var(--app-surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.app-shell-page .table-wrapper:has(> .app-table-scroll),
.app-shell-page .subscriptions-table-wrapper:has(> .app-table-scroll) {
  overflow: visible !important;
}

.app-table-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.app-pagination-summary {
  margin: 0;
  color: var(--app-muted);
  font-size: .84rem;
}

.app-pagination-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.app-pagination-controls a,
.app-pagination-controls > span:not(.app-pagination-current) {
  width: 34px;
  height: 34px;
  border: 1px solid var(--app-border);
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--app-primary);
  background: #fff;
}

.app-pagination-controls a:hover {
  border-color: var(--app-primary);
  background: var(--app-primary-soft);
}

.app-pagination-controls .disabled {
  color: #b6b8c2;
  background: #f4f4f7;
  cursor: not-allowed;
}

.app-pagination-current {
  padding: 0 8px;
  color: var(--app-primary-dark);
  font-size: .84rem;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .app-pagination {
    flex-direction: column;
    align-items: flex-start;
  }

  .app-pagination-controls {
    width: 100%;
    justify-content: space-between;
  }
}

body.inventory-movements-page.app-shell-page .dashboard-shell {
  margin-top: 0 !important;
  min-height: 100vh !important;
}

.app-shell-page .app-main > .topbar {
  margin: 18px 18px 16px;
}

@media (max-width: 768px) {
  .app-shell-page .app-content {
    padding: 0 12px;
  }

  .app-shell-page .app-main > .topbar {
    margin: 12px 12px 16px;
  }
}

.app-shell-page .brand-box {
  position: relative;
}

.app-shell-page .brand-copy {
  min-width: 0;
}

.app-shell-page .sidebar-collapse-button {
  width: 36px;
  height: 36px;
  margin-left: auto;
  border: 1px solid var(--app-border);
  border-radius: 12px;
  background: var(--app-primary-soft);
  color: var(--app-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.app-shell-page .sidebar-collapse-button:hover {
  background: var(--app-primary);
  color: #ffffff;
}

@media (min-width: 981px) {
  .app-shell-page .dashboard-shell.sidebar-collapsed .sidebar {
    padding-inline: 12px;
    align-items: center;
  }

  .app-shell-page .dashboard-shell.sidebar-collapsed .brand-box {
    width: 100%;
    padding-inline: 0;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
  }

  .app-shell-page .dashboard-shell.sidebar-collapsed .brand-copy,
  .app-shell-page .dashboard-shell.sidebar-collapsed .nav-item span,
  .app-shell-page .dashboard-shell.sidebar-collapsed .nav-group-title span,
  .app-shell-page .dashboard-shell.sidebar-collapsed .nav-chevron,
  .app-shell-page .dashboard-shell.sidebar-collapsed .nav-submenu {
    display: none !important;
  }

  .app-shell-page .dashboard-shell.sidebar-collapsed .sidebar-collapse-button {
    margin-left: 0;
  }

  .app-shell-page .dashboard-shell.sidebar-collapsed .sidebar-nav,
  .app-shell-page .dashboard-shell.sidebar-collapsed .nav-group {
    width: 100%;
  }

  .app-shell-page .dashboard-shell.sidebar-collapsed .nav-item,
  .app-shell-page .dashboard-shell.sidebar-collapsed .nav-group-title {
    width: 52px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    margin-inline: auto;
    justify-content: center;
    gap: 0;
  }

  .app-shell-page .dashboard-shell.sidebar-collapsed .nav-item i,
  .app-shell-page .dashboard-shell.sidebar-collapsed .nav-group-title i:first-child {
    width: auto;
    min-width: 0;
    font-size: 1.05rem;
  }
}

/* ==========================================================
   Sidebar: máquina de estados AUTO / PINNED
   AUTO   -> .dashboard-shell.sidebar-collapsed (compacto; hover lo
             expande temporalmente como overlay, ver más abajo)
   PINNED -> .dashboard-shell.sidebar-pinned (expandido de forma fija;
             visualmente es el layout "expandido" original, sin clase
             sidebar-collapsed, así que no necesita reglas de ancho
             propias)
   Clases aplicadas por dashboard.js (y, para evitar parpadeo al
   recargar, por el <script> inline al inicio de .dashboard-shell en
   base_app.html, que lee la misma clave de localStorage).
   (El estado HIDDEN -- sidebar oculto por completo + botón de
   recuperación -- se eliminó a pedido: el único control manual ahora
   es el botón de fijar/pin.)
   ========================================================== */

/* El icono de pin (fa-thumbtack) se reutiliza para ambos estados:
   girado 45° = "fijado" (equivalente visual a unpin), sin girar =
   "sin fijar". Evita depender de un glifo de unpin que no siempre
   está disponible en el set gratuito de Font Awesome. */
.app-shell-page .sidebar-collapse-button i {
  transition: transform .18s ease;
}

.app-shell-page .sidebar-collapse-button.is-pinned i {
  transform: rotate(45deg);
}

@media (min-width: 981px) {
  /* Ancla .dashboard-main SIEMPRE a la 2da columna del grid. Es
     necesaria porque .sidebar deja de participar en el auto-placement
     del grid al ser position:fixed en AUTO (ver más abajo) -- sin
     esto, .dashboard-main (que pasa a ser el único hijo "en flujo" de
     .app-layout-body) cae por auto-placement en la 1ra columna (la
     reservada para el sidebar) en vez de la 2da, dejando el contenido
     aplastado/oculto ahí. */
  .app-shell-page .app-layout-body > .dashboard-main {
    grid-column: 2;
  }
}

/* AUTO en desktop: el sidebar usa position:sticky (igual que PINNED,
   ver .sidebar{position:sticky;top:0} en dashboard.css) -- ANTES era
   position:fixed + height:100vh, lo que lo sacaba por completo del
   flujo de .dashboard-shell (un flex-column con .app-layout-body
   {flex:1} + .app-footer{flex-shrink:0}, el patrón "sticky footer" ya
   existente) y lo anclaba al viewport completo sin importar dónde
   quedara el footer -- esa era la causa real de que invadiera/tapara
   el footer en páginas cortas. Con sticky, el sidebar vuelve a ser un
   ítem normal del grid .app-layout-body: por el "align-items: stretch"
   por defecto de CSS Grid, su alto queda acotado exactamente al alto
   de esa fila (que termina justo antes de .app-footer), sin necesidad
   de inventar un cálculo con variables de alto de header/footer.
   La columna reservada en .app-layout-body (86px, ver dashboard.css)
   sigue existiendo igual que antes: un track de grid con ancho
   explícito en px NO se agranda para acomodar a un hijo más ancho, así
   que aunque el sidebar crezca en :hover (ver bloque de abajo),
   .dashboard-main nunca se mueve (punto 6) -- el fixed no era
   necesario para lograr eso, solo para lo del alto, que ya no aplica. */
@media (min-width: 981px) {
  .app-shell-page .dashboard-shell.sidebar-collapsed .sidebar {
    position: sticky;
    top: 0;
    align-self: stretch;
    width: var(--app-sidebar-width-collapsed);
    min-width: var(--app-sidebar-width-collapsed);
    z-index: 50;
    transition: width .2s ease, min-width .2s ease, box-shadow .2s ease;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

/* HOVER: solo en dispositivos con hover real (mouse/trackpad) -- en
   táctil no existe :hover fiable, así que ahí el sidebar compacto
   simplemente se queda compacto hasta que se fije/oculte con los
   botones (punto 18). Mientras el sidebar está en AUTO (compacto,
   sin fijar), :hover solo cambia su "width" (y aplica sombra/z-index) --
   la columna del grid (.app-layout-body) NO cambia de ancho durante el
   hover, así que el contenido principal nunca se desplaza (punto 6). */
@media (hover: hover) and (pointer: fine) and (min-width: 981px) {
  .app-shell-page .dashboard-shell.sidebar-collapsed .sidebar:hover {
    width: var(--app-sidebar-width);
    min-width: var(--app-sidebar-width);
    z-index: 500;
    align-items: stretch;
    padding-inline: var(--app-space-sm);
    box-shadow: 20px 0 45px rgba(47, 20, 88, .16);
  }

  .app-shell-page .dashboard-shell.sidebar-collapsed .sidebar:hover .brand-box {
    width: auto;
    flex-direction: row;
    justify-content: flex-start;
    padding-block: 8px 14px;
  }

  .app-shell-page .dashboard-shell.sidebar-collapsed .sidebar:hover .brand-copy {
    display: block !important;
    min-width: 0;
  }

  .app-shell-page .dashboard-shell.sidebar-collapsed .sidebar:hover .nav-item,
  .app-shell-page .dashboard-shell.sidebar-collapsed .sidebar:hover .nav-group-title {
    height: auto;
    min-height: var(--app-control-height);
    padding-inline: var(--app-space-sm);
    margin-inline: 0;
    justify-content: flex-start;
    gap: var(--app-space-sm);
  }

  /* .nav-item no necesita más que shrink-to-fit (width:auto), pero
     .nav-group-title SÍ debe ocupar el 100% del ancho útil del
     sidebar: es lo que le da a ".nav-group-title span { flex:1 }" (ver
     dashboard.css) el espacio de sobra para empujar el chevron
     (.nav-chevron) hasta el extremo derecho -- con width:auto el botón
     se encoge a su contenido y el chevron queda pegado al texto. */
  .app-shell-page .dashboard-shell.sidebar-collapsed .sidebar:hover .nav-item {
    width: auto;
  }

  .app-shell-page .dashboard-shell.sidebar-collapsed .sidebar:hover .nav-group-title {
    width: 100%;
  }

  .app-shell-page .dashboard-shell.sidebar-collapsed .sidebar:hover .nav-item i,
  .app-shell-page .dashboard-shell.sidebar-collapsed .sidebar:hover .nav-group-title i:first-child {
    width: 22px;
    min-width: 22px;
    font-size: 1rem;
  }

  .app-shell-page .dashboard-shell.sidebar-collapsed .sidebar:hover .nav-item span,
  .app-shell-page .dashboard-shell.sidebar-collapsed .sidebar:hover .nav-group-title span {
    display: inline !important;
  }

  .app-shell-page .dashboard-shell.sidebar-collapsed .sidebar:hover .nav-chevron {
    display: inline-block !important;
  }

  /* El submenú vuelve a obedecer su propio acordeón (nav-group.is-collapsed,
     manejado por toggleSidebarAccordion en dashboard.js) en vez de la regla
     "todo oculto" del modo compacto -- no se toca esa lógica JS. */
  .app-shell-page .dashboard-shell.sidebar-collapsed .sidebar:hover .nav-group .nav-submenu {
    display: block !important;
  }

  .app-shell-page .dashboard-shell.sidebar-collapsed .sidebar:hover .nav-group.is-collapsed .nav-submenu,
  .app-shell-page .dashboard-shell.sidebar-collapsed .sidebar:hover .nav-group.collapsed .nav-submenu {
    display: none !important;
  }
}

/* Scrollbar del sidebar: delgado y discreto (no el scrollbar nativo
   grueso gris), reutilizando los colores/variables del sistema.
   .sidebar es el único contenedor scrollable relevante aquí -- no se
   aplica a toda la app. Firefox no soporta pseudo-elementos
   ::-webkit-scrollbar-*, de ahí el par scrollbar-width/scrollbar-color
   como equivalente nativo (sin librerías). */
.sidebar {
  scrollbar-width: thin;
  scrollbar-color: rgba(109, 40, 217, 0.20) transparent;
}

.sidebar::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(109, 40, 217, 0.20);
  border-radius: 999px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(109, 40, 217, 0.42);
}

.app-shell-page .dashboard-main,
.app-shell-page .app-main {
  padding: 18px 18px 24px;
  min-width: 0;
  overflow-x: hidden;
  max-width: 100%;
}

.app-shell-page .app-content {
  width: 100%;
  max-width: none;
  margin: 0;
  min-width: 0;
}

.app-shell-page .topbar {
  align-items: flex-start;
  margin-bottom: 12px;
}

.app-shell-page .app-topbar-menu {
  min-width: 0;
  flex: 1;
  gap: 12px;
}

.app-shell-page .topbar > .topbar-left {
  margin-right: auto;
}

.app-topbar-title {
  min-width: 0;
  padding-top: 2px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-topbar-page-icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: var(--app-primary);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.app-topbar-title-copy {
  min-width: 0;
}

.app-topbar-back {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--app-border, #ddd7ea);
  border-radius: 50%;
  background: #fff;
  color: var(--app-primary, #5b21b6);
  box-shadow: 0 4px 12px rgba(36, 16, 78, 0.08);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.app-topbar-back:hover {
  color: var(--app-primary-strong, #43158e);
  border-color: var(--app-primary, #5b21b6);
  box-shadow: 0 6px 16px rgba(91, 33, 182, 0.16);
  transform: translateX(-2px);
}

.app-topbar-back:focus-visible {
  outline: 3px solid rgba(91, 33, 182, 0.18);
  outline-offset: 2px;
}

.app-topbar-title-copy h2 {
  margin: 0;
  color: var(--app-primary-dark) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1.2;
}

.app-topbar-title-copy p {
  margin: 4px 0 0;
  color: var(--app-muted);
  font-size: .88rem;
}

.app-topbar-title-copy h2:empty,
.app-topbar-title-copy p:empty {
  display: none;
}

.app-shell-page .app-content .app-page-header,
.app-shell-page .app-content .page-header,
.app-shell-page .app-content .products-header,
.app-shell-page .app-content .clients-header,
.app-shell-page .app-content .users-header,
.app-shell-page .app-content .cash-header,
.app-shell-page .app-content .billing-header,
.app-shell-page .app-content .invoices-header,
.app-shell-page .app-content .catalog-header {
  margin-top: 0 !important;
  margin-bottom: 14px !important;
}

.app-shell-page .app-content .app-page-header > div:nth-child(2),
.app-shell-page .app-content .page-header-left > div:last-child,
.app-shell-page .app-content .products-header-content,
.app-shell-page .app-content .clients-title-group,
.app-shell-page .app-content .users-title-group,
.app-shell-page .app-content .cash-header-left > div:last-child,
.app-shell-page .app-content .billing-header-left > div:last-child,
.app-shell-page .app-content .invoices-title-group,
.app-shell-page .app-content .catalog-title-group {
  display: none !important;
}

.app-shell-page .app-content .app-page-icon,
.app-shell-page .app-content .page-icon,
.app-shell-page .app-content .products-icon-box,
.app-shell-page .app-content .clients-icon-box,
.app-shell-page .app-content .users-icon-box,
.app-shell-page .app-content .cash-icon-box,
.app-shell-page .app-content .billing-icon-box,
.app-shell-page .app-content .invoices-icon-box,
.app-shell-page .app-content .catalog-icon-box {
  display: none !important;
}

.app-shell-page .app-content .app-page-header:has(.app-button.primary),
.app-shell-page .app-content .products-header:has(.new-product-button),
.app-shell-page .app-content .clients-header:has(.new-client-button),
.app-shell-page .app-content .users-header:has(.new-user-button),
.app-shell-page .app-content .users-header:has(.new-role-button),
.app-shell-page .app-content .cash-header:has(.new-cash-button),
.app-shell-page .app-content .invoices-header:has(.new-invoice-button),
.app-shell-page .app-content .catalog-header:has(.new-item-button) {
  display: none !important;
}

.app-shell-page .toolbar-actions .new-product-button,
.app-shell-page .toolbar-actions .new-client-button,
.app-shell-page .toolbar-actions .new-user-button,
.app-shell-page .toolbar-actions .new-role-button,
.app-shell-page .toolbar-actions .new-cash-button,
.app-shell-page .toolbar-actions .new-invoice-button,
.app-shell-page .toolbar-actions .new-item-button,
.app-shell-page .toolbar-actions .app-button.primary,
.app-shell-page .toolbar-actions .roles-button,
.app-shell-page .toolbar-actions .app-toolbar-create-action {
  height: 42px !important;
  min-height: 42px !important;
  width: auto !important;
  min-width: max-content;
  margin: 0 !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
  border: none !important;
  background: var(--app-primary) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.app-shell-page .catalog-toolbar,
.app-shell-page .cash-toolbar,
.app-shell-page .invoices-toolbar,
.app-shell-page .products-toolbar,
.app-shell-page .clients-toolbar,
.app-shell-page .users-toolbar,
.app-shell-page .table-toolbar {
  align-items: center !important;
}

.app-shell-page .catalog-toolbar {
  display: flex !important;
  gap: 12px !important;
}

.app-shell-page .catalog-toolbar .search-box {
  flex: 1;
  min-width: 0;
}

.app-shell-page .toolbar-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: wrap;
}

.app-shell-page .products-card,
.app-shell-page .clients-card,
.app-shell-page .users-card,
.app-shell-page .inventory-container,
.app-shell-page .billing-container,
.app-shell-page .cash-container,
/* .subscriptions-container (Administración de suscripciones, listado y
   detalle) traía su propio "max-width: 1450px; margin: 0 auto;" (ver
   admin_suscripciones.css) pensado para autocentrarse, pero
   dashboard.css ya fuerza "margin: 0" (sin auto) a CUALQUIER <main>
   hijo directo de .app-content (".app-shell-page .app-content > main"),
   así que nunca llegaba a centrarse: quedaba con el ancho tope de
   1450px pegado a la izquierda y todo el espacio sobrante junto de
   forma asimétrica a la derecha. Se suma aquí al mismo grupo que ya
   usan Inventario/Facturación/Cajas para ocupar el ancho completo
   -- el margen simétrico real ya lo da el padding de .app-main
   (18px a cada lado), sin necesidad de un max-width propio. */
.app-shell-page .subscriptions-container {
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
}

.app-shell-page .products-layout,
.app-shell-page .clients-layout,
.app-shell-page .users-layout {
  grid-template-columns: minmax(230px, 260px) minmax(0, 1fr) !important;
  gap: 16px !important;
}

.app-shell-page .filters-card,
.app-shell-page .clients-filters-card,
.app-shell-page .users-filters-card {
  border-radius: var(--app-card-radius) !important;
  border-color: var(--app-border) !important;
  padding: 16px !important;
  box-shadow: none !important;
}

.app-shell-page .filter-group {
  margin-bottom: 10px !important;
}

.app-shell-page label,
.app-shell-page .filter-label {
  color: var(--app-primary-dark) !important;
  font-size: .8rem !important;
  margin-bottom: 6px !important;
}

.app-shell-page input,
.app-shell-page select,
.app-shell-page textarea,
.app-shell-page .filter-input,
.app-shell-page .search-input {
  min-height: var(--app-field-height) !important;
  height: var(--app-field-height) !important;
  border-radius: 11px !important;
  border-color: #dfe2ea !important;
  font-size: .86rem !important;
}

.app-shell-page textarea {
  height: auto !important;
  min-height: 88px !important;
}

.app-shell-page input:focus,
.app-shell-page select:focus,
.app-shell-page textarea:focus,
.app-shell-page .filter-input:focus,
.app-shell-page .search-input:focus {
  border-color: var(--app-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary) 14%, transparent) !important;
}

.app-shell-page .products-icon-box,
.app-shell-page .clients-icon-box,
.app-shell-page .users-icon-box,
.app-shell-page .page-icon,
.app-shell-page .custom-select-option.selected,
.app-shell-page .new-product-button,
.app-shell-page .new-client-button,
.app-shell-page .new-user-button,
.app-shell-page .filter-button.primary-filter-button,
.app-shell-page .primary-filter-button,
.app-shell-page .modal-confirm,
.app-shell-page .soft-button {
  background: var(--app-primary) !important;
}

.app-shell-page .products-title-group h1,
.app-shell-page .clients-title-group h1,
.app-shell-page .users-title-group h1,
.app-shell-page .section-title,
.app-shell-page h1,
.app-shell-page h2 {
  color: var(--app-primary-dark) !important;
}

.app-shell-page .products-header,
.app-shell-page .clients-header,
.app-shell-page .users-header,
.app-shell-page .page-header {
  margin-bottom: 14px !important;
}

.app-shell-page .products-title-group h1,
.app-shell-page .clients-title-group h1,
.app-shell-page .users-title-group h1,
.app-shell-page .page-header h1 {
  font-size: 1.15rem !important;
  font-weight: 600 !important;
}

.app-shell-page .products-title-group p,
.app-shell-page .clients-title-group p,
.app-shell-page .users-title-group p,
.app-shell-page .page-header p {
  font-size: .88rem !important;
}

.app-shell-page .summary-card,
.app-shell-page .mini-kpi-card,
.app-shell-page .kpi-card,
.app-shell-page .table-wrapper,
.app-shell-page .products-toolbar,
.app-shell-page .clients-toolbar {
  border-radius: var(--app-card-radius) !important;
  border-color: var(--app-border) !important;
}

.app-shell-page table thead th,
.app-shell-page .products-table thead th,
.app-shell-page .clients-table thead th {
  background: var(--app-primary) !important;
}

.appearance-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.theme-option {
  min-height: 64px;
  border: 1px solid var(--app-border);
  border-radius: 14px;
  background: #fff;
  color: var(--app-primary-dark);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
}

.theme-option:hover,
.theme-option.active {
  border-color: var(--app-primary);
  background: var(--app-primary-soft);
}

.theme-swatch {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  flex-shrink: 0;
}

.theme-swatch.purple { background: #5b22b8; }
.theme-swatch.blue { background: #2563eb; }
.theme-swatch.green { background: #059669; }
.theme-swatch.rose { background: #e11d48; }

.theme-option strong,
.theme-option span {
  display: block;
}

.theme-option span {
  color: var(--app-muted);
  font-size: .78rem;
  margin-top: 2px;
}

@media (max-width: 1080px) {
  .app-shell-page .products-layout,
  .app-shell-page .clients-layout,
  .app-shell-page .users-layout {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  .appearance-options {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   Theme enforcement: reemplaza colores fijos de modulos
   ========================================================== */

html[data-theme] .brand-icon,
html[data-theme] .products-icon-box,
html[data-theme] .clients-icon-box,
html[data-theme] .users-icon-box,
html[data-theme] .page-icon,
html[data-theme] .kpi-icon.purple,
html[data-theme] .module-icon.products,
html[data-theme] .module-icon.users,
html[data-theme] .modal-header.purple,
html[data-theme] .new-product-button,
html[data-theme] .new-client-button,
html[data-theme] .new-user-button,
html[data-theme] .roles-button,
html[data-theme] .new-category-button,
html[data-theme] .new-unit-button,
html[data-theme] .new-tax-button,
html[data-theme] .primary-filter-button,
html[data-theme] .filter-button.primary-filter-button,
html[data-theme] .modal-confirm,
html[data-theme] .soft-button,
html[data-theme] .action-button.insights-button,
html[data-theme] .ai-button,
html[data-theme] .insights-button,
html[data-theme] .custom-select-option.selected,
html[data-theme] table thead th,
html[data-theme] .products-table thead th,
html[data-theme] .clients-table thead th,
html[data-theme] .users-table thead th,
html[data-theme] .catalog-table thead th,
html[data-theme] .table-wrapper thead th {
  background: var(--app-primary) !important;
  background-color: var(--app-primary) !important;
  color: #ffffff !important;
}

html[data-theme] .hero-card,
html[data-theme] .modal-header.purple {
  background: linear-gradient(90deg, var(--app-primary-dark), var(--app-primary)) !important;
}

html[data-theme] .nav-item.active,
html[data-theme] .nav-item:hover,
html[data-theme] .nav-group-title:hover,
html[data-theme] .nav-group:has(.nav-subitem.active) .nav-group-title,
html[data-theme] .nav-subitem.active,
html[data-theme] .nav-subitem:hover,
html[data-theme] .profile-dropdown button:hover,
html[data-theme] .custom-select-option:hover,
html[data-theme] .theme-option:hover,
html[data-theme] .theme-option.active {
  background: var(--app-primary-soft) !important;
  color: var(--app-primary) !important;
}

html[data-theme] .nav-item.active i,
html[data-theme] .nav-item:hover i,
html[data-theme] .nav-group-title:hover i,
html[data-theme] .nav-subitem.active i,
html[data-theme] .nav-subitem:hover i,
html[data-theme] .compact-selector i,
html[data-theme] .custom-select-trigger i:first-child,
html[data-theme] .topbar-icon,
html[data-theme] .profile-avatar,
html[data-theme] .filters-title i,
html[data-theme] .filters-card-header i,
html[data-theme] .search-icon,
html[data-theme] .back-button,
html[data-theme] .icon-button.info-icon,
html[data-theme] .custom-select-option.selected,
html[data-theme] .custom-select-option:hover {
  color: var(--app-primary) !important;
}

html[data-theme] .sidebar,
html[data-theme] .topbar-icon,
html[data-theme] .profile-card,
html[data-theme] .context-card,
html[data-theme] .custom-select-trigger,
html[data-theme] .custom-select-menu,
html[data-theme] .products-toolbar,
html[data-theme] .clients-toolbar,
html[data-theme] .filters-card,
html[data-theme] .clients-filters-card,
html[data-theme] .users-filters-card,
html[data-theme] .summary-card,
html[data-theme] .mini-kpi-card,
html[data-theme] .table-wrapper,
html[data-theme] .modal-card,
html[data-theme] .theme-option {
  border-color: color-mix(in srgb, var(--app-primary) 18%, #e8e8ef) !important;
}

html[data-theme] input:focus,
html[data-theme] select:focus,
html[data-theme] textarea:focus,
html[data-theme] .filter-input:focus,
html[data-theme] .search-input:focus,
html[data-theme] .custom-select-trigger:hover,
html[data-theme] .custom-selector.open .custom-select-trigger {
  border-color: var(--app-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary) 14%, transparent) !important;
}

html[data-theme] .products-title-group h1,
html[data-theme] .clients-title-group h1,
html[data-theme] .users-title-group h1,
html[data-theme] .page-header h1,
html[data-theme] .filters-title h2,
html[data-theme] .filters-card-header h2,
html[data-theme] .section-header h2,
html[data-theme] .custom-select-trigger span,
html[data-theme] .profile-card strong,
html[data-theme] h1,
html[data-theme] h2,
html[data-theme] h3 {
  color: var(--app-primary-dark) !important;
}

html[data-theme] .filters-divider {
  background: var(--app-primary) !important;
}

html[data-theme] .pdf-button {
  background: #ef4444 !important;
  color: #ffffff !important;
}

html[data-theme] .excel-button {
  background: #16a34a !important;
  color: #ffffff !important;
}

/* Facturas realizadas */
html[data-theme] .invoices-page .primary-filter {
  background: var(--app-primary) !important;
  background-color: var(--app-primary) !important;
  color: #ffffff !important;
}

html[data-theme] .invoices-page .secondary-filter {
  color: var(--app-primary) !important;
  border-color: color-mix(in srgb, var(--app-primary) 28%, #d4d4dc) !important;
}

html[data-theme] .invoices-page .form-input:focus {
  border-color: var(--app-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary) 14%, transparent) !important;
}

html[data-theme] .invoices-page .table-footer {
  background: #f4f4f7 !important;
}

/* Acordeones internos ligados al tema */
html[data-theme] .nav-submenu {
  border-left-color: color-mix(in srgb, var(--app-primary) 18%, #ede9fe) !important;
}

html[data-theme] .nav-subitem {
  color: color-mix(in srgb, var(--app-primary-dark) 62%, #64748b) !important;
}

html[data-theme] .nav-subitem i {
  color: var(--app-primary) !important;
}

html[data-theme] .nav-subitem.active,
html[data-theme] .nav-subitem:hover {
  background: var(--app-primary-soft) !important;
  color: var(--app-primary) !important;
}

html[data-theme] .nav-subitem.active i,
html[data-theme] .nav-subitem:hover i,
html[data-theme] .nav-chevron {
  color: var(--app-primary) !important;
}

html[data-theme] .nav-group-title {
  color: color-mix(in srgb, var(--app-primary-dark) 62%, #334155) !important;
}

html[data-theme] .nav-group-title i:first-child {
  color: color-mix(in srgb, var(--app-primary-dark) 58%, #475569) !important;
}

html[data-theme] .nav-group-title:hover i:first-child,
html[data-theme] .nav-group:has(.nav-subitem.active) .nav-group-title i:first-child {
  color: var(--app-primary) !important;
}

/* Theme v4: cobertura completa dashboard + pantallas de seleccion
   Tipografía global de la aplicación (Inter, cargada centralizadamente
   en dashboard/templates/dashboard/base_app.html vía Google Fonts).
   Se extiende explícitamente a controles de formulario, tablas y a
   Tom Select porque esos elementos NO heredan automáticamente el
   font-family de <body> en la mayoría de navegadores (button/input/
   select/textarea usan la fuente del sistema por la hoja de estilos
   por defecto del navegador salvo que se declare explícitamente).
   No se toca ningún selector de iconos (.fa-*, i, etc.): Font Awesome
   define su propia font-family sobre esas clases y esa regla, al ser
   más específica que la heredada del body, sigue ganando sin problema. */
html[data-theme] body,
html[data-theme] body.dashboard-page,
html[data-theme] .dashboard-page,
html[data-theme] .company-page,
html[data-theme] .branch-page,
html[data-theme] button,
html[data-theme] input,
html[data-theme] select,
html[data-theme] option,
html[data-theme] textarea,
html[data-theme] table,
html[data-theme] .ts-wrapper,
html[data-theme] .ts-control,
html[data-theme] .ts-control input,
html[data-theme] .ts-wrapper .item,
html[data-theme] .ts-dropdown,
html[data-theme] .ts-dropdown input,
html[data-theme] .ts-dropdown .option {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

html[data-theme] .company-page,
html[data-theme] .branch-page,
html[data-theme] .company-container,
html[data-theme] .branch-container {
  background: var(--app-bg) !important;
}

html[data-theme] .company-title,
html[data-theme] .branch-title,
html[data-theme] .branch-title span {
  color: var(--app-primary-dark) !important;
}

html[data-theme] .company-subtitle,
html[data-theme] .company-name,
html[data-theme] .branch-name {
  color: color-mix(in srgb, var(--app-primary-dark) 48%, #8c8c8c) !important;
}

html[data-theme] .company-icon,
html[data-theme] .company-option[href] .company-icon {
  background: var(--app-primary) !important;
  color: #ffffff !important;
}

html[data-theme] .branch-icon.outlined {
  border-color: var(--app-primary) !important;
  color: var(--app-primary) !important;
}

html[data-theme] .company-page .back-button,
html[data-theme] .branch-page .back-button {
  color: var(--app-primary) !important;
}

html[data-theme] .hero-card h1,
html[data-theme] .hero-card p,
html[data-theme] .hero-card strong,
html[data-theme] .hero-card span,
html[data-theme] .hero-insight,
html[data-theme] .hero-insight p,
html[data-theme] .hero-insight strong,
html[data-theme] .hero-insight span {
  color: #ffffff !important;
}

html[data-theme] .hero-insight-icon {
  background: #ffffff !important;
  color: var(--app-primary) !important;
}

html[data-theme] .quick-actions-list a,
html[data-theme] .footer-contact a,
html[data-theme] .app-footer strong,
html[data-theme] .app-footer span {
  color: var(--app-primary) !important;
}

html[data-theme] .quick-actions-list a i {
  background: var(--app-primary-soft) !important;
  color: var(--app-primary) !important;
}

html[data-theme] .app-footer,
html[data-theme] .quick-actions-side,
html[data-theme] .ai-wide-card,
html[data-theme] .card-block {
  border-color: color-mix(in srgb, var(--app-primary) 18%, #e8e8ef) !important;
}

html[data-theme] .custom-select-menu {
  background: #ffffff !important;
  border-color: color-mix(in srgb, var(--app-primary) 24%, #e8e8ef) !important;
}

html[data-theme] .custom-select-option,
html[data-theme] .custom-select-option.selected {
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  color: var(--app-primary-dark) !important;
  background: transparent !important;
  opacity: 1 !important;
}

html[data-theme] .custom-select-option:hover,
html[data-theme] .custom-select-option.selected:hover,
html[data-theme] .custom-select-option.selected {
  background: var(--app-primary-soft) !important;
  color: var(--app-primary) !important;
}

html[data-theme] .custom-select-trigger,
html[data-theme] .topbar-icon,
html[data-theme] .profile-card,
html[data-theme] .context-card {
  background: #ffffff !important;
}

html[data-theme] .nav-item,
html[data-theme] .nav-group-title,
html[data-theme] .nav-subitem {
  font-family: inherit !important;
}

html[data-theme] .nav-item.active,
html[data-theme] .nav-item.active span,
html[data-theme] .nav-item:hover,
html[data-theme] .nav-item:hover span,
html[data-theme] .nav-subitem.active,
html[data-theme] .nav-subitem.active span,
html[data-theme] .nav-subitem:hover,
html[data-theme] .nav-subitem:hover span {
  color: var(--app-primary) !important;
}

/* Theme v5: sistema de formularios compartido */
.app-page-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px 0 18px;
}

.app-page-header > div:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.app-page-header h1 {
  margin: 0;
  color: var(--app-primary-dark) !important;
  font-size: 1.25rem;
  font-weight: 650 !important;
}

.app-page-header p {
  margin: 4px 0 0;
  color: var(--app-muted);
}

.app-page-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--app-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.app-form-shell {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  width: 100%;
  min-width: 0;
}

.app-form-card,
.app-form-aside,
.app-list-panel {
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--app-primary) 18%, #e8e8ef);
  border-radius: var(--app-card-radius);
  padding: 16px;
  min-width: 0;
}

.app-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}

.app-field {
  min-width: 0;
}

.app-field.full {
  grid-column: 1 / -1;
}

.app-field label {
  display: block;
  margin-bottom: 6px;
  color: var(--app-primary-dark) !important;
  font-size: .82rem !important;
}

.app-form-control,
.app-field input,
.app-field select,
.app-field textarea {
  width: 100%;
  min-height: 42px !important;
  border: 1px solid #dfe2ea !important;
  border-radius: 11px !important;
  background: #fff !important;
  color: var(--app-primary-dark) !important;
  padding: 0 12px;
  font-size: .9rem !important;
  outline: none;
}

.app-field textarea {
  padding-top: 10px;
  min-height: 92px !important;
}

.app-form-control:focus,
.app-field input:focus,
.app-field select:focus,
.app-field textarea:focus {
  border-color: var(--app-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary) 14%, transparent) !important;
}

.app-field small {
  display: block;
  color: #ef4444;
  margin-top: 5px;
  font-size: .78rem;
}

.app-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--app-border);
  margin-top: 16px;
  padding-top: 16px;
}

.app-button {
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--app-primary) 24%, #dfe2ea);
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  font-size: .9rem;
  cursor: pointer;
}

.app-button.primary {
  background: var(--app-primary);
  color: #fff !important;
  border-color: var(--app-primary);
}

.app-list-panel {
  display: grid;
  gap: 8px;
}

.app-list-row {
  min-height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
}

.app-list-row:hover,
.app-list-row.active {
  background: var(--app-primary-soft);
}

.app-list-item {
  min-height: 40px;
  border-radius: 10px;
  color: var(--app-primary-dark);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  text-decoration: none;
  flex: 1;
  min-width: 0;
}

.app-list-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-list-row:hover .app-list-item,
.app-list-row.active .app-list-item {
  color: var(--app-primary) !important;
}

.app-icon-danger {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #ef4444;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.app-icon-danger:hover {
  background: #fee2e2;
  color: #dc2626;
}

.app-avatar-preview {
  width: 88px;
  height: 88px;
  border-radius: 999px;
  background: var(--app-primary-soft);
  color: var(--app-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  overflow: hidden;
  margin-bottom: 12px;
}

.app-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-form-aside strong,
.app-form-aside span {
  display: block;
}

.app-form-aside span {
  color: var(--app-muted);
  margin-top: 4px;
  word-break: break-word;
}

.profile-dropdown a {
  min-height: 40px;
  border: none;
  background: transparent;
  border-radius: 12px;
  color: var(--app-primary-dark);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}

.profile-dropdown a:hover {
  background: var(--app-primary-soft);
  color: var(--app-primary) !important;
}

@media (max-width: 980px) {
  .app-form-shell,
  .app-form-grid {
    grid-template-columns: 1fr;
  }
}

/* Theme v6: formularios compactos reutilizando registrar empresa/sucursal */
.app-compact-form-page .app-content {
  max-width: none;
  margin: 0;
}

.app-compact-form-card {
  width: 100%;
  max-width: 760px;
  margin: 12px auto 28px;
  background: #ffffff;
  border: 1px solid color-mix(in srgb, var(--app-primary) 16%, #e5e7eb);
  border-radius: 24px;
  padding: 24px 28px 22px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .03);
}

.app-compact-form-card .form-header,
.app-compact-form-card-inner .form-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.app-page-icon.compact {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  font-size: 1.1rem;
}

.app-compact-form-card .header-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-compact-form-card h1 {
  margin: 0;
  color: var(--app-primary-dark) !important;
  font-size: 1.15rem;
  font-weight: 650 !important;
}

.app-compact-form-card p {
  margin: .18rem 0 0;
  color: var(--app-muted);
  font-size: .88rem;
}

.app-photo-section {
  margin-bottom: 14px;
}

.app-photo-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.app-photo-preview {
  width: 70px;
  height: 70px;
  min-width: 70px;
  border: 1.5px dashed var(--app-primary);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--app-primary);
  overflow: hidden;
}

.app-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-photo-info {
  flex: 1;
}

.app-photo-info input[type="file"] {
  width: 100%;
  min-height: 36px !important;
  height: auto !important;
  padding: 6px 10px !important;
}

.app-photo-info p {
  margin-top: 6px;
  font-size: .78rem;
}

.app-photo-preview.circle {
  border-radius: 999px;
}

.app-upload-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--app-primary) 14%, #e5e7eb);
  border-radius: 14px;
  background: color-mix(in srgb, var(--app-primary-soft) 42%, #ffffff);
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.app-logo-preview {
  width: 58px;
  height: 58px;
  min-width: 58px;
  border-radius: 14px;
  background: #ffffff;
  border: 1.5px dashed color-mix(in srgb, var(--app-primary) 55%, #cbd5e1);
  color: var(--app-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  overflow: hidden;
}

.app-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-upload-control {
  flex: 1;
  min-width: 0;
  max-width: 100%;
}

.app-upload-control span {
  display: block;
  margin-top: 6px;
  color: var(--app-muted);
  font-size: .78rem;
}

.app-file-input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  height: auto !important;
  min-height: 38px !important;
  padding: 6px !important;
  cursor: pointer;
}

.app-file-input::file-selector-button {
  min-height: 28px;
  margin-right: 10px;
  border: none;
  border-radius: 9px;
  background: var(--app-primary);
  color: #ffffff;
  padding: 0 12px;
  font-weight: 650;
  cursor: pointer;
}

.app-check-field {
  display: flex;
  align-items: end;
}

.app-check-card {
  width: 100%;
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--app-primary) 14%, #dfe2ea);
  border-radius: 11px;
  padding: 8px 10px;
  display: flex !important;
  align-items: center;
  gap: 10px;
  color: var(--app-primary-dark) !important;
  cursor: pointer;
  background: #ffffff;
  margin: 0 !important;
}

.app-check-card input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.app-check-toggle {
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: #dbe1ea;
  position: relative;
  flex-shrink: 0;
  transition: background .18s ease;
}

.app-check-toggle::after {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #ffffff;
  position: absolute;
  left: 2px;
  top: 2px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .18);
  transition: transform .18s ease;
}

.app-check-card input[type="checkbox"]:checked + .app-check-toggle {
  background: var(--app-primary);
}

.app-check-card input[type="checkbox"]:checked + .app-check-toggle::after {
  transform: translateX(16px);
}

.app-native-select-hidden {
  display: none !important;
}

.app-search-select {
  position: relative;
  width: 100%;
}

.app-search-select-trigger {
  width: 100%;
  min-height: 38px;
  border: 1px solid #dfe2ea;
  border-radius: 9px;
  background: #ffffff;
  color: var(--app-primary-dark);
  padding: 0 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: .88rem;
  text-align: left;
  cursor: pointer;
}

.app-search-select-trigger span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-search-select-trigger i {
  color: var(--app-primary);
  font-size: .8rem;
}

.app-search-select.open .app-search-select-trigger,
.app-search-select-trigger:focus {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary) 14%, transparent);
  outline: none;
}

.app-search-select-menu {
  position: absolute;
  z-index: 45;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: none;
  gap: 8px;
  padding: 8px;
  background: #ffffff;
  border: 1px solid color-mix(in srgb, var(--app-primary) 22%, #e5e7eb);
  border-radius: 13px;
  box-shadow: 0 16px 35px rgba(15, 23, 42, .14);
}

.app-search-select.open .app-search-select-menu {
  display: grid;
}

.app-search-select-input {
  min-height: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  padding: 0 10px !important;
  font-size: .84rem !important;
}

.app-search-select-list {
  max-height: 190px;
  overflow-y: auto;
  display: grid;
  gap: 4px;
}

.app-search-select-option {
  min-height: 34px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--app-primary-dark);
  padding: 0 10px;
  text-align: left;
  cursor: pointer;
  font-size: .85rem;
}

.app-search-select-option:hover,
.app-search-select-option.selected {
  background: var(--app-primary-soft);
  color: var(--app-primary);
}

.app-search-select-option:disabled,
.app-search-select-empty {
  color: var(--app-muted);
  cursor: not-allowed;
  padding: 8px 10px;
  font-size: .84rem;
}

.app-form-grid.compact,
.app-compact-form-card-inner .app-form-grid {
  gap: 11px 14px;
}

.app-compact-form-card .app-field label,
.app-compact-form-card-inner .app-field label {
  font-size: .84rem !important;
  margin-bottom: 6px !important;
}

.app-compact-form-card .app-form-control,
.app-compact-form-card .app-field input,
.app-compact-form-card .app-field select,
.app-compact-form-card-inner .app-form-control,
.app-compact-form-card-inner .app-field input,
.app-compact-form-card-inner .app-field select {
  min-height: 38px !important;
  height: 38px !important;
  border-radius: 9px !important;
  font-size: .88rem !important;
}

.app-form-divider {
  width: 100%;
  height: 1px;
  background: var(--app-primary);
  opacity: .55;
  margin: 16px 0 12px;
}

.app-form-actions.split {
  justify-content: space-between;
}

.app-button.ghost {
  color: var(--app-primary) !important;
  background: #fff;
  border-color: var(--app-primary);
}

.app-form-shell .app-compact-form-card-inner {
  max-width: 100%;
}

@media (max-width: 760px) {
  .app-compact-form-card {
    padding: 20px 16px;
  }

  .app-photo-row {
    align-items: flex-start;
  }
}

/* Formularios de panel independientes */
.app-inline-back {
  color: var(--app-primary) !important;
  font-size: 1.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  text-decoration: none;
  flex-shrink: 0;
}

.app-compact-form-card .header-title {
  flex: 1;
}

.app-field small.muted {
  color: var(--app-muted);
}

/* Header: selectores compactos de empresa y sucursal */
.app-shell-page .context-card.compact-selectors {
  height: 54px !important;
  min-height: 54px !important;
  padding: 7px !important;
  gap: 8px !important;
  align-items: center !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.app-shell-page .context-card.compact-selectors .custom-select-form,
.app-shell-page .context-card.compact-selectors .custom-selector {
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

.app-shell-page .context-card.compact-selectors .custom-select-trigger {
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  align-items: center !important;
}

/* Clientes: alineacion final con facturas */
body.clients-page.app-shell-page .clients-layout {
  grid-template-columns: 270px minmax(0, 1fr) !important;
  gap: 18px !important;
}

body.clients-page.app-shell-page .clients-filters-card {
  padding: 18px !important;
  position: sticky;
  top: 16px;
}

body.clients-page.app-shell-page .filter-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.clients-page.app-shell-page .filter-button {
  width: 100% !important;
  min-width: 0 !important;
}

body.clients-page.app-shell-page .toolbar-actions {
  flex-wrap: nowrap !important;
}

body.clients-page.app-shell-page .clients-table,
body.clients-page.app-shell-page .table-footer {
  min-width: 1080px !important;
}

body.clients-page.app-shell-page .table-footer {
  width: 1080px !important;
  box-sizing: border-box;
  border-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

body.clients-page.app-shell-page .clients-table thead th:first-child {
  width: 138px;
  min-width: 138px;
}

/* Selects con busqueda para filtros de modulos */
.app-shell-page .select-enhanced-host {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: block !important;
  overflow: visible !important;
}

.app-shell-page .select-enhanced-host > .input-icon,
.app-shell-page .select-enhanced-host > .filter-icon,
.app-shell-page .select-enhanced-host > .select-arrow {
  display: none !important;
}

.app-shell-page .app-search-select-native {
  display: none !important;
}

.app-shell-page .filters-card,
.app-shell-page .clients-filters-card,
.app-shell-page .users-filters-card,
.app-shell-page .roles-filters-card,
.app-shell-page .products-filters-card {
  overflow: visible !important;
}

.app-shell-page .app-search-select {
  width: 100%;
  position: relative;
  z-index: 3;
}

.app-shell-page .app-search-select.open {
  z-index: 60;
}

.app-shell-page .app-search-select-trigger {
  width: 100% !important;
  min-height: 42px !important;
  height: 42px !important;
  border: 1px solid color-mix(in srgb, var(--app-primary) 18%, #d9dee8) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  padding: 0 12px !important;
  display: grid !important;
  grid-template-columns: 26px minmax(0, 1fr) 18px !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--app-primary-dark) !important;
  cursor: pointer;
  box-shadow: none !important;
}

.app-shell-page .app-search-select-trigger:hover,
.app-shell-page .app-search-select.open .app-search-select-trigger {
  border-color: var(--app-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary) 12%, transparent) !important;
}

.app-shell-page .app-search-select-icon,
.app-shell-page .app-search-select-caret {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: color-mix(in srgb, var(--app-primary-dark) 42%, #9ca3af) !important;
}

.app-shell-page .app-search-select-label {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: left !important;
  color: var(--app-primary-dark) !important;
}

.app-shell-page .app-search-select-menu {
  top: calc(100% + 8px) !important;
  border-radius: 12px !important;
  border-color: color-mix(in srgb, var(--app-primary) 22%, #d9dee8) !important;
  box-shadow: 0 18px 36px rgba(15, 23, 42, .14) !important;
}

.app-shell-page .app-search-select-search {
  position: relative;
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--app-primary) 18%, #d9dee8) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  display: flex;
  align-items: center;
}

.app-shell-page .app-search-select-search i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--app-primary);
  pointer-events: none;
}

.app-shell-page .app-search-select-input {
  width: 100% !important;
  padding-left: 36px !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--app-primary-dark) !important;
}

.app-shell-page .app-search-select-option {
  font-weight: 600;
}

.app-shell-page .app-search-select-option:hover,
.app-shell-page .app-search-select-option.selected {
  background: var(--app-primary-soft) !important;
  color: var(--app-primary) !important;
}

/* Botones de filtros y pies de tabla homologados */
.app-shell-page .users-filters .filter-actions,
.app-shell-page .roles-filters .filter-actions,
.app-shell-page .filters-card > .filter-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: center !important;
}

.app-shell-page .users-filters .filter-button,
.app-shell-page .roles-filters .filter-button,
.app-shell-page .filters-card > .filter-actions .filter-button,
.app-shell-page .filters-card > .filter-actions .filter-clear-button {
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.app-shell-page .filters-card > .primary-filter-button {
  width: 100% !important;
}

body.products-page.app-shell-page .filters-card {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

body.products-page.app-shell-page .filters-card > :not(.primary-filter-button):not(.filter-actions) {
  grid-column: 1 / -1;
}

body.products-page.app-shell-page .filters-card > .primary-filter-button,
body.products-page.app-shell-page .filters-card > .filter-actions {
  grid-column: auto !important;
  align-self: stretch !important;
}

body.products-page.app-shell-page .filters-card > .filter-actions {
  display: flex !important;
  align-items: stretch !important;
  margin-top: 0 !important;
}

body.products-page.app-shell-page .filters-card > .filter-actions .filter-clear-button {
  font-weight: 500 !important;
  font-size: .88rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  padding: 0 12px !important;
  height: 44px !important;
  min-height: 44px !important;
  align-self: stretch !important;
}

body.products-page.app-shell-page .filters-card > .primary-filter-button {
  height: 44px !important;
  min-height: 44px !important;
}

.app-shell-page .table-footer,
.app-shell-page .table-wrapper .table-footer,
.app-shell-page .table-card .table-footer {
  width: 100% !important;
  min-width: inherit !important;
  border-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  box-sizing: border-box !important;
}

.app-shell-page .table-wrapper {
  width: 100% !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

body.products-page.app-shell-page .products-table,
body.products-page.app-shell-page .table-wrapper .table-footer {
  width: max(100%, 1040px) !important;
  min-width: 1040px !important;
}

body.users-shell-page.app-shell-page .users-table,
body.users-shell-page.app-shell-page .table-wrapper .table-footer {
  width: max(100%, 1380px) !important;
  min-width: 1380px !important;
  max-width: none !important;
}

body.users-shell-page.app-shell-page .table-wrapper {
  background: #f1f2f6 !important;
}

body.users-shell-page.app-shell-page .users-table tbody {
  background: #f1f2f6 !important;
}

body.users-shell-page.app-shell-page .users-filters .filter-button {
  font-weight: 500 !important;
}

/* Roles: separa la tabla de los anchos especiales de usuarios */
body.users-shell-page.app-shell-page .roles-page .roles-header {
  display: none !important;
}

body.users-shell-page.app-shell-page .roles-page .roles-layout {
  grid-template-columns: 270px minmax(0, 1fr) !important;
  gap: 18px !important;
}

body.users-shell-page.app-shell-page .roles-page .roles-top-panels {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.users-shell-page.app-shell-page .roles-page .toolbar-actions {
  flex-wrap: nowrap !important;
}

body.users-shell-page.app-shell-page .roles-page .new-role-button,
body.users-shell-page.app-shell-page .roles-page .action-button {
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 12px !important;
}

body.users-shell-page.app-shell-page .roles-page .roles-table,
body.users-shell-page.app-shell-page .roles-page .table-wrapper .table-footer {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

body.users-shell-page.app-shell-page .roles-page .roles-table {
  table-layout: fixed !important;
}

body.users-shell-page.app-shell-page .roles-page .roles-table th,
body.users-shell-page.app-shell-page .roles-page .roles-table td {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.users-shell-page.app-shell-page .roles-page .roles-table th:first-child,
body.users-shell-page.app-shell-page .roles-page .roles-table td:first-child {
  width: 138px !important;
}

body.users-shell-page.app-shell-page .roles-page .table-wrapper {
  background: #f1f2f6 !important;
}

body.users-shell-page.app-shell-page .roles-page .roles-table tbody {
  background: #f1f2f6 !important;
}

body.users-shell-page.app-shell-page .roles-page .roles-table tbody td {
  background: #ffffff !important;
}

body.users-shell-page.app-shell-page .roles-page .roles-filters .filter-button {
  font-weight: 500 !important;
}

body.cash-page.app-shell-page .cash-table {
  min-width: 980px !important;
}

body.cash-page.app-shell-page .cash-table,
body.cash-page.app-shell-page .table-wrapper .table-footer {
  width: max(100%, 980px) !important;
  max-width: none !important;
}

body.cash-page.app-shell-page .table-wrapper {
  background: #f1f2f6 !important;
}

body.cash-page.app-shell-page .table-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

body.cash-page.app-shell-page .table-card .table-wrapper {
  border: 1px solid var(--app-border) !important;
  border-radius: 14px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

body.cash-page.app-shell-page .cash-table tbody {
  background: #f1f2f6 !important;
}

body.cash-page.app-shell-page .cash-table tbody td {
  background: #ffffff !important;
}

/* Cajas con filtros laterales */
body.cash-page.app-shell-page .cash-container {
  display: grid !important;
  grid-template-columns: 270px minmax(0, 1fr) !important;
  gap: 18px !important;
}

body.cash-page.app-shell-page .cash-kpis {
  gap: 14px !important;
  margin-bottom: 0 !important;
}

body.cash-page.app-shell-page .kpi-card {
  min-height: 84px !important;
  padding: 14px 16px !important;
}

body.cash-page.app-shell-page .cash-header,
body.cash-page.app-shell-page .cash-kpis {
  grid-column: 1 / -1 !important;
}

body.cash-page.app-shell-page .cash-container > form {
  grid-column: 1 !important;
  grid-row: 3 / span 2 !important;
}

body.cash-page.app-shell-page .cash-toolbar {
  grid-column: 2 !important;
  grid-row: 3 !important;
}

body.cash-page.app-shell-page .table-card {
  grid-column: 2 !important;
  grid-row: 4 !important;
}

body.cash-page.app-shell-page .filters-card {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 16px !important;
  position: sticky !important;
  top: 16px !important;
}

body.cash-page.app-shell-page .filters-card .filter-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.cash-page.app-shell-page .filters-card .filter-button {
  width: 100% !important;
  min-width: 0 !important;
  font-weight: 500 !important;
}

body.cash-page.app-shell-page .cash-toolbar .export-button,
body.cash-page.app-shell-page .cash-toolbar .new-cash-button {
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
}

body.cash-page.app-shell-page .cash-toolbar .ai-button {
  background: #2563eb !important;
  background-color: #2563eb !important;
  color: #ffffff !important;
}

body.cash-page.app-shell-page .cash-toolbar .search-box input {
  height: 42px !important;
  border-radius: 12px !important;
}

body.cash-page.app-shell-page .cash-toolbar {
  margin-bottom: 0 !important;
  padding: 10px 14px !important;
}

body.cash-page.app-shell-page .filter-button.secondary {
  border: 1px solid color-mix(in srgb, var(--app-primary) 28%, #d4d4dc) !important;
  background: #ffffff !important;
  color: var(--app-primary) !important;
}

@media (max-width: 1100px) {
  body.cash-page.app-shell-page .cash-container {
    grid-template-columns: 1fr !important;
  }

  body.cash-page.app-shell-page .cash-container > form,
  body.cash-page.app-shell-page .cash-toolbar,
  body.cash-page.app-shell-page .table-card {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* IA siempre azul para diferenciarlo del color de apariencia */
.app-shell-page .ai-button,
.app-shell-page .insights-button,
.app-shell-page .toolbar-button.ai,
.app-shell-page .action-button.ai-button,
.app-shell-page .action-button.insights-button {
  background: #2563eb !important;
  background-color: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
}

.app-shell-page .ai-button:hover,
.app-shell-page .insights-button:hover,
.app-shell-page .toolbar-button.ai:hover,
.app-shell-page .action-button.ai-button:hover,
.app-shell-page .action-button.insights-button:hover {
  background: #1d4ed8 !important;
  background-color: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
}

@media (max-width: 1100px) {
  body.clients-page.app-shell-page .clients-layout {
    grid-template-columns: 1fr !important;
  }

  body.clients-page.app-shell-page .toolbar-actions {
    flex-wrap: wrap !important;
  }
}

/* ==========================================================
   Densidad responsive global
   Mantiene la experiencia compacta sin zoom ni transformaciones.
   ========================================================== */
:root {
  --app-font-base: clamp(13px, .73vw, 14px);
  --app-font-small: clamp(11px, .64vw, 12px);
  --app-control-height: clamp(38px, 2.15vw, 42px);
  --app-space-xs: clamp(5px, .35vw, 7px);
  --app-space-sm: clamp(8px, .55vw, 11px);
  --app-space-md: clamp(11px, .75vw, 14px);
  --app-space-lg: clamp(14px, 1vw, 18px);
  --app-card-padding: clamp(13px, .9vw, 16px);
  --app-sidebar-width: clamp(214px, 13.2vw, 238px);
  --app-sidebar-width-collapsed: 76px;
  --app-density-radius: clamp(11px, .75vw, 14px);
  --app-field-height: var(--app-control-height);
  --app-card-radius: var(--app-density-radius);
}

html {
  font-size: var(--app-font-base);
}

body.app-shell-page {
  font-size: 1rem;
}

@media (min-width: 981px) {
  .app-shell-page .app-layout-body {
    grid-template-columns: var(--app-sidebar-width) minmax(0, 1fr);
  }

  .app-shell-page .dashboard-shell.sidebar-collapsed .app-layout-body {
    grid-template-columns: var(--app-sidebar-width-collapsed) minmax(0, 1fr);
  }
}

.app-shell-page .sidebar {
  /* padding-right extra (respecto al resto de lados) para separar el
     contenido del scrollbar delgado -- ver estilos del scrollbar más
     arriba -- sin reducir el ancho útil de los nav-item ni desplazar
     los iconos. overflow-x:hidden evita cualquier scroll horizontal
     (compacto, hover o fijado) sin ocultar contenido que deba verse. */
  padding: var(--app-space-md) calc(var(--app-space-sm) + 4px) var(--app-space-md) var(--app-space-sm);
  gap: var(--app-space-md);
  overflow-x: hidden;
}

.app-shell-page .brand-box {
  gap: var(--app-space-sm);
  padding: var(--app-space-xs) 4px var(--app-space-md);
}

.app-shell-page .brand-icon {
  width: clamp(42px, 2.5vw, 48px);
  height: clamp(42px, 2.5vw, 48px);
  border-radius: var(--app-density-radius);
}

.app-shell-page .brand-box h1 { font-size: 1.05rem; }
.app-shell-page .brand-box p { font-size: .76rem; }
.app-shell-page .sidebar-nav { gap: var(--app-space-xs); }

.app-shell-page .nav-item,
.app-shell-page .nav-group-title {
  min-height: var(--app-control-height);
  padding-inline: var(--app-space-sm);
  gap: var(--app-space-sm);
  border-radius: var(--app-density-radius);
  font-size: .88rem;
}

.app-shell-page .nav-submenu { gap: 3px; }
.app-shell-page .nav-subitem {
  min-height: clamp(32px, 1.9vw, 36px);
  padding: 0 var(--app-space-sm) 0 clamp(24px, 1.8vw, 32px);
  gap: var(--app-space-sm);
  font-size: .82rem;
}

.app-shell-page .sidebar-collapse-button {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

.app-shell-page .dashboard-main,
.app-shell-page .app-main {
  padding: var(--app-space-md) var(--app-space-lg) var(--app-space-lg);
}

.app-shell-page .app-main > .topbar {
  margin: var(--app-space-md) var(--app-space-lg) var(--app-space-md);
}

.app-shell-page .topbar,
.app-shell-page .topbar-actions,
.app-shell-page .app-topbar-menu {
  gap: var(--app-space-sm);
}

.app-shell-page .app-topbar-title { gap: var(--app-space-sm); }
.app-shell-page .app-topbar-page-icon {
  width: clamp(40px, 2.4vw, 46px);
  height: clamp(40px, 2.4vw, 46px);
  border-radius: var(--app-density-radius);
  font-size: 1rem;
}

.app-shell-page .app-topbar-title-copy h2 { font-size: clamp(1.08rem, 1vw, 1.22rem) !important; }
.app-shell-page .app-topbar-title-copy p { margin-top: 2px; font-size: .82rem; }

.app-shell-page .context-card.compact-selectors {
  height: clamp(46px, 2.8vw, 50px) !important;
  min-height: clamp(46px, 2.8vw, 50px) !important;
  padding: 5px !important;
  gap: var(--app-space-xs) !important;
}

.app-shell-page .context-card.compact-selectors .custom-select-form,
.app-shell-page .context-card.compact-selectors .custom-selector,
.app-shell-page .context-card.compact-selectors .custom-select-trigger {
  height: clamp(34px, 2.15vw, 38px) !important;
  min-height: clamp(34px, 2.15vw, 38px) !important;
}

.app-shell-page .custom-select-trigger { padding-inline: var(--app-space-sm) !important; }
.app-shell-page .custom-select-trigger span { font-size: .82rem !important; }
/* El botón cerrado (.custom-select-trigger span) ya trunca con
   ellipsis; las opciones del menú desplegado (empresa/sucursal con
   nombre largo, ver base_app.html) no lo hacían y podían desbordar el
   ancho fijo del menú -- mismo truncado visual, sin tocar el valor
   guardado (el nombre completo sigue en el atributo title). */
.app-shell-page .custom-select-option {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-shell-page .topbar-icon {
  width: clamp(40px, 2.4vw, 44px);
  height: clamp(40px, 2.4vw, 44px);
  border-radius: var(--app-density-radius);
}

.app-shell-page .profile-card {
  min-height: clamp(46px, 2.8vw, 50px);
  padding: 5px 8px;
  gap: var(--app-space-sm);
  border-radius: var(--app-density-radius);
}

.app-shell-page .profile-avatar { width: 34px; height: 34px; }
.app-shell-page .profile-card strong { font-size: .82rem; }
.app-shell-page .profile-card span { font-size: .68rem; }

.app-shell-page .products-layout,
.app-shell-page .clients-layout,
.app-shell-page .users-layout,
.app-shell-page .content-grid,
.app-shell-page .invoices-layout {
  grid-template-columns: minmax(210px, clamp(220px, 15vw, 250px)) minmax(0, 1fr) !important;
  gap: var(--app-space-md) !important;
}

.app-shell-page .filters-card,
.app-shell-page .clients-filters-card,
.app-shell-page .users-filters-card,
.app-shell-page .roles-filters-card,
.app-shell-page .products-filters-card {
  padding: var(--app-card-padding) !important;
  border-radius: var(--app-density-radius) !important;
}

.app-shell-page .clients-filters,
.app-shell-page .users-filters,
.app-shell-page .roles-filters,
.app-shell-page .products-filters { gap: var(--app-space-sm) !important; }

.app-shell-page input,
.app-shell-page select,
.app-shell-page .filter-input,
.app-shell-page .search-input,
/* :not(.nav-group-title, .view-receipt-button) -- el selector "button"
   de abajo, pensado para botones de filtros/acciones (exportar, etc.),
   también coincidía con los <button> desplegables del sidebar
   (Sucursales/Facturación/Inventario/Compras/Cajas/...), forzándolos a
   .82rem !important y dejándolos más pequeños que los <a> de nivel
   superior (Inicio/Empresas/Clientes/Mi Plan). Con la exclusión, esos
   botones vuelven a heredar el tamaño ya centralizado para el sidebar
   en ".app-shell-page .nav-item, .app-shell-page .nav-group-title"
   (más abajo en este mismo archivo, o el de dashboard_home.css en el
   panel principal). ".view-receipt-button" ("Ver archivo" en el
   detalle de suscripción) se agregó por el mismo motivo al
   convertirse de <a> a <button> para abrir el visor del comprobante:
   sin la exclusión perdía su tamaño original. Ninguna de las dos
   duplica esta regla ni toca el resto de botones que sí deben quedar
   en .82rem. */
.app-shell-page button:not(.nav-group-title, .view-receipt-button),
.app-shell-page .action-button,
.app-shell-page .export-button,
.app-shell-page .secondary-button {
  font-size: .82rem !important;
}

.app-shell-page .filter-input-wrapper,
.app-shell-page .search-input,
.app-shell-page .search-box input,
.app-shell-page .inventory-search-box,
.app-shell-page .inventory-search-box input {
  min-height: var(--app-control-height) !important;
  height: var(--app-control-height) !important;
  border-radius: var(--app-density-radius) !important;
}

.app-shell-page .filter-button,
.app-shell-page .toolbar-actions > a,
.app-shell-page .toolbar-actions > button,
.app-shell-page .app-button {
  min-height: var(--app-control-height) !important;
  height: var(--app-control-height) !important;
  padding-inline: var(--app-space-md) !important;
  border-radius: var(--app-density-radius) !important;
}

.app-shell-page .toolbar-actions { gap: var(--app-space-sm) !important; min-width: 0; }
.app-shell-page .search-box { min-width: 0; flex: 1 1 auto; }

.app-shell-page .catalog-toolbar,
.app-shell-page .cash-toolbar,
.app-shell-page .invoices-toolbar,
.app-shell-page .products-toolbar,
.app-shell-page .clients-toolbar,
.app-shell-page .users-toolbar,
.app-shell-page .table-toolbar {
  min-width: 0;
  padding: var(--app-space-sm) var(--app-space-md) !important;
  gap: var(--app-space-sm) !important;
  border-radius: var(--app-density-radius) !important;
}

.app-shell-page .summary-card,
.app-shell-page .mini-kpi-card,
.app-shell-page .kpi-card,
.app-shell-page .card-block,
.app-shell-page .module-card,
.app-shell-page .table-card {
  padding: var(--app-card-padding) !important;
  gap: var(--app-space-sm) !important;
  border-radius: var(--app-density-radius) !important;
}

.app-shell-page .kpi-grid,
.app-shell-page .invoice-kpis,
.app-shell-page .clients-top-panels,
.app-shell-page .cash-kpis,
.app-shell-page .products-kpis {
  gap: var(--app-space-sm) !important;
  margin-bottom: var(--app-space-md) !important;
}

.app-shell-page .mini-kpi-icon,
.app-shell-page .kpi-icon {
  width: clamp(38px, 2.25vw, 44px) !important;
  height: clamp(38px, 2.25vw, 44px) !important;
  border-radius: var(--app-density-radius) !important;
}

.app-shell-page .mini-kpi-label,
.app-shell-page .kpi-card span { font-size: .76rem !important; }
.app-shell-page .mini-kpi-value,
.app-shell-page .kpi-card strong { font-size: 1.02rem !important; }

.app-shell-page .app-table-scroll { max-width: 100%; overflow-x: auto; }
.app-shell-page table th,
.app-shell-page table td {
  padding: clamp(9px, .65vw, 12px) clamp(10px, .75vw, 14px) !important;
  font-size: clamp(.76rem, .72vw, .84rem) !important;
}

.app-shell-page .table-wrapper,
.app-shell-page .table-card { min-width: 0; max-width: 100%; overflow: hidden; }

.app-shell-page .app-pagination {
  min-height: clamp(50px, 3vw, 58px);
  padding: var(--app-space-sm) var(--app-space-md);
  gap: var(--app-space-md);
}

.app-shell-page .app-pagination-controls a,
.app-shell-page .app-pagination-controls > span:not(.app-pagination-current) {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.app-shell-page .app-pagination-summary,
.app-shell-page .app-pagination-current { font-size: .78rem; }

.app-shell-page .hero-card {
  padding: clamp(18px, 1.25vw, 24px);
  gap: var(--app-space-lg);
  border-radius: clamp(20px, 1.4vw, 26px);
}

.app-shell-page .hero-card h1 { font-size: clamp(1.65rem, 2.4vw, 2.35rem); }
.app-shell-page .module-grid,
.app-shell-page .dashboard-grid,
.app-shell-page .bottom-grid { gap: var(--app-space-md); }

/* Footer: tipografía ~20% mayor para legibilidad (antes .8rem / small
   ~.67rem / enlaces .76rem). El peso 600 del texto principal necesita
   !important porque dashboard.css fuerza span a 400 con !important. */
.app-shell-page .app-footer {
  padding: calc(var(--app-space-md) + 4px) var(--app-space-lg) !important;
  gap: var(--app-space-md);
  flex-wrap: wrap;
  font-size: .98rem;
}

.app-shell-page .app-footer > div:first-child > span {
  font-size: 1.02rem;
  font-weight: 600 !important;
}

.app-shell-page .app-footer small {
  font-size: .84rem;
  margin-top: 4px;
}

.app-shell-page .footer-contact { gap: var(--app-space-sm) var(--app-space-md); }
.app-shell-page .footer-contact a {
  font-size: .92rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.app-shell-page .modal-card {
  width: min(100%, 680px);
  max-height: calc(100vh - 32px);
  border-radius: clamp(16px, 1.2vw, 22px) !important;
  overflow-y: auto;
}

.app-shell-page .modal-header,
.app-shell-page .modal-body,
.app-shell-page .modal-footer { padding: var(--app-space-md) var(--app-space-lg); }
.app-shell-page .modal-header { min-height: clamp(58px, 3.8vw, 70px); }

/* Fix: el titulo (y cualquier texto/icono) del encabezado de un modal
   siempre debe leerse en blanco sobre el fondo de color (morado, verde,
   rojo, etc.), sin importar el orden en que cargue el CSS de cada
   modulo. Antes cada modulo repetia "color:#fff" en su propio archivo
   y alguno podia quedar sin definirlo o ser sobreescrito por otra regla. */
.app-shell-page .modal-header,
.app-shell-page .modal-header h1,
.app-shell-page .modal-header h2,
.app-shell-page .modal-header h3,
.app-shell-page .modal-header p,
.app-shell-page .modal-header span,
.app-shell-page .modal-header strong,
.app-shell-page .modal-header small,
.app-shell-page .modal-header i,
.app-shell-page .modal-header .modal-close {
  color: #fff !important;
}

@media (max-width: 1599px) and (min-width: 1200px) {
  :root {
    --app-sidebar-width: clamp(210px, 15vw, 224px);
    --app-space-lg: 14px;
    --app-card-padding: 13px;
  }
}

@media (max-width: 1199px) and (min-width: 981px) {
  :root {
    --app-sidebar-width: 210px;
    --app-space-lg: 12px;
    --app-card-padding: 12px;
  }

  .app-shell-page .toolbar-actions { flex-wrap: wrap !important; }
  .app-shell-page .kpi-grid,
  .app-shell-page .invoice-kpis,
  .app-shell-page .cash-kpis,
  .app-shell-page .products-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-height: 800px) and (min-width: 981px) {
  :root {
    --app-control-height: 36px;
    --app-space-sm: 7px;
    --app-space-md: 10px;
    --app-space-lg: 12px;
    --app-card-padding: 11px;
  }

  .app-shell-page .brand-icon { width: 40px; height: 40px; }
  .app-shell-page .app-topbar-page-icon { width: 38px; height: 38px; }
  .app-shell-page .context-card.compact-selectors,
  .app-shell-page .profile-card { min-height: 44px !important; height: 44px !important; }
  .app-shell-page .hero-card { padding-block: 16px; }
  .app-shell-page .modal-card { max-height: calc(100vh - 20px); }
}

@media (max-width: 980px) {
  :root {
    --app-font-base: 14px;
    --app-sidebar-width: 270px;
  }

  .app-shell-page .sidebar { width: var(--app-sidebar-width); }
  .app-shell-page .topbar-actions { flex-wrap: wrap; }
  .app-shell-page .toolbar-actions { flex-wrap: wrap !important; }
}

@media (max-width: 768px) {
  :root {
    --app-control-height: 40px;
    --app-card-padding: 12px;
  }

  .app-shell-page .dashboard-main,
  .app-shell-page .app-main { padding: 10px; }
  .app-shell-page .app-main > .topbar { margin: 10px 10px 12px; }
  .app-shell-page .modal-card { max-height: calc(100vh - 16px); }
}

/* ---------- Toast global (no bloqueante) ----------
   Distinto del modal de arriba (.modal-overlay): no bloquea la página,
   se ubica arriba a la derecha, y se autodescarta. Usa las mismas
   variables de color/tipografía del resto de la app (--app-primary,
   --app-border, Inter ya aplicada globalmente a body). */
.app-toast-container {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 360px;
  max-width: calc(100vw - 24px);
  pointer-events: none;
}
.app-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--app-border, #e8e8ef);
  box-shadow: 0 12px 28px rgba(20, 10, 40, .14);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-8px) translateX(8px);
  transition: opacity .22s ease, transform .22s ease;
}
.app-toast.app-toast-visible { opacity: 1; transform: translateY(0) translateX(0); }
.app-toast.app-toast-leaving { opacity: 0; transform: translateY(-8px); }
.app-toast-success .app-toast-icon { color: #16a34a; }
.app-toast-icon { flex: 0 0 auto; margin-top: 2px; font-size: 1.05rem; }
.app-toast-copy { flex: 1 1 auto; min-width: 0; }
.app-toast-copy strong {
  display: block;
  color: var(--app-primary-dark, #2f1458);
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.35;
}
.app-toast-copy p {
  margin: 3px 0 0;
  color: var(--app-muted, #8f8f8f);
  font-size: .82rem;
  font-weight: 400;
  line-height: 1.4;
}
.app-toast-close {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--app-muted, #8f8f8f);
  font-size: .82rem;
  cursor: pointer;
  padding: 2px;
  line-height: 1;
}
.app-toast-close:hover { color: var(--app-primary-dark, #2f1458); }

@media (max-width: 520px) {
  .app-toast-container { top: 10px; right: 10px; left: 10px; width: auto; }
}


/* ==========================================================
   Menú lateral: letra más grande y legible
   Antes: .88rem en .nav-item y .82rem en grupos/subitems, que con
   la raíz de 13-14px quedaba en ~10.7-11.4px (y los títulos de grupo
   eran más pequeños que los items porque la regla global de
   button/input con !important de .82rem también los alcanzaba).
   Ahora escala con el ancho de pantalla (13.5px -> 15px en items,
   13px -> 14px en subitems), y el menú gana unos px de ancho (y los
   subitems menos sangría) para que los textos largos quepan en una
   línea en vez de quedar apretados en dos. Los iconos heredan el
   tamaño, así que crecen en la misma proporción. El modo compacto
   (solo iconos) no cambia: sus reglas fijan el tamaño del icono.
   ========================================================== */
@media (min-width: 1600px) {
  :root { --app-sidebar-width: clamp(256px, 14vw, 264px); }
}
@media (max-width: 1599px) and (min-width: 1200px) {
  :root { --app-sidebar-width: 240px; }
}
@media (max-width: 1199px) and (min-width: 981px) {
  :root { --app-sidebar-width: 236px; }
}
/* <= 980px (menú tipo cajón en móvil/tablet) se deja en 270px */

.app-shell-page .sidebar .nav-item,
.app-shell-page .sidebar .nav-group-title {
  font-size: clamp(13.5px, .98vw, 15px) !important;
  line-height: 1.3;
}

.app-shell-page .sidebar .nav-submenu {
  padding-left: 8px;
}

.app-shell-page .sidebar .nav-subitem {
  min-height: clamp(34px, 2.1vw, 38px);
  padding-left: 10px;
  padding-block: 4px;
  font-size: clamp(13px, .92vw, 14px) !important;
  line-height: 1.3;
}

.app-shell-page .sidebar .nav-chevron {
  font-size: 11px;
}

/* Textos largos que bajan a 2 líneas ("Administración de
   suscripciones"): aire arriba/abajo para que no se peguen al item
   vecino, e icono fijo para que no se corra hacia la izquierda. */
.app-shell-page .sidebar .nav-item,
.app-shell-page .sidebar .nav-group-title {
  padding-block: 6px;
}
.app-shell-page .sidebar .nav-item > i,
.app-shell-page .sidebar .nav-group-title > i:first-child,
.app-shell-page .sidebar .nav-subitem > i {
  flex-shrink: 0;
}

/* Mismo ritmo vertical entre items sueltos y grupos desplegables
   (antes los grupos tenían ~16px más de separación). */
.app-shell-page .sidebar .nav-group {
  margin: 0;
}
.app-shell-page .sidebar-nav {
  gap: clamp(4px, .35vw, 6px);
}