/* ============================================================
   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 base LineFlow (el tenant aporta su color de acento en el TV).
       D-093: adoptada de Stitch "Vibrant Professionalism" — naranja vivo +
       navy profesional. El morado/dorado premium (VIP) se conserva aparte
       a propósito, como diferenciador de nivel (ver .lf-btn-premium). */
    --lf-primary: #F97316;       /* naranja vivo (Stitch primary) */
    --lf-on-primary: #FFFFFF;
    --lf-secondary: #EA580C;     /* naranja profundo — hover/active del primario */
    --lf-accent: #0F172A;        /* navy profesional (Stitch secondary) */
    --lf-accent-hover: #1E293B;
    --lf-bg: #F8FAFC;
    --lf-fg: #0F172A;
    --lf-muted: #F1F5F9;
    --lf-muted-fg: #64748B;
    --lf-text-muted: #64748B;
    --lf-success-bg: #DCFCE7;     /* fondo de estados de éxito (antes hex suelto) */
    --lf-error-bg: #FEE2E2;       /* fondo de estados de error */
    --lf-accent-soft: #F1F5F9;    /* navy suave para resaltados/fondos */
    --lf-accent-fuerte: #020617;  /* enlaces en hover */
    --lf-border: #E2E8F0;
    --lf-destructive: #DC2626;
    --lf-success: #15803D;
    --lf-ring: #F97316;
    --lf-surface: #FFFFFF;
    --lf-bg-top: #FFF7ED;         /* parte alta del gradiente del body */
    --lf-info-bg: #FFF7ED;        /* píldoras informativas (kicker) */
    --lf-info-fg: #9D4300;
    --lf-info-border: #FED7AA;
    --lf-barra-no: rgb(0 0 0 / 0.25); /* serie "no atendidos" del dashboard */
    --lf-tv: #2563EB;             /* azul del botón "Ver TV" en tablas admin */
    --lf-tv-hover: #1D4ED8;
    --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-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(23 21 58 / 0.08), 0 4px 12px rgb(23 21 58 / 0.06);
    --lf-shadow-lg: 0 4px 6px rgb(23 21 58 / 0.05), 0 12px 28px rgb(23 21 58 / 0.14);
    --lf-transition: 200ms ease-out;

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

/* 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: #1E293B;
        --lf-secondary: #FDBA74;
        --lf-accent: #CBD5E1;
        --lf-accent-hover: #E2E8F0;
        --lf-accent-fuerte: #F8FAFC;
        --lf-bg: #0B1220;
        --lf-bg-top: #131C2E;
        --lf-fg: #F1F5F9;
        --lf-muted: #1E293B;
        --lf-muted-fg: #94A3B8;
        --lf-text-muted: #94A3B8;
        --lf-success-bg: #10331E;
        --lf-error-bg: #3F1414;
        --lf-accent-soft: #1E293B;
        --lf-border: #334155;
        --lf-destructive: #F87171;
        --lf-success: #4ADE80;
        --lf-ring: #FB923C;
        --lf-surface: #172033;
        --lf-info-bg: #3A2410;
        --lf-info-fg: #FDBA74;
        --lf-info-border: #5C3319;
        --lf-barra-no: rgb(255 255 255 / 0.3);
        --lf-tv: #60A5FA;
        --lf-tv-hover: #93C5FD;
        --lf-on-tv: #1E293B;
    }
}

*, *::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);
}

/* ---------- 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);
}

.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;
}

.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: var(--lf-target);
    padding: var(--lf-sp-3) var(--lf-sp-4);
    border: 1px solid var(--lf-border);
    border-radius: var(--lf-radius-sm);
    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(249 115 22 / 0.35); }

.lf-label {
    display: block;
    font-size: var(--lf-text-sm);
    font-weight: 500;
    margin-bottom: var(--lf-sp-1);
    color: var(--lf-secondary);
}

.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;
}

/* 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; }
@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-size: var(--lf-text-2xl); font-weight: 700; padding: var(--lf-sp-4) var(--lf-sp-8); }
.lf-btn-danger { background: var(--lf-destructive); color: #fff; }
.lf-btn-danger:hover { background: #B91C1C; }

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

/* 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) */
.lf-barra-acceso { display: flex; justify-content: flex-end; gap: var(--lf-sp-2); margin-bottom: var(--lf-sp-2); flex-wrap: wrap; }
.lf-barra-acceso .lf-btn { font-size: var(--lf-text-sm); padding: var(--lf-sp-1) var(--lf-sp-3); min-height: 44px; }
.lf-hero h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); letter-spacing: -0.02em; margin-bottom: var(--lf-sp-1); }
/* Identidad dorada visible en la Home (D-070) */
.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-hero-divisor {
    width: 72px; height: 3px; border: none; border-radius: 999px;
    background: linear-gradient(90deg, var(--lf-primary), var(--lf-accent));
    margin: var(--lf-sp-2) auto 0;
}
.lf-features {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: 0 var(--lf-sp-1);
    margin-top: var(--lf-sp-1); color: var(--lf-muted-fg); font-weight: 500;
    font-size: 0.75rem;
}
.lf-features span::before {
    content: ''; display: inline-block; width: 5px; height: 5px;
    border-radius: 999px; background: var(--lf-accent);
    margin-right: var(--lf-sp-1); vertical-align: 1px;
}
.lf-card-destacada { border-top: 4px solid var(--lf-accent); 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; }

