/* modo_tv.css - Pantalla rotativa de planta (Modo TV)
   Ranking Mix -> Pulido en vivo -> Máquinas hoy -> Máquinas semana.
   Ver frontend/static/js/modules/modo_tv.js (window.ModuloTV). */

body.tv-produccion-mode {
    overflow: hidden !important;
    background: #0b1220 !important;
}

body.tv-produccion-mode .sidebar,
body.tv-produccion-mode .top-bar,
body.tv-produccion-mode .navbar,
body.tv-produccion-mode .sidebar-overlay,
body.tv-produccion-mode #loading-overlay,
body.tv-produccion-mode .mobile-back-container {
    display: none !important;
    visibility: hidden !important;
}

body.tv-produccion-mode .main-content,
body.tv-produccion-mode #page-content {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

#modo-tv-page {
    background: #0b1220;
}

body.tv-produccion-mode #modo-tv-page {
    position: fixed !important;
    inset: 0 !important;
    z-index: 6000 !important;
    width: 100vw !important;
    height: 100vh !important;
}

/* Tamaños pensados para verse desde varios metros de distancia (TV de
   planta), no desde un monitor de escritorio -- pedido del usuario
   2026-09-10 tras confirmar que se monta en una TV de 55". Todo el texto
   de esta página quedó ~40-45% más grande que un cálculo "de monitor". */
#tv-root {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    padding: 1.4vh 2.2vw;
    box-sizing: border-box;
    color: #f1f5f9;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ── Header ─────────────────────────────────────────────────────── */
#tv-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1.2vh;
    border-bottom: 2px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

#tv-header-left {
    display: flex;
    align-items: center;
    gap: 22px;
}

#tv-logo-icono {
    font-size: 3.6rem;
    color: #38bdf8;
}

#tv-slide-titulo {
    font-size: 3rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.1;
    letter-spacing: .01em;
}

#tv-slide-subtitulo {
    margin: 4px 0 0;
    font-size: 1.5rem;
    color: #94a3b8;
    font-weight: 500;
}

#tv-header-right {
    text-align: right;
    flex-shrink: 0;
}

#tv-reloj {
    font-size: 3.4rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
    line-height: 1;
}

#tv-fecha {
    margin-top: 4px;
    font-size: 1.3rem;
    color: #94a3b8;
    text-transform: capitalize;
}

/* ── Días sin accidentes (encabezado, visible en todas las pantallas) ─── */
#tv-seguridad {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 20px;
    padding: 6px 18px;
    border-radius: 14px;
    background: rgba(22, 163, 74, .18);
    border: 2px solid rgba(74, 222, 128, .45);
    color: #bbf7d0;
    flex-shrink: 0;
}

#tv-seguridad-icono { font-size: 2.4rem; }

#tv-seguridad-texto {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.1;
    text-align: left;
}

#tv-seguridad-texto strong {
    font-size: 3.4rem;
    font-weight: 900;
    line-height: 1;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

/* Accidente de hoy (0 días): rojo, para que no pase desapercibido. */
#tv-seguridad.tv-seguridad-cero {
    background: rgba(239, 68, 68, .18);
    border-color: rgba(248, 113, 113, .55);
    color: #fecaca;
}

/* Admin sin fecha registrada todavía: aviso apagado, solo lo ve quien puede editar. */
#tv-seguridad.tv-seguridad-sin-dato {
    background: rgba(148, 163, 184, .12);
    border-color: rgba(148, 163, 184, .35);
    color: #94a3b8;
}

/* El lápiz solo aparece al pasar el mouse o con foco: en la TV (sin puntero)
   no se ve; el ADMIN que abre el Modo TV en su PC sí lo encuentra. */
#tv-seguridad-editar {
    opacity: 0;
    transition: opacity .2s;
    background: rgba(255, 255, 255, .12);
    border: 0;
    border-radius: 8px;
    color: inherit;
    width: 34px;
    height: 34px;
    cursor: pointer;
}
#tv-seguridad:hover #tv-seguridad-editar,
#tv-seguridad-editar:focus { opacity: 1; }

