/* =====================================================================
   PICKING VS GUÍAS — monitor de bodega
   Pantalla que rota sola en un televisor. Los colores salen de las fichas
   de base.css, así el modo noche funciona igual que en las demás vistas
   (y de noche es el que corresponde: el equipo vive prendido).

   Cargar DESPUÉS de base.css.
   ===================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 10px;
}

/* ---------------------------------------------------------------------
   ENCABEZADO
   --------------------------------------------------------------------- */
/* Controles sobre la lámina. Reemplazan a la barra de título, que ocupaba alto
   y repetía siempre lo mismo. Mismo lenguaje que el monitor de supervisores. */
.stage-controles {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 8px; padding: 6px 12px; flex-shrink: 0;
}
.stage-controles .nav-group { display: flex; align-items: center; gap: 4px; }
.btn-nav {
    background: var(--surface-2); color: var(--text);
    border: 1px solid var(--line-strong); border-radius: 0;
    padding: 6px 12px; font-size: .82rem; font-weight: 700;
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.btn-nav:hover { border-color: var(--azul); color: var(--azul); }
.btn-nav.activo { background: var(--amarillo); color: #1a1400; border-color: var(--amarillo); }
.btn-nav.btn-salir:hover { border-color: var(--rojo); color: var(--rojo); }
/* El aviso de pantalla fija solo aparece con la rotación detenida. */
.pausa-badge {
    display: none; align-items: center; gap: 6px; margin-right: auto;
    background: var(--amarillo); color: #1a1400;
    padding: 4px 10px; font-size: .78rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em;
}
body.pausa .pausa-badge { display: inline-flex; }

.app-header {
    background: var(--surface);
    padding: 8px 20px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--line);
    border-left: 8px solid var(--azul);
    flex-shrink: 0;
}
.app-header h1 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--azul);
    margin: 0;
}
.header-right { display: flex; align-items: center; gap: 12px; }

/* El color dice el estado: verde si los datos llegaron, rojo si algo falló.
   Antes era rojo siempre, incluso diciendo "DATOS ACTUALIZADOS". */