/* 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 */
.lf-sede-header { text-align: center; padding-block: var(--lf-sp-4) var(--lf-sp-3); }
.lf-sede-header h1 { font-size: var(--lf-text-2xl); margin-bottom: var(--lf-sp-1); }
/* 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, #2E1027, #431D3C 55%, #2E1027);
    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);
}
.lf-btn-premium:hover {
    background: linear-gradient(135deg, #431D3C, #5C2A54 55%, #431D3C);
    box-shadow: 0 4px 16px rgb(250 204 21 / 0.4), inset 0 1px 0 rgb(255 255 255 / 0.15);
}
.lf-btn-premium svg { width: 22px; height: 22px; flex: none; }
.lf-module-card { display: flex; flex-direction: column; gap: var(--lf-sp-2); height: 100%; }
/* Los botones de acción siempre quedan pegados abajo, sin importar cuántas líneas de datos
   (espera estimada, cupos, VIP) tenga cada módulo — evita que se vean a alturas distintas. */
.lf-module-card-acciones { margin-top: auto; padding-top: var(--lf-sp-2); }
.lf-module-fila { font-size: var(--lf-text-lg); font-weight: 600; }

/* P3/P4 — turno */
.lf-turno-codigo {
    font-size: var(--lf-text-turno);
    font-weight: 700;
    line-height: 1;    /* a este tamaño, la altura de línea heredada (1.6) dejaba un
                          hueco enorme arriba del número — el "espaciado" reportado. */
    text-align: center;
    letter-spacing: 0.02em;
    color: var(--lf-primary);
    margin: var(--lf-sp-4) 0;
}
.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; }
.lf-stat-fila {
    display: flex; align-items: center; gap: var(--lf-sp-3);
    padding: var(--lf-sp-2) 0; text-align: left;
    border-bottom: 1px solid var(--lf-border);
}
.lf-stat-fila:last-of-type { border-bottom: none; }
.lf-stat-icono {
    flex: none; width: 36px; height: 36px; border-radius: 999px;
    background: var(--lf-accent-soft); color: var(--lf-accent-hover);
    display: flex; align-items: center; justify-content: center;
}
.lf-stat-icono svg { width: 20px; height: 20px; }
.lf-stat-etiqueta { flex: 1; color: var(--lf-muted-fg); font-size: var(--lf-text-sm); }
.lf-stat-valor { font-weight: 700; font-variant-numeric: tabular-nums; }
.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; }
.lf-progress-track { width: 100%; height: 12px; border-radius: 999px; background: var(--lf-muted); overflow: hidden; }
.lf-progress-fill { height: 100%; background: var(--lf-accent); transition: width var(--lf-transition); }
/* flex:1 llena el lf-main del shell; min-height:100dvh anidado sumaba
   altura extra y dejaba franja blanca con el footer bajo el verde */
