/* =========================================================================
   movil.css — interfaz de la aplicación Android
   =========================================================================

   ÁMBITO. Todo cuelga de `body.movil`, y esa clase solo la pone app.js cuando
   el motor es ExoPlayer y la pantalla es de mano (`activarModoMovil`). Es
   decir: solo dentro de la aplicación Android. Los televisores LG y Samsung
   siguen con css/style.css sin tocar una coma.

   LA IDEA. Cambia con la orientación, porque el hueco que sobra es distinto.

   De pie, el vídeo se pega arriba del todo y la lista ocupa entera la franja
   de debajo. Nada se solapa: el vídeo no se tapa y la lista no se recorta.

     ┌────────────────────────────────┐
     │                                │
     │            VÍDEO               │  16:9 pegado arriba
     │                                │
     ├────────────────────────────────┤
     │  ⌕ Buscar                      │  buscador clavado
     │  FAVORITOS                     │
     │  ▪ LIGA1                       │  la lista entera, hasta el final
     │  ▪ ESPN                        │
     │  DEPORTES                      │
     │  ▪ TNT                         │
     ├────────────────────────────────┤
     │    ▤      ↻      ⛶      ⏻     │  barra fija; la lista acaba encima
     └────────────────────────────────┘

   De costado no hay alto que repartir, así que el vídeo ocupa la pantalla y
   la lista pasa a un panel a la izquierda —30% como mucho— que se aparta al
   elegir canal y vuelve tocando el vídeo o el botón "Canales".

     ┌───────────┬────────────────────┐
     │ ⌕ Buscar  │                    │
     │ ▪ LIGA1   │       VÍDEO        │
     │ ▪ ESPN    │                    │
     └───────────┴────────────────────┘
          30% máx.               (⛶) botones sueltos, fuera del panel

   POR QUÉ ASÍ Y NO CON FLEXBOX. El panel y sus dos piezas van con posiciones
   absolutas: buscador arriba, lista de arriba de la barra hasta abajo. Un
   hijo flexible con `overflow` depende de `min-height: 0` para recortarse, y
   si algo falla no se recorta y no hay nada que desplazar. Con `top` y
   `bottom` fijos la caja tiene una altura concreta pase lo que pase, así que
   el desplazamiento no puede dejar de funcionar.

   POR QUÉ TAN SOBRIO. Un LG mueve su lista sin despeinarse porque no es más
   que texto en una columna. Aquí hay cientos de filas, así que nada de
   desenfoques de fondo, degradados por tarjeta ni sombras: color plano, una
   capa y a correr.

   TRANSPARENCIA. Con ExoPlayer el vídeo lo pinta Android por detrás del
   WebView, de modo que el panel translúcido deja ver el canal en marcha.
   ========================================================================= */

/* Salvaguarda para cuando NO hay clase `.movil` —por ejemplo al abrir la
   página en el navegador del teléfono para probar—: sin esto una pantalla
   estrecha se quedaría con la lista de 620 px del televisor. */
@media (max-width: 820px) {
  body:not(.movil) .rail {
    width: 100%;
  }

  body:not(.movil) .ch-name {
    font-size: 14px;
  }

  body:not(.movil) .mac-hero {
    font-size: 22px;
    word-break: break-all;
  }

  body:not(.movil) .code-hero {
    font-size: 34px;
  }
}

/* --------------------------------- Paleta -------------------------------- */

body.movil {
  --ink: #141414;
  --panel: #1c1c1c;
  --panel-edge: #2e2e2e;
  --text: #ffffff;
  --muted: #a0a0a0;
  --accent: #e50914;
  /* rojo de marca: acciones y canal en curso */
  --live: #e50914;

  --alto-video: 56.25vw;
  /* 16:9 a todo el ancho, en vertical */
  --ancho-panel: 30%;
  /* el panel de costado */
  --panel-max: 340px;
  --buscador: 56px;
  /* alto de la zona del buscador */
  --barra: 54px;
  /* alto de la barra de botones */
  --radio: 3px;

  font-family: "Netflix Sans", Roboto, "Helvetica Neue", ui-sans-serif, Arial, sans-serif;
  overflow: hidden;
}

body.movil #screen-guide {
  display: block;

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

