/* ============================================================
   LineFlow — Sistema de diseño base (paleta D-087: naranja vivo +
   morado, reemplaza el índigo+rosa de D-070). Abuela-proof:
   tipografía grande, contraste AA, targets ≥44px. Sin efectos
   pesados (blur/morphing) para rendir en TVs de bajos recursos.
   ============================================================ */

/* Fuentes Inter + Hanken Grotesk: se cargan vía <link> con preconnect en App.razor (D-093). */

:root {
    /* Paleta 3a "cálido claro" (reemplaza D-093 naranja+navy). El naranja de
       marca es el único color de identidad; el morado/dorado premium (VIP)
       se conserva aparte a propósito, como diferenciador de nivel (ver
       .lf-btn-premium), ahora sobre base marrón cálida en vez de morada. */
    --lf-primary: #EA580C;       /* naranja de marca (antes #F97316) */
    --lf-on-primary: #FFFFFF;
    --lf-secondary: #C2410C;     /* hover/active del primario */
    --lf-accent: #9A3412;        /* antes navy #0F172A: mismo rol, sin frío */
    --lf-accent-hover: #7C2D12;
    --lf-bg: #FFFBF7;
    --lf-fg: #43291B;             /* marrón cálido, no negro (≈11:1 sobre crema) */
    --lf-muted: #FFF6EF;
    --lf-muted-fg: #8A6E5C;
    --lf-text-muted: #8A6E5C;
    --lf-success-bg: #DCFCE7;     /* fondo de estados de éxito (antes hex suelto) */
    --lf-error-bg: #FEF2F0;       /* fondo de estados de error */
    --lf-accent-soft: #FFF1E6;    /* naranja suave para resaltados/fondos */
    --lf-accent-fuerte: #5C210E;  /* enlaces en hover */
    --lf-border: #F0E0D2;
    --lf-destructive: #B42318;    /* rojo cálido */
    --lf-success: #15803D;
    --lf-ring: #EA580C;
    --lf-surface: #FFFFFF;
    --lf-bg-top: #FFF3E9;         /* parte alta del gradiente del body */
    --lf-info-bg: #FFF1E6;        /* píldoras informativas (kicker) */
    --lf-info-fg: #9A3412;
    --lf-info-border: #F6D2B6;
    --lf-barra-no: rgb(67 41 27 / 0.18); /* serie "no atendidos" del dashboard */
    --lf-tv: #9A3412;             /* botón "Ver TV" en tablas admin (antes azul #2563EB) */
    --lf-tv-hover: #7C2D12;
    --lf-on-tv: #FFFFFF;

    /* Tipografía: escala fluida, base ≥16px (evita zoom iOS).
       D-093: Inter (cuerpo) + Hanken Grotesk (titulares), del sistema Stitch. */
    --lf-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --lf-font-heading: 'Hanken Grotesk', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --lf-text-xs: 0.75rem;
    --lf-text-sm: 0.875rem;
    --lf-text-base: 1rem;
    --lf-text-lg: 1.125rem;
    --lf-text-xl: 1.375rem;
    --lf-text-2xl: 1.75rem;
    --lf-text-3xl: 2.25rem;
    /* Números de turno: enormes y legibles a distancia (RN-15) */
    --lf-text-turno: clamp(3rem, 12vw, 9rem);
    /* Alias --lf-fs-*: nombres usados por páginas de Fases 2-5 (antes sin definir) */
    --lf-fs-sm: var(--lf-text-sm);
    --lf-fs-3xl: var(--lf-text-3xl);

    /* Espaciado: sistema de 4px */
    --lf-sp-1: 0.25rem;
    --lf-sp-2: 0.5rem;
    --lf-sp-3: 0.75rem;
    --lf-sp-4: 1rem;
    --lf-sp-5: 1.25rem;           /* usado por Fases 2-5 (antes sin definir) */
    --lf-sp-6: 1.5rem;
    --lf-sp-8: 2rem;
    --lf-sp-12: 3rem;
    --lf-sp-16: 4rem;

    --lf-radius: 0.5rem;    /* D-093: contenedores/tarjetas (Stitch: 8px) */
    --lf-radius-sm: 0.25rem; /* D-093: botones/inputs (Stitch: 4px) */
    --lf-shadow: 0 1px 3px rgb(67 41 27 / 0.08), 0 4px 12px rgb(67 41 27 / 0.06);
    --lf-shadow-lg: 0 4px 6px rgb(67 41 27 / 0.05), 0 12px 28px rgb(67 41 27 / 0.14);
    --lf-transition: 200ms ease-out;
    --lf-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --lf-motion-fast: 150ms;
    --lf-motion-normal: 250ms;
    --lf-motion-slow: 400ms;

    /* Target táctil mínimo (accesibilidad) */
    --lf-target: 44px;

    /* Oro premium (VIP): excepción deliberada a la marca — marca nivel, no identidad.
       Tokenizado para que el modo oscuro lo ajuste (antes eran hex sueltos sin variante dark). */
    --lf-vip-fill: #FACC15;      /* relleno de la estrella / acento */
    --lf-vip-border: #CA8A04;    /* borde */
    --lf-vip-text: #854D0E;      /* texto sobre fondo claro */
    --lf-vip-bg: #FFFCF5;        /* fondo de chips/tarjetas premium */

    /* Escala secuencial naranja del mapa de calor del dashboard (D-108): 1 = menos turnos,
       6 = más turnos, luminancia estrictamente monótona (hallazgo 3, revisión ronda 1 — la
       versión anterior repetía 1≈2 y bajaba de nuevo en 5-6 porque reusaba tokens de otros roles
       que no estaban pensados para ordenarse entre sí). Tokens propios, no hex sueltos en reglas. */
    --lf-calor-1: #FFF6EF;
    --lf-calor-2: #FFE8D6;
    --lf-calor-3: #FED7AA;
    --lf-calor-4: #FB923C;
    --lf-calor-5: #EA580C;
    --lf-calor-6: #C2410C;

    /* Espaciado propio del mapa de calor y de la barra de espera por módulo (D-108, hallazgo 9):
       antes valores sueltos (2px, 14px, 3px, -3px) repetidos en las reglas de abajo. */
    --lf-calor-gap: 2px;
    --lf-espera-barra-alto: 14px;
    --lf-espera-marca-ancho: 3px;
    --lf-espera-marca-alto: 20px;
    /* Hallazgo 16: ancho de la columna de etiquetas (letra de módulo / hora), se usa dos
       veces en `.lf-espera-modulo-fila` y en el offset de su tooltip. */
    --lf-espera-modulo-etq-ancho: 2.5rem;
}

/* Modo oscuro (D-080): solo se redefinen tokens; los componentes fijos-oscuros
   (TV, nav admin, botón premium) ya funcionan en ambos temas. */
@media (prefers-color-scheme: dark) {
    :root {
        --lf-primary: #FB923C;
        --lf-on-primary: #2A1A12;
        --lf-secondary: #FDBA74;
        --lf-accent: #FDBA74;
        --lf-accent-hover: #FED7AA;
        --lf-accent-fuerte: #FFF1E6;
        --lf-bg: #241812;
        --lf-bg-top: #2E1E16;
        --lf-fg: #FBEFE7;
        --lf-muted: #3A2A21;
        --lf-muted-fg: #C4AB9B;
        --lf-text-muted: #C4AB9B;
        --lf-success-bg: #12331E;
        --lf-error-bg: #3F1B16;
        --lf-accent-soft: #3A2A21;
        --lf-border: #4A3529;
        --lf-destructive: #FCA5A5;
        --lf-success: #4ADE80;
        --lf-ring: #FB923C;
        --lf-surface: #2F211A;
        --lf-info-bg: #3A2410;
        --lf-info-fg: #FDBA74;
        --lf-info-border: #5C3319;
        --lf-barra-no: rgb(255 255 255 / 0.3);
        --lf-tv: #FDBA74;
        --lf-tv-hover: #FED7AA;
        --lf-on-tv: #2A1A12;
        /* Oro premium en oscuro: mantiene identidad dorada, legible sobre marrón oscuro. */
        --lf-vip-fill: #FACC15;
        --lf-vip-border: #A16207;
        --lf-vip-text: #FDE68A;
        --lf-vip-bg: #2E2410;
        /* Escala oscura propia (hallazgo 3): oscuro → claro, monótona, para que "más gente"
           siga siendo más intenso sobre fondo oscuro (antes 1==2 y 6 más claro que 5 por
           reusar var(--lf-muted)/var(--lf-accent-soft), iguales en oscuro). */
        --lf-calor-1: #3A2A21;
        --lf-calor-2: #5C3319;
        --lf-calor-3: #9A3412;
        --lf-calor-4: #C2410C;
        --lf-calor-5: #EA580C;
        --lf-calor-6: #FB923C;
    }
}

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

html {
    font-family: var(--lf-font);
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100dvh;
    /* Calidez sutil arriba (gradiente plano, sin blur: apto TV) */
    background: linear-gradient(180deg, var(--lf-bg-top) 0%, var(--lf-bg) 340px) fixed;
    color: var(--lf-fg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--lf-font-heading);
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 var(--lf-sp-4);
    text-wrap: balance;
}

h1 { font-size: var(--lf-text-3xl); }
h2 { font-size: var(--lf-text-2xl); }
h3 { font-size: var(--lf-text-xl); }

p { margin: 0 0 var(--lf-sp-4); }

a {
    /* Rosa oscuro: el accent puro da 4,3:1 como texto (falla AA); este da 6,1:1 */
    color: var(--lf-accent-hover);
    text-decoration: none;
    transition: color var(--lf-transition);
}

/* :not(.lf-btn) — "a:hover" (0,1,1) le ganaba en especificidad al color base de
   .lf-btn-accent (0,1,0): el texto de los botones-enlace se volvía casi negro
   al pasar el mouse (D-088). */
a:not(.lf-btn):hover { color: var(--lf-accent-fuerte); text-decoration: underline; }

:focus-visible {
    outline: 3px solid var(--lf-ring);
    outline-offset: 2px;
    border-radius: var(--lf-radius-sm);
}
/* Routes.razor usa <FocusOnNavigate Selector="h1" />: en cada navegación el h1 recibe foco
   programático para que lectores de pantalla anuncien el título de la página nueva. El h1 no es
   interactivo para el mouse/teclado, así que mostrarle el anillo naranja de :focus-visible se ve
   como un recuadro pegado hasta el próximo clic — se quita solo el anillo visual, el foco (y el
   anuncio a lectores de pantalla) sigue intacto. */
h1:focus-visible { outline: none; }

/* ---------- Componentes base ---------- */

.lf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--lf-sp-2);
    min-height: var(--lf-target);
    min-width: var(--lf-target);
    padding: var(--lf-sp-3) var(--lf-sp-6);
    border: none;
    border-radius: var(--lf-radius);
    font-family: inherit;
    font-size: var(--lf-text-base);
    font-weight: 500;
    cursor: pointer;
    touch-action: manipulation;
    transition: background var(--lf-transition), transform var(--lf-transition);
    position: relative;
}

/* Tamaño base de icono dentro de botón/pill/ticket: sin esta regla, un SVG sin
   selector propio queda sin tamaño y crece hasta llenar el botón (bug "Tomar
   turno", D-3a). Debe ir cerca del inicio del bloque de botones para que las
   excepciones posteriores (consola 26px, .lf-btn-icon 20px) la sobreescriban. */