/* Pantallas lógicas angostas (la TV de planta reporta ~960px de ancho aunque
   sea de 55"): con el recuadro de días sin accidentes el encabezado no cabe en
   una línea y el título se partía en 2-3 líneas, robándole alto al contenido.
   Se compacta el encabezado en vez de dejar que crezca. */
@media (max-width: 1300px) {
    #tv-logo-icono { display: none; }
    #tv-slide-titulo { font-size: 2.2rem; }
    #tv-slide-subtitulo { font-size: 1.15rem; }
    #tv-reloj { font-size: 3.2rem; }
    #tv-fecha { font-size: 1.15rem; }
    #tv-seguridad { margin: 0 12px; padding: 4px 14px; gap: 10px; }
    #tv-seguridad-icono { font-size: 2rem; }
    #tv-seguridad-texto { font-size: 1.2rem; }
    #tv-seguridad-texto strong { font-size: 3.2rem; }
}

/* SweetAlert2 por encima del Modo TV (z-index 6000). */
.tv-swal-z { z-index: 7000 !important; }

/* ── Slides ─────────────────────────────────────────────────────── */
#tv-slides {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 1.4vh;
}

.tv-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tv-slide.active {
    opacity: 1;
    pointer-events: auto;
}

.tv-chart-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 18px;
    padding: 1.6vh 1.4vw;
    box-sizing: border-box;
}

.tv-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 1.8rem;
    font-weight: 600;
}

/* Overlay de "caballitos" de carrera (mismo efecto que el Dashboard, ver
   posicionarCaballosCarrera en modo_tv.js). El contenido interno reutiliza
   las clases .pulido-mix-race-icon / .mix-race-meta ya definidas en
   dashboard.css (cargado globalmente), así que acá solo se posiciona el
   contenedor sobre el canvas. Se agranda un poco respecto al tamaño que
   usa el Dashboard (pensado para monitor) sin tocar esas clases globales,
   para no afectar la vista de escritorio. */
.tv-race-icons {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

#tv-root .pulido-mix-race-icon {
    font-size: 1.7rem;
}

#tv-root .mix-race-meta {
    font-size: 1.6rem;
}

#tv-root .mix-race-meta span {
    font-size: .85rem;
}

.tv-subtitulo-semana {
    flex-shrink: 0;
    font-size: 1.5rem;
    color: #94a3b8;
    margin-bottom: 1vh;
    font-weight: 600;
}

/* ── Grids genéricos (Pulido / Máquinas) ───────────────────────────── */
/* "Ventana" que recorta: .tv-grid puede ser más alto que esto y
   modo_tv.js lo desliza hacia arriba animando 'margin-top' (transición
   CSS de layout, no de transform/compositor) en vez de mover scrollTop
   -- probado en la TV real de planta (Tizen/WebOS): ni scrollTop ni
   scrollTo({behavior:'smooth'}) ni un @keyframes sobre transform mueven
   nada ahí, mientras que la transición 'width' de la barra de progreso
   de abajo sí corre -- el auto-scroll copia ese mismo mecanismo. */
.tv-grid-viewport {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.tv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    grid-auto-rows: min-content;
    gap: 20px;
    align-content: start;
    padding-right: 4px;
}

.tv-card {
    background: #141c2e;
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
    border-top: 6px solid #475569;
}

.tv-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.tv-card-nombre {
    font-size: 1.85rem;
    font-weight: 800;
    color: #ffffff;
}

.tv-card-badge {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 20px;
    letter-spacing: .04em;
}

/* Fila con la foto del buje + cronómetro (Pulido en vivo) -- mismo layout
   que el Panel de Supervisión de admin (pulido.js: imagen 64x64 a la
   izquierda, timer+meta centrados en el resto del ancho). */
.tv-card-row-imagen {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 12px;
    margin: 4px 0;
}

.tv-card-imagen {
    width: 84px;
    height: 84px;
    border-radius: 10px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
}

.tv-card-imagen img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tv-card-imagen i {
    color: #94a3b8;
    font-size: 2.2rem;
}

.tv-card-info {
    flex: 1 1 auto;
    min-width: 0;
}

.tv-card-timer {
    font-size: 2.9rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
    text-align: center;
    margin: 6px 0;
}