/* -------------------------------- El vídeo -------------------------------
   De pie, una franja 16:9 pegada al borde de arriba. De costado, la pantalla
   entera.

   AVISO PARA LA PARTE ANDROID: esto coloca el <video> del WebView, que es lo
   que se usa al probar en el navegador. Con ExoPlayer la imagen la pinta
   Android por detrás y app.js borra el elemento, así que quien decide dónde
   va la imagen es el SurfaceView de la actividad. Si en vertical se ve negro
   arriba y la imagen en el centro, es que el SurfaceView sigue a pantalla
   completa: hay que darle el mismo alto 16:9 y pegarlo arriba.
   ------------------------------------------------------------------------- */

body.movil #video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  width: 100%;
  height: var(--alto-video);
  /* Sin tope de alto a propósito: el panel arranca justo en `--alto-video`, y
     si el vídeo se recortara por su cuenta quedaría una franja muerta entre
     los dos. Si hace falta bajarlo, se cambia la variable y bajan ambos. */
  background: #000;
  object-fit: contain;
  z-index: 1;
}

body.movil.apaisado #video {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: none;
}

/* Rótulo del canal en curso, sobre el vídeo. */
body.movil .now {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  padding: 14px 16px 34px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
}

body.movil .now-name {
  font-size: 19px;
  font-weight: 700;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .85);
}

body.movil .now-group {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  font-size: 11px;
  margin-top: 6px;
  color: #d2d2d2;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Es televisión: siempre está en directo, y decirlo ubica al que mira. */
body.movil .now-group::before {
  content: "EN DIRECTO";

  background: #F0A73C;  /*fb*/
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 2px;
  margin-right: 8px;
}

/* De pie la lista nunca se aparta, así que el rótulo no puede depender de
   ella: se deja visible siempre. */
body.movil:not(.apaisado) #screen-guide .now {
  opacity: 1;
}

/* ------------------------------- El panel -------------------------------- */

/* De pie: de debajo del vídeo hasta abajo del todo, a todo el ancho. No se
   monta sobre el vídeo, así que va opaco. */
body.movil .rail {
  position: absolute;
  top: var(--alto-video);
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  min-width: 0;
  height: auto;
  max-height: none;
  display: block;
  /* nada de flex: dentro se coloca por posiciones */
  padding: 0;
  border: 0;
  border-radius: 0;
  /* Color plano, no degradado: es la capa que está debajo de todo lo que se
     desplaza y un degradado a toda altura se repinta con ella. */

  background: #070C0F;  /*fb*/
  background: var(--ink);
  box-shadow: none;
  z-index: 3;
}

/* De pie la lista no se aparta nunca: está debajo del vídeo, no encima, así
   que ocultarla solo dejaría un hueco negro. app.js la manda ocultar al
   elegir canal —tiene sentido de costado— y aquí se ignora. */
body.movil:not(.apaisado) #screen-guide.list-hidden .rail {
  -webkit-transform: none;
  transform: none;
  opacity: 1;
}

body.movil #channel-list {
  display: none;
}

body.movil .rail-head {
  display: none;
}

body.movil .tabs-canales {
  display: none;
}

/* ------------------------------- Buscador --------------------------------
   Clavado arriba: se busca antes de recorrer, no después.
   ------------------------------------------------------------------------- */

body.movil .buscador {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--buscador);
  padding: 11px 10px;
  z-index: 2;
}