.lf-btn svg,
.lf-pill svg,
.lf-ticket svg,
a.lf-btn svg {
    width: 18px; height: 18px;
    flex: none;
    min-width: 0; min-height: 0;
}
/* Seguro adicional: si algún SVG queda sin viewBox o sin clase conocida, no
   puede desbordar su contenedor. */
.lf-btn > svg { max-width: 24px; max-height: 24px; }

.lf-btn:active { transform: scale(0.98); }

.lf-btn-primary { background: var(--lf-primary); color: var(--lf-on-primary); }
.lf-btn-primary:hover { background: var(--lf-secondary); color: var(--lf-on-primary); }

.lf-btn-accent { background: var(--lf-accent); color: var(--lf-on-primary); }
.lf-btn-accent:hover { background: var(--lf-accent-hover); color: var(--lf-on-primary); }

.lf-btn-secondary {
    background: var(--lf-surface);
    color: var(--lf-fg);
    border: 1px solid var(--lf-border);
}
.lf-btn-secondary:hover { background: var(--lf-muted); }

.lf-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Hallazgo 7 (revisión N-01/N-03): equivalente a .lf-btn:disabled para un <a> deshabilitado (los
   enlaces no soportan el atributo disabled) — mismo tratamiento visual, misma variable de tokens. */
.lf-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    pointer-events: none;
}

.lf-card {
    background: var(--lf-surface);
    border: 1px solid var(--lf-border);
    border-radius: var(--lf-radius);
    box-shadow: var(--lf-shadow);
    padding: var(--lf-sp-6);
}

.lf-input {
    width: 100%;
    min-height: 48px;
    padding: var(--lf-sp-3) var(--lf-sp-4);
    border: 1px solid var(--lf-border);
    border-radius: 10px;
    font-family: inherit;
    font-size: var(--lf-text-base);
    background: var(--lf-surface);
    color: var(--lf-fg);
    transition: border-color var(--lf-transition);
}

.lf-input:focus { border-color: var(--lf-primary); outline: none; box-shadow: 0 0 0 3px rgb(234 88 12 / 0.30); }

/* En móvil el target táctil de los campos sube a 56px (flujo de usuario 3a). */
@media (max-width: 640px) {
    .lf-input { min-height: 56px; font-size: var(--lf-text-lg); }
}
.lf-input-codigo { font-size: var(--lf-text-xl); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

.lf-label {
    display: block;
    font-size: var(--lf-text-sm);
    font-weight: 600;
    margin-bottom: var(--lf-sp-1);
    color: var(--lf-info-fg);
}
.lf-label span { font-weight: 400; color: var(--lf-muted-fg); }

.lf-volver { display: inline-block; margin-bottom: var(--lf-sp-3); font-size: var(--lf-text-sm); font-weight: 600; color: var(--lf-info-fg); }

.lf-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--lf-sp-1) var(--lf-sp-3);
    border-radius: 999px;
    font-size: var(--lf-text-sm);
    font-weight: 500;
    background: var(--lf-muted);
    color: var(--lf-secondary);
}

.lf-badge-success { background: var(--lf-success-bg); color: var(--lf-success); }
.lf-badge-error { background: var(--lf-error-bg); color: var(--lf-destructive); }

/* Mensajes largos de éxito/error: bloque, no píldora (la píldora se
   deforma con texto multilínea en móvil) */
.lf-alerta {
    display: block;
    padding: var(--lf-sp-3) var(--lf-sp-4);
    border-radius: var(--lf-radius-sm);
    font-size: var(--lf-text-base);
    font-weight: 500;
    background: var(--lf-muted);
    color: var(--lf-secondary);
}
.lf-alerta.lf-badge-success { background: var(--lf-success-bg); color: var(--lf-success); }
.lf-alerta.lf-badge-error { background: var(--lf-error-bg); color: var(--lf-destructive); }

/* Shell de página: antes vivía solo en el CSS aislado de MainLayout,
   por lo que AdminLayout (sin .razor.css propio) no lo recibía. */
.lf-shell {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.lf-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* "Ir al inicio" siempre visible: franja sticky arriba (antes vivía en el
   footer y en pantallas altas — turno, VIP, comprobante — solo aparecía
   haciendo scroll hasta el final). Se pinta una sola vez en MainLayout;
   se oculta con :has() donde ya hay su propio acceso al inicio o donde
   competiría con el contenido (Home ya tiene .lf-topbar, Consola su
   cabecera de módulo, y la pantalla "¡Es tu turno!" no debe compartir
   protagonismo con el código). */
.lf-franja-top {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between; gap: var(--lf-sp-3);
    padding: var(--lf-sp-2) var(--lf-sp-4);
    background: var(--lf-surface); border-bottom: 1px solid var(--lf-border);
}
.lf-franja-top .lf-ir-inicio-link {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 32px; padding-inline: var(--lf-sp-2); border-radius: 8px;
    font-size: var(--lf-text-sm); font-weight: 600; color: var(--lf-info-fg);
}
.lf-franja-top .lf-ir-inicio-link svg { width: 15px; height: 15px; flex: none; }
.lf-franja-top .lf-ir-inicio-link:hover { background: var(--lf-accent-soft); text-decoration: none; }
.lf-franja-marca { font-family: var(--lf-font-heading); font-size: 0.875rem; font-weight: 800; color: var(--lf-fg); }
.lf-franja-marca span { color: var(--lf-primary); }
.lf-shell:has(.lf-topbar) .lf-franja-top,
.lf-shell:has(.lf-consola-shell) .lf-franja-top,
.lf-shell:has(.lf-llamado) .lf-franja-top {
    display: none;
}

/* Contenedor central */
.lf-container {
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
    padding-inline: var(--lf-sp-4);
}

/* Pie "Powered by LineFlow" (identidad dual, 06-UX-UI) */
.lf-powered {
    text-align: center;
    padding: var(--lf-sp-4);
    font-size: var(--lf-text-sm);
    color: var(--lf-muted-fg);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---------- Fase 1, Bloque 3: UI funcional ---------- */

.lf-muted { color: var(--lf-muted-fg); }

.lf-form { display: flex; flex-direction: column; gap: var(--lf-sp-4); }
.lf-field { display: flex; flex-direction: column; gap: var(--lf-sp-1); }
/* Formularios de admin (crear/editar sede, módulo): 2 columnas en pantallas anchas, 1 en móvil.
   .lf-field-full rompe el grid para campos que necesitan todo el ancho (texto largo, checkboxes). */
.lf-form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lf-sp-3) var(--lf-sp-4); align-items: start; }
.lf-form-2col .lf-field { margin: 0; }
.lf-field-full { grid-column: 1 / -1; }

.lf-color-paleta { display: flex; flex-wrap: wrap; gap: var(--lf-sp-2); }
.lf-color-swatch {
    width: 32px; height: 32px; border-radius: 8px; border: 2px solid var(--lf-border);
    cursor: pointer; padding: 0; transition: transform var(--lf-motion-fast) var(--lf-ease), border-color var(--lf-motion-fast) var(--lf-ease);
}
.lf-color-swatch:hover { transform: scale(1.08); }
.lf-color-swatch-activo { border-color: var(--lf-fg); box-shadow: 0 0 0 2px var(--lf-surface), 0 0 0 4px var(--lf-fg); }
@media (max-width: 640px) {
    .lf-form-2col { grid-template-columns: 1fr; }
}

/* Badge de ayuda ("?"): span focuseable (tabindex), sin JS. El globo se muestra con :hover (mouse)
   y con :focus (tap en móvil — Safari/Chrome enfocan elementos con tabindex al tocarlos). */
.lf-ayuda {
    display: inline-flex; align-items: center; justify-content: center; position: relative;
    width: 18px; height: 18px; border-radius: 999px; margin-left: var(--lf-sp-1); vertical-align: middle;
    background: var(--lf-muted); color: var(--lf-muted-fg); font-size: 0.7rem; font-weight: 700;
    line-height: 1; user-select: none; cursor: help;
}
.lf-ayuda:hover, .lf-ayuda:focus { background: var(--lf-primary); color: var(--lf-on-primary); outline: none; }
.lf-ayuda-globo {
    display: none; position: absolute; z-index: 20; top: 140%; left: 0; width: max-content; max-width: 260px;
    padding: var(--lf-sp-2) var(--lf-sp-3); background: var(--lf-surface); border: 1px solid var(--lf-border);
    border-radius: var(--lf-radius-sm); box-shadow: var(--lf-shadow); font-size: var(--lf-text-sm);
    font-weight: 400; color: var(--lf-fg); text-align: left;
}
.lf-ayuda:hover .lf-ayuda-globo, .lf-ayuda:focus .lf-ayuda-globo { display: block; }
.lf-field .validation-message { color: var(--lf-destructive); font-size: var(--lf-text-sm); margin: 0; }

