/* =========================================================================
   style.css — interfaz del televisor (LG webOS · Samsung Tizen · navegador)
   =========================================================================

   SE MIRA DESDE TRES METROS. Eso manda sobre todo lo demás: letra grande,
   pocos elementos por pantalla y estados que se distingan de un vistazo sin
   tener que leer nada.

   EL PANEL Y EL VÍDEO SON DOS COSAS. Antes el panel de canales era un
   degradado que se desvanecía hacia la derecha, y encima se pintaban filas
   con fondo opaco. El resultado: la fila enfocada parecía un recorte pegado
   sobre un fondo que se iba, porque su borde derecho caía justo en la zona
   transparente.

   Ahora el panel es una superficie sólida con un borde derecho definido, y
   el degradado se ha sacado fuera (`.rail::after`): es una franja aparte que
   funde ese borde con el vídeo. Panel y difuminado dejan de pelearse porque
   ya no son la misma capa.

   LAS FILAS VIVEN DENTRO. Cada fila lleva margen a los lados, así que la
   selección nunca toca el borde del panel ni asoma al difuminado.

   TRES ESTADOS, TRES SEÑALES DISTINTAS:
     · enfocado    superficie llena + barra ámbar     (dónde está el mando)
     · en directo  lamparita verde + nombre verde     (qué se está viendo)
     · favorito    estrella llena                     (marcado por el usuario)
   Se pueden dar a la vez y se siguen leyendo, porque cada uno usa un recurso
   visual distinto: fondo, color de texto e icono.

   COMPATIBILIDAD. webOS 5 monta Chromium 68 y Tizen 4 anda por ahí cerca:
   nada de `gap` en flex, `inset`, `:is()` ni anidamiento. Los prefijos
   -webkit- de flexbox se mantienen por los modelos de 2018 hacia atrás.
   ========================================================================= */

:root {
  --ink:      #070C0F;   /* fondo general */
  --panel:    #0D1519;   /* superficie del panel de canales */
  --raise:    #17242A;   /* fila enfocada */
  --line:     #22333B;   /* separadores y bordes */
  --text:     #EAF2F4;
  --muted:    #7F98A1;
  --faint:    #4A5F68;   /* números de canal en reposo */
  --accent:   #F0A73C;   /* el foco del mando */
  --live:     #4FD08A;   /* lo que se está viendo */

  --safe:     56px;      /* margen contra el overscan del televisor */
  --radio:    10px;
  --mono:     ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
}

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

html, body {
  width: 100%; height: 100%;

  background: #070C0F;  /*fb*/
  background: var(--ink);

  color: #EAF2F4;  /*fb*/
  color: var(--text);
  font-family: "SamsungOne", "LG Smart UI", ui-sans-serif, "Segoe UI", Roboto, Arial, sans-serif;
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
}

[hidden] { display: none !important; }

.screen {
  /* Los cuatro lados, no `inset`: el atajo llegó en Chromium 87 y
     webOS 5 monta Chromium 68, donde se ignora la regla entera. */
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

/* ========================= Arranque y errores ========================== */

.centered {
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;

  padding: 56px;  /*fb*/
  padding: var(--safe);
}
/* En vez de `gap`, que no existe en flex hasta Chromium 84. */
.centered > * { margin: 12px 0; }

.spinner {
  width: 46px; height: 46px;

  border: 3px solid #22333B;  /*fb*/
  border: 3px solid var(--line);

  border-top-color: #F0A73C;  /*fb*/
  border-top-color: var(--accent);
  border-radius: 50%;
  -webkit-animation: spin 900ms linear infinite;
  animation: spin 900ms linear infinite;
}
@-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

.headline { font-size: 40px; font-weight: 600; letter-spacing: -0.01em; }
.body-text { font-size: 26px;

 color: #7F98A1;  /*fb*/
 color: var(--muted); max-width: 900px; line-height: 1.45; }

#screen-fault .headline {

 color: #F0A73C;  /*fb*/
 color: var(--accent); }

