/* VISIO.RED TV (servers #32). Brand: red #AD2D2E as accent only, ink #1A1A1C, pill buttons. */
:root {
  --rojo: #AD2D2E;
  --tinta: #1A1A1C;
  --texto: #3A3A3F;
  --muted: #6A6B70;
  --papel: #FFFFFF;
  --papel2: #F6F6F8;
  --linea: #E6E6EA;
  --tarjeta: #FFFFFF;
  --sombra: 0 1px 2px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.05);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #F2F2F4;
    --texto: #D6D6DB;
    --muted: #9A9AA2;
    --papel: #121214;
    --papel2: #121214;
    --linea: #2A2A30;
    --tarjeta: #1C1C20;
    --sombra: none;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--papel2); color: var(--texto);
  font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
button { font: inherit; cursor: pointer; }

.cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 16px; padding: max(16px, env(safe-area-inset-top)) 20px 8px; max-width: 1400px; margin: 0 auto; }
.marca { font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 22px;
  letter-spacing: .5px; color: var(--tinta); }
.marca-red { color: var(--rojo); }
.marca-tv { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px;
  background: var(--tinta); color: var(--papel); font-size: 14px; vertical-align: 3px; }
.vivo { font-family: "Space Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 1px; color: var(--muted); }
.punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rojo);
  margin-right: 8px; vertical-align: 1px; animation: latido 2s ease-in-out infinite; }
@keyframes latido { 50% { opacity: .35; } }

.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px;
  padding: 12px 20px 20px; max-width: 1400px; margin: 0 auto; }
@media (max-width: 420px) { .grilla { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 10px 12px; } }
.cargando { grid-column: 1 / -1; color: var(--muted); text-align: center; padding: 40px 0; }

.canal { position: relative; display: flex; flex-direction: column; align-items: stretch; text-align: left;
  border: 1px solid var(--linea); border-radius: 16px; background: var(--tarjeta); box-shadow: var(--sombra);
  padding: 10px 12px 12px; color: inherit; min-height: 150px; transition: transform .12s ease, border-color .12s; }
.canal:hover, .canal:focus-visible { border-color: var(--rojo); transform: translateY(-2px); outline: none; }
.canal:focus-visible { box-shadow: 0 0 0 3px rgba(173,45,46,.35); }
.canal:active { transform: scale(.98); }
.canal-num { font-family: "Space Mono", ui-monospace, monospace; font-size: 12px; color: var(--muted); }
.canal-logo { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 64px; margin: 4px 0 8px; }
.canal-logo img { max-width: 100%; max-height: 60px; border-radius: 8px; }
.canal-logo .nombre-grande { font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 700;
  font-size: 20px; color: var(--tinta); text-align: center; line-height: 1.1; }
.canal-nombre-chico { font-weight: 700; color: var(--tinta); font-size: 15px; }
.canal-prog { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.3em; }
.progreso { height: 3px; border-radius: 3px; background: var(--linea); margin-top: 6px; overflow: hidden; }
.progreso > i { display: block; height: 100%; background: var(--rojo); width: 0; }
.apagado { opacity: .55; }
.apagado::before { content: "FUERA DEL AIRE"; position: absolute; top: 11px; left: 34px;
  font-family: "Space Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: .5px; color: var(--muted); }
.ultimo::after { content: "SEGUIR VIENDO"; position: absolute; top: 8px; right: 8px;
  font-family: "Space Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: .5px;
  padding: 2px 6px; border-radius: 999px; background: var(--tinta); color: var(--papel); }

.ayuda { max-width: 1400px; margin: 0 auto 40px; padding: 0 20px; color: var(--texto); font-size: 15px; }
.ayuda summary { cursor: pointer; font-weight: 700; color: var(--tinta); padding: 10px 0; }
.ayuda li { margin: 6px 0; }
.nota { color: var(--muted); font-size: 13px; }

/* Player */
.reproductor { position: fixed; inset: 0; background: #000; z-index: 10; }
.reproductor video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.controles { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
  transition: opacity .3s; pointer-events: none; }
.controles.ocultos { opacity: 0; }
.controles.ocultos .barra { pointer-events: none; }
.barra { display: flex; align-items: center; gap: 10px; pointer-events: auto; color: #fff;
  padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 12px max(14px, env(safe-area-inset-left)); }
.barra.arriba { background: linear-gradient(rgba(0,0,0,.7), transparent); }
.barra.abajo { background: linear-gradient(transparent, rgba(0,0,0,.7));
  padding-bottom: max(14px, env(safe-area-inset-bottom)); }
.titulo { min-width: 0; }
.canal-nombre { font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 20px; }
.canal-ahora { font-size: 14px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.espacio { flex: 1; }
.boton-redondo { width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16);
  color: #fff; font-size: 20px; display: inline-flex; align-items: center; justify-content: center; }
.boton-redondo:hover, .boton-redondo:focus-visible { background: rgba(255,255,255,.3); outline: none; }
.boton-cast { width: 46px; height: 46px; padding: 11px; border-radius: 50%; background: rgba(255,255,255,.16);
  --connected-color: #fff; --disconnected-color: #fff; cursor: pointer; display: inline-block; }
.boton-cast[hidden] { display: none; }
.casteando { font-size: 13px; opacity: .9; }

.estado { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; color: #fff; text-align: center; padding: 20px; pointer-events: none; }
.estado[hidden] { display: none; }
.estado p { margin: 0; font-size: 17px; }
.estado button { pointer-events: auto; }
.ruedita { width: 44px; height: 44px; border-radius: 50%; border: 4px solid rgba(255,255,255,.25);
  border-top-color: #fff; animation: gira 1s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.pastilla { border: 0; border-radius: 999px; padding: 12px 26px; background: var(--rojo); color: #fff; font-weight: 700; font-size: 16px; }
.pastilla.grande { font-size: 20px; padding: 16px 34px; }
.pastilla[hidden], .boton-redondo[hidden] { display: none; }

.icono-cast { display: inline-block; width: 18px; height: 14px; vertical-align: -2px;
  border: 2px solid currentColor; border-radius: 2px; border-left-color: transparent; border-bottom-color: transparent; }

@media (prefers-reduced-motion: reduce) { .punto, .ruedita { animation: none; } .canal { transition: none; } }