.lf-btn-block { width: 100%; }
.lf-btn-lg { min-height: 64px; font-size: var(--lf-text-xl); padding: var(--lf-sp-4) var(--lf-sp-8); }
.lf-btn-xl { min-height: 88px; font-family: var(--lf-font-heading); font-size: var(--lf-text-2xl); font-weight: 800; padding: var(--lf-sp-4) var(--lf-sp-8); }
.lf-btn-danger { background: var(--lf-destructive); color: #fff; }
.lf-btn-danger:hover { background: #921B12; }

.lf-btn-tv { background: var(--lf-tv); color: var(--lf-on-tv); }
.lf-btn-tv:hover { background: var(--lf-tv-hover); }

/* ---------- P8/P9 — Compra VIP y comprobante prioritario (flujo de usuario 3a) ---------- */
.lf-vip { max-width: 32rem; padding-block: var(--lf-sp-6) var(--lf-sp-8); display: flex; flex-direction: column; gap: var(--lf-sp-4); }
.lf-vip h1 { font-size: var(--lf-text-2xl); margin: 0; }
.lf-vip-chip {
    display: inline-flex; align-items: center; gap: var(--lf-sp-2); align-self: flex-start;
    padding: 5px 12px; border-radius: 999px;
    background: var(--lf-vip-bg); border: 1.5px solid var(--lf-vip-border); color: var(--lf-vip-text);
    font-size: 0.75rem; font-weight: 700;
}
.lf-vip-chip svg { width: 16px; height: 16px; flex: none; }
.lf-vip-precio {
    display: flex; align-items: center; justify-content: space-between; gap: var(--lf-sp-3);
    padding: var(--lf-sp-4); margin-bottom: var(--lf-sp-4);
    background: var(--lf-vip-bg); border: 1.5px solid var(--lf-vip-border); border-radius: 12px;
}
.lf-vip-precio span { font-size: 0.75rem; color: var(--lf-vip-text); }
.lf-vip-precio strong {
    display: block; margin-top: var(--lf-sp-1);
    font-family: var(--lf-font-heading); font-size: 1.625rem; font-weight: 800;
    color: var(--lf-vip-text); font-variant-numeric: tabular-nums;
}
.lf-vip-precio p { margin: 0; text-align: right; font-size: 0.75rem; color: var(--lf-muted-fg); }
.lf-vip-nota { margin: 0; text-align: center; font-size: 0.75rem; color: var(--lf-muted-fg); }

.lf-vip-cabecera {
    padding: var(--lf-sp-5); text-align: center;
    background: var(--lf-vip-bg); border: 1.5px solid var(--lf-vip-border); border-radius: 14px;
}
.lf-vip-titular { margin: var(--lf-sp-3) 0 var(--lf-sp-1); font-family: var(--lf-font-heading); font-size: var(--lf-text-2xl); font-weight: 800; }
.lf-vip-qr { text-align: center; }
.lf-vip-qr img { display: block; max-width: 240px; margin: 0 auto var(--lf-sp-4); }
.lf-vip-acciones { display: flex; flex-direction: column; gap: var(--lf-sp-3); }

/* ---------- P10 — Buscar mi turno ---------- */
.lf-buscar { max-width: 32rem; padding-block: var(--lf-sp-6) var(--lf-sp-8); display: flex; flex-direction: column; gap: var(--lf-sp-4); }
.lf-buscar h1 { margin: 0; font-size: var(--lf-text-2xl); }
/* Botones a tamaño normal: 44-48px en pantallas del usuario final.
   .lf-btn-lg (64px) y .lf-btn-xl (88px) quedan solo para la consola del
   cajero, que se opera de pie y sin mirar. */
.lf-buscar .lf-btn,
.lf-vip .lf-btn,
.lf-turno-acciones .lf-btn,
.lf-form .lf-btn {
    min-height: 48px;
    font-family: var(--lf-font);
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: 10px;
}
/* "Ya llegué" baja de 88px a 56px: sigue siendo el más grande de su
   pantalla sin ocupar un tercio del alto. */
.lf-vip-acciones .lf-btn-xl {
    min-height: 56px;
    font-family: var(--lf-font-heading); font-size: var(--lf-text-xl); font-weight: 700;
}
.lf-vip-acciones .lf-btn-xl svg { width: 20px; height: 20px; }

.lf-ticket {
    display: flex; flex-direction: column; align-items: center; gap: var(--lf-sp-2);
    padding: var(--lf-sp-5); text-align: center; color: inherit;
    background: var(--lf-surface); border: 1px solid var(--lf-border);
    border-top: 6px solid var(--lf-primary); border-radius: 14px;
}
.lf-ticket:hover { text-decoration: none; border-color: var(--lf-info-border); }
.lf-ticket-codigo {
    font-family: var(--lf-font-heading); font-size: 3.25rem; line-height: 1; font-weight: 800;
    letter-spacing: -0.03em; color: var(--lf-primary); font-variant-numeric: tabular-nums;
}
.lf-ticket .lf-btn { margin-top: var(--lf-sp-2); }

/* Botones-icono de acciones por fila en tablas admin (D-092): mismo target
   táctil que .lf-btn, sin el padding horizontal ancho del texto. */
.lf-btn-icon { padding: var(--lf-sp-2); min-width: var(--lf-target); }
.lf-btn-icon svg { width: 20px; height: 20px; flex: none; }

/* Estado (badge + alternar) dentro del modal de edición admin */
.lf-estado-modal { display: flex; align-items: center; gap: var(--lf-sp-3); flex-wrap: wrap; }

/* Auth (login/logout) */
.lf-auth { display: flex; justify-content: center; padding-block: var(--lf-sp-16); }
.lf-auth-card { width: 100%; max-width: 26rem; }
.lf-auth-footer { margin-top: var(--lf-sp-4); font-size: var(--lf-text-sm); }

/* Hero home (los estilos de .lf-hero y .lf-hero-tagline viven en Home.razor.css, D-080) */
/* Cabecera de la Home: marca + accesos como pills (3a) */
.lf-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--lf-sp-3); padding-block: var(--lf-sp-4); }
.lf-marca { font-family: var(--lf-font-heading); font-size: var(--lf-text-2xl); font-weight: 800; letter-spacing: -0.02em; color: var(--lf-fg); }
.lf-marca:hover { color: var(--lf-fg); text-decoration: none; }
.lf-topbar-acciones { display: flex; gap: var(--lf-sp-2); }
.lf-pill { display: inline-flex; align-items: center; min-height: var(--lf-target); padding-inline: var(--lf-sp-4); border-radius: 999px; font-size: var(--lf-text-sm); font-weight: 600; }
.lf-pill-outline { background: var(--lf-surface); border: 1px solid var(--lf-info-border); color: var(--lf-info-fg); }
.lf-pill-suave { background: var(--lf-info-bg); color: var(--lf-info-fg); }
.lf-pill:hover { background: var(--lf-accent-soft); color: var(--lf-info-fg); text-decoration: none; }
.lf-pill[aria-pressed="true"] { background: var(--lf-primary); border-color: var(--lf-primary); color: var(--lf-on-primary); }
.lf-pill[aria-pressed="true"]:hover { background: var(--lf-primary); color: var(--lf-on-primary); }
.lf-pill-row { display: flex; gap: var(--lf-sp-2); flex-wrap: wrap; }

.lf-buscador { max-width: 720px; }
.lf-buscador h2 { font-size: var(--lf-text-xl); }
.lf-buscador .lf-input { min-height: 48px; }
.lf-buscador .lf-btn, .lf-auth-card .lf-btn-block { min-height: 48px; font-family: var(--lf-font); font-size: 0.9375rem; font-weight: 600; border-radius: 10px; }

/* Identidad dorada visible en la Home (D-070) — también usada por Tv.razor */
.lf-marca-flow {
    background: linear-gradient(90deg, var(--lf-primary), var(--lf-accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.lf-kicker {
    display: inline-flex; align-items: center; gap: var(--lf-sp-2);
    background: var(--lf-info-bg); color: var(--lf-info-fg);
    border: 1px solid var(--lf-info-border); border-radius: 999px;
    padding: 2px var(--lf-sp-3);
    font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.05em; text-transform: uppercase;
    margin-bottom: var(--lf-sp-2);
}
.lf-module-horario { margin-top: var(--lf-sp-2); }
.lf-module-horario summary {
    cursor: pointer; list-style: none; color: var(--lf-primary);
    font-weight: 600; font-size: var(--lf-text-sm);
}
.lf-module-horario summary::-webkit-details-marker { display: none; }
.lf-module-horario summary::before { content: "+ "; }
.lf-module-horario[open] summary::before { content: "− "; }
/* Tabla de 1 fila x 7 columnas, celdas cuadradas pequeñas: ancho tope fijo
   (no ocupan todo el ancho de la tarjeta) para que se vean como casillas,
   no como rectángulos largos. min-height:0 anula el piso de 44px de la
   regla base .lf-dia-check (pensada para el checkbox táctil del admin). */
.lf-module-horario .lf-dias-semana {
    margin-top: var(--lf-sp-2);
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
    max-width: 224px;
}
.lf-module-horario .lf-dia-check {
    min-width: 0; min-height: 0; width: 100%; aspect-ratio: 1; height: auto;
    font-size: 0.625rem; padding: 0;
}
.lf-btn-responsive svg { width: 18px; height: 18px; flex: none; }
.lf-btn-responsive .lf-btn { display: inline-flex; align-items: center; gap: var(--lf-sp-2); }
.lf-powered-sep { margin-inline: var(--lf-sp-2); }
.lf-ir-inicio-link:hover { color: var(--lf-accent-hover); }
/* Corazón de favoritos: rojo solo el relleno cuando está activo (antes heredaba
   currentColor, naranja/marrón del botón). Inactivo queda como contorno. */
.lf-fav-activo svg,
#btn-favorito.lf-fav-activo svg {
    fill: #DC2626;
    stroke: #DC2626;
}
#btn-favorito svg,
.lf-sede-card-acciones .lf-btn-icon svg { fill: none; }
#btn-favorito svg { transition: transform var(--lf-motion-fast) var(--lf-ease); }
#btn-favorito.lf-fav-activo svg { animation: lf-pulso-fav var(--lf-motion-slow) var(--lf-ease); }
@keyframes lf-pulso-fav {
    0% { transform: scale(1); }
    40% { transform: scale(1.3); }
    100% { transform: scale(1); }
}
@media (max-width: 640px) {
    .lf-btn-responsive span { display: none; }
    .lf-btn-responsive .lf-btn { min-width: 44px; padding-inline: var(--lf-sp-3); }
}

.lf-card-destacada { border-top: 6px solid var(--lf-primary); box-shadow: var(--lf-shadow-lg); }
.lf-btn-outline-accent {
    background: var(--lf-surface); color: var(--lf-accent-hover);
    border: 1.5px solid var(--lf-accent); font-weight: 600;
}
.lf-btn-outline-accent:hover { background: var(--lf-accent-soft); }

/* Stepper (P7 onboarding) */
.lf-stepper { display: flex; gap: var(--lf-sp-2); margin-bottom: var(--lf-sp-8); flex-wrap: wrap; }
.lf-step {
    flex: 1;
    min-width: 6rem;
    text-align: center;
    padding: var(--lf-sp-2) var(--lf-sp-1);
    border-radius: var(--lf-radius-sm);
    background: var(--lf-muted);
    color: var(--lf-muted-fg);
    font-size: var(--lf-text-sm);
    font-weight: 500;
    border: 2px solid transparent;
}
.lf-step-activo { background: var(--lf-primary); color: var(--lf-on-primary); }
.lf-step-hecho { border-color: var(--lf-success); color: var(--lf-success); background: var(--lf-surface); }

/* Grillas y tarjetas de administración / P2 */
.lf-grid { display: grid; gap: var(--lf-sp-4); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.lf-row-actions { display: flex; gap: var(--lf-sp-2); flex-wrap: wrap; margin-top: var(--lf-sp-3); }

.lf-table { width: 100%; border-collapse: collapse; }
.lf-table th, .lf-table td { text-align: left; padding: var(--lf-sp-3); border-bottom: 1px solid var(--lf-border); overflow-wrap: anywhere; }
.lf-table th { font-size: var(--lf-text-sm); color: var(--lf-muted-fg); font-weight: 600; white-space: nowrap; }
.lf-table-wrap { overflow-x: auto; }

/* Cabecera de tabla ordenable (D-2.7): botón sin estilo propio, hereda tipografía del <th>. */
.lf-th-orden { display: inline-flex; align-items: center; gap: var(--lf-sp-1); background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; }
.lf-th-orden:hover { color: var(--lf-fg); }
.lf-th-orden svg { width: 14px; height: 14px; flex: none; }

/* D-080: tablas admin en móvil — cada fila se vuelve tarjeta y cada celda
   muestra su etiqueta (data-etiqueta), en vez de scroll horizontal a ciegas. */
@media (max-width: 640px) {
    .lf-tabla-cards { overflow-x: visible; }
    .lf-tabla-cards .lf-table, .lf-tabla-cards tbody, .lf-tabla-cards tr, .lf-tabla-cards td { display: block; width: 100%; }
    .lf-tabla-cards thead { display: none; }
    .lf-tabla-cards tr {
        border: 1px solid var(--lf-border); border-radius: var(--lf-radius-sm);
        background: var(--lf-surface); margin-bottom: var(--lf-sp-3);
        padding: var(--lf-sp-2) var(--lf-sp-3);
    }
    .lf-tabla-cards td { border: none; padding: var(--lf-sp-1) 0; display: flex; justify-content: space-between; gap: var(--lf-sp-3); align-items: baseline; }
    .lf-tabla-cards td[data-etiqueta]::before {
        content: attr(data-etiqueta);
        font-size: var(--lf-text-sm); color: var(--lf-muted-fg); font-weight: 600; flex: none;
    }
    .lf-tabla-cards td.lf-row-actions { justify-content: flex-start; }
}

/* Leyenda de gráficas (D-080) */
.lf-leyenda { display: flex; gap: var(--lf-sp-4); justify-content: center; flex-wrap: wrap; font-size: var(--lf-text-sm); color: var(--lf-muted-fg); margin-top: var(--lf-sp-2); }
.lf-leyenda span { display: inline-flex; align-items: center; gap: var(--lf-sp-1); }
.lf-leyenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* Skeleton de carga (D-080): sustituye los "Cargando…" de texto plano. */
.lf-skeleton {
    border-radius: var(--lf-radius-sm);
    background: linear-gradient(90deg, var(--lf-muted) 25%, var(--lf-border) 50%, var(--lf-muted) 75%);
    background-size: 200% 100%;
    animation: lf-brillo 1.2s linear infinite;
}
@keyframes lf-brillo { to { background-position: -200% 0; } }
.lf-skeleton-linea { height: 1rem; margin-bottom: var(--lf-sp-2); }
.lf-skeleton-caja { height: 6rem; margin-bottom: var(--lf-sp-3); }

/* Fila de campos de formulario (antes se abusaba de .lf-row-actions para esto) */
.lf-form-row { display: flex; gap: var(--lf-sp-3) var(--lf-sp-4); flex-wrap: wrap; align-items: flex-end; }
.lf-form-row .lf-field { flex: 1; min-width: 10rem; }

.lf-counter { display: inline-flex; align-items: center; gap: var(--lf-sp-2); }
.lf-counter-btn { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--lf-border); background: var(--lf-surface); font-size: var(--lf-text-lg); font-weight: 700; cursor: pointer; }
.lf-counter-btn:hover { background: var(--lf-muted); }

/* P2 — página de sede pública (3a) */
.lf-sede-header { padding-block: var(--lf-sp-4) var(--lf-sp-3); }
.lf-sede-marca {
    display: flex; align-items: center; gap: var(--lf-sp-4);
    padding: var(--lf-sp-4) var(--lf-sp-5);
    background: var(--lf-info-bg); border: 1px solid var(--lf-info-border);
    border-radius: var(--lf-radius);
}
.lf-sede-logo {
    flex: none; width: 52px; height: 52px; object-fit: contain;
    border-radius: 12px; background: var(--lf-surface);
}
.lf-sede-logo-inicial {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--lf-primary); color: var(--lf-on-primary);
    font-family: var(--lf-font-heading); font-size: 1.5rem; font-weight: 800;
}
.lf-sede-datos { flex: 1; min-width: 0; text-align: left; }
.lf-sede-datos h1 { margin: 0; font-size: var(--lf-text-xl); }
.lf-sede-datos p { margin: 2px 0 0; font-size: var(--lf-text-sm); }
.lf-sede-acciones { display: flex; gap: var(--lf-sp-2); flex: none; }

.lf-modulos { max-width: 1100px; padding-bottom: var(--lf-sp-16); }
.lf-modulos h2 { font-size: var(--lf-text-xl); margin-bottom: var(--lf-sp-4); }
/* Cuadros pequeños, varios por fila: auto-fill sin breakpoints por tamaño
   (1 columna en móvil angosto, 2 en móvil normal, 3-4 en tablet/escritorio). */
.lf-modulos-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--lf-sp-3);
    align-items: stretch;
}