body.movil .buscador input {
  width: 100%;
  height: 34px;
  font: 13px/1 inherit;

  color: #EAF2F4;  /*fb*/
  color: var(--text);
  background: rgba(255, 255, 255, .14);
  border: 1px solid transparent;

  border-radius: 10px;  /*fb*/
  border-radius: var(--radio);
  padding: 0 10px 0 30px;
  outline: none;
  -webkit-appearance: none;
  /* La lupa va de fondo: así no hay que tocar el HTML. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4c4c4' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20.5 20.5l-4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 9px center;
  background-size: 14px 14px;
}

body.movil .buscador input:focus {
  border-color: rgba(255, 255, 255, .4);
  background-color: rgba(0, 0, 0, .5);
}

body.movil .buscador input::placeholder {
  color: #c4c4c4;
}

/* -------------------------------- La lista -------------------------------
   Del buscador hasta justo encima de la barra de botones. Al fijar `top` y
   `bottom` la caja tiene una altura concreta pase lo que pase, que es lo que
   garantiza que haya desplazamiento y que la barra no tape la última fila.
   ------------------------------------------------------------------------- */

.browse {
  display: none;
}

body.movil .browse {
  display: block;
  position: absolute;
  top: var(--buscador);
  left: 0;
  right: 0;
  bottom: var(--barra);
  height: auto;
  padding: 0 0 8px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Nombre de la categoría, intercalado donde cambia. */
body.movil .brow-t {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8f8f8f;
  background: rgba(8, 8, 8, .86);
  padding: 14px 10px 6px;
  margin: 0;
}

body.movil .brow-t:first-child {
  padding-top: 8px;
}

/* ------------------------------- Las filas -------------------------------
   Alto fijo y color plano. Todo lo que se pintaba por fila —degradado, borde,
   sombra, estrella vectorial— se ha ido: con cientos de filas, cada adorno se
   paga en cada fotograma del desplazamiento.
   ------------------------------------------------------------------------- */

body.movil .card {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  width: 100%;
  height: 46px;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  padding: 0 4px 0 7px;
  margin: 0;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

body.movil .card:active {
  background: rgba(255, 255, 255, .09);
}

body.movil .card-art {
  position: relative;
  display: block;
  width: 46px;
  height: 28px;
  flex: none;
  -webkit-box-flex: 0;
  margin-right: 9px;

  border-radius: 10px;  /*fb*/
  border-radius: var(--radio);
  overflow: hidden;
  /* Color estable derivado del nombre, plano. Sin logo, las filas serían un
     muro gris imposible de distinguir de un vistazo. */
  background: hsl(var(--h), 26%, 22%);
}

body.movil .card-ini {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, .9);
}

/* El logo tapa las iniciales al cargar; si falla, se oculta y quedan ellas. */
body.movil .card-logo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
  background: rgba(0, 0, 0, .3);
}

body.movil .card-n {
  -webkit-box-flex: 1;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  line-height: 1.2;
  color: #dcdcdc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Canal en curso: filo rojo a la izquierda, como en el televisor. */
body.movil .card.is-playing {

  border-left-color: #4FD08A;  /*fb*/
  border-left-color: var(--live);
  background: rgba(229, 9, 20, .1);
}

body.movil .card.is-playing .card-n {
  color: #fff;
  font-weight: 700;
}

/* La estrella es un carácter, no un dibujo: quinientos SVG menos que pintar. */
body.movil .card-fav {
  flex: none;
  -webkit-box-flex: 0;
  width: 38px;
  line-height: 46px;
  text-align: center;
  font-size: 15px;
  color: rgba(255, 255, 255, .3);
}

body.movil .card.es-fav .card-fav {

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

body.movil .browse-vacio {
  padding: 30px 14px;
  text-align: center;

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

/* Tabletas y pantallas anchas: el 30% da para más letra. */
@media (min-width: 620px) {
  body.movil {
    --buscador: 62px;
  }

  body.movil .card {
    height: 52px;
    padding-left: 10px;
  }

  body.movil .card-art {
    width: 54px;
    height: 32px;
  }

  body.movil .card-n {
    font-size: 14px;
  }

  body.movil .card-fav {
    line-height: 52px;
    font-size: 17px;
  }

  body.movil .brow-t {
    font-size: 12px;
    padding: 16px 12px 7px;
  }

  body.movil .buscador {
    padding: 13px 12px;
  }

  body.movil .buscador input {
    height: 36px;
    font-size: 14px;
  }
}

/* --------------------------- Barra fija de abajo -------------------------
   Cuatro botones, siempre en el mismo sitio. La lista termina justo encima,
   así que no tapa nada.
   ------------------------------------------------------------------------- */

body.movil .touch-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  height: var(--barra);
  z-index: 20;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-around;
  -webkit-box-align: center;
  align-items: center;
  background: rgba(8, 8, 8, .92);
  border-top: 1px solid rgba(255, 255, 255, .09);
}

/* El diagnóstico del canal no le dice nada a quien mira la tele y se comía un
   quinto de la barra. Fuera. (Para recuperarlo, borrar esta regla: el HTML y
   el manejador siguen en su sitio.) */
body.movil #t-diag {
  display: none;
}

/* De pie la lista ya no se aparta nunca —está debajo del vídeo, no encima—,
   así que el botón para "traerla de vuelta" no tiene nada que hacer. De
   costado sigue haciendo falta: ahí el panel sí se monta sobre el vídeo y
   conviene poder despejarlo. */
body.movil:not(.apaisado) #t-list {
  display: none;
}

body.movil .tb {
  width: auto;
  height: 100%;
  -webkit-box-flex: 1;
  flex: 1;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #c9c9c9;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
}

body.movil .tb svg {
  width: 19px;
  height: 19px;
  flex: none;
}

body.movil .tb:active {
  background: transparent;

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

/* Las etiquetas se ponen desde aquí: el HTML no cambia y así caben. */
body.movil .tb::after {
  font-size: 9px;
  font-weight: 500;
  margin-top: 3px;
  line-height: 1;
}

body.movil #t-list::after {
  content: "Canales";
}

body.movil #t-reload::after {
  content: "Recargar";
}

