/* =============================================================
   GolStream IPTV · styles.css
   Complementa a Tailwind: botones, chips, tarjetas de canal,
   insignias, indicador EN VIVO, controles flotantes del video,
   aviso en pantalla (OSD) y animaciones.
   ============================================================= */

:root { color-scheme: dark; }

/* Banderas en emoji para Windows (que no las incluye). unicode-range hace que esta
   fuente solo se descargue y use para los caracteres de bandera, nada más. */
@font-face {
  font-family: "Twemoji Country Flags";
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
  src: url("https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1.8/dist/TwemojiCountryFlags.woff2") format("woff2");
  font-display: swap;
}

/* ---------- Pestañas de listas oficiales ---------- */
.pestana {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  flex: none;
  padding: .45rem .8rem;
  border-radius: .7rem;
  border: 1px solid transparent;
  color: #94a3b8;
  font-size: .8125rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color .15s, background-color .15s, border-color .15s;
}
.pestana:hover { color: #e2e8f0; background: #141a22; }
.pestana[aria-selected="true"] { color: #fff; background: #141a22; border-color: rgba(61, 220, 132, .55); box-shadow: inset 0 -2px 0 #3ddc84; }
.pestana:disabled { opacity: .5; cursor: wait; }
.pestana-emoji { font-size: 1.05rem; line-height: 1; }
.pestana-cuenta { font-size: .6875rem; color: #64748b; font-variant-numeric: tabular-nums; }
.pestana[aria-selected="true"] .pestana-cuenta { color: #3ddc84; }

/* El atributo hidden siempre gana a clases como flex / grid. */
[hidden] { display: none !important; }

/* ---------- Botones y controles ---------- */
.btn-primario,
.btn-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border-radius: .75rem;
  padding: .6rem 1rem;
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
  transition: filter .15s, background-color .15s, border-color .15s, color .15s;
}
.btn-primario { background: #3ddc84; color: #07090d; }
.btn-primario:hover { filter: brightness(1.1); }
.btn-secundario { border: 1px solid #1f2730; background: #141a22; color: #e2e8f0; }
.btn-secundario:hover { border-color: rgba(61, 220, 132, .5); color: #fff; }
.btn-primario:disabled,
.btn-secundario:disabled { opacity: .5; cursor: wait; }

.control {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border-radius: .6rem;
  border: 1px solid #1f2730;
  background: #141a22;
  padding: .45rem .7rem;
  font-size: .8125rem;
  color: #e2e8f0;
  transition: border-color .15s, color .15s;
}
.control:hover:not(:disabled) { border-color: rgba(61, 220, 132, .5); color: #fff; }
.control:disabled { opacity: .4; cursor: not-allowed; }

/* Estrella de favoritos: vacía o rellena según aria-pressed. */
.icono-estrella { fill: none; }
[aria-pressed="true"] .icono-estrella { fill: #facc15; stroke: #facc15; }

/* ---------- Chips de filtro ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex: none;
  padding: .375rem .75rem;
  border-radius: 9999px;
  border: 1px solid #1f2730;
  background: #0d1117;
  color: #94a3b8;
  font-size: .8125rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color .15s, border-color .15s, background-color .15s;
}
.chip:hover { color: #e2e8f0; border-color: #2c3744; }
.chip[aria-pressed="true"] { background: #3ddc84; border-color: #3ddc84; color: #07090d; font-weight: 600; }

/* ---------- Tarjeta de canal ---------- */
.canal {
  display: flex;
  align-items: stretch;
  min-width: 0; /* permite que los nombres largos se recorten con "…" en vez de ensanchar la página */
  /* Rendimiento con listas grandes: el navegador omite pintar las tarjetas fuera de la vista. */
  content-visibility: auto;
  contain-intrinsic-size: auto 3.6rem;
  border-radius: .875rem;
  border: 1px solid #1f2730;
  background: #0d1117;
  transition: background-color .15s, border-color .15s;
}
.canal:hover { background: #141a22; border-color: #2c3744; }
.canal.activo {
  border-color: rgba(61, 220, 132, .55);
  background: linear-gradient(90deg, rgba(61, 220, 132, .10), #0d1117 70%);
  box-shadow: inset 3px 0 0 #3ddc84;
}
.canal.caido { opacity: .55; }

.canal-principal {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex: 1;
  min-width: 0;
  padding: .55rem .25rem .55rem .35rem;
  text-align: left;
  border-radius: .875rem 0 0 .875rem;
}
.canal-principal:focus-visible,
.canal-fav:focus-visible { outline: 2px solid #3ddc84; outline-offset: -2px; }

/* Número de canal (para saltar con las teclas 0-9). */
.canal-num {
  flex: none;
  width: 1.9rem;
  text-align: right;
  font-size: .6875rem;
  color: #475569;
  font-variant-numeric: tabular-nums;
}
.canal.activo .canal-num { color: #3ddc84; }

.canal-logo {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 3.5rem;
  height: 2.5rem;
  overflow: hidden;
  border-radius: .5rem;
  background: #1b232d;
  color: #94a3b8;
  font-family: "Barlow Condensed", sans-serif;
  font-size: .8rem;
  font-weight: 700;
}
.canal-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: .25rem;
  object-fit: contain;
  background: #1b232d;
}

.canal-fav {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  color: #475569;
  border-radius: 0 .875rem .875rem 0;
  transition: color .15s;
}
.canal-fav:hover { color: #facc15; }

/* ---------- Insignias ---------- */
.insignia {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  flex: none;
  padding: .15rem .4rem;
  border-radius: .3rem;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}
.insignia-vivo  { background: rgba(255, 59, 78, .14); color: #ff6b79; box-shadow: inset 0 0 0 1px rgba(255, 59, 78, .35); }
.insignia-geo   { background: rgba(251, 191, 36, .1); color: #fbbf24; box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .3); }
.insignia-gris  { background: rgba(148, 163, 184, .08); color: #94a3b8; box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .22); }
.insignia-verde { background: rgba(61, 220, 132, .1); color: #3ddc84; box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .3); }
/* Lista de origen de un resultado de la búsqueda global. */
.insignia-lista { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; background: rgba(99, 102, 241, .12); color: #a5b4fc; box-shadow: inset 0 0 0 1px rgba(99, 102, 241, .3); text-transform: none; letter-spacing: 0; }

/* Programa que se emite ahora (EPG), bajo el nombre del canal. */
.canal-epg {
  display: block;
  margin-top: .15rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .6875rem;
  color: #86efac;
}

/* ---------- Mis listas ---------- */
.mi-lista {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border-radius: 9999px;
  border: 1px solid #1f2730;
  background: #0d1117;
}
.mi-lista.activa { border-color: rgba(61, 220, 132, .55); }
.mi-lista button { padding: .2rem .6rem; color: #cbd5e1; transition: background-color .15s, color .15s; }
.mi-lista button:hover { background: #141a22; color: #fff; }
.mi-lista button[data-accion="quitar"] { padding: .2rem .5rem; color: #64748b; border-left: 1px solid #1f2730; }
.mi-lista button[data-accion="quitar"]:hover { color: #ff6b79; }
.mi-lista-cuenta { margin-left: .2rem; color: #64748b; font-variant-numeric: tabular-nums; }

/* ---------- Agenda: fútbol chileno hoy ---------- */
.partido {
  flex: none;
  width: 15.5rem;
  scroll-snap-align: start;
  padding: .7rem .8rem;
  border-radius: .9rem;
  border: 1px solid #1f2730;
  background: #0d1117;
}
.partido.en-juego { border-color: rgba(255, 59, 78, .45); box-shadow: inset 0 2px 0 #ff3b4e; }
.partido.terminado { opacity: .7; }
.boton-tv {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: .2rem .55rem;
  border-radius: 9999px;
  background: rgba(61, 220, 132, .12);
  color: #3ddc84;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .35);
  transition: background-color .15s, color .15s;
}
.boton-tv:hover { background: #3ddc84; color: #07090d; }
.boton-tv.caido { background: rgba(148, 163, 184, .08); color: #94a3b8; box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .22); }
#btn-agenda-plegar[aria-expanded="false"] .icono-plegar { transform: rotate(-90deg); }
.icono-plegar { transition: transform .15s; }
.girando svg { animation: girar .8s linear infinite; }

/* ---------- Indicador EN VIVO ---------- */
.live-dot {
  position: relative;
  flex: none;
  width: .45rem;
  height: .45rem;
  border-radius: 9999px;
  background: #ff3b4e;
}
.live-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  animation: live-ping 1.4s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes live-ping {
  0%       { transform: scale(1);   opacity: .85; }
  80%,100% { transform: scale(2.8); opacity: 0; }
}
.live-blink { animation: live-blink 1.2s ease-in-out infinite; }
@keyframes live-blink { 50% { opacity: .25; } }

/* ---------- Reproductor ---------- */
.cancha {
  background:
    radial-gradient(ellipse at center, rgba(61, 220, 132, .12), transparent 65%),
    repeating-linear-gradient(90deg, #0a1410 0 60px, #0c1813 60px 120px);
}
.cancha::before,
.cancha::after { content: ""; position: absolute; pointer-events: none; }
.cancha::before {
  left: 50%; top: 50%;
  width: 30%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 255, 255, .06);
  border-radius: 50%;
}
.cancha::after { left: 50%; top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, .06); }
.cancha > * { position: relative; z-index: 1; }

/* Pantalla completa del contenedor: ocupa toda la pantalla sin bordes redondeados. */
.contenedor-video:fullscreen { aspect-ratio: auto; width: 100%; height: 100%; border-radius: 0; }
.contenedor-video:-webkit-full-screen { aspect-ratio: auto; width: 100%; height: 100%; border-radius: 0; }

/* Botones flotantes sobre el video: aparecen al pasar el mouse o con el teclado. */
.barra-flotante { opacity: 0; transition: opacity .2s; }
.contenedor-video:hover .barra-flotante,
.barra-flotante:focus-within { opacity: 1; }
@media (hover: none) { .barra-flotante { opacity: 1; } } /* pantallas táctiles: siempre visibles */

.boton-flotante {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .6rem;
  background: rgba(7, 9, 13, .7);
  color: #e2e8f0;
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  transition: background-color .15s, color .15s;
}
.boton-flotante:hover { background: rgba(7, 9, 13, .9); color: #3ddc84; }
.boton-flotante:focus-visible { outline: 2px solid #3ddc84; outline-offset: 2px; }
.boton-flotante[aria-pressed="true"] { color: #3ddc84; }
.icono-contraer,
.boton-flotante[aria-pressed="true"] .icono-expandir { display: none; }
.boton-flotante[aria-pressed="true"] .icono-contraer { display: block; }

/* Aviso en pantalla (OSD) al cambiar de canal. */
.osd { opacity: 0; transform: translate(-50%, -6px); transition: opacity .2s, transform .2s; }
.osd.visible { opacity: 1; transform: translate(-50%, 0); }

/* Teclas en la ayuda y en botones. */
.tecla {
  display: inline-grid;
  place-items: center;
  min-width: 1.6rem;
  padding: .1rem .4rem;
  border-radius: .35rem;
  border: 1px solid #2c3744;
  border-bottom-width: 2px;
  background: #141a22;
  color: #e2e8f0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .7rem;
  line-height: 1.4;
}
/* En pantallas táctiles sin teclado no tiene sentido la ayuda de atajos. */
@media (pointer: coarse) {
  #btn-atajos, #btn-siguiente-error .tecla { display: none; }
}

.tecla-oscura { border-color: rgba(7, 9, 13, .35); background: rgba(7, 9, 13, .12); color: inherit; }

.spinner {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .15);
  border-top-color: #3ddc84;
  animation: girar .8s linear infinite;
}
.spinner-sm { width: 1.25rem; height: 1.25rem; border-width: 2px; }
@keyframes girar { to { transform: rotate(360deg); } }

/* Barra de descarga: determinada (width en %) o indeterminada. */
.barra-carga { width: 0; transition: width .2s; }
.barra-carga.indeterminada { width: 35% !important; animation: barra 1.1s ease-in-out infinite; }
@keyframes barra { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

@media (prefers-reduced-motion: reduce) {
  .live-dot::after, .live-blink, .spinner, .barra-carga.indeterminada, .girando svg { animation: none; }
  .osd, .barra-flotante, .toast { transition: none; }
}

dialog::backdrop { background: rgba(3, 5, 8, .72); backdrop-filter: blur(4px); }

/* ---------- Buscador ---------- */
#buscador:not(:placeholder-shown) + kbd { display: none; }
mark { background: rgba(61, 220, 132, .22); color: #c4ffdd; border-radius: 3px; padding: 0 1px; }

.vacio {
  border-radius: 1rem;
  border: 1px dashed #1f2730;
  padding: 1.5rem;
  text-align: center;
  font-size: .875rem;
  color: #64748b;
}

/* ---------- Notificaciones ---------- */
.toast {
  pointer-events: auto;
  max-width: 32rem;
  padding: .625rem .875rem;
  border-radius: .75rem;
  border: 1px solid #1f2730;
  background: #141a22;
  color: #e2e8f0;
  font-size: .875rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s, transform .25s;
}
.toast.visible { opacity: 1; transform: none; }
.toast-ok    { border-color: rgba(61, 220, 132, .45); }
.toast-aviso { border-color: rgba(250, 204, 21, .4); }
.toast-error { border-color: rgba(255, 59, 78, .5); }

/* ---------- Scroll ---------- */
.scroll-fino { scrollbar-width: thin; scrollbar-color: #2a3340 transparent; }
.scroll-fino::-webkit-scrollbar { width: 8px; }
.scroll-fino::-webkit-scrollbar-thumb { background: #2a3340; border-radius: 8px; }
.sin-scrollbar { scrollbar-width: none; }
.sin-scrollbar::-webkit-scrollbar { display: none; }