.lf-modulo {
    background: var(--lf-surface); border: 1px solid var(--lf-border);
    border-radius: 12px; padding: var(--lf-sp-4);
    display: flex; flex-direction: column; gap: var(--lf-sp-2);
    animation: lf-entrada-tarjeta var(--lf-motion-slow) var(--lf-ease) backwards;
    animation-delay: calc(var(--lf-stagger-i, 0) * 30ms);
    transition: border-color var(--lf-motion-normal) var(--lf-ease);
}
.lf-modulo-cabeza { display: flex; align-items: center; gap: var(--lf-sp-2); }
.lf-modulo-letra {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px; flex: none;
    background: var(--lf-accent-soft); color: var(--lf-primary);
    font-family: var(--lf-font-heading); font-size: 0.9375rem; font-weight: 800;
}
.lf-modulo-titulo { display: flex; flex-direction: column; gap: var(--lf-sp-1); min-width: 0; align-items: flex-start; }
.lf-modulo-titulo strong { font-size: 0.9375rem; line-height: 1.25; text-wrap: pretty; }
.lf-modulo-titulo .lf-badge { font-size: 0.75rem; padding: 2px 8px; }
.lf-modulo-aviso { font-size: var(--lf-text-sm); font-weight: 600; color: var(--lf-info-fg); }

/* Métricas: se leen de un vistazo, sin párrafos sueltos. En cuadros de 150px
   las etiquetas cortas sin salto de línea comparten línea base entre vecinos. */