body.movil #t-full::after {
  content: "Pantalla";
}

body.movil #t-exit::after {
  content: "Salir";
}

/* Pantalla completa es lo que más se toca: mismo sitio que el resto, pero en
   rojo para encontrarlo sin mirar. */
body.movil #t-full {
  width: auto;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;

  color: #F0A73C;  /*fb*/
  color: var(--accent);
  -webkit-box-ordinal-group: 1;
  order: 0;
}

body.movil #t-full::after {

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

body.movil #t-full:active {
  background: transparent;
}

body.movil .hints {
  display: none;
}

/* Aviso pasajero (favorito añadido, sintonizando…), encima de la barra y
   fuera del panel, para que se lea también con la lista apartada. */
body.movil #overlay-status {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: calc(var(--barra) + 12px);
  top: auto;
  font-size: 12px;
  color: #fff;
  background: rgba(0, 0, 0, .82);
  padding: 9px 14px;

  border-radius: 10px;  /*fb*/
  border-radius: var(--radio);
  text-align: center;
  z-index: 19;
}

/* -------------------------------- Apaisado -------------------------------
   Mismo panel a la izquierda. Los botones vuelven a ser un grupo suelto en la
   esquina: de costado hay poco alto y una barra a lo ancho se lo come.
   ------------------------------------------------------------------------- */

/* El panel a la izquierda, a toda altura y sobre el vídeo, así que
   translúcido: el canal se sigue viendo mientras se busca otro. */
body.movil.apaisado .rail {
  top: 0;
  bottom: 0;
  left: 0;
  right: auto;
  width: var(--ancho-panel);
  max-width: var(--panel-max);
  height: 100%;
  background: rgba(8, 8, 8, .88);
  box-shadow: 4px 0 20px rgba(0, 0, 0, .45);
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: -webkit-transform 180ms ease-out;
  transition: transform 180ms ease-out;
}

/* Apartado del todo, no a medias: un panel a medio salir tapa sin servir. */
body.movil.apaisado #screen-guide.list-hidden .rail {
  -webkit-transform: translateX(-102%);
  transform: translateX(-102%);
  opacity: 1;
  /* solo se desliza: animar también el alfa cuesta el doble */
}

/* Los botones son un grupo suelto en la esquina, fuera del panel, así que la
   lista puede llegar hasta abajo. Solo se le deja aire para que la última
   fila no quede pegada al borde. */
body.movil.apaisado .browse {
  bottom: 0;
  padding-bottom: 14px;
}

body.movil.apaisado .now {
  padding: 14px 20px 34px;
}

body.movil.apaisado .now-name {
  font-size: 22px;
}

body.movil.apaisado .touch-bar {
  left: auto;
  right: 14px;
  bottom: 14px;
  width: auto;
  height: auto;
  background: transparent;
  border: 0;
  -webkit-box-pack: end;
  justify-content: flex-end;
}

body.movil.apaisado .tb {
  -webkit-box-flex: 0;
  flex: none;
  width: 40px;
  height: 40px;
  margin-left: 9px;
  padding: 10px;
  border-radius: 50%;
  background: rgba(12, 12, 12, .78);
  border: 1px solid rgba(255, 255, 255, .14);

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

body.movil.apaisado .tb::after {
  display: none;
}

body.movil.apaisado .tb svg {
  width: 100%;
  height: 100%;
}

body.movil.apaisado #t-full {
  width: 46px;
  height: 46px;
  padding: 12px;

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

  border-color: #F0A73C;  /*fb*/
  border-color: var(--accent);
  color: #fff;
  -webkit-box-ordinal-group: 10;
  order: 9;
}

