/* Interfaz de producción · 96 Kronos Broadcast
   ---------------------------------------------------------------------------
   Hereda los colores y la tipografía del panel (app.css) y cambia lo único que
   de verdad es distinto: esto no se lee, se opera. Tres reglas la gobiernan.

   1. El tally manda. Rojo es aire, verde es previo, y NUNCA van solos: llevan
      la palabra al lado. Es la misma regla del panel, y aquí pesa más — una
      sala de control tiene monitores mal calibrados y quien dirige puede no
      distinguir el rojo del verde.

   2. Lo que está en el aire se ve sin buscarlo. El botón de la cámara en aire
      no es "el botón resaltado": es el único con el borde grueso y el fondo
      encendido, a un tamaño que se reconoce de reojo mientras miras la cancha.

   3. Una orden pendiente se ve pendiente. Borde punteado mientras el servidor
      no confirma. Si el operador no distingue "pulsé" de "salió al aire",
      pulsa otra vez, y la segunda vez saca la cámara equivocada. */

:root {
  --aire:   #dc4c4c;
  --previo: #34a853;
}

body.prod {
  height: 100vh;
  overflow: hidden;    /* una sala de control no se desplaza */
}

#app { display: flex; flex-direction: column; height: 100vh; }

.prod-cargando {
  position: fixed; inset: 0; display: grid; place-items: center;
  color: var(--muted);
}

/* ══════════════════════════════════════════════════════ barra */

.prod-top {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 14px; border-bottom: 1px solid var(--border);
  background: var(--surface); flex: 0 0 auto;
}
.prod-mark { display: flex; align-items: center; gap: 8px; }
.prod-mark img { height: 20px; width: auto; }
.prod-espacio { flex: 1; }
.prod-acciones { display: flex; align-items: center; gap: 8px; }

.prod-reloj { display: flex; align-items: baseline; gap: 8px; }
.prod-reloj small { color: var(--muted); }

.prod-aire {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: 12px; color: var(--ink-2);
}
.prod-aire .punto {
  width: 8px; height: 8px; border-radius: 50%; background: var(--idle);
}
.prod-aire[data-estado="aire"] .punto { background: var(--aire); }
.prod-aire[data-estado="aire"] { color: var(--ink); border-color: var(--aire); }
.prod-aire[data-estado="caido"] .punto { background: var(--critical); }
.prod-aire[data-estado="caido"] { color: var(--critical); border-color: var(--critical); }

.btn-fino {
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--ink-2); border-radius: 8px; padding: 5px 10px; cursor: pointer;
}
.btn-fino:hover { color: var(--ink); border-color: var(--brand); }
.btn-fino small { color: var(--muted); margin-left: 5px; font-size: 11px; }

.interruptor { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }

.prod-alarma {
  flex: 0 0 auto; padding: 8px 14px; background: rgba(220,76,76,.14);
  border-bottom: 1px solid var(--critical); color: #ffd9d9; font-weight: 600;
}

/* ══════════════════════════════════════════════════ vista control */

.prod-control {
  flex: 1; min-height: 0; display: grid; gap: 12px; padding: 12px;
  grid-template-rows: minmax(0, 1fr) auto auto;
}

.prod-monitores {
  display: grid; gap: 12px; min-height: 0;
  grid-template-columns: 1.6fr 1fr;
}

.visor {
  margin: 0; position: relative; min-height: 0;
  background: #000; border: 2px solid var(--border); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
}
.visor-pgm { border-color: var(--aire); }
.visor-pvw { border-color: var(--previo); }
.visor video { flex: 1; min-height: 0; width: 100%; object-fit: contain; background: #000; }
.visor figcaption {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 9px; background: var(--surface); border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--ink-2);
}
.visor-estado {
  position: absolute; inset: auto 0 0 0; padding: 4px 9px;
  background: rgba(0,0,0,.65); font-size: 12px; color: var(--ink-2);
}
.visor-estado[hidden] { display: none; }