/* ==================== Pantalla de emparejamiento ======================

   Es la primera pantalla que ve alguien, y a veces la única durante un rato,
   así que tiene que explicarse sola. Dos datos que hay que dictar por
   teléfono —identificador y código— y nada más compitiendo por la atención.

   Van en tarjetas separadas y en monoespaciada porque se leen carácter a
   carácter: con letra proporcional, un 0 y una O se confunden al dictarlos.

   Estas clases no existían en la hoja: el HTML las usaba y el televisor las
   pintaba sin estilo, con el spinner suelto y los dos datos amontonados.
   ====================================================================== */

#screen-pair {
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;

  padding: 56px;  /*fb*/
  padding: var(--safe);

  background: radial-gradient(90% 70% at 50% 0%, #10242C 0%, transparent 60%), #070C0F;  /*fb*/
  background: radial-gradient(90% 70% at 50% 0%, #10242C 0%, transparent 60%),
    var(--ink);
}

.pair-wrap {
  width: 100%;
  max-width: 1180px;
  text-align: center;
}

/* El aro sitúa el spinner: sin él quedaba flotando sobre el texto. */
.pair-aro {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 92px; height: 92px;
  margin-bottom: 30px;
  border-radius: 50%;
  background: rgba(240, 167, 60, .08);
  border: 1px solid rgba(240, 167, 60, .22);
}
.pair-aro .spinner { width: 38px; height: 38px; }

.eyebrow {
  font-size: 20px;
  letter-spacing: 0.04em;

  color: #F0A73C;  /*fb*/
  color: var(--accent);
  margin-bottom: 14px;
}

.pair-titulo {
  font-size: 46px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.pair-note {
  margin: 20px auto 0;
  max-width: 760px;          /* línea corta: se lee mejor de lejos */
  font-size: 25px;

  color: #7F98A1;  /*fb*/
  color: var(--muted);
  line-height: 1.5;
}

/* Los dos datos, uno al lado del otro. Con uno solo, queda centrado. */
.pair-datos {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 44px;
}

.pair-dato {
  /* Ancho fijo e igual en los dos: con `min-width` la tarjeta del
     identificador salía más ancha que la del código y quedaban descuadradas. */
  width: 500px;
  margin: 10px;
  padding: 26px 30px 30px;

  background: #0D1519;  /*fb*/
  background: var(--panel);

  border: 1px solid #22333B;  /*fb*/
  border: 1px solid var(--line);
  border-radius: 16px;
}

.pair-etiqueta {
  display: block;
  font-size: 18px;

  color: #7F98A1;  /*fb*/
  color: var(--muted);
  margin-bottom: 14px;
}

.mac-hero {
  display: block;

  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;  /*fb*/
  font-family: var(--mono);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;

  color: #EAF2F4;  /*fb*/
  color: var(--text);
  /* Android se identifica con un UUID de 36 caracteres, no con una MAC. Sin
     esto se salía de la tarjeta y se cortaba por la mitad. */
  word-break: break-all;
}

/* El código se dicta por teléfono: va en el color de «esto es lo que sirve». */
/* El código se dicta por teléfono: la cuenta atrás avisa de que va a cambiar. */
.pair-cuenta {
  display: block;
  margin-top: 10px;
  font-size: 15px;

  color: #7F98A1;  /*fb*/
  color: var(--muted);
  letter-spacing: .02em;
}

.code-hero {
  display: block;

  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;  /*fb*/
  font-family: var(--mono);
  font-size: 52px;
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1.1;

  color: #4FD08A;  /*fb*/
  color: var(--live);
}

.pair-meta {
  margin-top: 16px;
  font-size: 18px;

  color: #4A5F68;  /*fb*/
  color: var(--faint);
}
.pair-meta:first-of-type { margin-top: 40px; }

/* Se conserva por si alguna pantalla antigua todavía lo usa. */
.waiting {
  margin-top: 22px;
  display: -webkit-inline-box;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  font-size: 20px;

 color: #7F98A1;  /*fb*/
 color: var(--muted);
}
.waiting .dot { margin-right: 12px; }
.dot {
  width: 10px; height: 10px; border-radius: 50%;

  background: #F0A73C;  /*fb*/
  background: var(--accent);
  -webkit-animation: pulse 1.6s ease-in-out infinite;
  animation: pulse 1.6s ease-in-out infinite;
}
@-webkit-keyframes pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none; opacity: .8; } }

