:root {
      /* Paleta del portal público (PaginaGimnasio): negro casi puro y
         blanco al estilo "Apple/titanio", con magenta y cian del logo como
         únicos acentos de color. Reemplaza la paleta café/caramelo
         "In Color Balance" en todo el sistema de diseño. Se mantienen los
         NOMBRES de variable para no tocar cada uso del archivo; solo
         cambia lo que representan. */
      --primary: #E619A8;
      --primary-dark: #0A0A0C;
      /* Antes era un rosa pálido (#FBE7F5): al ser el fondo "claro" que
         reutilizan decenas de componentes (fichas de huella, encabezados
         de tabla, íconos circulares, tarjetas con borde punteado...),
         teñía TODA la interfaz de rosa. Ahora es un gris neutro estilo
         Apple, así el rosa/cian quedan como acento puntual y no como
         fondo repetido por toda la app. */
      --primary-light: #F5F5F7;
      /* Acento secundario: el cian del logo, contraparte del magenta */
      --accent: #14C6DE;
      --accent-dark: #0FA0B8;
      /* "wood" = botón de énfasis oscuro, ahora el negro casi puro de marca */
      --wood: #0A0A0C;
      --wood-light: #232328;
      /* Neutrales: blanco y gris titanio, sin ningún tono cálido */
      --dark: #0A0A0C;
      --light: #FFFFFF;
      --border: #E5E5EA;
      --success: #34C759;
      --warning: #FF9F0A;
      --danger: #FF3B30;
      --info: #97979D;
      /* #97979D contra el glass blanco casi opaco del tema claro (y más
         todavía sobre el brillo del shader de fondo) da un contraste muy
         bajo — párrafos descriptivos como el de "Tickets y Comprobantes"
         terminaban casi ilegibles. #6E6E73 es el mismo gris "apagado"
         pero más oscuro, con contraste real contra fondos claros; el
         tema oscuro no se toca (tiene su propio --gray más abajo). */
      --gray: #6E6E73;
      --gray-light: #F5F5F7;
      --card-bg: rgba(255, 255, 255, 0.98);
      /* Sombras neutras (negro puro), ya no tintadas hacia marrón */
      --shadow: 0 10px 25px -8px rgba(10, 10, 12, 0.14);
      --shadow-lg: 0 24px 48px -14px rgba(10, 10, 12, 0.22);
      --premium: #14C6DE;
      --professional: #6E6E73;
      /* Barra superior: siempre oscura en ambos temas (como una "chrome bar"),
         por eso vive en su propia variable y no depende de --primary-dark. */
      --header-bg: #0A0A0C;
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 18px;
      /* Curvas de easing con carácter, más fuertes que las de CSS por defecto */
      --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
      --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    }

    /* ===== TEMA OSCURO =====
       Misma paleta del portal público, invertida: el negro casi puro pasa
       a ser el fondo de página y las tarjetas, y el blanco pasa a ser el
       texto. Se activa poniendo data-theme="dark" en <html> (ver
       toggleTema()). Como todo el sistema de diseño ya usa estas
       variables, el cambio se propaga solo a botones, tarjetas, tablas,
       formularios, etc. */
    html[data-theme="dark"] {
      --primary: #F03DBE;
      --primary-dark: #FFFFFF;
      --primary-light: #232328;
      --accent: #3FD9EC;
      --accent-dark: #14C6DE;
      --wood: #232328;
      --wood-light: #3A3A3C;
      --dark: #FFFFFF;
      --light: #0A0A0C;
      --border: #2C2C2E;
      --success: #30D158;
      --warning: #FF9F0A;
      --danger: #FF453A;
      --info: #AEAEB2;
      --gray: #AEAEB2;
      --gray-light: #17171C;
      --card-bg: #17171C;
      --shadow: 0 10px 25px -8px rgba(0, 0, 0, 0.45);
      --shadow-lg: 0 24px 48px -14px rgba(0, 0, 0, 0.6);
      --premium: #3FD9EC;
      --professional: #AEAEB2;
    }
    /* El login NO participa del interruptor de tema: la tarjeta se queda
       siempre clara sobre el fondo aurora, sin importar data-theme. Se logra
       re-declarando las variables a sus valores claros solo dentro de
       #loginScreen, así todo lo de adentro que usa var(--algo) las resuelve
       igual que en modo claro. */
    html[data-theme="dark"] #loginScreen {
      --primary: #E619A8;
      --primary-dark: #0A0A0C;
      --primary-light: #F5F5F7;
      --accent: #14C6DE;
      --accent-dark: #0FA0B8;
      --dark: #0A0A0C;
      --gray: #6E6E73;
      --border: #E5E5EA;
      --card-bg: rgba(255, 255, 255, 0.98);
      --danger: #FF3B30;
    }
    /* Fondo global — ver #fondoAuroraCanvas en el <body> y el script "FONDO
       ANIMADO" al final del archivo. Fijo, detrás de absolutamente todo
       (z-index negativo), con un color sólido de respaldo por si el
       navegador no soporta WebGL2. */
    #fondoAuroraCanvas {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      display: block;
      background: #0A0A0C;
    }
    /* ===== GLASS ===== (basado en GlassSurface de reactbits.dev, la
       variante "fallback" del componente: SIN ningún color propio — solo
       blur + saturación sobre lo que hay detrás, que es lo que le da color.
       Reemplaza las cajas sólidas/oscuras de tarjetas, header e íconos
       ahora que el fondo es el shader animado, para que se vea a través en
       vez de taparlo con paneles opacos.
       Ronda 2: el shader tiene tramos muy brillantes (líneas blancas/rosas
       intensas) que dejaban el texto ilegible encima. En vez de aclarar lo
       de atrás (brightness > 1), ahora se OSCURECE (brightness < 1) y se
       suma una capa de tinte oscuro translúcido pareja — así el contraste
       para el texto blanco queda estable sin importar qué tan brillante
       esté el shader en ese punto, y ya no depende del tema claro/oscuro
       de la app (el fondo del shader es oscuro en los dos).
       Ronda 3: modo claro real. El fondo del shader sigue siendo oscuro
       siempre (solo cambian las líneas a blanco), pero eso no significa
       que el glass tenga que ser oscuro también — un panel de vidrio
       ESMERILADO BLANCO flotando sobre un fondo oscuro es exactamente
       cómo se ve el glass "claro" de iOS sobre un wallpaper oscuro, y es
       la solución más simple: nada de sliders manuales de brillo, todo
       se resuelve solo cambiando de tema. Se define un set de variables
       --glass-* en :root (claro) y se sobreescribe en
       html[data-theme="dark"]; todo el material glass (panel, stat-card,
       ícono) y su texto/ícono se leen de esas variables en vez de tener
       colores fijos. En claro el propio tinte blanco casi opaco ya
       "lava" lo que hay detrás, así que el texto oscuro es legible sin
       necesidad de subir/bajar brillo del fondo. */
    :root {
      --glass-bg: rgba(255, 255, 255, 0.42);
      --glass-bg-soft: rgba(255, 255, 255, 0.32);
      --glass-blur: 20px;
      --glass-saturate: 1.5;
      --glass-brightness: 1.25;
      --glass-border: rgba(20, 20, 30, 0.1);
      --glass-shadow:
        0 8px 32px 0 rgba(20, 20, 30, 0.12),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 0 0 rgba(20, 20, 30, 0.05);
      --glass-text: #1a1a2e;
      --glass-text-soft: rgba(26, 26, 46, 0.68);
      --glass-icon: rgba(26, 26, 46, 0.85);
      --glass-text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
      --glass-icon-shadow: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.5));
      --glass-border-hover: rgba(20, 20, 30, 0.28);
    }
    html[data-theme="dark"] {
      --glass-bg: rgba(8, 8, 12, 0.45);
      --glass-bg-soft: rgba(8, 8, 12, 0.3);
      --glass-blur: 20px;
      --glass-saturate: 1.35;
      --glass-brightness: 0.6;
      --glass-border: rgba(255, 255, 255, 0.16);
      --glass-shadow:
        0 8px 32px 0 rgba(0, 0, 0, 0.35),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.14),
        inset 0 -1px 0 0 rgba(255, 255, 255, 0.05);
      --glass-text: #fff;
      --glass-text-soft: rgba(255, 255, 255, 0.75);
      --glass-icon: rgba(255, 255, 255, 0.95);
      --glass-text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
      --glass-icon-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
      --glass-border-hover: rgba(255, 255, 255, 0.45);
    }
    .glass-panel {
      background: var(--glass-bg);
      backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
      border: 1px solid var(--glass-border);
      box-shadow: var(--glass-shadow);
      transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
    }
    @supports not (backdrop-filter: blur(1px)) {
      .glass-panel { background: rgba(12, 12, 16, 0.88); }
      html:not([data-theme="dark"]) .glass-panel { background: rgba(255, 255, 255, 0.92); }
    }
    /* Resumen Rápido del Dashboard: antes eran 4 tarjetas grandes
       (.stat-card), igual de protagónicas que la grilla de accesos de
       arriba — demasiado para un dato de referencia (mismo criterio ya
       aplicado en Lockers/Estadísticas/Historial de Ventas, ver tareas
       #225/#260/#261). Ahora es una franja delgada: ícono + número +
       etiqueta, separados por una línea vertical tenue, glass como el
       resto de "Resumen Rápido". Ver también el override para los modos
       de barra fija más abajo (junto a "#dashboardGrid { display:none }"),
       donde esta misma franja se agranda porque pasa a ser todo el
       contenido de "Inicio". */
    .dashboard-kpis-compacto {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
      padding: 8px 4px;
    }
    .dashboard-kpi {
      display: flex;
      align-items: center;
      gap: 10px;
      padding-right: 22px;
      border-right: 1px solid var(--glass-border);
      transition: padding 0.25s var(--ease-out), gap 0.25s var(--ease-out);
    }
    .dashboard-kpi:last-child { padding-right: 0; border-right: none; }
    .dashboard-kpi .dashboard-kpi-icono {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      flex-shrink: 0;
      transition: width 0.25s var(--ease-out), height 0.25s var(--ease-out), font-size 0.25s var(--ease-out);
    }
    .dashboard-kpi .dashboard-kpi-valor {
      font-size: 16px;
      font-weight: 800;
      color: var(--glass-text);
      line-height: 1.1;
      text-shadow: var(--glass-text-shadow);
      transition: font-size 0.25s var(--ease-out);
    }
    .dashboard-kpi .dashboard-kpi-etiqueta {
      font-size: 11px;
      font-weight: 600;
      color: var(--glass-text-soft);
      text-transform: uppercase;
      letter-spacing: 0.03em;
      text-shadow: var(--glass-text-shadow);
      transition: font-size 0.25s var(--ease-out);
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
      }
    }
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Plus Jakarta Sans', sans-serif;
    }
    html { scroll-behavior: smooth; }
    /* La página en sí NUNCA debe scrollear — es lo que venía causando la
       "barra fantasma" que aparecía y reaparecía en distintas secciones
       (Registro, Asistencia, Lockers, Reportes...) cada vez que algo se
       pasaba del alto de la ventana por un par de píxeles. En vez de seguir
       cazando esas fugas una por una, cada .module.active ahora es
       responsable de su propio scroll interno (ver la regla de abajo y las
       versiones más específicas de Lockers/Reportes, que además dejan fijos
       el header/pestañas/controles y solo scrollean la lista) — así que la
       página exterior puede quedarse fija sin perder acceso a nada. */
    body {
      background: linear-gradient(180deg, var(--light) 0%, var(--gray-light) 100%);
      color: var(--dark);
      min-height: calc(100 * var(--vh, 1vh));
      overflow-x: hidden;
      overflow-y: hidden;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      transition: background-color 0.25s var(--ease-out);
    }
    /* Red de seguridad genérica: cualquier sección cuyo contenido supere el
       alto disponible bajo el header scrollea puertas adentro, con el
       header de la app y el título/pestañas de la sección siempre visibles
       arriba (quedan fuera de este contenedor). Lockers y Reportes tienen
       además su propia versión más específica (ver sus comentarios) que
       deja fijos también los botones de acción y solo mueve la lista. */
    .module.active {
      max-height: calc(calc(100 * var(--vh, 1vh)) - var(--app-header-h, 90px));
      overflow-y: auto;
    }
    body.navmode-arriba .module.active {
      max-height: calc(calc(100 * var(--vh, 1vh)) - var(--navbar-arriba-h, 62px) - 30px);
    }

    /* Scrollbar delgado y de un solo color para todas las listas con scroll
       interno (esta red de seguridad genérica y las versiones específicas
       de Lockers/Reportes/etc.) — sin esto, Windows pinta el scrollbar
       nativo con un canal (track) y una barra (thumb) de tonos bien
       distintos, que en capturas de pantalla se leen como "dos barras
       pegadas" aunque sea un solo scroll funcionando bien. Con el track
       transparente y el thumb en un solo color a juego con la app, queda
       una sola barra limpia. */
    .module.active,
    #lockersVistaVisual, #lockersVistaDetallada .table-container,
    #reportesVistaMatriculas, #reportesVistaProductos,
    #estadisticasVistaPlanes, #estadisticasVistaIngresos, #estadisticasVistaMiembros {
      scrollbar-width: thin;
      scrollbar-color: var(--glass-border) transparent;
    }
    .module.active::-webkit-scrollbar,
    #lockersVistaVisual::-webkit-scrollbar, #lockersVistaDetallada .table-container::-webkit-scrollbar,
    #reportesVistaMatriculas::-webkit-scrollbar, #reportesVistaProductos::-webkit-scrollbar,
    #estadisticasVistaPlanes::-webkit-scrollbar, #estadisticasVistaIngresos::-webkit-scrollbar, #estadisticasVistaMiembros::-webkit-scrollbar {
      width: 8px;
    }
    .module.active::-webkit-scrollbar-track,
    #lockersVistaVisual::-webkit-scrollbar-track, #lockersVistaDetallada .table-container::-webkit-scrollbar-track,
    #reportesVistaMatriculas::-webkit-scrollbar-track, #reportesVistaProductos::-webkit-scrollbar-track,
    #estadisticasVistaPlanes::-webkit-scrollbar-track, #estadisticasVistaIngresos::-webkit-scrollbar-track, #estadisticasVistaMiembros::-webkit-scrollbar-track {
      background: transparent;
    }
    .module.active::-webkit-scrollbar-thumb,
    #lockersVistaVisual::-webkit-scrollbar-thumb, #lockersVistaDetallada .table-container::-webkit-scrollbar-thumb,
    #reportesVistaMatriculas::-webkit-scrollbar-thumb, #reportesVistaProductos::-webkit-scrollbar-thumb,
    #estadisticasVistaPlanes::-webkit-scrollbar-thumb, #estadisticasVistaIngresos::-webkit-scrollbar-thumb, #estadisticasVistaMiembros::-webkit-scrollbar-thumb {
      background-color: var(--glass-border);
      border-radius: 20px;
    }
    .module.active::-webkit-scrollbar-thumb:hover,
    #lockersVistaVisual::-webkit-scrollbar-thumb:hover, #lockersVistaDetallada .table-container::-webkit-scrollbar-thumb:hover,
    #reportesVistaMatriculas::-webkit-scrollbar-thumb:hover, #reportesVistaProductos::-webkit-scrollbar-thumb:hover,
    #estadisticasVistaPlanes::-webkit-scrollbar-thumb:hover, #estadisticasVistaIngresos::-webkit-scrollbar-thumb:hover, #estadisticasVistaMiembros::-webkit-scrollbar-thumb:hover {
      background-color: var(--primary);
    }

    .hidden { display: none !important; }

    h1, h2, h3, h4 { letter-spacing: -0.01em; }

    /* Foco visible para navegación con teclado */
    a:focus-visible, button:focus-visible, input:focus-visible,
    select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }

    /* Números tabulares para cifras y montos */
    .price, .producto-price, .recibo-value {
      font-variant-numeric: tabular-nums;
    }

    /* CMS CARDS */
    .cms-card {
      background: var(--glass-bg-soft);
      backdrop-filter: blur(10px) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
      -webkit-backdrop-filter: blur(10px) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
      border: 2px solid var(--glass-border);
      border-radius: var(--radius-md);
      padding: 20px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s ease, background 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
    }
    .cms-card:hover {
      border-color: var(--primary);
      box-shadow: 0 4px 15px rgba(230, 25, 168, 0.18);
      transform: translateY(-3px);
    }
    .cms-card:active { transform: translateY(-1px) scale(0.99); }
    .cms-card.selected {
      border-color: var(--primary);
      background: var(--primary-light);
      box-shadow: 0 6px 20px rgba(230, 25, 168, 0.24);
    }
    .cms-card strong {
      display: block;
      color: var(--dark);
      margin-top: 10px;
      font-size: 14px;
    }

    /* ===== EDITOR VISUAL DEL PORTAL PÚBLICO (vista previa en vivo) ===== */
    .portal-editor-toolbar__info {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--gray);
      font-size: 13.5px;
      max-width: 560px;
    }
    .portal-editor-toolbar__info i {
      color: var(--primary);
      font-size: 16px;
      flex-shrink: 0;
    }


    .portal-hero-item {
      position: relative;
      width: 84px;
      height: 60px;
      border-radius: 10px;
      overflow: hidden;
      border: 2px solid var(--glass-border);
      cursor: pointer;
      background: rgba(0,0,0,0.06) center/cover no-repeat;
      transition: border-color 0.2s ease, transform 0.2s ease;
    }
    .portal-hero-item:hover { transform: translateY(-2px); }
    .portal-hero-item.seleccionada {
      border-color: var(--primary);
      box-shadow: 0 0 0 2px rgba(230, 25, 168, 0.25);
    }
    .portal-hero-item input[type="checkbox"] {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 16px;
      height: 16px;
      accent-color: var(--primary);
    }
    .portal-hero-item__orden {
      position: absolute;
      bottom: 4px;
      left: 4px;
      background: rgba(0,0,0,0.65);
      color: #fff;
      font-size: 10.5px;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: 10px;
    }


    /* ===== LAYOUT DIVIDIDO: vista previa (mitad) + descripción (mitad) ===== */
    .portal-editor-split {
      display: flex;
      gap: 24px;
      align-items: stretch;
      flex-wrap: wrap;
    }
    .portal-editor-preview-col {
      flex: 1 1 420px;
      min-width: 320px;
    }
    .portal-editor-info-col {
      flex: 1 1 360px;
      min-width: 280px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }
    .portal-editor-info-title {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 19px;
      color: var(--dark);
      margin: 0 0 10px;
    }
    .portal-editor-info-title i { color: var(--primary); }
    .portal-editor-info-text {
      color: var(--gray);
      font-size: 14px;
      line-height: 1.55;
      margin-bottom: 18px;
    }
    .portal-editor-info-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 18px;
    }
    .portal-editor-btn {
      padding: 10px 18px;
      border-radius: var(--radius-md);
      font-size: 13.5px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--glass-border);
      background: var(--glass-bg);
      color: var(--dark);
      transition: all 0.2s ease;
    }
    .portal-editor-btn:hover {
      border-color: var(--primary);
      color: var(--primary);
      transform: translateY(-2px);
    }
    .portal-editor-btn--primary {
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark, var(--primary)) 100%);
      color: #fff;
      border: none;
      box-shadow: 0 8px 22px rgba(230, 25, 168, 0.3);
    }
    .portal-editor-btn--primary:hover {
      color: #fff;
      box-shadow: 0 12px 28px rgba(230, 25, 168, 0.4);
    }

    /* Miniatura de la vista previa: mismo truco de transform:scale() que
       ya usan ajustarEscalaMiniaturaTicket()/ajustarEscalaMiniaturasTarjeta()
       — el iframe se renderiza a su ancho real (1280px, tamaño de escritorio)
       y luego se escala hacia abajo para caber sin generar su propio scroll
       ni deformar el contenido. pointer-events:none impide interactuar (y
       por lo tanto hacer scroll) dentro de la miniatura: la edición real
       siempre pasa por el modal grande de "Editar página". */
    .portal-editor-mini-viewport {
      position: relative;
      width: 100%;
      height: 300px;
      overflow: hidden;
      border: 1px solid var(--glass-border);
      border-top: none;
      border-radius: 0 0 14px 14px;
      background: #fff;
      box-shadow: 0 12px 35px rgba(0,0,0,0.12);
    }
    .portal-editor-mini-scaler {
      position: absolute;
      top: 0;
      left: 0;
      width: 1280px;
      transform-origin: top left;
      pointer-events: none;
    }
    .portal-editor-mini-scaler .portal-editor-frame-body {
      height: 900px;
      border: none;
      border-radius: 0;
      box-shadow: none;
    }

    /* ===== MODAL "CASI PANTALLA COMPLETA" PARA EDITAR EL PORTAL ===== */
    .portal-editor-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(15, 15, 20, 0.6);
      backdrop-filter: blur(3px);
      /* Tiene que ganarle al botón flotante global #btnFlotanteVolver
         (z-index: 9999) y a cualquier otro modal-overlay (también 9999) —
         si no, ese botón queda pintado ENCIMA de la ventana de edición del
         portal y tapa "Recargar"/"Abrir en pestaña". */
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      /* El ancho (padding horizontal) queda igual que antes -el usuario lo
         confirmó como correcto-, pero el padding vertical baja de 10px a
         casi nada: la ventana ahora ocupa casi todo el alto de la pantalla,
         hasta el punto de tapar el título "Configuración del sistema" que
         queda detrás cerca del borde superior. Es intencional: el usuario
         pidió más alto sin tocar el ancho. */
      padding: 4px 10px;
    }
    .portal-editor-modal-overlay.oculto { display: none; }
    .portal-editor-modal {
      position: relative;
      /* "Casi toda la pantalla": deja apenas un margen fino alrededor (los
         10px de padding del overlay) en vez de un recuadro chico flotando
         en medio de un fondo oscuro grande — así se siente como una
         ventana de edición real, no como un modal más. */
      width: 100%;
      height: 100%;
      max-width: none;
      background: #fff;
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: 0 30px 80px rgba(0,0,0,0.5);
    }
    .portal-editor-modal__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 14px 20px;
      border-bottom: 1px solid var(--glass-border);
      /* Fondo sólido (no glass translúcido) a propósito: este header vive
         dentro de una tarjeta blanca (.portal-editor-modal { background:#fff }),
         nunca sobre el fondo oscuro con blur del overlay. Con var(--glass-bg-soft)
         el texto gris quedaba casi invisible en algunos temas — ver nota abajo. */
      background: #f4f4f6;
      flex-wrap: wrap;
    }
    /* El texto informativo del header usa var(--dark) con opacidad en vez de
       var(--gray): var(--gray) puede quedar demasiado cercano al fondo según
       el tema (claro/oscuro), volviéndose casi ilegible — el usuario tuvo que
       seleccionar el texto para poder leerlo. var(--dark) + opacidad da
       contraste garantizado en los dos temas (es blanco en oscuro, negro en
       claro) sin perder la jerarquía visual de "texto secundario". */
    .portal-editor-modal__header .portal-editor-toolbar__info {
      color: var(--dark);
      opacity: 0.72;
    }
    .portal-editor-modal__header .portal-editor-toolbar__info i {
      opacity: 1;
    }
    html[data-theme="dark"] .portal-editor-modal__header {
      background: #202024;
    }
    html[data-theme="dark"] .portal-editor-modal {
      background: #17171a;
    }
    .portal-editor-modal__header-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .portal-editor-modal__header-actions .btn-sm {
      padding: 8px 14px;
      border-radius: var(--radius-md);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 7px;
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      color: var(--dark);
      transition: all 0.2s ease;
    }
    .portal-editor-modal__header-actions .btn-sm:hover {
      border-color: var(--primary);
      color: var(--primary);
    }
    /* Estado activo del botón "Editar página" dentro del modal — distingue
       claramente "estoy viendo" de "estoy editando" (las acciones de
       edición del header, ver #accionesEdicionPortal más abajo, solo se
       muestran con este botón en este estado).

       Antes usaba var(--primary-dark) para el degradado, pero esa variable
       se invierte a #FFFFFF en tema oscuro (ver html[data-theme="dark"] en
       :root, arriba del todo) -sirve para otros usos, como texto claro
       sobre fondo oscuro- y acá producía un degradado rosa->blanco: el
       botón se veía "muy blanco" justo en modo oscuro. Se reemplaza por la
       misma técnica de borde-degradado animado de la tarjeta de login
       (.login-card en PaginaGimnasio/styles.css): fondo carbón FIJO (no
       depende del tema) + borde con conic-gradient girando en los dos
       colores de marca. Contraste garantizado en claro y oscuro, y de paso
       es uno de los "botones animados" pedidos. */
    @property --editar-portal-angulo {
      syntax: '<angle>';
      inherits: false;
      initial-value: 0deg;
    }
    @keyframes editar-portal-borde-girar {
      to { --editar-portal-angulo: 360deg; }
    }
    #btnEditarPaginaPortal.activo {
      position: relative;
      background-color: #16161a;
      background-image: linear-gradient(#16161a, #16161a),
          conic-gradient(from var(--editar-portal-angulo), #E619A8, #14C6DE, #E619A8);
      background-origin: border-box;
      background-clip: padding-box, border-box;
      border: 1.5px solid transparent;
      color: #fff;
      animation: editar-portal-borde-girar 2.8s linear infinite;
      box-shadow: 0 4px 16px rgba(230, 25, 168, 0.35);
    }
    #btnEditarPaginaPortal.activo:hover {
      /* Pisa el .btn-sm:hover genérico (border-color: var(--primary)), que
         si no rompería el truco de fondo doble (border-box con el conic-
         gradient) pintando un borde sólido encima. */
      border-color: transparent;
      color: #fff;
    }
    .portal-editor-modal__cerrar {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: none;
      background: rgba(0,0,0,0.08);
      color: var(--dark);
      font-size: 15px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      flex-shrink: 0;
    }
    .portal-editor-modal__cerrar:hover {
      background: #e11d48;
      color: #fff;
      transform: rotate(90deg);
    }
    .portal-editor-modal__body {
      position: relative;
      flex: 1;
      background: #fff;
    }
    .portal-editor-modal__body .portal-editor-frame-body {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: none;
      border-radius: 0;
      box-shadow: none;
      min-height: 0;
    }

    /* ===== LÁPIZ FLOTANTE + PANEL "FONDO DEL INICIO" (modo edición) =====
       Ya no hay lápiz flotante -era redundante con "Editar página"-: el
       botón "Fondo de página" vive directamente en el header (junto a
       "Editar página", ver .portal-editor-acciones-edicion) y este panel
       cuelga justo debajo, anclado arriba-derecha del modal. */
    .portal-editor-acciones-edicion {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .portal-editor-acciones-edicion.oculto { display: none; }
    .portal-editor-modal__header-actions .btn-sm:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
    .portal-editor-modal__header-actions .btn-sm:disabled:hover {
      border-color: var(--glass-border);
      color: var(--dark);
    }

    .portal-fondo-panel {
      position: absolute;
      top: 66px;
      right: 22px;
      width: 340px;
      max-height: calc(100% - 90px);
      background: #fff;
      border-radius: var(--radius-lg);
      box-shadow: 0 20px 60px rgba(0,0,0,0.35);
      z-index: 21;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transform-origin: top right;
      animation: fondo-panel-aparecer 0.22s var(--ease-out);
    }
    @keyframes fondo-panel-aparecer {
      from { opacity: 0; transform: scale(0.92) translateY(-8px); }
      to { opacity: 1; transform: scale(1) translateY(0); }
    }
    .portal-fondo-panel.oculto { display: none; }
    html[data-theme="dark"] .portal-fondo-panel { background: #1c1c1f; }
    .portal-fondo-panel__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      font-weight: 700;
      font-size: 14px;
      color: var(--dark);
      border-bottom: 1px solid var(--glass-border);
      flex-shrink: 0;
    }
    .portal-fondo-panel__header i:first-child { color: var(--primary); margin-right: 6px; }
    .portal-fondo-panel__header button {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: none;
      background: rgba(0,0,0,0.08);
      color: var(--dark);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .portal-fondo-panel__header button:hover { background: #e11d48; color: #fff; }
    .portal-fondo-panel__body {
      overflow-y: auto;
      padding: 14px 16px 18px;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
    .portal-fondo-bloque__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 4px;
    }
    .portal-fondo-bloque h4 {
      font-size: 12.5px;
      font-weight: 700;
      color: var(--dark);
      margin: 0;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .portal-fondo-bloque h4 i { color: var(--primary); font-size: 12px; }
    .portal-fondo-bloque p {
      font-size: 11.5px;
      color: var(--gray);
      margin: 0 0 8px;
      line-height: 1.4;
    }
    .portal-fondo-pausa-btn {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: none;
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      color: var(--dark);
      font-size: 10.5px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.15s ease;
    }
    .portal-fondo-pausa-btn:hover { border-color: var(--primary); color: var(--primary); }
    .portal-fondo-pausa-btn.activa { background: var(--primary); border-color: transparent; color: #fff; }
    .portal-fondo-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }
    .portal-fondo-tile {
      position: relative;
      border-radius: 10px;
      overflow: hidden;
      cursor: pointer;
      border: 2px solid var(--glass-border);
      background: #0a0a0c;
      aspect-ratio: 4 / 3;
      transition: border-color 0.15s ease, transform 0.15s ease;
    }
    .portal-fondo-tile:hover { transform: translateY(-2px); border-color: var(--accent); }
    .portal-fondo-tile.seleccionada { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(230,25,168,0.25); }
    .portal-fondo-tile canvas {
      width: 100%;
      height: 100%;
      display: block;
    }
    .portal-fondo-tile__label {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      padding: 3px 5px;
      font-size: 9.5px;
      font-weight: 600;
      color: #fff;
      text-align: center;
      background: linear-gradient(transparent, rgba(0,0,0,0.75));
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .portal-fondo-color-tabs {
      display: flex;
      gap: 6px;
      margin-bottom: 10px;
    }
    .portal-fondo-color-tab {
      flex: 1;
      padding: 6px 10px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--glass-border);
      background: var(--glass-bg);
      color: var(--dark);
      font-size: 11.5px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .portal-fondo-color-tab.activa {
      background: linear-gradient(135deg, #E619A8 0%, #14C6DE 100%);
      border-color: transparent;
      color: #fff;
    }
    .portal-fondo-color-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .portal-fondo-color-row input[type="color"] {
      width: 44px;
      height: 38px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      padding: 0;
      background: none;
      flex-shrink: 0;
    }
    .portal-fondo-color-row input[type="color"].oculto { display: none; }
    .portal-fondo-color-row .portal-editor-btn { flex: 1; justify-content: center; }

    @media (max-width: 900px) {
      .portal-editor-split { flex-direction: column; }
      .portal-editor-modal { width: calc(100 * var(--vw, 1vw)); height: calc(100 * var(--vh, 1vh)); border-radius: 0; }
      .portal-fondo-panel { width: calc(100% - 24px); right: 12px; left: 12px; top: auto; bottom: 12px; max-height: calc(70 * var(--vh, 1vh)); }
    }

    .portal-editor-frame-chrome {
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(0,0,0,0.06);
      border: 1px solid var(--glass-border);
      border-bottom: none;
      border-radius: 14px 14px 0 0;
      padding: 10px 16px;
    }
    .portal-editor-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      display: inline-block;
    }
    .portal-editor-frame-url {
      margin-left: 10px;
      font-size: 12.5px;
      color: var(--gray);
      background: rgba(255,255,255,0.5);
      padding: 4px 12px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .portal-editor-frame-url i { font-size: 10px; color: var(--success); }

    .portal-editor-frame-body {
      position: relative;
      width: 100%;
      height: min(calc(78 * var(--vh, 1vh)), 900px);
      min-height: 520px;
      border: 1px solid var(--glass-border);
      border-radius: 0 0 14px 14px;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 12px 35px rgba(0,0,0,0.12);
    }
    .portal-editor-frame-body iframe {
      width: 100%;
      height: 100%;
      border: none;
      display: block;
      background: #fff;
    }
    .portal-editor-loading {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: #fff;
      color: var(--gray);
      font-size: 14px;
      font-weight: 600;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }
    .portal-editor-loading.oculto { opacity: 0; }

    .portal-editor-publish-fab {
      position: absolute;
      right: 26px;
      bottom: 26px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 15px 26px;
      border-radius: 50px;
      border: none;
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark, var(--primary)) 100%);
      color: #fff;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 10px 30px rgba(230, 25, 168, 0.35);
      transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), opacity 0.2s ease;
      z-index: 5;
    }
    .portal-editor-publish-fab i { font-size: 17px; }
    .portal-editor-publish-fab:hover:not(:disabled) {
      transform: translateY(-3px) scale(1.03);
      box-shadow: 0 14px 38px rgba(230, 25, 168, 0.45);
    }
    .portal-editor-publish-fab:disabled {
      opacity: 0.55;
      cursor: not-allowed;
      filter: grayscale(0.25);
    }

    @media (max-width: 720px) {
      .portal-editor-frame-body { height: calc(65 * var(--vh, 1vh)); }
      .portal-editor-publish-fab span { display: none; }
      .portal-editor-publish-fab { padding: 15px 17px; right: 16px; bottom: 16px; }
    }

    /* MODAL OVERLAY */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.7);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 10000;
    }
    .modal-overlay.hidden {
      display: none !important;
    }
    
    /* LOGIN SCREEN - PREMIUM */
    /* El fondo ahora es #fondoAuroraCanvas (global, ver <body>), que se ve a
       través de este transparente. Se conservan el ::before (textura de
       líneas) y el ::after (viñeta) como capas encima del shader. */
    #loginScreen {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: calc(100 * var(--vh, 1vh));
      padding: 20px;
      position: relative;
      overflow: hidden;
      background: transparent;
    }
    #loginScreen::before {
      content: '';
      position: absolute;
      width: 200%;
      height: 200%;
      top: -50%;
      left: -50%;
      background:
        repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 40px),
        repeating-linear-gradient(-45deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 60px);
      animation: grid-shift 24s linear infinite;
    }
    #loginScreen::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at center, transparent 65%, rgba(10, 10, 12, 0.85) 100%);
      animation: aurora-pulse 9s infinite alternate var(--ease-in-out);
    }
    @keyframes aurora-drift {
      0% { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%; filter: hue-rotate(0deg) brightness(1); }
      50% { background-position: -8% -4%, 4% 8%, 0% 12%, 0% 0%; filter: hue-rotate(8deg) brightness(1.06); }
      100% { background-position: 4% 8%, -8% -4%, 12% 0%, 0% 0%; filter: hue-rotate(15deg) brightness(1); }
    }
    @keyframes grid-shift {
      0% { transform: translate(0, 0); }
      100% { transform: translate(-50%, -50%); }
    }
    @keyframes aurora-pulse {
      0% { opacity: 0.85; transform: scale(1); }
      50% { opacity: 0.6; transform: scale(1.05); }
      100% { opacity: 0.85; transform: scale(1); }
    }
    .login-card {
      background: linear-gradient(0deg, #ffffff 0%, #faf5ee 100%);
      border-radius: 32px;
      box-shadow: 0 30px 30px -20px rgba(40, 25, 10, 0.35);
      width: 100%;
      max-width: 440px;
      padding: 40px 36px;
      text-align: center;
      border: 5px solid #ffffff;
      position: relative;
      z-index: 2;
    }
    .login-card h2 {
      color: var(--primary-dark);
      margin-bottom: 26px;
      font-weight: 700;
      font-size: 26px;
      letter-spacing: -0.01em;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
    }
    .login-card input {
      width: 100%;
      padding: 15px 18px;
      margin: 10px 0;
      border: 2px solid transparent;
      border-radius: var(--radius-lg);
      font-size: 15px;
      transition: border-color 0.15s var(--ease-out);
      background: var(--card-bg);
      box-shadow: 0 10px 10px -5px rgba(230, 25, 168, 0.12);
    }
    .login-card input:focus {
      outline: none;
      border-color: var(--primary);
    }
    .login-card button {
      width: 100%;
      padding: 15px;
      background: linear-gradient(45deg, var(--primary) 0%, var(--accent-dark) 100%);
      color: white;
      border: none;
      border-radius: var(--radius-lg);
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      margin-top: 18px;
      transition: transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
      letter-spacing: 0.3px;
      box-shadow: 0 20px 10px -15px rgba(230, 25, 168, 0.45);
    }
    @media (hover: hover) and (pointer: fine) {
      .login-card button:hover {
        transform: scale(1.03);
        box-shadow: 0 23px 10px -20px rgba(230, 25, 168, 0.5);
      }
    }
    .login-card button:active {
      transform: scale(0.96);
      box-shadow: 0 15px 10px -10px rgba(230, 25, 168, 0.4);
    }
    #loginError {
      color: var(--danger);
      margin-top: 15px;
      font-size: 14px;
      min-height: 20px;
    }
    
    /* APP CONTAINER */
    /* Este min-height: 100vh era otra fuente del mismo problema que
       .module (ver ese comentario): sumado al min-height de .module y al
       de <body>, en vistas de contenido corto (como Registro > Registrar)
       terminaba empujando la página unos pixeles más allá del viewport
       real. El fondo no depende de esto (es el canvas fijo global), así
       que se saca del todo — el alto de #app ahora lo define solo su
       contenido real (header + módulo activo). */
    #app {
      display: none;
    }
    
    /* HEADER PREMIUM */
    /* Glass en vez de la barra sólida de antes — ver .glass-panel. Queda
       "flotando" sobre el fondo animado en vez de taparlo con un bloque
       negro. El texto es siempre blanco con sombra (ver header h1) porque
       lo que hay detrás cambia de brillo constantemente. */
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 18px 40px;
      position: sticky;
      top: 0;
      z-index: 1000;
      border-left: none;
      border-right: none;
      border-top: none;
      border-radius: 0;
    }
    /* Ventas en pantalla completa, al estilo Aronium: se oculta la barra
       superior de la app (logo, tema, usuario, cerrar sesión) para que el
       punto de venta aparezca directo al entrar, sin nada encima. El tema
       y cerrar sesión se mueven al menú de hamburguesa de Ventas.
       Además, TODO el módulo se vuelve una columna flex de altura fija
       (100vh) en vez de depender de calc(100vh - Npx) a ojo: el header del
       módulo y el toolbar reclaman solo su alto natural, y el contenido
       (carrito + grilla, o la tabla de inventario) se queda con el resto
       exacto del espacio. Así el botón Cobrar del carrito, al fondo,
       siempre queda visible sin scroll, sea cual sea el alto real del
       header/toolbar en cada pantalla. */
    body.pos-fullscreen { overflow: hidden; }
    body.pos-fullscreen header { display: none; }
    body.pos-fullscreen #productos.module {
      padding: 14px 22px;
      height: calc(100 * var(--vh, 1vh));
      /* .module.active limita el alto a "100vh - alto del header", pero en
         pantalla completa el header está oculto: sin esto quedaba una franja
         vacía (~90px) al fondo de Ventas. */
      max-height: none;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    body.pos-fullscreen #productos.module > .module-header {
      flex-shrink: 0;
      margin-bottom: 14px;
      padding-bottom: 12px;
    }
    body.pos-fullscreen #cajaAperturaPantalla:not(.hidden) {
      flex: 1;
      min-height: 0;
    }
    body.pos-fullscreen #productosRecepcion:not(.hidden),
    body.pos-fullscreen #productosAdmin:not(.hidden) {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }
    body.pos-fullscreen #posLayoutContenido:not(.hidden) {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }
    body.pos-fullscreen .pos-toolbar { flex-shrink: 0; }
    body.pos-fullscreen .pos-layout {
      flex: 1;
      min-height: 0;
    }
    body.pos-fullscreen .pos-cart,
    body.pos-fullscreen .pos-main {
      height: 100%;
    }
    /* Inventario (Aronium-style) dentro de pantalla completa: el toolbar
       reclama su alto natural (los filtros de cantidad ahora viven en el
       module-header, no acá adentro); el árbol de categorías y la tabla
       se reparten el espacio restante, y solo la tabla usa scroll interno. */
    body.pos-fullscreen #productosAdmin > .inv-toolbar-row {
      flex-shrink: 0;
    }
    body.pos-fullscreen #productosAdmin > .inv-layout {
      flex: 1;
      min-height: 0;
    }
    body.pos-fullscreen .inv-main {
      min-height: 0;
    }
    body.pos-fullscreen .inv-main > .pos-inv-search,
    body.pos-fullscreen .inv-main > .inv-footer-totales {
      flex-shrink: 0;
    }
    body.pos-fullscreen .inv-main > .pos-inv-table-scroll {
      flex: 1;
      min-height: 0;
      max-height: none;
    }
    header h1 {
      font-weight: 700;
      font-size: 22px;
      letter-spacing: -0.01em;
      color: var(--glass-text);
      display: flex;
      align-items: center;
      gap: 12px;
      text-shadow: var(--glass-text-shadow);
      transition: color 0.25s var(--ease-out);
    }
    .user-info {
      display: flex;
      align-items: center;
      gap: 18px;
    }
    .user-badge {
      background: var(--glass-bg-soft);
      border: 1px solid var(--glass-border);
      color: var(--glass-text);
      text-shadow: var(--glass-text-shadow);
      padding: 7px 18px;
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.2px;
      transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
    }
    .btn-logout {
      background: transparent;
      color: var(--glass-text);
      text-shadow: var(--glass-text-shadow);
      border: 1.5px solid var(--glass-border-hover);
      padding: 9px 22px;
      border-radius: var(--radius-sm);
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
    }
    .btn-logout:hover {
      background: var(--glass-bg-soft);
      border-color: var(--glass-border-hover);
    }

    
    /* DASHBOARD MENU - BOTONES REDONDOS */
    .dashboard-container {
      padding: 40px;
      max-width: 1400px;
      margin: 0 auto;
    }
    .dashboard-title {
      text-align: center;
      margin-bottom: 40px;
    }
    .dashboard-title h2 {
      font-size: 30px;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--glass-text);
      margin-bottom: 8px;
      text-shadow: var(--glass-text-shadow);
      transition: color 0.25s var(--ease-out);
    }
    .dashboard-title p {
      color: var(--glass-text-soft);
      font-size: 16px;
      text-shadow: var(--glass-text-shadow);
      transition: color 0.25s var(--ease-out);
    }
    .dashboard-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
      gap: 18px;
      padding: 4px;
    }
    /* La tarjeta es un .glass-panel (ver arriba) en vez de una caja sólida
       — deja ver el fondo animado a través, en vez de taparlo. */
    .dashboard-card {
      border-radius: var(--radius-lg);
      padding: 26px 24px;
      text-align: left;
      cursor: pointer;
      transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 4px;
      /* Aparición estilo React Bits "Card Nav" (sus tarjetas About/Projects/
         Contact entran con y:50→0 + fade, en cascada de 0.08s por tarjeta):
         acá se usa la misma idea, algo más corta (16px/60ms) para que las
         10 tarjetas del panel principal (o las de Configuración) no tarden
         demasiado en terminar de aparecer todas. */
      animation: cardIn 0.4s var(--ease-out) backwards;
      animation-delay: calc(var(--i, 0) * 60ms);
    }
    @keyframes cardIn {
      from { opacity: 0; transform: translateY(16px) scale(0.96); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    @media (hover: hover) and (pointer: fine) {
      .dashboard-card:hover {
        transform: translateY(-4px);
        border-color: var(--glass-border-hover);
      }
    }
    .dashboard-card:active { transform: translateY(-1px); }
    /* Ícono: puro vidrio (mismo material que .glass-panel, sin ningún
       degradado de color propio) — el color que distingue cada tarjeta
       vive solo en el ícono (glyph), nunca en la caja que lo contiene. Al
       pasar el mouse, el cristal "flota" un poco hacia adelante en 3D. */
    .card-icon {
      position: relative;
      width: 48px;
      height: 48px;
      margin-bottom: 14px;
      perspective: 24em;
      flex-shrink: 0;
    }
    .card-icon__front {
      position: absolute;
      inset: 0;
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      background: var(--glass-bg-soft);
      backdrop-filter: blur(10px) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
      -webkit-backdrop-filter: blur(10px) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
      box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 0 rgba(255, 255, 255, 0.06);
      border: 1px solid var(--glass-border);
      transition: transform 0.35s var(--ease-out), background 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
      will-change: transform;
    }
    @media (hover: hover) and (pointer: fine) {
      .dashboard-card:hover .card-icon__front {
        transform: translateY(-2px) scale(1.06);
      }
    }
    /* Un solo color para todos los íconos (antes cada tarjeta tenía su
       propio tono — pedido explícito: "que sean todos de un solo color"),
       y ese color sigue al tema igual que el resto del glass. */
    .card-icon__front i {
      color: var(--glass-icon);
      filter: var(--glass-icon-shadow);
      transition: color 0.25s var(--ease-out);
    }
    .card-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--glass-text);
      margin-bottom: 2px;
      text-shadow: var(--glass-text-shadow);
      transition: color 0.25s var(--ease-out);
    }
    .card-desc {
      font-size: 13px;
      color: var(--glass-text-soft);
      line-height: 1.4;
      text-shadow: var(--glass-text-shadow);
      transition: color 0.25s var(--ease-out);
    }
    
    /* MODULES */
    /* Antes esto forzaba casi toda la altura del viewport (calc(100vh -
       X)), fuera cual fuera el contenido real. Eso servía para que el
       fondo se viera "lleno" en pantallas grandes, pero el fondo animado
       (aurora) en realidad ya es un canvas global fijo detrás de <body>
       (#fondoAuroraCanvas, ver comentario más abajo) — no depende para
       nada de qué tan alto sea .module. Lo único ligado al alto de
       .module es la textura de líneas (::before), casi invisible. Forzar
       una altura mínima enorme entonces solo servía para, en vistas
       cortas (Asistencia > Registro, Estadísticas con una sola pestaña,
       el asistente de Registro), dejar la página un poco más alta que la
       pantalla y aparecer una barra de scroll que apenas se movía. Con un
       mínimo chico, cada vista mide lo que su contenido necesita y el
       scroll de la página solo aparece cuando de verdad hace falta. */
    .module {
      padding: 40px;
      background: var(--light);
      min-height: 200px;
      display: none;
    }
    .module.active {
      display: block;
      animation: slideIn 0.32s var(--ease-out);
    }
    /* El fondo con movimiento ahora es #fondoAuroraCanvas (global, fijo
       detrás de <body>) en vez de este gradiente CSS — se ve a través de
       .module porque queda transparente. Se conserva la textura de líneas
       (::before) como un detalle sutil encima del shader, con distinto
       tono según el tema. */
    html[data-theme="dark"] .module {
      position: relative;
      /* IMPORTANTE: no usar "overflow: hidden" aquí — esta regla tiene más
         especificidad que la "red de seguridad" .module.active (ver arriba,
         cerca de la línea 309) por el selector de atributo html[data-theme],
         así que un simple "overflow: hidden" la pisaba en silencio y
         dejaba SIN scroll a cualquier módulo genérico (Dashboard,
         Vencimientos, Renovaciones, Configuración, etc.) en cuanto su
         contenido no cabía en el alto disponible — invisible en un monitor
         grande, pero recorta contenido sin forma de bajar en uno más chico.
         overflow-x se queda oculto (por el ::before decorativo, más ancho
         que el módulo) pero overflow-y sí debe poder scrollear. */
      overflow-x: hidden;
      overflow-y: auto;
      background: transparent;
    }
    html[data-theme="dark"] .module::before {
      content: '';
      position: absolute;
      width: 200%;
      height: 200%;
      top: -50%;
      left: -50%;
      background:
        repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 40px),
        repeating-linear-gradient(-45deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 60px);
      animation: grid-shift 24s linear infinite;
      pointer-events: none;
      z-index: 0;
    }
    html[data-theme="dark"] .module > * {
      position: relative;
      z-index: 1;
    }
    html[data-theme="light"] .module {
      position: relative;
      /* Mismo fix que en el bloque dark de arriba: overflow-y debe poder
         scrollear, solo overflow-x se oculta por el ::before decorativo. */
      overflow-x: hidden;
      overflow-y: auto;
      background: transparent;
    }
    html[data-theme="light"] .module::before {
      content: '';
      position: absolute;
      width: 200%;
      height: 200%;
      top: -50%;
      left: -50%;
      background:
        repeating-linear-gradient(45deg, rgba(120, 85, 50, 0.025) 0px, rgba(120, 85, 50, 0.025) 1px, transparent 1px, transparent 40px),
        repeating-linear-gradient(-45deg, rgba(120, 85, 50, 0.035) 0px, rgba(120, 85, 50, 0.035) 1px, transparent 1px, transparent 60px);
      animation: grid-shift 24s linear infinite;
      pointer-events: none;
      z-index: 0;
    }
    html[data-theme="light"] .module > * {
      position: relative;
      z-index: 1;
    }
    /* Ventas (#productos) es una pantalla de trabajo (punto de venta), no
       una vitrina: prioriza que se vea organizada y directa, al estilo
       Aronium Lite, así que no lleva el fondo aurora en movimiento del
       resto de módulos — solo un fondo plano. */
    html[data-theme="dark"] #productos.module,
    html[data-theme="light"] #productos.module {
      background: var(--gray-light);
    }
    html[data-theme="dark"] #productos.module::before,
    html[data-theme="light"] #productos.module::before {
      display: none;
    }
    html[data-theme="dark"] #productos.module.active,
    html[data-theme="light"] #productos.module.active {
      animation: slideIn 0.32s var(--ease-out);
    }
    @keyframes aurora-drift-light {
      0% { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%; }
      50% { background-position: -6% -3%, 4% 6%, 0% 10%, 0% 0%; }
      100% { background-position: 4% 6%, -6% -3%, 10% 0%, 0% 0%; }
    }
    @keyframes slideIn {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }
    /* Las vistas que se togglean con pestañas (.inv-modo-tabs) usaban solo
       display:none <-> block, un cambio instantáneo que se sentía "tosco".
       Como el elemento vuelve a entrar al árbol de render cada vez que se
       le quita .hidden, esta animación arranca sola en cada cambio de
       pestaña — sin tocar el JS que ya hace el toggle. Solo anima
       transform/opacity (no dispara layout), así que corre suave incluso
       en equipos modestos. */
    @keyframes viewFadeIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    /* Transición direccional entre fases del asistente de Registro
       (inspirada en el componente "Stepper" de reactbits.dev): al avanzar,
       la fase nueva entra deslizándose desde la derecha; al retroceder,
       desde la izquierda — la misma idea de "consistencia espacial" que
       ya usan los sliders/carruseles de iOS. Solo anima transform/opacity. */
    @keyframes faseEntraDerecha {
      from { opacity: 0; transform: translateX(24px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes faseEntraIzquierda {
      from { opacity: 0; transform: translateX(-24px); }
      to { opacity: 1; transform: translateX(0); }
    }
    .fase-enter-derecha { animation: faseEntraDerecha 0.32s var(--ease-out); }
    .fase-enter-izquierda { animation: faseEntraIzquierda 0.32s var(--ease-out); }

    #registroVistaRegistrar, #registroVistaLista,
    #asistenciaVistaRegistro, #asistenciaVistaHistorial,
    #lockersVistaVisual, #lockersVistaDetallada,
    #reportesVistaMatriculas, #reportesVistaProductos,
    #estadisticasVistaPlanes, #estadisticasVistaIngresos, #estadisticasVistaMiembros,
    #productosAdmin, #productosRecepcion {
      animation: viewFadeIn 0.28s var(--ease-out);
    }
    /* Sub-paneles (ej. Configuración) reutilizan la misma entrada */
    .config-subpanel {
      animation: slideIn 0.28s var(--ease-out);
    }

    /* ===== ANIMATED LIST (estilo reactbits) =====
       Cada fila/tarjeta de una lista con scroll (Historial, Miembros,
       Vencimientos, Lockers, Productos, Reportes, Usuarios...) arranca
       invisible y entra con un fade + escala sutil apenas se cruza con el
       contenedor — ver activarAnimacionLista() en el JS, que agrega estas
       clases y las observa con IntersectionObserver. */
    .al-item {
      opacity: 0;
      transform: translateY(14px) scale(0.98);
      transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
      transition-delay: calc(var(--al-i, 0) * 45ms);
    }
    .al-item.al-visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    /* Las filas de tabla no pueden animar "transform" en Safari sin romper
       el layout de la fila — se anima solo su contenido (las celdas). */
    tr.al-item {
      opacity: 1;
      transform: none;
      transition: none;
    }
    tr.al-item td {
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
      transition-delay: calc(var(--al-i, 0) * 45ms);
    }
    tr.al-item.al-visible td {
      opacity: 1;
      transform: translateY(0);
    }
    @media (prefers-reduced-motion: reduce) {
      .al-item, .al-item td { transition: none !important; transform: none !important; opacity: 1 !important; }
    }

    /* MODULE HEADER */
    .module-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 32px;
      padding-bottom: 18px;
      border-bottom: 1px solid var(--border);
    }
    .module-header h2 {
      font-size: 24px;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--primary-dark);
      display: flex;
      align-items: center;
      gap: 12px;
      text-shadow: var(--glass-text-shadow);
    }
    /* Ventas se queda con su fondo plano opaco (ver #productos.module) —
       ahí no hace falta la sombra pensada para leer sobre el shader. */
    #productos .module-header h2 {
      text-shadow: none;
    }
    .btn-back {
      background: var(--card-bg);
      color: var(--primary-dark);
      border: 1.5px solid var(--border);
      padding: 10px 22px;
      border-radius: var(--radius-sm);
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: all 0.2s;
    }
    .btn-back:hover {
      border-color: var(--primary);
      background: var(--primary-light);
    }

    /* Botón flotante único "Volver al Inicio" / "Volver a Configuración"
       (ver actualizarBotonFlotanteVolver en el JS). Fijo arriba a la
       derecha — el mismo lugar de siempre (junto al título de cada
       sección) — pero ahora con position:fixed para que no se pierda al
       hacer scroll hacia abajo. El "top" se calcula en JS según el alto
       real del header principal (ver posicionarBotonFlotanteVolver), para
       quedar pegado justo debajo de él sin taparlo. Con estilo glass para
       que combine con el resto de la app en ambos temas. */
    .btn-back-flotante {
      position: fixed;
      top: 90px;
      right: 25px;
      z-index: 950;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 13px 22px;
      border-radius: 40px;
      border: 1px solid var(--glass-border);
      background: var(--glass-bg);
      backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
      color: var(--glass-text);
      text-shadow: var(--glass-text-shadow);
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      box-shadow: var(--glass-shadow);
      transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), background 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
    }
    .btn-back-flotante i {
      color: var(--glass-icon);
      filter: var(--glass-icon-shadow);
    }
    .btn-back-flotante:hover {
      transform: translateY(-3px);
      border-color: var(--glass-border-hover);
      box-shadow: 0 12px 28px rgba(0,0,0,0.25);
    }
    .btn-back-flotante.hidden { display: none; }
    @media (max-width: 640px) {
      .btn-back-flotante {
        right: 14px;
        padding: 11px 16px;
        font-size: 13px;
      }
    }

    /* ===== TOUR GUIADO CONTEXTUAL =====
       Botón flotante de ayuda (signo de interrogación) + overlay oscuro
       con "spotlight" sobre el elemento actual + tooltip con flecha. El
       contenido de los pasos cambia según el módulo activo (ver
       TOUR_PASOS y iniciarTour() en el JS). Vive fuera de cualquier
       .module, igual que #btnFlotanteVolver y el indicador de huella, por
       la regla ".module > *" (position:relative + z-index a los hijos
       directos de un módulo).

       Ubicación: abajo a la izquierda, al mismo nivel (bottom:25px) que
       el indicador de huella de la derecha (#indicadorHuellaFlotante),
       para que ambos queden en la misma línea visual. La tarjeta de
       Renovaciones (#modalHuellaRenovacion) se subió a bottom:95px para
       que sea ella la que evite chocar con este botón, no al revés. */
    .tour-btn-ayuda {
      position: fixed;
      bottom: 25px;
      left: 25px;
      z-index: 9997;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%);
      color: #fff;
      font-size: 22px;
      cursor: pointer;
      box-shadow: 0 8px 22px rgba(0,0,0,0.28), 0 0 0 0 rgba(255,255,255,0.5);
      transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
      animation: tourBtnPulso 2.6s ease-in-out infinite;
    }
    .tour-btn-ayuda:hover { transform: translateY(-3px) scale(1.05); }
    .tour-btn-ayuda.hidden { display: none; }
    @keyframes tourBtnPulso {
      0%, 100% { box-shadow: 0 8px 22px rgba(0,0,0,0.28), 0 0 0 0 rgba(255,255,255,0.35); }
      50% { box-shadow: 0 8px 22px rgba(0,0,0,0.28), 0 0 0 8px rgba(255,255,255,0); }
    }
    body.navmode-izquierda .tour-btn-ayuda { left: calc(var(--navbar-sidebar-w) + 25px); }
    @media (max-width: 640px) {
      .tour-btn-ayuda { left: 14px; bottom: 25px; width: 50px; height: 50px; font-size: 19px; }
    }

    /* Overlay que oscurece y bloquea clics en el resto de la pantalla
       mientras el tour está activo. El "agujero" de luz sobre el elemento
       resaltado no es un recorte real: es #tourSpotlight, un rectángulo
       transparente con box-shadow gigante, posicionado por JS exactamente
       sobre el target (ver posicionarPasoTour()). */
    .tour-overlay {
      position: fixed;
      inset: 0;
      z-index: 100000;
      background: transparent;
      cursor: default;
    }
    .tour-overlay.hidden { display: none; }
    .tour-spotlight {
      position: fixed;
      z-index: 100001;
      border-radius: 14px;
      pointer-events: none;
      box-shadow: 0 0 0 9999px rgba(8, 10, 20, 0.74);
      border: 2px solid var(--accent);
      transition: top 0.28s var(--ease-out), left 0.28s var(--ease-out),
                  width 0.28s var(--ease-out), height 0.28s var(--ease-out);
    }
    .tour-tooltip {
      position: fixed;
      z-index: 100002;
      max-width: 340px;
      background: var(--card-bg);
      color: var(--primary-dark);
      border-radius: 16px;
      padding: 20px 22px;
      box-shadow: 0 18px 45px rgba(0,0,0,0.35);
      transition: top 0.28s var(--ease-out), left 0.28s var(--ease-out);
    }
    .tour-tooltip::before {
      content: '';
      position: absolute;
      width: 16px;
      height: 16px;
      background: var(--card-bg);
      transform: rotate(45deg);
    }
    .tour-tooltip--abajo::before { top: -7px; left: 28px; }
    .tour-tooltip--arriba::before { bottom: -7px; left: 28px; }
    .tour-tooltip--derecha::before { left: -7px; top: 24px; }
    .tour-tooltip--izquierda::before { right: -7px; top: 24px; }
    .tour-tooltip-paso {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 6px;
    }
    .tour-tooltip-titulo {
      font-size: 17px;
      font-weight: 700;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .tour-tooltip-texto {
      font-size: 14.5px;
      line-height: 1.5;
      color: var(--gray);
      margin-bottom: 18px;
    }
    .tour-tooltip-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .tour-tooltip-botones { display: flex; gap: 8px; }
    .tour-tooltip-btn {
      border: none;
      border-radius: 10px;
      padding: 9px 16px;
      font-size: 13.5px;
      font-weight: 600;
      cursor: pointer;
      transition: transform 0.15s var(--ease-out), opacity 0.15s var(--ease-out);
    }
    .tour-tooltip-btn:hover { transform: translateY(-2px); }
    .tour-tooltip-btn--siguiente {
      background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%);
      color: #fff;
    }
    .tour-tooltip-btn--anterior {
      background: var(--gray-light);
      color: var(--primary-dark);
    }
    .tour-tooltip-btn--anterior:disabled {
      opacity: 0.4;
      cursor: default;
      transform: none;
    }
    .tour-tooltip-cerrar {
      position: absolute;
      top: 12px;
      right: 14px;
      background: none;
      border: none;
      color: var(--gray);
      font-size: 15px;
      cursor: pointer;
      padding: 4px;
    }
    .tour-tooltip-cerrar:hover { color: var(--primary-dark); }

    /* ===== MODOS DE NAVEGACIÓN =====
       Selector de 4 modos, junto al sol/luna: "Iconos" (panel de tarjetas
       de siempre) y tres variantes de barra fija (izquierda/arriba/
       derecha) que convierten las secciones del panel principal en una
       barra que nunca se oculta — un clic ahí solo cambia el contenido de
       al lado, no la esconde. Ver cambiarModoNavegacion() en el JS. */
    :root {
      --navbar-sidebar-w: 220px;
      --navbar-topbar-h: 62px;
      /* El rail de controles (modo "arriba") es más angosto que la barra
         lateral de secciones (izquierda/derecha), porque solo lleva el
         título, el tema, el selector de modos, el usuario y cerrar
         sesión — no hace falta tanto ancho como para una lista de
         secciones. */
      --controls-rail-w: 148px;
    }
    .navmode-selector {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 3px;
      border-radius: 12px;
      background: rgba(127,127,127,0.12);
    }
    .navmode-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border: none;
      border-radius: 8px;
      background: transparent;
      color: var(--glass-text);
      cursor: pointer;
      font-size: 13px;
      transition: background 0.15s ease, color 0.15s ease;
    }
    .navmode-btn--espejo i { transform: scaleX(-1); }
    .navmode-btn:hover { background: rgba(127,127,127,0.18); }
    /* Dentro del rail de controles (modo "arriba") el selector se pone en
       columna, para no ocupar tanto ancho en una barra que ya es angosta.
       En el header normal (izquierda/derecha/iconos) sigue horizontal. */
    .app-controls-rail .navmode-selector {
      flex-direction: column;
      width: 100%;
    }
    .app-controls-rail .navmode-btn { width: 100%; }
    .navmode-btn.active { background: var(--primary); color: #fff; }

    /* Barra de navegación fija en sí. RECTA, pegada al borde de la
       pantalla, sin bordes redondeados ni margen "flotando" — el mismo
       lenguaje visual plano que el header (ver header{} más arriba: fondo
       glass, sin border-radius, un único borde fino del lado de adentro).
       Oculta por completo en modo "iconos" (clase .hidden) y también
       durante Ventas/Inventario en pantalla completa, que no debe tocarse. */
    .app-navbar {
      position: fixed;
      z-index: 900;
      display: flex;
      gap: 4px;
      background: var(--glass-bg);
      backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
      border-radius: 0;
      transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
    }
    .app-navbar.hidden { display: none; }
    body.pos-fullscreen .app-navbar { display: none !important; }

    .app-navbar .navbar-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      border-radius: 10px;
      cursor: pointer;
      color: var(--glass-text);
      text-shadow: var(--glass-text-shadow);
      font-weight: 600;
      font-size: 14px;
      white-space: nowrap;
      flex-shrink: 0;
      transition: background 0.15s ease, color 0.15s ease;
    }
    .app-navbar .navbar-item i {
      font-size: 16px;
      width: 20px;
      text-align: center;
      color: var(--glass-icon);
      filter: var(--glass-icon-shadow);
    }
    .app-navbar .navbar-item:hover { background: rgba(127,127,127,0.14); }
    .app-navbar .navbar-item.active { background: var(--primary); color: #fff; }
    .app-navbar .navbar-item.active i { color: #fff; filter: none; }

    /* ===== ENTRADA ESCALONADA DE LA BARRA (estilo React Bits "Staggered
       Menu") =====
       Ahí el panel entra deslizando desde el borde y, mientras lo hace,
       cada ítem de texto entra por separado en cascada (~0.1s de diferencia
       uno del otro). Acá se adapta esa misma idea a los ítems de la barra
       fija: entran uno detrás de otro (60ms de diferencia, ver --i en
       renderizarBarraNavegacion) desde el mismo lado por el que aparece la
       barra — izquierda/derecha/arriba según el modo elegido — así el
       movimiento del ítem "seguía" visualmente al de la barra, en vez de
       aparecer todos de golpe. Como nav.innerHTML se reconstruye entero al
       renderizar o cambiar de modo, la animación se dispara sola (mismo
       truco que .dashboard-card). */
    .navbar-item {
      animation: navItemEntraIzquierda 0.45s var(--ease-out) backwards;
      animation-delay: calc(var(--i, 0) * 60ms);
    }
    @keyframes navItemEntraIzquierda {
      from { opacity: 0; transform: translateX(-16px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes navItemEntraDerecha {
      from { opacity: 0; transform: translateX(16px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes navItemEntraArriba {
      from { opacity: 0; transform: translateY(-12px); }
      to { opacity: 1; transform: translateY(0); }
    }
    body.navmode-derecha .navbar-item { animation-name: navItemEntraDerecha; }
    body.navmode-arriba .navbar-item { animation-name: navItemEntraArriba; }

    /* Variante izquierda/derecha: columna vertical, pegada de arriba
       (justo debajo del header, sin hueco) a abajo, y al borde lateral de
       la pantalla — igual que el header pero en vertical. Un solo borde
       fino del lado de adentro, como el header solo tiene borde abajo. */
    body.navmode-izquierda .app-navbar,
    body.navmode-derecha .app-navbar {
      top: var(--app-header-h, 90px);
      bottom: 0;
      width: var(--navbar-sidebar-w);
      flex-direction: column;
      align-items: stretch;
      padding: 16px 12px;
      overflow-y: auto;
    }
    body.navmode-izquierda .app-navbar { left: 0; border-right: 1px solid var(--glass-border); }
    body.navmode-derecha .app-navbar { right: 0; border-left: 1px solid var(--glass-border); }

    /* Variante arriba: fila pegada al borde de arriba (justo debajo del
       header) y a los dos costados, sin margen. Sin ancho/alto fijo: si los
       ítems no caben en una fila, pasan a una segunda en vez de generar
       scroll — acá NUNCA debe haber barras de desplazamiento. En este modo
       el header se oculta (ver "body.navmode-arriba header" más abajo) y
       sus controles bajan al rail lateral, así que la barra arranca desde
       arriba del todo, no debajo del header. */
    body.navmode-arriba .app-navbar {
      top: 0;
      left: 0;
      right: 0;
      height: auto;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: stretch;
      gap: 2px;
      padding: 14px 20px;
      overflow: visible;
      border-bottom: 1px solid var(--glass-border);
    }
    /* Cada sección reparte el mismo ancho entre todas (flex:1), así la
       fila siempre queda completa de punta a punta sin dejar un hueco
       vacío del lado derecho (donde antes quedaba, después de
       "Configuración", que es la última). También hace que la barra se
       vea más "gruesa"/sólida, no una fila angosta pegada arriba. */
    body.navmode-arriba .app-navbar .navbar-item {
      flex: 1 1 0;
      justify-content: center;
      padding: 12px 14px;
      gap: 9px;
      font-size: 13.5px;
    }
    body.navmode-arriba .app-navbar .navbar-item i { font-size: 15px; width: 16px; }

    /* En modo "arriba" el header (logo + tema + selector de modo + usuario
       + cerrar sesión) se oculta: esos controles se mudan al rail lateral
       de abajo (ver reubicarControlesHeader/#appControlsRail), porque la
       franja de arriba ya la ocupan las secciones (Inicio, Registro,
       etc.) — si el header se quedara visible, arriba quedaría con dos
       filas superpuestas de cosas distintas. */
    body.navmode-arriba header { display: none; }

    /* Rail de controles: reemplaza al header solo en modo "arriba".
       Mismo lenguaje visual plano que el resto de las barras fijas (sin
       bordes redondeados, un único borde fino del lado de adentro).
       Arranca debajo de la barra de secciones (nunca se superponen) y
       llega hasta abajo del todo. Ver reubicarControlesHeader() en el JS,
       que mueve ahí el título y el bloque de usuario/tema/sesión. */
    .app-controls-rail {
      display: none;
      position: fixed;
      left: 0;
      z-index: 950;
      width: var(--controls-rail-w);
      flex-direction: column;
      align-items: stretch;
      gap: 14px;
      padding: 16px 10px;
      background: var(--glass-bg);
      backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
      border-right: 1px solid var(--glass-border);
      border-radius: 0;
      overflow-y: auto;
      transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
    }
    body.navmode-arriba .app-controls-rail {
      display: flex;
      top: var(--navbar-arriba-h, 62px);
      bottom: 0;
    }
    /* El título, que en el header es una fila con ícono, pasa a verse
       centrado y compacto arriba del rail — más chico y en una sola línea
       corta para que no ocupe de más en una barra angosta. */
    .app-controls-rail #appTituloBloque {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 13px;
      text-align: center;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--glass-border);
    }
    /* El bloque de tema/selector de modo/usuario/cerrar sesión, que en el
       header es una fila, pasa a columna centrada dentro del rail. */
    .app-controls-rail #userInfoBloque {
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }
    /* Insignia de rol y botón de cerrar sesión más chicos dentro del rail
       (en el header normal se quedan con su tamaño de siempre). */
    .app-controls-rail .user-badge { padding: 5px 12px; font-size: 12px; }
    .app-controls-rail #currentUser { font-size: 13px; }
    .app-controls-rail .btn-logout {
      width: 100%;
      text-align: center;
      padding: 7px 10px;
      font-size: 13px;
    }

    /* Desplaza el contenido de cada sección para que no quede debajo de la
       barra fija. Ventas (#productos en pantalla completa) queda afuera a
       propósito: su regla usa un selector con ID y gana en especificidad
       (ver "body.pos-fullscreen #productos.module" más arriba), así que
       este padding nunca le aplica. */
    body.navmode-izquierda .module { padding-left: calc(var(--navbar-sidebar-w) + 40px); }
    body.navmode-derecha .module { padding-right: calc(var(--navbar-sidebar-w) + 40px); }
    /* El alto de la barra "arriba" varía (una o dos filas según el ancho de
       pantalla), así que el padding se mide en JS y se guarda en esta
       variable — ver medirAlturaBarraArriba(). Además de padding-top (por
       la barra de secciones) lleva padding-left (por el rail de controles
       que cuelga a la izquierda, debajo de esa barra). */
    body.navmode-arriba .module {
      padding-top: calc(var(--navbar-arriba-h, 62px) + 30px);
      padding-left: calc(var(--controls-rail-w) + 30px);
    }

    /* El panel de tarjetas del inicio ya no hace falta cuando las secciones
       viven en la barra fija — evita mostrar la misma lista dos veces. El
       Resumen Rápido (debajo) se queda como pantalla de inicio. */
    body.navmode-izquierda #dashboardGrid,
    body.navmode-arriba #dashboardGrid,
    body.navmode-derecha #dashboardGrid {
      display: none;
    }

    /* Con la grilla de accesos oculta, "Resumen Rápido" pasa a ser la
       ÚNICA pantalla de Inicio en los modos de barra fija — la franja
       delgada de #dashboard-kpis-compacto (pensada para ir debajo de la
       grilla) se veía perdida y vacía sola en medio de la pantalla. Acá
       se agranda y se centra para que se sienta como una pantalla de
       inicio hecha a propósito, no como un resto. */
    body.navmode-izquierda #dashboardResumenPanel,
    body.navmode-arriba #dashboardResumenPanel,
    body.navmode-derecha #dashboardResumenPanel {
      max-width: 780px;
      margin-left: auto !important;
      margin-right: auto !important;
      margin-top: calc(10 * var(--vh, 1vh)) !important;
      padding: 34px 40px !important;
    }
    body.navmode-izquierda #dashboardResumenPanel h3,
    body.navmode-arriba #dashboardResumenPanel h3,
    body.navmode-derecha #dashboardResumenPanel h3 {
      font-size: 18px !important;
      justify-content: center;
      margin-bottom: 26px !important;
    }
    body.navmode-izquierda .dashboard-kpis-compacto,
    body.navmode-arriba .dashboard-kpis-compacto,
    body.navmode-derecha .dashboard-kpis-compacto {
      justify-content: center;
      gap: 44px;
    }
    body.navmode-izquierda .dashboard-kpi,
    body.navmode-arriba .dashboard-kpi,
    body.navmode-derecha .dashboard-kpi {
      padding-right: 44px;
    }
    body.navmode-izquierda .dashboard-kpi .dashboard-kpi-icono,
    body.navmode-arriba .dashboard-kpi .dashboard-kpi-icono,
    body.navmode-derecha .dashboard-kpi .dashboard-kpi-icono {
      width: 48px;
      height: 48px;
      font-size: 20px;
    }
    body.navmode-izquierda .dashboard-kpi .dashboard-kpi-valor,
    body.navmode-arriba .dashboard-kpi .dashboard-kpi-valor,
    body.navmode-derecha .dashboard-kpi .dashboard-kpi-valor {
      font-size: 28px;
    }
    body.navmode-izquierda .dashboard-kpi .dashboard-kpi-etiqueta,
    body.navmode-arriba .dashboard-kpi .dashboard-kpi-etiqueta,
    body.navmode-derecha .dashboard-kpi .dashboard-kpi-etiqueta {
      font-size: 12.5px;
    }

    /* El botón flotante de "volver" y el indicador de huella se corren
       para no chocar con la barra derecha (que ocupa esa misma esquina). */
    body.navmode-derecha .btn-back-flotante { right: calc(var(--navbar-sidebar-w) + 25px); }
    body.navmode-derecha #indicadorHuellaFlotante { right: calc(var(--navbar-sidebar-w) + 25px) !important; }
    /* En modo "arriba" el header está oculto (ver arriba), así que el botón
       flotante se posiciona solo respecto a la barra de secciones, para no
       quedar tapado por (ni encima de) ella. */
    body.navmode-arriba .btn-back-flotante { top: calc(var(--navbar-arriba-h, 62px) + 14px) !important; }

    @media (max-width: 900px) {
      /* En pantallas angostas los modos de barra fija no caben bien —
         se cae de vuelta a "iconos" automáticamente (ver
         aplicarLayoutModoNavegacion). El selector se sigue mostrando para
         volver a elegir en pantallas más anchas. */
      .navmode-selector { display: none; }
    }

    /* GENERAL BUTTONS */
    .btn {
      padding: 12px 24px;
      border: none;
      border-radius: var(--radius-sm);
      font-weight: 600;
      cursor: pointer;
      transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), filter 0.18s var(--ease-out);
      display: inline-flex;
      align-items: center;
      gap: 9px;
      font-size: 15px;
    }
    .btn-sm {
      padding: 9px 18px;
      font-size: 13px;
    }
    .btn-success {
      background: var(--success);
      color: white;
    }
    .btn-warning {
      background: var(--warning);
      color: white;
    }
    .btn-danger {
      background: var(--danger);
      color: white;
    }
    .btn-info {
      background: var(--primary);
      color: white;
    }
    /* En Ventas, los botones "info" (Recargar, Ordenar) usan el cian de
       acento de la marca en vez de repetir el mismo magenta de los botones
       de selección (Todos, buscar por nombre) y de las etiquetas de
       categoría — así no todo se ve del mismo color en una sola pantalla. */
    #productos .btn-info {
      background: var(--accent);
    }
    .btn-accent {
      background: var(--accent);
      color: white;
    }
    .btn-outline {
      background: var(--card-bg);
      color: var(--primary-dark);
      border: 1.5px solid var(--border);
    }
    .btn-outline:hover { border-color: var(--primary); background: var(--primary-light); }
    .btn-wood {
      background: var(--wood);
      color: white;
    }
    .btn-premium {
      background: var(--premium);
      color: white;
    }
    @media (hover: hover) and (pointer: fine) {
      .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 16px -6px rgba(40, 25, 10, 0.32);
        filter: brightness(1.06);
      }
    }

    /* BOTONES DE DESCARGA DE REPORTES
       Adaptado de un snippet de Uiverse.io (andrew-demchenk0): el texto vive
       a la izquierda y un panel de ícono a la derecha barre hacia la
       izquierda cubriendo todo el botón al pasar el mouse. Cada variante usa
       el color que ya tenía su botón original, con un tono más oscuro propio
       para el panel de ícono / estado hover. */
    .report-dl-btn {
      --btn-base: var(--primary);
      --btn-dark: #885923;
      position: relative;
      width: max-content;
      height: 46px;
      padding: 0 60px 0 18px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      border: 1px solid var(--btn-dark);
      border-radius: var(--radius-sm);
      background-color: var(--btn-base);
      overflow: hidden;
      font-family: inherit;
    }
    .report-dl-btn, .report-dl-btn__icon, .report-dl-btn__text {
      transition: all 0.3s var(--ease-out);
    }
    .report-dl-btn__text {
      color: #fff;
      font-weight: 600;
      font-size: 14px;
      text-align: left;
      white-space: nowrap;
    }
    .report-dl-btn__icon {
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      width: 60px;
      background-color: var(--btn-dark);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      font-size: 16px;
      color: #fff;
    }
    .report-dl-btn__icon .report-dl-btn__arrow {
      font-size: 10px;
      opacity: 0.85;
    }
    @media (hover: hover) and (pointer: fine) {
      .report-dl-btn:hover {
        background: var(--btn-dark);
      }
      .report-dl-btn:hover .report-dl-btn__text {
        opacity: 0;
      }
      .report-dl-btn:hover .report-dl-btn__icon {
        width: 100%;
      }
    }
    .report-dl-btn:active {
      transform: scale(0.97);
    }
    .report-dl-btn--success { --btn-base: var(--success); --btn-dark: #1F9142; }
    .report-dl-btn--wood    { --btn-base: var(--wood-light); --btn-dark: var(--wood); }
    .report-dl-btn--primary { --btn-base: var(--primary); --btn-dark: #B9157F; }
    .report-dl-btn--premium { --btn-base: var(--premium); --btn-dark: #0C8FA3; }
    .btn:active {
      transform: translateY(0) scale(0.97);
      filter: brightness(0.97);
      transition: transform 0.08s var(--ease-out), filter 0.08s var(--ease-out);
    }
    
    /* REGISTRO SECTION */
    /* El título "Registro de Miembros" ahora vive pegado a la línea del
       header (igual que en Estadísticas/Reportes), y la tarjeta del
       asistente recorta un poco más su padding — entre las dos cosas se
       gana el margen que faltaba para que la Fase 1 entre sin scrollear
       en pantallas normales. */
    /* Registro es el módulo con más contenido apretado en una sola
       pantalla (barra de pasos + formulario + género + botón), así que
       además de acortar el margen del header recorta también el padding
       propio de .module — el resto de secciones se queda con el padding
       estándar de 40px. */
    #registro.module {
      padding: 22px 40px;
    }
    #registro .module-header,
    #asistencia .module-header,
    #lockers .module-header {
      margin-bottom: 14px;
    }

    /* ===== LOCKERS: un solo scroll, contenido dentro de la lista =====
       La Vista Detallada puede tener 100+ filas (una por locker). Antes
       eso hacía crecer la página entera y aparecía la barra de scroll
       general del navegador — y además, visualmente, quedaba pegada casi
       al borde de la ventana, lejos de la lista misma. Ahora el módulo
       ocupa el alto disponible bajo el header (mismo --app-header-h que ya
       usa la barra de navegación fija) y solo la vista activa (Visual o
       Detallada) hace scroll puertas adentro — el header, las pestañas y
       la fila de botones de acción se quedan siempre fijos arriba. */
    #lockers.module.active {
      display: flex;
      flex-direction: column;
      height: calc(calc(100 * var(--vh, 1vh)) - var(--app-header-h, 90px));
      overflow: hidden;
    }
    body.navmode-arriba #lockers.module.active {
      height: calc(calc(100 * var(--vh, 1vh)) - var(--navbar-arriba-h, 62px) - 30px);
    }
    #lockers.module > .module-header,
    #lockers.module > .lockers-acciones-row {
      flex: 0 0 auto;
    }
    #lockersVistaVisual {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
    }
    /* #lockersVistaDetallada YA NO scrollea a sí mismo: solo reparte el
       alto disponible (flex) hacia su único hijo, .table-container. El
       scroll real vive AHÍ ADENTRO (ver regla de abajo), para que la
       cabecera de la tabla (th, position:sticky más abajo en este mismo
       archivo) se pegue contra ESE contenedor y quede fija mientras solo
       las filas (tbody) se desplazan — así no puede volver a aparecer un
       segundo scroll "por fuera" de la tabla que arrastre también los
       encabezados, que es justo lo que se pidió corregir. */
    #lockersVistaDetallada {
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    #lockersVistaDetallada .table-container {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
    }
    .registro-fases {
      background: var(--glass-bg);
      backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
      border-radius: var(--radius-lg);
      padding: 18px 26px;
      box-shadow: var(--glass-shadow);
      border: 1px solid var(--glass-border);
      margin-bottom: 14px;
      transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
    }
    /* Antes esta barra de pasos + el título de cada fase dejaban 25px de
       margen arriba y abajo, más el margen por defecto del navegador en el
       encabezado h3 (que no tenía margin-top propio) — entre eso y el
       resto de espacios del formulario, "Datos Personales" no entraba en
       una pantalla normal sin scrollear. Todo esto queda más compacto. */
    .fase-indicator {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin: 0 0 12px 0;
    }
    .fase-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
    }
    .fase-number {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--gray-light);
      color: var(--gray);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 15px;
      transition: all 0.25s var(--ease-out);
      border: 2px solid transparent;
    }
    .fase-step.active .fase-number {
      background: var(--primary-light);
      color: var(--primary);
      border-color: var(--primary);
    }
    .fase-step.completed .fase-number {
      background: var(--success);
      color: white;
    }
    .fase-label {
      font-size: 13px;
      color: var(--gray);
      font-weight: 500;
    }
    .fase-step.active .fase-number {
      transform: scale(1.1);
    }
    /* Línea que conecta cada círculo del stepper (inspirada en el
       componente "Stepper" de reactbits.dev): se rellena de izquierda a
       derecha cuando el paso anterior queda completo, en vez de solo
       cambiar de color de golpe. Se alinea con la fila de círculos, no
       con las etiquetas de abajo. */
    .fase-connector {
      width: 56px;
      height: 3px;
      border-radius: 2px;
      background: var(--gray-light);
      overflow: hidden;
      align-self: flex-start;
      margin-top: 17px;
    }
    .fase-connector-fill {
      width: 0%;
      height: 100%;
      background: var(--primary);
      transition: width 0.4s var(--ease-out);
    }
    .fase-connector.completed .fase-connector-fill {
      width: 100%;
    }
    @media (max-width: 560px) {
      .fase-connector { width: 24px; }
    }

    /* FORMULARIOS MEJORADOS */
    .form-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 16px;
      margin: 14px 0;
    }
    /* Antes este formulario se estiraba a lo ancho de toda la tarjeta
       (igual que las demás fases), lo que dejaba huecos vacíos raros —
       sobre todo bajo el selector de género, que tenía un ancho máximo
       propio y se quedaba solo, angosto, en medio de un espacio enorme.
       Ahora todo el bloque de datos personales vive en una columna
       centrada de ancho fijo, como un formulario de iOS/macOS: se ve
       ordenado y compacto sin importar qué tan ancha sea la pantalla. */
    .registro-datos-personales {
      max-width: 760px;
      margin: 0 auto;
    }
    /* Grid de 3 columnas fijas para el formulario de Datos Personales:
       evita que 6 campos se compriman en una sola fila cuando el panel
       es muy ancho, y da a cada campo un ancho consistente y legible. */
    .form-grid--personal {
      grid-template-columns: repeat(3, 1fr);
    }
    @media (max-width: 900px) {
      .form-grid--personal {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 560px) {
      .form-grid--personal {
        grid-template-columns: 1fr;
      }
    }
    /* El selector de género ya no tiene un ancho tope propio (460px) que
       lo dejaba angosto y "perdido" — ahora ocupa todo el ancho de la
       columna centrada de arriba, así los 3 botones quedan parejos y
       proporcionados, sin espacio vacío raro a los costados. */
    .form-group--genero .gender-select {
      gap: 14px;
    }
    .form-group--genero .gender-option {
      padding: 11px 12px;
    }
    .form-group {
      margin-bottom: 14px;
    }
    .form-group label {
      display: block;
      margin-bottom: 6px;
      font-weight: 600;
      color: var(--dark);
      font-size: 14px;
    }
    .form-control {
      width: 100%;
      padding: 11px 16px;
      border: 1.5px solid var(--border);
      border-radius: var(--radius-sm);
      font-size: 15px;
      transition: all 0.2s;
      background: var(--card-bg);
      color: var(--dark);
    }
    .form-control:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px var(--primary-light);
    }

    /* Checkboxes de permisos en el modal Crear Cuenta */

    /* ============================================================
       PERMISOS DE CUENTA (Crear Nueva Cuenta / Editar permisos)
       Rediseño: antes eran checkboxes amontonados en una fila que
       envolvía sin orden. Ahora es una lista vertical (icono + título
       + descripción + toggle) a la izquierda, con un resumen en vivo
       "Puede usar / No puede usar" a la derecha que se recalcula con
       cada click — así se ve de inmediato el efecto de cada permiso,
       no solo una casilla marcada sin contexto.
       ============================================================ */
    .modal-content--cuenta { max-width: 760px; }
    .cuenta-permisos-bloque { margin-top: 6px; }
    .cuenta-permisos-titulo {
      display: block;
      margin-bottom: 12px;
      font-weight: 600;
      font-size: 14px;
      color: var(--dark);
    }
    .cuenta-permisos-layout {
      display: grid;
      grid-template-columns: 1fr 220px;
      gap: 18px;
      align-items: start;
    }
    @media (max-width: 640px) {
      .cuenta-permisos-layout { grid-template-columns: 1fr; }
    }
    .cuenta-permisos-lista {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .cuenta-permiso-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      border: 1.5px solid var(--border);
      border-radius: var(--radius-md);
      background: var(--gray-light);
      cursor: pointer;
      transition: border-color 0.18s var(--ease-out), background 0.18s var(--ease-out), transform 0.18s var(--ease-out);
    }
    .cuenta-permiso-row:hover { transform: translateX(2px); }
    .cuenta-permiso-row:has(input:checked) {
      border-color: var(--icon-color, var(--primary));
      background: color-mix(in srgb, var(--icon-color, var(--primary)) 8%, var(--card-bg));
    }
    .cuenta-permiso-icon {
      flex-shrink: 0;
      width: 34px;
      height: 34px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: color-mix(in srgb, var(--icon-color, var(--primary)) 16%, transparent);
      color: var(--icon-color, var(--primary));
      font-size: 14px;
      transition: transform 0.18s var(--ease-out);
    }
    .cuenta-permiso-row:has(input:checked) .cuenta-permiso-icon { transform: scale(1.08); }
    .cuenta-permiso-text {
      display: flex;
      flex-direction: column;
      gap: 2px;
      flex: 1;
      min-width: 0;
    }
    .cuenta-permiso-title { font-size: 13.5px; font-weight: 700; color: var(--dark); }
    .cuenta-permiso-desc { font-size: 11.5px; color: var(--gray); line-height: 1.35; }
    .cuenta-permisos-resumen {
      background: var(--gray-light);
      border: 1.5px solid var(--border);
      border-radius: var(--radius-md);
      padding: 14px;
      position: sticky;
      top: 0;
    }
    .resumen-permisos-grupo { margin-bottom: 14px; }
    .resumen-permisos-grupo:last-child { margin-bottom: 0; }
    .resumen-permisos-grupo h5 {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      color: var(--gray);
      margin-bottom: 8px;
    }
    .resumen-permiso-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12.5px;
      padding: 5px 0;
      color: var(--dark);
      animation: resumenItemIn 0.25s var(--ease-out);
    }
    .resumen-permiso-item i { width: 16px; text-align: center; font-size: 11px; }
    .resumen-permiso-item--ok i { color: var(--success); }
    .resumen-permiso-item--no { color: var(--gray); }
    .resumen-permiso-item--no i { color: var(--gray); }
    .resumen-permiso-vacio { font-size: 12px; color: var(--gray); font-style: italic; margin: 0; }
    @keyframes resumenItemIn {
      from { opacity: 0; transform: translateX(-4px); }
      to { opacity: 1; transform: translateX(0); }
    }
    .cuenta-permisos-nota { color: var(--gray); font-size: 12px; margin-top: 14px; }

    /* Toggle "neon-checkbox" (adaptado del Uiverse.io by 00Kubi que ya usa
       el Portal Público para "Recordarme") — mismas piezas (tick, glow,
       bordes que corren, explosión de partículas/anillos/chispas), solo
       retinteado a la paleta de esta app (--primary rosa / --accent cian
       en vez del cian único del portal) y reducido a 20px para vivir
       dentro de una fila de lista. */
    .neon-checkbox {
      --primary-neon: var(--primary);
      --primary-neon-light: color-mix(in srgb, var(--primary) 55%, white);
      --size: 20px;
      position: relative;
      width: var(--size);
      height: var(--size);
      flex-shrink: 0;
      margin-left: auto;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .neon-checkbox input { display: none; }
    /* display:block explícito: son <span> (para poder vivir dentro de un
       <label> junto al texto de la fila), y un span sin esto es inline —
       en un inline element el width/height:100% no aplica y el marco
       colapsa a 0x0, dejando visible solo el borde del check absoluto. */
    .neon-checkbox__frame { position: relative; width: 100%; height: 100%; display: block; }
    .neon-checkbox__box {
      position: absolute;
      inset: 0;
      background: rgba(10, 10, 12, 0.06);
      border-radius: 5px;
      border: 2px solid var(--border);
      transition: all 0.3s ease;
    }
    .neon-checkbox__check-container {
      position: absolute;
      inset: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .neon-checkbox__check {
      width: 80%;
      height: 80%;
      fill: none;
      stroke: var(--primary-neon);
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 40;
      stroke-dashoffset: 40;
      transform-origin: center;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .neon-checkbox__glow {
      position: absolute;
      inset: -2px;
      border-radius: 7px;
      background: var(--primary-neon);
      opacity: 0;
      filter: blur(7px);
      transform: scale(1.2);
      transition: all 0.4s ease;
    }
    .neon-checkbox__borders { position: absolute; inset: 0; border-radius: 5px; overflow: hidden; }
    .neon-checkbox__borders span {
      position: absolute;
      width: 36px;
      height: 1px;
      background: var(--primary-neon);
      opacity: 0;
      transition: opacity 0.4s ease;
    }
    .neon-checkbox__borders span:nth-child(1) { top: 0; left: -100%; animation: cuentaBorderFlow1 2s linear infinite; }
    .neon-checkbox__borders span:nth-child(2) { top: -100%; right: 0; width: 1px; height: 36px; animation: cuentaBorderFlow2 2s linear infinite; }
    .neon-checkbox__borders span:nth-child(3) { bottom: 0; right: -100%; animation: cuentaBorderFlow3 2s linear infinite; }
    .neon-checkbox__borders span:nth-child(4) { bottom: -100%; left: 0; width: 1px; height: 36px; animation: cuentaBorderFlow4 2s linear infinite; }
    .neon-checkbox__particles span {
      position: absolute;
      width: 3px;
      height: 3px;
      background: var(--primary-neon);
      border-radius: 50%;
      opacity: 0;
      pointer-events: none;
      top: 50%;
      left: 50%;
      box-shadow: 0 0 5px var(--primary-neon);
    }
    .neon-checkbox__rings { position: absolute; inset: -16px; pointer-events: none; }
    .neon-checkbox__rings .ring {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 1px solid var(--primary-neon);
      opacity: 0;
      transform: scale(0);
    }
    .neon-checkbox__sparks span {
      position: absolute;
      width: 16px;
      height: 1px;
      background: linear-gradient(90deg, var(--primary-neon), transparent);
      opacity: 0;
    }
    .neon-checkbox:hover .neon-checkbox__box { border-color: var(--primary-neon); transform: scale(1.05); }
    .neon-checkbox input:checked ~ .neon-checkbox__frame .neon-checkbox__box {
      border-color: var(--primary-neon);
      background: color-mix(in srgb, var(--primary-neon) 12%, transparent);
    }
    .neon-checkbox input:checked ~ .neon-checkbox__frame .neon-checkbox__check { stroke-dashoffset: 0; transform: scale(1.1); }
    .neon-checkbox input:checked ~ .neon-checkbox__frame .neon-checkbox__glow { opacity: 0.22; }
    .neon-checkbox input:checked ~ .neon-checkbox__frame .neon-checkbox__borders span { opacity: 1; }
    .neon-checkbox input:checked ~ .neon-checkbox__frame .neon-checkbox__particles span { animation: cuentaParticleExplosion 0.6s ease-out forwards; }
    .neon-checkbox input:checked ~ .neon-checkbox__frame .neon-checkbox__rings .ring { animation: cuentaRingPulse 0.6s ease-out forwards; }
    .neon-checkbox input:checked ~ .neon-checkbox__frame .neon-checkbox__sparks span { animation: cuentaSparkFlash 0.6s ease-out forwards; }
    @keyframes cuentaBorderFlow1 { 0% { transform: translateX(0); } 100% { transform: translateX(200%); } }
    @keyframes cuentaBorderFlow2 { 0% { transform: translateY(0); } 100% { transform: translateY(200%); } }
    @keyframes cuentaBorderFlow3 { 0% { transform: translateX(0); } 100% { transform: translateX(-200%); } }
    @keyframes cuentaBorderFlow4 { 0% { transform: translateY(0); } 100% { transform: translateY(-200%); } }
    @keyframes cuentaParticleExplosion {
      0% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
      20% { opacity: 1; }
      100% { transform: translate(calc(-50% + var(--x, 18px)), calc(-50% + var(--y, 18px))) scale(0); opacity: 0; }
    }
    @keyframes cuentaRingPulse { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(2); opacity: 0; } }
    @keyframes cuentaSparkFlash {
      0% { transform: rotate(var(--r, 0deg)) translateX(0) scale(1); opacity: 1; }
      100% { transform: rotate(var(--r, 0deg)) translateX(26px) scale(0); opacity: 0; }
    }
    .neon-checkbox__particles span:nth-child(1) { --x: 22px; --y: -22px; }
    .neon-checkbox__particles span:nth-child(2) { --x: -22px; --y: -22px; }
    .neon-checkbox__particles span:nth-child(3) { --x: 22px; --y: 22px; }
    .neon-checkbox__particles span:nth-child(4) { --x: -22px; --y: 22px; }
    .neon-checkbox__particles span:nth-child(5) { --x: 30px; --y: 0px; }
    .neon-checkbox__particles span:nth-child(6) { --x: -30px; --y: 0px; }
    .neon-checkbox__particles span:nth-child(7) { --x: 0px; --y: 30px; }
    .neon-checkbox__particles span:nth-child(8) { --x: 0px; --y: -30px; }
    .neon-checkbox__particles span:nth-child(9) { --x: 17px; --y: -26px; }
    .neon-checkbox__particles span:nth-child(10) { --x: -17px; --y: 26px; }
    .neon-checkbox__particles span:nth-child(11) { --x: 26px; --y: 17px; }
    .neon-checkbox__particles span:nth-child(12) { --x: -26px; --y: -17px; }
    .neon-checkbox__sparks span:nth-child(1) { --r: 0deg; top: 50%; left: 50%; }
    .neon-checkbox__sparks span:nth-child(2) { --r: 90deg; top: 50%; left: 50%; }
    .neon-checkbox__sparks span:nth-child(3) { --r: 180deg; top: 50%; left: 50%; }
    .neon-checkbox__sparks span:nth-child(4) { --r: 270deg; top: 50%; left: 50%; }
    .neon-checkbox__rings .ring:nth-child(1) { animation-delay: 0s; }
    .neon-checkbox__rings .ring:nth-child(2) { animation-delay: 0.1s; }
    .neon-checkbox__rings .ring:nth-child(3) { animation-delay: 0.2s; }

    /* SELECTOR DE GÉNERO
       Adaptado de un snippet de Uiverse.io (ayman-ashine) que usaba Tailwind
       (peer-checked, bg-blue-100, etc.). Se reconstruyó en CSS plano con la
       paleta cálida de la app: tarjetas con ícono, borde/relleno que resaltan
       al seleccionar y un "pop" circular desde el centro como micro-feedback. */
    .gender-select {
      display: flex;
      gap: 12px;
    }
    .gender-option {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 16px 10px;
      border: 1.5px solid var(--border);
      border-radius: var(--radius-md);
      background: var(--card-bg);
      cursor: pointer;
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      color: var(--gray);
      position: relative;
      overflow: hidden;
      isolation: isolate;
      transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.15s var(--ease-out);
    }
    .gender-option i {
      font-size: 22px;
      position: relative;
      z-index: 1;
      transition: transform 0.25s var(--ease-out);
    }
    .gender-option span {
      position: relative;
      z-index: 1;
    }
    .gender-option::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      width: 140%;
      padding-top: 140%;
      background: var(--primary-light);
      border-radius: 50%;
      transform: translate(-50%, -50%) scale(0);
      transition: transform 0.35s var(--ease-out);
      z-index: 0;
    }
    .gender-option.active::before {
      transform: translate(-50%, -50%) scale(1);
    }
    .gender-option.active {
      border-color: var(--primary);
      color: var(--primary);
    }
    .gender-option.active i {
      transform: scale(1.12);
    }
    @media (hover: hover) and (pointer: fine) {
      .gender-option:not(.active):hover {
        border-color: var(--accent);
        color: var(--primary);
      }
    }
    .gender-option:active {
      transform: scale(0.96);
    }

    /* PLAN SELECTION */
    .type-selector {
      display: flex;
      gap: 12px;
      margin: 22px 0;
      flex-wrap: wrap;
    }
    .type-btn {
      flex: 1;
      min-width: 150px;
      padding: 16px;
      background: var(--gray-light);
      border: 1.5px solid transparent;
      border-radius: var(--radius-md);
      text-align: center;
      cursor: pointer;
      font-weight: 600;
      font-size: 14px;
      transition: all 0.2s;
    }
    .type-btn.active {
      border-color: var(--primary);
      background: var(--primary-light);
      color: var(--primary);
      box-shadow: none;
    }
    .options-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 16px;
      margin: 22px 0;
    }
    .option-card {
      background: var(--glass-bg-soft);
      backdrop-filter: blur(10px) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
      -webkit-backdrop-filter: blur(10px) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
      padding: 22px 18px;
      border: 1.5px solid var(--glass-border);
      border-radius: var(--radius-md);
      text-align: center;
      cursor: pointer;
      transition: all 0.2s, background 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
    }
    .option-card:hover {
      border-color: var(--primary);
      transform: translateY(-3px);
      box-shadow: var(--shadow);
    }
    .option-card.selected {
      border-color: var(--primary);
      background: var(--primary-light);
      transform: translateY(-3px);
      box-shadow: var(--shadow);
    }
    .option-card .price {
      font-weight: 800;
      color: var(--primary);
      font-size: 22px;
      margin: 8px 0;
    }
    
    /* TABLAS MEJORADAS — vidrio esmerilado, salvo dentro de Ventas/Inventario
       (que reutiliza esta misma clase para su tabla) y dentro de modales
       (que se quedan opacos a propósito, ver decisión de .modal-content). */
    .table-container {
      overflow-x: auto;
      margin-top: 26px;
      border-radius: var(--radius-lg);
      border: 1px solid var(--glass-border);
      box-shadow: var(--glass-shadow);
      background: var(--glass-bg);
      backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
      transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
    }
    /* #lockersVistaDetallada .table-container entra en este mismo grupo
       opaco (en vez de quedarse con el glass/backdrop-filter de arriba)
       porque ahora ES el contenedor que scrollea (ver la sección de
       Lockers más abajo) y tiene un th con position:sticky adentro —
       backdrop-filter sobre un contenedor que además scrollea con un hijo
       sticky es una combinación que a Chromium/Edge les cuesta recomponer
       cuadro a cuadro, y se veía como el encabezado "mezclándose" con las
       filas al hacer scroll. Con fondo sólido (sin blur) ese problema de
       raíz desaparece. */
    #productos .table-container,
    .modal-content .table-container,
    #lockersVistaDetallada .table-container {
      background: var(--card-bg);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
    }
    table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      min-width: 800px;
    }
    th {
      background: var(--primary-light);
      color: var(--primary-dark);
      font-weight: 700;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      padding: 16px 20px;
      text-align: left;
      border-bottom: 2px solid var(--primary);
      position: sticky;
      top: 0;
      /* z-index explícito: sin esto, en algunos navegadores una fila con
         hover (que sube su propio fondo con !important) puede terminar
         pintándose por encima del encabezado pegajoso al pasar el mouse
         justo debajo de él durante el scroll. */
      z-index: 2;
    }
    td {
      padding: 15px 20px;
      border-bottom: 1px solid var(--border);
      font-size: 14px;
    }
    tbody tr:nth-child(even) {
      background: rgba(230, 25, 168, 0.04);
    }
    tr:hover {
      background: var(--primary-light) !important;
    }
    .status-badge {
      padding: 6px 14px;
      border-radius: var(--radius-sm);
      font-weight: 600;
      font-size: 13px;
      display: inline-block;
    }
    .status-activo {
      background: #e3f5ea;
      color: var(--success);
    }
    .status-por-vencer {
      background: #fdf1de;
      color: var(--warning);
    }
    .status-vencido {
      background: #fbe6e8;
      color: var(--danger);
    }
    /* En modo oscuro estos badges usaban fondo pastel claro fijo + color de
       texto que también se aclara con el tema, dejando texto claro sobre
       fondo claro (ilegible). Se oscurece el fondo y se fija un tono de
       texto claro que sí contrasta. */
    html[data-theme="dark"] .status-activo,
    html[data-theme="dark"] .producto-stock.alto {
      background: #22331a;
      color: #a3c988;
    }
    html[data-theme="dark"] .status-por-vencer,
    html[data-theme="dark"] .producto-stock.medio {
      background: #3a2b12;
      color: #e6bb72;
    }
    html[data-theme="dark"] .status-vencido,
    html[data-theme="dark"] .producto-stock.bajo {
      background: #3a1e1a;
      color: #e3927f;
    }
    /* Antes era un banner amarillo sólido que desentonaba con el resto de
       la app (todo glass/oscuro) y se quedaba siempre fijo ocupando
       espacio. Ahora usa el mismo lenguaje "glass" que las demás tarjetas
       y tiene un botón para cerrarlo (ver cerrarRecordatorioVencimientos
       en el JS) — se recuerda cerrado por el resto del día con
       localStorage, y vuelve a aparecer al día siguiente. */
    .alert-reminder {
      position: relative;
      background: var(--glass-bg);
      backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
      border: 1px solid var(--glass-border);
      box-shadow: var(--glass-shadow);
      padding: 22px 54px 22px 25px;
      border-radius: 20px;
      margin-bottom: 30px;
      transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
    }
    .alert-reminder h3 {
      color: var(--glass-text);
      text-shadow: var(--glass-text-shadow);
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 20px;
    }
    .alert-reminder h3 i { color: var(--accent); }
    .alert-reminder p {
      color: var(--glass-text);
      opacity: 0.85;
    }
    .alert-reminder-cerrar {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 30px;
      height: 30px;
      border: none;
      border-radius: 50%;
      background: rgba(127,127,127,0.14);
      color: var(--glass-text);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      transition: background 0.15s ease;
    }
    .alert-reminder-cerrar:hover { background: rgba(127,127,127,0.26); }

    /* LOCKER GRID MEJORADO - CORREGIDO */
    .locker-grid-container {
      background: var(--glass-bg);
      backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
      border-radius: var(--radius-lg);
      padding: 28px;
      box-shadow: var(--glass-shadow);
      border: 1px solid var(--glass-border);
      margin: 26px 0;
      overflow-x: auto;
      transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
    }
    .locker-grid {
      display: grid;
      grid-template-columns: repeat(13, 1fr);
      gap: 10px;
      min-width: 1000px;
      margin: 0 auto;
    }
    .locker-item {
      width: 58px;
      height: 58px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      color: white;
      border-radius: var(--radius-sm);
      background: var(--success);
      cursor: pointer;
      transition: transform 0.18s var(--ease-out);
      position: relative;
      overflow: hidden;
      padding: 5px;
    }
    .locker-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.08);
      opacity: 0;
      transition: opacity 0.2s;
    }
    .locker-item:hover::before {
      opacity: 1;
    }
    .locker-item:hover {
      transform: scale(1.08);
      z-index: 1;
    }
    .locker-item.ocupado {
      background: var(--danger);
    }
    .locker-item.reservado {
      background: var(--warning);
    }
    .locker-item.mantenimiento {
      background: var(--gray);
    }
    .locker-number {
      font-size: 14px;
      font-weight: 800;
    }
    .locker-status {
      font-size: 10px;
      opacity: 0.9;
      text-align: center;
      margin-top: 2px;
    }
    
    /* PRODUCTOS GRID - MEJORADO */
    .productos-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 20px;
      margin: 26px 0;
    }
    .producto-card {
      background: var(--card-bg);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow);
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
      border: 1px solid var(--border);
      position: relative;
    }
    .producto-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-lg);
      border-color: var(--primary);
    }
    .producto-img-container {
      width: 100%;
      height: 170px;
      background: var(--primary-light);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .producto-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .producto-img-placeholder {
      font-size: 60px;
      color: var(--primary);
    }
    .producto-content {
      padding: 20px;
    }
    .producto-title {
      font-size: 20px;
      font-weight: 700;
      color: var(--dark);
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .producto-codigo {
      font-size: 12px;
      background: var(--gray-light);
      padding: 3px 8px;
      border-radius: 10px;
      color: var(--gray);
    }
    .producto-price {
      font-size: 24px;
      font-weight: 800;
      color: var(--primary);
      margin-bottom: 15px;
    }
    .producto-stock {
      display: inline-block;
      padding: 6px 12px;
      background: var(--gray-light);
      color: var(--gray);
      border-radius: 20px;
      font-size: 14px;
      margin-bottom: 20px;
    }
    .producto-stock.bajo {
      background: #fee2e2;
      color: var(--danger);
    }
    .producto-stock.medio {
      background: #fef3c7;
      color: var(--warning);
    }
    .producto-stock.alto {
      background: #d1fae5;
      color: var(--success);
    }

    /* ===== PUNTO DE VENTA: orden/carrito (inspirado en Aronium) =====
       Antes cada clic en un producto abría un modal para vender SOLO ese
       producto — para llevar 2 artículos distintos en una sola venta había
       que hacer dos ventas separadas. Ahora hay una orden persistente
       (columna izquierda) donde se van acumulando productos de distintos
       tipos y se cobra todo junto en un solo pago, igual que un POS real. */
    .pos-layout {
      display: flex;
      gap: 24px;
      align-items: stretch;
    }
    .pos-cart {
      width: 320px;
      flex-shrink: 0;
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
      /* Misma altura exacta que .pos-main: así la tarjeta del carrito
         siempre se ve completa (con borde de fondo) hasta abajo, sin dejar
         un hueco vacío de la página cuando la grilla de productos es más
         alta (ej. al filtrar "Todos"), igual que en Aronium. 140px cubre
         el header de Ventas + toolbar + paddings (ya sin la barra superior
         de la app, oculta en modo pantalla completa). */
      height: calc(calc(100 * var(--vh, 1vh)) - 140px);
    }
    .pos-cart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 18px 20px;
      border-bottom: 1px solid var(--border);
    }
    .pos-cart-header h3 {
      font-size: 17px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .pos-cart-header .pos-cart-count {
      background: var(--gray-light);
      color: var(--dark);
      border-radius: 20px;
      padding: 2px 10px;
      font-size: 13px;
      font-weight: 700;
    }
    .pos-cart-vaciar {
      background: none;
      border: none;
      color: var(--gray);
      cursor: pointer;
      font-size: 15px;
      padding: 4px 8px;
      transition: color 0.15s var(--ease-out);
    }
    .pos-cart-vaciar:hover { color: var(--danger); }
    .pos-cart-items {
      flex: 1;
      overflow-y: auto;
      padding: 8px 12px;
      min-height: 120px;
    }
    .pos-cart-empty {
      text-align: center;
      color: var(--gray);
      padding: 40px 15px;
      font-size: 14px;
    }
    .pos-cart-empty i { font-size: 32px; display: block; margin-bottom: 10px; opacity: 0.5; }
    .pos-cart-line {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 6px;
      border-bottom: 1px solid var(--border);
    }
    .pos-cart-line:last-child { border-bottom: none; }
    .pos-cart-line-info { flex: 1; min-width: 0; }
    .pos-cart-line-nombre {
      font-size: 13.5px;
      font-weight: 600;
      color: var(--dark);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .pos-cart-line-precio { font-size: 12px; color: var(--gray); }
    .pos-cart-line-qty {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }
    .pos-cart-qty-btn {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: var(--gray-light);
      color: var(--dark);
      cursor: pointer;
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }
    .pos-cart-qty-btn:hover { border-color: var(--primary); color: var(--primary); }
    .pos-cart-line-cantidad { font-size: 13px; font-weight: 700; min-width: 18px; text-align: center; }
    .pos-cart-line-subtotal {
      font-size: 13.5px;
      font-weight: 700;
      min-width: 60px;
      text-align: right;
      flex-shrink: 0;
    }
    .pos-cart-quitar {
      background: none;
      border: none;
      color: var(--gray);
      cursor: pointer;
      padding: 4px;
      flex-shrink: 0;
      transition: color 0.15s var(--ease-out);
    }
    .pos-cart-quitar:hover { color: var(--danger); }
    .pos-cart-totales {
      padding: 16px 20px;
      border-top: 1px solid var(--border);
    }
    .pos-cart-fila {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: var(--gray);
      margin-bottom: 6px;
    }
    .pos-cart-fila.pos-cart-total {
      font-size: 19px;
      font-weight: 800;
      color: var(--dark);
      margin-top: 8px;
      padding-top: 10px;
      border-top: 1px dashed var(--border);
    }
    .pos-cart-cobrar {
      padding: 14px;
      font-size: 16px;
    }
    .pos-cart-cobrar:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    .pos-main {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      height: calc(calc(100 * var(--vh, 1vh)) - 140px);
    }
    .pos-main-header { flex-shrink: 0; }
    .pos-main-grid-scroll {
      flex: 1;
      overflow-y: auto;
      min-height: 0;
    }
    .pos-grid-vacio {
      grid-column: 1/-1;
      text-align: center;
      padding: 60px 20px;
      color: var(--gray);
    }
    .pos-grid-vacio i { font-size: 40px; display: block; margin-bottom: 14px; opacity: 0.4; }
    .pos-grid-vacio p { font-size: 14px; line-height: 1.6; }
    /* Fila de botones pequeños para elegir por qué campo buscar (nombre,
       código, categoría), al estilo de los íconos de Aronium antes del
       campo de búsqueda. */
    .pos-search-modes {
      display: flex;
      gap: 4px;
      flex-shrink: 0;
    }
    .pos-search-mode-btn {
      width: 42px;
      height: 42px;
      border-radius: 10px;
      border: 1.5px solid var(--border);
      background: var(--gray-light);
      color: var(--gray);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      flex-shrink: 0;
      transition: background 0.12s var(--ease-out), border-color 0.12s var(--ease-out), color 0.12s var(--ease-out);
    }
    .pos-search-mode-btn:hover { border-color: var(--primary); color: var(--primary); }
    .pos-search-mode-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

    /* Inventario (dentro de Ventas): versión compacta al estilo Aronium,
       todo en una sola pantalla — tabla con scroll interno propio en vez
       de alargar toda la página. */
    .pos-inv-search { margin: 0 0 16px 0; }
    .pos-inv-table-scroll {
      margin-top: 0;
      max-height: calc(calc(100 * var(--vh, 1vh)) - 290px);
      min-height: 220px;
      overflow-y: auto;
    }

    /* Tabs Inventario / Productos en el header de la sección Inventario
       (panel principal, solo Administrador). */
    .inv-modo-tabs {
      display: flex;
      gap: 6px;
      background: var(--card-bg-soft, rgba(0,0,0,0.04));
      padding: 4px;
      border-radius: 12px;
      border: 1px solid var(--border);
    }
    .inv-modo-tab {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      border: none;
      border-radius: 8px;
      background: transparent;
      color: var(--text-secondary);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.08s var(--ease-out);
    }
    .inv-modo-tab:hover {
      background: rgba(0,0,0,0.05);
      color: var(--text);
    }
    .inv-modo-tab:active {
      transform: scale(0.96);
    }
    .inv-modo-tab.active {
      background: var(--primary);
      color: #fff;
    }

    /* Header centrado en 3 columnas para módulos que solo tienen título +
       pestañas (Asistencia, Lockers, Estadísticas, Registro): el botón
       "Volver al Inicio" de estas secciones es el flotante global, así que
       .module-header solo tenía 2 hijos y con justify-content:space-between
       las pestañas quedaban pegadas al borde derecho, muy cerca de ese
       botón flotante. Con grid de 3 columnas (1fr/auto/1fr) las pestañas
       quedan centradas de verdad sin importar cuánto mida el título. */
    .module-header--tabs-centro {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
    }
    .module-header--tabs-centro h2 {
      grid-column: 1;
      justify-self: start;
    }
    .module-header--tabs-centro .inv-modo-tabs {
      grid-column: 2;
      justify-self: center;
    }

    /* Barra de iconos superior del Inventario, al estilo de la ventana de
       Inventario de Aronium Lite (Actualizar, Imprimir, PDF, Excel,
       Ayuda). Historial/Recuento/Inv. rápido se sacaron: eran botones
       "Próximamente" que no hacían nada. */
    .inv-toolbar-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 6px 0;
      margin-bottom: 16px;
      border-bottom: 1px solid var(--border);
    }
    .inv-toolbar {
      display: flex;
      align-items: stretch;
      gap: 4px;
      flex-wrap: wrap;
      flex: 1;
      padding: 4px 6px;
    }
    .inv-toolbar-side {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }
    .inv-toolbar-btn--activo { background: var(--primary-light); }
    .inv-toolbar-btn--activo i { color: var(--primary); }
    .inv-toolbar-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-width: 74px;
      padding: 8px 10px;
      background: none;
      border: none;
      border-radius: 10px;
      color: var(--dark);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.12s var(--ease-out), transform 0.12s var(--ease-out);
    }
    .inv-toolbar-btn i { font-size: 18px; color: var(--accent); transition: transform 0.15s var(--ease-out), color 0.15s var(--ease-out); }
    /* Hover: el botón "flota" un poco y el ícono resalta — así se nota que
       es interactivo incluso antes de tocarlo. */
    .inv-toolbar-btn:hover:not(:disabled) { background: var(--gray-light); transform: translateY(-2px); }
    .inv-toolbar-btn:hover:not(:disabled) i { color: var(--primary); transform: scale(1.1); }
    /* Feedback visual al presionar: sin esto los botones no daban ninguna
       señal de "toque recibido" (queja real: "no sé si presioné el botón
       o no"). */
    .inv-toolbar-btn:active:not(:disabled) { background: var(--primary-light); transform: translateY(-2px) scale(0.94); }
    .inv-toolbar-btn:active:not(:disabled) i { transform: scale(0.9); }
    .inv-toolbar-btn:disabled {
      color: var(--gray);
      opacity: 0.45;
      cursor: not-allowed;
    }
    .inv-toolbar-btn:disabled i { color: var(--gray); }
    /* Animación que confirma "sí hice algo" al hacer clic — ver el listener
       delegado junto a renderizarToolbarInventarioProductos(). Actualizar
       gira una vuelta completa (combina con su ícono de refresco); el resto
       hace un pequeño salto/giro corto. */
    @keyframes invIconGirar {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    .inv-icon-girar { animation: invIconGirar 0.5s ease-in-out; }
    @keyframes invIconPop {
      0% { transform: scale(1) rotate(0deg); }
      35% { transform: scale(1.3) rotate(-10deg); }
      65% { transform: scale(0.9) rotate(8deg); }
      100% { transform: scale(1) rotate(0deg); }
    }
    .inv-icon-pop { animation: invIconPop 0.45s ease-out; }

    /* Fila de producto elegida en la tabla (Editar/Eliminar producto,
       Mov. avg price de la barra de Productos actúan sobre esta fila). */
    #cuerpoInventario tr { cursor: pointer; }
    #cuerpoInventario tr.inv-row-selected { background: var(--primary-light) !important; }
    #cuerpoInventario tr.inv-row-selected td { color: var(--dark); }

    /* Filtros de cantidad de Inventario, con sus contadores de colores:
       viven al lado de Ayuda, al final del toolbar de íconos, con un
       texto chico debajo/al lado de cada uno para que se entienda qué
       hace sin depender del tooltip. */
    .inv-filtros-cantidad-header {
      display: flex;
      align-items: center;
      gap: 16px;
      padding-left: 12px;
      margin-left: 4px;
      border-left: 1px solid var(--border);
    }
    .inv-filtro-chip {
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: default;
    }
    .inv-filtro-chip-label {
      font-size: 11px;
      color: var(--gray);
      font-weight: 600;
      white-space: nowrap;
    }
    .inv-switch {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      user-select: none;
    }
    .inv-switch input { display: none; }
    .inv-switch-slider {
      position: relative;
      width: 34px;
      height: 19px;
      background: var(--border);
      border-radius: 20px;
      transition: background 0.15s var(--ease-out);
      flex-shrink: 0;
    }
    .inv-switch-slider::before {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 15px;
      height: 15px;
      background: #fff;
      border-radius: 50%;
      transition: transform 0.15s var(--ease-out);
      box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }
    .inv-switch input:checked + .inv-switch-slider { background: var(--primary); }
    .inv-switch input:checked + .inv-switch-slider::before { transform: translateX(15px); }
    .inv-count-badge {
      min-width: 22px;
      padding: 2px 8px;
      border-radius: 20px;
      color: #fff;
      font-weight: 800;
      font-size: 12px;
      text-align: center;
    }
    .inv-count-badge--danger { background: var(--danger); }
    .inv-count-badge--info { background: var(--accent); }
    .inv-count-badge--success { background: var(--success); }

    /* Layout de dos columnas: árbol de categorías + contenido principal */
    .inv-layout {
      display: flex;
      gap: 20px;
      align-items: stretch;
    }
    .inv-sidebar {
      width: 200px;
      flex-shrink: 0;
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 10px;
      overflow-y: auto;
    }
    .inv-sidebar-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 700;
      font-size: 13px;
      color: var(--dark);
      padding: 8px 10px;
      margin-bottom: 4px;
    }
    .inv-sidebar-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 9px 10px 9px 26px;
      border-radius: 8px;
      font-size: 13px;
      color: var(--gray);
      cursor: pointer;
      transition: background 0.12s var(--ease-out), color 0.12s var(--ease-out);
    }
    .inv-sidebar-item:hover { background: var(--gray-light); color: var(--dark); }
    .inv-sidebar-item.active { background: var(--primary); color: #fff; font-weight: 700; }
    .inv-sidebar-item .inv-sidebar-count {
      font-size: 11px;
      opacity: 0.8;
    }
    .inv-main {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
    }
    /* Totales al pie de la tabla, al estilo del footer "Costo / Precio de
       venta" de Aronium — calculados sobre los productos filtrados/visibles.
       Todo en una sola línea delgada: Costo, Precio de venta y, pegado a
       la derecha, el resumen en chips chicos. */
    .inv-footer-totales {
      display: flex;
      align-items: center;
      gap: 26px;
      flex-wrap: wrap;
      margin-top: 14px;
      padding: 10px 16px;
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
    }
    .inv-footer-title { font-weight: 700; font-size: 11px; color: var(--gray); margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.03em; }
    /* Resumen del inventario (antes 4 tarjetas grandes arriba de la
       pantalla): ahora son chips chicos, agrupados a la izquierda junto a
       Costo. Precio de venta es el único que se separa del todo, empujado
       a la derecha (ver .inv-footer-col--venta). */
    .inv-footer-col--venta { margin-left: auto; }
    .inv-mini-stats { display: flex; flex-wrap: wrap; gap: 6px; }
    .inv-mini-stat {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: var(--gray-light);
      color: var(--dark);
      border-radius: 20px;
      padding: 4px 10px;
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
    }
    .inv-mini-stat i { font-size: 10px; color: var(--accent); }
    .inv-mini-stat strong { font-weight: 800; }
    .inv-mini-stat--danger { background: rgba(220, 53, 69, 0.12); color: var(--danger); }
    .inv-mini-stat--danger i { color: var(--danger); }
    .inv-mini-stat--success { background: rgba(40, 167, 69, 0.12); color: var(--success); }
    .inv-mini-stat--success i { color: var(--success); }
    .inv-footer-row {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      font-size: 12px;
      color: var(--gray);
      min-width: 190px;
    }
    .inv-footer-row strong { color: var(--dark); }
    /* Encabezados y celdas de la tabla de Inventario/Productos, un poco
       más chicos que el resto de la app (esta tabla tiene más columnas y
       se siente más "llena" con el tamaño estándar). */
    .pos-inv-table-scroll th { font-size: 11px; padding: 11px 14px; }
    .pos-inv-table-scroll td { font-size: 13px; padding: 11px 14px; }

    @media (max-width: 900px) {
      .pos-layout { flex-direction: column; }
      .pos-cart { width: 100%; height: auto; }
      .pos-main { height: auto; }
      .inv-layout { flex-direction: column; }
      .inv-sidebar { width: 100%; }
    }

    /* Selector Punto de Venta / Inventario (solo visible para admin) */

    /* Barra de herramientas superior del Punto de Venta, estilo Aronium:
       fila de botones ícono-arriba/texto-abajo, siempre visibles. */
    .pos-toolbar {
      display: flex;
      align-items: stretch;
      gap: 6px;
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      padding: 8px;
      margin-bottom: 24px;
      overflow-x: auto;
    }
    .pos-toolbar-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-width: 84px;
      background: none;
      border: 1px solid transparent;
      border-radius: 10px;
      padding: 10px 8px;
      cursor: pointer;
      color: var(--dark);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.25;
      white-space: nowrap;
      position: relative;
      transition: background 0.12s var(--ease-out), border-color 0.12s var(--ease-out);
    }
    .pos-toolbar-btn i { font-size: 18px; color: var(--gray); }
    .pos-toolbar-btn:hover { background: var(--gray-light); border-color: var(--border); }
    .pos-toolbar-btn:hover i { color: var(--primary); }
    .pos-toolbar-btn--disabled { opacity: 0.4; }
    .pos-toolbar-btn--accent {
      background: var(--success);
      color: #fff;
      margin-left: 4px;
    }
    .pos-toolbar-btn--accent i { color: #fff; }
    .pos-toolbar-btn--accent:hover { background: var(--success); filter: brightness(1.08); border-color: transparent; }
    .pos-toolbar-spacer { flex: 1; min-width: 8px; }

    /* Voltea el orden visual del carrito y la grilla: el carrito queda a
       la izquierda y los productos a la derecha, igual que Aronium. El
       orden en el HTML no cambia (evita reescribir todo el bloque), solo
       el orden de pintado con flexbox. */
    .pos-layout .pos-cart { order: -1; }
    .pos-layout .pos-main { order: 2; }

    /* Badge de caja abierta (estilo Aronium) */
    .caja-info-badge {
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(20, 198, 222, 0.12);
      color: var(--accent);
      border: 1px solid rgba(20, 198, 222, 0.3);
      border-radius: 20px;
      padding: 8px 14px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
    }
    .pos-menu-btn {
      height: 40px;
      border-radius: 20px;
      border: 1px solid var(--border);
      background: var(--card-bg);
      color: var(--dark);
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 18px;
      white-space: nowrap;
      transition: border-color 0.15s var(--ease-out), color 0.15s var(--ease-out);
    }
    .pos-menu-btn i { font-size: 15px; }
    .pos-menu-btn:hover { border-color: var(--primary); color: var(--primary); }
    /* Panel lateral del menú de Ventas, al estilo Aronium: un panel fijo
       que entra desde el borde derecho de toda la ventana (no depende de
       ningún elemento del toolbar, así se evita que quede recortado o
       superpuesto con el resto del punto de venta). */
    .pos-menu-backdrop {
      position: fixed !important;
      inset: 0;
      background: rgba(0, 0, 0, 0.45);
      z-index: 998;
    }
    .pos-menu-panel {
      position: fixed !important;
      top: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 300px;
      max-width: calc(85 * var(--vw, 1vw));
      background: var(--card-bg);
      box-shadow: -12px 0 30px rgba(0, 0, 0, 0.25);
      z-index: 999;
      padding: 10px;
      overflow-y: auto;
      overflow-x: hidden;
      transform: translateX(100%);
      transition: transform 0.22s var(--ease-out);
    }
    .pos-menu-panel.open { transform: translateX(0); }
    .pos-menu-panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 12px 12px 16px 12px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 8px;
    }
    .pos-menu-panel-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 15px;
      font-weight: 800;
      color: var(--dark);
      white-space: nowrap;
    }
    .pos-menu-panel-close {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--gray-light);
      border: none;
      color: var(--gray);
      font-size: 14px;
      cursor: pointer;
      transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out);
    }
    .pos-menu-panel-close:hover { background: var(--danger); color: #fff; }
    .pos-menu-panel button {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      background: none;
      border: none;
      text-align: left;
      padding: 13px 12px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      color: var(--dark);
      cursor: pointer;
      transition: background 0.12s var(--ease-out);
    }
    .pos-menu-panel button:hover { background: var(--gray-light); }
    .pos-menu-badge {
      margin-left: auto;
      background: var(--primary);
      color: #fff;
      border-radius: 20px;
      padding: 1px 8px;
      font-size: 11px;
      font-weight: 800;
    }
    .pos-menu-sep {
      height: 1px;
      background: var(--border);
      margin: 6px 4px;
    }
    /* Botón "Fijar en la barra" dentro del panel: mismo look que los demás
       ítems del menú, pero con un estado activo (tickeado) bien visible,
       igual que otros botones "activos" de la app (.filtro-btn.active). */
    .pos-menu-pin-btn.active {
      background: var(--primary-light);
      color: var(--primary-dark);
    }
    .pos-menu-pin-btn.active i { color: var(--primary); }

    /* Contenedor donde se ancla el menú de Ventas cuando está "fijado":
       vive dentro del toolbar superior, al lado de Cobrar (F10). */
    .pos-toolbar-anclado {
      display: flex;
      align-items: stretch;
      gap: 6px;
    }
    /* Cuando el panel #menuVentasDropdown se mueve acá por JS (ver
       aplicarModoMenuVentas), deja de ser un panel lateral fijo y pasa a
       ser una fila más de botones del toolbar. */
    .pos-menu-panel.pos-menu-panel--anclado {
      position: static !important;
      width: auto !important;
      max-width: none !important;
      height: auto !important;
      background: none;
      box-shadow: none;
      padding: 0;
      margin: 0;
      overflow: visible;
      transform: none !important;
      transition: none;
      display: flex;
      align-items: stretch;
      gap: 6px;
    }
    .pos-menu-panel--anclado .pos-menu-panel-header,
    .pos-menu-panel--anclado .pos-menu-sep {
      display: none;
    }
    .pos-menu-panel--anclado button {
      position: relative;
      width: auto;
      flex-direction: column;
      justify-content: center;
      gap: 6px;
      min-width: 84px;
      padding: 10px 8px;
      border-radius: 10px;
      font-size: 12px;
      text-align: center;
      white-space: nowrap;
    }
    .pos-menu-panel--anclado .pos-menu-badge {
      position: absolute;
      top: 4px;
      right: 10px;
      margin-left: 0;
    }

    /* Pantalla de Apertura de Caja */
    #cajaAperturaPantalla {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 420px;
    }
    .caja-apertura-card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      padding: 40px;
      max-width: 380px;
      width: 100%;
      text-align: center;
    }
    .caja-apertura-icono {
      font-size: 42px;
      color: var(--primary);
      margin-bottom: 16px;
      display: block;
    }
    .caja-apertura-card h3 { font-size: 20px; margin-bottom: 10px; }
    .caja-apertura-card p { color: var(--gray); font-size: 14px; margin-bottom: 22px; }
    .caja-apertura-card .form-group { text-align: left; margin-bottom: 18px; }

    /* MODALES MEJORADOS */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(15, 23, 42, 0.65);
      backdrop-filter: blur(4px);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      animation: overlayFadeIn 0.22s var(--ease-out);
    }
    /* El fondo oscuro/blur aparecía de golpe (display:none -> flex, sin
       transición) mientras la tarjeta sí "materializaba" con scale+slide
       (modalSlideIn). Ahora el velo se desvanece junto con la tarjeta, no
       antes — la superficie entera se siente como una sola pieza. */
    @keyframes overlayFadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .modal-content {
      background: var(--card-bg);
      padding: 36px;
      border-radius: var(--radius-lg);
      max-width: 600px;
      width: 90%;
      box-shadow: var(--shadow-lg);
      position: relative;
      animation: modalSlideIn 0.22s var(--ease-out);
      max-height: calc(90 * var(--vh, 1vh));
      overflow-y: auto;
      border: 1px solid var(--border);
    }
    /* ===== Tarjeta de Socio: carnet digital con QR (Registro/Estadísticas) ===== */
    .tarjeta-socio {
      width: 100%;
      max-width: 380px;
      aspect-ratio: 1.6 / 1;
      margin: 18px auto 0;
      border-radius: 20px;
      background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #2563eb 100%);
      color: #fff;
      padding: 22px 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.28);
      position: relative;
      overflow: hidden;
    }
    .tarjeta-socio::before {
      content: '';
      position: absolute; top: -50px; right: -50px;
      width: 170px; height: 170px; border-radius: 50%;
      background: rgba(255,255,255,0.08);
    }
    .tarjeta-socio-header { display: flex; justify-content: space-between; align-items: flex-start; z-index: 1; }
    .tarjeta-socio-gym { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; opacity: 0.85; }
    .tarjeta-socio-plan-badge { background: rgba(255,255,255,0.18); border-radius: 999px; padding: 4px 12px; font-size: 11px; font-weight: 700; white-space: nowrap; }
    .tarjeta-socio-body { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; z-index: 1; }
    .tarjeta-socio-datos .nombre { font-size: 19px; font-weight: 800; margin-bottom: 6px; line-height: 1.2; }
    .tarjeta-socio-datos .fila { font-size: 12px; opacity: 0.85; margin-top: 3px; }
    .tarjeta-socio-datos .fila strong { opacity: 1; }
    .tarjeta-socio-qr { background: #fff; border-radius: 12px; padding: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; }
    .tarjeta-socio-qr canvas, .tarjeta-socio-qr img, .tarjeta-socio-qr svg { display: block; }
    /* Reverso de la tarjeta (Configuración > Tarjetas de Socio): mismo
       tamaño y colores que el anverso (misma "tarjeta" visual, solo cambia
       el contenido), con el código (si corresponde), el texto legal y,
       opcionalmente, una firma — igual que una tarjeta bancaria. */
    .tarjeta-socio--reverso { justify-content: flex-start; gap: 10px; }
    /* El código en el reverso se ve distinto según el tipo: el de barras
       queda bien como una franja blanca completa (como la banda magnética
       de una tarjeta real), pero el QR es cuadrado — dejarlo en una franja
       ancha se ve como un rectángulo blanco vacío con el QR perdido en el
       medio. Por eso el QR usa una placa blanca chica, centrada, del tamaño
       justo del código (--qr), y el de barras sigue usando la franja
       completa (--barra, o el default si no se especifica). */
    .tarjeta-socio-reverso-codigo { background: #fff; border-radius: 10px; padding: 10px; display: flex; align-items: center; justify-content: center; min-height: 50px; width: 100%; }
    .tarjeta-socio-reverso-codigo--qr { width: fit-content; align-self: center; padding: 8px; border-radius: 8px; }
    .tarjeta-socio-reverso-codigo canvas, .tarjeta-socio-reverso-codigo svg { display: block; max-width: 100%; }
    .tarjeta-socio-reverso-legal { font-size: 10.5px; line-height: 1.4; opacity: 0.85; }
    .tarjeta-socio-reverso-contacto { font-size: 10.5px; opacity: 0.75; }
    .tarjeta-socio-reverso-contacto:empty::before { content: attr(data-placeholder); opacity: 0.6; font-style: italic; }
    /* "Firma": en vez de una línea en blanco a la espera de que alguien la
       firme a mano (que no tiene cómo pasar en una tarjeta digital), se
       simula con el propio nombre del socio en itálica tipo manuscrita —
       mismo criterio que muchas tarjetas de banco/ID que imprimen la firma
       del titular en vez de dejarla en blanco. */
    .tarjeta-socio-firma { margin-top: auto; text-align: center; }
    .tarjeta-socio-firma-nombre { font-family: 'Brush Script MT', 'Segoe Script', cursive; font-style: italic; font-size: 17px; line-height: 1.1; }
    .tarjeta-socio-firma-etiqueta { border-top: 1px solid rgba(255,255,255,0.5); margin-top: 4px; padding-top: 4px; font-size: 9.5px; opacity: 0.75; }

    /* ===== Flip 3D manual (anverso/reverso) — un solo click, no hover.
       Las dos caras viven siempre en el DOM (una detrás de la otra con
       backface-visibility:hidden); "volteala" es solo agregar/quitar la
       clase .flipped, así el contenedor NUNCA cambia de tamaño entre caras
       (antes cada cara se dibujaba por separado y el recuadro se achicaba
       o agrandaba según cuál tocara). En impresión se ignora el 3D: se
       muestra lisa la cara que estaba visible en pantalla. ===== */
    .tarjeta-flip-container { width: 100%; perspective: 1200px; }
    .tarjeta-flip-inner {
      position: relative;
      width: 100%;
      aspect-ratio: 1.6 / 1;
      transform-style: preserve-3d;
      transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .tarjeta-flip-container.flipped .tarjeta-flip-inner { transform: rotateY(180deg); }
    .tarjeta-flip-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
    .tarjeta-flip-face--back { transform: rotateY(180deg); }
    .tarjeta-flip-face .tarjeta-socio { width: 100%; height: 100%; max-width: none; margin: 0; }
    /* Tarjeta del editor (Configuración > Tarjetas de Socio): mismo truco de
       "dibujar a tamaño real (380px) y encoger con transform:scale" que la
       mini-preview del panel (ver .tarjeta-mini-frame/.tarjeta-mini-inner) —
       si en cambio se deja que el ancho se achique por CSS (width:100% de un
       contenedor angosto) el texto queda con su tamaño de letra fijo pero la
       tarjeta más chica, y se ve amontonado/desproporcionado. Con scale todo
       se achica junto (letras incluidas), así el editor se ve IGUAL que la
       vista previa, solo que más grande. */
    .tarjeta-editor-flip-frame { width: 100%; max-width: 580px; margin: 0 auto; aspect-ratio: 1.6 / 1; overflow: hidden; position: relative; }
    .tarjeta-editor-flip-scaler { width: 380px; transform-origin: top left; position: absolute; top: 0; left: 0; }
    @media print {
      .tarjeta-flip-inner { transform: none !important; transition: none !important; }
      .tarjeta-flip-face--back { display: none; }
      .tarjeta-flip-container.flipped .tarjeta-flip-face--front { display: none; }
      .tarjeta-flip-container.flipped .tarjeta-flip-face--back { display: block; transform: none !important; }
    }
    /* Editor (modal): resalta los textos editables del reverso igual que en
       el editor de tickets, para que se note que se puede tocar. */
    #tarjetaEditorModalBody [contenteditable="true"] { border-radius: 4px; outline-offset: 2px; cursor: text; transition: background 0.15s; }
    #tarjetaEditorModalBody [contenteditable="true"]:hover { outline: 1px dashed rgba(255,255,255,0.8); }
    #tarjetaEditorModalBody [contenteditable="true"]:focus { outline: 2px solid #fff; }
    @media print {
      body > *:not(#modalTarjetaSocio) { visibility: hidden; }
      #modalTarjetaSocio, #modalTarjetaSocio * { visibility: visible; }
      #modalTarjetaSocio { position: fixed; inset: 0; background: #fff; }
      #modalTarjetaSocio .modal-content > *:not(#tarjetaSocioImprimible) { display: none; }
      #modalTarjetaSocio .modal-content { box-shadow: none; max-width: 100%; }
    }
    /* Formularios de Agregar/Editar Producto: esta app corre en la PC de
       recepción, no en un celular, así que en vez de la columna angosta
       de 600px que obliga a escrolear un montón, usan un modal ancho
       donde el mismo .form-grid (ya es un grid que reparte solo) acomoda
       los campos en 3 columnas — horizontal, no una lista vertical larga.
       Además se ajustan los espaciados verticales (más finos que los del
       modal genérico) para que las 3 filas + foto + botones entren en la
       pantalla sin necesidad de la barra de scroll lateral. */
    .modal-content--producto {
      max-width: 920px;
      padding: 28px 32px;
    }
    .modal-content--producto .modal-header { margin-bottom: 14px; }
    .modal-content--producto .form-grid { gap: 14px 20px; margin: 14px 0; }
    .modal-content--producto .form-group { margin-bottom: 10px; }
    /* Detalle del Socio: mismo criterio que el modal de Producto de arriba
       — foto a la izquierda, campos a la derecha en vez de todo apilado en
       una sola columna angosta, para que entre sin scroll en una pantalla
       de escritorio normal. */
    .detalle-socio-layout {
      display: grid;
      grid-template-columns: 160px 1fr;
      gap: 28px;
      align-items: start;
      margin-top: 18px;
    }
    .detalle-socio-foto { text-align: center; }
    @media (max-width: 700px) {
      .detalle-socio-layout { grid-template-columns: 1fr; }
    }
    /* Botón "X" para cerrar el modal desde arriba (en vez de un botón
       "Cerrar" de ancho completo hasta abajo, que obligaba a escrolear). */
    .modal-close-btn {
      position: absolute;
      top: 18px;
      right: 18px;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: none;
      background: var(--gray-light);
      color: var(--dark);
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .15s ease, transform .15s ease;
      z-index: 2;
    }
    .modal-close-btn:hover { background: var(--border); }
    .modal-close-btn:active { transform: scale(0.9); }
    /* Historial de Ventas: el modal ya no escrolea completo (eso generaba
       doble barra de navegación, una del modal y otra de la tabla). Solo
       la tabla escrolea, ocupando todo el espacio vertical disponible. */
    .modal-content--historial {
      display: flex;
      flex-direction: column;
      max-height: calc(85 * var(--vh, 1vh));
      overflow: hidden;
    }
    .modal-content--historial .table-container {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
    }
    @keyframes modalSlideIn {
      from { opacity: 0; transform: translateY(-20px) scale(0.97); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .modal-header {
      margin-bottom: 26px;
      text-align: center;
    }
    .modal-header h3 {
      font-size: 22px;
      font-weight: 700;
      color: var(--primary-dark);
      margin-bottom: 8px;
    }

    /* METODO PAGO BUTTONS */
    .metodo-pago-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin: 18px 0;
    }
    .metodo-pago-btn {
      padding: 16px;
      border: 1.5px solid var(--border);
      border-radius: var(--radius-md);
      background: var(--card-bg);
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      font-size: 14px;
    }
    .metodo-pago-btn.selected {
      border-color: var(--primary);
      background: var(--primary-light);
      color: var(--primary);
    }
    
    /* ESTADÍSTICAS - MEJORADO */
    .estadisticas-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
      margin-bottom: 40px;
    }
    @media (max-width: 1024px) {
      .estadisticas-container {
        grid-template-columns: 1fr;
      }
    }
    .estadisticas-card {
      background: var(--glass-bg);
      backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
      border-radius: var(--radius-lg);
      padding: 26px;
      box-shadow: var(--glass-shadow);
      border: 1px solid var(--glass-border);
      transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
    }
    .chart-container {
      position: relative;
      height: 300px;
      width: 100%;
    }
    /* Antes Planes e Ingresos se veían juntos en el grid de 2 columnas de
       .estadisticas-container (uno al lado del otro). Ahora que cada uno
       vive en su propia pestaña, ese grid dejaba una columna entera vacía
       junto al gráfico — un hueco enorme. Con una sola columna y el card
       centrado con ancho máximo, el gráfico usa el espacio bien y no
       parece perdido en una tarjeta demasiado ancha. */
    .estadisticas-container--single {
      grid-template-columns: 1fr;
      max-width: 900px;
      margin: 0 auto 10px auto;
    }
    .estadisticas-container--single .estadisticas-card {
      padding: 18px 22px;
    }
    .estadisticas-container--single .estadisticas-card h3 {
      margin-bottom: 10px !important;
    }
    .estadisticas-container--single .chart-container {
      height: 340px;
    }

    /* LISTA DE USUARIOS MEJORADA */
    .filtros-estadisticas {
      display: flex;
      gap: 8px;
      margin: 22px 0;
      flex-wrap: wrap;
    }
    .filtro-btn {
      padding: 10px 20px;
      background: var(--gray-light);
      border: none;
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-weight: 600;
      font-size: 14px;
      color: var(--dark);
      transition: all 0.2s;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .filtro-btn.active {
      background: var(--primary);
      color: white;
    }
    .lista-usuarios {
      background: var(--glass-bg);
      backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
      border-radius: var(--radius-lg);
      box-shadow: var(--glass-shadow);
      border: 1px solid var(--glass-border);
      overflow: hidden;
      transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
    }
    .usuario-item {
      padding: 18px 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: background 0.2s;
    }
    .usuario-item:hover {
      background: var(--gray-light);
    }
    .usuario-info {
      flex: 1;
    }
    .usuario-nombre {
      font-weight: 700;
      font-size: 16px;
      color: var(--dark);
      margin-bottom: 4px;
    }
    .usuario-detalles {
      display: flex;
      gap: 18px;
      color: var(--gray);
      font-size: 13px;
      flex-wrap: wrap;
    }
    .usuario-acciones {
      position: relative;
    }

    /* ENTRENADORES: asignación automática */
    .asig-auto { background: var(--gray-light); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
    .asig-auto-tit, .asig-manual-tit { font-weight: 700; font-size: 14px; display: flex; gap: 8px; align-items: center; }
    .asig-manual-tit { margin: 4px 2px 8px; }
    .asig-auto-sub { font-size: 12.5px; color: var(--gray); margin: 4px 0 10px; line-height: 1.5; }
    .asig-reg-fila { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; align-items: center; }
    .asig-chip--on { background: var(--primary, #6366f1) !important; color: #fff !important; border-color: transparent !important; }
    .asig-chip--cat { font-weight: 700; }
    .asig-chip--grande { font-size: 14px; padding: 8px 14px; }
    .asig-auto-ahora { display: flex; gap: 8px; align-items: center; font-size: 13px; margin: 4px 0 10px; cursor: pointer; }
    #modalAsignarSocios .asig-modal { max-height: 94vh; overflow-y: auto; }

    /* PANTALLA DE BIENVENIDA: editor */
    .bvx { margin: 6px 0 22px; padding-top: 18px; border-top: 1px solid var(--glass-border, rgba(128,128,128,.3)); }
    .bvx-tit { font-size: 18px; margin-bottom: 4px; color: var(--primary-dark); }
    .bvx-sub { color: var(--gray); font-size: 13px; margin-bottom: 14px; }
    .bvx-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 22px; align-items: start; }
    @media (max-width: 1100px) { .bvx-layout { grid-template-columns: 1fr; } }
    .bvx-campos .form-group { margin-bottom: 10px; }
    .bvx-fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .bvx-rangos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
    .bvx-rangos input[type=range] { width: 100%; }
    .bvx-colores { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin: 6px 0; }
    .bvx-color { display: flex; align-items: center; gap: 8px; }
    .bvx-color input[type=color] { width: 44px; height: 34px; padding: 0; border: 1px solid var(--glass-border, #888); border-radius: 8px; background: none; cursor: pointer; }
    .bvx-auto { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; font-weight: 500; }
    .bvx-checks { display: flex; flex-direction: column; gap: 8px; justify-content: flex-end; }
    .bvx-vista { position: sticky; top: 0; }
    .bvx-vista-cab { font-weight: 700; font-size: 13px; margin-bottom: 6px; color: var(--gray); }
    .bvx-pantalla { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: radial-gradient(60% 55% at 20% 30%, rgba(214,36,159,.55), transparent 70%), radial-gradient(55% 55% at 80% 72%, rgba(10,167,196,.55), transparent 70%), #0e1020; color: #fff; --bvx-acento: #d6249f; container-type: inline-size; }
    .bvx-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.2cqw; text-align: center; padding: 4cqw; }
    .bvx-logo { color: var(--bvx-acento); }
    .bvx-input { margin-top: .8cqw; border: 2px solid rgba(255,255,255,.3); border-radius: 1.4cqw; padding: .9cqw 3cqw; font-size: 2.2cqw; background: rgba(255,255,255,.08); }
    .bvx-reloj { position: absolute; font-variant-numeric: tabular-nums; font-weight: 700; text-align: center; line-height: 1.15; }
    @media (max-width: 700px) { .bvx-colores, .bvx-fila2, .bvx-rangos { grid-template-columns: 1fr; } }

    /* REPORTE POR CUENTA */
    .rc-modal { max-width: 980px; width: 96vw; max-height: 92vh; display: flex; flex-direction: column; }
    .rc-controles { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
    .rc-controles select { max-width: 280px; }
    .rc-chips { display: flex; gap: 6px; flex-wrap: wrap; }
    .rc-fechas { display: flex; gap: 6px; align-items: center; }
    .rc-resultado { flex: 1; min-height: 120px; overflow-y: auto; border-radius: 14px; background: var(--gray-light); padding: 14px; }
    .rc-vacio { color: var(--gray); text-align: center; padding: 30px 10px; }
    .rc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
    .rc-kpi { background: var(--card-bg, rgba(255,255,255,.06)); border-radius: 12px; padding: 10px 12px; }
    .rc-kpi span { display: block; font-size: 12px; color: var(--gray); }
    .rc-kpi b { font-size: 20px; }
    .rc-resultado h4 { margin: 14px 0 6px; font-size: 14px; }
    .rc-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
    .rc-tabla th, .rc-tabla td { padding: 6px 8px; border-bottom: 1px solid rgba(128,128,128,.25); text-align: left; vertical-align: top; }
    .rc-tabla td.num, .rc-tabla th.num { text-align: right; white-space: nowrap; }

    /* MODAL DE PAGO (registro) */
    .pago-modal { max-width: 620px; width: 94vw; max-height: 92vh; overflow-y: auto; transition: max-width .25s ease; }
    .pago-modal:has(.pago-info:not(:empty)) { max-width: 1020px; }
    .pago-cols { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; }
    .pago-modal:has(.pago-info:not(:empty)) .pago-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .pago-col-der .pago-info { margin-top: 0; }
    .pago-col-izq .pago-resumen { margin-top: 0; }
    @media (max-width: 860px) { .pago-modal:has(.pago-info:not(:empty)) .pago-cols { grid-template-columns: 1fr; } }
    .pago-resumen { background: var(--gray-light); border-radius: 16px; padding: 14px 18px; margin: 4px 0 16px; }
    .pago-resumen-fila { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 14px; border-bottom: 1px dashed rgba(128,128,128,.25); }
    .pago-resumen-fila span { color: var(--gray); }
    .pago-resumen-fila b { text-align: right; }
    .pago-resumen-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; font-size: 15px; }
    .pago-resumen-total b { font-size: 26px; color: var(--success); }
    .pago-info { margin-top: 14px; border-radius: 14px; padding: 14px 16px; background: rgba(99,102,241,.08); font-size: 13.5px; line-height: 1.55; }
    .pago-info:empty { display: none; }
    .pago-info .pago-info-cab { font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
    .pago-info img.pago-qr, .pago-info div.pago-qr { display: block; width: auto; height: auto; max-width: 100%; max-height: min(46vh, 400px); min-width: 210px; object-fit: contain; background: #fff; border-radius: 14px; padding: 8px; margin: 8px auto; }
    .pago-info div.pago-qr { display: flex; align-items: center; justify-content: center; }
    .pago-qr-monto { display: flex; flex-direction: column; align-items: center; margin: 4px 0 6px; }
    .pago-qr-monto span { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--gray); }
    .pago-qr-monto b { font-size: 34px; line-height: 1.1; font-weight: 800; color: var(--dark); }
    .pago-qr-nota { text-align: center; font-size: 12.5px; color: var(--gray); margin-bottom: 6px; }
    .pago-info .pago-pendiente { color: var(--gray); font-style: italic; }
    .pago-info a.pago-link { display: inline-flex; gap: 6px; align-items: center; margin-top: 6px; font-weight: 600; }
    .pago-campo { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
    .pago-campo label { font-weight: 600; font-size: 13px; }
    .pago-campo.hidden { display: none; }
    .pago-confirma { margin-top: 14px; text-align: center; font-size: 13.5px; color: var(--gray); }
    .pago-confirma b { color: var(--dark); }
    .pago-acciones { margin-top: 18px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
    .pago-acciones .btn { padding: 14px 28px; }

    /* VENTANA FINAL DE PAGO */
    .pgx-modal { max-width: 520px; width: 94vw; max-height: 94vh; overflow-y: auto; text-align: center; }
    .pgx-check { width: 64px; height: 64px; margin: 0 auto 6px; }
    .pgx-check svg { width: 100%; height: 100%; }
    .pgx-check circle { stroke: var(--success); stroke-width: 3; fill: rgba(34,197,94,.12); stroke-dasharray: 160; stroke-dashoffset: 160; animation: pgxTrazo .6s ease forwards; }
    .pgx-check path { stroke: var(--success); stroke-width: 4; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 50; stroke-dashoffset: 50; animation: pgxTrazo .4s .45s ease forwards; }
    @keyframes pgxTrazo { to { stroke-dashoffset: 0; } }
    .pgx-resumen { background: var(--gray-light); border-radius: 14px; padding: 12px 16px; margin: 12px 0; text-align: left; font-size: 14px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; }
    .pgx-resumen span { color: var(--gray); }
    .pgx-resumen b { text-align: right; }
    .pgx-total { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; padding-top: 8px; margin-top: 4px; border-top: 1px dashed rgba(128,128,128,.3); }
    .pgx-total b { font-size: 22px; color: var(--success); }
    .pgx-seccion { text-align: left; margin-top: 14px; }
    .pgx-seccion h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--gray); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
    .pgx-botones { display: grid; gap: 8px; }
    .pgx-botones.tres { grid-template-columns: repeat(3, 1fr); }
    .pgx-botones.dos { grid-template-columns: repeat(2, 1fr); }
    .pgx-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border-radius: 14px; border: 1px solid var(--glass-border, rgba(128,128,128,.3)); background: var(--glass-bg, rgba(255,255,255,.06)); color: inherit; font-weight: 600; font-size: 13px; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; }
    .pgx-btn i { font-size: 20px; }
    .pgx-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.18); }
    .pgx-btn:active:not(:disabled) { transform: scale(.97); }
    .pgx-btn:disabled { opacity: .45; cursor: not-allowed; }
    .pgx-btn.imprimir i { color: #6366f1; }
    .pgx-btn.correo i { color: #0ea5e9; }
    .pgx-btn.whatsapp i { color: #22c55e; }
    .pgx-cerrar { width: 100%; margin-top: 16px; }
    @media (max-width: 520px) { .pgx-botones.tres { grid-template-columns: 1fr; } .pgx-btn { flex-direction: row; justify-content: center; } }

    /* COBROS (Configuración) */
    .cobros-cfg { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--glass-border, rgba(128,128,128,.3)); }
    .cobros-cfg h4 { font-size: 18px; margin-bottom: 4px; color: var(--primary-dark); }
    .cobros-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 14px; }
    @media (max-width: 1100px) { .cobros-grid { grid-template-columns: 1fr; } }
    .cobros-col { background: var(--gray-light); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
    .cobros-col h5 { font-size: 15px; margin-bottom: 4px; }
    .cobros-col label { font-size: 12px; font-weight: 600; color: var(--gray); margin-top: 4px; }
    .cobros-qr-fila { display: flex; align-items: center; gap: 8px; }
    .cobros-qr-fila img { width: 64px; height: 64px; object-fit: contain; background: #fff; border-radius: 8px; padding: 3px; }
    .cobros-qr-fila input[type=file] { font-size: 12px; max-width: 100%; }

    /* EDITAR CUENTA */
    .ec-error {
      background: rgba(239,68,68,.12); color: var(--danger); border: 1px solid rgba(239,68,68,.4);
      border-radius: 10px; padding: 10px 14px; font-size: 13px; font-weight: 600; margin-bottom: 12px;
    }
    .ec-huella { border: 1px dashed var(--border, rgba(128,128,128,.4)); border-radius: 14px; padding: 14px; margin-top: 6px; }
    .ec-huella-cab { font-weight: 700; margin-bottom: 10px; }
    .ec-estado-huella { font-size: 13px; font-weight: 600; margin-bottom: 10px; padding: 8px 12px; border-radius: 10px; }
    .ec-estado-huella.ec-ok { color: var(--success); background: rgba(34,197,94,.12); }
    .ec-estado-huella.ec-warn { color: var(--warning); background: rgba(245,158,11,.12); }
    .ec-estado-huella.ec-err { color: var(--danger); background: rgba(239,68,68,.12); }

    /* NOTIFICACIONES */
    /* Contenedor global: SIEMPRE por encima de cualquier ventana flotante */
    #notificationContainer {
      position: fixed;
      top: 100px; /* debajo del encabezado: no tapa Cerrar Sesión ni los botones de arriba */
      right: 20px;
      z-index: 2147483000;
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: flex-end;
      pointer-events: none;
      max-width: calc(100vw - 40px);
    }
    #notificationContainer .notification { pointer-events: auto; }
    .notification {
      position: relative;
      padding: 16px 22px;
      border-radius: var(--radius-md);
      color: white;
      font-weight: 600;
      font-size: 14px;
      z-index: 1001;
      animation: slideInRight 0.22s var(--ease-out);
      box-shadow: var(--shadow-lg);
      display: flex;
      align-items: center;
      gap: 10px;
      max-width: 400px;
    }
    .notification.notification-exit {
      animation: slideOutRight 0.18s var(--ease-in-out) forwards;
    }
    @keyframes slideInRight {
      from { transform: translateX(100%); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }
    @keyframes slideOutRight {
      from { transform: translateX(0); opacity: 1; }
      to { transform: translateX(100%); opacity: 0; }
    }
    .notification.success { background: var(--success); }
    .notification.error { background: var(--danger); }
    .notification.warning { background: var(--warning); }
    .notification.info { background: var(--info); }
    
    /* RECIBOS Y NOTAS */
    .recibo-container {
      background: var(--card-bg);
      padding: 40px;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      max-width: 800px;
      margin: 0 auto;
    }
    .recibo-header {
      text-align: center;
      margin-bottom: 30px;
      border-bottom: 2px solid var(--primary);
      padding-bottom: 20px;
    }
    .recibo-header h2 {
      color: var(--primary-dark);
      font-size: 26px;
      font-weight: 700;
      margin-bottom: 10px;
    }
    .recibo-info {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
      margin: 25px 0;
    }
    .recibo-item {
      margin-bottom: 15px;
    }
    .recibo-label {
      font-weight: 600;
      color: var(--gray);
      margin-bottom: 5px;
    }
    .recibo-value {
      font-size: 18px;
      font-weight: 700;
      color: var(--dark);
    }
    .recibo-total {
      text-align: right;
      margin-top: 30px;
      padding-top: 20px;
      border-top: 2px solid var(--primary);
    }
    .recibo-firma {
      margin-top: 50px;
      padding-top: 30px;
      border-top: 1px dashed var(--border);
      text-align: center;
    }

    /* TICKET-PAPER: "papel" de recibo con colores fijos en hex, iguales a
       los que usa la ventana de impresión real (ver window.open dentro de
       generarReciboPago/generarNotaVenta*). Las clases .recibo-* de más
       arriba usan variables de tema (pensadas para el div oculto que se
       imprime) y por eso el ticket se veía oscuro dentro de la app en modo
       noche. Envolviendo la miniatura y el modal de edición en
       .ticket-paper, estas reglas más específicas (dos clases) le ganan a
       las de una sola clase sin importar el tema activo. */
    .ticket-paper { background: #fff; color: #1a1a1a; }
    /* overflow-x:hidden acá es un seguro: cualquier cosa que se desborde
       del ancho de 800px (una tabla que no se achica bien, un texto largo
       sin cortes) se recorta DENTRO del propio "papel", en vez de sangrar
       hacia afuera y desalinear el cálculo de zoom de la miniatura
       (ajustarEscalaMiniaturaTicket asume que el ticket entero mide 800px
       de ancho — si algo se sale de ahí, la miniatura lo corta por el lado
       equivocado). */
    .ticket-paper .recibo-container { background: #fff; padding: 40px; border-radius: 16px; box-shadow: none; max-width: 800px; margin: 0 auto; overflow-x: hidden; }
    .ticket-paper .recibo-header { text-align: center; margin-bottom: 30px; border-bottom: 2px solid #E619A8; padding-bottom: 20px; }
    .ticket-paper .recibo-header h2 { color: #E619A8; font-size: 26px; font-weight: 700; margin-bottom: 10px; }
    .ticket-paper .recibo-header p { color: #444; margin: 5px 0; }
    .ticket-paper .recibo-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin: 25px 0; }
    .ticket-paper .recibo-item { margin-bottom: 15px; }
    .ticket-paper .recibo-label { font-weight: 600; color: #666; margin-bottom: 5px; }
    .ticket-paper .recibo-value { font-size: 18px; font-weight: 700; color: #1a1a1a; }
    .ticket-paper .recibo-total { text-align: right; margin-top: 30px; padding-top: 20px; border-top: 2px solid #E619A8; color: #1a1a1a; }
    .ticket-paper .recibo-firma { margin-top: 50px; padding-top: 30px; border-top: 1px dashed #ccc; text-align: center; color: #1a1a1a; }
    /* Zonas editables directamente sobre el ticket (modal "Editar Ticket") —
       un contorno punteado al pasar el mouse y sólido al enfocar deja claro
       qué texto se puede tocar, sin agregarle un campo de formulario aparte. */
    .ticket-paper [contenteditable="true"] { border-radius: 4px; outline-offset: 2px; cursor: text; transition: background 0.15s; }
    .ticket-paper [contenteditable="true"]:hover { outline: 1px dashed #E619A8; background: rgba(230,25,168,0.04); }
    .ticket-paper [contenteditable="true"]:focus { outline: 2px solid #E619A8; background: rgba(230,25,168,0.08); }
    /* La tabla de productos del ticket de Venta usa filas normales de tabla
       y una regla global de la app (tr:hover, con !important) las resalta
       oscuro al pasar el mouse — pensada para tablas de datos reales
       (Inventario, Historial), no para el "papel" de un ticket que se
       supone estático. Se anula acá con más especificidad + su propio
       !important. */
    .ticket-paper tr:hover { background: transparent !important; }
    /* CAUSA REAL del recorte horizontal en el ticket de Venta: la regla
       global "table { min-width: 800px; }" (pensada para que las tablas de
       datos reales -Inventario, Historial- nunca queden demasiado
       angostas) también le pegaba a la tabla de productos de ESTE ticket,
       forzándola a un mínimo de 800px aunque su "papel" solo tiene ~720px
       de ancho disponible (800 menos los 40px de padding de cada lado) —
       esos ~80px de más se salían del papel y la miniatura, al recortar al
       ancho exacto del ticket, los cortaba a mitad de palabra ("SUBTOTAL"
       aparecía como "SUBT"). Documentado acá porque no es evidente mirando
       solo el HTML del ticket: el culpable vive en el CSS genérico de
       tablas de la app, no en este bloque. También se pisa el "th {
       background: var(--primary-light) }" global (pensado para
       encabezados de tablas de datos) con un rosa fijo, para que no
       aparezca oscuro en tema noche. */
    .ticket-paper table { min-width: 0; }
    .ticket-paper th {
      background: #FBE7F5;
      color: #1a1a1a;
      text-transform: none;
      letter-spacing: normal;
      position: static;
    }
    .ticket-paper td { color: #1a1a1a; }

    /* Miniatura del panel de Configuración: el ticket real se dibuja a
       tamaño completo (800px) dentro de un marco chico y se reduce con
       transform:scale — así siempre se ve fiel a como se va a imprimir,
       solo que en pequeño. El recorte del alto es intencional (es una
       miniatura, no la vista completa — para eso está "Editar Ticket").
       El scale de acá abajo es solo un valor de arranque: como el ancho
       real del marco varía según la resolución/ventana (laptop vs monitor
       externo), ajustarEscalaMiniaturaTicket() lo recalcula por JS a partir
       del ancho real (ver esa función) — si no, en pantallas angostas el
       ticket queda más grande que el marco y se ve recortado. */
    #ticketThumbFrame { --th: clamp(420px, calc(100vh - 330px), 680px); height: var(--th); width: calc(var(--th) * 0.82); max-width: 100%; overflow: hidden; position: relative; border-radius: 12px; border: 1px solid var(--border); box-shadow: var(--shadow); background: #fff; }
    #ticketThumbInner { width: 800px; transform-origin: top left; transform: scale(0.45); position: absolute; top: 0; left: 0; pointer-events: none; }

    /* Modal "Editar Ticket": más grande que el modal genérico (para que
       entre editando sin sentirse apretado) y con su propio manejo de
       scroll. El .modal-content genérico tiene overflow-y:auto SIN
       overflow-x — por la regla de CSS de que overflow-x se computa a
       "auto" cuando overflow-y está seteado y overflow-x quedó en
       "visible", eso ya le agrega una barra horizontal fantasma a TODOS
       los modales (normalmente invisible porque el contenido entra, pero
       acá con el ticket de 800px no). Por eso este modal fija su propio
       overflow:hidden (anula el del genérico) y mueve el único scroll real
       a #ticketEditorScrollArea, con overflow-x:hidden explícito. */
    .modal-content--ticket-editor { max-width: 1150px; width: 94%; max-height: calc(93 * var(--vh, 1vh)); overflow: hidden; display: flex; flex-direction: column; }
    .modal-content--ticket-editor .modal-header { flex-shrink: 0; }
    #ticketEditorScrollArea { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 4px 6px 10px 4px; }
    .modal-content--ticket-editor > div:last-child { flex-shrink: 0; }

    /* Toolbar de alineación estilo Word dentro del modal de edición —
       reemplaza el <select> Izquierda/Centro/Derecha por tres botones de
       icono, más directo de tocar y de entender de un vistazo. */
    .btn-icon-align { border: none; background: transparent; width: 32px; height: 32px; border-radius: 6px; cursor: pointer; color: #888; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; }
    .btn-icon-align:hover { background: rgba(230,25,168,0.1); color: #E619A8; }
    .btn-icon-align.active { background: #E619A8; color: #fff; }

    /* Controles de cada campo dentro del ticket: en vez de ojito+flechas
       (confuso: ¿arriba de qué? ¿ocultar es lo mismo que borrar?), ahora
       son solo 2 acciones por campo — "intercambiar lugar" (armás un campo,
       tocás otro, cambian de posición) y "eliminar". Arriba de la lista van
       los botones para agregar un campo nuevo o un separador. */
    .btn-icon-campo { border: none; background: #fff; width: 26px; height: 26px; border-radius: 6px; cursor: pointer; color: #888; display: flex; align-items: center; justify-content: center; font-size: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.15); transition: background 0.15s, color 0.15s; }
    .btn-icon-campo:hover { background: #E619A8; color: #fff; }
    .btn-icon-campo.armado { background: #E619A8; color: #fff; box-shadow: 0 0 0 2px rgba(230,25,168,0.35); }
    .ticket-field-row.seleccionado-intercambio { outline: 2px dashed #E619A8; outline-offset: 2px; background: rgba(230,25,168,0.06); }
    .btn-agregar-campo { border: 1px dashed #E619A8; background: transparent; color: #E619A8; padding: 6px 12px; border-radius: 8px; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background 0.15s; }
    .btn-agregar-campo:hover { background: rgba(230,25,168,0.08); }

    /* ===== Editor de Tarjetas de Socio (Configuración) — mismo patrón que
       Tickets y Comprobantes: selector de plan (chips), mini-previews de
       anverso/reverso, y modal con los controles reales. ===== */
    .tarjeta-plan-selector { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
    /* Mini-preview del panel: se dibuja la tarjeta a su ancho REAL (380px,
       igual que en edición) dentro de un marco chico con overflow:hidden, y
       se encoge entera con transform:scale calculado en JS según el ancho
       disponible (ver ajustarEscalaMiniaturasTarjeta) — así se ve
       EXACTAMENTE igual que en edición, solo que más chica, en vez de
       recalcular el layout a un ancho angosto (eso hacía que el texto se
       desbordara del recuadro). Mismo truco que la miniatura de tickets. */
    .tarjeta-mini-frame {
      width: 100%; aspect-ratio: 1.6 / 1; overflow: hidden; position: relative; border-radius: 10px;
      transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
      cursor: pointer;
    }
    /* Animación al pasar el cursor (referencia: tarjeta Uiverse de mihocsaszilard,
       simplificada al tilt+scale+sombra — el detalle de chip/brillo no aplica a
       nuestro diseño de tarjeta). */
    .tarjeta-mini-frame:hover { transform: rotateZ(1deg) rotateY(8deg) scale(1.06); box-shadow: 0 14px 26px rgba(15, 23, 42, 0.3); }
    .tarjeta-mini-inner { width: 380px; transform-origin: top left; position: absolute; top: 0; left: 0; }
    .tarjeta-preset-swatch {
      width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
      border: 2px solid transparent; flex-shrink: 0;
      transition: transform 0.15s, border-color 0.15s;
    }
    .tarjeta-preset-swatch:hover { transform: translateY(-2px); }
    .tarjeta-preset-swatch.active { border-color: var(--primary-dark, #1a1a1a); }
    .tarjeta-editor-campo { margin-bottom: 16px; }
    .tarjeta-editor-campo label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--gray); margin-bottom: 6px; }
    .tarjeta-editor-campo input[type="color"] { width: 40px; height: 30px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; padding: 2px; background: none; }

    /* VENTA RÁPIDA MODAL */
    .venta-rapida-modal .modal-content {
      max-width: 500px;
    }
    .cantidad-selector {
      display: flex;
      align-items: center;
      gap: 15px;
      margin: 20px 0;
      justify-content: center;
    }
    .cantidad-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--primary);
      color: white;
      border: none;
      font-size: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .cantidad-input {
      width: 80px;
      text-align: center;
      padding: 10px;
      border: 2px solid var(--border);
      border-radius: 10px;
      font-size: 20px;
      font-weight: 700;
    }
    
    /* STATS GRID */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
      margin: 26px 0;
    }
    /* Solo se usa en Dashboard (ver override #dashboardStats más específico
       arriba), Lockers y Estadísticas — ninguno de los tres es Ventas ni un
       modal, así que puede ser glass directamente. */
    .stat-card {
      background: var(--glass-bg);
      backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
      padding: 22px;
      border-radius: var(--radius-lg);
      box-shadow: var(--glass-shadow);
      text-align: left;
      transition: all 0.2s, background 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
      border: 1px solid var(--glass-border);
    }
    .stat-card:hover {
      transform: translateY(-3px);
      border-color: var(--glass-border-hover);
    }

    /* Contador chico de Disponibles/Ocupados/Total en Lockers: antes era
       un bloque de 3 tarjetas grandes (.stat-card) siempre visible arriba
       de las dos vistas — demasiado protagonismo para un dato de
       referencia. Ahora es un detalle de texto, pegado junto al botón
       "Asignar Locker Manual". */
    .lockers-stats-compacto {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      font-size: 13px;
      font-weight: 600;
      color: var(--gray);
    }
    .lockers-stats-compacto span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
    }
    .lockers-stats-compacto strong {
      color: var(--primary-dark);
      font-weight: 800;
      font-size: 15px;
    }

    /* KPIs de Estadísticas: antes 6 tarjetas grandes (.stat-card) siempre
       visibles arriba de las pestañas de gráficos — le quitaban
       protagonismo al contenido real (gráficos/lista) y encima empujaban
       todo hacia abajo, provocando el scroll que no debería hacer falta
       para un gráfico. Ahora es una fila de detalles chicos: ícono +
       número + etiqueta, separados por una línea vertical tenue. */
    /* Estadísticas es el único módulo donde el título y las pestañas
       necesitan quedar bien pegados a la fila de KPIs (que a su vez tiene
       que quedar pegada al gráfico) — por eso el margen inferior del
       header se recorta solo acá, sin tocar el resto de secciones. */
    #estadisticas .module-header {
      margin-bottom: 14px;
    }
    /* Reportes: el título quedaba muy lejos de "Seleccionar Rango de
       Fechas" porque el stats-grid de arriba (margin: 26px 0 por
       defecto) sumaba a la separación del header. Se recorta solo acá. */
    #reportes .module-header {
      margin-bottom: 16px;
    }
    #reportesStats.stats-grid {
      margin: 0 0 16px 0;
    }
    /* ===== REPORTES: header/controles fijos, solo la tabla scrollea =====
       Mismo criterio que Lockers (ver ese comentario): el módulo ocupa el
       alto disponible bajo el header y solo la vista activa (Matrículas o
       Punto de Venta) hace scroll puertas adentro — así queda una sola
       barra, la de la lista, y no una de página compitiendo con otra. */
    #reportes.module.active {
      display: flex;
      flex-direction: column;
      height: calc(calc(100 * var(--vh, 1vh)) - var(--app-header-h, 90px));
      overflow: hidden;
    }
    body.navmode-arriba #reportes.module.active {
      height: calc(calc(100 * var(--vh, 1vh)) - var(--navbar-arriba-h, 62px) - 30px);
    }
    #reportes.module > .module-header,
    #reportes.module > #reportesStats,
    #reportes.module > .reportes-controles {
      flex: 0 0 auto;
    }
    #reportesVistaMatriculas,
    #reportesVistaProductos {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
    }

    /* Fechas + presets + descargas: todo en una sola línea (antes eran dos
       filas separadas y los campos de fecha con el selector nativo grande
       ocupaban demasiado). Los chips Hoy/Semana/Mes cubren los rangos más
       comunes con un clic, sin abrir el calendario — los inputs de fecha
       (ahora angostos) se quedan solo para un rango a medida. */
    .reportes-controles {
      background: var(--glass-bg);
      backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-lg);
      padding: 14px 20px;
      margin: 0 0 16px 0;
      display: flex;
      align-items: flex-end;
      gap: 14px;
      flex-wrap: wrap;
      transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
    }
    .reportes-presets {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .chip-fecha {
      padding: 10px 16px;
      border-radius: 20px;
      border: 1px solid var(--glass-border);
      background: transparent;
      color: var(--dark);
      font-size: 13px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out), border-color 0.15s var(--ease-out), transform 0.08s var(--ease-out);
    }
    .chip-fecha:hover { background: rgba(127,127,127,0.14); }
    .chip-fecha:active { transform: scale(0.96); }
    .chip-fecha.active { background: var(--primary); color: #fff; border-color: var(--primary); }

    /* Botón "Rango" consolidado: reemplaza los antiguos chips separados de
       7 días/30 días. Un solo botón despliega hacia abajo las 4 opciones
       de rango (7 días, 1 mes, 6 meses, 1 año) — "Hoy" se queda como chip
       independiente porque es el más usado y el usuario lo pidió aparte. */
    .rango-dropdown {
      position: relative;
    }
    .rango-dropdown-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      /* Ancho fijo para la etiqueta más larga ("6 meses" + el ícono de
         flecha) — así, sea cual sea la opción elegida (incluyendo volver a
         "Rango"), el botón siempre mide lo mismo y nunca empuja el resto de
         la línea (Filtrar, los botones de descarga...) hacia la derecha.
         92px se quedaba corto justo para "6 meses"; 128px iguala el ancho
         de los campos Desde/Hasta de al lado para que la fila quede pareja. */
      min-width: 128px;
      box-sizing: border-box;
    }
    .rango-dropdown-btn i.fa-chevron-down {
      font-size: 10px;
      transition: transform 0.15s var(--ease-out);
    }
    .rango-dropdown-btn.active i.fa-chevron-down,
    .rango-dropdown.abierto .rango-dropdown-btn i.fa-chevron-down {
      transform: rotate(180deg);
    }
    /* position:fixed a propósito (no absolute): este menú vive fuera de
       cualquier .module (ver el comentario junto a #rangoDropdownMenu en
       el HTML) para no quedar atrapado por la regla ".module > *", así que
       ya no tiene un ancestro position:relative del que colgar con
       top/left en porcentaje — toggleRangoDropdown() le pone top/left en
       píxeles, pegado al botón, cada vez que se abre. */
    .rango-dropdown-menu {
      position: fixed;
      z-index: 950;
      display: flex;
      flex-direction: column;
      min-width: 140px;
      background: var(--glass-bg);
      backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-md, 12px);
      padding: 6px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.18);
      animation: rangoMenuIn 0.16s var(--ease-out);
    }
    .rango-dropdown-menu.hidden { display: none; }
    .rango-dropdown-menu button {
      padding: 9px 12px;
      border: none;
      background: transparent;
      color: var(--dark);
      font-size: 13px;
      font-weight: 600;
      font-family: inherit;
      text-align: left;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.12s var(--ease-out);
    }
    .rango-dropdown-menu button:hover { background: rgba(127,127,127,0.14); }
    @keyframes rangoMenuIn {
      from { opacity: 0; transform: translateY(-6px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .reportes-controles .form-group {
      margin-bottom: 0;
      width: 128px;
    }
    .reportes-controles .form-group label {
      font-size: 11.5px;
      margin-bottom: 4px;
      white-space: nowrap;
    }
    .reportes-controles > .btn {
      padding: 11px 18px;
      font-size: 13px;
      white-space: nowrap;
    }
    .reportes-separador-v {
      width: 1px;
      align-self: stretch;
      background: var(--glass-border);
      margin: 0 2px;
    }
    .reportes-descargas-inline {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .report-dl-btn--compacto {
      height: 40px;
      padding: 0 42px 0 14px;
    }
    .report-dl-btn--compacto .report-dl-btn__text {
      font-size: 12.5px;
    }
    .report-dl-btn--compacto .report-dl-btn__icon {
      width: 42px;
      font-size: 13px;
    }
    @media (max-width: 1400px) {
      .reportes-separador-v { display: none; }
      .reportes-controles { padding-bottom: 16px; }
    }
    @media (max-width: 700px) {
      .reportes-controles .form-group { width: 100%; }
    }
    .estadisticas-kpis-compacto {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 22px;
      padding: 10px 20px;
      margin: 0 0 12px 0;
      background: var(--glass-bg-soft, rgba(0,0,0,0.03));
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-md);
    }
    .estadisticas-kpi {
      display: flex;
      align-items: center;
      gap: 10px;
      padding-right: 22px;
      border-right: 1px solid var(--border);
    }
    .estadisticas-kpi:last-child {
      padding-right: 0;
      border-right: none;
    }
    .estadisticas-kpi .estadisticas-kpi-icono {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      flex-shrink: 0;
    }
    .estadisticas-kpi .estadisticas-kpi-valor {
      font-size: 16px;
      font-weight: 800;
      color: var(--primary-dark);
      line-height: 1.1;
    }
    .estadisticas-kpi .estadisticas-kpi-etiqueta {
      font-size: 11px;
      font-weight: 600;
      color: var(--gray);
      text-transform: uppercase;
      letter-spacing: 0.02em;
      white-space: nowrap;
    }
    @media (max-width: 900px) {
      .estadisticas-kpi { border-right: none; padding-right: 0; }
    }

    /* BARRA DE BÚSQUEDA */
    .search-bar {
      display: flex;
      gap: 12px;
      margin: 18px 0;
    }
    .search-bar input {
      flex: 1;
      padding: 13px 18px;
      border: 1.5px solid var(--border);
      border-radius: var(--radius-sm);
      font-size: 15px;
    }

    /* BADGES PARA PLANES */
    .badge-plan {
      padding: 5px 12px;
      border-radius: var(--radius-sm);
      font-size: 12px;
      font-weight: 600;
      display: inline-block;
    }
    .badge-basico {
      background: var(--primary-light);
      color: var(--primary-dark);
    }
    .badge-estandar {
      background: #e3f5ea;
      color: var(--success);
    }
    .badge-premium {
      background: #fdf1de;
      color: var(--warning);
    }
    .badge-profesional {
      background: #ece5dc;
      color: var(--professional);
    }
    .badge-anual {
      background: #f5e6d3;
      color: var(--accent-dark);
    }
    /* Estos badges tienen fondo pastel fijo (no cambia con el tema). En modo
       oscuro el texto usaba variables que se aclaran junto con el tema,
       quedando un tono claro sobre fondo claro. Se fija el texto a un tono
       oscuro que siempre contrasta bien contra su propio fondo pastel. */
    /* badge-basico es distinto a los otros 4: su fondo usa var(--primary-light),
       que SÍ cambia con el tema (se vuelve oscuro en modo oscuro), así que
       aquí el texto debe ir claro, no oscuro como en los demás badges. */
    html[data-theme="dark"] .badge-basico { color: var(--primary-dark); }
    html[data-theme="dark"] .badge-estandar { color: #3f5c28; }
    html[data-theme="dark"] .badge-premium { color: #8a5c15; }
    html[data-theme="dark"] .badge-profesional { color: #4a4038; }
    html[data-theme="dark"] .badge-anual { color: #8a5a2a; }

    /* RESPONSIVE */
    @media (max-width: 768px) {
      header {
        padding: 15px 20px;
        flex-direction: column;
        gap: 15px;
      }
      .dashboard-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 15px;
        padding: 10px;
      }
      .dashboard-card {
        padding: 25px 15px;
      }
      .module {
        padding: 20px;
      }
      .metodo-pago-grid {
        grid-template-columns: 1fr;
      }
      .locker-grid {
        grid-template-columns: repeat(10, 1fr);
        gap: 5px;
        padding: 10px;
      }
      .productos-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      }
      .estadisticas-container {
        grid-template-columns: 1fr;
      }
      .type-selector {
        flex-direction: column;
      }
      .type-btn {
        min-width: 100%;
      }
    }

    /* ===== Indicador flotante del lector de huella: loader animado =====
       Reemplaza el punto de color + texto de antes. Es el anillo de
       degradado de Uiverse.io (by xXJollyHAKERXx) que pasó Veimar — lo
       cambió por el loader anterior (también de Uiverse) porque le queda
       mejor con el fondo nuevo — con el mismo ícono de huella de siempre
       centrado encima (eso no cambió). El wrap fija el tamaño real en
       pantalla (54x54) y adentro el .huella-loader (diseñado a 100x100) se
       escala con transform para no tener que recalcular a mano cada
       sombra/blur del diseño original. */
    .huella-loader-wrap {
      position: relative;
      width: 54px;
      height: 54px;
      flex-shrink: 0;
    }
    /* El indicador flotante solo muestra su ícono por defecto. El texto de
       estado ("Lector desconectado", etc.) queda oculto y aparece con una
       transición suave únicamente al pasar el mouse encima — así no satura
       la pantalla de forma permanente. */
    .huella-indicador-flotante {
      display: flex;
      padding: 6px;
      transition: padding .25s ease;
    }
    .huella-indicador-flotante:hover {
      padding: 6px 18px 6px 6px;
    }
    .huella-indicador-flotante #indicadorHuellaFlotanteTexto {
      display: inline-block;
      max-width: 0;
      opacity: 0;
      overflow: hidden;
      white-space: nowrap;
      transition: max-width .25s ease, opacity .2s ease, margin-left .25s ease;
    }
    .huella-indicador-flotante:hover #indicadorHuellaFlotanteTexto {
      max-width: 220px;
      opacity: 1;
      margin-left: 12px;
    }
    .huella-loader {
      /* Anillo degradado (de Uiverse.io by xXJollyHAKERXx) que Veimar
         encontró y pidió usar en vez del anterior, porque le queda mejor
         con el fondo nuevo. Paleta de marca (rosado + cian) por defecto —
         huellaColorize se encarga de pasearla también por azul/blanco/negro
         con hue-rotate + saturate, igual que hacía el loader anterior. */
      --color-one: #F03DBE;
      --color-two: #14C6DE;
      --time-animation: 2s;
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      /* Solo escala (para que el diseño de 100x100 quede en 54x54, igual
         que el loader anterior) — SIN rotación. El anillo se queda quieto
         en su lugar alrededor del ícono; lo único que se anima es el color
         (ver huellaColorize), no la posición ni el giro. */
      transform: scale(0.54);
      transform-origin: top left;
      background-image: linear-gradient(var(--color-one) 35%, var(--color-two));
      box-shadow:
        0px -5px 20px 0px var(--color-one),
        0px 5px 20px 0px var(--color-two);
      animation: huellaColorize calc(var(--time-animation) * 3) ease-in-out infinite;
    }
    .huella-loader .huella-loader-box {
      width: 100px;
      height: 100px;
      background-color: #242424;
      border-radius: 50%;
      filter: blur(10px);
    }
    /* Recorre la paleta de marca: rosado -> azul/cian -> un destello casi
       blanco -> un momento casi negro -> y de vuelta al rosado. El hue-rotate
       mueve el rosado/cian base hacia el azul; saturate+brightness son los
       que aportan los momentos "blanco" y "negro" que pidió Veimar. El
       blur(1px) va en cada fotograma para no perder el desenfoque suave del
       diseño original mientras el filtro está animado. Solo se anima el
       filtro (color) — el transform de arriba se queda fijo siempre. */
    @keyframes huellaColorize {
      0%   { filter: blur(1px) hue-rotate(0deg)    saturate(1)    brightness(1); }
      18%  { filter: blur(1px) hue-rotate(40deg)   saturate(1.1)  brightness(1); }
      35%  { filter: blur(1px) hue-rotate(90deg)   saturate(1.2)  brightness(1.05); }
      50%  { filter: blur(1px) hue-rotate(110deg)  saturate(0.15) brightness(1.6); }
      65%  { filter: blur(1px) hue-rotate(130deg)  saturate(1.1)  brightness(1); }
      82%  { filter: blur(1px) hue-rotate(160deg)  saturate(0.6)  brightness(0.45); }
      100% { filter: blur(1px) hue-rotate(0deg)    saturate(1)    brightness(1); }
    }
    /* Estado "no funciona" (desconectado/error): todo rojo y fijo — ni
       recorre otros tonos (huellaColorize) ni gira (nunca giró). */
    .huella-loader--rojo {
      --color-one: #ff6b6b;
      --color-two: #7f1d1d;
      animation: none;
      filter: blur(1px);
    }
    /* Ícono de huella centrado sobre la bolita animada. */
    .huella-loader-icono {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 24px;
      height: 24px;
      transform: translate(-50%, -50%);
      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
      pointer-events: none;
      z-index: 2;
    }
    .huella-loader-icono path {
      fill: #fff;
    }
  

/* ===== bloque siguiente ===== */


        .manual-doc { background: #ffffff; color: #14141a; border-radius: 20px; padding: 30px; box-shadow: 0 10px 40px rgba(0,0,0,0.12); border: 1px solid #e4e4ea; }
        .manual-doc__header h3 { color: #14141a; margin-bottom: 8px; font-size: 24px; }
        .manual-doc__header p { color: #55555f; margin-bottom: 25px; }
        .manual-doc__layout { display: flex; gap: 30px; align-items: flex-start; }
        .manual-doc__nav { flex: 0 0 260px; max-width: 260px; position: sticky; top: 0; max-height: calc(70 * var(--vh, 1vh)); overflow-y: auto; padding-right: 8px; border-right: 1px solid #ececf2; }
        .manual-doc__section { margin-bottom: 4px; }
        .manual-doc__head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 8px; border: none; background: none; font: inherit; font-weight: 700; font-size: 14px; color: #14141a; cursor: pointer; border-radius: 10px; text-align: left; }
        .manual-doc__head:hover { background: #f4f4f8; }
        .manual-doc__head span { flex: 1; }
        .manual-doc__chev { font-size: 11px; color: #9a9aa8; transition: transform 250ms ease; }
        .manual-doc__section.open .manual-doc__chev { transform: rotate(180deg); }
        .manual-doc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms cubic-bezier(0.23,1,0.32,1); }
        .manual-doc__section.open .manual-doc__body { grid-template-rows: 1fr; }
        .manual-doc__fold { overflow: hidden; min-height: 0; }
        .manual-doc__tree { position: relative; padding: 4px 0 8px 22px; }
        .manual-doc__tree::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 18px; width: 2px; background: #dedee6; }
        .manual-doc__item { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 8px 8px 18px; border: none; background: none; font: inherit; font-size: 13.5px; color: #55555f; text-align: left; cursor: pointer; border-radius: 8px; }
        .manual-doc__item::before { content: ''; position: absolute; left: -14px; top: 50%; width: 12px; height: 2px; background: #dedee6; }
        .manual-doc__item:hover { background: #f4f4f8; color: #14141a; }
        .manual-doc__item.active { background: #eef0ff; color: #4338ca; font-weight: 700; }
        .manual-doc__item i { width: 16px; text-align: center; color: inherit; }
        .manual-doc__content { flex: 1; min-width: 0; max-height: calc(70 * var(--vh, 1vh)); overflow-y: auto; padding-right: 10px; color: #22222c; line-height: 1.65; }
        .manual-doc__content h4 { color: #14141a; font-size: 20px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid #ececf2; }
        .manual-doc__content h5 { color: #14141a; font-size: 15px; margin: 22px 0 8px; }
        .manual-doc__content p { color: #33333d; margin-bottom: 12px; font-size: 14.5px; }
        .manual-doc__content ul, .manual-doc__content ol { margin: 0 0 14px 20px; color: #33333d; font-size: 14.5px; }
        .manual-doc__content li { margin-bottom: 6px; }
        .manual-doc__content strong { color: #14141a; }
        .manual-doc__callout { display: flex; gap: 10px; background: #f6f7fb; border-left: 4px solid #4338ca; border-radius: 10px; padding: 12px 16px; margin: 16px 0; font-size: 13.5px; color: #33333d; }
        .manual-doc__callout.warn { border-left-color: #d97706; background: #fff8ec; }
        .manual-doc__img { border: 1px solid #e4e4ea; border-radius: 12px; padding: 8px; margin: 16px 0; background: #fafafc; }
        .manual-doc__img img { display: block; width: 100%; border-radius: 8px; border: 1px solid #ececf2; }
        .manual-doc__img figcaption { margin-top: 8px; font-size: 12.5px; color: #6b6b78; text-align: center; }
        @media (max-width: 900px) {
          .manual-doc__layout { flex-direction: column; }
          .manual-doc__nav { position: static; max-width: 100%; max-height: none; border-right: none; border-bottom: 1px solid #ececf2; padding-bottom: 10px; }
        }
      

/* ===== bloque siguiente ===== */


    /* Alerta roja de membresía vencida en la tarjeta flotante de huella —
       ver procesarMuestraHuellaGlobal(). Se agrega/quita solo la clase, sin
       reconstruir la tarjeta, para no romper el resto de su lógica. */
    #modalHuellaFlotante.huella-flotante-alerta-vencida > div {
      border: 2px solid #e74c3c !important;
      box-shadow: 0 10px 35px rgba(231, 76, 60, 0.45) !important;
      animation: pulsoAlertaVencida 1.4s ease-in-out infinite;
    }
    @keyframes pulsoAlertaVencida {
      0%, 100% { box-shadow: 0 10px 35px rgba(231, 76, 60, 0.45); }
      50% { box-shadow: 0 10px 45px rgba(231, 76, 60, 0.75); }
    }
  

/* ======================================================================
   FONDOS (selector "Fondo" del header; reemplaza al interruptor sol/luna)
   html[data-fondo] lo pone aplicarFondo() en recepcion-app.js, que además
   fija data-theme (light/dark) para reutilizar todas las variables de tema
   que ya existen:
     claro        -> blanco, letras negras (theme light)
     claro-tenue  -> claro con los círculos rosa/cian de la marca (theme light)
     liso         -> oscuro morado/azul estático (theme dark)
     movimiento   -> oscuro con el shader animado + glass (theme dark)
   ====================================================================== */
#fondoAuroraCanvas { display: none; }
html[data-fondo="movimiento"] #fondoAuroraCanvas { display: block; }

html[data-fondo="liso"] body {
  background:
    radial-gradient(60% 55% at 20% 30%, rgba(214, 36, 159, 0.55), transparent 70%),
    radial-gradient(55% 55% at 80% 72%, rgba(10, 167, 196, 0.55), transparent 70%),
    #0e1020;
  background-attachment: fixed;
}
html[data-fondo="claro"] body {
  background:
    radial-gradient(45% 40% at 0% 0%, rgba(214, 36, 159, 0.08), transparent 70%),
    radial-gradient(45% 40% at 100% 100%, rgba(10, 167, 196, 0.10), transparent 70%),
    #ffffff;
  background-attachment: fixed;
}
html[data-fondo="claro-tenue"] body {
  background:
    radial-gradient(60% 55% at 20% 30%, rgba(240, 61, 190, 0.38), transparent 70%),
    radial-gradient(55% 55% at 80% 72%, rgba(20, 198, 222, 0.38), transparent 70%),
    #eef0f9;
  background-attachment: fixed;
}

/* Material "glass" de los fondos claros: casi opaco y blanco, con letras
   negras de alto contraste (pensado para proyector / monitor lejano). */
html[data-fondo="claro"],
html[data-fondo="claro-tenue"] {
  --glass-blur: 14px;
  --glass-saturate: 1.2;
  --glass-brightness: 1;
  --glass-text: #101218;
  --glass-text-soft: rgba(16, 18, 24, 0.76);
  --glass-icon: #101218;
  --glass-text-shadow: none;
  --glass-icon-shadow: none;
  --glass-border: rgba(20, 24, 40, 0.14);
  --glass-border-hover: rgba(20, 24, 40, 0.38);
}
html[data-fondo="claro"] {
  --glass-bg: #ffffff;
  --glass-bg-soft: #f4f5fa;
  --glass-shadow: 0 8px 22px rgba(20, 25, 50, 0.09);
}
html[data-fondo="claro-tenue"] {
  --glass-bg: rgba(255, 255, 255, 0.74);
  --glass-bg-soft: rgba(255, 255, 255, 0.6);
  --glass-shadow: 0 8px 26px rgba(40, 30, 90, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* El liso y el movimiento son oscuros: más opacidad en las tarjetas que
   en el shader para que el texto blanco se lea a distancia. */
html[data-fondo="liso"] { --glass-bg: rgba(16, 18, 32, 0.78); --glass-brightness: 1; }
html[data-fondo="movimiento"] { --glass-bg: rgba(10, 10, 16, 0.62); }

/* ----- Selector de fondo (botón del header + menú desplegable) ----- */
.fondo-selector__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 10px;
  border-radius: 12px;
  background: var(--glass-bg-soft);
  border: 1px solid var(--glass-border);
  color: var(--glass-text);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--glass-shadow);
  transition: border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.fondo-selector__btn:hover { border-color: var(--glass-border-hover); }
.fondo-selector__btn:active { transform: scale(0.97); }
.fondo-selector__chev { font-size: 12px; transition: transform 0.3s var(--ease-out); }
.fondo-selector__btn[aria-expanded="true"] .fondo-selector__chev { transform: rotate(180deg); }

.fondo-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex: 0 0 auto;
  border: 1.5px solid rgba(128, 128, 140, 0.55);
}
.fondo-swatch--claro { background: radial-gradient(circle at 20% 20%, #f7b6e0 0, transparent 45%), radial-gradient(circle at 80% 85%, #a6e9f3 0, transparent 45%), #fff; }
.fondo-swatch--claro-tenue { background: radial-gradient(circle at 25% 30%, #f03dbe 0, transparent 55%), radial-gradient(circle at 78% 75%, #14c6de 0, transparent 55%), #eef0f9; }
.fondo-swatch--liso { background: radial-gradient(circle at 25% 30%, #c0289a 0, transparent 55%), radial-gradient(circle at 78% 75%, #0aa7c4 0, transparent 55%), #0e1020; }
.fondo-swatch--movimiento { background: conic-gradient(from 0deg, #0e1020, #f03dbe, #0e1020, #14c6de, #0e1020); animation: fondoSwatchGira 6s linear infinite; }
@keyframes fondoSwatchGira { to { transform: rotate(360deg); } }

/* Menú: aparece con escala + fade desde la esquina del botón y sus
   opciones entran en cascada (misma curva ease-out del resto de la app). */
.fondo-selector__menu {
  position: fixed;
  z-index: 100001;
  min-width: 290px;
  margin: 0;
  padding: 8px;
  list-style: none;
  border-radius: 18px;
  background: var(--card-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 22px 50px rgba(8, 8, 20, 0.35), 0 2px 6px rgba(8, 8, 20, 0.2);
  transform-origin: top right;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.94);
  transition: opacity 0.18s var(--ease-out), transform 0.28s var(--ease-out), visibility 0s linear 0.28s;
}
.fondo-selector__menu.abierto {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity 0.18s var(--ease-out), transform 0.34s var(--ease-out), visibility 0s;
}
.fondo-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 12px;
  border-radius: 12px;
  cursor: pointer;
  color: var(--dark);
  opacity: 0;
  transform: translateY(-6px);
  transition: background 0.15s var(--ease-out);
}
.fondo-selector__menu.abierto .fondo-opt {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s var(--ease-out) calc(var(--k) * 45ms + 60ms), transform 0.34s var(--ease-out) calc(var(--k) * 45ms + 60ms), background 0.15s var(--ease-out);
}
.fondo-opt:hover, .fondo-opt:focus-visible { background: var(--primary-light); outline: none; }
.fondo-opt .fondo-swatch { width: 34px; height: 34px; }
.fondo-opt__txt { display: flex; flex-direction: column; flex: 1; line-height: 1.25; }
.fondo-opt__txt b { font-size: 16px; font-weight: 700; }
.fondo-opt__txt small { font-size: 13px; opacity: 0.7; font-weight: 500; }
.fondo-opt__check { color: var(--primary); opacity: 0; font-size: 15px; }
.fondo-opt[aria-selected="true"] .fondo-opt__check { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .fondo-selector__menu, .fondo-opt, .fondo-selector__chev { transition-duration: 0.01s !important; transition-delay: 0s !important; }
  .fondo-swatch--movimiento { animation: none; }
}

/* ======================================================================
   PANEL PRINCIPAL por rol (ver configurarDashboard en recepcion-app.js)
   Recepción: sin "Resumen Rápido", tarjetas más grandes y centradas.
   ====================================================================== */
.dashboard-title h2 { font-size: clamp(30px, 2.4vw, 42px); }
.dashboard-title p { font-size: clamp(17px, 1.2vw, 20px); }
body.rol-recepcion #dashboardResumenPanel { display: none !important; }
body.rol-recepcion #dashboardGrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 28px;
  max-width: 1160px;
  margin: 0 auto;
}
body.rol-recepcion #dashboardGrid .dashboard-card {
  width: 330px;
  padding: 34px 30px;
}
body.rol-recepcion #dashboardGrid .card-title { font-size: 30px; }
body.rol-recepcion #dashboardGrid .card-desc { font-size: 19px; }
/* Recepción: el bloque de tarjetas queda centrado verticalmente en la pantalla
   (ni pegado arriba ni abajo). */
body.rol-recepcion #dashboard.active .dashboard-container {
  min-height: calc(calc(100 * var(--vh, 1vh)) - var(--app-header-h, 90px) - 90px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}


/* =========================================================
   PALETA EQUILIBRADA
   - Chips de icono (KPIs) con degradado rosa→cian: un solo "color de marca"
     en vez de rosa/cian alternados (efecto arcoíris).
   - Ventas e Inventario (#productos): grafito neutro, sobrio.
   ========================================================= */
.dashboard-kpi .dashboard-kpi-icono,
.estadisticas-kpi .estadisticas-kpi-icono {
  background: linear-gradient(135deg, var(--primary), var(--accent-dark));
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
html[data-fondo="claro"] .dashboard-kpi .dashboard-kpi-icono,
html[data-fondo="claro"] .estadisticas-kpi .estadisticas-kpi-icono { color: #fff; }

/* Grafito en Ventas/Inventario */
#productos.module {
  --primary: #2C2C2E;
  --primary-dark: #1D1D1F;
  --primary-light: #E9E9ED;
  --accent: #636366;
  --accent-dark: #48484A;
  --premium: #636366;
  --professional: #48484A;
}
html[data-fondo="liso"] #productos.module {
  --primary: #5A5A60;
  --primary-dark: #FFFFFF;
  --primary-light: #2A2A30;
  --accent: #8E8E93;
  --accent-dark: #A1A1A6;
  --premium: #8E8E93;
  --professional: #A1A1A6;
}
#productos .btn-info,
#productos .btn-success { background: var(--primary); color: #fff; }
#productos .btn-primary:hover,
#productos .btn-info:hover,
#productos .btn-success:hover { filter: brightness(1.15); }
#productos .btn-danger { background: transparent; color: var(--danger); border: 1.5px solid var(--danger); }

/* Letras un poco más grandes y nítidas en los módulos */
.module .form-group label { font-size: 15px; font-weight: 600; }
.module td { font-size: 15px; }
.module th { font-size: 14px; }
.module .module-header h2 { font-size: 26px; }

/* En Ventas/Inventario solo "Claro" y "Liso oscuro" */
.fondo-selector__menu.solo-basicos .fondo-opt[data-fondo="claro-tenue"],
.fondo-selector__menu.solo-basicos .fondo-opt[data-fondo="movimiento"] { display: none; }

/* =========================================================
   SIN MOVIMIENTO en Claro / Claro tenue / Liso oscuro
   Se apagan las rejillas diagonales que se desplazan (grid-shift)
   y la viñeta que pulsa (aurora-pulse). Solo "En movimiento" las conserva.
   ========================================================= */
html:not([data-fondo="movimiento"]) .module::before,
html:not([data-fondo="movimiento"]) #loginScreen::before,
html:not([data-fondo="movimiento"]) #loginScreen::after {
  animation: none !important;
}
html:not([data-fondo="movimiento"]) .module::before { display: none; }

/* Letras de botones un poco más grandes */
.btn { font-size: 17px; }
.btn-sm { font-size: 15px; }
.pos-toolbar-btn { font-size: 15px; }

/* =========================================================
   EQUILIBRIO DE MARCA: negro/blanco (base) + cian + rosa (acento)
   - Acciones neutras y pestañas/selecciones activas: negro (blanco en oscuro)
   - Acciones de confirmar/guardar/cobrar (btn-success, btn-accent): cian
   - Rosa: solo el botón principal (btn-primary) y detalles puntuales
   ========================================================= */
:root, html[data-theme="light"] {
  --neutro-bg: #0A0A0C;
  --neutro-fg: #FFFFFF;
  --cian-bg: #0FA0B8;
  --cian-fg: #FFFFFF;
}
html[data-theme="dark"] {
  --neutro-bg: #F5F5F7;
  --neutro-fg: #0A0A0C;
  --cian-bg: #3FD9EC;
  --cian-fg: #04222A;
}
.btn-info {
  background: var(--neutro-bg); color: var(--neutro-fg);
}
.btn-success, .btn-accent {
  background: var(--cian-bg); color: var(--cian-fg);
}
.btn-primary {
  background: linear-gradient(135deg, #F03DBE, #C42A9C); color: #fff;
}
.btn-wood { background: var(--neutro-bg); color: var(--neutro-fg); }
/* Selecciones / pestañas activas: neutras */
.inv-modo-tab.active,
.filtro-btn.active,
.chip-fecha.active,
.pos-search-mode-btn.active,
.inv-sidebar-item.active,
.navmode-btn.active,
.app-navbar .navbar-item.active {
  background: var(--neutro-bg) !important;
  color: var(--neutro-fg) !important;
  border-color: var(--neutro-bg) !important;
}
.inv-sidebar-item.active i, .inv-modo-tab.active i { color: inherit !important; }
.fase-connector-fill { background: linear-gradient(90deg, #F03DBE, #14C6DE) !important; }
/* Ventas/Inventario: todo grafito, sin cian ni rosa */
#productos .btn-success, #productos .btn-accent, #productos .btn-info, #productos .btn-primary {
  background: var(--neutro-bg); color: var(--neutro-fg);
}
#productos .pos-cart-cobrar { background: var(--cian-bg); color: var(--cian-fg); }

/* Letras de botones más grandes */
.btn { font-size: 19px; }
.btn-sm { font-size: 17px; }
.pos-toolbar-btn { font-size: 17px; }
.inv-modo-tab, .filtro-btn, .chip-fecha, .pos-search-mode-btn, .inv-sidebar-item,
.app-navbar .navbar-item { font-size: 17px; }

/* Panel de control principal: letras más grandes (igual de legibles que
   en los demás módulos) */
#dashboardGrid .card-title, #configGrid .card-title, .dashboard-card .card-title { font-size: 22px; }
#dashboardGrid .card-desc, #configGrid .card-desc, .dashboard-card .card-desc { font-size: 16px; }
.dashboard-kpi .dashboard-kpi-valor { font-size: 19px; }
.dashboard-kpi .dashboard-kpi-etiqueta { font-size: 14px; }
.estadisticas-kpi .estadisticas-kpi-valor { font-size: 19px; }
.estadisticas-kpi .estadisticas-kpi-etiqueta { font-size: 14px; }
/* Recepción mantiene sus tarjetas grandes y centradas */
body.rol-recepcion #dashboardGrid .card-title { font-size: 30px; }
body.rol-recepcion #dashboardGrid .card-desc { font-size: 19px; }

/* ===== Editor de contenido del portal (Página Web) ===== */
.portal-contenido { display: flex; flex-direction: column; gap: 18px; max-width: 980px; }
.portal-contenido__bloque {
  padding: 20px 22px; border-radius: 16px;
  border: 1px solid var(--border); background: var(--card-bg);
}
.portal-contenido__bloque h4 { font-size: 19px; margin: 0 0 12px; color: var(--primary-dark); display: flex; gap: 10px; align-items: center; }
.portal-contenido__ayuda { color: var(--gray); font-size: 15px; margin: -4px 0 12px; }
.portal-contenido input[type="text"], .portal-contenido textarea {
  width: 100%; padding: 11px 13px; font-size: 16px; font-family: inherit;
  border: 1.5px solid var(--border); border-radius: 10px;
  background: var(--light); color: var(--dark);
}
.portal-contenido textarea { resize: vertical; }
.portal-contenido__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
.portal-contenido__check { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--dark); margin-bottom: 10px; white-space: nowrap; }
.portal-contenido__acciones { display: flex; gap: 12px; flex-wrap: wrap; }
.pc-plan { display: flex; flex-direction: column; gap: 8px; padding: 14px; margin-bottom: 12px; border-radius: 12px; border: 1px dashed var(--border); }
.pc-plan__cab { display: grid; grid-template-columns: 1.6fr 0.7fr 0.8fr auto auto; gap: 10px; align-items: center; }
.pc-plan__cab .portal-contenido__check { margin: 0; }
@media (max-width: 900px) { .portal-contenido__grid, .pc-plan__cab { grid-template-columns: 1fr; } }

/* ===== EDITOR VISUAL DE LA PÁGINA PÚBLICA ===== */
.pe-launcher {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 26px 28px; border-radius: 18px; max-width: 900px;
  border: 1px solid var(--border); background: var(--card-bg);
}
.pe-launcher__icono {
  width: 64px; height: 64px; border-radius: 18px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 28px; color: #fff;
  background: linear-gradient(135deg, #F03DBE, #14C6DE);
}
.pe-launcher__texto { flex: 1; min-width: 260px; }
.pe-launcher__texto h4 { margin: 0 0 6px; font-size: 21px; color: var(--primary-dark); }
.pe-launcher__texto p { margin: 0; font-size: 16px; color: var(--gray); line-height: 1.5; }

.pe-modal { background: #f4f4f6; }
.pe-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 18px; background: #fff; border-bottom: 1px solid #e5e5ea; color: #1d1d1f;
}
.pe-top__titulo { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pe-top__estado {
  font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  background: #e8f7ea; color: #1b7a34;
}
.pe-top__estado.sucio { background: #fff1d6; color: #9a5b00; }
.pe-top__acciones { display: flex; align-items: center; gap: 10px; }
.pe-top .btn-outline { color: #1d1d1f; background: #fff; border-color: #d2d2d7; }
.pe-main { flex: 1; min-height: 0; display: flex; }
.pe-vista { flex: 1; min-width: 0; padding: 14px; }
.pe-vista iframe {
  width: 100%; height: 100%; border: 1px solid #d2d2d7; border-radius: 12px;
  background: #fff; box-shadow: 0 10px 30px -14px rgba(0,0,0,.35);
}
.pe-panel {
  --dark: #1d1d1f; --light: #ffffff; --border: #d2d2d7; --gray: #5c5c63;
  --primary-dark: #1d1d1f; --card-bg: #ffffff;
  width: 400px; flex-shrink: 0; display: flex; flex-direction: column;
  background: #fff; border-left: 1px solid #e5e5ea; color: #1d1d1f; overflow: hidden;
}
.pe-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid #e5e5ea; }
.pe-tab {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 4px; background: none; border: none; cursor: pointer;
  font: 600 14px inherit; color: #5c5c63; border-bottom: 3px solid transparent;
}
.pe-tab i { font-size: 18px; }
.pe-tab.active { color: #1d1d1f; border-bottom-color: #F03DBE; background: #fafafb; }
.pe-pane { padding: 16px 18px 24px; overflow-y: auto; flex: 1; }
.pe-pane.oculto { display: none; }
.pe-ayuda { font-size: 15px; color: #5c5c63; margin: 0 0 14px; }
.pe-panel .form-group label { font-size: 15px; color: #1d1d1f; }
.pe-panel input[type="text"], .pe-panel textarea {
  width: 100%; padding: 10px 12px; font-size: 16px; font-family: inherit;
  border: 1.5px solid #d2d2d7; border-radius: 10px; background: #fff; color: #1d1d1f;
}
.pe-panel textarea { resize: vertical; }
.pe-panel .portal-contenido__check { color: #1d1d1f; }
.pe-panel .pc-plan { background: #fafafb; }
.pe-panel .pc-plan__cab { grid-template-columns: 1fr 1fr; }
.pe-panel .pc-plan__cab .pc-nombre { grid-column: 1 / -1; }
.pe-panel .pc-plan__cab .btn-danger { justify-self: end; }
@media (max-width: 1100px) {
  .pe-main { flex-direction: column; }
  .pe-panel { width: 100%; height: 45%; border-left: none; border-top: 1px solid #e5e5ea; }
}

/* ===== Editor: pestañas extra y fotos ===== */
.pe-panel { width: 440px; }
.pe-tabs { grid-template-columns: repeat(6, 1fr); }
.pe-tab { font-size: 12.5px; padding: 10px 2px; }
.pe-sub { margin: 18px 0 8px; font-size: 16px; color: #1d1d1f; }
.pe-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.pe-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pe-fotos--fila { grid-template-columns: 70px 1fr 1fr; align-items: center; margin-bottom: 10px; }
.pe-fotos--fila span { font-size: 14px; font-weight: 600; color: #5c5c63; }
.pe-foto {
  position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden;
  border: 1.5px solid #d2d2d7; background: #f0f0f3; padding: 0;
}
.pe-foto img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.pe-foto__cambiar, .pe-foto__quitar {
  position: absolute; width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
  background: rgba(0,0,0,.65); color: #fff;
}
.pe-foto__cambiar { right: 6px; bottom: 6px; }
.pe-foto__quitar { right: 6px; top: 6px; background: rgba(220,40,40,.9); }
.pe-foto--mas { display: flex; align-items: center; justify-content: center; font-size: 22px; color: #5c5c63; cursor: pointer; border-style: dashed; background: #fafafb; }
.pe-picker {
  position: absolute; inset: 0; z-index: 5; background: rgba(15,15,20,.55);
  display: flex; align-items: center; justify-content: center; padding: 30px;
}
.pe-picker.oculto { display: none; }
.pe-picker__caja { width: min(900px, 100%); max-height: 100%; background: #fff; border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; color: #1d1d1f; }
.pe-picker__cab { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid #e5e5ea; font-size: 18px; }
.pe-picker__cab .portal-editor-modal__cerrar { margin-left: auto; position: static; }
.pe-picker__grid { padding: 16px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pe-picker__item { padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; cursor: pointer; aspect-ratio: 4 / 3; background: #f0f0f3; }
.pe-picker__item:hover { border-color: #F03DBE; }
.pe-picker__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-modal { position: relative; }

/* ============================================================
   MODAL CREAR CUENTA — ancho de escritorio (2 columnas)
   Izquierda: rol + datos de la cuenta. Derecha: permisos (Recepcionista)
   o una explicación del rol (Administrador / Entrenador).
   ============================================================ */
.modal-content.modal-content--cuenta {
  max-width: 1080px;
  width: 92%;
  padding: 28px 36px;
  max-height: 94vh;
  overflow-y: auto;
}
.modal-content--cuenta .modal-header { margin-bottom: 14px; }
.cuenta-cols {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 32px;
  align-items: start;
}
.cuenta-col-datos .form-group { margin-bottom: 14px; }
.cuenta-col-lado { min-width: 0; }
.cuenta-info-rol {
  padding: 28px 26px;
  border-radius: 16px;
  border: 1px solid var(--border, rgba(255,255,255,.12));
  background: rgba(255,255,255,.04);
  line-height: 1.55;
}
.cuenta-info-rol > i { font-size: 30px; margin-bottom: 10px; color: var(--cian-fg, #22d3ee); }
.cuenta-info-rol h4 { margin: 0 0 8px; font-size: 20px; }
.cuenta-info-rol p { margin: 0 0 8px; font-size: 15px; opacity: .85; }
@media (max-width: 860px) {
  .cuenta-cols { grid-template-columns: 1fr; gap: 16px; }
}

/* ---- Asignar socios a un entrenador ---- */
.asig-modal { max-width: 860px !important; width: 92%; padding: 26px 30px; display: flex; flex-direction: column; max-height: 90vh; }
.asig-tools { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 12px; }
.asig-buscar { display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--border, rgba(255,255,255,.14)); border-radius: 12px; background: rgba(255,255,255,.05); }
.asig-buscar input { flex: 1; background: none; border: 0; outline: 0; padding: 12px 0; font-size: 16px; color: inherit; }
.asig-planes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.asig-planes-t { font-size: 14px; opacity: .7; margin-right: 4px; }
.asig-chip { padding: 8px 16px; border-radius: 99px; border: 1px solid var(--border, rgba(255,255,255,.2)); background: rgba(255,255,255,.06); color: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.asig-chip:hover { border-color: #22d3ee; }
.asig-chip--limpiar { opacity: .7; }
.asig-lista { flex: 1; min-height: 160px; overflow-y: auto; border: 1px solid var(--border, rgba(255,255,255,.12)); border-radius: 14px; }
.asig-fila { display: flex; align-items: center; gap: 14px; padding: 12px 16px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 16px; }
.asig-fila:last-child { border-bottom: 0; }
.asig-fila:hover { background: rgba(255,255,255,.05); }
.asig-fila.is-on { background: rgba(34,211,238,.1); }
.asig-fila input { width: 20px; height: 20px; }
.asig-nombre { flex: 1; font-weight: 600; }
.asig-plan { font-size: 13px; padding: 4px 12px; border-radius: 99px; background: rgba(255,255,255,.1); }
.asig-pie { display: flex; gap: 12px; align-items: center; margin-top: 16px; font-size: 15px; }

/* Validación de campos: borde rojo + aviso bajo el campo */
.form-control.campo-invalido, input.campo-invalido { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); }
.campo-aviso { color: #ef4444; font-size: 12px; font-weight: 600; margin-top: 4px; }

/* =========================================================
   CONFIGURACIÓN > HARDWARE: tarjetas compactas por dispositivo
   ========================================================= */
.hw-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
}
.hw-head h3 { margin: 0 0 6px; }
.hw-sub { color: var(--gray); margin: 0; font-size: 14.5px; }
.hw-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.hw-card {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--glass-bg-soft);
  border: 1px solid var(--glass-border);
}
.hw-card__icono {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center;
  font-size: 20px;
  background: var(--neutro-bg); color: var(--neutro-fg);
}
.hw-card__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hw-card__txt b { font-size: 15.5px; color: var(--glass-text); }
.hw-card__txt span { font-size: 13px; color: var(--glass-text-soft, var(--gray)); line-height: 1.4; }
.hw-estado {
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(127, 127, 140, 0.14); color: var(--glass-text-soft, var(--gray));
}
.hw-estado--ok { background: rgba(34, 197, 94, 0.15); color: #16a34a; }
.hw-estado--aviso { background: rgba(245, 158, 11, 0.16); color: #b45309; }
.hw-estado--error { background: rgba(239, 68, 68, 0.14); color: #dc2626; }
.hw-estado--cargando { opacity: 0.7; }
html[data-theme="dark"] .hw-estado--ok { color: #4ade80; }
html[data-theme="dark"] .hw-estado--aviso { color: #fbbf24; }
html[data-theme="dark"] .hw-estado--error { color: #f87171; }
.hw-acciones { display: flex; justify-content: flex-end; margin-top: 22px; }
@media (max-width: 700px) {
  .hw-grid { grid-template-columns: 1fr; }
  .hw-card { grid-template-columns: 40px 1fr; }
  .hw-card > :last-child { grid-column: 2; justify-self: start; }
}

/* Configuración > Pantalla de Bienvenida */
.bv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
  max-width: 900px;
  margin-bottom: 24px;
}
.bv-grid .form-group { margin: 0; }
.bv-grid small { color: var(--gray); display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; }
.bv-grid__full { grid-column: 1 / -1; }
.bv-logo { display: flex; align-items: flex-start; gap: 18px; }
.bv-logo img {
  width: 110px; height: 110px; object-fit: contain; flex-shrink: 0;
  padding: 10px; border-radius: 14px;
  background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
}
.bv-logo__acciones { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.bv-logo__acciones small { margin-top: 0; }
@media (max-width: 700px) { .bv-grid { grid-template-columns: 1fr; } }

/* =========================================================
   CONFIGURACIÓN > PÁGINA WEB > USUARIOS DEL PORTAL
   ========================================================= */
.pu-intro { color: var(--gray); margin: 0 0 18px; font-size: 14.5px; line-height: 1.55; }
.pu-resumen {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; margin-bottom: 18px;
}
.pu-kpi {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 12px; align-items: center;
  padding: 14px 16px; border-radius: 14px;
  background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
}
.pu-kpi i {
  grid-row: 1 / 3; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center; font-size: 16px;
  background: var(--neutro-bg); color: var(--neutro-fg);
}
.pu-kpi b { font-size: 22px; line-height: 1.1; color: var(--glass-text); }
.pu-kpi span { font-size: 12.5px; color: var(--glass-text-soft, var(--gray)); font-weight: 600; }

.pu-barra { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.pu-buscar {
  flex: 1; min-width: 240px; position: relative;
}
.pu-buscar i {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--gray); font-size: 14px; pointer-events: none;
}
.pu-buscar input {
  width: 100%; padding: 11px 14px 11px 38px;
  border-radius: 12px; border: 1px solid var(--glass-border);
  background: var(--glass-bg-soft); color: var(--glass-text);
  font: inherit; font-size: 14.5px; outline: none;
}
.pu-buscar input:focus { border-color: var(--glass-border-hover); }
.pu-barra select.form-control { width: auto; min-width: 230px; margin: 0; }

.pu-tabla-wrap {
  overflow: auto; max-height: calc(60 * var(--vh, 1vh));
  border: 1px solid var(--glass-border); border-radius: 14px;
}
.pu-tabla { width: 100%; border-collapse: collapse; margin: 0; }
.pu-tabla thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--glass-bg); text-align: left;
  padding: 12px 14px; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--glass-text-soft, var(--gray)); border-bottom: 1px solid var(--glass-border);
}
.pu-tabla td { padding: 12px 14px; vertical-align: middle; border-bottom: 1px solid var(--glass-border); }
.pu-tabla tbody tr:last-child td { border-bottom: none; }
.pu-vacio { padding: 26px !important; text-align: center; color: var(--gray); }
.pu-socio { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pu-socio b { font-size: 15px; }
.pu-socio small, .pu-tabla small { font-size: 12.5px; color: var(--glass-text-soft, var(--gray)); }
.pu-tenue { color: var(--glass-text-soft, var(--gray)); font-size: 13.5px; }
.pu-pass { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.pu-pass + small { display: block; }
.pu-pass code {
  background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
  padding: 4px 8px; border-radius: 8px; font-weight: 700; font-size: 13.5px;
}
.pu-icono {
  border: none; background: none; cursor: pointer; padding: 4px 6px; border-radius: 6px;
  color: var(--glass-text-soft, var(--gray)); font-size: 14px;
}
.pu-icono:hover { background: var(--glass-bg-soft); color: var(--glass-text); }
.pu-badge {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.pu-badge--verde { background: rgba(34, 197, 94, 0.15); color: #16a34a; }
.pu-badge--rojo { background: rgba(239, 68, 68, 0.14); color: #dc2626; }
.pu-badge--gris { background: rgba(127, 127, 140, 0.16); color: var(--gray); }
html[data-theme="dark"] .pu-badge--verde { color: #4ade80; }
html[data-theme="dark"] .pu-badge--rojo { color: #f87171; }
.pu-acciones { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: nowrap; }
.pu-acciones .btn { white-space: nowrap; }
.pu-acciones .btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pu-fila-inactiva td { opacity: 0.55; }
@media (max-width: 900px) {
  .pu-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* La 2.ª definición de .modal-overlay (MODALES MEJORADOS) lo deja en
   display:none y los demás modales se abren con style.display; este se abre
   quitando .hidden, así que necesita mostrarse explícitamente. */
#modalCredencialesPortal:not(.hidden) { display: flex; }
#modalCredencialesPortal .btn:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.6); }

/* Registro > Datos personales: columna centrada un poco más amplia y
   campos más altos para que se lean mejor en el monitor de recepción. */
.registro-datos-personales { max-width: 940px; }
.registro-datos-personales .form-grid--personal { gap: 18px 22px; margin-top: 18px; }
.registro-datos-personales .form-control { padding: 13px 16px; font-size: 16px; }
.registro-datos-personales .form-group label { margin-bottom: 7px; }
/* Renovaciones: el buscador a la misma altura que sus botones */
#buscarRenovacion { min-height: 54px; font-size: 16px; padding-left: 18px; }

/* Reportes: las fechas se cortaban ("10/15/202") y los botones de descarga
   tenían letra de 12.5px; se agrandan un poco y se igualan las alturas. */
#reportes #fechaInicio, #reportes #fechaFin { min-width: 158px; }
.report-dl-btn--compacto { height: 44px; padding: 0 48px 0 16px; }
.report-dl-btn--compacto .report-dl-btn__text { font-size: 14px; }
.report-dl-btn--compacto .report-dl-btn__icon { width: 44px; font-size: 14px; }
/* En Ventas (pantalla completa) el botón de ayuda tapaba "Anular Orden" */
body.pos-fullscreen .tour-btn-ayuda { display: none; }

/* ===== Escáner de huella (ingreso con carnet + huella, y editar huella) ===== */
.lh-scanner { position: relative; width: 150px; height: 150px; margin: 22px auto 8px; display: flex; align-items: center; justify-content: center; --lh: #8b5cf6; }
.lh-circulo { position: relative; z-index: 2; width: 104px; height: 104px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.9), rgba(240,236,250,.95)); border: 2px solid var(--lh); color: var(--lh);
  box-shadow: 0 8px 26px rgba(139,92,246,.28), inset 0 0 18px rgba(139,92,246,.12); transition: border-color .3s, color .3s, box-shadow .3s, transform .3s; }
.lh-circulo i { font-size: 54px; transition: transform .3s; }
.lh-barrido { position: absolute; left: 0; right: 0; top: -8px; height: 8px; background: linear-gradient(90deg, transparent, var(--lh), transparent); box-shadow: 0 0 14px 4px var(--lh); opacity: 0; border-radius: 4px; }
.lh-anillo { position: absolute; inset: 0; margin: auto; width: 104px; height: 104px; border-radius: 50%; border: 2px solid var(--lh); opacity: 0; }

/* Esperando el carnet: apagado */
.lh-scanner[data-estado="espera"] { --lh: #9ca3af; }
.lh-scanner[data-estado="espera"] .lh-circulo { box-shadow: none; opacity: .75; }
/* Listo: respira suave invitando a poner el dedo */
.lh-scanner[data-estado="listo"] .lh-circulo { animation: lhRespira 2.2s ease-in-out infinite; }
.lh-scanner[data-estado="listo"] .lh-anillo { animation: lhOnda 2.2s ease-out infinite; }
.lh-scanner[data-estado="listo"] .lh-anillo:nth-child(2) { animation-delay: .7s; }
.lh-scanner[data-estado="listo"] .lh-anillo:nth-child(3) { animation-delay: 1.4s; }
/* Esperando el dedo / leyendo: barrido de escaneo */
.lh-scanner[data-estado="leyendo"] { --lh: #d91fb0; }
.lh-scanner[data-estado="leyendo"] .lh-barrido { opacity: 1; animation: lhBarrido 1.4s ease-in-out infinite; }
.lh-scanner[data-estado="leyendo"] .lh-anillo { animation: lhOnda 1.4s ease-out infinite; }
.lh-scanner[data-estado="leyendo"] .lh-anillo:nth-child(2) { animation-delay: .45s; }
.lh-scanner[data-estado="leyendo"] .lh-anillo:nth-child(3) { animation-delay: .9s; }
.lh-scanner[data-estado="leyendo"] .lh-circulo i { animation: lhLatido 1.4s ease-in-out infinite; }
/* Verificando */
.lh-scanner[data-estado="verificando"] { --lh: #1f9bbd; }
.lh-scanner[data-estado="verificando"] .lh-barrido { opacity: 1; animation: lhBarrido .7s linear infinite; }
/* Resultado */
.lh-scanner[data-estado="ok"] { --lh: #16a34a; }
.lh-scanner[data-estado="ok"] .lh-circulo { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(22,163,74,.15), 0 8px 26px rgba(22,163,74,.35); }
.lh-scanner[data-estado="error"] { --lh: #dc2626; }
.lh-scanner[data-estado="error"] .lh-circulo { animation: lhSacude .45s ease; box-shadow: 0 0 0 8px rgba(220,38,38,.12), 0 8px 26px rgba(220,38,38,.3); }

/* Huella guardada: el icono se transforma en un check con estallido */
.lh-scanner[data-estado="guardada"] { --lh: #16a34a; }
.lh-scanner[data-estado="guardada"] .lh-circulo { background: #16a34a; color: #fff; border-color: #16a34a; animation: lhPop .55s cubic-bezier(.2,1.4,.4,1) both; box-shadow: 0 0 0 10px rgba(22,163,74,.18), 0 10px 30px rgba(22,163,74,.45); }
.lh-scanner[data-estado="guardada"] .lh-circulo i { opacity: 0; transform: scale(.4); }
.lh-scanner[data-estado="guardada"] .lh-circulo::after { content: "\f00c"; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome; font-weight: 900; font-size: 56px; position: absolute; animation: lhCheck .5s .12s cubic-bezier(.2,1.5,.4,1) both; }
.lh-scanner[data-estado="guardada"] .lh-anillo { animation: lhEstallido .9s ease-out both; border-color: #16a34a; }
.lh-scanner[data-estado="guardada"] .lh-anillo:nth-child(2) { animation-delay: .12s; }
.lh-scanner[data-estado="guardada"] .lh-anillo:nth-child(3) { animation-delay: .24s; }
.lh-scanner[data-estado="guardada"] ~ .lh-estado { color: #16a34a; }
/* Dedo detectado: respuesta inmediata */
.lh-scanner[data-estado="leyendo"] .lh-circulo { box-shadow: 0 0 0 6px rgba(217,31,176,.18), 0 8px 26px rgba(217,31,176,.4); }
/* Puntos de progreso (lecturas 1/3, 2/3, 3/3) */
.lh-pasos { display: flex; gap: 10px; justify-content: center; margin: 2px 0 8px; }
.lh-pasos span { width: 14px; height: 14px; border-radius: 50%; background: #d1d5db; transition: background .15s, transform .15s; }
.lh-pasos span.act { background: #d91fb0; animation: lhLatido 1s ease-in-out infinite; }
.lh-pasos span.ok { background: #16a34a; transform: scale(1.15); }
@keyframes lhPop { 0% { transform: scale(.85); } 60% { transform: scale(1.18); } 100% { transform: scale(1.05); } }
@keyframes lhCheck { 0% { transform: scale(0) rotate(-30deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes lhEstallido { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }

.lh-estado { min-height: 20px; margin: 6px 0 14px; font-size: 14px; font-weight: 600; text-align: center; color: var(--gray); }
.lh-scanner[data-estado="ok"] ~ .lh-estado { color: #16a34a; }
.lh-scanner[data-estado="error"] ~ .lh-estado { color: #dc2626; }

#loginHuellaBtn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.4); box-shadow: none; transform: none; }

@keyframes lhRespira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes lhOnda { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.45); opacity: 0; } }
@keyframes lhBarrido { 0% { top: -8px; } 50% { top: calc(100% + 0px); } 100% { top: -8px; } }
@keyframes lhLatido { 0%, 100% { transform: scale(1); } 50% { transform: scale(.92); } }
@keyframes lhSacude { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .lh-scanner * { animation: none !important; } }

/* =========================================================
   LEGIBILIDAD (modo oscuro/claro) + FLUJO DE RENOVACIÓN
   - Los <button> no heredan color: sin esto el texto quedaba negro
     sobre fondo oscuro en .metodo-pago-btn.
   ========================================================= */
.metodo-pago-btn,
.type-btn,
.option-card,
.modal-content {
  color: var(--dark);
}
.metodo-pago-btn { font-family: inherit; }
.metodo-pago-btn:hover { border-color: var(--primary); transform: translateY(-1px); }
.metodo-pago-btn.selected,
.type-btn.active {
  /* Selección legible en ambos temas: fondo neutro de marca + texto con contraste */
  background: var(--neutro-bg);
  color: var(--neutro-fg);
  border-color: var(--neutro-bg);
}
.metodo-pago-btn.selected i, .type-btn.active i { color: inherit; }
.option-card .price { color: var(--primary); }
.option-card.selected {
  background: var(--neutro-bg);
  border-color: var(--neutro-bg);
}
.option-card.selected,
.option-card.selected small,
.option-card.selected div { color: var(--neutro-fg); }
.option-card.selected .price { color: var(--cian-bg); }
html[data-theme="dark"] .option-card.selected .price { color: #0FA0B8; }
.option-card small { color: var(--gray); }

/* Tarjetas de plan en Renovaciones: más grandes y claras para tocar */
#gridsPlanesRenovacion .options-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
#gridsPlanesRenovacion .option-card { padding: 28px 20px; }
#gridsPlanesRenovacion .option-card .price { font-size: 28px; }

/* Resumen dentro de la ventana de renovación */
.renov-resumen {
  background: var(--gray-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 6px 18px;
}
.renov-resumen > div {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; font-size: 15px; border-bottom: 1px dashed var(--border);
}
.renov-resumen > div:last-child { border-bottom: 0; }
.renov-resumen span { color: var(--gray); }
.renov-resumen strong { color: var(--dark); }
.renov-resumen .renov-total { font-size: 20px; padding-top: 14px; }
.renov-resumen .renov-total strong { font-size: 24px; font-weight: 800; }


/* La 2.ª definición de .modal-overlay deja display:none; estas ventanas se
   abren quitando la clase "hidden", así que hay que mostrarlas a mano
   (igual que #modalCredencialesPortal). Sin esto NO aparecían. */
#modalRenovar:not(.hidden),
#modalPagoExitoso:not(.hidden) { display: flex; }

/* Plan seleccionado: el texto en línea (color: var(--dark)) ganaba y
   quedaba blanco sobre fondo claro en los fondos oscuros. */
.option-card.selected,
.option-card.selected div,
.option-card.selected small { color: var(--neutro-fg) !important; }
.option-card.selected .price { color: var(--cian-bg) !important; }
html[data-theme="dark"] .option-card.selected .price { color: #0A7F93 !important; }

/* Barra inferior de Renovaciones */
.renov-barra {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 24px; padding: 16px 20px;
  background: var(--gray-light); border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.renov-barra__sel { flex: 1; min-width: 220px; }
.renov-barra__sel small { display: block; color: var(--gray); font-size: 13px; }
.renov-barra__sel strong { color: var(--dark); font-size: 20px; }
.renov-barra__btn { padding: 14px 34px; font-size: 20px; }
.renov-barra__btn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.5); }

/* Editor de tarjeta: controles más grandes y legibles */
.tarjeta-editor-campo label { font-size: 15px; }
.tarjeta-editor-campo input[type="color"] { width: 52px; height: 40px; }
.tarjeta-editor-campo select, .tarjeta-editor-campo input[type="text"] { font-size: 15px; padding: 9px 12px; }
#tarjetaEditorControles .tarjeta-preset-swatch { width: 38px; height: 38px; border-radius: 10px; }
#tarjetaEditorControles .chip-fecha, #tarjetaEditorControles button { font-size: 14.5px; }

/* Vista previa de tarjetas: apiladas y ajustadas a la altura de pantalla para no necesitar barra de desplazamiento.
   Alto de las dos = 1.25 x ancho, así el ancho sale del alto disponible. */
.tarjeta-prev-col { width: clamp(280px, calc((100vh - 400px) * 0.8), 460px); max-width: 100%; text-align: center; }

/* Usuarios del portal: resumen minimalista al lado del texto */
.pu-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.pu-top .pu-intro { flex: 1 1 320px; margin: 0; }
.pu-resumen { display: flex !important; flex-wrap: wrap; gap: 6px; margin: 0 !important; grid-template-columns: none !important; }
.pu-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--glass-bg-soft); border: 1px solid var(--glass-border); color: var(--glass-text-soft, var(--gray)); white-space: nowrap; }
.pu-chip i { font-size: 11px; color: var(--neutro-fg); }
.pu-chip b { color: var(--glass-text); font-size: 13px; }

/* Reenvío de notas de pago */
.cmp-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px;
  background: var(--glass-bg-soft); border: 1px solid var(--glass-border); margin-bottom: 8px; }
.cmp-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cmp-info small { color: var(--gray); }
.cmp-acciones { display: flex; gap: 6px; }

/* Confirmación animada de envío (check verde) */
.exito-overlay { position: fixed; inset: 0; z-index: 100000; display: none; place-items: center; background: rgba(15,23,42,.5);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); animation: exitoFade .2s ease-out; cursor: pointer; }
.exito-card { background: var(--glass-bg-strong, #fff); color: var(--dark, #111); border-radius: 24px; padding: 34px 44px 28px; text-align: center;
  min-width: 300px; max-width: 420px; box-shadow: 0 30px 80px rgba(0,0,0,.35); border: 1px solid var(--glass-border, rgba(0,0,0,.08));
  animation: exitoPop .45s cubic-bezier(.34,1.56,.64,1); }
html[data-theme="dark"] .exito-card { background: #1b1f2e; color: #f3f4f6; }
.exito-svg { width: 96px; height: 96px; display: block; margin: 0 auto 12px; }
.exito-circulo { stroke: #22c55e; stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; stroke-linecap: round;
  animation: exitoTrazo .6s .1s ease-out forwards; }
.exito-check { stroke: #22c55e; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36; stroke-dashoffset: 36;
  animation: exitoTrazo .4s .6s ease-out forwards; }
.exito-titulo { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.exito-detalle { font-size: 14px; color: var(--gray, #6b7280); }
@keyframes exitoTrazo { to { stroke-dashoffset: 0; } }
@keyframes exitoFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes exitoPop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }

/* La recepción no ve ningún botón de eliminar */
body.rol-recepcion .solo-admin { display: none !important; }

/* Actividad del sistema (bitácora) */
.bt-bloqueo { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 36px 20px; max-width: 460px; margin: 10px auto; }
.bt-bloqueo > i { font-size: 38px; color: var(--neutro-fg); }
.bt-bloqueo small { color: var(--gray); }
.bt-bloqueo__fila { display: flex; gap: 8px; width: 100%; margin-top: 6px; }
.bt-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bt-chips { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--glass-bg-soft); border: 1px solid var(--glass-border); }
.bt-chip { border: none; background: none; padding: 7px 14px; border-radius: 9px; font-weight: 700; font-size: 13.5px; cursor: pointer; color: var(--dark); }
.bt-chip.active { background: var(--neutro-bg); color: var(--neutro-fg); }
.bt-fechas { display: flex; align-items: center; gap: 6px; }
.bt-fechas input { width: 150px; }
.bt-tabla-wrap { max-height: calc(100vh - 430px); min-height: 220px; overflow: auto; }
.bt-tabla td, .bt-tabla th { font-size: 13px; vertical-align: top; }
.bt-nowrap { white-space: nowrap; }
.bt-rol { display: block; color: var(--gray); font-size: 11.5px; }
.bt-det { color: var(--gray); max-width: 280px; }
.bt-ip { color: var(--gray); font-size: 12px; }
.bt-ac { display: inline-block; padding: 2px 9px; border-radius: 8px; background: var(--glass-bg-soft); font-weight: 600; }
.bt-ac--in { background: rgba(34,197,94,.16); color: #16a34a; }
.bt-ac--out { background: rgba(148,163,184,.2); }
.bt-ac--elim { background: rgba(239,68,68,.15); color: #dc2626; }
.bt-ac--alerta { background: rgba(245,158,11,.2); color: #d97706; }
.bt-pie { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }

.bt-ac--clic { background: rgba(99,102,241,.12); color: var(--dark); font-weight: 500; }
.bt-ac--nav { background: rgba(6,182,212,.16); color: #0e7490; }
.bt-det { max-width: 340px; word-break: break-word; }

/* Reportes: filtro por producto / plan */
.reporte-filtro-item { min-width: 170px; max-width: 220px; }
.reporte-filtro-item .form-control { padding: 6px 10px; }
.reporte-resumen-item {
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center;
  padding: 8px 14px; margin: 0 0 8px; border-radius: 10px;
  background: rgba(99,102,241,.12); font-size: .88rem;
}
.reporte-resumen-item i { opacity: .8; margin-right: 4px; }

/* Tour interactivo: pedido de acción + confirmación */
.tour-accion {
  margin-top: 12px; padding: 9px 12px; border-radius: 10px;
  background: rgba(99,102,241,.16); color: var(--primary-dark);
  font-weight: 600; font-size: 13.5px; line-height: 1.35;
  display: flex; gap: 9px; align-items: center;
}
.tour-accion--ok { background: rgba(34,197,94,.2); color: #15803d; }
html[data-theme="dark"] .tour-accion--ok { color: #4ade80; }
.tour-spotlight--interactivo { animation: tourPulso 1.4s ease-in-out infinite; }
@keyframes tourPulso {
  0%, 100% { border-color: var(--accent); }
  50% { border-color: #ffffff; }
}
@media (prefers-reduced-motion: reduce) { .tour-spotlight--interactivo { animation: none; } }

/* ===== Reportes: selector de plan/producto (más grande y ordenado) ===== */
.reporte-filtro-item { min-width: 250px; max-width: 300px; }
.reporte-filtro-item label { font-size: .82rem; font-weight: 700; letter-spacing: .02em; margin-bottom: 6px; display: block; }
.reporte-filtro-item .form-control {
  height: 46px; padding: 0 38px 0 14px; font-size: 1rem; font-weight: 600;
  border-radius: 12px; cursor: pointer;
}
.reporte-resumen-item { font-size: 1rem; padding: 12px 18px; gap: 10px 28px; border-radius: 12px; }

/* ===== Socio de Oro (pestañas, tarjetas y panel de configuración) ===== */
.type-btn--oro { background: linear-gradient(135deg, #8a6508, #f2cf66) !important; color: #2b1d00 !important;
  font-weight: 800; border-color: #b8860b !important; }
.type-btn--oro i { margin-right: 6px; }
.option-card--oro { border: 2px solid #c9a227 !important;
  background: linear-gradient(160deg, rgba(242,207,102,.22), rgba(138,101,8,.10)) !important;
  box-shadow: 0 6px 22px rgba(201,162,39,.22); }
.option-card--oro.selected { box-shadow: 0 0 0 3px #f2cf66, 0 10px 28px rgba(201,162,39,.4); }
.option-card--oro .price { color: var(--oro-texto) !important; }
.oro-corona { font-size: 11px; font-weight: 800; letter-spacing: .18em; color: var(--oro-texto); margin-bottom: 6px; }
.cfg-cat-oro { border-color: #c9a227 !important; box-shadow: 0 0 0 1px rgba(201,162,39,.35); }
.cfg-cat-aviso { margin-bottom: 14px; padding: 10px 14px; border-radius: 10px; font-size: .88rem;
  background: rgba(99,102,241,.12); display: flex; gap: 8px; align-items: center; }
.cfg-cat-aviso--oro { background: linear-gradient(135deg, rgba(242,207,102,.3), rgba(138,101,8,.15)); color: inherit; }

/* ===== Ventas: sesiones sueltas ===== */
.pos-sesiones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 12px; }
.pos-sesiones-titulo { font-size: .85rem; font-weight: 700; opacity: .85; margin-right: 4px; }
.pos-sesion-btn {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 8px 16px; border-radius: 12px; border: 1px solid rgba(99,102,241,.45);
  background: rgba(99,102,241,.14); color: inherit; cursor: pointer; transition: transform .15s, background .15s;
}
.pos-sesion-btn:hover { transform: translateY(-2px); background: rgba(99,102,241,.26); }
.pos-sesion-nombre { font-size: .9rem; font-weight: 700; }
.pos-sesion-precio { font-size: .85rem; opacity: .85; }

/* Badges de plan (catálogo real) */
.badge-vip { background: #1D1D1F; color: #fff; }
.badge-mediomes { background: #ece3f7; color: #5b3a99; }
.badge-tres { background: #e6e6ea; color: #3c3c43; }
.badge-oro { background: linear-gradient(135deg, #8a6508, #f2cf66); color: #2b1d00; }
.badge-otros { background: #ececf0; color: #55555c; }
html[data-theme="dark"] .badge-mediomes { color: #4a2f80; }
html[data-theme="dark"] .badge-tres { color: #3c3c43; }
html[data-theme="dark"] .badge-otros { color: #55555c; }

/* ===== Registro → Sesión (sin datos de la persona) ===== */
.sesion-panel { max-width: 760px; margin: 0 auto; padding: 8px 4px; }
.sesion-titulo { font-size: 1.5rem; display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.sesion-sub { opacity: .75; margin-bottom: 20px; }
.sesion-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 22px; }
.sesion-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 24px 18px; border-radius: 18px; border: 2px solid rgba(99,102,241,.35);
  background: rgba(99,102,241,.1); color: inherit; cursor: pointer; transition: transform .15s, border-color .15s, background .15s;
}
.sesion-card:hover { transform: translateY(-3px); background: rgba(99,102,241,.2); }
.sesion-card.selected { border-color: #22c55e; background: rgba(34,197,94,.16); box-shadow: 0 0 0 3px rgba(34,197,94,.25); }
.sesion-card-icono { font-size: 2rem; opacity: .9; }
.sesion-card-nombre { font-size: 1.15rem; font-weight: 800; }
.sesion-card-precio { font-size: 1.5rem; font-weight: 800; }
.sesion-card-desc { font-size: .82rem; opacity: .75; }
.sesion-cobro { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-radius: 16px; background: var(--gray-light); border: 1px solid var(--border); }
.sesion-personas { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.sesion-personas strong { min-width: 24px; text-align: center; font-size: 1.2rem; }
.sesion-mas-menos { width: 36px; height: 36px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--dark) 28%, transparent);
  background: var(--card-bg); color: var(--dark); font-size: 1.2rem; cursor: pointer; }
.sesion-total { font-size: 1.15rem; }
.sesion-total strong { font-size: 1.5rem; }
.sesion-btn { padding: 12px 26px; font-size: 1rem; }
.sesion-hoy { margin-top: 18px; padding: 12px 16px; border-radius: 12px; background: rgba(99,102,241,.1); font-size: .92rem; }
.sesion-hoy-detalle { display: block; opacity: .75; margin-top: 4px; font-size: .85rem; }

/* ===== Planes y Precios: pestañas por categoría ===== */
.cfg-planes-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 22px; width: 100%; max-width: none; }
.cfg-planes-tabs .inv-modo-tab { flex: 0 0 auto; }
.cfg-tab-count { margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700; background: color-mix(in srgb, currentColor 16%, transparent); }
.inv-modo-tab.active .cfg-tab-count { background: color-mix(in srgb, currentColor 22%, transparent); }
.cfg-tab-oro:not(.active) { border-color: #c9a227; color: var(--oro-texto); }
.cfg-tab-nueva { border-style: dashed !important; opacity: .9; }

/* ===== Tarjetas de Socio: selector de plan agrupado ===== */
.tarjeta-sel-base { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.tarjeta-sel-ayuda { font-size: .8rem; opacity: .7; }
.tarjeta-sel-ayuda i { color: #e5b93c; font-size: .7rem; }
.tarjeta-grupos { display: flex; flex-direction: column; gap: 10px; }
.tarjeta-grupo { display: grid; grid-template-columns: 170px 1fr; gap: 12px; align-items: start;
  padding: 10px 14px; border-radius: 14px; background: var(--gray-light); border: 1px solid var(--border); }
.tarjeta-grupo--oro { border-color: rgba(201,162,39,.55); background: rgba(242,207,102,.08); }
.tarjeta-grupo-titulo { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .85;
  padding-top: 8px; display: flex; gap: 8px; align-items: center; }
.tarjeta-grupo--oro .tarjeta-grupo-titulo { color: var(--oro-texto); opacity: 1; }
.tarjeta-grupo-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tarjeta-chip { padding: 8px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--dark) 28%, transparent); background: var(--card-bg);
  color: var(--dark); font-size: .9rem; font-weight: 600; cursor: pointer; transition: background .15s, transform .15s; }
.tarjeta-chip:hover { background: color-mix(in srgb, var(--dark) 9%, var(--card-bg)); transform: translateY(-1px); }
.tarjeta-chip.active { background: var(--dark); color: var(--light); border-color: var(--dark); }
.tarjeta-chip--base { padding: 10px 18px; font-weight: 700; }
.tarjeta-chip .fa-star { font-size: .65rem; color: #e5b93c; margin-left: 4px; }
@media (max-width: 760px) { .tarjeta-grupo { grid-template-columns: 1fr; } .tarjeta-grupo-titulo { padding-top: 0; } }

/* Dorado legible en ambos temas (oscuro en claro, brillante en oscuro) */
:root { --oro-texto: #8a6508; }
html[data-theme="dark"] { --oro-texto: #f2cf66; }
.cfg-tab-nueva { color: var(--dark); }
.cfg-planes-tabs .inv-modo-tab:not(.active) { color: var(--dark); }
.cfg-planes-tabs .cfg-tab-oro:not(.active) { color: var(--oro-texto); }
.pos-sesion-btn, .sesion-card { color: var(--dark); }

/* ===== Ventana "¿Guardar los cambios?" (guardia-cambios.js) — usa colores del tema ===== */
.guardia-overlay { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(10,10,12,.55); backdrop-filter: blur(6px); animation: guardiaFondo .18s ease-out; }
.guardia-caja { width: min(500px, 100%); max-height: 86vh; display: flex; flex-direction: column; gap: 20px;
  padding: 30px 28px 26px; border-radius: 22px; background: var(--card-bg); color: var(--dark);
  border: 1px solid var(--border); box-shadow: var(--shadow-lg); animation: guardiaCaja .22s var(--ease-out); }
.guardia-cabecera { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.guardia-cabecera h3 { margin: 6px 0 0; font-size: 1.3rem; letter-spacing: -.01em; }
.guardia-cabecera p { margin: 0; font-size: .92rem; color: var(--gray); }
.guardia-icono { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning); font-size: 1.3rem; }
.guardia-lista { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.guardia-lista li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 12px 16px;
  border-radius: 14px; background: var(--gray-light); border: 1px solid var(--border); }
.guardia-campo { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gray); }
.guardia-cambio { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; font-size: 1.05rem; word-break: break-word; }
.guardia-cambio s { color: var(--danger); opacity: .85; }
.guardia-cambio b { color: var(--success); }
.guardia-cambio i { font-size: .75rem; color: var(--gray); }
.guardia-acciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.guardia-btn { height: 46px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 12px; font: inherit; font-size: .92rem; font-weight: 700; cursor: pointer; white-space: nowrap;
  border: 1px solid transparent; transition: transform .15s var(--ease-out), background .15s, box-shadow .15s; }
.guardia-btn:hover { transform: translateY(-1px); }
.guardia-btn:active { transform: scale(.97); }
.guardia-btn--suave { background: transparent; color: var(--dark); border-color: var(--border); }
.guardia-btn--suave:hover { background: var(--gray-light); }
.guardia-btn--peligro { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.guardia-btn--peligro:hover { background: color-mix(in srgb, var(--danger) 24%, transparent); }
.guardia-btn--primario { background: var(--dark); color: var(--light); }
.guardia-btn--primario:hover { box-shadow: var(--shadow); }
.guardia-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@keyframes guardiaFondo { from { opacity: 0; } to { opacity: 1; } }
@keyframes guardiaCaja { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) { .guardia-acciones { grid-template-columns: 1fr; } .guardia-btn--primario { order: -1; } }
@media (prefers-reduced-motion: reduce) { .guardia-overlay, .guardia-caja { animation: none; } }

/* ===== Bitácora: más legible y con ediciones guardadas/canceladas ===== */
.bt-tabla td, .bt-tabla th { font-size: 15px; line-height: 1.45; padding-top: 11px; padding-bottom: 11px; }
.bt-tabla th { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.bt-det { max-width: 460px; min-width: 220px; color: var(--dark); opacity: .85; word-break: break-word; }
.bt-rol { font-size: 12.5px; }
.bt-ip { font-size: 13px; }
.bt-ac { padding: 3px 11px; font-size: 14px; }
.bt-ac--guardado { background: rgba(34,197,94,.16); color: #15803d; }
.bt-ac--cancelado { background: rgba(255,159,10,.18); color: #b45309; }
html[data-theme="dark"] .bt-ac--guardado { color: #4ade80; }
html[data-theme="dark"] .bt-ac--cancelado { color: #fbbf24; }
.bt-chip { font-size: 14.5px; }

/* ===== Editar cuenta: mismo estilo que Crear cuenta ===== */
.modal-content.ec-modal { max-width: 460px; }
.modal-content.ec-modal.ec-ancho { max-width: 800px; }
.ec-cols { display: grid; grid-template-columns: 1fr; gap: 18px; text-align: left; }
.ec-modal.ec-ancho .ec-cols { grid-template-columns: 1fr 1fr; }
.ec-col .form-group { margin-bottom: 14px; }
.ec-seccion-titulo { font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--gray); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.ec-seccion-titulo i { color: var(--cian-fg, #22d3ee); }
.ec-hint { color: var(--gray); font-weight: 500; font-size: 11.5px; }
.ec-nota { font-size: 12.5px; color: var(--gray); line-height: 1.45; margin: 0 0 14px; }
.ec-huella { display: flex; flex-direction: column; border: 1px solid var(--border, rgba(255,255,255,.12)); background: rgba(255,255,255,.03); border-radius: 16px; padding: 18px; margin-top: 0; }
.ec-huella .ec-btn-huella { margin-top: auto; justify-content: center; width: 100%; padding: 11px; }
.ec-acciones { margin-top: 22px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.ec-acciones .btn { padding: 13px 30px; }
@media (max-width: 760px) { .ec-modal.ec-ancho .ec-cols { grid-template-columns: 1fr; } }

/* ===== Registro de huella: anillo de progreso (3 lecturas) ===== */
.lh-titulo { font-size: 15px; font-weight: 800; letter-spacing: .02em; text-align: center; color: var(--dark); margin-top: 4px; }
.lh-scanner--grande { width: 190px; height: 190px; margin: 14px auto 6px; }
.lh-scanner--grande .lh-circulo { width: 132px; height: 132px; }
.lh-scanner--grande .lh-anillo { width: 132px; height: 132px; }
.lh-scanner--grande .lh-circulo i { font-size: 68px; }
.lh-progreso { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); z-index: 3; pointer-events: none; }
.lh-prog-bg { fill: none; stroke: rgba(148,163,184,.25); stroke-width: 4; }
.lh-prog-fg { fill: none; stroke: var(--lh); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .6s cubic-bezier(.3,1.2,.4,1), stroke .3s; filter: drop-shadow(0 0 6px var(--lh)); }
.lh-scanner[data-estado="guardada"] .lh-prog-fg { stroke: #16a34a; stroke-dashoffset: 0 !important; }

/* Modales que se abren/cierran con la clase "hidden" (no con style.display) */
.modal-overlay.modal-toggle:not(.hidden) { display: flex; }

/* ===== Miembros del entrenador: 2 columnas, sin scroll de ventana ===== */
#modalAsignarSocios .modal-content.asig-modal { max-width: 1240px !important; width: 95%; height: min(88vh, 860px); max-height: 94vh; padding: 22px 28px 18px; overflow: hidden; display: flex; flex-direction: column; gap: 14px; }
.asig-cab { text-align: center; }
.asig-cab h3 { margin: 0 0 4px; font-size: 22px; }
.asig-cab p { margin: 0; font-size: 13.5px; color: var(--gray); }
.asig-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.05fr 1fr; gap: 18px; }
.asig-col { min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: 16px; background: rgba(255,255,255,.035); border: 1px solid var(--border, rgba(255,255,255,.1)); }
.asig-col-tit { display: flex; gap: 12px; align-items: flex-start; }
.asig-col-tit b { display: block; font-size: 15px; }
.asig-col-tit small { display: block; font-size: 12px; color: var(--gray); line-height: 1.45; margin-top: 2px; }
.asig-ico { flex: 0 0 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(139,92,246,.18); color: #a78bfa; font-size: 17px; }
.asig-ico--m { background: rgba(34,211,238,.16); color: #22d3ee; }
.asig-reglas { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 2px; }
.asig-reg-todos { margin: 0 !important; }
.asig-reg-card { display: grid !important; grid-template-columns: 190px 1fr; gap: 10px; align-items: start; padding: 9px 10px; border-radius: 12px; background: rgba(255,255,255,.04); margin: 0 !important; }
.asig-reg-planes { display: flex; flex-wrap: wrap; gap: 6px; }
.asig-reglas .asig-chip { padding: 5px 12px; font-size: 12.5px; }
.asig-reglas .asig-chip--cat { width: 100%; text-align: left; border-radius: 10px; }
.asig-reglas .asig-chip--grande { font-size: 13.5px; padding: 8px 16px; }
.asig-auto-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--border, rgba(255,255,255,.1)); }
.asig-auto-pie .asig-auto-ahora { margin: 0; font-size: 12.5px; }
.asig-man .asig-tools { margin: 0; }
.asig-man .asig-lista { flex: 1; min-height: 0; }
.asig-pie { margin-top: 0; padding-top: 12px; border-top: 1px solid var(--border, rgba(255,255,255,.1)); }
@media (max-width: 1000px) { .asig-cols { grid-template-columns: 1fr; overflow-y: auto; } #modalAsignarSocios .modal-content.asig-modal { height: 94vh; } .asig-reg-card { grid-template-columns: 1fr; } }

/* ===== Pantalla de bienvenida: pestañas del editor ===== */
.bvx-tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 0 0 20px; padding: 6px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--border, rgba(255,255,255,.1)); }
.bvx-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 12px; border: 0; background: transparent; color: var(--gray); font-weight: 700; font-size: 14px; cursor: pointer; transition: background .2s, color .2s, transform .15s; }
.bvx-tab:hover { color: inherit; background: rgba(255,255,255,.06); }
.bvx-tab:active { transform: scale(.97); }
.bvx-tab.is-on { background: linear-gradient(135deg, #8b5cf6, #22d3ee); color: #fff; box-shadow: 0 6px 18px rgba(139,92,246,.35); }

/* ===== Reporte por cuenta: solo ventas, sin scroll de ventana ===== */
.modal-content.rc-modal { max-width: 1180px; width: 95vw; height: min(86vh, 780px); max-height: 94vh; overflow: hidden; display: flex; flex-direction: column; }
.rc-resultado { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.rc-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; font-size: 15px; }
.rc-cab span { color: var(--gray); font-size: 13px; }
.rc-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rc-kpi b { font-size: 18px; white-space: nowrap; }
.rc-kpi--total { background: linear-gradient(135deg, rgba(139,92,246,.28), rgba(34,211,238,.2)); }
.rc-cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; }
.rc-bloque { min-height: 0; display: flex; flex-direction: column; background: rgba(255,255,255,.03); border-radius: 12px; padding: 4px 12px 10px; }
.rc-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.rc-scroll .rc-tabla thead th { position: sticky; top: 0; background: var(--gray-light, #1e1e24); z-index: 1; }
.rc-bloque .rc-vacio { padding: 18px 6px; }
@media (max-width: 1000px) { .rc-kpis { grid-template-columns: repeat(2, 1fr); } .rc-cuerpo { grid-template-columns: 1fr; overflow-y: auto; } }

/* ===== Pantalla de bienvenida: controles a la izquierda, vista previa a la derecha (sin scroll) ===== */
#panelPantallaBienvenida.bvp { display: flex; flex-direction: column; height: calc(100vh - 215px); min-height: 520px; padding: 18px 26px 18px !important; overflow: hidden; }
.bvp-cab h3 { margin: 0 0 4px !important; font-size: 21px !important; }
.bvp-cab p { margin: 0 0 12px !important; }
.bvp .bvx-tabs { justify-content: flex-start; margin: 0 0 14px; width: fit-content; max-width: 100%; }
.bvp .bvx-tab { padding: 8px 16px; font-size: 13.5px; }
.bvp-cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; }
.bvp-izq { min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.bvp-controles { flex: 1; min-height: 0; overflow-y: auto; padding-right: 6px; }
.bvp-controles .form-group { margin-bottom: 12px; }
.bvp-controles .bvx-rangos, .bvp-controles .bvx-colores { margin-top: 0; }
.bvp-acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding-top: 12px; border-top: 1px solid var(--border, rgba(255,255,255,.1)); }
.bvp-der { min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; }
.bvp-der .bvx-vista { position: static; display: flex; flex-direction: column; gap: 8px; }
.bvp-der .bvx-pantalla { width: min(100%, calc((100vh - 400px) * 1.6)); margin: 0 auto; }
@media (max-width: 1100px) { #panelPantallaBienvenida.bvp { height: auto; overflow: visible; } .bvp-cuerpo { grid-template-columns: 1fr; } .bvp-controles { overflow: visible; } }

/* Gestión de usuarios: acciones alineadas, papelera siempre al borde derecho */
td.acc-celda { min-width: 470px; }
.acc-fila { display: flex; align-items: center; gap: 8px; }
.acc-fila .acc-papelera, .acc-fila .acc-tucuenta { margin-left: auto; }
.acc-tucuenta { color: var(--gray); font-size: 12px; padding-right: 8px; }
.acc-estado-huella { font-size: 12px; margin-top: 6px; }

/* ===== Pantalla de bienvenida: editor guiado (números, tarjetas, pines en la vista previa) ===== */
.bvx-num { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: linear-gradient(135deg, #8b5cf6, #22d3ee); color: #fff; font-size: 12px; font-weight: 800; flex: none; }
.bvx-num--evento { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.bvx-guia { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 9px 12px; border-radius: 10px; font-size: 13px; color: var(--gray); background: rgba(139,92,246,.08); border: 1px solid rgba(139,92,246,.18); }
.bvx-guia i { color: #8b5cf6; }
.bvx-guia--full { grid-column: 1 / -1; }
.bvx-campo { margin-bottom: 14px; min-width: 0; }
.bvx-campo > label { display: grid; grid-template-columns: auto 1fr auto; column-gap: 8px; align-items: center; margin-bottom: 6px; }
.bvx-campo > label b { font-size: 14px; }
.bvx-campo > label small { grid-column: 2 / 4; color: var(--gray); font-size: 12px; line-height: 1.3; }
.bvx-campo > label em { font-style: normal; font-weight: 800; font-size: 13px; color: #8b5cf6; grid-column: 3; grid-row: 1; }
.bvx-campo input[type=range] { width: 100%; }
.bvx-colores { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; align-items: stretch; }
.bvx-ccard { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: rgba(255,255,255,.35); border: 1px solid var(--glass-border, rgba(128,128,128,.25)); }
.bvx-ccard-top { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.bvx-ccard p { margin: 0; font-size: 12.5px; color: var(--gray); line-height: 1.35; min-height: 34px; }
.bvx-ccard .bvx-color { display: flex; align-items: center; gap: 10px; }
.bvx-ccard .bvx-color input[type=color].is-auto { opacity: .55; }
.bvx-ef { font-size: 12px; color: var(--gray); line-height: 1.3; min-height: 30px; }
.bvx-presets { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 6px; }
.bvx-presets button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(128,128,128,.35); cursor: pointer; padding: 0; transition: transform .15s, border-color .15s; }
.bvx-presets button:hover { transform: scale(1.18); border-color: #8b5cf6; }
.bvx-pantalla .bvx-logo img { display: block; object-fit: contain; filter: drop-shadow(0 .5cqw 1.4cqw rgba(0,0,0,.25)); }
.bvx-pantalla .bvx-logo img.logo-con-fondo { object-fit: cover; border-radius: 22%; filter: none; box-shadow: 0 0 0 1px color-mix(in srgb, var(--bvx-acento) 45%, transparent), 0 1.4cqw 3.4cqw color-mix(in srgb, var(--bvx-acento) 28%, rgba(0,0,0,.25)); }
.bvx-pantalla[data-pines] #bvxLogo, .bvx-pantalla[data-pines] #bvxTitulo, .bvx-pantalla[data-pines] #bvxMensaje, .bvx-pantalla[data-pines] #bvxInput, .bvx-pantalla[data-pines] #bvxReloj { position: relative; }
.bvx-pantalla [data-pin]::before { content: attr(data-pin); position: absolute; left: -4.4cqw; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 3.2cqw; height: 3.2cqw; border-radius: 50%; background: #fbbf24; color: #1f1300; font: 800 1.9cqw/1 system-ui, sans-serif; box-shadow: 0 0 0 .4cqw rgba(251,191,36,.35); z-index: 3; animation: bvxPin .35s ease-out; }
@keyframes bvxPin { from { transform: translateY(-50%) scale(.3); opacity: 0; } to { transform: translateY(-50%) scale(1); opacity: 1; } }
@media (max-width: 1280px) { .bvx-colores { grid-template-columns: 1fr; } }

/* ===== Asistencia · Registro: escáner + actividad en vivo ===== */
.asis-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:12px 0}
.asis-stat{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:18px;background:var(--glass-bg);border:1px solid var(--border,rgba(128,128,128,.2));backdrop-filter:blur(var(--glass-blur))}
.asis-stat>i{font-size:22px;color:var(--accent);width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 15%,transparent)}
.asis-stat b{display:block;font-size:26px;line-height:1;color:var(--primary-dark)}
.asis-stat span{font-size:12px;color:var(--gray)}
.asis-stat--warn>i{color:var(--warning,#f59e0b);background:color-mix(in srgb,var(--warning,#f59e0b) 15%,transparent)}
.asis-grid{display:grid;grid-template-columns:minmax(300px,2fr) 3fr;gap:16px;height:calc(100vh - 330px);min-height:340px}
.asis-scanner,.asis-feed{border-radius:22px;background:var(--glass-bg);border:1px solid var(--border,rgba(128,128,128,.2));backdrop-filter:blur(var(--glass-blur));min-height:0}
.asis-scanner{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;border:2px dashed var(--accent)}
.asis-radar{position:relative;width:150px;height:150px;display:grid;place-items:center;margin-bottom:14px}
.asis-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:asisRing 3s ease-out infinite}
.asis-ring:nth-child(2){animation-delay:1s}.asis-ring:nth-child(3){animation-delay:2s}
@keyframes asisRing{0%{transform:scale(.45);opacity:.7}100%{transform:scale(1.15);opacity:0}}
.asis-finger{position:relative;width:84px;height:84px;display:grid;place-items:center;font-size:54px;color:var(--accent);overflow:hidden;border-radius:18px}
.asis-scanline{position:absolute;left:0;right:0;height:3px;background:var(--accent);box-shadow:0 0 12px var(--accent);animation:asisScan 2.2s ease-in-out infinite}
@keyframes asisScan{0%,100%{top:6%}50%{top:92%}}
.asis-titulo{font-size:18px;font-weight:600;color:var(--primary-dark);margin:0 0 4px}
.asis-sub{color:var(--gray);font-size:13px;margin:0 0 14px}
.asis-disp{margin-top:14px;padding:10px 14px;background:var(--card-bg);border-radius:12px;font-size:13px;color:var(--gray)}
.asis-disp b{color:var(--primary-dark)}
.asis-feed{display:flex;flex-direction:column;padding:16px 18px}
.asis-feed-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.asis-feed-head h3{margin:0;font-size:17px;color:var(--primary-dark)}
.asis-live{font-size:12px;color:var(--success);display:flex;align-items:center;gap:6px}
.asis-live i{width:8px;height:8px;border-radius:50%;background:var(--success);animation:asisPulse 1.4s infinite}
@keyframes asisPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--success) 60%,transparent)}50%{box-shadow:0 0 0 7px transparent}}
.asis-feed-list{flex:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:8px;padding-right:4px}
.asis-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--card-bg);animation:asisIn .35s ease-out}
@keyframes asisIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.asis-av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;background:var(--accent);flex:none}
.asis-info{flex:1;min-width:0}.asis-info b{display:block;color:var(--primary-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.asis-info span,.asis-hora span{font-size:12px;color:var(--gray)}
.asis-hora{text-align:right}.asis-hora em{display:block;font-style:normal;font-size:12px;font-weight:700}
.asis-hora em.entra{color:var(--success)}.asis-hora em.sale{color:var(--danger)}
.asis-vacio{margin:auto;color:var(--gray);text-align:center}.asis-vacio i{display:block;font-size:34px;margin-bottom:8px;opacity:.5}
@media(max-width:900px){.asis-stats{grid-template-columns:repeat(2,1fr)}.asis-grid{grid-template-columns:1fr;height:auto}.asis-feed-list{max-height:300px}}
@media(prefers-reduced-motion:reduce){.asis-ring,.asis-scanline,.asis-live i,.asis-item{animation:none}}

/* ===== Diálogos del sistema (uiConfirm / uiPrompt / uiAlert) ===== */
.ui-dlg-overlay{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .16s ease}
.ui-dlg-overlay.ui-dlg-in{opacity:1}
.ui-dlg{width:min(420px,100%);padding:26px 26px 22px;border-radius:24px;text-align:center;background:var(--glass-bg,rgba(25,25,35,.92));color:var(--primary-dark,#fff);border:1px solid var(--border,rgba(255,255,255,.14));box-shadow:0 24px 60px rgba(0,0,0,.45);backdrop-filter:blur(var(--glass-blur,20px)) saturate(160%);transform:translateY(14px) scale(.94);opacity:0;transition:transform .32s cubic-bezier(.34,1.56,.64,1),opacity .2s ease}
.ui-dlg-in .ui-dlg{transform:none;opacity:1}
.ui-dlg-out .ui-dlg{transform:scale(.96);opacity:0;transition:transform .16s ease,opacity .16s ease}
.ui-dlg-ico{width:58px;height:58px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;font-size:25px;color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent)}
.ui-dlg--peligro .ui-dlg-ico{color:var(--danger,#ef4444);background:color-mix(in srgb,var(--danger,#ef4444) 16%,transparent);animation:uiDlgShake .45s .15s}
@keyframes uiDlgShake{0%,100%{transform:none}25%{transform:rotate(-8deg)}60%{transform:rotate(7deg)}}
.ui-dlg h3{margin:0 0 8px;font-size:19px}
.ui-dlg-msg p{margin:0 0 4px;font-size:14.5px;line-height:1.45}
.ui-dlg-msg .ui-dlg-sec{font-size:13px;color:var(--gray);margin-top:8px}
.ui-dlg-input{width:100%;margin-top:14px;padding:12px 14px;border-radius:12px;font-size:16px;text-align:center;color:inherit;background:var(--card-bg,rgba(255,255,255,.06));border:1.5px solid var(--border,rgba(255,255,255,.18));outline:none;transition:border-color .2s,box-shadow .2s}
.ui-dlg-input:focus{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.ui-dlg-btns{display:flex;gap:10px;margin-top:20px}
.ui-dlg-btn{flex:1;padding:11px 14px;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;border:1.5px solid transparent;transition:transform .12s,filter .2s,background .2s}
.ui-dlg-btn:active{transform:scale(.96)}
.ui-dlg-no{background:transparent;color:inherit;border-color:var(--border,rgba(255,255,255,.22))}
.ui-dlg-no:hover{background:var(--card-bg,rgba(255,255,255,.08))}
.ui-dlg-si{background:var(--accent);color:#fff}
.ui-dlg-si:hover{filter:brightness(1.12)}
.ui-dlg--peligro .ui-dlg-si{background:var(--danger,#ef4444)}
.ui-dlg-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.ui-dlg,.ui-dlg-overlay{transition:none}.ui-dlg--peligro .ui-dlg-ico{animation:none}}

/* ===== Asistencia: métodos de ingreso ===== */
.asis-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.asis-badge--teclado{background:color-mix(in srgb,var(--warning,#f59e0b) 16%,transparent);color:var(--warning,#f59e0b)}
.asis-badge--tarjeta{background:color-mix(in srgb,var(--success,#22c55e) 16%,transparent);color:var(--success,#22c55e)}
.asis-info .asis-badge{padding:1px 8px;font-size:11px;margin-right:4px}
.asis-metodos{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.asis-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;cursor:pointer;font-size:14px;font-weight:600;color:var(--primary-dark);background:var(--glass-bg);border:1.5px solid var(--border,rgba(128,128,128,.25));transition:transform .15s,background .2s,border-color .2s}
.asis-chip b{padding:1px 8px;border-radius:999px;font-size:12px;background:var(--card-bg)}
.asis-chip:hover{transform:translateY(-1px)}
.asis-chip.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.asis-chip.hidden{display:none}
.asis-tarj-head{display:flex;align-items:center;gap:16px;margin:8px 0 18px;padding:16px 20px;border-radius:18px;background:var(--glass-bg);border:1px solid var(--border,rgba(128,128,128,.2))}
.asis-tarj-head h3{margin:0 0 2px;color:var(--primary-dark)}.asis-tarj-head p{margin:0;font-size:13px;color:var(--gray)}
.asis-tarj-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:24px;color:var(--success,#22c55e);background:color-mix(in srgb,var(--success,#22c55e) 16%,transparent);flex:none}
.asis-tarj-cfg{display:flex;align-items:center;gap:14px;margin-top:22px;padding:14px 16px;border-radius:16px;background:var(--glass-bg);border:1.5px dashed var(--accent)}
.asis-tarj-cfg__txt{flex:1}.asis-tarj-cfg__txt b{display:block;color:var(--primary-dark);margin-bottom:3px}.asis-tarj-cfg__txt span{font-size:12.5px;color:var(--gray);line-height:1.4}

/* X del editor: siempre visible y rojita */
.pe-top .portal-editor-modal__cerrar{background:#fee2e2;color:#e11d48;border:1.5px solid #fecdd3}
.pe-top .portal-editor-modal__cerrar:hover{background:#e11d48;color:#fff;border-color:#e11d48;transform:rotate(90deg)}
/* Pestaña Promo */
.pe-grupo{margin:14px 0;padding:12px 14px 4px;border:1px solid #e5e5ea;border-radius:14px;background:#fafafc}
.pe-grupo h5{margin:0 0 10px;font-size:13px;color:#6e6e73;text-transform:uppercase;letter-spacing:.05em}
.pe-grupo h5 i{margin-right:6px;color:#e11d9a}
.pe-switch{display:flex;align-items:center;gap:10px;font-weight:600;cursor:pointer;margin:6px 0}
.pe-switch input{display:none}
.pe-switch__t{width:42px;height:24px;border-radius:999px;background:#d2d2d7;position:relative;transition:background .2s;flex:none}
.pe-switch__t::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.pe-switch input:checked+.pe-switch__t{background:#22c55e}
.pe-switch input:checked+.pe-switch__t::after{transform:translateX(18px)}
.pe-seg{display:flex;gap:6px;flex-wrap:wrap}
.pe-seg button{flex:1;padding:8px 10px;border-radius:10px;border:1.5px solid #d2d2d7;background:#fff;color:#1d1d1f;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s}
.pe-seg button.active{border-color:#e11d9a;background:#fde7f4;color:#b8128a}
.pe-colores{display:flex;gap:12px}
.pe-colores button{width:34px;height:34px;border-radius:50%;background:var(--c);border:3px solid #fff;box-shadow:0 0 0 1.5px #d2d2d7;cursor:pointer;transition:transform .15s}
.pe-colores button:hover{transform:scale(1.12)}
.pe-colores button.active{box-shadow:0 0 0 3px var(--c)}
.pe-nota{display:block;margin-top:4px;color:#86868b}
#pePane-promo input[type=range]{width:100%;accent-color:#e11d9a}

/* ===== Editor de planes (tarjetas plegables) ===== */
.pe-planes-cab{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px}
.pe-planes-cnt{flex:none;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;background:#f0f0f5;color:#6e6e73}
#pcPlanes .pc-plan{margin:0 0 10px;padding:0;border:1.5px solid #e5e5ea;border-radius:14px;background:#fff;overflow:hidden;transition:border-color .2s,box-shadow .2s,opacity .2s,transform .2s;animation:pcIn .3s ease-out}
@keyframes pcIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#pcPlanes .pc-plan.saliendo{opacity:0;transform:scale(.96)}
#pcPlanes .pc-plan.abierto{border-color:#e11d9a;box-shadow:0 6px 20px -8px rgba(225,29,154,.35)}
#pcPlanes .pc-plan.es-popular:not(.abierto){border-color:#f5b301}
#pcPlanes .pc-plan__cab{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;user-select:none;color:#1d1d1f}
#pcPlanes .pc-plan__cab:focus-visible{outline:2px solid #e11d9a;outline-offset:-2px}
.pc-plan__num{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:12px;font-weight:700;color:#fff;background:linear-gradient(135deg,#e11d9a,#22b8e8)}
.pc-plan__tit{flex:1;min-width:0}.pc-plan__tit b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-plan__sub{font-size:12px;color:#86868b}
.pc-plan__pop{display:none;color:#f5b301}.pc-plan.es-popular .pc-plan__pop{display:block}
.pc-plan__acc{display:flex;gap:2px}
.pc-ib{width:28px;height:28px;border-radius:8px;border:none;background:transparent;color:#6e6e73;cursor:pointer;font-size:12px;transition:background .15s,color .15s}
.pc-ib:hover:not(:disabled){background:#f0f0f5;color:#1d1d1f}.pc-ib:disabled{opacity:.3;cursor:default}
.pc-ib.pc-del:hover{background:#fee2e2;color:#e11d48}
.pc-plan__flecha{font-size:12px;color:#86868b;transition:transform .25s}.pc-plan.abierto .pc-plan__flecha{transform:rotate(180deg)}
.pc-plan__cuerpo{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.pc-plan.abierto .pc-plan__cuerpo{grid-template-rows:1fr}
.pc-plan__cuerpo>*{overflow:hidden;min-height:0}
.pc-plan.abierto .pc-plan__cuerpo{padding:4px 14px 14px;border-top:1px solid #f0f0f5}
.pc-plan:not(.abierto) .pc-plan__cuerpo{padding:0}
.pc-fila2{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:8px}
.pe-switch--sm{font-size:13px}
.pe-agregar-plan{width:100%;padding:14px;border-radius:14px;border:2px dashed #d2d2d7;background:transparent;color:#6e6e73;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s}
.pe-agregar-plan:hover:not(:disabled){border-color:#e11d9a;color:#e11d9a;background:#fde7f4}
.pe-agregar-plan:disabled{opacity:.45;cursor:not-allowed}

/* ===== Hardware y Cobros: pestañas, tarjetas animadas, niveles ===== */
.hw-tabs{display:flex;justify-content:center;gap:6px;margin:18px auto 22px;padding:5px;width:fit-content;border-radius:999px;background:var(--card-bg);border:1px solid var(--border,rgba(128,128,128,.2))}
.hw-tab{padding:9px 22px;border:none;border-radius:999px;background:transparent;color:var(--gray);font-size:14.5px;font-weight:700;cursor:pointer;transition:background .25s,color .25s,transform .15s}
.hw-tab i{margin-right:7px}.hw-tab:hover{color:var(--primary-dark)}.hw-tab:active{transform:scale(.96)}
.hw-tab.active{background:var(--accent);color:#fff;box-shadow:0 6px 18px -6px var(--accent)}
.hw-vista{animation:hwIn .35s ease-out}
@keyframes hwIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hw-vista__barra{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
/* tarjetas de dispositivos */
.hw-card{opacity:0;animation:hwCard .5s calc(var(--d,0)*90ms) cubic-bezier(.34,1.56,.64,1) forwards;transition:transform .25s,box-shadow .25s,border-color .25s}
@keyframes hwCard{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.hw-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px -14px rgba(0,0,0,.5);border-color:var(--accent)}
.hw-card__icono{position:relative;transition:transform .3s}
.hw-card:hover .hw-card__icono{transform:scale(1.08) rotate(-4deg)}
.hw-card__icono--pulso::before,.hw-card__icono--pulso::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--accent);opacity:0;animation:hwRing 2.6s ease-out infinite}
.hw-card__icono--pulso::after{animation-delay:1.3s}
@keyframes hwRing{0%{transform:scale(.9);opacity:.7}100%{transform:scale(1.6);opacity:0}}
.hw-card__icono--giro i{animation:hwGiro 6s linear infinite}
@keyframes hwGiro{to{transform:rotate(360deg)}}
.hw-card__icono--print i{animation:hwPrint 3s ease-in-out infinite}
@keyframes hwPrint{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.hw-card__icono--qr i{animation:hwQr 3.2s steps(1) infinite}
@keyframes hwQr{0%,90%{opacity:1}95%{opacity:.35}}
.hw-estado::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;margin-right:7px;vertical-align:1px}
.hw-estado--ok::before{animation:hwDot 1.6s infinite}
@keyframes hwDot{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}50%{box-shadow:0 0 0 6px rgba(34,197,94,0)}}
.hw-estado--cargando::before{animation:hwBlink .8s infinite}
@keyframes hwBlink{50%{opacity:.2}}
/* Cobros */
.cobros-intro{display:flex;gap:14px;align-items:flex-start;padding:14px 18px;border-radius:16px;background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);margin-bottom:18px}
.cobros-intro>i{font-size:22px;color:var(--accent);margin-top:2px}.cobros-intro p{margin:0;font-size:14px;line-height:1.5;color:var(--primary-dark)}
.cobros-metodos{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:18px}
.cobros-metodo{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 10px;border-radius:18px;cursor:pointer;color:var(--primary-dark);background:var(--glass-bg);border:1.5px solid var(--border,rgba(128,128,128,.25));transition:transform .2s,border-color .2s,background .2s,box-shadow .2s}
.cobros-metodo i{font-size:26px;color:var(--gray);transition:color .2s,transform .3s}.cobros-metodo b{font-size:16px}.cobros-metodo span{font-size:12px;color:var(--gray)}
.cobros-metodo:hover{transform:translateY(-3px)}.cobros-metodo:hover i{transform:scale(1.15)}
.cobros-metodo.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);box-shadow:0 10px 26px -12px var(--accent)}
.cobros-metodo.active i{color:var(--accent)}
.cobros-cuerpo{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:20px;align-items:start}
.cobros-form{min-width:0}.cobros-sec{animation:hwIn .3s ease-out}.cobros-sec h4{margin:0 0 4px;font-size:19px;color:var(--primary-dark)}
.cobros-que{margin:0 0 14px;font-size:13.5px;line-height:1.5;color:var(--gray)}
.cobros-form label{display:block;margin:12px 0 5px;font-size:13px;font-weight:700;color:var(--primary-dark)}
.cobros-nivel{margin:0 0 12px;padding:14px;border-radius:16px;background:var(--card-bg);border:1px solid var(--border,rgba(128,128,128,.2))}
.cobros-nivel__cab{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px}
.cobros-nivel__cab>div{flex:1}.cobros-nivel__cab b{display:block;color:var(--primary-dark);font-size:14.5px}.cobros-nivel__cab small{display:block;color:var(--gray);font-size:12.5px;line-height:1.4;margin-top:2px}
.cobros-nivel__n{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff;background:var(--accent)}
.cobros-tag{flex:none;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;background:rgba(128,128,128,.18);color:var(--gray)}
.cobros-tag--ok{background:rgba(34,197,94,.16);color:#16a34a}
.cobros-qr-fila{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cobros-qr-fila img{width:84px;height:84px;object-fit:contain;background:#fff;border-radius:10px;padding:4px}
.cobros-subir{cursor:pointer}
.cobros-prev{position:sticky;top:10px;padding:16px;border-radius:18px;background:var(--glass-bg);border:1px dashed var(--accent)}
.cobros-prev__tit{font-size:13px;font-weight:700;color:var(--gray);margin-bottom:10px}.cobros-prev__tit i{color:var(--accent);margin-right:6px}
.cobros-prev__ventana{padding:16px;border-radius:14px;background:var(--card-bg);color:var(--primary-dark);font-size:14px;line-height:1.5;min-height:120px;text-align:center}
.cobros-prev__ventana .pago-qr{display:block;margin:8px auto;max-width:150px;border-radius:10px;background:#fff;padding:6px}
.cobros-vacio{display:block;color:var(--gray);font-style:italic;padding:14px 0}
@media(max-width:1000px){.cobros-cuerpo{grid-template-columns:1fr}.cobros-prev{position:static}.cobros-metodos{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.hw-card,.hw-vista,.cobros-sec{animation:none;opacity:1}.hw-card__icono i,.hw-card__icono::before,.hw-card__icono::after,.hw-estado::before{animation:none!important}}

/* ===== Asistencia: ocupa exactamente el alto disponible (sin barra de página) ===== */
#asistencia.module.active{display:flex;flex-direction:column;height:calc(calc(100 * var(--vh, 1vh)) - var(--app-header-h, 90px));overflow:hidden;padding-top:22px;padding-bottom:18px}
body.navmode-arriba #asistencia.module.active{height:calc(calc(100 * var(--vh, 1vh)) - var(--navbar-arriba-h, 62px) - 30px)}
#asistencia.module>.module-header{flex:0 0 auto}
#asistenciaVistaRegistro,#asistenciaVistaHistorial,#asistenciaVistaTarjetas{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column}
#asistenciaVistaRegistro.hidden,#asistenciaVistaHistorial.hidden,#asistenciaVistaTarjetas.hidden{display:none!important}
#asistenciaVistaRegistro .asis-stats{flex:0 0 auto;margin:0 0 12px}
#asistenciaVistaRegistro .asis-grid{flex:1 1 auto;height:auto;min-height:0}
#asistenciaVistaRegistro .asis-scanner{overflow:hidden}
#asistenciaVistaHistorial>.table-container,#asistenciaVistaTarjetas>.table-container{flex:1 1 auto;min-height:0;overflow-y:auto}
#asistenciaVistaHistorial>h3,#asistenciaVistaHistorial>div:not(.table-container){flex:0 0 auto}
@media (max-height:760px){#asistenciaVistaRegistro .asis-radar{width:110px;height:110px}.asis-finger{width:64px;height:64px;font-size:40px}.asis-stat{padding:9px 14px}.asis-stat b{font-size:21px}}

/* ===== Pago parcial (saldo) ===== */
.abono-bloque{margin:12px 0 4px;padding:10px 14px;border-radius:14px;background:var(--card-bg);border:1px dashed var(--border,rgba(128,128,128,.35))}
.abono-switch{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:600;font-size:14px;color:var(--primary-dark)}
.abono-switch input{display:none}
.abono-switch input:checked+.pe-switch__t{background:var(--warning,#f59e0b)}
.abono-switch .pe-switch__t{width:42px;height:24px;border-radius:999px;background:#d2d2d7;position:relative;flex:none;transition:background .2s}
.abono-switch .pe-switch__t::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.abono-switch input:checked+.pe-switch__t::after{transform:translateX(18px)}
.abono-campos{margin-top:12px;animation:hwIn .25s ease-out}
.abono-campos label{display:block;font-size:12.5px;font-weight:700;margin:8px 0 4px;color:var(--gray)}
.abono-fila{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.abono-saldo{padding:11px 14px;border-radius:12px;font-size:18px;font-weight:800;color:var(--danger,#ef4444);background:color-mix(in srgb,var(--danger,#ef4444) 10%,transparent)}
.abono-nota{display:block;margin-top:8px;color:var(--gray);line-height:1.4}
/* ===== Editor Socio de Oro ===== */
.oro-editor{padding:22px;border-radius:18px;margin-bottom:20px;background:linear-gradient(160deg,rgba(212,175,55,.12),transparent 60%);border:1.5px solid rgba(212,175,55,.45)}
.oro-editor__cab{display:flex;gap:16px;align-items:flex-start;margin-bottom:18px}
.oro-editor__cab>i{font-size:34px;color:#d4af37}.oro-editor__cab h3{margin:0 0 4px;color:var(--primary-dark)}.oro-editor__cab p{margin:0;font-size:14px;line-height:1.5;color:var(--gray)}
.oro-ed{display:flex;gap:16px;padding:16px;border-radius:16px;background:var(--card-bg);border:1px solid var(--border,rgba(128,128,128,.2))}
.oro-ed__num{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#3b2f00;background:linear-gradient(135deg,#f5d76e,#d4af37)}
.oro-ed__cuerpo{flex:1}.oro-ed__cuerpo h4{margin:0 0 2px;font-size:17px;color:var(--primary-dark)}.oro-ed__cuerpo p{margin:0 0 12px;font-size:13px;color:var(--gray)}
.oro-ed__campos{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.oro-ed__campos label{display:block;font-size:12px;font-weight:700;color:var(--gray);margin-bottom:4px}
.oro-ed__campos input{width:150px}.oro-ed__campos small{display:block;margin-top:3px;color:var(--gray);font-size:11.5px}
.oro-ed__flecha{text-align:center;margin:10px 0;font-size:13px;font-weight:700;color:#b8860b}.oro-ed__flecha i{margin-right:6px}
.oro-editor__nota{margin:16px 0 0;font-size:12.5px;color:var(--gray);line-height:1.5}.oro-editor__nota i{color:#d4af37;margin-right:6px}

/* ===== Indicadores de deuda ===== */
.deuda-ojo{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700;background:rgba(245,158,11,.18);color:#d97706;animation:deudaPulso 2.4s infinite}
.deuda-ojo.atrasada{background:rgba(239,68,68,.18);color:#dc2626}
@keyframes deudaPulso{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.45)}50%{box-shadow:0 0 0 6px rgba(245,158,11,0)}}
.ren-deuda{display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:14px 18px;border-radius:16px;background:rgba(245,158,11,.14);border:1.5px solid rgba(245,158,11,.5);color:var(--primary-dark)}
.ren-deuda>i{font-size:26px;color:#d97706}.ren-deuda>div{flex:1}.ren-deuda b{display:block}.ren-deuda span{font-size:13px;color:var(--gray)}
.ren-deuda.atrasada{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.55)}.ren-deuda.atrasada>i{color:#dc2626}
.ren-deuda.hidden{display:none}

/* ===== Lockers (configuración) ===== */
.lk-panel{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));padding:32px;border-radius:20px;border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);margin-bottom:30px}
.lk-cab{display:flex;gap:14px;align-items:center;margin-bottom:22px}
.lk-cab h3{margin:0;color:var(--primary-dark);font-size:22px}
.lk-cab p{margin:3px 0 0;color:var(--gray);font-size:13.5px}
.lk-cab__ico,.lk-fila__ico{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--accent),var(--primary-dark));color:#fff;font-size:20px;box-shadow:0 6px 16px rgba(0,0,0,.15)}
.lk-fila{display:flex;align-items:center;gap:14px;padding:16px;border-radius:16px;background:var(--glass-bg-soft);border:1px solid var(--glass-border);cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s}
.lk-fila:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.lk-fila__ico{width:42px;height:42px;font-size:17px;border-radius:12px}
.lk-fila__txt{flex:1;display:flex;flex-direction:column;gap:3px}
.lk-fila__txt b{font-size:15.5px}
.lk-fila__txt small{color:var(--gray);font-size:12.5px;line-height:1.4}
.lk-sw{position:relative;flex:none;width:48px;height:28px}
.lk-sw input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0;z-index:2;width:100%;height:100%}
.lk-sw i{position:absolute;inset:0;border-radius:99px;background:rgba(148,163,184,.45);transition:background .25s}
.lk-sw i::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .28s cubic-bezier(.34,1.56,.64,1)}
.lk-sw input:checked + i{background:var(--success,#22c55e)}
.lk-sw input:checked + i::after{transform:translateX(20px)}
.lk-sw input:focus-visible + i{outline:2px solid var(--accent);outline-offset:2px}
.lk-opciones{display:flex;flex-direction:column;gap:14px;margin-top:14px;animation:lkIn .3s ease-out}
@keyframes lkIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.lk-tarjeta{padding:16px;border-radius:16px;background:var(--glass-bg-soft);border:1px solid var(--glass-border)}
.lk-tarjeta__tit{font-weight:700;font-size:15.5px;margin-bottom:2px}
.lk-tarjeta small{color:var(--gray);font-size:12.5px}
.lk-cantidad{display:flex;gap:10px;margin-top:12px}
.lk-cantidad input{max-width:140px;font-size:18px;font-weight:700;text-align:center}
.lk-pie{display:flex;justify-content:flex-end}
@media (prefers-reduced-motion:reduce){.lk-opciones{animation:none}.lk-sw i::after{transition:none}}

/* ===== Bitácora más clara ===== */
.bt-leyenda{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:16px;font-size:12.5px;color:var(--gray)}
.bt-leyenda i{margin-right:4px;color:var(--accent)}
.bt-tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.bt-tj{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--glass-bg-soft);border:1px solid var(--glass-border)}
.bt-tj i{grid-row:1/3;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:16px;color:#fff;background:var(--accent)}
.bt-tj b{font-size:22px;line-height:1.1}
.bt-tj span{font-size:12px;color:var(--gray);line-height:1.25}
.bt-tj--cam i{background:#6366f1}.bt-tj--acc i{background:#16a34a}.bt-tj--nav i{background:#0891b2}
.bt-tabla thead th{position:sticky;top:0;z-index:1;background:var(--card-bg,#fff);font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--gray)}
.bt-tabla td{vertical-align:middle}
.bt-fila{transition:background .15s}
.bt-fila:hover{background:var(--glass-bg-soft)}
.bt-dia{display:block;font-size:13px}
.bt-quien{display:flex;align-items:center;gap:9px}
.bt-avatar{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--accent),var(--primary-dark))}
.bt-que{display:flex;align-items:center;gap:10px}
.bt-ac-txt{font-weight:600;line-height:1.3}
.bt-ic{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:13px;background:rgba(99,102,241,.14);color:#4f46e5}
.bt-ic--in{background:rgba(34,197,94,.16);color:#16a34a}
.bt-ic--out{background:rgba(148,163,184,.22);color:#475569}
.bt-ic--elim{background:rgba(239,68,68,.15);color:#dc2626}
.bt-ic--alerta{background:rgba(245,158,11,.2);color:#d97706}
.bt-ic--nav{background:rgba(6,182,212,.16);color:#0e7490}
.bt-ic--clic{background:rgba(148,163,184,.18);color:#64748b}
.bt-ic--edicion{background:rgba(168,85,247,.15);color:#9333ea}
.bt-mod{display:inline-block;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:600;background:var(--glass-bg-soft);border:1px solid var(--glass-border)}
.bt-nada{color:var(--gray)}
.pu-vacio i.fa-inbox{font-size:26px;opacity:.5;margin-bottom:6px}

/* Lockers v2: ancho completo, dos columnas */
.lk-panel{display:flex;flex-direction:column;gap:20px}
.lk-cab{margin-bottom:4px}
.lk-grid{display:grid;grid-template-columns:minmax(340px,1fr) minmax(340px,1fr);gap:20px;margin-top:6px;animation:lkIn .3s ease-out}
.lk-col{display:flex;flex-direction:column;gap:20px}
.lk-tarjeta{padding:22px}
.lk-fila{padding:20px}
.lk-cantidad{display:flex;gap:10px;margin:16px 0 14px;align-items:stretch}
.lk-cantidad input{flex:1;max-width:none;font-size:26px;font-weight:800;text-align:center;padding:10px}
.lk-mas{border:1px solid var(--glass-border);background:var(--glass-bg);color:inherit;border-radius:12px;padding:0 16px;font-weight:700;cursor:pointer;transition:transform .15s,border-color .2s}
.lk-mas:hover{border-color:var(--accent)}.lk-mas:active{transform:scale(.94)}
.lk-actualizar{width:100%}
.lk-guardar{align-self:stretch;padding:14px;font-size:16px}
.lk-previa{flex:1;display:flex;flex-direction:column;gap:6px}
.lk-previa__grid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(14px,1fr));gap:4px;margin-top:12px;max-height:340px;overflow:auto;align-content:start;padding:2px}
.lk-c{aspect-ratio:1;border-radius:4px;background:rgba(34,197,94,.35);border:1px solid rgba(34,197,94,.55)}
.lk-c--uso{background:rgba(239,68,68,.4);border-color:rgba(239,68,68,.6)}
.lk-leyenda{display:flex;gap:16px;font-size:12px;color:var(--gray);margin-top:10px}
.lk-pt{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px}
.lk-pt--libre{background:rgba(34,197,94,.6)}.lk-pt--uso{background:rgba(239,68,68,.6)}
@media (max-width:1000px){.lk-grid{grid-template-columns:1fr}}

/* Gestión de usuarios */
.us-cab{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.us-barra{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:18px}
.us-filtros{display:inline-flex;flex-wrap:wrap;gap:6px;padding:5px;border-radius:14px;background:var(--glass-bg-soft);border:1px solid var(--glass-border)}
.us-f{border:none;background:none;color:inherit;padding:9px 14px;border-radius:10px;font-weight:700;font-size:13.5px;cursor:pointer;display:inline-flex;gap:7px;align-items:center;transition:background .2s,transform .15s}
.us-f:hover{background:rgba(255,255,255,.06)}
.us-f:active{transform:scale(.97)}
.us-f b{font-size:11.5px;padding:1px 8px;border-radius:99px;background:rgba(148,163,184,.25)}
.us-f.is-on{background:var(--accent);color:#fff}
.us-f.is-on b{background:rgba(255,255,255,.28)}
.us-buscar{flex:1;min-width:200px;max-width:340px;margin-left:auto}
.us-tabla td{vertical-align:middle}
.us-cuenta{display:flex;align-items:center;gap:12px}
.us-avatar{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;background:linear-gradient(135deg,#64748b,#334155)}
.us-av--administrador{background:linear-gradient(135deg,#f59e0b,#b45309)}
.us-av--recepcionista{background:linear-gradient(135deg,var(--accent),var(--primary-dark))}
.us-av--entrenador{background:linear-gradient(135deg,#10b981,#047857)}
.us-nota{font-size:12px;color:var(--gray)}
.us-rol{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:99px;font-size:12.5px;font-weight:700;background:rgba(148,163,184,.2)}
.us-rol--administrador{background:rgba(245,158,11,.18);color:#f59e0b}
.us-rol--recepcionista{background:rgba(99,102,241,.2);color:#a5b4fc}
.us-rol--entrenador{background:rgba(16,185,129,.18);color:#34d399}
.us-perms{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px}
.us-perm{font-size:11px;padding:2px 9px;border-radius:7px;background:rgba(34,197,94,.15);color:#4ade80;font-weight:600}
.us-estado{color:#22c55e;font-weight:700;font-size:13px;white-space:nowrap}
.us-estado i{font-size:8px;margin-right:6px;vertical-align:middle}

/* Administrador remoto */
.us-rol--administrador-remoto{background:rgba(236,72,153,.18);color:#f472b6}
.us-av--administrador-remoto{background:linear-gradient(135deg,#ec4899,#7c3aed)}
.remoto-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;font-size:12.5px;font-weight:700;color:#fff;background:linear-gradient(135deg,#ec4899,#7c3aed);box-shadow:0 0 0 0 rgba(236,72,153,.6);animation:remotoPulso 2.2s infinite;white-space:nowrap}
@keyframes remotoPulso{0%{box-shadow:0 0 0 0 rgba(236,72,153,.55)}70%{box-shadow:0 0 0 10px rgba(236,72,153,0)}100%{box-shadow:0 0 0 0 rgba(236,72,153,0)}}
@media (prefers-reduced-motion:reduce){.remoto-pill{animation:none}}
/* Celular / tablet vertical con la cuenta remota */
@media (max-width:900px){
  body.rol-remoto .navmode-selector,
  body.rol-remoto #fondoSelector{display:none!important}
  body.rol-remoto header{flex-wrap:wrap;gap:8px;padding:10px 14px}
  body.rol-remoto .user-info{flex-wrap:wrap;gap:8px;width:100%;justify-content:space-between}
  body.rol-remoto #dashboardGrid{display:grid!important;grid-template-columns:1fr 1fr;gap:12px;padding:0 12px}
  body.rol-remoto #dashboardGrid .dashboard-card{min-height:150px}
  body.rol-remoto .table-container,
  body.rol-remoto .pu-tabla-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  body.rol-remoto .lk-grid,
  body.rol-remoto .cobros-grid{grid-template-columns:1fr}
  body.rol-remoto .us-barra{flex-direction:column;align-items:stretch}
}

.us-remoto{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;margin-bottom:14px;border-radius:12px;background:var(--glass-bg-soft);border:1px solid var(--glass-border);font-size:13px}
.us-remoto i{color:#ec4899;margin-right:6px}
.us-remoto b{word-break:break-all}
.us-remoto small{color:var(--gray)}

/* ================= Administrador remoto: menú de hamburguesa y diseño de celular ================= */
.remoto-hamb{display:none}
.remoto-drawer,.remoto-drawer-fondo{display:none}
@media (max-width:900px){
  html,body{overflow-x:hidden;max-width:100vw}
  body.rol-remoto #app{max-width:100vw;overflow-x:hidden}

  /* Barra superior: ☰  Gym System */
  body.rol-remoto header{display:flex!important;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;padding:10px 14px!important;min-height:58px}
  body.rol-remoto .remoto-hamb{display:inline-grid;place-items:center;flex:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--glass-border);background:var(--glass-bg-soft);color:inherit;font-size:18px;cursor:pointer}
  body.rol-remoto .remoto-hamb:active{transform:scale(.94)}
  body.rol-remoto header h1{font-size:19px!important;margin:0;white-space:nowrap}
  body.rol-remoto #userInfoBloque,
  body.rol-remoto .user-info,
  body.rol-remoto .navmode-selector,
  body.rol-remoto #fondoSelector,
  body.rol-remoto .app-navbar{display:none!important}

  /* Menú lateral */
  body.rol-remoto .remoto-drawer-fondo{display:block;position:fixed;inset:0;z-index:2999;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .25s}
  body.rol-remoto .remoto-drawer-fondo.abierto{opacity:1;pointer-events:auto}
  body.rol-remoto .remoto-drawer{display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;width:min(82vw,320px);z-index:3000;background:var(--card-bg,#12121c);color:var(--glass-text,inherit);border-right:1px solid var(--glass-border);box-shadow:8px 0 30px rgba(0,0,0,.35);transform:translateX(-102%);transition:transform .3s cubic-bezier(.32,.72,0,1)}
  html[data-theme="light"] body.rol-remoto .remoto-drawer{background:#fff;color:#111}
  body.rol-remoto .remoto-drawer.abierto{transform:none}
  .rd-cab{display:flex;align-items:center;gap:12px;padding:18px 16px;border-bottom:1px solid var(--glass-border)}
  .rd-avatar{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(135deg,#ec4899,#7c3aed)}
  .rd-quien{display:flex;flex-direction:column;min-width:0;flex:1}
  .rd-quien b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rd-quien small{color:var(--gray);font-size:12px}
  .rd-x{flex:none;width:36px;height:36px;border-radius:10px;border:none;background:transparent;color:inherit;font-size:18px;cursor:pointer}
  .rd-nav{flex:1;overflow-y:auto;padding:10px}
  .rd-item{display:flex;align-items:center;gap:14px;width:100%;padding:14px 12px;margin-bottom:4px;border:none;border-radius:14px;background:transparent;color:inherit;font-size:16px;font-weight:600;text-align:left;cursor:pointer}
  .rd-item > i:first-child{width:24px;text-align:center;color:var(--accent)}
  .rd-item span{flex:1}
  .rd-flecha{font-size:12px;opacity:.4}
  .rd-item.on{background:var(--glass-bg-soft);box-shadow:inset 0 0 0 1px var(--glass-border)}
  .rd-item:active{transform:scale(.98)}
  .rd-pie{padding:14px;border-top:1px solid var(--glass-border)}
  .rd-salir{width:100%;padding:13px;border-radius:12px;border:1px solid var(--glass-border);background:transparent;color:inherit;font-size:15px;font-weight:700;cursor:pointer}

  /* Panel de inicio: tarjetas que caben en pantalla */
  body.rol-remoto #dashboard{padding:14px 12px!important}
  body.rol-remoto #dashboard h2{font-size:24px!important;line-height:1.15;margin:6px 0 4px!important}
  body.rol-remoto .dashboard-title p{font-size:13.5px!important;margin-bottom:12px!important}
  body.rol-remoto .dashboard-container{padding:0!important;max-width:100%!important;width:100%!important}
  body.rol-remoto .dashboard-title{margin-bottom:10px!important}
  body.rol-remoto #dashboardGrid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;padding:0!important;margin:0!important;width:100%!important;max-width:100%!important}
  body.rol-remoto #dashboardGrid .dashboard-card{min-width:0!important;width:auto!important;min-height:132px;padding:16px 14px!important;border-radius:18px}
  body.rol-remoto #dashboardGrid .card-title{font-size:17px!important}
  body.rol-remoto #dashboardGrid .card-desc{font-size:12.5px!important;line-height:1.3}
  body.rol-remoto #dashboardGrid .card-icon{width:44px;height:44px;margin-bottom:6px}
  body.rol-remoto #dashboardResumenPanel{margin-top:14px!important;padding:12px!important}

  /* Pantallas internas */
  body.rol-remoto .module{padding:14px 12px!important}
  body.rol-remoto .module h2, body.rol-remoto .module h3{font-size:19px!important}
  body.rol-remoto .module [style*="grid-template-columns"],
  body.rol-remoto .lk-grid,.cobros-grid,.bvx-layout{grid-template-columns:1fr!important}
  body.rol-remoto .table-container,
  body.rol-remoto .pu-tabla-wrap,
  body.rol-remoto .bt-tabla-wrap,
  body.rol-remoto .us-tabla-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  body.rol-remoto table{font-size:13px}
  body.rol-remoto input,body.rol-remoto select,body.rol-remoto textarea{font-size:16px}
  body.rol-remoto .btn{min-height:42px}
  body.rol-remoto [id^="modal"] > div{max-width:96vw!important;max-height:92vh!important;overflow:auto}
  body.rol-remoto #btnFlotanteVolver{left:12px;bottom:14px}
  body.rol-remoto .remoto-pill,body.rol-remoto #indicadorHuellaFlotante{display:none!important}
}
/* (el encabezado con ☰ y flecha de volver ahora también se ve en Inventario) */

/* Acceso desde otro equipo: sin ingreso por huella */
body.acceso-externo #loginHuellaEnlace,body.acceso-externo #indicadorHuellaFlotante{display:none!important}

@media (max-width:900px){
  /* Resumen rápido: 4 mini-fichas 2x2 en vez de filas grandes */
  body.rol-remoto #dashboardResumenPanel{padding:10px!important;margin-top:12px!important;border-radius:16px!important}
  body.rol-remoto #dashboardResumenPanel h3{font-size:12.5px!important;margin-bottom:8px!important}
  body.rol-remoto .dashboard-kpis-compacto{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important;padding:0!important}
  body.rol-remoto .dashboard-kpi{border-right:none!important;padding:8px 10px!important;gap:8px!important;background:var(--glass-bg-soft);border-radius:12px;min-width:0}
  body.rol-remoto .dashboard-kpi .dashboard-kpi-icono{width:22px!important;height:22px!important;font-size:10px!important}
  body.rol-remoto .dashboard-kpi .dashboard-kpi-valor{font-size:14px!important;white-space:nowrap}
  body.rol-remoto .dashboard-kpi .dashboard-kpi-etiqueta{font-size:9px!important;letter-spacing:.02em;line-height:1.15}
  /* Menú de Configuración y demás cuadrículas de tarjetas */
  body.rol-remoto #configMenuGrid:not([style*="none"]){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;padding:0!important;margin-bottom:16px!important}
  body.rol-remoto #configMenuGrid .dashboard-card{min-width:0!important;min-height:112px;padding:14px 12px!important;border-radius:16px}
  body.rol-remoto #configMenuGrid .card-title{font-size:15px!important}
  body.rol-remoto #configMenuGrid .card-desc{font-size:11.5px!important;line-height:1.25}
  body.rol-remoto #configMenuGrid .card-icon{width:38px;height:38px}
  /* Botón de volver: abajo a la derecha, siempre a mano */
  body.rol-remoto #btnFlotanteVolver{position:fixed!important;top:auto!important;left:auto!important;right:14px!important;bottom:16px!important;z-index:1500;padding:11px 16px;border-radius:99px;font-size:14px;box-shadow:0 6px 20px rgba(0,0,0,.28)}
  /* Sin animaciones pesadas (la pantalla quedaba borrosa mientras aparecía) */
  body.rol-remoto .module.active,body.rol-remoto .dashboard-card{animation:none!important}
  body.rol-remoto .module,body.rol-remoto .module *{-webkit-backdrop-filter:none}
}
body.rol-remoto .solo-recepcion{display:none!important}

/* ===== Administrador remoto en celular: ajustes de cabeceras y botones flotantes ===== */
@media (max-width:900px){
  body.rol-remoto #btnAyudaTour{display:flex!important;width:44px!important;height:44px!important;font-size:17px!important;left:14px!important;bottom:16px!important}
  body.rol-remoto.pos-fullscreen #btnAyudaTour{display:none!important}
  body.rol-remoto .module-header--tabs-centro{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px!important}
  body.rol-remoto .module-header--tabs-centro h2{font-size:18px!important}
  body.rol-remoto .module-header--tabs-centro .inv-modo-tabs{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;width:100%!important;margin:0!important}
  body.rol-remoto .module-header--tabs-centro .inv-modo-tab{min-width:0!important;white-space:normal!important;font-size:12px!important;padding:8px 6px!important;justify-content:center;text-align:center}
  body.rol-remoto .module{padding-bottom:84px!important}
  body.rol-remoto #reportes .btn,body.rol-remoto #reportes button{max-width:100%}
}

/* ===== Remoto celular: Reportes compacto (menos scroll) ===== */
@media (max-width:900px){
  body.rol-remoto .reportes-controles{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;padding:10px!important;align-items:end}
  body.rol-remoto .reportes-controles .reportes-presets{grid-column:1/-1;display:flex!important;gap:8px}
  body.rol-remoto .reportes-controles .form-group{margin:0!important;min-width:0!important;width:auto!important}
  body.rol-remoto .reportes-controles label{font-size:11px!important;margin-bottom:3px!important}
  body.rol-remoto .reportes-controles .form-control{font-size:13px!important;padding:8px!important;height:auto!important;min-width:0!important;width:100%!important}
  body.rol-remoto .reportes-controles > .btn{grid-column:1/-1;width:100%;justify-content:center;padding:9px!important}
  body.rol-remoto .reportes-controles .reporte-filtro-item{grid-column:1/-1}
  body.rol-remoto .reportes-separador-v{display:none!important}
  body.rol-remoto .reportes-descargas-inline{grid-column:1/-1;display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;width:100%}
  body.rol-remoto .reportes-descargas-inline .report-dl-btn{width:100%!important;min-width:0!important;max-width:none!important}
  body.rol-remoto .reportes-descargas-inline .report-dl-btn__text{font-size:11.5px!important;white-space:normal;line-height:1.15;text-align:left;flex:1}
  body.rol-remoto #reportes th:nth-child(6),body.rol-remoto #reportes td:nth-child(6),
  body.rol-remoto #reportes th:nth-child(7),body.rol-remoto #reportes td:nth-child(7){display:none}
}

/* ===== Remoto celular: Estadísticas compacto ===== */
@media (max-width:900px){
  body.rol-remoto .estadisticas-kpis-compacto{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;padding:8px!important;margin:0 0 8px!important;overflow:visible!important}
  body.rol-remoto .estadisticas-kpis-compacto > *{min-width:0!important;padding:6px 8px!important;gap:8px!important}
  body.rol-remoto .estadisticas-kpis-compacto *{font-size:11px!important;line-height:1.15!important}
  body.rol-remoto .estadisticas-kpis-compacto [class*="num"],body.rol-remoto .estadisticas-kpis-compacto strong{font-size:15px!important;font-weight:700}
  body.rol-remoto #estadisticas .chart-container{height:230px!important;min-height:0!important}
  body.rol-remoto #estadisticas .estadisticas-card{padding:12px!important}
  body.rol-remoto #estadisticas .estadisticas-card h3{font-size:15px!important;margin-bottom:8px!important}
  body.rol-remoto .filtros-estadisticas{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:6px!important;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  body.rol-remoto .filtros-estadisticas .filtro-btn{flex:0 0 auto!important;white-space:nowrap;font-size:12px!important;padding:7px 10px!important}
  body.rol-remoto #estadisticas .search-bar{display:grid!important;grid-template-columns:1fr auto!important;gap:6px!important}
}

/* Remoto celular: KPIs de Estadísticas en una sola fila deslizable (ahorra altura) */
@media (max-width:900px){
  body.rol-remoto .estadisticas-kpis-compacto{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:6px!important;padding:6px!important;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  body.rol-remoto .estadisticas-kpis-compacto::-webkit-scrollbar{display:none}
  body.rol-remoto .estadisticas-kpis-compacto > *{flex:0 0 auto!important;min-width:112px!important}
  body.rol-remoto #estadisticas .search-bar .btn{padding:9px 12px!important;font-size:0!important}
  body.rol-remoto #estadisticas .search-bar .btn i{font-size:15px!important;margin:0!important}
}

/* ===== Remoto celular: Inventario compacto (sin scroll vertical largo) ===== */
@media (max-width:900px){
  body.rol-remoto #productosAdmin .inv-toolbar-row{display:flex!important;flex-direction:column!important;gap:6px!important;align-items:stretch!important}
  body.rol-remoto #invToolbar{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:4px!important;padding:2px 0 4px!important;scrollbar-width:none;width:100%!important}
  body.rol-remoto #invToolbar::-webkit-scrollbar{display:none}
  body.rol-remoto #invToolbar .inv-toolbar-btn{flex:0 0 auto!important;width:auto!important;min-width:54px!important;padding:6px 8px!important}
  body.rol-remoto #invToolbar .inv-toolbar-btn span{font-size:10px!important}
  body.rol-remoto .inv-toolbar-side{display:flex!important;flex-direction:column!important;gap:6px!important;width:100%!important;margin:0!important}
  body.rol-remoto #filtrosCantidadHeader{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:8px!important;scrollbar-width:none}
  body.rol-remoto #filtrosCantidadHeader .inv-filtro-chip{flex:0 0 auto!important}
  body.rol-remoto #productosAdmin .inv-layout{display:flex!important;flex-direction:column!important;gap:8px!important;height:auto!important}
  body.rol-remoto #productosAdmin .inv-sidebar{width:100%!important;max-width:none!important;height:auto!important;padding:6px 8px!important;border-radius:14px}
  body.rol-remoto #productosAdmin .inv-sidebar-title{display:none!important}
  body.rol-remoto #invSidebarTree{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:6px!important;max-height:none!important;scrollbar-width:none}
  body.rol-remoto #invSidebarTree .inv-sidebar-item{flex:0 0 auto!important;white-space:nowrap;padding:7px 12px!important;border-radius:20px!important;gap:8px}
  body.rol-remoto #productosAdmin .inv-footer-totales{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important;padding:8px!important}
  body.rol-remoto #productosAdmin .inv-footer-col--resumen{grid-column:1/-1;order:-1}
  body.rol-remoto #productosAdmin .pos-inv-table-scroll{max-height:46vh;overflow:auto}
  body.rol-remoto #btnAgregarProductoLateral{width:100%}
}

/* Inventario remoto: tabla simple (Producto · Precio · Cant. · Acciones) y barra mínima */
@media (max-width:900px){
  body.rol-remoto #productosAdmin table th:nth-child(1),body.rol-remoto #productosAdmin table td:nth-child(1),
  body.rol-remoto #productosAdmin table th:nth-child(2),body.rol-remoto #productosAdmin table td:nth-child(2),
  body.rol-remoto #productosAdmin table th:nth-child(4),body.rol-remoto #productosAdmin table td:nth-child(4),
  body.rol-remoto #productosAdmin table th:nth-child(5),body.rol-remoto #productosAdmin table td:nth-child(5),
  body.rol-remoto #productosAdmin table th:nth-child(8),body.rol-remoto #productosAdmin table td:nth-child(8),
  body.rol-remoto #productosAdmin table th:nth-child(9),body.rol-remoto #productosAdmin table td:nth-child(9){display:none!important}
  body.rol-remoto #productosAdmin table{width:100%!important;min-width:0!important}
  body.rol-remoto #productosAdmin table th,body.rol-remoto #productosAdmin table td{padding:8px 6px!important;font-size:12.5px!important}
  body.rol-remoto #productosAdmin .pos-inv-table-scroll{max-height:none!important;min-height:220px;overflow-x:hidden!important}
  body.rol-remoto #invToolbar .inv-toolbar-btn:not(:first-child):not([title*="Excel"]):not([title*="excel"]){display:none!important}
  body.rol-remoto #productosAdmin .pos-search-modes{display:none!important}
  body.rol-remoto #productosAdmin .inv-footer-totales .inv-footer-col:not(.inv-footer-col--resumen){display:none!important}
  body.rol-remoto #productosAdmin .inv-footer-totales{grid-template-columns:1fr!important}
}
@media (max-width:900px){
  body.rol-remoto #productosAdmin .pos-inv-table-scroll{min-height:340px!important}
  body.rol-remoto #productos.module.active{overflow-y:auto!important}
}

/* ===== Remoto celular: subsecciones de Configuración más compactas ===== */
@media (max-width:900px){
  body.rol-remoto .config-subpanel > div[style*="padding"]{padding:14px!important;border-radius:16px!important;margin-bottom:12px!important}
  body.rol-remoto .config-subpanel h3{font-size:18px!important}
  body.rol-remoto .config-subpanel p{font-size:12.5px!important}
  body.rol-remoto .cfg-planes-tabs,body.rol-remoto .config-subpanel .inv-modo-tabs{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:6px!important;scrollbar-width:none;justify-content:flex-start!important}
  body.rol-remoto .cfg-planes-tabs::-webkit-scrollbar,body.rol-remoto .config-subpanel .inv-modo-tabs::-webkit-scrollbar{display:none}
  body.rol-remoto .cfg-planes-tabs .inv-modo-tab,body.rol-remoto .config-subpanel .inv-modo-tabs .inv-modo-tab{flex:0 0 auto!important;white-space:nowrap!important}
}


/* ===== Inventario móvil · Administrador remoto (solo celular; escritorio intacto) ===== */
.invm{display:none}
@media (max-width:900px){
  body.rol-remoto #productosAdmin .invm{display:block}
  body.rol-remoto #productosAdmin .inv-toolbar-row,
  body.rol-remoto #productosAdmin .pos-inv-table-scroll,
  body.rol-remoto #productosAdmin .inv-footer-totales,
  body.rol-remoto #productosAdmin .pos-search-modes,
  body.rol-remoto #productosAdmin .pos-inv-search .btn-info,
  body.rol-remoto #productosAdmin .inv-sidebar-title{display:none!important}
  body.rol-remoto #productosAdmin .inv-sidebar{background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
  body.rol-remoto #productosAdmin .pos-inv-search{padding:0!important;margin:0 0 8px!important;background:none!important;border:0!important}
  body.rol-remoto #productosAdmin .pos-inv-search input{width:100%!important;border-radius:14px!important;padding:12px 14px!important;font-size:15px!important}
  .invm-resumen{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 8px}
  .invm-resumen>div{background:var(--card-bg,rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:7px 4px;text-align:center;min-width:0}
  .invm-resumen b{display:block;font-size:14px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .invm-resumen span{display:block;font-size:10px;opacity:.7;margin-top:1px}
  .invm-resumen .warn b{color:#f5a524}.invm-resumen .bad b{color:#f31260}
  .invm-chips{display:flex!important;gap:6px;margin:0 0 8px;overflow-x:auto;scrollbar-width:none}
  .invm-chips::-webkit-scrollbar{display:none}
  .invm-chip{flex:0 0 auto;border:1px solid rgba(255,255,255,.18);background:transparent;color:inherit;border-radius:20px;padding:7px 14px;font-size:13px;font-weight:600}
  .invm-chip.on{background:var(--accent,#E619A8);border-color:var(--accent,#E619A8);color:#fff}
  .invm-lista{padding-bottom:84px}
  .invm-card{display:flex;align-items:center;gap:10px;padding:10px;margin-bottom:8px;border-radius:16px;background:var(--card-bg,rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.1);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .invm-card:active{transform:scale(.985)}
  .invm-thumb{flex:0 0 52px;height:52px;border-radius:12px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:26px;overflow:hidden}
  .invm-thumb img{width:100%;height:100%;object-fit:cover}
  .invm-info{flex:1 1 auto;min-width:0}
  .invm-nombre{font-weight:700;font-size:14.5px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .invm-meta{font-size:11.5px;opacity:.65;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .invm-precio{font-weight:800;font-size:14px;margin-top:2px}
  .invm-est{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:10px;margin-left:4px;vertical-align:middle}
  .invm-est.ok{background:rgba(23,201,100,.18);color:#17c964}.invm-est.warn{background:rgba(245,165,36,.2);color:#f5a524}.invm-est.bad{background:rgba(243,18,96,.2);color:#f31260}
  .invm-stock{flex:0 0 auto;display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.07);border-radius:22px;padding:3px}
  .invm-stock button{width:32px;height:32px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:inherit;font-size:12px;display:flex;align-items:center;justify-content:center}
  .invm-stock button:active{background:var(--accent,#E619A8);color:#fff}
  .invm-stock b{min-width:26px;text-align:center;font-size:15px}
  .invm-stock b.warn{color:#f5a524}.invm-stock b.bad{color:#f31260}
  .invm-vacio{text-align:center;padding:40px 10px;opacity:.6}
  .invm-vacio i{font-size:34px;margin-bottom:8px}
  .invm-fab{position:fixed!important;right:16px;bottom:18px;width:56px;height:56px;border-radius:50%;border:0;background:var(--accent,#E619A8);color:#fff;font-size:22px;box-shadow:0 8px 22px rgba(0,0,0,.35);z-index:60;align-items:center;justify-content:center}
  body.rol-remoto #productosAdmin.hidden .invm-fab{display:none!important}
  body.rol-remoto #productosAdmin:not(.hidden) .invm-fab{display:flex!important}
}


/* ===== Navegación móvil del Administrador remoto: flecha de volver, menú por sección, Inicio con resumen ===== */
.remoto-back{display:none}
@media (max-width:900px){
  body.rol-remoto .remoto-back{display:none;flex:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--glass-border);background:var(--glass-bg-soft);color:inherit;font-size:17px;cursor:pointer;place-items:center}
  body.rol-remoto.remoto-en-modulo .remoto-back{display:inline-grid}
  body.rol-remoto.remoto-en-modulo .remoto-back:active{transform:scale(.94)}
  body.rol-remoto #btnFlotanteVolver{display:none!important}
  /* Las pestañas de cada sección pasan al menú ☰ */
  body.rol-remoto .module-header .inv-modo-tabs{display:none!important}
  body.rol-remoto #productosAdmin .inv-sidebar{display:none!important}
  body.rol-remoto #productos .module-header h2{font-size:18px!important}
  /* Inicio: sin los 4 botones (están en ☰); queda el resumen */
  body.rol-remoto #dashboardResumenPanel{display:block!important;margin-top:14px!important}
  body.rol-remoto #dashboardStats{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}
  body.rol-remoto .dashboard-kpi{min-width:0}
  /* Menú ☰ por sección */
  .rd-grupo{font-size:11px;text-transform:uppercase;letter-spacing:.08em;opacity:.55;padding:12px 12px 4px;font-weight:700}
  .rd-item.rd-sub{padding:11px 12px;font-size:15px;font-weight:600}
  .rd-item.rd-sub span{white-space:normal}
  /* Tarjetas de producto: sin cortes */
  .invm-est{white-space:nowrap}
  .invm-precio{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;white-space:nowrap}
  .invm-meta{max-width:100%}
  .invm-fab{background:linear-gradient(135deg,#ec4899,#7c3aed)!important}
  /* Formulario Agregar/Editar producto: botones sin cortarse */
  body.rol-remoto #modalAgregarProducto .modal-content,body.rol-remoto #modalEditarProducto .modal-content{width:94vw!important;max-width:94vw!important;padding:16px!important}
  body.rol-remoto #modalAgregarProducto .form-grid,body.rol-remoto #modalEditarProducto .form-grid{grid-template-columns:1fr!important;gap:10px!important}
  body.rol-remoto #modalAgregarProducto .modal-content > div[style*="justify-content: center"],
  body.rol-remoto #modalEditarProducto .modal-content > div[style*="justify-content: center"]{flex-direction:column-reverse!important;gap:10px!important;position:sticky;bottom:0;background:var(--card-bg,#12121c);padding:10px 0 2px}
  body.rol-remoto #modalAgregarProducto .modal-content > div[style*="justify-content: center"] .btn,
  body.rol-remoto #modalEditarProducto .modal-content > div[style*="justify-content: center"] .btn{width:100%!important;padding:13px!important;justify-content:center;white-space:nowrap}
}
html[data-theme="light"] body.rol-remoto #modalAgregarProducto .modal-content > div[style*="justify-content: center"]{background:#fff}


/* ===== Remoto móvil · ronda 3: Inicio con botones + resumen chico, ☰ a la izquierda y volver a la derecha ===== */
.remoto-logout-dash{display:none}
@media (max-width:900px){
  /* Barra superior: ☰ (izq) · Gym System · ← (der). En el Inicio no hay ☰ ni flecha. */
  body.rol-remoto header{flex-wrap:nowrap!important}
  body.rol-remoto .remoto-hamb{order:0}
  body.rol-remoto header h1{order:1;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
  body.rol-remoto .remoto-back{order:2;margin-left:auto}
  body.rol-remoto:not(.remoto-en-modulo) .remoto-hamb{display:none!important}
  /* Inicio */
  body.rol-remoto #dashboard .dashboard-title{margin-bottom:6px!important}
  body.rol-remoto #dashboard .dashboard-title h2{font-size:17px!important}
  body.rol-remoto #dashboard .dashboard-title p{font-size:12px!important;margin:2px 0 0!important}
  body.rol-remoto #dashboardGrid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;padding:0!important}
  body.rol-remoto #dashboardGrid .dashboard-card{min-height:112px!important;padding:12px 8px!important}
  body.rol-remoto #dashboardGrid .card-title{font-size:15px!important}
  body.rol-remoto #dashboardGrid .card-desc{display:none}
  body.rol-remoto #dashboardResumenPanel{padding:8px 10px!important;margin-top:10px!important;border-radius:14px!important}
  body.rol-remoto #dashboardResumenPanel h3{font-size:11px!important;margin:0 0 6px!important;opacity:.8}
  body.rol-remoto #dashboardStats{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important}
  body.rol-remoto #dashboardStats .dashboard-kpi{flex-direction:column;align-items:center;text-align:center;padding:6px 2px!important;gap:3px!important}
  body.rol-remoto #dashboardStats .dashboard-kpi-icono{width:18px!important;height:18px!important;font-size:9px!important}
  body.rol-remoto #dashboardStats .dashboard-kpi-valor{font-size:12px!important}
  body.rol-remoto #dashboardStats .dashboard-kpi-etiqueta{font-size:8px!important}
  body.rol-remoto .remoto-logout-dash{display:block;margin:14px auto 70px;background:none;border:0;color:inherit;opacity:.65;font-size:13px;text-decoration:underline;cursor:pointer}
  /* Estadísticas: los 6 datos de arriba caben sin deslizar (3 x 2) */
  body.rol-remoto .estadisticas-kpis-compacto{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;overflow:visible!important;gap:6px!important;padding:6px!important}
  body.rol-remoto .estadisticas-kpis-compacto > *{min-width:0!important;flex-direction:column!important;align-items:center!important;text-align:center!important;padding:6px 2px!important;gap:3px!important}
}

@media (max-width:900px){
  body.rol-remoto #productos .btn-back{display:none!important}
  /* Productos (catálogo): sin filtros de stock; el "+" solo ahí */
  body.rol-remoto #productosAdmin.invm-catalogo .invm-chips{display:none!important}
  body.rol-remoto #productosAdmin:not(.invm-catalogo) .invm-fab{display:none!important}
  .invm-acc button.peligro{color:#f31260}
  .invm-acc{gap:6px}
}
@media (max-width:900px){
  body.rol-remoto .invm-chips{flex:0 0 auto;min-height:38px;align-items:center;padding:2px 0 4px}
  body.rol-remoto .invm-chip{line-height:1.2;padding:7px 14px;white-space:nowrap}
}

@media (max-width:900px){ .rd-cnt{font-style:normal;font-size:12px;opacity:.7;background:var(--glass-bg-soft);border-radius:10px;padding:2px 8px} }
@media (max-width:900px){
  body.rol-remoto .estadisticas-kpis-compacto{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:4px!important;padding:6px 4px!important}
  body.rol-remoto .estadisticas-kpis-compacto > *{padding:5px 1px!important}
  body.rol-remoto .estadisticas-kpis-compacto *{font-size:9.5px!important}
  body.rol-remoto .estadisticas-kpis-compacto [class*="num"],body.rol-remoto .estadisticas-kpis-compacto strong{font-size:13px!important}
}

@media (max-width:900px){
  /* Reportes: las descargas viven en el menú ☰; la tabla gana espacio y letra más grande */
  body.rol-remoto .reportes-descargas-inline,body.rol-remoto .reportes-separador-v{display:none!important}
  body.rol-remoto #reportes table{font-size:13.5px!important;min-width:560px}
  body.rol-remoto #reportes table th{font-size:12px!important;padding:10px 8px!important;white-space:nowrap}
  body.rol-remoto #reportes table td{font-size:13.5px!important;padding:11px 8px!important}
  body.rol-remoto #reportes .table-container{max-height:none!important}
  body.rol-remoto #reportes .reporte-resumen-item{font-size:13px!important}
}


/* ===== Inventario (control de stock) vs Productos (catálogo) ===== */
#productosAdmin.inv-modo-inventario .col-cat{display:none!important}
#productosAdmin.inv-modo-catalogo .col-inv{display:none!important}
.inv-alerta{display:none;align-items:center;gap:10px;margin:0 0 10px;padding:9px 14px;border-radius:12px;background:rgba(255,159,10,.14);border:1px solid rgba(255,159,10,.4);font-size:13.5px}
.inv-alerta.on{display:flex}
.inv-alerta i{color:var(--warning)}
.inv-alerta span{flex:1}
.inv-alerta button{border:0;border-radius:20px;padding:5px 14px;font-weight:700;font-size:12.5px;background:var(--warning);color:#111;cursor:pointer}
.inv-stock-num{display:inline-block;min-width:34px;text-align:center;font-weight:800;font-size:15px;padding:2px 8px;border-radius:9px}
.inv-stock-num.ok{background:rgba(52,199,89,.16);color:var(--success)}
.inv-stock-num.warn{background:rgba(255,159,10,.2);color:var(--warning)}
.inv-stock-num.bad{background:rgba(255,59,48,.2);color:var(--danger)}
.inv-chip{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:12px;white-space:nowrap}
.inv-chip.ok{background:rgba(52,199,89,.16);color:var(--success)}
.inv-chip.warn{background:rgba(255,159,10,.2);color:var(--warning)}
.inv-chip.bad{background:rgba(255,59,48,.2);color:var(--danger)}
.inv-acc-fila{display:flex;gap:6px;align-items:center;flex-wrap:nowrap}
.inv-acc{border:1px solid rgba(128,128,128,.3);background:transparent;color:inherit;border-radius:9px;padding:6px 10px;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.inv-acc:hover{background:rgba(128,128,128,.14)}
.inv-acc--in{color:var(--success);border-color:rgba(52,199,89,.5)}
.inv-acc--out{color:var(--danger);border-color:rgba(255,59,48,.5)}
.inv-acc--del{color:var(--danger)}
.inv-toolbar-btn--in i{color:var(--success)}.inv-toolbar-btn--out i{color:var(--danger)}

/* Modales de movimientos */
.modal-content--mov{max-width:460px;width:94vw;max-height:92vh;overflow-y:auto}
.modal-content--hist{max-width:640px;width:94vw;max-height:92vh;display:flex;flex-direction:column}
.mov-tipos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.mov-tipo{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px;border-radius:12px;border:2px solid rgba(128,128,128,.28);background:transparent;color:inherit;cursor:pointer;text-align:center}
.mov-tipo i{font-size:20px}.mov-tipo b{font-size:13px}.mov-tipo small{font-size:10.5px;opacity:.65;line-height:1.2}
.mov-tipo.on{border-color:var(--primary);background:rgba(230,25,168,.12)}
.mov-actual{padding:9px 12px;border-radius:10px;background:rgba(128,128,128,.12);margin-bottom:12px;font-size:14px}
.mov-qty{display:flex;gap:8px;align-items:stretch}
.mov-qty button{width:52px;border-radius:12px;border:1px solid rgba(128,128,128,.35);background:rgba(128,128,128,.12);color:inherit;font-size:24px;cursor:pointer}
.mov-qty input{flex:1;min-width:0;text-align:center;font-size:26px;font-weight:800;border-radius:12px;padding:10px;border:1px solid rgba(128,128,128,.35);background:transparent;color:inherit}
.mov-rapidos{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.mov-rapidos button{border:1px solid rgba(128,128,128,.35);background:transparent;color:inherit;border-radius:18px;padding:5px 13px;font-weight:700;cursor:pointer}
.mov-resultado{min-height:22px;margin:10px 0;padding:0;font-size:14px}
.mov-resultado:not(:empty){padding:9px 12px;border-radius:10px;background:rgba(128,128,128,.12)}
.mov-resultado.ok{background:rgba(52,199,89,.15)}.mov-resultado.warn{background:rgba(255,159,10,.18)}.mov-resultado.bad{background:rgba(255,59,48,.18)}
.mov-acciones{display:flex;gap:10px;margin-top:12px}.mov-acciones .btn{flex:1}
#movBtnGuardar:disabled{opacity:.45;cursor:not-allowed}
.mov-filtros{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.mov-filtros--una{grid-template-columns:1fr}
.mov-hist-lista{flex:1;min-height:120px;max-height:50vh;overflow-y:auto}
.mov-fila{display:flex;align-items:center;gap:12px;padding:9px 4px;border-bottom:1px solid rgba(128,128,128,.2)}
.mov-fila-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mov-fila-info b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mov-fila-info span{font-size:12.5px}.mov-fila-info small{font-size:11.5px;opacity:.65}
.mov-fila-delta{flex:0 0 52px;text-align:center;font-weight:800;font-size:16px;padding:6px 0;border-radius:10px}
.mov-fila-delta.pos{background:rgba(52,199,89,.16);color:var(--success)}
.mov-fila-delta.neg{background:rgba(255,59,48,.16);color:var(--danger)}
.mov-fila-delta.cero{background:rgba(128,128,128,.15)}
.mov-tag{font-style:normal;font-weight:700;font-size:11px;padding:1px 8px;border-radius:9px;background:rgba(128,128,128,.2);margin-right:4px}
.mov-tag.entrada,.mov-tag.inicial{background:rgba(52,199,89,.2);color:var(--success)}
.mov-tag.merma,.mov-tag.salida{background:rgba(255,59,48,.2);color:var(--danger)}
.mov-tag.ajuste,.mov-tag.conteo{background:rgba(255,159,10,.22);color:var(--warning)}
.mov-vacio{text-align:center;padding:30px 10px;opacity:.65}
.mov-conteo-inp{flex:0 0 90px;text-align:center;font-weight:700}

@media (max-width:900px){
  .mov-filtros{grid-template-columns:1fr 1fr}
  .modal-content--mov,.modal-content--hist{width:100vw;max-width:100vw;max-height:100dvh;border-radius:20px 20px 0 0;align-self:flex-end}
  .mov-qty input{font-size:30px}
  .mov-hist-lista{max-height:none}
  .invm-card--stock{flex-wrap:wrap}
  .invm-stockbox{flex:0 0 auto;text-align:center;border-radius:12px;padding:4px 12px;background:rgba(128,128,128,.14)}
  .invm-stockbox b{display:block;font-size:22px;line-height:1.1}
  .invm-stockbox span{font-size:10px;opacity:.7}
  .invm-stockbox.warn{background:rgba(255,159,10,.2)}.invm-stockbox.warn b{color:#f5a524}
  .invm-stockbox.bad{background:rgba(255,59,48,.2)}.invm-stockbox.bad b{color:#f31260}
  .invm-stockbox.ok b{color:#17c964}
  .invm-rapido{flex:1 0 100%;display:flex;gap:8px;margin-top:2px}
  .invm-rapido button{flex:1;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:inherit;border-radius:12px;padding:10px 6px;font-weight:700;font-size:13.5px}
  .invm-rapido button.hist{flex:0 0 48px}
  .invm-rapido .in{color:#17c964}.invm-rapido .out{color:#f31260}
  .invm-acc button.peligro{color:#f31260}
}

/* ===== Ajustes escritorio: acciones, botones de barra y ventanas de stock ===== */
#productosAdmin.inv-modo-catalogo:not(.inv-sorting) .col-acc{display:none!important}
.inv-toolbar-btn--edit i{color:#0A84FF!important}
.inv-toolbar-btn--del i{color:#FF3B30!important}
.mov-tipos{display:none!important}

@media (min-width:901px){
  /* Agregar / Quitar / Corregir: ventana cómoda con letras y campos grandes */
  .modal-content--mov{max-width:720px;width:720px;padding:30px 34px;overflow:visible;
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;row-gap:6px;align-content:start}
  .modal-content--mov .modal-header,.modal-content--mov .mov-acciones{grid-column:1/-1}
  .modal-content--mov .modal-header{text-align:left;margin-bottom:10px}
  .modal-content--mov .modal-header h3{font-size:24px}
  .modal-content--mov .modal-header p{margin:4px 0 0;font-size:15px;opacity:.75}
  .modal-content--mov label{font-size:15px;font-weight:700;margin-bottom:8px;display:block}
  .modal-content--mov label small{font-weight:400;opacity:.65;font-size:13px}
  .modal-content--mov .form-control{font-size:16px;padding:13px 14px;height:auto;width:100%;min-height:50px}
  .modal-content--mov .form-group{margin-bottom:10px}
  .modal-content--mov .mov-g-prod{grid-column:1/-1;grid-row:2}
  .modal-content--mov .mov-g-act{grid-column:1/-1;grid-row:3;font-size:15px;padding:12px 16px}
  .modal-content--mov .mov-g-cant{grid-column:1;grid-row:4/6;background:rgba(128,128,128,.08);border-radius:16px;padding:18px;margin-bottom:0}
  .modal-content--mov .mov-g-motivo{grid-column:2;grid-row:4}
  .modal-content--mov .mov-g-costo{grid-column:2;grid-row:5}
  .modal-content--mov .mov-g-res{grid-column:1/-1;grid-row:6;margin:8px 0;font-size:15px}
  .modal-content--mov .mov-acciones{justify-content:flex-end;margin-top:8px}
  .modal-content--mov .mov-acciones .btn{flex:0 0 auto;min-width:200px;padding:13px 22px;font-size:16px}
  .mov-qty input{font-size:36px;padding:8px}
  .mov-qty button{width:56px;font-size:26px}
  .mov-rapidos button{font-size:14px;padding:6px 15px}

  /* Historial y conteo: ventana grande */
  .modal-content--hist{max-width:980px;width:min(980px,92vw);height:min(760px,88vh);padding:26px 30px}
  .modal-content--hist .modal-header{text-align:left}
  .modal-content--hist .modal-header h3{font-size:24px}
  .modal-content--hist .modal-header p{font-size:15px;opacity:.75}
  .mov-hist-lista{max-height:none}
  .mov-filtros{grid-template-columns:2fr 1.3fr 1fr 1fr}
  .mov-filtros .form-control{font-size:15px;padding:11px 12px}
  .modal-content--hist .mov-acciones{justify-content:flex-end}
  .modal-content--hist .mov-acciones .btn{flex:0 0 auto;min-width:180px;font-size:15px;padding:12px 20px}
}

/* Contar todo */
.conteo-pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:6px 0 14px}
.conteo-pasos>div{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:rgba(128,128,128,.1);font-size:13.5px;line-height:1.35}
.conteo-pasos b{flex:0 0 26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px}
.conteo-barra{display:flex;gap:16px;align-items:center;margin-bottom:10px}
.conteo-barra .form-control{flex:1;font-size:15px;padding:11px 14px}
.conteo-solo{display:flex;gap:8px;align-items:center;font-size:14px;white-space:nowrap;cursor:pointer}
.conteo-cab,.conteo-fila{display:grid;grid-template-columns:minmax(0,2.4fr) 1fr 1.2fr 1.2fr;gap:14px;align-items:center;padding:0 10px}
.conteo-cab{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;opacity:.65;padding-bottom:6px;border-bottom:2px solid rgba(128,128,128,.25)}
.conteo-cab span:not(:first-child),.conteo-sis{text-align:center}
.conteo-fila{padding-top:9px;padding-bottom:9px;border-bottom:1px solid rgba(128,128,128,.18)}
.conteo-nom{display:flex;flex-direction:column;min-width:0}
.conteo-nom b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conteo-nom small{opacity:.6;font-size:12px}
.conteo-sis{font-size:18px;font-weight:700}
.conteo-inp{width:100%;text-align:center;font-size:18px;font-weight:700;padding:9px 6px;border-radius:10px;border:1.5px solid rgba(128,128,128,.4);background:transparent;color:inherit}
.conteo-inp:focus{border-color:var(--primary);outline:none}
.conteo-dif{display:block;text-align:center;font-weight:700;font-size:13.5px;padding:5px 8px;border-radius:10px}
.conteo-dif.nada{opacity:.4}
.conteo-dif.ok{background:rgba(52,199,89,.16);color:var(--success)}
.conteo-dif.mas{background:rgba(10,132,255,.16);color:#0A84FF}
.conteo-dif.menos{background:rgba(255,59,48,.16);color:var(--danger)}
@media (max-width:900px){
  .conteo-pasos{grid-template-columns:1fr}
  .conteo-barra{flex-direction:column;align-items:stretch;gap:8px}
  .conteo-cab,.conteo-fila{grid-template-columns:minmax(0,2fr) .8fr 1fr;gap:8px}
  .conteo-cab span:last-child,.conteo-fila>div:last-child{display:none}
}

/* ===== Administrador remoto (escritorio): panel principal centrado y parejo ===== */
@media (min-width:901px){
  body.rol-remoto #dashboard.active .dashboard-container{
    max-width:1080px;width:100%;margin:0 auto;padding:30px 24px;
    min-height:calc(calc(100 * var(--vh, 1vh)) - var(--app-header-h, 90px) - 40px);
    display:flex;flex-direction:column;justify-content:center;align-items:stretch}
  body.rol-remoto #dashboardGrid{
    display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding:0;width:100%;justify-content:stretch}
  body.rol-remoto #dashboardGrid .dashboard-card{width:100%;min-height:170px;box-sizing:border-box}
  body.rol-remoto #dashboardResumenPanel{
    width:100%;box-sizing:border-box;margin:28px 0 0!important;padding:20px 24px!important}
  body.rol-remoto #dashboardResumenPanel h3{justify-content:center;margin-bottom:16px!important}
  body.rol-remoto .dashboard-kpis-compacto{
    display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:0}
  body.rol-remoto .dashboard-kpi{justify-content:center;padding:4px 12px;border-right:1px solid var(--glass-border)}
  body.rol-remoto .dashboard-kpi:last-child{border-right:none}
  body.rol-remoto .dashboard-kpi .dashboard-kpi-icono{width:38px;height:38px;font-size:16px}
  body.rol-remoto .dashboard-kpi .dashboard-kpi-valor{font-size:22px}
  body.rol-remoto .dashboard-kpi .dashboard-kpi-etiqueta{font-size:12px}
}

/* Remoto escritorio: el panel cabe en pantalla, sin barra de desplazamiento */
@media (min-width:901px){
  body.rol-remoto #dashboard.active{overflow:hidden!important}
  body.rol-remoto #dashboard.active .dashboard-container{
    box-sizing:border-box;min-height:0!important;
    height:calc(calc(100 * var(--vh, 1vh)) - var(--app-header-h, 76px) - 6px);
    padding:16px 24px 24px;overflow:hidden}
  body.rol-remoto #dashboard .dashboard-title{margin-bottom:26px}
}

/* Remoto escritorio: subir el bloque para que el aire de arriba y abajo sea parejo */
@media (min-width:901px){
  body.rol-remoto #dashboard.active .dashboard-container{padding:16px 24px clamp(60px,19vh,200px)}
}

/* Remoto escritorio: adaptación a otros tamaños de pantalla */
@media (min-width:901px) and (max-width:1180px){
  body.rol-remoto #dashboardGrid{gap:14px}
  body.rol-remoto #dashboardGrid .dashboard-card{min-height:150px;padding:20px 16px}
  body.rol-remoto #dashboardGrid .card-title{font-size:18px}
  body.rol-remoto #dashboardGrid .card-desc{font-size:13px}
  body.rol-remoto .dashboard-kpi{gap:8px;padding:4px 6px}
  body.rol-remoto .dashboard-kpi .dashboard-kpi-valor{font-size:18px}
  body.rol-remoto .dashboard-kpi .dashboard-kpi-etiqueta{font-size:10.5px}
  body.rol-remoto .dashboard-kpi .dashboard-kpi-icono{width:32px;height:32px;font-size:14px}
}
@media (min-width:1600px){
  body.rol-remoto #dashboard.active .dashboard-container{max-width:1280px}
  body.rol-remoto #dashboardGrid .dashboard-card{min-height:190px}
  body.rol-remoto #dashboard .dashboard-title h2{font-size:42px}
}
@media (min-width:901px) and (max-height:760px){
  body.rol-remoto #dashboard .dashboard-title{margin-bottom:16px}
  body.rol-remoto #dashboard .dashboard-title h2{font-size:30px}
  body.rol-remoto #dashboardGrid .dashboard-card{min-height:130px;padding:16px}
  body.rol-remoto #dashboardResumenPanel{margin-top:16px!important;padding:14px 20px!important}
}

/* ===== Administrador remoto (celular): la barra de arriba nunca se va =====
   Antes la página entera se podía desplazar unos píxeles (el módulo medía todo el alto
   de la pantalla MÁS la barra), y al llegar al final de una lista el desplazamiento "se
   pasaba" a la página y la barra con el ☰ se escondía unos segundos. Ahora la página no
   se mueve: solo se desplaza el contenido de cada pantalla. */
@media (max-width:900px){
  html:has(body.rol-remoto){overflow:hidden!important;height:100%}
  body.rol-remoto{overflow:hidden!important;height:calc(100 * var(--vh, 1vh))}
  body.rol-remoto #app{flex-direction:column;height:calc(100 * var(--vh, 1vh));overflow:hidden}
  body.rol-remoto #app[style*="block"]{display:flex!important}
  body.rol-remoto #app > header{position:relative!important;flex:0 0 auto;top:auto}
  body.rol-remoto #app > .module.active,
  body.rol-remoto.pos-fullscreen #productos.module.active{
    flex:1 1 auto;min-height:0;height:auto!important;max-height:none!important;
    overflow-y:auto!important;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
}

/* ===== Administrador remoto (celular): ventanas flotantes como "hoja" desde abajo =====
   Ancho exacto de la pantalla (nada se sale a la derecha), título fijo arriba con una X
   para cerrar sin tener que bajar hasta el final, y botones de tamaño normal. */
.modal-x{display:none}
@media (max-width:900px){
  body.rol-remoto .modal-overlay{align-items:flex-end!important;justify-content:center!important;padding:0!important}
  body.rol-remoto .modal-overlay > .modal-content{
    box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important;
    max-height:calc(92 * var(--vh, 1vh))!important;margin:0!important;
    border-radius:22px 22px 0 0!important;padding:0 16px 18px!important;
    overflow-x:hidden!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    animation:hojaSube .25s cubic-bezier(.32,.72,0,1)}
  @keyframes hojaSube{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
  body.rol-remoto .modal-overlay > .modal-content > .modal-header,
  body.rol-remoto .modal-overlay > .modal-content > .modal-sticky-cab{
    position:sticky;top:0;z-index:5;background:var(--card-bg,#fff);
    margin:0 -16px 12px!important;padding:16px 58px 12px 16px!important;text-align:left!important;
    border-bottom:1px solid var(--border,rgba(128,128,128,.25))}
  body.rol-remoto .modal-overlay > .modal-content > .modal-header h3{font-size:18px!important;margin:0!important;line-height:1.25}
  body.rol-remoto .modal-overlay > .modal-content > .modal-header p{font-size:13px!important;margin:4px 0 0!important;line-height:1.35;opacity:.75}
  body.rol-remoto .modal-x{display:flex;align-items:center;justify-content:center;position:absolute;right:12px;top:12px;
    width:38px;height:38px;border-radius:50%;border:0;background:rgba(128,128,128,.2);color:inherit;font-size:17px;cursor:pointer;z-index:6}
  body.rol-remoto .modal-x:active{transform:scale(.92)}
  body.rol-remoto .modal-overlay .btn{min-height:44px;padding:10px 14px!important;font-size:15px!important;box-sizing:border-box}
  body.rol-remoto .modal-overlay .form-control,body.rol-remoto .modal-overlay select,body.rol-remoto .modal-overlay input{max-width:100%;box-sizing:border-box}
  body.rol-remoto .modal-overlay .form-control{padding:12px 14px;font-size:16px;min-height:46px}
  body.rol-remoto .modal-overlay .form-group{margin-bottom:12px}
  body.rol-remoto .modal-overlay .form-group label{font-size:14px;margin-bottom:6px;display:block}
  body.rol-remoto .mov-acciones{display:flex;gap:10px;margin-top:8px}
  body.rol-remoto .mov-acciones .btn{flex:1 1 0;min-width:0}
  body.rol-remoto .mov-filtros{grid-template-columns:1fr 1fr;gap:8px}
  body.rol-remoto .mov-filtros>*{min-width:0;width:100%;box-sizing:border-box}
  body.rol-remoto .mov-filtros--una{grid-template-columns:1fr}
  body.rol-remoto .mov-qty{gap:8px}
  body.rol-remoto .mov-qty button{width:52px;flex:0 0 auto}
  body.rol-remoto .mov-qty input{min-width:0;flex:1 1 auto;width:100%;box-sizing:border-box}
  body.rol-remoto .mov-hist-lista{max-height:none;overflow:visible}
  body.rol-remoto .mov-fila-info b{white-space:normal}
}

@media (max-width:900px){
  /* Historial y Contar todo: hoja alta, la lista se desplaza dentro y los botones quedan siempre a la vista */
  body.rol-remoto .modal-overlay > .modal-content.modal-content--hist{
    display:flex!important;flex-direction:column;height:calc(92 * var(--vh, 1vh))!important;overflow:hidden!important}
  body.rol-remoto .modal-content--hist > *{flex:0 0 auto}
  body.rol-remoto .modal-content--hist > .mov-hist-lista{flex:1 1 auto;min-height:0;overflow-y:auto!important;-webkit-overflow-scrolling:touch}
  body.rol-remoto .modal-content--hist > .mov-acciones{padding-top:10px;border-top:1px solid var(--border,rgba(128,128,128,.25));margin-top:0}
  body.rol-remoto .conteo-barra{flex-direction:column;align-items:stretch;gap:8px}
  body.rol-remoto .conteo-pasos{display:none}
  body.rol-remoto .conteo-cab,body.rol-remoto .conteo-fila{grid-template-columns:minmax(0,1.6fr) .7fr .9fr;gap:8px;padding:0 4px}
  body.rol-remoto .conteo-cab span:last-child,body.rol-remoto .conteo-fila > div:last-child{display:none}
  body.rol-remoto .conteo-inp{font-size:17px;padding:9px 4px}
}

/* ===== Remoto móvil · ronda 4: Inicio compacto, tema + cuenta arriba ===== */
.remoto-hdr-acc,.remoto-cuenta-menu{display:none}
@media (max-width:900px){
  body.rol-remoto .remoto-logout-dash{display:none!important}
  /* Tema + cuenta a la derecha de la barra (solo en el Inicio) */
  body.rol-remoto:not(.remoto-en-modulo) .remoto-hdr-acc{display:flex;order:3;margin-left:auto;gap:8px;flex:none}
  body.rol-remoto.remoto-en-modulo .remoto-hdr-acc{display:none}
  body.rol-remoto:not(.remoto-en-modulo) header h1{flex:0 1 auto}
  .remoto-hdr-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--glass-border);background:var(--glass-bg-soft);color:inherit;font-size:22px;cursor:pointer;padding:0}
  .remoto-hdr-btn:active{transform:scale(.94)}
  .remoto-hdr-btn .fondo-swatch{width:22px;height:22px}
  body.rol-remoto .remoto-cuenta-menu{display:block;position:fixed;top:64px;right:12px;z-index:100001;min-width:220px;padding:12px;border-radius:16px;background:var(--card-bg,#12121c);color:var(--glass-text,inherit);border:1px solid var(--glass-border);box-shadow:0 18px 40px rgba(8,8,20,.35);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.96);transform-origin:top right;transition:opacity .18s,transform .25s,visibility 0s linear .25s}
  html[data-theme="light"] body.rol-remoto .remoto-cuenta-menu{background:#fff;color:#111}
  body.rol-remoto .remoto-cuenta-menu.abierto{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .25s,visibility 0s}
  .rcm-user{display:flex;align-items:center;gap:10px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--glass-border)}
  .rcm-user>i{font-size:30px;opacity:.8}
  .rcm-user b{display:block;font-size:15px}
  .rcm-user small{opacity:.65;font-size:12px}
  .rcm-salir{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px;border:0;border-radius:12px;background:rgba(255,59,48,.14);color:#ff453a;font-weight:600;font-size:14px;cursor:pointer}
  html[data-theme="light"] .rcm-salir{color:#d70015}

  /* Inicio más compacto */
  body.rol-remoto #dashboard.active .dashboard-container{padding:10px 12px 20px!important}
  body.rol-remoto #dashboard .dashboard-title{margin-bottom:8px!important}
  body.rol-remoto #dashboard .dashboard-title h2{font-size:16px!important;margin:0}
  body.rol-remoto #dashboard .dashboard-title p{font-size:11.5px!important;opacity:.75}
  body.rol-remoto #dashboardGrid{gap:8px!important}
  body.rol-remoto #dashboardGrid .dashboard-card{min-height:0!important;height:auto!important;padding:10px 12px!important;border-radius:14px;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:10px;text-align:left}
  body.rol-remoto #dashboardGrid .card-icon{width:34px!important;height:34px!important;margin:0!important;flex:none;border-radius:10px}
  body.rol-remoto #dashboardGrid .card-icon__front{border-radius:10px}
  body.rol-remoto #dashboardGrid .card-icon__front i{font-size:15px!important}
  body.rol-remoto #dashboardGrid .card-title{font-size:13.5px!important;line-height:1.2;margin:0;min-width:0;overflow-wrap:anywhere}
  body.rol-remoto #dashboardResumenPanel{margin-top:8px!important;padding:8px!important}
  body.rol-remoto #dashboardStats .dashboard-kpi-valor{font-size:13px!important}
}

/* ===== Remoto móvil · ronda 5: Inicio y Configuración equilibrados (llenan la pantalla) ===== */
@media (max-width:900px){
  body.rol-remoto #dashboard.active .dashboard-container{min-height:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding:12px 14px 24px!important}
  /* pocas tarjetas (≤6): grandes, en vertical, repartidas */
  body.rol-remoto #dashboardGrid:not(:has(.dashboard-card:nth-child(7))){grid-auto-rows:clamp(120px,23vh,210px);gap:12px!important}
  body.rol-remoto #dashboardGrid:not(:has(.dashboard-card:nth-child(7))) .dashboard-card{flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center;gap:12px;padding:12px 8px!important;border-radius:20px;height:100%!important}
  body.rol-remoto #dashboardGrid:not(:has(.dashboard-card:nth-child(7))) .card-icon{width:52px!important;height:52px!important;border-radius:15px}
  body.rol-remoto #dashboardGrid:not(:has(.dashboard-card:nth-child(7))) .card-icon__front{border-radius:15px}
  body.rol-remoto #dashboardGrid:not(:has(.dashboard-card:nth-child(7))) .card-icon__front i{font-size:22px!important}
  body.rol-remoto #dashboardGrid:not(:has(.dashboard-card:nth-child(7))) .card-title{font-size:15px!important;overflow-wrap:normal;word-break:normal;white-space:nowrap}
  /* 5-6 tarjetas: algo más bajas para no obligar a deslizar */
  body.rol-remoto #dashboardGrid:has(.dashboard-card:nth-child(5)):not(:has(.dashboard-card:nth-child(7))){grid-auto-rows:clamp(100px,14vh,140px)}
  /* muchas tarjetas: compactas en fila; el título nunca se corta */
  body.rol-remoto #dashboardGrid:has(.dashboard-card:nth-child(7)) .card-title{overflow-wrap:normal;word-break:normal;font-size:13px!important}
  body.rol-remoto #dashboardGrid:has(.dashboard-card:nth-child(7)) .dashboard-card{padding:10px 8px!important;gap:8px}
  body.rol-remoto #dashboardResumenPanel{margin-top:14px!important;padding:10px!important}
}

/* Configuración (remoto móvil): tarjetas uniformes y centradas */
@media (max-width:900px){
  body.rol-remoto #configMenuGrid:not([style*="none"]){grid-auto-rows:146px;gap:10px!important;padding:2px 12px 16px!important;margin:0!important}
  body.rol-remoto #configMenuGrid .dashboard-card{height:100%!important;min-height:0!important;box-sizing:border-box;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center;gap:5px;padding:8px 8px!important;border-radius:18px;overflow:hidden}
  body.rol-remoto #configMenuGrid .card-icon{width:40px!important;height:40px!important;margin:0!important;flex:none}
  body.rol-remoto #configMenuGrid .card-icon__front i{font-size:17px!important}
  body.rol-remoto #configMenuGrid .card-title{font-size:13.5px!important;line-height:1.2;margin:0;overflow-wrap:normal;word-break:normal}
  body.rol-remoto #configMenuGrid .card-desc{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:10.5px!important;line-height:1.25;margin:0;opacity:.7}
}

/* ===== Remoto móvil · ronda 6: ☰ contextual (aviso de cambio) y paneles de Configuración ===== */
.rd-ctx{display:none}
@media (max-width:900px){
  body.rol-remoto .rd-ctx{display:block;margin:0 16px 4px;padding:8px 12px;border-radius:10px;background:var(--glass-bg-soft,rgba(255,255,255,.06));border:1px solid var(--glass-border);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.9}
  body.rol-remoto .rd-ctx::before{content:"Menú de: ";font-weight:500;opacity:.6;text-transform:none;letter-spacing:0}
  /* aviso: el botón ☰ parpadea con un anillo cuando su contenido cambia */
  body.rol-remoto .remoto-hamb{position:relative}
  body.rol-remoto .remoto-hamb.hamb-cambio{animation:hambPulso 1.2s ease-out;border-color:var(--primary,#f03dbe)}
  body.rol-remoto .remoto-hamb.hamb-cambio::after{content:"";position:absolute;inset:-5px;border-radius:16px;border:2px solid var(--primary,#f03dbe);animation:hambAnillo 1.2s ease-out forwards;pointer-events:none}
  @keyframes hambPulso{0%{transform:scale(1)}20%{transform:scale(1.18);background:var(--primary,#f03dbe);color:#fff}60%{transform:scale(.97)}100%{transform:scale(1)}}
  @keyframes hambAnillo{0%{opacity:.9;transform:scale(.9)}100%{opacity:0;transform:scale(1.5)}}
  /* los selectores que ahora viven en el ☰ no se repiten en la pantalla */
  body.rol-remoto .config-subpanel .cfg-planes-tabs,
  body.rol-remoto .config-subpanel .inv-modo-tabs.cfg-planes-tabs,
  body.rol-remoto #bvxTabs,
  body.rol-remoto .ticket-tab-btn,
  body.rol-remoto #tarjetaPlanSelector,
  body.rol-remoto .paginaweb-subtab-btn,
  body.rol-remoto #btContenido .bt-chips{display:none!important}
}
@media (prefers-reduced-motion:reduce){body.rol-remoto .remoto-hamb.hamb-cambio,body.rol-remoto .remoto-hamb.hamb-cambio::after{animation:none}}

/* ===== Remoto móvil · paneles de Configuración: tamaños ===== */
@media (max-width:900px){
  body.rol-remoto .config-subpanel > div{padding:14px 12px!important;border-radius:16px!important;margin-bottom:14px!important;box-sizing:border-box;max-width:100%}
  body.rol-remoto .config-subpanel h3{font-size:17px!important;margin-bottom:6px!important;line-height:1.25}
  body.rol-remoto .config-subpanel > div > p{font-size:12.5px!important;margin-bottom:14px!important;line-height:1.4}
  body.rol-remoto .config-subpanel .btn{padding:10px 14px;font-size:13.5px;border-radius:12px}
  body.rol-remoto .config-subpanel .form-control{padding:10px 12px;font-size:14px;min-width:0;max-width:100%;box-sizing:border-box}
  body.rol-remoto .config-subpanel label{font-size:12.5px}

  /* Planes y precios: cada plan es una tarjeta (sin tabla ancha) */
  body.rol-remoto #contenedorConfigPlanes > div{padding:12px!important;border-radius:14px!important;margin-bottom:12px!important}
  body.rol-remoto #contenedorConfigPlanes > div > div:first-of-type{gap:8px!important}
  body.rol-remoto #contenedorConfigPlanes > div > div:first-of-type > input{flex:1 1 100%!important;min-width:0!important;font-size:15px!important}
  body.rol-remoto #contenedorConfigPlanes > div > div:first-of-type > .btn{flex:1 1 calc(50% - 4px);justify-content:center;padding:9px 8px;font-size:12.5px;white-space:nowrap}
  body.rol-remoto #contenedorConfigPlanes table,
  body.rol-remoto #contenedorConfigPlanes tbody{display:block;width:100%!important;min-width:0!important;max-width:100%}
  body.rol-remoto #contenedorConfigPlanes > div > div[style*="overflow-x"]{overflow-x:visible!important}
  body.rol-remoto #contenedorConfigPlanes thead{display:none}
  body.rol-remoto #contenedorConfigPlanes tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%;box-sizing:border-box;gap:8px;padding:12px;margin:0 0 10px;border:1px solid var(--glass-border)!important;border-radius:14px;background:var(--glass-bg-soft,rgba(255,255,255,.04))}
  body.rol-remoto #contenedorConfigPlanes td{display:block;padding:0!important;min-width:0;border:0!important}
  body.rol-remoto #contenedorConfigPlanes td[colspan]{grid-column:1/-1}
  body.rol-remoto #contenedorConfigPlanes td:nth-child(1),
  body.rol-remoto #contenedorConfigPlanes td:nth-child(4){grid-column:1/-1}
  body.rol-remoto #contenedorConfigPlanes td:nth-child(5){grid-column:1/-1;display:flex!important;gap:8px;white-space:normal!important}
  body.rol-remoto #contenedorConfigPlanes td:nth-child(5) .btn{flex:1;justify-content:center}
  body.rol-remoto #contenedorConfigPlanes td:not([colspan]):nth-child(-n+4)::before{display:block;font-size:11px;font-weight:700;opacity:.65;margin-bottom:4px;text-transform:uppercase;letter-spacing:.03em}
  body.rol-remoto #contenedorConfigPlanes td:not([colspan]):nth-child(1)::before{content:"Nombre del plan"}
  body.rol-remoto #contenedorConfigPlanes td:not([colspan]):nth-child(2)::before{content:"Precio (Bs)"}
  body.rol-remoto #contenedorConfigPlanes td:not([colspan]):nth-child(3)::before{content:"Duración (días)"}
  body.rol-remoto #contenedorConfigPlanes td:not([colspan]):nth-child(4)::before{content:"Descripción"}
  body.rol-remoto #contenedorConfigPlanes td input,
  body.rol-remoto #contenedorConfigPlanes td textarea,
  body.rol-remoto #contenedorConfigPlanes .form-group input{width:100%!important;min-width:0!important;box-sizing:border-box}
  body.rol-remoto #contenedorConfigPlanes > div > div:last-of-type{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px!important;padding:12px!important}
  body.rol-remoto #contenedorConfigPlanes > div > div:last-of-type .form-group{margin:0!important;min-width:0!important;width:auto!important}
  body.rol-remoto #contenedorConfigPlanes > div > div:last-of-type .form-group:first-child,
  body.rol-remoto #contenedorConfigPlanes > div > div:last-of-type .form-group:nth-child(4),
  body.rol-remoto #contenedorConfigPlanes > div > div:last-of-type > .btn{grid-column:1/-1}
  body.rol-remoto #formNuevaCategoriaPlan{padding:12px!important;gap:8px!important}
  body.rol-remoto #formNuevaCategoriaPlan .form-group{min-width:0!important;flex:1 1 100%!important}
  body.rol-remoto #formNuevaCategoriaPlan .btn{width:100%;justify-content:center}
}

/* ===== Remoto móvil · editor de tarjeta: tarjeta arriba (fija) y controles abajo ===== */
@media (max-width:900px){
  body.rol-remoto #tarjetaEditorModalBody > div{display:flex!important;flex-direction:column-reverse;align-items:stretch!important;gap:10px!important}
  body.rol-remoto #tarjetaEditorModalBody > div > div:nth-child(2){position:sticky;top:-4px;z-index:3;padding:6px 0 8px!important;background:var(--card-bg,#12121c);border-bottom:1px solid var(--glass-border)}
  html[data-theme="light"] body.rol-remoto #tarjetaEditorModalBody > div > div:nth-child(2){background:#fff}
  body.rol-remoto #tarjetaEditorModalBody .tarjeta-editor-flip-frame{max-width:300px}
  body.rol-remoto #tarjetaEditorControles{min-height:0!important}
  body.rol-remoto #modalEditorTarjeta .modal-content > div[style*="display:flex"]:first-of-type{flex-wrap:nowrap}
  body.rol-remoto #modalEditorTarjeta .tarjeta-cara-tab-btn{flex:1;justify-content:center;padding:9px 6px;font-size:13px}
  body.rol-remoto #tarjetaEditorScrollArea{padding:2px 2px 8px!important}
  body.rol-remoto .tarjeta-editor-campo{margin-bottom:12px}
  body.rol-remoto .tarjeta-editor-campo label{font-size:13px!important}
  body.rol-remoto .tarjeta-editor-campo select,body.rol-remoto .tarjeta-editor-campo input[type="text"]{font-size:14px!important;padding:9px 10px!important;width:100%;box-sizing:border-box}
  body.rol-remoto .tarjeta-editor-campo input[type="color"]{width:44px!important;height:34px!important}
  body.rol-remoto #modalEditorTarjeta .modal-content > div:last-child{margin-top:8px!important;padding-top:10px!important;gap:8px!important}
  body.rol-remoto #modalEditorTarjeta .modal-content > div:last-child .btn{flex:1 1 100%;justify-content:center}
  /* logo de pantalla de bienvenida: botón de archivo a lo ancho */
  body.rol-remoto .bv-logo{flex-direction:column!important;align-items:stretch!important;gap:8px}
  body.rol-remoto .bv-logo__acciones{width:100%;min-width:0}
  body.rol-remoto .bv-logo__acciones input[type="file"]{width:100%;max-width:100%;box-sizing:border-box;font-size:12px}
}
@media (max-width:900px){
  body.rol-remoto #modalEditorTarjeta .modal-content{height:calc(90 * var(--vh,1vh))!important;max-height:calc(90 * var(--vh,1vh))!important}
}

/* ===== Remoto móvil, ronda 7: ventanas a pantalla completa (sin hueco arriba), usuarios del portal en tarjetas, vista previa de ticket ===== */
@media (max-width:900px){
  body.rol-remoto .modal-overlay > .modal-content,
  body.rol-remoto [id^="modal"].modal-overlay > div{
    max-height:calc(100 * var(--vh,1vh))!important;
    border-radius:18px 18px 0 0!important}
  body.rol-remoto .modal-overlay > .modal-content--ticket-editor,
  body.rol-remoto #modalEditorTarjeta .modal-content,
  body.rol-remoto #modalEditorTicket .modal-content,
  body.rol-remoto .modal-overlay > .rc-modal,
  body.rol-remoto .modal-overlay > .modal-content--hist{
    height:calc(100 * var(--vh,1vh))!important;max-height:calc(100 * var(--vh,1vh))!important;
    border-radius:0!important}
  body.rol-remoto .modal-overlay{padding-top:0!important}
  body.rol-remoto .modal-overlay > .modal-content > .modal-header,
  body.rol-remoto .modal-overlay > .modal-content > .modal-sticky-cab{padding-top:calc(14px + env(safe-area-inset-top,0px))!important}

  /* Vista previa del ticket: ocupa el ancho disponible */
  body.rol-remoto #ticketThumbFrame{--th:calc(62 * var(--vh,1vh));height:var(--th)!important;width:min(100%,calc(var(--th) * .82))!important;margin:0 auto}

  /* Usuarios del portal: tarjetas */
  body.rol-remoto .pu-tabla-wrap{overflow:visible!important}
  body.rol-remoto .pu-tabla,body.rol-remoto .pu-tabla tbody{display:block!important;width:100%!important;min-width:0!important}
  body.rol-remoto .pu-tabla thead{display:none!important}
  body.rol-remoto .pu-tabla tr{display:grid!important;grid-template-columns:1fr auto;gap:6px 10px;padding:12px 14px;margin-bottom:10px;
    border:1px solid var(--border,rgba(128,128,128,.25));border-radius:14px;background:var(--card-bg,rgba(255,255,255,.04))}
  body.rol-remoto .pu-tabla td{display:block!important;border:0!important;padding:0!important;min-width:0;overflow-wrap:anywhere}
  body.rol-remoto .pu-tabla td:nth-child(1){grid-column:1;grid-row:1}
  body.rol-remoto .pu-tabla td:nth-child(5){grid-column:2;grid-row:1;text-align:right}
  body.rol-remoto .pu-tabla td:nth-child(2){grid-column:1 / -1;grid-row:2}
  body.rol-remoto .pu-tabla td:nth-child(3){grid-column:1;grid-row:3;font-size:13px}
  body.rol-remoto .pu-tabla td:nth-child(4){grid-column:2;grid-row:3;text-align:right;font-size:13px}
  body.rol-remoto .pu-tabla td:nth-child(6){display:none!important}
  body.rol-remoto .pu-tabla td.pu-vacio{grid-column:1 / -1}
  body.rol-remoto .pu-barra{flex-wrap:wrap;gap:8px}
  body.rol-remoto .pu-barra > *{flex:1 1 100%;min-width:0}
  body.rol-remoto .pu-resumen{display:flex;flex-wrap:wrap;gap:6px}
}

/* Editor de página pública: pestaña Música */
.pe-musica-lista{display:flex;flex-direction:column;gap:8px;margin:10px 0 12px}
.pe-musica-fila{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;border:1.5px solid rgba(128,128,140,.3)}
.pe-musica-fila.activa{border-color:#22c55e;background:rgba(34,197,94,.08)}
.pe-musica-play{flex:none;width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;background:linear-gradient(135deg,#e619a8,#14c6de);color:#fff;display:grid;place-items:center}
.pe-musica-nombre{flex:1;min-width:0;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pe-musica-usar{flex:none;padding:7px 14px;border-radius:999px;border:1.5px solid #e619a8;background:transparent;color:#e619a8;font-weight:700;font-size:13px;cursor:pointer}
.pe-musica-usar:hover{background:#e619a8;color:#fff}
.pe-musica-badge{flex:none;font-size:12px;font-weight:700;color:#22c55e}

/* Insignia «PRINCIPAL» de la primera promo (editor de Promo) */
.pi-principal{display:none;margin-right:6px;padding:2px 8px;border-radius:999px;background:linear-gradient(90deg,#e11d9a,#22b8e8);color:#fff;font-size:10px;font-weight:800;letter-spacing:.05em;white-space:nowrap;align-self:center}

/* ===== Cobros y Pagos: sección protegida + selector de pantalla del QR ===== */
.cob-lock{max-width:560px;margin:30px auto;text-align:center;padding:28px 24px;border-radius:20px;background:var(--card-bg);border:1px solid var(--border,rgba(128,128,128,.2))}
.cob-lock__icono{width:72px;height:72px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;font-size:30px;color:#fff;background:var(--accent);box-shadow:0 12px 30px -10px var(--accent)}
.cob-lock h4{margin:0 0 8px;font-size:20px;color:var(--primary-dark)}
.cob-lock p{margin:0 0 18px;font-size:14px;line-height:1.55;color:var(--gray)}
.cob-lock__estado{margin-top:14px;font-size:12.5px;color:var(--gray)}
.cob-sesion{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;justify-content:space-between;padding:10px 16px;border-radius:14px;margin-bottom:14px;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);color:var(--primary-dark);font-size:13.5px}
.cob-sesion i{color:#16a34a;margin-right:6px}.cob-sesion__mot{flex:1;min-width:160px;color:var(--gray);font-size:12.5px}
.cob-alerta{padding:12px 16px;border-radius:14px;margin-bottom:14px;background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.5);color:var(--primary-dark);font-size:13.5px}
.cob-alerta--rojo{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.6)}
.cob-codigo{font-family:ui-monospace,Consolas,monospace;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--primary-dark);margin-bottom:8px}
.cob-lbl{display:block;margin:12px 0 5px;font-size:13px;font-weight:700;color:var(--primary-dark)}
.cob-error{min-height:18px;margin-top:10px;font-size:13px;font-weight:600;color:#ef4444}
.cob-huella{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--gray-light);color:var(--gray);font-size:13.5px;transition:background .25s,color .25s}
.cob-huella i{font-size:26px}
.cob-huella[data-estado=listo],.cob-huella[data-estado=leyendo]{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.cob-huella[data-estado=listo] i{animation:cobLat 1s ease-in-out infinite}
.cob-huella[data-estado=ok]{color:#16a34a;background:rgba(34,197,94,.14)}
.cob-huella[data-estado=error]{color:#ef4444;background:rgba(239,68,68,.12)}
@keyframes cobLat{50%{transform:scale(1.18)}}
.cob-audit{text-align:left;max-height:420px;overflow:auto;padding:8px}
.cob-aud{padding:8px 10px;margin-bottom:6px;border-radius:10px;background:rgba(128,128,128,.1);font-size:12.5px;display:flex;flex-direction:column;gap:2px}
.cob-aud b{color:var(--primary-dark)}.cob-aud span{color:var(--gray)}.cob-aud em{color:var(--gray);font-style:normal;word-break:break-word}
.cob-aud--mal{background:rgba(239,68,68,.12)}.cob-aud--mal b{color:#ef4444}
.pago-qr-destino{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:4px 0 8px;padding:4px;border-radius:12px;background:rgba(128,128,128,.14)}
.pago-qr-destino button{padding:8px 6px;border:none;border-radius:9px;background:transparent;color:var(--gray);font-size:12.5px;font-weight:700;cursor:pointer;transition:background .2s,color .2s,transform .12s}
.pago-qr-destino button:active{transform:scale(.97)}
.pago-qr-destino button.on{background:var(--accent);color:#fff}
.pago-qr-destino i{margin-right:5px}
.pago-qr-cod{text-align:center;font-size:12.5px;color:var(--gray);margin:2px 0 6px}.pago-qr-cod b{font-family:ui-monospace,Consolas,monospace;color:var(--dark)}.pago-qr-cod small{font-size:11.5px}
.pago-qr-alerta{margin:8px 0;padding:10px 12px;border-radius:12px;background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.5);font-size:13px;color:var(--dark)}
.pago-qr-alerta--rojo{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.6)}
.pago-qr-pantalla{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:14px 10px;border-radius:14px;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.4);margin:6px 0}
.pago-qr-pantalla i{font-size:28px;color:#16a34a}.pago-qr-pantalla span{font-size:12.5px;color:var(--gray)}

.cob-ayuda{width:22px;height:22px;margin-left:6px;border-radius:50%;border:1.5px solid var(--accent);background:transparent;color:var(--accent);font-size:13px;font-weight:800;line-height:1;cursor:pointer;vertical-align:middle;transition:background .2s,color .2s,transform .12s}
.cob-ayuda:hover{background:var(--accent);color:#fff}.cob-ayuda:active{transform:scale(.92)}

.cob-alarma{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:9500;display:flex;align-items:center;gap:12px;max-width:min(94vw,640px);padding:10px 14px;border-radius:16px;background:#f59e0b;color:#1a1200;box-shadow:0 14px 40px -12px rgba(0,0,0,.5);animation:cobAlIn .4s ease-out}
.cob-alarma--roja{background:#dc2626;color:#fff}
.cob-alarma__ico{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:20px;font-weight:900;background:rgba(255,255,255,.28)}
.cob-alarma--roja .cob-alarma__ico{background:#fff;color:#dc2626;font-size:26px;animation:cobAlPulso 1s ease-in-out infinite}
.cob-alarma__txt{display:flex;flex-direction:column;line-height:1.3;font-size:13px}.cob-alarma__txt b{font-size:14.5px}
.cob-alarma__ir{background:#fff;color:#111;border:none;border-radius:10px;font-weight:700;white-space:nowrap}
.cob-alarma small{white-space:nowrap;opacity:.9}
.cob-alarma__x{flex:none;border:none;background:transparent;color:inherit;font-size:22px;line-height:1;cursor:pointer;opacity:.8}
@keyframes cobAlIn{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes cobAlPulso{50%{transform:scale(1.15)}}
@media(prefers-reduced-motion:reduce){.cob-alarma,.cob-alarma--roja .cob-alarma__ico{animation:none}}
/* El interruptor de Cobros no debe heredar el estilo de etiquetas de formulario */
.cobros-form label.inv-switch{display:flex;margin:0;flex:none;width:auto;align-items:center}
.cobros-form label.inv-switch .inv-switch-slider{display:block;width:44px;height:24px}
.cobros-form label.inv-switch .inv-switch-slider::before{top:3px;left:3px;width:18px;height:18px}
.cobros-form label.inv-switch input:checked + .inv-switch-slider::before{transform:translateX(20px)}
.cobros-nivel__cab>label.inv-switch{flex:none}

/* Renovar / Venta / Carrito: más anchos cuando muestran el QR */
#modalRenovar .modal-content:has(.pago-info:not(:empty)),
.modal-content:has(> .pago-info:not(:empty)) { max-width: min(94vw, 780px) !important; }

/* Cobro de membresía: sin barra de desplazamiento ni huecos (todo cabe en pantalla de escritorio) */
.pago-modal:has(.pago-info:not(:empty)){max-height:none;overflow:visible;padding-top:20px;padding-bottom:20px}
.pago-modal:has(.pago-info:not(:empty)) .modal-header{margin-bottom:8px}
.pago-modal:has(.pago-info:not(:empty)) .pago-col-izq{display:flex;flex-direction:column;gap:2px}
.pago-modal:has(.pago-info:not(:empty)) .pago-acciones{margin-top:12px;justify-content:flex-start;flex-wrap:nowrap}
.pago-modal:has(.pago-info:not(:empty)) .pago-acciones .btn{flex:1;padding:13px 10px}
.pago-modal:has(.pago-info:not(:empty)) .pago-confirma{text-align:left;margin-top:10px}
.pago-modal:has(.pago-info:not(:empty)) .pago-info{padding:10px 14px}
.pago-modal:has(.pago-info:not(:empty)) .pago-info img.pago-qr{max-height:min(44vh,400px)}
.pago-modal:has(.pago-info:not(:empty)) .pago-qr-monto b{font-size:30px}
@media (max-height:760px){.pago-modal:has(.pago-info:not(:empty)){max-height:96vh;overflow-y:auto}.pago-modal:has(.pago-info:not(:empty)) .pago-info img.pago-qr{max-height:36vh}}

/* Género: masculino = azul, femenino = rosado; al elegir se rellena y el texto/ícono se iluminan en blanco */
.gender-option[data-valor="masculino"]{--gc:#3b82f6}
.gender-option[data-valor="femenino"]{--gc:#ec4899}
.gender-option[data-valor="masculino"] i,.gender-option[data-valor="femenino"] i{color:var(--gc)}
.gender-option[data-valor]::before{background:var(--gc)}
.gender-option[data-valor].active{border-color:var(--gc);color:#fff;box-shadow:0 8px 24px -8px var(--gc)}
.gender-option[data-valor].active i{color:#fff}
@media (hover:hover) and (pointer:fine){.gender-option[data-valor]:not(.active):hover{border-color:var(--gc);color:var(--gc)}}

.pago-qr-crop{margin:8px auto;overflow:hidden;border-radius:14px;background:#fff;width:min(100%,320px)}
.pago-info .pago-qr-crop img.pago-qr{margin:0;border-radius:0;padding:8px;width:100%;max-height:none;min-width:0;height:auto;display:block;box-sizing:border-box}
.pago-info .pago-qr-crop img.pago-qr.pago-qr--tarjeta{padding:0}
.pago-modal:has(.pago-info:not(:empty)) .pago-cols{align-items:stretch}
.pago-modal:has(.pago-info:not(:empty)) .pago-col-izq{justify-content:space-between;gap:10px}
.pago-modal:has(.pago-info:not(:empty)) .pago-col-izq .pago-acciones{margin-top:0}

.pago-aviso-qr{font-size:.82rem;line-height:1.4;padding:8px 10px;border-radius:10px;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.35);color:#f59e0b;}
.pago-aviso-qr i{margin-right:4px;}

.ui-dlg-btns--col{flex-direction:column}
.ui-dlg-btns--col .ui-dlg-no{order:9}
.ui-dlg-opt:disabled{opacity:.45;cursor:not-allowed}
.ui-dlg-opt i{margin-right:6px}

a.inv-modo-tab{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;color:inherit}
a.inv-modo-tab:hover{text-decoration:none}