.lf-modulo-metricas { display: flex; gap: var(--lf-sp-4); margin: 0; flex-wrap: nowrap; }
.lf-modulo-metricas dt { font-size: 0.625rem; color: var(--lf-muted-fg); white-space: nowrap; }
.lf-modulo-metricas dd {
    margin: 2px 0 0; font-size: 1.0625rem; font-weight: 700;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

.lf-modulo-acciones { margin-top: auto; display: flex; flex-direction: column; gap: var(--lf-sp-2); }
.lf-modulo-acciones .lf-btn-turno {
    min-height: var(--lf-target); border-radius: 10px;
    font-family: var(--lf-font); font-size: 0.9375rem; font-weight: 600;
}
.lf-modulo-acciones .lf-btn-turno svg { width: 16px; height: 16px; }
/* VIP dentro del cuadro: acción secundaria, texto corto ("Turno prioritario"). */
.lf-modulo-acciones .lf-btn-premium { min-height: 38px; font-size: 0.75rem; border-radius: 10px; }
.lf-modulo-acciones .lf-btn-premium svg { width: 15px; height: 15px; }
.lf-module-horario summary { font-size: 0.8125rem; }
.lf-modulo-cerrado { opacity: 0.75; }
.lf-modulo-cerrado .lf-modulo-letra { background: var(--lf-muted); color: var(--lf-muted-fg); }
.lf-modulo-cerrado-aviso {
    margin: 0; padding: var(--lf-sp-3); border-radius: var(--lf-radius-sm);
    background: var(--lf-muted); color: var(--lf-muted-fg);
    font-size: var(--lf-text-sm); text-align: center;
}
@media (hover: hover) and (pointer: fine) {
    .lf-modulo:hover { border-color: color-mix(in srgb, var(--lf-primary) 35%, var(--lf-border)); }
}
@media (max-width: 640px) {
    .lf-sede-marca { flex-wrap: wrap; }
    .lf-sede-acciones { margin-left: auto; }
    .lf-modulo-metricas { gap: var(--lf-sp-5); }
}

/* Verde "dinero" para la compra del turno prioritario, AA sobre blanco */
.lf-btn-success { background: var(--lf-success); color: #fff; }
.lf-btn-success:hover { background: #166534; }

/* Compra del turno prioritario: look premium — fondo morado profundo, borde y detalles dorados */
.lf-btn-premium {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--lf-sp-2);
    background: linear-gradient(135deg, #3A2410, #5C3319 55%, #3A2410);
    color: #FDE68A; border: 1.5px solid #FACC15;
    font-weight: 700; letter-spacing: 0.01em;
    box-shadow: 0 2px 10px rgb(250 204 21 / 0.25), inset 0 1px 0 rgb(255 255 255 / 0.12);
    text-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
    transition: transform var(--lf-motion-normal) var(--lf-ease), box-shadow var(--lf-motion-normal) var(--lf-ease), background var(--lf-motion-normal) var(--lf-ease);
}
@media (hover: hover) and (pointer: fine) {
    .lf-btn-premium:hover {
        background: linear-gradient(135deg, #5C3319, #7A4A26 55%, #5C3319);
        box-shadow: 0 6px 22px rgb(250 204 21 / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.15);
        transform: translateY(-2px);
    }
}
.lf-btn-premium:active { transform: scale(0.98); transition-duration: var(--lf-motion-fast); }
.lf-btn-premium svg { width: 22px; height: 22px; flex: none; }
.lf-badge-success-live { position: relative; }
.lf-badge-success-live::before {
    content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 999px;
    background: var(--lf-success); margin-right: var(--lf-sp-1);
    animation: lf-pulso-vivo 2s ease-in-out infinite;
}
@keyframes lf-pulso-vivo { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes lf-entrada-tarjeta {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* P3/P4 — turno 3a (design_handoff_lineflow_3a2/turnoestado-3a.css): boleto
   con código enorme, escalera de fila de 7 segmentos y llamado en naranja de
   marca (antes verde). Reemplaza .lf-turno-codigo, .lf-stat-*, .lf-hora-estimada,
   .lf-progress-* y .lf-estado-llamado. Se conserva .lf-hora-actual. */
.lf-turno { max-width: 32rem; padding-block: var(--lf-sp-4) var(--lf-sp-8); display: flex; flex-direction: column; gap: var(--lf-sp-4); }
.lf-turno-aviso { margin: var(--lf-sp-2) auto; max-width: 32rem; }

.lf-turno-top {
    display: flex; align-items: center; justify-content: space-between; gap: var(--lf-sp-3);
    padding-bottom: var(--lf-sp-3); border-bottom: 1px solid var(--lf-border);
}
.lf-turno-top strong { display: block; font-size: var(--lf-text-base); }
.lf-turno-top span { font-size: var(--lf-text-sm); }

.lf-hora-actual {
    display: inline-flex; align-items: center; gap: var(--lf-sp-1);
    font-size: var(--lf-text-sm); color: var(--lf-muted-fg);
    font-variant-numeric: tabular-nums;
}
.lf-hora-actual svg { width: 16px; height: 16px; }

/* Conservada: aún la usa CompraVip.razor (fuera de alcance de este bloque 3a). */
.lf-hora-estimada {
    display: flex; align-items: center; justify-content: center; gap: var(--lf-sp-2);
    margin-top: var(--lf-sp-4); padding: var(--lf-sp-3);
    border-radius: var(--lf-radius-sm); background: var(--lf-accent-soft);
    color: var(--lf-accent-hover); font-weight: 600;
}
.lf-hora-estimada svg { width: 20px; height: 20px; flex: none; }

/* Boleto: la pantalla tiene UNA sola jerarquía — el código. */
.lf-boleto {
    background: var(--lf-surface); border: 1px solid var(--lf-border);
    border-top: 6px solid var(--lf-primary); border-radius: 14px;
    text-align: center; overflow: hidden;
}
/* D-punto 4.2 auditoría: "ya casi" (PersonasDelante <= 1) debe notarse de reojo,
   sin leer texto — borde grueso en las 4 caras en vez del acento superior. */
.lf-boleto-ya-casi { border-width: 6px; border-color: var(--lf-primary); }
.lf-boleto .lf-turno-alerta { margin: var(--lf-sp-4) var(--lf-sp-4) 0; text-align: left; }
.lf-boleto-kicker {
    margin: 0; padding-top: var(--lf-sp-5);
    font-family: ui-monospace, Menlo, monospace;
    font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--lf-muted-fg);
}
.lf-boleto-codigo {
    margin: var(--lf-sp-2) 0 0; font-family: var(--lf-font-heading);
    font-size: clamp(4rem, 22vw, 6rem); line-height: 0.92; font-weight: 800;
    letter-spacing: -0.04em; color: var(--lf-primary); font-variant-numeric: tabular-nums;
}
.lf-boleto-persona { margin: var(--lf-sp-3) 0 var(--lf-sp-5); font-size: var(--lf-text-base); color: var(--lf-muted-fg); }
/* Franja punteada: la costura del boleto separa "tu dato" de "la fila". */
.lf-boleto-pie { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px dashed var(--lf-info-border); }
.lf-boleto-pie > div { padding: var(--lf-sp-3) var(--lf-sp-4); }
.lf-boleto-pie > div + div { border-left: 1px dashed var(--lf-info-border); }
.lf-boleto-pie span { display: block; font-size: 0.75rem; color: var(--lf-muted-fg); }
.lf-boleto-pie strong {
    display: block; margin-top: var(--lf-sp-1);
    font-size: 1.625rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.lf-boleto-atendiendo { color: var(--lf-info-fg); }

/* Escalera de la fila (sustituye la barra de progreso lisa) */
.lf-fila-barra { display: flex; gap: 6px; }
.lf-fila-seg { flex: 1; height: 10px; border-radius: 999px; background: #FBD3B4; }
.lf-fila-seg-llena { background: var(--lf-primary); }

.lf-turno-datos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lf-sp-3); }
.lf-turno-dato {
    background: var(--lf-surface); border: 1px solid var(--lf-border);
    border-radius: 12px; padding: var(--lf-sp-4);
}
.lf-turno-dato span { display: block; font-size: 0.75rem; color: var(--lf-muted-fg); }
.lf-turno-dato strong {
    display: block; margin-top: var(--lf-sp-1);
    font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Aviso de "ya casi": cálido, no verde — el verde queda para estados de éxito. */
.lf-turno-alerta {
    display: flex; align-items: center; gap: var(--lf-sp-2);
    margin: 0; padding: var(--lf-sp-3) var(--lf-sp-4);
    background: var(--lf-info-bg); border: 1px solid var(--lf-info-border);
    border-radius: 12px; color: var(--lf-info-fg);
    font-size: var(--lf-text-sm); font-weight: 600;
}
.lf-turno-alerta::before {
    content: ''; width: 8px; height: 8px; border-radius: 999px;
    background: var(--lf-primary); flex: none;
    animation: lf-pulso-vivo 2s ease-in-out infinite;
}

.lf-turno-acciones { display: flex; flex-direction: column; gap: var(--lf-sp-3); margin-top: var(--lf-sp-2); }
.lf-turno-avisar { min-height: 60px; font-family: var(--lf-font-heading); font-size: var(--lf-text-lg); font-weight: 700; }
.lf-turno-avisar svg { width: 22px; height: 22px; flex: none; }
.lf-turno-nota { margin: var(--lf-sp-2) 0 0; text-align: center; font-size: 0.75rem; color: var(--lf-muted-fg); }

/* Llamado: pantalla completa en el naranja de marca (antes verde). */
.lf-llamado {
    flex: 1; min-height: 100dvh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--lf-sp-1); padding: var(--lf-sp-8);
    background: var(--lf-primary); color: #FFFFFF; text-align: center;
}
.lf-llamado-kicker {
    margin: 0; font-family: ui-monospace, Menlo, monospace;
    font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgb(255 255 255 / 0.85);
}
.lf-llamado-titulo { margin: var(--lf-sp-3) 0 0; font-family: var(--lf-font-heading); font-size: clamp(2rem, 9vw, 2.75rem); font-weight: 800; }
.lf-llamado-codigo {
    margin: var(--lf-sp-6) 0 0; font-family: var(--lf-font-heading);
    font-size: clamp(5rem, 30vw, 9rem); line-height: 0.9; font-weight: 800;
    letter-spacing: -0.05em; font-variant-numeric: tabular-nums;
}
.lf-llamado-modulo {
    margin-top: var(--lf-sp-6); padding: var(--lf-sp-5) var(--lf-sp-8);
    background: #FFFFFF; color: var(--lf-fg); border-radius: 16px;
}
.lf-llamado-modulo span { display: block; font-size: var(--lf-text-sm); color: var(--lf-muted-fg); }
.lf-llamado-modulo strong {
    display: block; margin: var(--lf-sp-1) 0;
    font-family: var(--lf-font-heading); font-size: 2rem; font-weight: 800; color: var(--lf-primary);
}
@media (max-width: 380px) {
    .lf-turno-datos { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .lf-turno-alerta::before { animation: none !important; }
}
/* P5 — TV 3a "cálido claro" (reemplaza D-088). Fondo crema fijo (--lf-bg): el naranja
   de marca va en el panel del dato (héroe), no en el fondo completo, así el número se
   lee desde más lejos. El turno que se está llamando deja de ser una fila más de tabla
   y pasa a un panel héroe (letra + código + nombre + módulo); el resto de módulos y las
   noticias van en tarjetas de igual peso. El color del tenant (--tv-color) sigue
   respetándose: pinta el panel héroe y el borde inferior del header. */
.lf-tv {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: var(--lf-sp-6);
    padding: var(--lf-sp-8);
    background: var(--lf-bg);
    color: var(--lf-fg);
}

.lf-tv-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--lf-sp-4);
    border-bottom: 4px solid var(--tv-color, var(--lf-primary));
    padding-bottom: var(--lf-sp-4);
}
.lf-tv-marca-sede { display: flex; align-items: center; gap: var(--lf-sp-4); text-align: left; }
.lf-tv-marca-sede h1 { margin: 0; font-size: clamp(1.75rem, 2.4vw, 2.75rem); }
.lf-tv-sede-nombre { margin: 0; color: var(--lf-muted-fg); font-size: clamp(1rem, 1.3vw, 1.5rem); }
.lf-tv-logo { max-height: 88px; }
.lf-tv-inicial {
    display: inline-flex; align-items: center; justify-content: center;
    width: 4.5rem; height: 4.5rem; border-radius: var(--lf-radius);
    background: var(--tv-color, var(--lf-primary)); color: var(--lf-on-primary);
    font-family: var(--lf-font-heading); font-size: 2.5rem; font-weight: 800;
}
.lf-tv-header-derecha { display: flex; align-items: center; gap: var(--lf-sp-4); flex-wrap: wrap; }
.lf-tv-hora {
    font-family: var(--lf-font-heading); font-weight: 700;
    font-size: clamp(1.75rem, 2.4vw, 2.75rem); font-variant-numeric: tabular-nums;
}
.lf-tv-conexion { font-size: var(--lf-text-sm); padding: var(--lf-sp-1) var(--lf-sp-3); border-radius: 999px; }

.lf-tv-vacio { text-align: center; font-size: var(--lf-text-2xl); color: var(--lf-muted-fg); }

/* Panel héroe: el turno que se está llamando (o último en atención), con el color del tenant. */
.lf-tv-heroe {
    display: grid; grid-template-columns: 1.4fr 1fr; align-items: center;
    gap: var(--lf-sp-8);
    background: var(--tv-color, var(--lf-primary)); color: #FFFFFF;
    border-radius: 24px; padding: var(--lf-sp-8);
}
.lf-tv-heroe-dato { display: flex; flex-direction: column; }
.lf-tv-heroe-kicker {
    margin: 0; font-family: ui-monospace, Menlo, monospace;
    font-size: clamp(0.9rem, 1.3vw, 1.5rem); letter-spacing: 0.2em; text-transform: uppercase;
    color: rgb(255 255 255 / 0.85);
}
.lf-tv-heroe-codigo {
    margin: var(--lf-sp-2) 0 0; font-family: var(--lf-font-heading);
    font-size: clamp(4rem, 10vw, 11rem); line-height: 0.88; font-weight: 800;
    letter-spacing: -0.05em; font-variant-numeric: tabular-nums;
}
.lf-tv-heroe-persona { margin: var(--lf-sp-3) 0 0; font-size: clamp(1.25rem, 2vw, 2.25rem); color: rgb(255 255 255 / 0.9); }
.lf-tv-heroe-modulo {
    text-align: center; background: #FFFFFF; color: var(--lf-fg);
    border-radius: 20px; padding: var(--lf-sp-6);
}
.lf-tv-heroe-modulo-label { margin: 0; font-size: clamp(1rem, 1.4vw, 1.5rem); color: var(--lf-muted-fg); }
.lf-tv-heroe-modulo-letra {
    margin: var(--lf-sp-2) 0 0; font-family: var(--lf-font-heading);
    font-size: clamp(3.5rem, 7vw, 7rem); line-height: 1; font-weight: 800;
    color: var(--tv-color, var(--lf-primary));
}
.lf-tv-heroe-modulo-nombre { margin: var(--lf-sp-1) 0 0; font-size: clamp(1.1rem, 1.6vw, 2rem); }
/* Llamando: pulso sobrio (sin blur, apto TV de bajos recursos), en el color del tenant. */
.lf-tv-heroe-llamando { animation: lf-tv-heroe-pulso 1.4s ease-in-out infinite; }
@keyframes lf-tv-heroe-pulso {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tv-color, var(--lf-primary)) 35%, transparent); }
    50% { box-shadow: 0 0 0 18px color-mix(in srgb, var(--tv-color, var(--lf-primary)) 0%, transparent); }
}

/* Módulos restantes + noticias: tarjetas del mismo peso. */
.lf-tv-grid {
    flex: 1; display: grid; gap: var(--lf-sp-6);
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    align-content: start;
}
.lf-tv-modulo-card {
    background: var(--lf-surface); border: 1px solid var(--lf-border);
    border-radius: 20px; padding: var(--lf-sp-6);
    display: flex; flex-direction: column; gap: var(--lf-sp-2);
}
.lf-tv-modulo-head { display: flex; align-items: center; gap: var(--lf-sp-4); }
.lf-tv-modulo-letra {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3.5rem; height: 3.5rem; border-radius: 12px;
    background: var(--lf-accent-soft); color: var(--lf-primary);
    font-family: var(--lf-font-heading); font-size: 1.75rem; font-weight: 800; flex: none;
}
.lf-tv-modulo-nombre { font-size: clamp(1rem, 1.3vw, 1.5rem); color: var(--lf-muted-fg); }
.lf-tv-modulo-codigo {
    margin: var(--lf-sp-2) 0 0; font-family: var(--lf-font-heading);
    font-size: clamp(2.5rem, 4vw, 4.75rem); line-height: 1; font-weight: 800;
    letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.lf-tv-modulo-libre { color: #C4B3A5; }
.lf-tv-modulo-persona { margin: 0; font-size: clamp(1rem, 1.3vw, 1.5rem); color: var(--lf-muted-fg); }
.lf-tv-anteriores { margin: auto 0 0; font-size: var(--lf-text-lg); color: var(--lf-muted-fg); }
.lf-tv-fila-resaltada { animation: lf-tv-pulso 1.4s ease-in-out 2; }
@keyframes lf-tv-pulso {
    0%, 100% { background: var(--lf-surface); }
    50% { background: var(--lf-accent-soft); }
}

/* Propaganda LineFlow al pie del TV. */
.lf-tv-propaganda {
    margin-top: auto; padding-top: var(--lf-sp-4);
    display: flex; align-items: center; justify-content: space-between; gap: var(--lf-sp-4); flex-wrap: wrap;
    color: var(--lf-muted-fg); font-size: var(--lf-text-lg);
    border-top: 1px solid var(--lf-border);
}
.lf-tv-propaganda strong { color: var(--lf-primary); }
.lf-tv-marca { font-family: var(--lf-font-heading); font-weight: 800; font-size: var(--lf-text-xl); color: var(--lf-fg); }

@media (max-width: 900px) {
    .lf-tv-heroe { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .lf-tv-heroe-llamando { animation: none !important; }
}

/* P6 — Consola del cajero 3a: shell a pantalla completa (cabecera fija, cuerpo con scroll,
   pie fijo con acciones + pestañas — alcance del pulgar). Reemplaza el bloque anterior de
   .lf-consola-header/.lf-consola-siguiente/.lf-consola-grid3.
   Se conservan .lf-tabs/.lf-tab/.lf-tab-activa/.lf-tab-conteo/.lf-estado-botones/.lf-card
   (definidos más abajo); aquí solo se ancla .lf-tabs-pie al pie sin su sticky superior. */
.lf-consola { padding-block: var(--lf-sp-4); display: flex; flex-direction: column; gap: var(--lf-sp-4); }

.lf-consola-shell {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    max-width: 560px;
    margin-inline: auto;
    background: var(--lf-bg);
}

.lf-consola-top {
    display: flex; align-items: center; justify-content: space-between; gap: var(--lf-sp-3);
    padding: var(--lf-sp-3) var(--lf-sp-5);
    background: var(--lf-primary); color: var(--lf-on-primary);
}
.lf-consola-top-modulo { display: flex; align-items: center; gap: var(--lf-sp-3); min-width: 0; }
.lf-consola-top-modulo strong { display: block; font-size: var(--lf-text-base); }
.lf-consola-top-modulo span { font-size: var(--lf-text-sm); color: rgb(255 255 255 / 0.8); }
.lf-consola-top-letra {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--lf-radius);
    background: rgb(255 255 255 / 0.22);
    font-family: var(--lf-font-heading); font-size: 1.125rem; font-weight: 800; flex: none;
}
.lf-consola-top-estado {
    flex: none; padding: 5px 10px; border-radius: 999px;
    background: rgb(255 255 255 / 0.2); font-size: var(--lf-text-sm); font-weight: 600;
}

/* P6/5.3 — banda fija con el estado del cajero cuando no es "En atención": visible en
   cualquier pestaña, no solo en Gestión, para que no se le olvide que la fila está detenida. */
.lf-consola-banda-estado {
    padding: var(--lf-sp-2) var(--lf-sp-5);
    background: var(--lf-info-bg); border-bottom: 1px solid var(--lf-info-border); color: var(--lf-info-fg);
    font-size: var(--lf-text-sm); font-weight: 600; text-align: center;
}
.lf-consola-banda-estado-urgente {
    background: var(--lf-error-bg); border-bottom-color: var(--lf-destructive); color: var(--lf-destructive);
}

.lf-consola-cuerpo {
    flex: 1; overflow-y: auto;
    padding: var(--lf-sp-5);
    display: flex; flex-direction: column; gap: var(--lf-sp-4);
}

/* Turno actual */
.lf-consola-actual {
    display: flex; align-items: flex-end; justify-content: space-between; gap: var(--lf-sp-4);
    background: var(--lf-surface); border: 1px solid var(--lf-border);
    border-radius: 14px; padding: var(--lf-sp-5);
}
.lf-consola-kicker {
    margin: 0; font-family: ui-monospace, Menlo, monospace;
    font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lf-muted-fg);
}
.lf-consola-codigo {
    margin: var(--lf-sp-1) 0 0; font-family: var(--lf-font-heading);
    font-size: 3.5rem; line-height: 1; font-weight: 800; letter-spacing: -0.03em;
    color: var(--lf-primary); font-variant-numeric: tabular-nums;
}
.lf-consola-persona { margin: var(--lf-sp-2) 0 0; font-size: var(--lf-text-base); color: var(--lf-fg); }
.lf-consola-celular { margin: 2px 0 0; font-size: var(--lf-text-sm); color: var(--lf-muted-fg); }
/* En VIP/Gestión el turno actual es contexto: misma tarjeta, todo más pequeño. */
.lf-consola-compacta { align-items: center; padding: var(--lf-sp-3) var(--lf-sp-4); }
.lf-consola-compacta .lf-consola-codigo { font-size: var(--lf-text-2xl); }
.lf-consola-compacta .lf-consola-persona { font-size: var(--lf-text-sm); margin-top: 2px; }
.lf-consola-compacta .lf-consola-celular { display: none; }

/* Listas (Próximos / VIP) */
.lf-consola-lista { display: flex; flex-direction: column; gap: var(--lf-sp-2); }
.lf-consola-lista-head { display: flex; align-items: baseline; justify-content: space-between; }
.lf-consola-lista-head .lf-muted { font-size: var(--lf-text-sm); }

.lf-consola-proximos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--lf-sp-2); }
.lf-consola-proximos li {
    display: flex; align-items: center; gap: var(--lf-sp-3);
    padding: var(--lf-sp-3) var(--lf-sp-4);
    background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: 10px;
}
.lf-consola-proximos strong {
    min-width: 3.6rem; font-size: 1.0625rem; font-variant-numeric: tabular-nums; color: var(--lf-fg);
}
.lf-consola-proximos span { flex: 1; font-size: var(--lf-text-sm); }
.lf-consola-proximos em { font-style: normal; font-size: var(--lf-text-sm); font-weight: 600; color: var(--lf-info-fg); }
/* El siguiente a llamar se distingue sin depender solo del color. */
.lf-consola-proximo-siguiente { background: var(--lf-info-bg); border-color: var(--lf-info-border); }
.lf-consola-proximo-siguiente strong { color: var(--lf-primary); }