.tally {
  padding: 2px 7px; border-radius: 4px; font-weight: 700; font-size: 11px;
  letter-spacing: .06em; color: #000;
}
.tally-aire { background: var(--aire); color: #fff; }
.tally-previo { background: var(--previo); color: #04240f; }

/* ═════════════════════════════════════════════════════ botonera */

.prod-botonera { display: flex; gap: 12px; align-items: stretch; flex: 0 0 auto; }
.botones { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }

.boton-cam {
  position: relative; min-width: 132px; padding: 9px 12px;
  background: var(--surface-2); color: var(--ink);
  border: 2px solid var(--border); border-radius: var(--radius);
  cursor: pointer; text-align: left; display: grid; gap: 2px;
}
.boton-cam .num { font-size: 18px; font-weight: 700; line-height: 1; }
.boton-cam .nom { font-size: 12px; color: var(--ink-2); }
.boton-cam .est { font-size: 11px; color: var(--muted); }
.boton-cam:hover { border-color: var(--brand); }

/* Aire y previo: color Y palabra. Nunca uno de los dos solo. */
.boton-cam[data-tally="aire"] {
  border-color: var(--aire); background: rgba(220,76,76,.18);
}
.boton-cam[data-tally="aire"] .est { color: #ffb4b4; font-weight: 700; }
.boton-cam[data-tally="previo"] {
  border-color: var(--previo); background: rgba(52,168,83,.14);
}
.boton-cam[data-tally="previo"] .est { color: #9fe0b3; font-weight: 700; }

/* Una cámara caída no se puede ponchar por accidente sin darse cuenta: se ve
   apagada y lo dice. Se deja pulsable a propósito — a veces hay que sacar al
   aire una entrada que acaba de volver y el estado aún no se refrescó. */
.boton-cam[data-viva="no"] { opacity: .55; }
.boton-cam[data-viva="no"] .est { color: var(--critical); font-weight: 700; }

/* Pendiente de confirmación del servidor. */
.boton-cam[data-pendiente="si"] { border-style: dashed; }

.acciones-corte { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.btn-take {
  padding: 12px 22px; font-size: 16px; font-weight: 700; letter-spacing: .04em;
  background: var(--brand); color: #1a1204; border: none;
  border-radius: var(--radius); cursor: pointer;
}
.btn-take:hover { background: var(--brand-soft); }
.btn-take small { display: block; font-size: 11px; font-weight: 500; opacity: .8; }

/* ══════════════════════════════════════════════════════ detalle */

.prod-detalle {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; flex: 0 0 auto;
}

.tabla-camaras { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla-camaras th, .tabla-camaras td {
  text-align: left; padding: 5px 10px; border-bottom: 1px solid var(--border-soft);
}
.tabla-camaras thead th { color: var(--muted); font-weight: 500; font-size: 12px; }
.tabla-camaras thead th small { color: var(--muted); font-weight: 400; }
.tabla-camaras input[type="range"] { width: 120px; vertical-align: middle; }
/* El offset de la cámara al aire está deshabilitado, y tiene que PARECERLO
   antes de que el operador lo intente: si solo no responde, se lee como que la
   interfaz está colgada. */
.tabla-camaras .offset[data-en-aire="si"] { opacity: .45; }
.tabla-camaras .offset[data-en-aire="si"] small { text-decoration: line-through; }
.tabla-camaras .offset input:disabled { cursor: not-allowed; }
.tabla-camaras .offset { display: inline-flex; align-items: center; gap: 6px; }
.tabla-camaras .offset input { width: 68px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; }
.estado-cam { display: inline-flex; align-items: center; gap: 6px; }
.estado-cam .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--idle); }
.estado-cam[data-viva="si"] .punto { background: var(--good); }
.estado-cam[data-viva="no"] .punto { background: var(--critical); }
.estado-cam[data-viva="no"] { color: var(--critical); }

.prod-salida { margin: 0; display: grid; gap: 4px; align-content: start;
  font-size: 12px; color: var(--ink-2); min-width: 240px; }
.prod-salida div { display: flex; justify-content: space-between; gap: 16px; }
.prod-salida dt { color: var(--muted); }
.prod-salida dd { margin: 0; }

/* ═════════════════════════════════════════════════════ multiview */

.prod-multiview { flex: 1; min-height: 0; padding: 8px; }
.rejilla {
  display: grid; gap: 8px; height: 100%;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-content: stretch;
}
.tile {
  position: relative; background: #000; border: 3px solid var(--border);
  border-radius: 8px; overflow: hidden; min-height: 0;
}
.tile video { width: 100%; height: 100%; object-fit: contain; display: block; }
.tile[data-tally="aire"] { border-color: var(--aire); }
.tile[data-tally="previo"] { border-color: var(--previo); }
/* Misma regla 3 que la botonera: una orden pendiente se ve pendiente. Desde el
   multiview la orden se lanzaba sin pintar nada —el pendiente iba a #botones,
   que en esta vista está oculto— y el operador volvía a pulsar. */
.tile[data-pendiente="si"] { border-style: dashed; }
.tile-nombre {
  position: absolute; top: 0; left: 0; right: 0; display: flex; gap: 8px;
  align-items: center; padding: 4px 8px; background: linear-gradient(rgba(0,0,0,.75), transparent);
  font-size: 12px;
}
.tile-estado {
  position: absolute; inset: auto 0 0 0; padding: 3px 8px;
  background: rgba(0,0,0,.65); font-size: 11px; color: var(--ink-2);
}

/* ══════════════════════════════════════════════════════════ pgm */

.prod-pgm { flex: 1; min-height: 0; position: relative; background: #000; }
.prod-pgm video { width: 100%; height: 100%; object-fit: contain; }
.pgm-etiqueta {
  position: absolute; top: 10px; left: 12px; padding: 3px 9px;
  background: var(--aire); color: #fff; font-weight: 700; font-size: 12px;
  border-radius: 4px; letter-spacing: .06em;
}

/* ══════════════════════════════════ el motor no ha contestado */

/* Ocupa el hueco de la vista, no lo tapa a medias: mientras esto se ve no hay
   ninguna botonera detrás que invite a pulsar. */
.prod-sin-motor {
  flex: 1; min-height: 0; display: grid; place-items: center; padding: 24px;
  text-align: center;
}
.prod-sin-motor b { display: block; font-size: 17px; margin-bottom: 10px; }
.prod-sin-motor p {
  margin: 0; max-width: 46ch; color: var(--muted); font-size: 13px;
  line-height: 1.55;
}

/* ══════════════════════════════════════ tally no confirmado */

/* Sobre la imagen y sobre el tally, porque es justo el tally lo que puede estar
   mintiendo. En un monitor mal calibrado el color no basta: va la palabra. */
.prod-no-confirmado {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  padding: 10px 14px; text-align: center;
  background: var(--critical, #dc4c4c); color: #fff;
  font-weight: 700; font-size: 15px;
}
.prod-no-confirmado::after {
  content: "El tally puede no coincidir con el aire";
  margin-left: 10px; font-weight: 500; font-size: 12px; opacity: .9;
}

/* ════════════════════════════════════════════════════════ ayuda */

.prod-ayuda { position: fixed; inset: 0; background: rgba(0,0,0,.75);
  display: grid; place-items: center; z-index: 50; }
.prod-ayuda-caja {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 24px; max-width: 520px;
}
.prod-ayuda-caja h2 { margin: 0 0 12px; font-size: 16px; }
.prod-ayuda-caja table { border-collapse: collapse; width: 100%; font-size: 13px; }
.prod-ayuda-caja th { text-align: left; padding: 4px 14px 4px 0; white-space: nowrap;
  color: var(--brand); font-weight: 600; }
.prod-ayuda-caja td { padding: 4px 0; color: var(--ink-2); }
.prod-ayuda-caja .nota { color: var(--muted); font-size: 12px; margin: 14px 0; }

@media (max-width: 900px) {
  .prod-monitores { grid-template-columns: 1fr; }
  .prod-detalle { grid-template-columns: 1fr; }
}

/* ══════════════════════════════ audio y aguas abajo */

.pgm-audio {
  margin-left: auto; padding: 2px 8px; border-radius: 5px;
  font-size: 11px; letter-spacing: .03em; cursor: default;
}
.pgm-audio[data-hay="si"] { color: var(--previo); background: rgba(52,168,83,.12); }
.pgm-audio[data-hay="no"] { color: var(--muted); background: var(--surface-2); }

/* Los dos datos que dicen si la pantalla está mintiendo. En verde cuando el
   corte acaba de confirmarse y el tally es fresco; en ámbar cuando no. */
.prod-salida dd[data-fresco="si"] { color: var(--previo); }
.prod-salida dd[data-viejo="si"] { color: var(--warning); font-weight: 700; }

.prod-abajo {
  flex: 0 0 auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 7px 12px; margin: 0 12px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 12px;
}
.prod-abajo[hidden] { display: none; }
.prod-abajo-k {
  font-size: 10.5px; color: var(--muted);
}
.prod-abajo-item { display: inline-flex; align-items: baseline; gap: 6px; }
.prod-abajo-item b { color: var(--ink-2); font-weight: 600; font-size: 11px; }
.prod-abajo-item i { font-style: normal; color: var(--ink); }
/* Lo que va mal aguas abajo se ve desde el otro lado de la sala: es lo que el
   operador NO puede deducir mirando su propio PGM. */
.prod-abajo-item[data-mal="si"] i { color: var(--aire); font-weight: 700; }
.prod-abajo a { margin-left: auto; }

/* ══════════════════════════════════════ turno, pánico y tally */

.prod-mando {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 14px; background: rgba(226,128,47,.14);
  border-bottom: 1px solid var(--warning); color: #f0cba8; font-size: 13px;
}
.prod-mando[hidden] { display: none; }
.prod-mando b { color: #ffd9b0; }
.prod-mando span { color: var(--muted); }
.prod-mando button { margin-left: auto; }
/* Sin el mando, la botonera se atenúa: que se vea que esta ventana mira. */
body[data-mando="no"] .prod-botonera { opacity: .5; }

.btn-panico {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10px 18px; border-radius: 10px; cursor: pointer;
  background: #1a1a1a; color: var(--aire);
  border: 2px solid var(--aire); font-weight: 800; letter-spacing: .06em;
}
.btn-panico small { font-weight: 500; font-size: 10px; color: var(--muted); letter-spacing: 0; }
.btn-panico:hover { background: rgba(220,76,76,.16); }
/* Con el negro al aire, el botón deja de ser una amenaza y pasa a ser el
   estado: encendido, para que se vea desde el otro lado de la sala. */
body[data-negro="si"] .btn-panico { background: var(--aire); color: #fff; }
body[data-negro="si"] .btn-panico small { color: rgba(255,255,255,.75); }
.prod-aire[data-estado="negro"] .punto { background: var(--aire); }
.prod-aire[data-estado="negro"] { color: var(--aire); font-weight: 800; }

.btn-grafica {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8px 18px; border-radius: 10px; cursor: pointer;
  background: #1a1a1a; color: var(--ink-2);
  border: 2px solid var(--border); font-weight: 800; letter-spacing: .06em;
}
.btn-grafica[hidden] { display: none; }
.btn-grafica small { font-weight: 500; font-size: 10px; color: var(--muted); letter-spacing: 0; }
.btn-grafica:hover { border-color: var(--brand); }
.btn-grafica[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #1a1204; }
.btn-grafica[aria-pressed="true"] small { color: rgba(26,18,4,.7); }
.grafica-url {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px;
}
.grafica-url[hidden] { display: none; }
.grafica-url label { color: var(--muted); }
.grafica-url input {
  flex: 1 1 240px; min-width: 0; background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px;
}
.grafica-estado { color: var(--muted); }
.grafica-estado[data-estado="caida"] { color: var(--warning); }

.acciones-recuperar {
  display: flex; align-items: center; gap: 10px; margin-top: 8px;
}
.offset-eco {
  font-size: 12px; color: var(--previo); font-variant-numeric: tabular-nums;
}
.offset-eco[hidden] { display: none; }
.tabla-camaras .recon { font-size: 11px; padding: 2px 8px; }

.preset-fila { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 12px; }
.preset-fila select {
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--border); border-radius: 6px; padding: 3px 7px; font-size: 12px;
}
.preset-fila b { color: var(--brand); font-weight: 600; }

/* El tally: color y palabra, nada más, legible de reojo a dos metros. */
.prod-tally { flex: 1; min-height: 0; display: grid; place-items: center; }
.tally-caja {
  width: 100%; height: 100%; display: grid; place-content: center; gap: 10px;
  text-align: center; transition: background .12s linear;
}
.tally-caja b { font-size: clamp(48px, 18vw, 200px); letter-spacing: .04em; line-height: 1; }
.tally-caja span { font-size: clamp(14px, 4vw, 28px); opacity: .85; }
.tally-caja[data-estado="aire"] { background: var(--aire); color: #fff; }
.tally-caja[data-estado="previo"] { background: var(--previo); color: #04240f; }
.tally-caja[data-estado="libre"] { background: #0b0b0b; color: var(--muted); }
.tally-caja[data-estado="sin"] { background: #0b0b0b; color: var(--warning); }