/* ========================== Guía de canales =========================== */

#screen-guide { background: #000; }

#video {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%;
  background: #000;
  object-fit: contain;
}

/* ---------------------------- El panel --------------------------------
   Superficie sólida con borde propio. El difuminado hacia el vídeo es el
   pseudo-elemento de abajo, no el fondo: así la fila enfocada se pinta
   sobre un color estable y no sobre un degradado que se apaga.
   ---------------------------------------------------------------------- */

.rail {
  position: relative;
  width: 640px; height: 100%;

  background: #0D1519;  /*fb*/
  background: var(--panel);

  border-right: 1px solid #22333B;  /*fb*/
  border-right: 1px solid var(--line);
  /* Abajo se reserva el alto de la barra de teclas: va posicionada encima del
     panel, y sin este hueco tapaba los dos últimos canales de la lista. */

  padding: 56px 0 72px;  /*fb*/
  padding: var(--safe) 0 72px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-transition: opacity 220ms ease, -webkit-transform 220ms ease;
  transition: transform 220ms ease, opacity 220ms ease;
}

/* La franja que funde el panel con el vídeo. Va fuera del panel, pegada a su
   borde derecho, para no afectar a nada de lo que hay dentro. */
.rail::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 100%;
  width: 160px;
  pointer-events: none;
  background: -webkit-linear-gradient(left, rgba(13, 21, 25, .92), rgba(13, 21, 25, 0));
  background: linear-gradient(90deg, rgba(13, 21, 25, .92), rgba(13, 21, 25, 0));
}

#screen-guide.list-hidden .rail {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) { .rail { transition: none; } }

.rail-head {
  -webkit-flex: none;
  flex: none;

  padding: 0 56px 20px;  /*fb*/
  padding: 0 var(--safe) 20px;
  margin-bottom: 12px;

  border-bottom: 1px solid #22333B;  /*fb*/
  border-bottom: 1px solid var(--line);
}
.rail-title { font-size: 32px; font-weight: 600; letter-spacing: -0.01em; }
.rail-count { font-size: 19px;

 color: #7F98A1;  /*fb*/
 color: var(--muted); margin-top: 6px; }

#channel-list {
  list-style: none;
  overflow-y: auto;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  min-height: 0;
  padding: 4px 18px;
  scrollbar-width: none;
}
#channel-list::-webkit-scrollbar { display: none; }

/* ----------------------------- Las filas ------------------------------
   Rejilla de tres columnas: número · texto · estrella. El número y la
   estrella tienen ancho fijo, así los nombres arrancan todos alineados
   aunque el número cambie de ancho.
   ---------------------------------------------------------------------- */

.ch {
  position: relative;

  /* CSS Grid llegó en Chromium 57. Si algún televisor monta un motor
     anterior, `display: grid` se descarta y la fila se apilaría en vertical.
     Estas tres líneas van ANTES a propósito: allí manda el flex, y donde hay
     grid gana la declaración de abajo por ser la última válida. */
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;

  display: grid;
  grid-template-columns: 58px 1fr 44px;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 16px;
  padding: 12px 14px;
  margin-bottom: 2px;

  border-radius: 10px;  /*fb*/
  border-radius: var(--radio);
}

