/* ============================================================
   IvaniaTV · tv-app · css/hogar.css
   Las pantallas de la modalidad CLIENTE (la televisión de la casa).

   piso: minimo
   modalidad: cliente-casa

   ── ESTA HOJA SE ESCRIBE CONTRA CHROMIUM 53 ────────────────────────────
   Es el motor de una LG de 2018, que es el piso declarado de esta modalidad
   (`docs/MODO-CLIENTE-PISO-2018-DISENO.md` §1.1). Lo que NO hay aquí, y no
   es por gusto — cada una rompe la colocación EN SILENCIO en ese motor:

     · `display: grid`        → Chromium 57. Todo se coloca en flex.
     · `gap` dentro de flex   → Chromium 84. Márgenes, anulados en el último
                                de cada fila con `:last-child`.
     · `clamp() min() max()`  → Chromium 79. Tamaño fijo del lienzo × --tv-k.
     · `aspect-ratio`         → Chromium 88. Proporción con `padding-top`.
     · `inset`                → Chromium 87. top/right/bottom/left.
     · `:has()`               → Chromium 105. Una clase puesta por JavaScript.
     · `:focus-visible`       → Chromium 86. `.is-focused`, que es lo que ya
                                pone `js/foco.js`.
     · `backdrop-filter`      → Chromium 76. Velo de degradado plano.

   NO es un respaldo de `piso53.css`: aquí no hay ni una rejilla que
   respaldar, porque no se escribió ninguna. Esa hoja es la de LG y la
   gobierna M-23; ésta es la de las pantallas de casa y no se pisan.

   ── BOTONES DE 96 × 96 COMO MÍNIMO ─────────────────────────────────────
   §4.2 del diseño. En casa se apunta con un mando desde el sofá, no con el
   dedo: un botón que en un iPad sería generoso, a cuatro metros es una
   rendija. Y el realce del foco es contorno de 4 px separado 6 px con escala
   1.04 (ESTÉTICA §6.1), salvo lo que ocupa el lienzo entero.

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

/* ── La raíz: zona segura del televisor, nunca al borde del panel ── */
.tv-pantalla.es-hogar-bienvenida,
.tv-pantalla.es-hogar-pareo,
.tv-pantalla.es-hogar-muestra,
.tv-pantalla.es-hogar-salir {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: var(--tv-fondo);
  color: var(--tv-texto);
  overflow: hidden;
}

.tv-hogar-raiz {
  position: absolute;
  top: var(--tv-seguro-y);
  right: var(--tv-seguro-x);
  bottom: var(--tv-seguro-y);
  left: var(--tv-seguro-x);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* La marca va como IMAGEN (orden de Roberto del 21/9). 520 px es el ancho al
   que `reposo.js` pinta el logotipo entero —con su lema legible— y se
   reutiliza para no abrir una segunda medida del mismo activo. */
/* El `h1` que envuelve al logotipo no aporta tipografía: la marca ES la
   imagen. Se le quita el margen del título para que mande el de la imagen. */
.tv-hogar-h1.es-marca { margin: 0; font-size: 0; line-height: 0; }
.tv-hogar-logo {
  display: block;
  width: 520px;
  height: auto;
  margin: 0 0 var(--tv-e4) 0;
}

.tv-hogar-h1 {
  /* La serif de la marca. `tokens.css` la publica como `--ip-serif`;
     no se inventa una familia nueva aquí. */
  font-family: var(--ip-serif, Georgia, serif);
  font-size: var(--tv-fs-h1);
  line-height: var(--tv-lh-titulo);
  font-weight: var(--tv-peso-serif);
  color: var(--tv-texto);
  margin: 0 0 var(--tv-e4) 0;
  max-width: var(--tv-medida-max);
}

.tv-hogar-cuerpo {
  font-size: var(--tv-fs-cuerpo);
  line-height: var(--tv-lh-cuerpo);
  color: var(--tv-texto-2);
  margin: 0 0 var(--tv-e3) 0;
  max-width: var(--tv-medida-max);
}

.tv-hogar-rotulo {
  font-size: var(--tv-fs-rotulo);
  letter-spacing: var(--tv-tracking-rotulo);
  text-transform: uppercase;
  color: var(--tv-texto-2);
  margin: 0 0 var(--tv-e2) 0;
}

/* Una lista vacía se dice, y se dice sin gritar: es un hecho, no un error. */
.tv-hogar-cuerpo.es-vacia { color: var(--tv-texto-3); }

/* ── Los botones ─────────────────────────────────────────────────────── */
.tv-hogar-opciones {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: var(--tv-e5);
  /* Sitio para el anillo del foco: 4 px de contorno + 6 px de separación.
     Sin esto el realce del primer botón empieza en x = 90 y la zona segura
     empieza en 96. */
  margin-left: 10px;
}

.tv-hogar-boton {
  /* 96 × 96 de ÁREA como mínimo: el alto por `min-height`, el ancho por el
     relleno horizontal más el texto. Nada de `gap`: margen a la derecha y
     `:last-child` lo quita, que es lo que funciona en 53. */
  box-sizing: border-box;
  min-height: 96px;
  min-width: 96px;
  margin: 0 var(--tv-e3) var(--tv-e3) 0;
  padding: var(--tv-e3) var(--tv-e5);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tv-superficie-alta);
  border: 2px solid var(--tv-linea);
  color: var(--tv-texto);
  font-size: var(--tv-fs-h3);
  line-height: var(--tv-lh-titulo);
  /* `--tv-radio` es 0 a propósito: esquinas rectas, como el sitio. */
  border-radius: var(--tv-radio);
  transition: transform var(--tv-dur-foco, 200ms) ease-out,
              border-color var(--tv-dur-foco, 200ms) ease-out;
}
.tv-hogar-boton:last-child { margin-right: 0; }