.lf-estado-llamado { background: var(--lf-success); color: #fff; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.lf-estado-llamado .lf-turno-codigo { color: #fff; }

/* P5 — TV (D-088): degradado vertical del color elegido por el tenant (arriba) a
   blanco (abajo) — --tv-color lo fija Tv.razor, con #2E1027 de respaldo si el tenant
   no configuró ninguno. Como el fondo deja de ser un color plano, las tarjetas de
   módulo y noticias usan un panel blanco sólido (no un velo translúcido): así se leen
   igual sin importar en qué punto del degradado caigan. Los --tv-* siguen gobernando
   SOLO el texto de cabecera/pie, que sí conocen su posición fija (arriba=color, abajo=blanco). */
.lf-tv {
    position: relative;
    min-height: 100dvh; display: flex; flex-direction: column;
    background: linear-gradient(180deg, var(--tv-color, #2E1027) 0%, #FFFFFF 100%);
    padding: var(--lf-sp-8);
    --tv-fg: #FFFFFF;
    --tv-fg-suave: rgb(255 255 255 / 0.75);
    color: var(--tv-fg);
}
/* Marca de agua: silueta de ticket de turno sobre TODO el fondo del TV, muy sutil (no compite con el dato). */
.lf-tv::before {
    content: "";
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'%3E%3Cpath d='M10 5h80a5 5 0 0 1 5 5v18a8 8 0 0 0 0 16v18a8 8 0 0 0 0 16v18a8 8 0 0 0 0 16v18a8 8 0 0 0 0 16v18a5 5 0 0 1-5 5H10a5 5 0 0 1-5-5v-18a8 8 0 0 0 0-16v-18a8 8 0 0 0 0-16v-18a8 8 0 0 0 0-16v-18a8 8 0 0 0 0-16V10a5 5 0 0 1 5-5z' fill='none' stroke='%23FFFFFF' stroke-width='2'/%3E%3Cline x1='20' y1='30' x2='80' y2='30' stroke='%23FFFFFF' stroke-width='2'/%3E%3Cline x1='20' y1='45' x2='60' y2='45' stroke='%23FFFFFF' stroke-width='2'/%3E%3Ctext x='50' y='95' font-size='30' text-anchor='middle' fill='%23FFFFFF' font-family='sans-serif' font-weight='700'%3E%23%3C/text%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: min(55%, 640px);
    opacity: 0.06;
}
.lf-tv-header, .lf-tv-layout, .lf-tv-propaganda { position: relative; z-index: 1; }
.lf-tv-header {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: var(--lf-sp-3); margin-bottom: var(--lf-sp-6);
}
.lf-tv-marca-sede { display: flex; align-items: center; gap: var(--lf-sp-4); text-align: left; }
.lf-tv-marca-sede h1 { margin: 0; }
.lf-tv-logo { max-height: 88px; }
.lf-tv-conexion { font-size: var(--lf-text-sm); padding: var(--lf-sp-1) var(--lf-sp-3); border-radius: 999px; }

/* D-090: tablero rediseñado como tabla (estándar de señalización digital de filas:
   una columna Módulo, una columna Turno en atención) en vez de tarjetas repetidas —
   más fácil de escanear de un vistazo desde lejos que una grilla de cards. El panel
   lateral separa branding/noticias del dato operativo (evita mezclar ambos en la
   misma tarjeta, que era la principal fuente de confusión reportada). */
.lf-tv-layout { flex: 1; display: grid; grid-template-columns: 1fr 1.7fr; gap: var(--lf-sp-6); align-items: start; }
.lf-tv-tabla-wrap {
    background: rgb(255 255 255 / 0.94); border: 1px solid rgb(0 0 0 / 0.08);
    border-radius: var(--lf-radius); box-shadow: var(--lf-shadow); overflow: hidden;
}
.lf-tv-tabla { width: 100%; border-collapse: collapse; color: #2B1B12; }
.lf-tv-tabla thead th {
    background: var(--lf-primary); color: var(--lf-on-primary);
    text-align: left; font-size: var(--lf-text-lg); font-weight: 600;
    padding: var(--lf-sp-3) var(--lf-sp-5);
}
.lf-tv-tabla tbody tr { border-bottom: 1px solid rgb(0 0 0 / 0.08); }
.lf-tv-tabla tbody tr:last-child { border-bottom: none; }
.lf-tv-celda-modulo, .lf-tv-celda-turno { padding: var(--lf-sp-4) var(--lf-sp-5); vertical-align: middle; }
.lf-tv-modulo-letra {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.4em; height: 2.4em; border-radius: 999px;
    background: var(--lf-muted); color: var(--lf-primary);
    font-size: var(--lf-text-2xl); font-weight: 700; margin-right: var(--lf-sp-3);
}
.lf-tv-modulo-nombre { font-size: var(--lf-text-lg); color: #7A6657; }
.lf-tv-turno-codigo {
    display: block; font-size: clamp(1.75rem, 4.5vw, 3.25rem); font-weight: 700;
    font-variant-numeric: tabular-nums; color: var(--lf-primary);
}
.lf-tv-anteriores { display: block; font-size: var(--lf-text-sm); color: #7A6657; margin-top: var(--lf-sp-1); }
/* Icono de estado del turno: llamando (parpadea), en atención, pasado/ya atendido. */
.lf-tv-icono-estado { display: inline-block; margin-right: var(--lf-sp-2); font-size: 0.65em; vertical-align: middle; }
.lf-tv-icono-llamando { animation: lf-tv-icono-parpadeo 1s ease-in-out infinite; }
@keyframes lf-tv-icono-parpadeo {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
.lf-tv-icono-pasado { color: #7A6657; }
.lf-tv-fila-resaltada { animation: lf-tv-pulso 1.4s ease-in-out 2; }
@keyframes lf-tv-pulso {
    0%, 100% { background: transparent; }
    50% { background: var(--lf-accent-soft); }
}
.lf-tv-sidebar { display: flex; flex-direction: column; gap: var(--lf-sp-4); }
/* Propaganda LineFlow al pie del TV: siempre cae sobre el extremo blanco del
   degradado, así que su texto es oscuro fijo (no depende de --tv-fg). */
.lf-tv-propaganda {
    margin-top: auto; padding-top: var(--lf-sp-4);
    display: flex; align-items: center; justify-content: center; gap: var(--lf-sp-2); flex-wrap: wrap;
    color: var(--lf-muted-fg); font-size: var(--lf-text-lg); text-align: center;
    border-top: 1px solid var(--lf-border);
}
.lf-tv-propaganda strong { color: var(--lf-primary); }
.lf-tv-marca { font-weight: 700; font-size: var(--lf-text-xl); color: var(--lf-fg); }

/* P6 — Consola del cajero: operable a 300px */
.lf-consola { max-width: 420px; margin-inline: auto; padding: var(--lf-sp-4); display: flex; flex-direction: column; gap: var(--lf-sp-4); }
.lf-consola-codigo { font-size: clamp(2.5rem, 14vw, 4rem); font-weight: 700; margin: var(--lf-sp-2) 0; }
.lf-consola-siguiente { min-height: 72px; font-size: var(--lf-text-2xl); font-weight: 700; }
.lf-consola-proximos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--lf-sp-1); }
.lf-consola-proximos li { display: flex; justify-content: space-between; padding: var(--lf-sp-2) var(--lf-sp-3); background: var(--lf-muted); border-radius: var(--lf-radius-sm); }
.lf-consola-header {
    background: linear-gradient(135deg, var(--lf-primary), var(--lf-accent));
    color: #fff; border-radius: var(--lf-radius);
    padding: var(--lf-sp-6); text-align: center; box-shadow: var(--lf-shadow-lg);
}
.lf-consola-header .lf-consola-codigo { color: #fff; }
.lf-consola-header .lf-consola-modulo { color: rgb(255 255 255 / 0.85); font-size: var(--lf-text-sm); margin: 0; }
.lf-consola-header .lf-consola-persona { color: rgb(255 255 255 / 0.95); margin: 0; }
.lf-consola-header .lf-badge { background: rgb(255 255 255 / 0.2); color: #fff; }
/* 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-1); justify-content: flex-end; margin-top: var(--lf-sp-4); }
.lf-vista-toggle .lf-btn { display: inline-flex; align-items: center; gap: var(--lf-sp-1); font-size: var(--lf-text-sm); padding: var(--lf-sp-1) var(--lf-sp-3); min-height: 44px; }
.lf-vista-toggle .lf-btn svg { width: 18px; height: 18px; }
.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: start; }
.lf-coleccion .lf-resultado-card { display: block; }
.lf-coleccion .lf-fav-card { margin-top: 0; }
.lf-cuadricula .lf-resultado-contenido { flex-direction: column; text-align: center; }
.lf-cuadricula .lf-fav-card { grid-template-columns: 1fr auto; }
.lf-cuadricula .lf-fav-link { flex-direction: column; text-align: center; }

/* Favoritos del inicio: tarjeta-enlace completa con logo, fila y quitar en rojo (RN-14) */
.lf-fav-card {
    display: grid; grid-template-columns: 1fr auto; gap: var(--lf-sp-2);
    align-items: center; margin-top: var(--lf-sp-3);
    background: var(--lf-surface); border: 1px solid var(--lf-border);
    border-radius: var(--lf-radius); padding: var(--lf-sp-3);
}
.lf-fav-card:hover { border-color: var(--lf-accent); }
.lf-fav-link {
    display: flex; align-items: center; gap: var(--lf-sp-3);
    color: inherit; text-decoration: none; min-height: 44px;
}
.lf-fav-logo { max-height: 44px; max-width: 64px; object-fit: contain; flex: none; }
.lf-fav-nombre { flex: 1; display: flex; flex-direction: column; }
.lf-fav-quitar { min-width: 44px; padding-inline: var(--lf-sp-2); }
.lf-fav-accion { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--lf-sp-3); }
.lf-consola-compacta {
    display: flex; align-items: center; justify-content: center; gap: var(--lf-sp-3);
    padding: var(--lf-sp-3) var(--lf-sp-4); text-align: left;
}
.lf-consola-compacta .lf-consola-codigo { font-size: var(--lf-text-2xl); margin: 0; }
.lf-consola-compacta .lf-consola-persona { font-size: var(--lf-text-sm); }
.lf-consola-grid3 { display: grid; grid-template-columns: 1fr; gap: var(--lf-sp-2); }
@media (min-width: 420px) { .lf-consola-grid3 { grid-template-columns: repeat(3, 1fr); } }
.lf-consola-grid3 .lf-btn { font-size: var(--lf-text-sm); padding-inline: var(--lf-sp-1); }
.lf-consola .lf-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--lf-sp-2); }
.lf-consola .lf-btn svg { width: 18px; height: 18px; flex: none; }
.lf-consola-siguiente svg { width: 26px; height: 26px; }
.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: 900px) {
    .lf-tv-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .lf-tv { padding: var(--lf-sp-4); }
    .lf-tv-marca-sede { flex-direction: column; text-align: center; }
    .lf-tv-tabla thead th { font-size: var(--lf-text-base); padding: var(--lf-sp-2) var(--lf-sp-3); }
    .lf-tv-celda-modulo, .lf-tv-celda-turno { padding: var(--lf-sp-3); }
}

/* 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-1);
}
.lf-admin-links a:hover { text-decoration: underline; }

/* ---------- 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;
}

.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-accent); }
.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; }
.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); }
.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; }
.lf-chat-burbuja p { margin: 0; }
.lf-chat-usuario { align-self: flex-end; background: var(--lf-accent); color: var(--lf-on-primary); }
.lf-chat-asistente { align-self: flex-start; background: var(--lf-muted); }
.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; }
.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 { box-shadow: 0 4px 16px rgb(0 0 0 / 0.2); }

/* RF-E4: carrusel de noticias del TV — vive en el panel lateral (lf-tv-sidebar), D-090.
   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-4) var(--lf-sp-5); background: rgb(255 255 255 / 0.94); border: 1px solid rgb(0 0 0 / 0.08);
    border-radius: 12px; text-align: center; color: #2B1B12;
}
.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-size: 2rem; margin: var(--lf-sp-2) 0; color: var(--lf-primary); }
.lf-tv-noticias p { margin: 0; font-size: 1.5rem; color: #7A6657; }
.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(0 0 0 / 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: center; }
.lf-kpi span { display: block; color: var(--lf-text-muted); font-size: 0.85rem; }
.lf-kpi strong { font-size: 2rem; }
/* 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: var(--lf-sp-2); padding-bottom: 1.4rem; }
.lf-barra { flex: 0 0 auto; width: 32px; max-width: 32px; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; position: relative; }
.lf-barra-seg { width: 100%; 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: 0.65rem; text-align: center; color: var(--lf-text-muted); white-space: nowrap; }