.lf-vip-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--lf-sp-2); }
.lf-vip-lista li {
    display: flex; align-items: center; gap: var(--lf-sp-3);
    padding: var(--lf-sp-3) var(--lf-sp-4);
    background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: 12px;
}
.lf-vip-lista li div { flex: 1; min-width: 0; }
.lf-vip-lista li strong { display: block; font-size: var(--lf-text-base); }
.lf-vip-lista li span { font-size: var(--lf-text-sm); color: var(--lf-muted-fg); }
.lf-vip-lista svg { width: 22px; height: 22px; flex: none; }
/* Oro del premium (mismo criterio que .lf-btn-premium): nivel, no marca. */
.lf-vip-activo { background: var(--lf-vip-bg); border-color: var(--lf-vip-border); border-width: 1.5px; }

.lf-consola-traslado { display: flex; gap: var(--lf-sp-2); }

/* ---------- Pie: acciones fijas + pestañas ---------- */
.lf-consola-pie {
    position: sticky; bottom: 0; z-index: 20;
    background: var(--lf-muted); border-top: 1px solid var(--lf-border);
    padding: var(--lf-sp-3) var(--lf-sp-5) calc(var(--lf-sp-4) + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; gap: var(--lf-sp-3);
}
.lf-consola-principal {
    width: 100%; min-height: 84px; border-radius: 14px;
    font-family: var(--lf-font-heading); font-size: 1.5rem; font-weight: 800;
}
.lf-consola-principal svg { width: 28px; height: 28px; flex: none; }
.lf-kbd {
    font-family: var(--lf-font); font-size: 0.7rem; line-height: 1; font-weight: 600;
    padding: 3px 6px; border-radius: 4px; border: 1px solid currentColor; opacity: 0.65;
}

.lf-consola-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--lf-sp-2); }
.lf-consola-grid4 .lf-btn {
    flex-direction: column; gap: 4px;
    min-height: 56px; padding: var(--lf-sp-2) 4px;
    border-radius: 12px; font-size: 0.6875rem; font-weight: 600;
}
.lf-consola-grid4 svg { width: 18px; height: 18px; flex: none; }

/* Las pestañas ya no van sticky arriba: viven en el pie. */
.lf-tabs-pie { position: static; top: auto; background: transparent; padding: 0; gap: 4px; }
.lf-tabs-pie .lf-tab { border-radius: 10px; font-size: var(--lf-text-sm); box-shadow: none; }
.lf-tabs-pie .lf-tab-activa { background: var(--lf-primary); color: var(--lf-on-primary); }
.lf-tabs-pie .lf-tab-activa .lf-tab-conteo { background: rgb(255 255 255 / 0.25); }

@media (max-width: 360px) {
    .lf-consola-grid4 { grid-template-columns: repeat(2, 1fr); }
    .lf-consola-codigo { font-size: 3rem; }
}

/* Días de atención del módulo: chips-checkbox L…D (D-076) */
.lf-dias-semana { display: flex; gap: var(--lf-sp-1); flex-wrap: wrap; }
.lf-dia-check {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; border-radius: var(--lf-radius-sm);
    border: 1px solid var(--lf-border); background: var(--lf-surface);
    font-weight: 600; cursor: pointer; user-select: none;
}
.lf-dia-check input { position: absolute; opacity: 0; pointer-events: none; }
.lf-dia-activo { background: var(--lf-primary); border-color: var(--lf-primary); color: var(--lf-on-primary); }

/* Vistas lista/cuadrícula para favoritos y resultados del inicio */
.lf-vista-toggle { display: flex; gap: var(--lf-sp-4); justify-content: flex-end; margin-top: var(--lf-sp-4); }
.lf-vista-toggle button {
    display: inline-flex; align-items: center; gap: 4px;
    background: none; border: none; padding: var(--lf-sp-1) 2px;
    min-height: 32px; font-family: inherit; font-size: var(--lf-text-sm); font-weight: 600;
    color: var(--lf-muted-fg); cursor: pointer;
}
.lf-vista-toggle button[aria-pressed="true"] { color: var(--lf-primary); text-decoration: underline; text-underline-offset: 3px; }
.lf-vista-toggle button svg { width: 16px; height: 16px; }
.lf-coleccion { display: flex; flex-direction: column; gap: var(--lf-sp-3); }
.lf-coleccion.lf-cuadricula { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); align-items: stretch; }
/* Tarjetas del mismo tamaño siempre, sin importar el largo del nombre o la
   dirección: se recorta el texto a un número fijo de líneas y las acciones
   se anclan abajo. */