.sync-badge {
    background: var(--amarillo);
    color: #120e00;
    padding: 5px 12px;
    font-weight: bold;
    font-size: .8rem;
}
.sync-badge.bien { background: var(--verde); color: #07120b; }
.sync-badge.mal  { background: var(--rojo);  color: #fff; }
[data-tema="dia"] .sync-badge      { background: #876600; color: #fff; }
[data-tema="dia"] .sync-badge.bien { background: #007c2d; color: #fff; }
[data-tema="dia"] .sync-badge.mal  { background: #da0000; color: #fff; }

.btn-tema,
.btn-salir {
    background: var(--surface-3);
    color: var(--text-dim);
    border: 1px solid var(--line);
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, color .2s, border-color .2s;
}
.btn-tema:hover { border-color: var(--azul); color: var(--azul); }
.btn-salir:hover { background: var(--rojo); border-color: var(--rojo); color: #fff; }

/* ---------------------------------------------------------------------
   ÁREA DE LÁMINAS
   --------------------------------------------------------------------- */
.main-slide-area {
    flex: 1;
    min-height: 0;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.slide-container {
    width: 100%;
    height: 100%;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
    scrollbar-width: none;
}
.slide-container::-webkit-scrollbar { display: none; }

/* Encabezado de lámina con el mismo lenguaje que el monitor de supervisores:
   título en el color del texto (no en azul) con un filete de acento a la
   izquierda, y bajada tenue. El subrayado naranjo que había competía con las
   cifras, que es lo que hay que mirar. */
.slide-title {
    font-size: clamp(1.15rem, 2.4vh, 1.6rem);
    font-weight: 800;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: .04em;
    border-left: 4px solid var(--azul);
    padding-left: 10px;
    margin-bottom: 2px;
}
.slide-sub {
    font-size: clamp(.72rem, 1.3vh, .85rem);
    color: var(--text-faint);
    padding-left: 14px;
    margin-bottom: 12px;
}

/* ---------------------------------------------------------------------
   TARJETAS DE CIFRAS
   --------------------------------------------------------------------- */
.kpi-grid { display: grid; grid-gap: 15px; margin: 10px 0; }
/* El acento va arriba y fino, y rota por posición igual que en supervisores:
   así una fila de tarjetas se distingue entre sí sin pintar cada una a mano. */
.kpi-card {
    background: var(--surface-2);
    border: 1px solid var(--line-strong);
    border-top: 2px solid var(--neon, var(--azul));
    padding: 12px 10px;
    text-align: center;
    display: flex; flex-direction: column; justify-content: center;
}
.kpi-grid > .kpi-card:nth-child(4n+1) { --neon: var(--azul); }
.kpi-grid > .kpi-card:nth-child(4n+2) { --neon: var(--verde); }
.kpi-grid > .kpi-card:nth-child(4n+3) { --neon: var(--naranjo); }
.kpi-grid > .kpi-card:nth-child(4n+4) { --neon: var(--amarillo); }
/* La etiqueta acompaña, no compite: en supervisores va chica y tenue para que
   la cifra sea lo único grande de la tarjeta. */
.kpi-label {
    font-size: clamp(.68rem, 1.15vh, .8rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-dim);
    margin-bottom: 6px;
}
/* La cifra en el color del texto y no en azul: con todas azules, el color dejaba
   de significar algo. El acento queda en el filete de arriba. */
.kpi-value {
    font-size: clamp(1.5rem, 3.4vh, 2.4rem);
    font-weight: 800;
    color: var(--text);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.kpi-sub {
    font-size: .8rem;
    color: var(--text-faint);
    margin-top: 5px;
    font-weight: 600;
}

/* ---------------------------------------------------------------------
   TABLAS COMPACTAS
   --------------------------------------------------------------------- */
.compact-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .7rem;
    margin-top: 8px;
}
.compact-table th,
.compact-table td {
    border: 1px solid var(--line);
    padding: 6px 10px;
    text-align: left;
    color: var(--text);
}
.compact-table td { font-variant-numeric: tabular-nums; }
/* Encabezado en la superficie de siempre y no en azul sólido: la franja de
   color pesaba más que los datos. Queda fijo al hacer scroll, igual que en el
   monitor de supervisores. */
.compact-table th {
    position: sticky; top: 0; z-index: 1;
    background: var(--surface-3);
    color: var(--text-dim);
    font-weight: 600;
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    border: 1px solid var(--line-strong);
}
/* Filas alternadas: en una tabla de 10 columnas ayuda a no saltar de fila. */
.compact-table tbody tr:nth-child(even) td { background: var(--surface-2); }
.table-wrapper { margin-top: 5px; }

/* ---------------------------------------------------------------------
   PIE
   --------------------------------------------------------------------- */
.timer-footer {
    text-align: center;
    background: var(--surface-2);
    padding: 6px;
    font-weight: 700;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .72rem;
    border: 1px solid var(--line);
    flex-shrink: 0;
}


.page-indicator {
    text-align: center;
    font-size: .7rem;
    margin-top: 5px;
    color: var(--azul);
    font-weight: bold;
}

/* ---------------------------------------------------------------------
   BOOTSTRAP — lo poco que se usa de la librería, traído al tema
   --------------------------------------------------------------------- */
.alert-info {
    background: color-mix(in srgb, var(--azul) 12%, var(--surface-2));
    border: 1px solid color-mix(in srgb, var(--azul) 35%, transparent);
    color: var(--text);
}
.text-muted { color: var(--text-faint) !important; }

@media (max-width: 1000px) {
    .kpi-value { font-size: 1.8rem; }
    .kpi-label { font-size: .8rem; }
    .slide-title { font-size: 1.2rem; }
    .compact-table { font-size: .65rem; }
}


/* ---------------------------------------------------------------------
   RANKING CON BARRAS
   Copiado del monitor de supervisores para que los dos tableros muestren
   un ranking igual. El ancho de la barra es proporcional al primer puesto.
   --------------------------------------------------------------------- */
.rank-list {
    display: flex; flex-direction: column; gap: 6px;
    min-height: 0; margin-top: 6px;
}
.rank-row {
    display: grid; grid-template-columns: 24px 1fr;
    align-items: center; gap: 10px;
}
.rank-pos {
    color: var(--text-faint); font-weight: 600; font-size: .8rem;
    text-align: right; font-variant-numeric: tabular-nums;
}
.rank-body {
    background: var(--surface-2); border-left: 2px solid var(--line-strong);
    padding: 7px 10px; position: relative; overflow: hidden;
}
.rank-bar { position: absolute; inset: 0; background: var(--azul); opacity: .16; z-index: 0; }
.rank-text {
    position: relative; z-index: 1; display: flex;
    justify-content: space-between; align-items: center; gap: 10px;
}
.rank-name { font-weight: 600; font-size: .98rem; }
.rank-val {
    font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
    display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2;
}
/* El monto acompaña al conteo de líneas: va debajo y más chico, porque lo que
   se compara es la productividad y el dinero es el contexto. */
.rank-sub { font-weight: 600; font-size: .76rem; color: var(--text-faint); }