body.movil.apaisado #overlay-status {
  left: auto;
  right: 76px;
  width: 46%;
  bottom: 20px;
}

/* -------------------------------- Diálogos ------------------------------- */

body.movil .sheet {
  padding: 0;
  -webkit-box-align: end;
  align-items: flex-end;
  background: rgba(0, 0, 0, .66);
}

body.movil .sheet-box {
  width: 100%;
  padding: 22px 20px;
  border: 0;

  border-top: 3px solid #F0A73C;  /*fb*/
  border-top: 3px solid var(--accent);
  border-radius: 12px 12px 0 0;
  background: #181818;
  max-height: 82vh;
  overflow-y: auto;
}

body.movil .sheet-eyebrow {
  font-size: 11px;
  letter-spacing: .16em;

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

body.movil .sheet-title {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 14px;
}

body.movil .sheet-body {
  font-size: 13px;
}

body.movil .sheet-row {
  padding: 8px 0;
  border-bottom-color: rgba(255, 255, 255, .08);
}

body.movil .sheet-k {
  width: 128px;
  font-size: 12px;
}

body.movil .sheet-verdict {
  font-size: 13px;
  padding: 13px 15px;
  margin-top: 14px;
  background: rgba(255, 255, 255, .06);
}

body.movil .sheet-foot {
  font-size: 11px;
  margin-top: 16px;
}

body.movil .choices {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

body.movil .choice {
  font-size: 14px;
  font-weight: 600;
  padding: 13px 20px;
  margin: 5px;
  border-width: 1px;

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

body.movil .choice.is-on {

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

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

/* ----------------------------- Emparejamiento -----------------------------
   OJO: este bloque sin `body.movil` lo comparten el televisor y el teléfono.
   Se deja tal cual estaba; abajo solo se ajusta la versión de móvil.
   ------------------------------------------------------------------------- */

.pair-wrap {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;

  padding: 56px;  /*fb*/
  padding: var(--safe);
  text-align: center;
}

.pair-aro {
  margin-bottom: 26px;
}

.pair-aro .spinner {
  margin: 0 auto;
}

.pair-titulo {
  font-size: 34px;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 16px;
}

.pair-datos {
  margin: 34px 0 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
}

.pair-dato {
  margin-bottom: 26px;
  padding: 18px 26px;
  border: 2px solid var(--panel-edge);
  border-radius: 12px;

  background: #0D1519;  /*fb*/
  background: var(--panel);
  min-width: 320px;
}

.pair-etiqueta {
  display: block;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;

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

.pair-dato .mac-hero,
.pair-dato .code-hero {
  border-bottom: 0;
  padding: 0;
  display: block;
}

.pair-dato .mac-hero {
  font-size: 40px;
}

.pair-dato .code-hero {
  font-size: 52px;
}

body.movil #screen-pair {
  padding: 0;

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

body.movil .pair-wrap {
  padding: 28px 20px;
}

body.movil .eyebrow {
  font-size: 11px;
  letter-spacing: .18em;

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

body.movil .pair-titulo {
  font-size: 21px;
  font-weight: 700;
}

body.movil .pair-dato {
  min-width: 0;
  width: 100%;
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid var(--panel-edge);

  border-radius: 10px;  /*fb*/
  border-radius: var(--radio);
  background: #1c1c1c;
}

body.movil .pair-etiqueta {
  font-size: 10px;
}

body.movil .pair-dato .mac-hero {
  font-size: 19px;
  word-break: break-all;
  letter-spacing: .04em;
}

body.movil .pair-dato .code-hero {
  font-size: 36px;

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

body.movil .pair-note {
  font-size: 14px;
  margin-top: 16px;
  line-height: 1.5;
}

body.movil .pair-meta {
  font-size: 11px;
  margin-top: 20px;
  color: #6b6b6b;
}

body.movil .headline {
  font-size: 21px;
  font-weight: 700;
}

body.movil .body-text {
  font-size: 14px;
  line-height: 1.5;
}

body.movil .spinner {

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

@media (max-width: 1366px) {
  .pair-titulo {
    font-size: 26px;
  }

  .pair-dato .mac-hero {
    font-size: 28px;
  }

  .pair-dato .code-hero {
    font-size: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.movil .rail {
    -webkit-transition: none;
    transition: none;
  }
}