.lf-coleccion.lf-cuadricula .lf-sede-card { height: 100%; }
.lf-coleccion.lf-cuadricula .lf-sede-card-info strong {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lf-coleccion.lf-cuadricula .lf-sede-card-info .lf-muted {
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.lf-coleccion.lf-cuadricula .lf-sede-card-acciones { margin-top: auto; }

/* Tarjeta de sede (favorita o resultado de búsqueda) — Home.razor, 3a: un CTA fuerte + dos acciones cuadradas */
.lf-sede-card { display: flex; flex-direction: column; gap: var(--lf-sp-3); background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: 14px; padding: var(--lf-sp-4); transition: background var(--lf-motion-normal) var(--lf-ease); }
.lf-sede-card-favorita { background: var(--lf-info-bg); border-color: var(--lf-info-border); }
.lf-sede-card-cuerpo { display: flex; align-items: flex-start; gap: var(--lf-sp-3); text-decoration: none; color: inherit; }
.lf-sede-card-cuerpo:hover { text-decoration: none; }
.lf-sede-card-logo { flex: none; width: 44px; height: 44px; object-fit: contain; border-radius: 10px; background: var(--lf-accent-soft); }
.lf-sede-card-logo-inicial {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--lf-primary); font-family: var(--lf-font-heading); font-weight: 800; font-size: var(--lf-text-xl);
}
.lf-sede-card-favorita .lf-sede-card-logo-inicial { background: var(--lf-primary); color: var(--lf-on-primary); }
.lf-sede-card-info { flex: 1; display: flex; flex-direction: column; gap: var(--lf-sp-1); min-width: 0; overflow-wrap: break-word; }
.lf-sede-card-info strong { font-size: var(--lf-text-base); overflow-wrap: break-word; }
.lf-sede-card-acciones { display: flex; gap: var(--lf-sp-2); }
.lf-sede-card-acciones .lf-btn-turno { flex: 1; min-height: 48px; font-weight: 700; justify-content: center; }
.lf-sede-card-acciones .lf-btn-icon { width: 48px; min-height: 48px; }
.lf-sede-card-badge-fila { flex: none; margin-left: auto; white-space: nowrap; background: var(--lf-surface); color: var(--lf-info-fg); font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
    .lf-sede-card-cuerpo:hover .lf-sede-card-info strong { color: var(--lf-primary); }
}
.lf-tabs {
    display: flex; gap: var(--lf-sp-1);
    background: var(--lf-muted); padding: 4px; border-radius: 999px;
    position: sticky; top: var(--lf-sp-2); z-index: 10;
}
.lf-tab {
    flex: 1; min-height: 44px; border: none; background: transparent;
    padding: var(--lf-sp-2) var(--lf-sp-3); border-radius: 999px;
    font-weight: 600; font-size: var(--lf-text-base);
    color: var(--lf-muted-fg); cursor: pointer;
    transition: background var(--lf-transition), color var(--lf-transition);
}
.lf-tab-activa { background: var(--lf-surface); color: var(--lf-primary); box-shadow: var(--lf-shadow); }
.lf-estado-botones { display: grid; grid-template-columns: 1fr; gap: var(--lf-sp-2); }
@media (min-width: 420px) { .lf-estado-botones { grid-template-columns: repeat(3, 1fr); } }
.lf-estado-botones .lf-btn { font-size: var(--lf-text-sm); padding-inline: var(--lf-sp-2); }
.lf-tab .lf-tab-conteo {
    display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px;
    border-radius: 999px; background: var(--lf-accent); color: #fff;
    font-size: 0.75rem; line-height: 20px;
}

@media (max-width: 640px) {
    .lf-tv { padding: var(--lf-sp-4); }
    .lf-tv-marca-sede { flex-direction: column; text-align: center; }
}

/* Modal de confirmación (LfConfirmar) */
.lf-modal-fondo {
    position: fixed; inset: 0; z-index: 100;
    background: rgb(0 0 0 / 0.5);
    display: flex; align-items: center; justify-content: center;
    padding: var(--lf-sp-4);
}
.lf-modal { width: 100%; max-width: 26rem; }
/* Confirmar siempre por encima de otro modal abierto (ej. Estado dentro de Editar sede) */
.lf-modal-fondo-top { z-index: 110; }
.lf-modal-form { max-width: 44rem; max-height: 90vh; overflow-y: auto; }
.lf-modal .lf-row-actions { justify-content: flex-end; }

/* Navegación de administración */
/* --lf-on-primary (no #fff fijo): en modo oscuro --lf-primary se aclara y el texto
   debe oscurecerse para seguir en AA — igual que cualquier botón primario. */
.lf-admin-nav { background: var(--lf-primary); color: var(--lf-on-primary); }
.lf-admin-nav-inner { display: flex; justify-content: space-between; align-items: center; padding-block: var(--lf-sp-3); flex-wrap: wrap; gap: var(--lf-sp-2); }
.lf-admin-links { display: flex; gap: var(--lf-sp-2) var(--lf-sp-4); flex-wrap: wrap; }
.lf-admin-links a {
    color: var(--lf-on-primary); font-weight: 500;
    display: inline-flex; align-items: center;
    min-height: var(--lf-target); padding-inline: var(--lf-sp-4);
    border-radius: 999px;
}
.lf-admin-links a:hover { background: rgb(255 255 255 / 0.18); }
.lf-admin-links a[aria-current="page"] { background: #FFFFFF; color: var(--lf-info-fg); }
.lf-admin-salir { margin-left: auto; opacity: 0.85; }

/* ---------- Error UI de Blazor ---------- */

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: #0C0A09;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
    background: none;
    border: none;
    font-size: 1rem;
    padding: 0.25rem 0.5rem;
    color: inherit;
}

#blazor-error-ui .dismiss svg { width: 16px; height: 16px; flex: none; }

.lf-powered a { color: var(--lf-muted-fg); font-weight: 500; }
.lf-powered a:hover { color: var(--lf-accent-hover); }

/* ---- Fase 2 ---- */

/* RN-15: el buscador de turno del TV solo aparece en la vista compacta (celular). */
.lf-tv-buscar { display: none; }
@media (max-width: 768px) {
    .lf-tv-buscar { display: inline-flex; margin-top: var(--lf-sp-2); }
}

.lf-card-link { text-decoration: none; color: inherit; }
.lf-card-link:hover { border-color: var(--lf-primary); }
.lf-lista-simple { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--lf-sp-2); }

/* ---- Fase 3: chat asistente (P10) ---- */
.lf-chat { position: fixed; right: var(--lf-sp-4); bottom: var(--lf-sp-4); z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: var(--lf-sp-2); }
.lf-chat-ventana { width: min(360px, calc(100vw - 2rem)); height: min(480px, 70dvh); display: flex; flex-direction: column; padding: 0; overflow: hidden; border-radius: 14px; }
.lf-chat-cabecera { display: flex; justify-content: space-between; align-items: center; padding: var(--lf-sp-3) var(--lf-sp-4); border-bottom: 1px solid var(--lf-border); background: var(--lf-muted); }
.lf-chat-cerrar { background: none; border: none; cursor: pointer; font-size: 1rem; min-width: 44px; min-height: 44px; }
.lf-chat-mensajes { flex: 1; overflow-y: auto; padding: var(--lf-sp-3); display: flex; flex-direction: column; gap: var(--lf-sp-2); }
.lf-chat-burbuja { max-width: 85%; padding: var(--lf-sp-2) var(--lf-sp-3); border-radius: 12px; line-height: 1.45; }
.lf-chat-burbuja p { margin: 0; }
.lf-chat-usuario { align-self: flex-end; background: var(--lf-primary); color: var(--lf-on-primary); }
.lf-chat-asistente { align-self: flex-start; background: var(--lf-muted); color: var(--lf-fg); }
.lf-chat-tarjeta { display: flex; flex-direction: column; gap: var(--lf-sp-2); }
.lf-chat-tarjeta .lf-card { padding: var(--lf-sp-3); margin: 0; border-radius: 10px; }
.lf-chat-entrada { display: flex; gap: var(--lf-sp-2); padding: var(--lf-sp-3); border-top: 1px solid var(--lf-border); }
.lf-chat-entrada .lf-input { flex: 1; }
.lf-chat-boton {
    width: 56px; height: 56px; min-width: 56px; min-height: 56px;
    padding: 0; border-radius: 50%; font-size: 1.5rem;
    background: var(--lf-primary); color: var(--lf-on-primary);
    box-shadow: 0 4px 16px rgb(67 41 27 / 0.25);
}

/* RF-E4: carrusel de noticias del TV — ahora una tarjeta más de .lf-tv-grid, mismo peso
   que los módulos (rediseño 3a). D-091: transición "cambio de página" — la saliente y la
   entrante conviven en el mismo contenedor (stack con position: absolute para la saliente)
   y se cruzan con deslizamiento + desvanecido, sin pasar por un estado vacío en medio. */
.lf-tv-noticias-stack { position: relative; }
.lf-tv-noticias {
    padding: var(--lf-sp-6); background: var(--lf-info-bg);
    border: 1px solid var(--lf-info-border); border-radius: 20px; text-align: center; color: var(--lf-fg);
}
.lf-tv-noticias-saliente { position: absolute; inset: 0; z-index: 2; animation: lf-tv-pagina-sale 0.9s ease forwards; }
.lf-tv-noticias-entrante { animation: lf-tv-pagina-entra 0.9s ease; }
@keyframes lf-tv-pagina-sale {
    from { opacity: 1; transform: translateX(0) scale(1); }
    to { opacity: 0; transform: translateX(-4%) scale(0.97); }
}
@keyframes lf-tv-pagina-entra {
    from { opacity: 0; transform: translateX(4%) scale(0.98); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}
.lf-tv-noticias strong {
    display: block; font-family: var(--lf-font-heading); font-weight: 800; line-height: 1.15;
    font-size: clamp(1.5rem, 2.2vw, 2.25rem); margin: var(--lf-sp-3) 0 0; color: var(--lf-fg);
}
.lf-tv-noticias p { margin: var(--lf-sp-2) 0 0; font-size: clamp(1.1rem, 1.5vw, 1.6rem); color: var(--lf-muted-fg); }
.lf-tv-noticias .lf-badge { background: var(--lf-surface); color: var(--lf-info-fg); font-size: var(--lf-text-lg); }
.lf-tv-noticias-puntos { display: flex; justify-content: center; gap: var(--lf-sp-2); margin-top: var(--lf-sp-4); }
.lf-tv-noticias-punto {
    width: 10px; height: 10px; border-radius: 999px; background: rgb(67 41 27 / 0.15);
    transition: width 0.4s ease, background 0.4s ease;
}
.lf-tv-noticias-punto-activo { width: 28px; background: var(--lf-primary); }
.lf-tv-noticias-marca .lf-tv-marca { font-size: var(--lf-text-xl); }
.lf-tv-noticias-marca p { font-size: var(--lf-text-base); margin-top: var(--lf-sp-2); }

/* ---- Fase 5: dashboard ---- */
.lf-kpi { text-align: left; }
.lf-kpi span { display: block; color: var(--lf-text-muted); font-size: 0.85rem; }
.lf-kpi strong {
    display: block; font-family: var(--lf-font-heading); font-size: 2.5rem;
    line-height: 1; font-variant-numeric: tabular-nums;
}
.lf-kpi-variacion { display: block; margin-top: var(--lf-sp-1); font-size: 0.8rem; }
.lf-kpi-variacion-mejora { color: var(--lf-success); }
.lf-kpi-variacion-mala { color: var(--lf-destructive); }
.lf-kpi-variacion-igual { color: var(--lf-muted-fg); }
/* D-108: texto explicativo bajo cada tarjeta ("qué significa / qué hacer"). */
.lf-kpi-explica { margin: var(--lf-sp-2) 0 0; font-size: var(--lf-text-sm); color: var(--lf-muted-fg); line-height: 1.4; }

/* Auditoría UX Fase 0 (2026-08): clases lf-* usadas en el markup sin regla CSS. */
.lf-admin-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--lf-sp-6); flex-wrap: wrap;
}
.lf-admin-head h1 { margin: 0; }
.lf-kpi-principal { border-top: 4px solid var(--lf-primary); }
.lf-kpi-total { background: var(--lf-info-bg); border-color: var(--lf-info-border); color: var(--lf-info-fg); }
.lf-sugerencias { border-left: 4px solid var(--lf-primary); }