.tv-card-meta {
    font-size: 1.3rem;
    font-weight: 600;
    color: #cbd5e1;
    text-align: center;
}

.tv-card-alerta {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(239, 68, 68, .15);
    color: #fca5a5;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    animation: tv-pulse-alerta 1.4s ease-in-out infinite;
}

@keyframes tv-pulse-alerta {
    0%, 100% { opacity: 1; }
    50% { opacity: .55; }
}

.tv-vacio-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #64748b;
    font-size: 1.8rem;
    font-weight: 600;
}

/* Tarjetas de máquina (hoy / semana) */
/* OP en grande, en su propio recuadro: es el dato que la gente de planta
   usa para identificar el trabajo (pedido del usuario 2026-09-24). */
.tv-maq-op {
    font-size: 2.6rem;
    font-weight: 900;
    color: #ffffff;
    text-align: center;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    padding: 6px 14px;
    margin: 6px 0 10px;
    border-radius: 12px;
    background: rgba(37, 99, 235, .22);
    border: 2px solid rgba(96, 165, 250, .55);
    overflow-wrap: anywhere;
}

.tv-maq-op-vacio {
    background: rgba(251, 191, 36, .12);
    border-color: rgba(251, 191, 36, .55);
    color: #fbbf24;
}

/* Variante más baja del recuadro de OP para tarjetas que además llevan barra
   y checklist (Ensamble): en pantallas bajas cada píxel de alto cuenta. */
.tv-maq-op-sm {
    font-size: 2rem;
    padding: 3px 12px;
    margin: 4px 0 8px;
}

/* ── Metas de Ensamble ────────────────────────────────────────────── */
.tv-ens-barra {
    height: 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .1);
    overflow: hidden;
}

.tv-ens-barra-fill {
    height: 100%;
    border-radius: 8px;
}

.tv-ens-avance {
    display: flex;
    justify-content: space-between;
    margin: 4px 0 8px;
    font-size: 1.3rem;
    font-weight: 700;
    color: #e2e8f0;
    font-variant-numeric: tabular-nums;
}

.tv-ens-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tv-ens-chip {
    font-size: 1.05rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, .35);
    color: #94a3b8;
}

.tv-ens-chip-hecho {
    background: rgba(22, 163, 74, .2);
    border-color: rgba(74, 222, 128, .5);
    color: #86efac;
}

.tv-ens-atraso {
    margin-top: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fbbf24;
}

.tv-maq-producto {
    display: flex;
    justify-content: space-between;
    font-size: 1.3rem;
    font-weight: 600;
    color: #e2e8f0;
    padding: 4px 0;
    border-bottom: 1px dashed rgba(255,255,255,.08);
}

.tv-maq-total {
    font-size: 3.5rem;
    font-weight: 900;
    color: #38bdf8;
    text-align: center;
    line-height: 1;
    margin: 8px 0 2px;
}

.tv-maq-total-label {
    text-align: center;
    color: #cbd5e1;
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 4px;
}

.tv-maq-pendiente {
    text-align: center;
    margin-top: 10px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(251, 191, 36, .12);
    color: #fbbf24;
    font-size: 1.05rem;
    font-weight: 700;
}

/* ── Footer: dots + barra de progreso ──────────────────────────────── */
#tv-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: .8vh;
}

#tv-dots {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    flex-shrink: 0;
}

.tv-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    transition: all .3s ease;
}

.tv-dot.active {
    background: #38bdf8;
    width: 22px;
    border-radius: 4px;
}

#tv-progreso-barra {
    flex: 1 1 auto;
    height: 4px;
    background: rgba(255,255,255,.08);
    border-radius: 4px;
    overflow: hidden;
}

#tv-progreso-fill {
    height: 100%;
    width: 0%;
    background: #38bdf8;
    border-radius: 4px;
}

/* ── Botón salir ────────────────────────────────────────────────────── */
#btn-exit-modo-tv {
    position: fixed;
    bottom: 4px;
    right: 8px;
    z-index: 10000;
    background: #ef4444;
    color: #fff;
    border: none;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 600;
    opacity: .45;
    display: none;
}

#btn-exit-modo-tv:hover { opacity: 1; }

body.tv-produccion-mode #btn-exit-modo-tv { display: block; }