/* ============================================================
   IvaniaTV · tv-app · css/medios-paso.css      (R-12 fase 3 · 27/9/2026)
   La capa de los MEDIOS DEL PASO (`js/medios-paso.js`) y su indicador de
   puntos. Diseno: `diseno/R12-PASOS-DINAMICOS-20260927.md` §3 y las maquetas
   r12.t1 (principal con puntos) y r12.t2 (medio de video).

   Todo con tokens de `tokens.css`: ni un color ni un margen escrito a mano.
   Una excepcion declarada: los `3000ms` del titulo del video y de la espera
   de los puntos copian el `tv-asomar` de `sala.css`, que tampoco tiene token
   (gate R12-F3, menor: proponer `--tv-dur-asomo` en `tokens.css`). Sin rejilla ni `gap` de flex (Chromium 84): los puntos se
   separan con margen, asi que esta hoja vale tal cual en la LG (Chromium
   53) y `piso53.css` solo tiene que declararlo (ver su seccion R-12).

   Ocampo-Infra Agent System · Roberto Ocampo <ro@ocampo.ai>
   ============================================================ */

/* ─────────────── la capa del medio ───────────────
   Tapa el principal entero (es un medio A SANGRE, no una ventana) y entra
   con el fundido de escena. Al salir no hace falta regla: el director
   repinta el paso en una capa nueva y la vieja se va con su fundido. */
.tv-mp-capa {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--tv-ancho);
  height: var(--tv-alto);
  background-color: var(--tv-fondo);
  opacity: 1;
  transition: opacity var(--tv-dur-escena) var(--tv-ease);
}
.tv-mp-capa.es-entrando { opacity: 0; }

/* La barra de pasos del armazon (S6a) no se pinta encima de un medio
   (hallazgo H-6: la barra oscura sobre el video molesta). Donde va la
   consulta ya lo dicen los puntos y, para Roberto, el mando. */
.es-medio-paso .tv-barra-pasos { display: none; }

/* ─────────────── el titulo del medio de video (r12.t2) ───────────────
   Dentro del area segura, sobre el video, y se va a los 3 s. Con fondo, no
   texto suelto sobre la imagen (UX §6 S4b: nunca texto directo sobre la
   foto). Al repintar el mismo medio —una pausa, una busqueda— no vuelve. */
.tv-mp-rotulo {
  position: absolute;
  top: calc(var(--tv-seguro-y) * 2);
  left: calc(var(--tv-seguro-x) * 2);
  max-width: calc(var(--tv-ancho) / 2);
  padding: var(--tv-e2) var(--tv-e3);
  background-color: var(--tv-fondo);
  color: var(--tv-texto);
  font-size: var(--tv-fs-h3);
  line-height: var(--tv-lh-titulo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
}
.tv-mp-rotulo.es-asomando {
  animation: tv-mp-asomar 3000ms var(--tv-ease) forwards;
}
.tv-mp-rotulo.es-oculto { display: none; }
@keyframes tv-mp-asomar {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ─────────────── los puntos (r12.t1) ───────────────
   Uno por cosa (el principal y cada medio), el que se ve en oro y los
   demas en `--tv-texto-3`. Sin texto: la familia no necesita leer «1 de 3».
   Abajo a la derecha, dentro del area segura y POR ENCIMA de la banda del
   cromo (`--tv-piso-contenido`), para no pisar la franja de estado, que
   vive en esa esquina (defecto M-6 del gate de lo servido). */
.tv-mp-puntos {
  position: absolute;
  right: var(--tv-seguro-x);
  bottom: var(--tv-piso-contenido);
  display: flex;
  align-items: center;
  pointer-events: none;
}
.tv-mp-punto {
  display: block;
  width: var(--tv-e2);
  height: var(--tv-e2);
  margin-left: var(--tv-e3);
  border-radius: 50%;
  background-color: var(--tv-texto-3);
}
.tv-mp-punto:first-child { margin-left: 0; }
.tv-mp-punto.es-activo { background-color: var(--tv-oro); }

/* En el PRINCIPAL la fila entra cuando se va la barra de pasos del armazon
   (`sala.css`, `tv-asomar`, 3000 ms): durante ese rato convivian dos filas de
   puntos de tamanos distintos que a 3 m no se distinguen (gate R12-F3 D-1). */
.tv-mp-puntos.es-en-principal {
  opacity: 0;
  animation: tv-mp-tras-barra var(--tv-dur-escena) var(--tv-ease) 3000ms forwards;
}
@keyframes tv-mp-tras-barra {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* SOBRE UN MEDIO la fila va encima de una foto o un video a sangre: sin fondo,
   el oro sobre una foto clara no se ve (medido 2,4:1, gate R12-F3 D-2). Con
   `--tv-fondo` detras, el oro da 7,48:1 y el gris 3,86:1, los de `tokens.css`. */
.tv-mp-puntos.es-sobre-medio {
  padding: var(--tv-e2) var(--tv-e3);
  background-color: var(--tv-fondo);
}

/* EL PIE DE UNA PIEZA DEL MEDIO, SIEMPRE SOBRE FONDO (gate R12-F3 D-3).
   El velo degradado de S4b (`renderizador.css`) empieza por debajo del
   renglon del pie en la pieza a sangre, asi que el texto quedaba sobre la
   foto. Dentro de la capa del medio el texto lleva su propia caja, como el
   titulo del video; el S4b de fuera de un medio no se toca aqui. */
.tv-mp-capa .tv-r-pieza-entera .tv-r-pie { background-image: none; }
.tv-mp-capa .tv-r-pie-linea {
  display: inline-block;
  padding: var(--tv-e1) var(--tv-e2);
  background-color: var(--tv-subtitulo-fondo);
}