/* EL REALCE DEL FOCO NO SE ESCRIBE AQUÍ, Y ESO ES LO IMPORTANTE.
   `tokens.css` ya publica `.is-focused` —contorno de 4 px separado 6 px,
   escala 1.04 y fondo— para toda la televisión. La primera versión de esta
   hoja lo repetía con los mismos valores escritos a mano: una segunda verdad
   que habría caducado en el primer retoque de estética, y que además entró en
   guerra con la regla buena. Aquí sólo se añade lo que es PROPIO del botón de
   casa: que su borde también se encienda. */
/* UN BOTÓN DE CASA NO CRECE AL ENFOCARSE, Y COSTÓ DOS VUELTAS DE GATE LLEGAR
   AQUÍ. `.is-focused` de `tokens.css` escala 1.04, que en una pantalla de
   1920 es un gesto caro: un botón de 566 px se ensancha 11 px por lado y su
   anillo acababa en x = 74 cuando la zona segura empieza en 96.

   El primer arreglo fue anclar el origen a la izquierda. Funcionaba **mientras
   el botón fuera estrecho**: en cuanto uno llenó el ancho de la zona segura, el
   mismo desbordamiento apareció entero por la derecha, en x = 1892 con el
   límite en 1824. La escala no se había arreglado, se había mudado de lado.

   Se quita la escala. El foco se ve perfectamente con el anillo dorado y el
   fondo —es como ya viven las filas de entrega—, y esta regla **no puede
   volver a empujar nada fuera del panel, mida lo que mida el botón**. Era la
   diferencia entre tapar el síntoma y quitar la causa. */
.tv-hogar-boton.is-focused {
  border-color: var(--tv-oro-claro);
  transform: none;
}

/* UN SOLO PRIMARIO EN LA PANTALLA. Los secundarios se distinguen por COLOR,
   nunca por tamaño: el área de toque de 96 × 96 es lo que hace que un mando
   acierte a cuatro metros, y recortarla para «subordinar» sería cambiar
   jerarquía por puntería. */
.tv-hogar-boton.es-secundario {
  background: transparent;
  border-color: var(--tv-linea);
  color: var(--tv-texto-2);
}
.tv-hogar-boton.es-secundario.is-focused {
  background: var(--tv-realce);
  color: var(--tv-texto);
}

/* ── H0 · la lista de entregas de la familia ─────────────────────────── */
.tv-hogar-entregas {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--tv-e4);
  /* Sitio para el anillo del foco: 4 px de contorno + 6 px de separación. Sin
     este hueco el realce de la fila empieza justo en el límite de la zona
     segura y un sobrebarrido se lo lleva. */
  margin-left: 10px;
  margin-right: 10px;
}

.tv-hogar-entrega {
  box-sizing: border-box;
  min-height: 96px;
  margin-bottom: var(--tv-e2);
  padding: var(--tv-e3) var(--tv-e4);
  display: flex;
  flex-direction: row;
  align-items: baseline;
  background: var(--tv-superficie);
  border-left: 6px solid var(--tv-linea);
  transition: transform var(--tv-dur-foco, 200ms) ease-out,
              border-color var(--tv-dur-foco, 200ms) ease-out;
}
.tv-hogar-entrega:last-child { margin-bottom: 0; }

/* UNA FILA DE ENTREGA NO CRECE AL ENFOCARSE, Y HAY UNA MEDIDA DETRÁS.
   La fila ocupa casi los 1728 px de la zona segura. La escala 1.04 de
   `tokens.css` le añadiría 34 px por lado —más los 6 de separación del
   contorno—, y el anillo acabaría a 56 px del borde del panel cuando la zona
   segura empieza a 96. En una televisión con sobrebarrido, eso se corta.
   Medido en la primera captura de este banco: el contorno llegaba a x = 48.

   Se anula la escala y se deja el contorno, que sí cabe. No se usa
   `es-realce-adentro` porque esa clase significa otra cosa —el anillo en el
   borde de la zona segura, para piezas de 1920 x 1080— y ponérsela a una fila
   pintaba un rectángulo gigante sobre toda la pantalla. */