/* Tabla de módulos: chip de letra + badge VIP + bloques de checkbox. */
.lf-tabla-letra {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--lf-radius);
    background: var(--lf-accent-soft); color: var(--lf-primary);
    font-family: var(--lf-font-heading); font-weight: 800;
}
.lf-tabla-vip {
    display: inline-block; padding: 2px var(--lf-sp-2); border-radius: 999px;
    border: 1px solid var(--lf-vip-border); background: var(--lf-vip-bg); color: var(--lf-vip-text);
    font-size: var(--lf-text-sm); font-weight: 700;
}
.lf-check-bloque {
    display: flex; align-items: flex-start; gap: var(--lf-sp-3); padding: var(--lf-sp-4);
    background: var(--lf-info-bg); border: 1px solid var(--lf-info-border); border-radius: 10px;
}
.lf-check-bloque-vip { background: var(--lf-vip-bg); border-color: var(--lf-vip-border); }

/* Logo actual + zona de subida (AdminEmpresa). */
.lf-logo-actual {
    display: inline-flex; padding: var(--lf-sp-3);
    background: var(--lf-muted); border: 1px solid var(--lf-info-border); border-radius: var(--lf-radius);
}
.lf-logo-actual img { max-height: 96px; object-fit: contain; }
.lf-subir {
    border: 1.5px dashed var(--lf-info-border); border-radius: var(--lf-radius);
    background: var(--lf-bg); padding: var(--lf-sp-4);
}

/* Botón "PDF del QR": no es una acción destructiva, no va en rojo. */
.lf-btn-qr { background: var(--lf-info-bg); border: 1px solid var(--lf-info-border); color: var(--lf-info-fg); }

/* Superadmin: nav en naranja profundo (distinta de .lf-admin-nav) + tabs sin sticky + bloque RN-12. */
.lf-superadmin-nav { background: var(--lf-accent); color: var(--lf-on-primary); }
.lf-tabs-admin { position: static; width: auto; align-self: flex-start; }
.lf-rn12 { border-left: 4px solid var(--lf-destructive); }
/* justify-content:flex-start evita que 1-2 barras se estiren a todo el ancho del
   contenedor cuando hay pocos días en el rango; max-width en .lf-barra las mantiene
   delgadas incluso con pocos datos. */
.lf-barras { display: flex; align-items: flex-end; justify-content: flex-start; gap: var(--lf-sp-3); height: 160px; overflow-x: auto; padding-top: 2.25rem; padding-bottom: 1.4rem; }
.lf-barra {
    /* Hallazgo 5 (revisión ronda 1): target táctil ≥44px sin excepción — el botón es más ancho
       que la barra visual (32px), que queda centrada dentro con márgenes automáticos. */
    flex: 0 0 auto; width: var(--lf-target); max-width: var(--lf-target); display: flex;
    flex-direction: column; align-items: center; justify-content: flex-end; height: 100%;
    position: relative; border: none; background: transparent; padding: 0; font: inherit;
    color: inherit; cursor: pointer;
}
.lf-barra-seg { width: 32px; border-radius: 3px 3px 0 0; }
.lf-barra-si { background: var(--lf-primary); }
.lf-barra-no { background: var(--lf-barra-no); }
.lf-barra-etq { position: absolute; top: 100%; left: 0; right: 0; margin-top: var(--lf-sp-1); font-size: var(--lf-text-xs); text-align: center; color: var(--lf-text-muted); white-space: nowrap; }

/* D-108: mapa de calor hora × día (CSS grid, sin librería). Escala --lf-calor-1..6.
   Hallazgo 6 (revisión ronda 1): una sola grilla de 12 columnas (bloques de 2 h) para
   escritorio y móvil — antes había dos mapas completos en el DOM (uno oculto por CSS) con
   granularidad de 24 columnas en escritorio; el contenedor hace scroll horizontal propio
   (el cuerpo de la página nunca lo hace) si no cabe. Celdas ≥44px (12 × 44 = 528px).
   Hallazgo 11 (revisión final): padding-top suficiente para que el tooltip no quede fuera
   del scrollport. */
.lf-calor {
    display: grid; grid-template-columns: 2.4rem repeat(12, minmax(var(--lf-target), 1fr));
    gap: var(--lf-calor-gap); overflow-x: auto; padding-top: 2.25rem; padding-bottom: var(--lf-sp-2);
}
.lf-calor-etq-hora {
    font-size: var(--lf-text-xs); color: var(--lf-text-muted); text-align: center; align-self: end;
    padding-bottom: 2px;
}
.lf-calor-etq-dia {
    font-size: var(--lf-text-xs); color: var(--lf-text-muted); display: flex; align-items: center;
    padding-right: var(--lf-sp-1); white-space: nowrap;
}
.lf-calor-celda {
    aspect-ratio: 1; min-width: var(--lf-target); min-height: var(--lf-target);
    border: 1px solid var(--lf-border); border-radius: var(--lf-radius-sm); padding: 0; cursor: pointer; position: relative;
}

/* Hallazgo 14: los tres tooltips de detalle (barra del día, celda del calor, fila de
   espera por módulo) comparten fondo/tipografía/transición — solo cambia su ancla. */
.lf-barra-detalle,
.lf-calor-detalle,
.lf-espera-modulo-detalle {
    position: absolute;
    background: var(--lf-fg); color: var(--lf-bg); padding: var(--lf-sp-1) var(--lf-sp-2);
    border-radius: var(--lf-radius-sm); font-size: var(--lf-text-xs); white-space: nowrap; z-index: 1;
    opacity: 0; pointer-events: none; transition: opacity var(--lf-transition);
}
.lf-barra-detalle { bottom: calc(100% + var(--lf-sp-1)); left: 50%; transform: translateX(-50%); }
.lf-calor-detalle { bottom: calc(100% + var(--lf-sp-1)); left: 50%; transform: translateX(-50%); }
/* Hallazgo 11: la última columna del calor (22–24h) desbordaba por la derecha con textos
   largos ("miércoles 22–24h — 12") y añadía scroll horizontal permanente. */
.lf-calor-celda-ultima .lf-calor-detalle { left: auto; right: 0; transform: none; }
.lf-espera-modulo-detalle { top: 100%; left: var(--lf-espera-modulo-etq-ancho); margin-top: 2px; }

/* Hallazgo 11: `:focus-visible` no se activa al tocar un <button> en Chrome ni Safari, así
   que en táctil el detalle nunca se revelaba pese a existir por eso mismo. `:focus` sí. */
.lf-barra:hover .lf-barra-detalle, .lf-barra:focus .lf-barra-detalle,
.lf-calor-celda:hover .lf-calor-detalle, .lf-calor-celda:focus .lf-calor-detalle,
.lf-espera-modulo-fila:hover .lf-espera-modulo-detalle, .lf-espera-modulo-fila:focus .lf-espera-modulo-detalle {
    opacity: 1;
}

/* D-108: espera p50/p90 por módulo — barras horizontales + marca de p90. */
.lf-espera-modulos { display: flex; flex-direction: column; gap: var(--lf-sp-3); }
.lf-espera-modulo-fila {
    display: grid; grid-template-columns: var(--lf-espera-modulo-etq-ancho) 1fr; align-items: center; gap: var(--lf-sp-3);
    border: none; background: transparent; padding: var(--lf-sp-1) 0; cursor: pointer;
    text-align: left; font: inherit; color: inherit; position: relative; min-height: var(--lf-target);
}
.lf-espera-modulo-etq {
    font-family: var(--lf-font-heading); font-weight: 800; color: var(--lf-primary);
}
.lf-espera-modulo-barra {
    position: relative; height: var(--lf-espera-barra-alto); background: var(--lf-muted);
    border-radius: 999px; overflow: visible;
}
.lf-espera-modulo-p50 {
    display: block; height: 100%; background: var(--lf-primary); border-radius: 999px;
}
.lf-espera-modulo-p90 {
    position: absolute;
    top: calc((var(--lf-espera-barra-alto) - var(--lf-espera-marca-alto)) / 2);
    width: var(--lf-espera-marca-ancho); height: var(--lf-espera-marca-alto);
    background: var(--lf-accent); border-radius: var(--lf-radius-sm);
}
/* Hallazgo 11 (ronda 1): al llegar al 100% (peor 10% igual al máximo del gráfico) la marca
   se salía 3px del borde derecho de la tarjeta — se ancla desde su propio extremo derecho
   en vez de su borde izquierdo. */
.lf-espera-modulo-p90-tope { transform: translateX(-100%); }

/* Task 5: Loading state del botón "Tomar turno" */
.lf-btn-cargando { color: transparent !important; pointer-events: none; }
.lf-btn-cargando::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 18px; height: 18px; margin: -9px 0 0 -9px;
    border: 2px solid rgb(255 255 255 / 0.4); border-top-color: #fff;
    border-radius: 50%; animation: lf-spin 0.6s linear infinite;
}
@keyframes lf-spin { to { transform: rotate(360deg); } }

/* Task 7: estados vacío/error como tarjeta */
.lf-estado-vacio {
    max-width: 28rem; margin: var(--lf-sp-8) auto; padding: var(--lf-sp-8) var(--lf-sp-6);
    text-align: center; background: var(--lf-surface); border: 1px solid var(--lf-border);
    border-radius: 14px; box-shadow: var(--lf-shadow);
}
/* Hallazgo 10 (revisión final 2026-09-01): acotado a hijo directo — si no, empataba en
   especificidad con `.lf-btn svg` (línea 239) y ganaba por ir después, encogiendo el icono
   de cualquier `.lf-btn` anidado dentro de `.lf-estado-vacio` (p. ej. "Crea tu primera sede"). */
.lf-estado-vacio > svg { width: 40px; height: 40px; color: var(--lf-muted-fg); margin-bottom: var(--lf-sp-3); }
.lf-estado-vacio-error { border-top: 3px solid var(--lf-destructive); }

@media (prefers-reduced-motion: reduce) {
    .lf-modulo,
    .lf-modulo *,
    .lf-btn,
    #btn-favorito svg,
    .lf-badge-success-live::before,
    .lf-tv-noticias-saliente,
    .lf-tv-noticias-entrante,
    .lf-btn-cargando::after,
    .lf-barra-detalle,
    .lf-calor-detalle,
    .lf-espera-modulo-detalle {
        animation: none !important;
        transition: none !important;
    }
    .lf-btn-premium:hover, .lf-btn-premium:active { transform: none !important; }
}