/* ================================================================
   MÓVIL (solo teléfono). No toca el funcionamiento de TV ni PC:
   todo vive dentro de media queries de ancho/orientación de teléfono.
   - Video sin estirar: el iframe mantiene 16:9 (el video interno usa
     object-fit:fill, que deforma; al darle una caja 16:9 ya no deforma).
   - Vertical: debajo del video se llena el hueco con la info del evento
     (escudos, nombres, liga, país, hora).
   - Horizontal: el video ocupa el máximo de pantalla (16:9 centrado).
   - Cabecera, perfil, botones y teclado ordenados para el dedo.
   ================================================================ */

/* ---- Panel de info del evento: oculto por defecto (TV/PC no lo ven) ---- */
#watch-info { display: none; }

/* ---- CABECERA en teléfono: marca a la izquierda, buscar+perfil a la
   derecha, menú en su propia fila (ya definido en otros css). ---- */
@media (max-width: 820px) {
  header #top-search { margin-left: auto; }
  header #top-profile { margin-left: 10px; flex: 0 0 auto; }
  header #top-profile img { width: 42px; height: 42px; }
}

/* ================= TELÉFONO VERTICAL ================= */
@media (max-width: 820px) and (orientation: portrait) {
  /* Las flechas de abajo (↑↓←→ Navegar · OK · Volver…) son para control
     remoto/TV. En teléfono vertical no sirven: se ocultan. En horizontal y
     en PC/TV se siguen mostrando normal. */
  body > footer { display: none; }
  main { padding-bottom: 28px; }

  /* El reproductor entra COMPLETO en la pantalla, sin scroll vertical:
     botones compactos en una fila deslizable (izq-der), video 16:9, info
     condensada y el carrusel "Más de" ocupando el resto. */
  #watch { overflow: hidden; }
  /* Barra de botones: una sola fila, se desliza de lado; botones de tamaño
     teléfono (no los grandes de TV). */
  .watch-bar {
    flex-wrap: nowrap; overflow-x: auto; gap: 7px; padding: 8px 10px;
    scrollbar-width: none; flex: 0 0 auto;
  }
  .watch-bar::-webkit-scrollbar { display: none; }
  .watch-bar button {
    flex: 0 0 auto; min-height: 40px; font-size: 12.5px; padding: 8px 13px;
    white-space: nowrap;
  }
  #watch-title { display: none; }
  #video-stage { width: 100%; aspect-ratio: 16 / 9; flex: 0 0 auto; background: #000; }

  /* Ficha: ocupa el resto de la pantalla y se condensa; nada de scroll. */
  #watch-info {
    display: flex; flex-direction: column; gap: 7px; padding: 10px 14px 12px;
    background: radial-gradient(130% 70% at 50% 0, #1d1620 0, #0c0c10 60%);
    color: #fff; flex: 1 1 auto; min-height: 0; overflow: hidden;
  }
  .wi-duel {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    margin: 0; flex: 0 0 auto;
  }
  .wi-team { display: flex; flex-direction: row; align-items: center; gap: 7px; max-width: 42%; }
  .wi-team img { width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 3px 6px #000a); }
  .wi-team span {
    font-size: 13px; font-weight: 600; line-height: 1.15;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f1f1f4;
  }
  .wi-vs {
    flex: 0 0 auto; font: 800 15px/1 'Barlow Condensed', Arial, sans-serif;
    color: #ff4a5e; letter-spacing: 1px;
  }
  .wi-name {
    font-size: 16px; font-weight: 700; margin: 0; line-height: 1.2;
    text-align: center; flex: 0 0 auto;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .wi-meta { margin: 0; color: #c7c7cf; font-size: 13px; text-align: center; flex: 0 0 auto;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wi-time { margin: 0; color: #ff8a93; font-size: 12px; text-align: center; font-weight: 600; flex: 0 0 auto; }
  /* Chips y nota se ocultan: repiten la línea de info y gastan altura. */
  .wi-chips, .wi-nota { display: none; }
  .wi-chip {
    background: #17171e; border: 1px solid #2c2c36; border-radius: 12px;
    padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0;
  }
  .wi-chip-k { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #8a8a95; }
  .wi-chip-v { font-size: 14px; font-weight: 600; color: #ededf2; overflow-wrap: anywhere; }
  .wi-nota { margin: 14px 2px 0; color: #9a9aa4; font-size: 12px; text-align: center; }

  /* "Más de [deporte]": otros eventos/canales del mismo deporte para elegir
     sin volver al catálogo. */
  .wi-mas { margin: 2px 0 0; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .wi-mas-tit {
    margin: 0 0 7px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
    color: #ff8a93; font-weight: 700; flex: 0 0 auto;
  }
  .wi-mas-rail {
    display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px;
    scrollbar-width: thin; -webkit-overflow-scrolling: touch;
    flex: 1 1 auto; min-height: 0; align-items: stretch;
  }
  .wi-mas-card {
    flex: 0 0 150px; display: flex; flex-direction: column; gap: 6px; padding: 0 0 8px;
    background: #17171e; border: 1px solid #2c2c36; border-radius: 12px; overflow: hidden;
    text-align: left; cursor: pointer; min-height: 0;
  }
  .wi-mas-thumb {
    position: relative; display: block; width: 100%; height: 84px;
    flex: 1 1 auto; min-height: 72px; background: #0e0e13; overflow: hidden;
  }
  .wi-mas-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* Portada de canal dentro de la miniatura: se escala el texto del diseño. */
  .wi-mas-thumb-canal .channel-cover { padding: 0 10px 8px; }
  .wi-mas-thumb-canal .channel-cover-eyebrow { font-size: 8px; letter-spacing: .14em; margin-bottom: 2px; }
  .wi-mas-thumb-canal .channel-cover-name { font-size: 14px; line-height: 1.05; }
  .wi-mas-thumb-canal .channel-cover-name.largo { font-size: 12px; }
  .wi-mas-thumb-canal .channel-cover-mark { max-width: 74px; top: -6px; right: -8px; }
  .wi-mas-nom {
    padding: 0 10px; font-size: 13px; font-weight: 700; color: #f1f1f4; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .wi-mas-sub {
    padding: 0 10px; font-size: 11px; color: #a0a0aa; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis;
  }
  .wi-mas-card:focus { outline: 3px solid #fff; outline-offset: 2px; }
  .wi-mas-vivo {
    position: absolute; left: 8px; top: 8px; z-index: 2;
    background: #d4113a; color: #fff; font: 700 10px/1 Arial, sans-serif;
    letter-spacing: .04em; padding: 4px 7px; border-radius: 5px;
  }
  .wi-mas-off {
    position: absolute; left: 8px; top: 8px; z-index: 2;
    background: #2a2a30d9; color: #c9c9cf; font: 700 9px/1 Arial, sans-serif;
    letter-spacing: .06em; padding: 4px 7px; border-radius: 5px;
  }
  .wi-mas-fuera { opacity: .5; }
  .wi-mas-fuera:focus { opacity: 1; }
}

/* ================= TELÉFONO HORIZONTAL ================= */
/* Video al máximo (16:9 centrado), barra compacta, sin ficha. */
@media (orientation: landscape) and (max-height: 560px) {
  #watch { flex-direction: column; }
  #watch-info { display: none !important; }
  .watch-bar {
    padding: 6px 10px; gap: 6px; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none;
  }
  .watch-bar::-webkit-scrollbar { display: none; }
  .watch-bar button {
    min-height: 38px; font-size: 12px; padding: 7px 11px; flex: 0 0 auto; white-space: nowrap;
  }
  #watch-title { display: none; }
  #video-stage { flex: 1 1 auto; width: 100%; min-height: 0; aspect-ratio: 16 / 9; max-width: 100%; margin: auto; background: #000; }
}

/* ================= TECLADO EN PANTALLA (teléfono) ================= */
@media (max-width: 820px) and (orientation: portrait) {
  /* El panel se desplaza y deja aire abajo para que NINGUNA tecla quede
     tapada por la barra inferior. */
  /* "Volver" (más chico) y el título en la MISMA fila: se gana altura para
     que el teclado entre completo sin tener que hacer scroll. */
  #choices.keyboard-panel {
    display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start;
    gap: 8px 12px; padding: 10px 12px 28px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .keyboard-panel #close-choices {
    position: static; flex: 0 0 auto; margin: 0;
    padding: 8px 14px; min-height: 40px; font-size: 14px;
  }
  .keyboard-panel #choice-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 17px; }
  .keyboard-panel #choice-items { flex-basis: 100%; margin-top: 2px; }
  /* Se adapta a la ALTURA de la pantalla: teléfono chico → teclas justas;
     teléfono grande → teclas y sugerencias más grandes para llenar el espacio. */
  .keyboard-panel #choice-items {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(6px, 1.1vh, 11px); max-width: 560px; margin: 0 auto;
  }
  .keyboard-panel .key-display {
    font-size: clamp(17px, 2.3vh, 23px); padding: clamp(11px, 1.7vh, 18px) 14px;
    border-radius: 12px; border-color: #6a6a74; background: #1c1c22;
  }
  .keyboard-panel #choice-items button:not(.key-action) {
    min-height: clamp(42px, 6.6vh, 62px); font-size: clamp(17px, 2.5vh, 24px);
    font-weight: 700; border-radius: 11px;
    display: flex; align-items: center; justify-content: center; padding: 4px;
  }
  /* Fila de acciones clara: Buscar ocupa toda la fila; Espacio/Borrar/Limpiar parejas. */
  .keyboard-panel .key-action { grid-column: span 2; min-height: clamp(42px, 6vh, 56px); font-size: clamp(14px, 1.9vh, 17px); }
  .keyboard-panel .key-action:first-of-type { grid-column: 1 / -1; font-size: clamp(16px, 2.1vh, 19px); min-height: clamp(46px, 6.4vh, 58px); }

  /* Al teclear, las sugerencias NO deben empujar el teclado fuera de pantalla:
     van en una caja con su propio scroll de alto limitado, el teclado se queda. */
  .keyboard-panel .search-results {
    max-height: clamp(130px, 26vh, 300px); overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .keyboard-panel .search-status { margin: 2px 0 6px; }
  /* Las sugerencias NO son teclas: alto automático, texto a la izquierda en
     varias líneas (si no, el estilo de tecla las aplasta y se enciman). */
  .keyboard-panel #choice-items .search-results .search-suggestion {
    flex: 0 0 auto;   /* NO encoger: la caja hace scroll, no aplasta el texto */
    min-height: 0; height: auto; display: flex; flex-direction: column;
    align-items: flex-start; justify-content: center; gap: 2px; text-align: left;
    padding: 9px 13px; font-size: 14px; font-weight: 600; line-height: 1.25;
  }
  .keyboard-panel .search-suggestion strong { white-space: normal; }
  .keyboard-panel .search-suggestion small { font-weight: 400; }
}

/* En horizontal el teclado aprovecha el ancho: más columnas. */
@media (orientation: landscape) and (max-height: 560px) {
  #choices.keyboard-panel { padding: 12px 14px 20px; }
  .keyboard-panel #choice-items { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 7px; }
  .keyboard-panel #choice-items button:not(.key-action) { min-height: 44px; font-size: 18px; }
  .keyboard-panel .key-action:first-of-type { grid-column: span 4; }
}

/* Aviso de "jalar para recargar" (móvil) */
.eli-ptr {
  position: fixed; top: 4px; left: 50%; transform: translateX(-50%); z-index: 2147482000;
  background: #b3121f; color: #fff; font: 700 13px Arial, sans-serif;
  padding: 8px 16px; border-radius: 999px; opacity: 0; pointer-events: none;
  transition: opacity .15s ease; box-shadow: 0 4px 14px #0006;
}


/* ================= VARIAS PANTALLAS DE VIDEO (1 a 3) ================= */
/* Contenedor de video: determinista en teléfono, PC y TV. Con un solo video
   no cambia nada (solo se ve #slot1). */
#multi-toggle, #multi-add { display: inline-flex; }
#video-stage { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; background: #000; }
#video-stage .vslot { position: relative; flex: 1 1 0; min-width: 0; min-height: 0; display: flex; background: #000; }
#video-stage .vslot > iframe { flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; border: 0; background: #000; display: block; }
/* Controles flotantes por pantalla adicional (nombre, audio, cerrar). */
.vslot-bar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  background: linear-gradient(180deg, #000b, transparent); pointer-events: none;
}
.vslot-nom { flex: 1 1 auto; min-width: 0; font: 600 12px Arial, sans-serif; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px #000; }
.vslot-audio, .vslot-cerrar, .vslot-cambiar { pointer-events: auto; flex: 0 0 auto; min-height: 30px; min-width: 34px;
  font-size: 13px; padding: 4px 9px; border-radius: 8px; background: #000a; border: 1px solid #ffffff44; color: #fff; }
/* La barra de la 1.ª pantalla solo aparece en modo varias pantallas. */
#slot1 .vslot-bar-1 { display: none; }
#watch.multi #slot1 .vslot-bar-1 { display: flex; }
.vslot-audio[aria-pressed="true"] { background: linear-gradient(135deg, #e31843, #b7072b); border-color: #ff5676; }
.vslot-pick {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 16px; background: #0c0c10f0; color: #ff8a93; font: 700 14px/1.4 Arial, sans-serif;
}

/* PC / TV / tablet (ancho): un video llena; varios van LADO A LADO. */
@media (min-width: 821px) {
  #watch.multi #video-stage { flex-direction: row; }
}

/* TELÉFONO VERTICAL: varios apilados; la ficha deja solo el carrusel. */
@media (max-width: 820px) and (orientation: portrait) {
  #watch.multi #video-stage { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; flex-direction: column; }
  #watch.multi .wi-duel, #watch.multi .wi-name, #watch.multi .wi-meta, #watch.multi .wi-time { display: none; }
  #watch.multi .wi-mas { margin-top: 6px; }
  #watch.multi .wi-mas-tit::after { content: ' · toca para la otra pantalla'; font-weight: 400; color: #c7c7cf; text-transform: none; letter-spacing: 0; }
}

/* TELÉFONO HORIZONTAL: varios lado a lado. */
@media (orientation: landscape) and (max-height: 560px) {
  #watch.multi #video-stage { aspect-ratio: auto; flex-direction: row; max-width: none; margin: 0; }
  #watch.multi #watch-info { display: none; }
}

/* ================= SELECTOR DE VIDEO (todas las pantallas) ================= */
#multi-pick {
  position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column;
  background: #0b0b0ff2; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
#multi-pick .mp-bar {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; flex: 0 0 auto;
  border-bottom: 1px solid #ffffff18;
}
#multi-pick .mp-bar strong { flex: 1 1 auto; font-size: 16px; color: #fff; }
#mp-cerrar { flex: 0 0 auto; min-height: 40px; padding: 7px 14px; border-radius: 9px; }
#mp-grid {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-auto-rows: min-content; gap: 14px; padding: 16px 18px 28px; align-content: start;
}
.mp-card {
  display: block; align-self: start; padding: 0 0 9px; text-align: left; cursor: pointer;
  background: #17171e; border: 1px solid #2c2c36; border-radius: 12px; overflow: hidden;
}
.mp-card:hover, .mp-card:focus { border-color: #ff5676; }
.mp-thumb { position: relative; display: block; width: 100%; height: 128px; background: #0e0e13; overflow: hidden; }
.mp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-thumb-canal .channel-cover { padding: 0 10px 8px; }
.mp-thumb-canal .channel-cover-eyebrow { font-size: 8px; letter-spacing: .14em; margin-bottom: 2px; }
.mp-thumb-canal .channel-cover-name { font-size: 14px; line-height: 1.05; }
.mp-thumb-canal .channel-cover-name.largo { font-size: 12px; }
.mp-thumb-canal .channel-cover-mark { max-width: 74px; top: -6px; right: -8px; }
.mp-vivo { position: absolute; left: 8px; top: 8px; z-index: 2; background: #d4113a; color: #fff;
  font: 700 10px/1 Arial, sans-serif; padding: 4px 7px; border-radius: 5px; }
.mp-nom { display: block; padding: 7px 10px 0; font-size: 13px; font-weight: 700; color: #f1f1f4; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mp-sub { display: block; padding: 2px 10px 0; font-size: 11px; color: #a0a0aa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* La pantalla vacía invita a tocar para elegir. */
.vslot-pick { cursor: pointer; width: 100%; border: 0; }