.tv-hogar-entrega.is-focused {
  transform: none;
  border-left-color: var(--tv-oro-claro);
}

.tv-hogar-entrega-nombre {
  font-size: var(--tv-fs-h3);
  color: var(--tv-texto);
  margin-right: var(--tv-e4);
}

/* La fecha llega HECHA del servidor; aquí sólo se viste. */
.tv-hogar-entrega-fecha {
  font-size: var(--tv-fs-cuerpo);
  color: var(--tv-texto-2);
  font-variant-numeric: var(--tv-cifras);
}

/* La salida a la selección de fotos NO es un botón: no lleva a ninguna parte
   dentro de la televisión (RN-02). Se ve que es una nota, no una acción. */
.tv-hogar-cuerpo.es-enlace-seleccion {
  margin-top: var(--tv-e4);
  padding-left: var(--tv-e3);
  border-left: 2px solid var(--tv-linea);
  color: var(--tv-texto-2);
}

/* ── H1 · el pareo: el código es el titular, el QR va al lado ────────── */
/* EL QR A LA ALTURA DEL CÓDIGO, no a la del primer párrafo. Con
   `flex-start` el cuadro quedaba 250 px por encima del código mientras el
   texto decía «escanee el cuadro» — medido por el gate. Centrado, el cuadro
   y su titular se leen como una sola pieza. */
.tv-hogar-pareo-cuerpo {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.tv-hogar-pareo-texto {
  flex: 1 1 auto;
  margin-right: var(--tv-e6);
  min-width: 0;   /* sin esto un hijo de flex no encoge y desborda el panel */
}

/* La dirección que la familia teclea en su teléfono. En una línea, siempre:
   partida por la mitad no se puede copiar. */
.tv-hogar-pareo-uri {
  font-size: var(--tv-fs-cuerpo);
  color: var(--tv-texto);
  margin: 0 0 var(--tv-e3) 0;
  max-width: var(--tv-linea-max);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* EL CÓDIGO. Es lo más grande de la pantalla, y con las cifras de ancho fijo
   para que ocho caracteres no bailen mientras el código rota. */
.tv-hogar-codigo {
  font-size: var(--tv-fs-codigo);
  line-height: var(--tv-lh-display);
  letter-spacing: var(--tv-tracking-codigo);
  font-variant-numeric: var(--tv-cifras);
  color: var(--tv-oro-claro);
  margin: var(--tv-e3) 0;
}

.tv-hogar-rotulo.es-caduca { color: var(--tv-texto-3); margin-top: var(--tv-e2); }
.tv-hogar-cuerpo.es-agotado { color: var(--tv-aviso); }

/* El QR: 240 px, sobre la única superficie clara de la televisión.
   Pequeño, no mínimo (instrucción 23 de Roberto). */
.tv-hogar-qr {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 240px;
  height: 240px;
  padding: var(--tv-e2);
  background: var(--tv-qr-fondo);
  color: var(--tv-qr-tinta);
}
.tv-hogar-qr .tv-qr-lienzo { width: 100%; height: 100%; }
.tv-hogar-qr .tv-qr-lienzo svg { display: block; width: 100%; height: 100%; }

/* SIN QR, LA TARJETA SE RETIRA DEL TODO.
   La primera versión la dejaba como un marco punteado de 240 px: a cuatro
   metros eso se lee como una imagen que no cargó, y el paso 2 seguía
   mandando escanearlo. Ahora el paso 2 cambia de texto y el hueco desaparece;
   el código, que ya es el titular, ocupa la pantalla. */
.tv-hogar-qr.es-sin-qr { display: none; }

/* ── H0d · la muestra ────────────────────────────────────────────────── */
.tv-hogar-lienzo {
  position: relative;
  width: 100%;
  /* Proporción 16:9 sin `aspect-ratio`, que no existe hasta Chromium 88. */
  padding-top: 56.25%;
  overflow: hidden;
  background: var(--tv-superficie);
}
.tv-hogar-foto {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── El diálogo de salida ────────────────────────────────────────────── */
.tv-hogar-dialogo {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.tv-hogar-dialogo .tv-hogar-opciones { justify-content: center; }

/* ── La fila de teclas: abajo, tenue, y siempre presente ─────────────── */
.tv-hogar-teclas {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: var(--tv-e3);
}
.tv-hogar-teclas-texto {
  font-size: var(--tv-fs-rotulo);
  letter-spacing: var(--tv-tracking-rotulo);
  color: var(--tv-texto-3);
}