.ch-num {
  margin-right: 16px;   /* respaldo de column-gap donde no hay grid */
  grid-column: 1;
  grid-row: 1 / 3;
  margin-right: 0;

  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;  /*fb*/
  font-family: var(--mono);
  font-size: 21px;

  color: #4A5F68;  /*fb*/
  color: var(--faint);
  text-align: right;
}

.ch-name {
  grid-column: 2;
  grid-row: 1;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ch-group {
  grid-column: 2;
  grid-row: 2;
  font-size: 17px;

  color: #7F98A1;  /*fb*/
  color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Un canal sin categoría no debe dejar un hueco vacío bajo el nombre. */
.ch-group:empty { display: none; }

/* --- La estrella -------------------------------------------------------
   Antes no tenía ni una línea de CSS, así que el televisor pintaba el
   <button> por defecto del navegador en cada fila: un rectángulo gris con
   borde. Era, literalmente, lo que más afeaba la lista.

   En reposo no se ve. Aparece si el canal es favorito, o si el mando está
   encima —ahí sí interesa saber que se puede marcar con el botón amarillo—.
   ----------------------------------------------------------------------- */

.ch-fav {
  grid-column: 3;
  grid-row: 1 / 3;
  -webkit-appearance: none;
  appearance: none;
  width: 40px; height: 40px;
  padding: 8px;
  background: transparent;
  border: 0;
  border-radius: 50%;

  color: #4A5F68;  /*fb*/
  color: var(--faint);
  cursor: pointer;
  opacity: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.ch-fav svg {
  width: 100%; height: 100%; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.8;
}

.ch.is-focused .ch-fav { opacity: .55; }
.ch.es-fav .ch-fav { opacity: 1;

 color: #F0A73C;  /*fb*/
 color: var(--accent); }
.ch.es-fav .ch-fav svg { fill: currentColor; }

/* --- Enfocado: dónde está el mando ------------------------------------ */

.ch.is-focused {

  background: #17242A;  /*fb*/
  background: var(--raise);

  -webkit-box-shadow: inset 4px 0 0 #F0A73C;  /*fb*/
  -webkit-box-shadow: inset 4px 0 0 var(--accent);

  box-shadow: inset 4px 0 0 #F0A73C;  /*fb*/
  box-shadow: inset 4px 0 0 var(--accent);
}
.ch.is-focused .ch-num {

 color: #F0A73C;  /*fb*/
 color: var(--accent); }
.ch.is-focused .ch-group { color: #9BB2BB; }

/* --- En directo: qué se está viendo ------------------------------------
   Una lamparita en el margen, fuera de la rejilla, para que al aparecer no
   desplace ni el número ni el nombre.
   ----------------------------------------------------------------------- */

.ch.is-playing .ch-num {

 color: #4FD08A;  /*fb*/
 color: var(--live); }
.ch.is-playing .ch-name {

 color: #4FD08A;  /*fb*/
 color: var(--live); }

.ch.is-playing::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 8px; height: 8px;
  margin-top: -4px;
  border-radius: 50%;

  background: #4FD08A;  /*fb*/
  background: var(--live);
  -webkit-box-shadow: 0 0 10px rgba(79, 208, 138, .8);
  box-shadow: 0 0 10px rgba(79, 208, 138, .8);
}
/* Enfocado y en directo a la vez: la barra ámbar ocupa ese margen, así que
   la lamparita se corre para no quedar debajo. */
.ch.is-playing.is-focused::before { left: 10px; }

.sin-resultados {
  padding: 40px 16px;
  font-size: 21px;
  line-height: 1.5;

  color: #7F98A1;  /*fb*/
  color: var(--muted);
  text-align: center;
}

/* -------- Pestañas y buscador (solo salen en pantallas de mano) -------- */

.tabs-canales {
  -webkit-flex: none;
  flex: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;

  padding: 0 56px 14px;  /*fb*/
  padding: 0 var(--safe) 14px;
}
.tc {
  font: inherit;
  font-size: 19px;

  color: #7F98A1;  /*fb*/
  color: var(--muted);
  background: transparent;

  border: 1px solid #22333B;  /*fb*/
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 20px;
  margin-right: 8px;
  cursor: pointer;
  outline: none;
}
.tc.sel {

  color: #070C0F;  /*fb*/
  color: var(--ink);

  background: #F0A73C;  /*fb*/
  background: var(--accent);

  border-color: #F0A73C;  /*fb*/
  border-color: var(--accent);
  font-weight: 600;
}

.buscador { -webkit-flex: none; flex: none;

 padding: 0 56px 14px;  /*fb*/
 padding: 0 var(--safe) 14px; }
.buscador input {
  width: 100%;
  font: inherit;
  font-size: 20px;

  color: #EAF2F4;  /*fb*/
  color: var(--text);

  background: #17242A;  /*fb*/
  background: var(--raise);

  border: 1px solid #22333B;  /*fb*/
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 16px;
  outline: none;
  -webkit-appearance: none;
}
.buscador input:focus {

 border-color: #F0A73C;  /*fb*/
 border-color: var(--accent); }

/* ------------------- Rótulo del canal en curso -------------------------
   Visible cuando la lista se aparta: es lo único que queda para saber qué
   se está viendo.
   ----------------------------------------------------------------------- */

.now {
  position: absolute;

  left: 56px;  /*fb*/
  left: var(--safe); bottom: var(--safe);
  max-width: 60%;
  opacity: 0;
  -webkit-transition: opacity 200ms ease;
  transition: opacity 200ms ease;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .9);
}
#screen-guide.list-hidden .now { opacity: 1; }
.now-name { font-size: 46px; font-weight: 600; letter-spacing: -0.01em; }
.now-group { font-size: 22px;

 color: #7F98A1;  /*fb*/
 color: var(--muted); margin-top: 8px; }

#overlay-status {
  position: absolute;

  right: 56px;  /*fb*/
  right: var(--safe); bottom: var(--safe);
  max-width: 46%;
  font-size: 23px;
  line-height: 1.4;

  color: #EAF2F4;  /*fb*/
  color: var(--text);
  background: rgba(13, 21, 25, .92);

  border: 1px solid #22333B;  /*fb*/
  border: 1px solid var(--line);
  padding: 14px 24px;

  border-radius: 10px;  /*fb*/
  border-radius: var(--radio);
}

/* ====================== Pistas de teclas del mando ===================== */

.hints {
  position: absolute;

  left: 56px;  /*fb*/
  left: var(--safe);
  bottom: 20px;
  font-size: 17px;

  color: #7F98A1;  /*fb*/
  color: var(--muted);
  -webkit-transition: opacity 200ms ease;
  transition: opacity 200ms ease;
}
#screen-guide.list-hidden .hints { opacity: 0; }
.hints span { margin-right: 26px; }
.hints b {
  display: inline-block;

  color: #EAF2F4;  /*fb*/
  color: var(--text);
  font-weight: 500;

  border: 1px solid #22333B;  /*fb*/
  border: 1px solid var(--line);

  background: #17242A;  /*fb*/
  background: var(--raise);
  border-radius: 5px;
  padding: 3px 11px;
  margin-right: 9px;
}
.hints b.k-red, .hints b.k-green {
  width: 30px; height: 12px;
  padding: 0; border: 0; border-radius: 999px;
  vertical-align: middle;
}
.hints b.k-red { background: #D8443C; }
.hints b.k-green { background: #3FA85C; }

/* ===================== Diálogos: salida y diagnóstico ==================
   Los dos comparten caja. Son los únicos sitios donde se tapa el vídeo, así
   que el fondo va bien oscuro y la caja bien centrada.
   ====================================================================== */

.sheet {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(4, 8, 10, .9);
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;

  padding: 56px;  /*fb*/
  padding: var(--safe);
  z-index: 10;
}
.sheet-box {
  width: 1080px; max-width: 100%;
  max-height: 100%;
  overflow-y: auto;

  background: #0D1519;  /*fb*/
  background: var(--panel);

  border: 1px solid #22333B;  /*fb*/
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 44px 52px;
}
.sheet-eyebrow {
  font-size: 19px;

  color: #F0A73C;  /*fb*/
  color: var(--accent);
  margin-bottom: 10px;
}
.sheet-title {
  font-size: 38px; font-weight: 600;
  margin-bottom: 26px; letter-spacing: -0.015em;
}
.sheet-body { font-size: 24px; line-height: 1.5; }

.sheet-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  padding: 13px 0;
  border-bottom: 1px solid rgba(34, 51, 59, .7);
}
.sheet-row:last-of-type { border-bottom: 0; }
.sheet-k {
  width: 260px; -webkit-flex: none; flex: none;
  margin-right: 20px;

 color: #7F98A1;  /*fb*/
 color: var(--muted);
}
.sheet-v {

 font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;  /*fb*/
 font-family: var(--mono); word-break: break-word; }

.sheet-verdict {
  margin-top: 24px; padding: 20px 24px;

  background: #17242A;  /*fb*/
  background: var(--raise);

  border-left: 4px solid #7F98A1;  /*fb*/
  border-left: 4px solid var(--muted);
  border-radius: 8px;
  font-size: 23px; line-height: 1.45;
}
.sheet-verdict.bad  {

 border-left-color: #F0A73C;  /*fb*/
 border-left-color: var(--accent); color: var(--accent); }
.sheet-verdict.good {

 border-left-color: #4FD08A;  /*fb*/
 border-left-color: var(--live);   color: var(--live); }

.sheet-foot { margin-top: 28px; font-size: 19px;

 color: #4A5F68;  /*fb*/
 color: var(--faint); }
.sheet-foot b {

 color: #7F98A1;  /*fb*/
 color: var(--muted); font-weight: 500; }

/* Dos opciones grandes, navegables con ◀ ▶ */
.choices {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.choice {
  font-family: inherit;
  font-size: 26px;

  color: #EAF2F4;  /*fb*/
  color: var(--text);

  background: #17242A;  /*fb*/
  background: var(--raise);

  border: 1px solid #22333B;  /*fb*/
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 38px;
  margin: 6px;
  cursor: pointer;
  outline: none;
  -webkit-transition: color .18s ease, border-color .18s ease, background .18s ease;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.choice.is-on {

  color: #070C0F;  /*fb*/
  color: var(--ink);

  background: #F0A73C;  /*fb*/
  background: var(--accent);

  border-color: #F0A73C;  /*fb*/
  border-color: var(--accent);
  font-weight: 600;
}

/* ======================= Televisores de 720p ========================== */

@media (max-width: 1366px) {
  :root { --safe: 36px; }
  .rail { width: 480px; }
  .pair-titulo { font-size: 34px; }
  .pair-note, .body-text { font-size: 20px; }
  .pair-dato { width: 380px; padding: 20px 24px 24px; }
  .mac-hero { font-size: 27px; }
  .pair-cuenta { font-size: 17px; }
  .code-hero { font-size: 40px; }
  .headline { font-size: 32px; }
  .rail { padding-bottom: 58px; }
  .ch { grid-template-columns: 46px 1fr 38px; column-gap: 12px; padding: 9px 12px; }
  .ch-fav { width: 34px; height: 34px; }
  .ch-name { font-size: 21px; }
  .ch-group { font-size: 15px; }
  .ch-num { font-size: 17px; }
  .rail-title { font-size: 25px; }
  .now-name { font-size: 34px; }
  #overlay-status { font-size: 19px; }
  .sheet-title { font-size: 30px; }
  .sheet-body, .sheet-verdict { font-size: 19px; }
  .sheet-k { width: 190px; }
  .hints { font-size: 14px; }
}

/* ============ Android: el vídeo lo pinta ExoPlayer detrás ============ */

/* Sin fondo transparente no se vería el vídeo nativo, que va por debajo del
   WebView. El elemento html también pinta fondo: si se olvida, tapa el vídeo
   por mucho que el body sea transparente. */
html.nativo,
body.nativo,
body.nativo #screen-guide {
  background: transparent !important;
}
/* Las pantallas sin vídeo sí necesitan fondo, o se leerían sobre el canal. */
body.nativo #screen-boot,
body.nativo #screen-pair,
body.nativo #screen-fault {

  background: #070C0F;  /*fb*/
  background: var(--ink);
}
/* Con el vídeo detrás, el panel tiene que dejarlo entrever. */
body.nativo .rail { background: rgba(13, 21, 25, .93); }

/* ============== Pantallas pequeñas sin la clase `.movil` ==============
   Es el caso de abrir la página en el navegador de un teléfono para probar.
   Dentro de la app Android manda movil.css, que va aparte.
   ===================================================================== */

@media (max-width: 900px) and (pointer: coarse) {
  :root { --safe: 20px; }
  .rail { width: 100%; border-right: 0; }
  .rail::after { display: none; }   /* sin vídeo al lado, no hay qué fundir */
  .ch { padding: 16px 12px; }       /* dedos, no cursor */
  .ch-name { font-size: 19px; }
  .ch-group { font-size: 14px; }
  .ch-num { font-size: 16px; }
  .ch-fav { opacity: .4; }          /* con dedo no hay foco: tiene que verse */
  .pair-dato { width: 100%; margin: 8px 0; padding: 18px 20px 22px; }
  .mac-hero { font-size: 26px; letter-spacing: .04em; word-break: break-all; }
  .pair-cuenta { font-size: 14px; }
  .code-hero { font-size: 34px; }
  .pair-titulo { font-size: 24px; }
  .pair-aro { width: 62px; height: 62px; margin-bottom: 20px; }
  .headline { font-size: 24px; }
  .body-text, .pair-note { font-size: 16px; }
  .now-name { font-size: 24px; }
  .now-group { font-size: 15px; }
  .hints { display: none; }         /* sin mando, no hay teclas que explicar */
  .sheet-box { padding: 24px; border-radius: 14px; }
  .sheet-title { font-size: 22px; }
  .sheet-body, .sheet-verdict { font-size: 15px; }
  .sheet-row { display: block; }
  .sheet-k { width: auto; margin: 0 0 2px; }
  .choice { font-size: 17px; padding: 14px 22px; }
  #overlay-status {
    font-size: 15px;

 left: 56px;  /*fb*/
 left: var(--safe); right: var(--safe);
    max-width: none; text-align: center;
  }
}

/* ==================== Controles para pantallas táctiles ================= */

/* Solo aparecen en aparatos con dedos: en televisor estorbarían. */
.touch-bar { display: none; }

body.tactil .touch-bar {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 5;
}
body.tactil .tb {
  width: 52px; height: 52px;
  margin-left: 10px;
  padding: 13px;
  border: 0;
  border-radius: 50%;
  background: rgba(23, 36, 42, .88);

  color: #EAF2F4;  /*fb*/
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.tactil .tb:active {

 background: #F0A73C;  /*fb*/
 background: var(--accent); color: var(--ink); }
body.tactil .tb svg { width: 100%; height: 100%; display: block; }

/* La barra de teclas no tiene sentido sin mando. */
body.tactil .hints { display: none; }

/* Filas más altas: un dedo necesita unos 48 px para acertar sin fallar. */
body.tactil .ch { padding: 16px 12px; min-height: 62px; }
body.tactil .ch:active {

 background: #17242A;  /*fb*/
 background: var(--raise); }
body.tactil .ch-fav { opacity: .4; }
body.tactil .ch.es-fav .ch-fav { opacity: 1; }