*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo-base); color: var(--texto-principal);
  font-family: var(--fuente-interfaz); font-size: 16px; line-height: 1.45;
}
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--acento-interactivo); text-underline-offset: 3px; }
button, select, input { font: inherit; color: inherit; }
img, svg { display: block; }
.secundario { color: var(--texto-secundario); }
.pequeno { font-size: 13px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--acento-interactivo); outline-offset: 2px; }
.saltar { position: absolute; left: var(--margen); top: -100px; background: var(--fondo-base); padding: var(--espacio-8) var(--espacio-12); border: 1px solid var(--borde-fuerte); border-radius: var(--radio-m); z-index: 10; }
.saltar:focus { top: var(--espacio-8); }

.entra { opacity: 0; transform: translateY(8px); }
.encabezado.entra { transform: none; }
.listo .entra {
  opacity: 1; transform: none;
  transition: opacity var(--mov-base) var(--curva-salida), transform var(--mov-base) var(--curva-salida);
  transition-delay: calc(var(--orden, 0) * 60ms);
}
@media (prefers-reduced-motion: reduce) {
  .entra, .listo .entra { transform: none; }
}

.encabezado {
  display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-16);
  min-height: 110px; padding: 20px var(--espacio-64);
  border-bottom: 1px solid var(--borde-fuerte);
}
.encabezado-izq, .encabezado-der { display: flex; align-items: center; gap: var(--espacio-24); }
.firma { display: flex; align-items: center; gap: var(--espacio-12); color: var(--texto-principal); text-decoration: none; min-height: 44px; border-radius: var(--radio-m); }
.firma img { width: 40px; height: 40px; }
.firma-nombre { font-weight: 700; font-size: 20px; letter-spacing: -0.01em; white-space: nowrap; }

.lugar { font-size: 15px; line-height: 20px; color: var(--texto-principal); padding: 10px 0; white-space: nowrap; }

.pildora-estado {
  display: inline-flex; align-items: center; min-height: 28px; padding: 4px var(--espacio-12);
  border: 1px solid var(--marca-base-siempreverde); border-radius: var(--radio-pildora);
  background: var(--marca-base-lechuga); color: var(--marca-base-medianoche);
  font-weight: 700; font-size: 14px; white-space: nowrap;
}
.pildora-estado[data-estado="cargando"] { background: transparent; color: var(--texto-secundario); border-color: var(--borde-fuerte); font-weight: 400; }
.pildora-estado[data-estado="vieja"], .pildora-estado[data-estado="error"] { background: transparent; color: var(--texto-principal); border-color: var(--borde-fuerte); }
.pildora-movil { display: none; }

.hora-imagen { text-align: right; display: grid; gap: var(--espacio-2); justify-items: end; }
.hora-etiqueta { font-size: 12px; line-height: 16px; color: var(--texto-secundario); }
.hora-linea { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; }
.hora-grande { font-family: var(--fuente-datos); font-size: 26px; line-height: 1.15; }
.hora-zona { font-size: 12px; line-height: 16px; color: var(--texto-secundario); white-space: nowrap; }
.hora-fecha { font-size: 12px; line-height: 16px; color: var(--texto-secundario); white-space: nowrap; }

.dato, .reloj, .hora-fila { font-variant-numeric: tabular-nums; }

.satelite h1 { font-size: 32px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.bajada { margin-top: var(--espacio-8); color: var(--texto-secundario); }
.canales {
  display: inline-flex; flex-wrap: wrap; gap: var(--espacio-4); margin-top: var(--espacio-16);
  padding: var(--espacio-4); border: 1px solid var(--borde-fuerte); border-radius: var(--radio-l);
  align-self: flex-start;
}
.satelite { display: flex; flex-direction: column; }
.canal, .modo-op {
  min-height: 44px; padding: 0 var(--espacio-16); border: 1px solid transparent; border-radius: var(--radio-m);
  background: transparent; cursor: pointer; display: inline-flex; align-items: center; gap: var(--espacio-8);
  transition: background-color var(--mov-corto) var(--curva-salida), transform var(--mov-rapido) var(--curva-salida);
}
.canal:hover, .modo-op:hover { background: var(--fondo-superficie); }
.canal:active, .modo-op:active, .boton-play:active, .boton-primario:active, .boton-borde:active { transform: scale(0.98); }
.canal[aria-selected="true"], .modo-op[aria-checked="true"] {
  background: var(--marca-base-lechuga); border-color: var(--marca-base-siempreverde); color: var(--marca-base-medianoche); font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
  .canal:active, .modo-op:active, .boton-play:active, .boton-primario:active, .boton-borde:active { transform: none; }
}

.marco-imagen {
  position: relative; margin-top: var(--espacio-16); background: var(--fondo-imagen);
  border-radius: var(--radio-l); overflow: hidden; aspect-ratio: 6 / 5; width: 100%;
}
.img-ultima, .cuadros canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cuadros canvas { opacity: 0; transition: opacity 150ms linear; }
.cuadros canvas.activo { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cuadros canvas { transition: none; } }
.marco-estado {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--espacio-24);
  text-align: center; color: var(--marca-base-crema); font-size: 15px;
}

.visor-estado { display: grid; justify-items: center; gap: 10px; max-width: 520px; }
.visor-estado h3 { font-size: 20px; line-height: 26px; font-weight: 700; color: var(--marca-base-crema); }
.visor-estado p { font-size: 15px; line-height: 22px; color: var(--marca-base-esparrago); }
.boton-ir {
  min-height: 44px; padding: 0 20px; margin-top: var(--espacio-4); border: 0; border-radius: var(--radio-pildora);
  background: var(--marca-base-lechuga); color: var(--marca-base-medianoche); font-size: 14px; line-height: 20px; font-weight: 600; cursor: pointer;
}
.boton-ir:focus-visible { outline-color: var(--marca-base-lechuga); outline-offset: 3px; }

.rotulo-lugar {
  position: absolute; z-index: 1; transform: translate(-50%, -50%); pointer-events: none;
  padding: 3px 8px; border-radius: var(--radio-pildora); background: var(--marca-base-medianoche);
  color: var(--marca-base-crema); font-size: 12px; line-height: 16px; font-weight: 700; white-space: nowrap;
}
.marco-estado .boton-borde { margin-top: var(--espacio-12); color: var(--marca-base-crema); border-color: var(--marca-base-esparrago); }

.controles { display: flex; align-items: center; gap: var(--espacio-24); margin-top: var(--espacio-24); }
.modo { display: inline-flex; gap: var(--espacio-4); padding: var(--espacio-4); border: 1px solid var(--borde-fuerte); border-radius: var(--radio-l); flex: none; }
.linea-tiempo { display: flex; align-items: center; gap: var(--espacio-12); flex: 1; min-width: 0; }
.boton-play {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-m); background: var(--fondo-base);
  transition: background-color var(--mov-corto) var(--curva-salida), transform var(--mov-rapido) var(--curva-salida);
}
.boton-play:hover:not(:disabled) { background: var(--fondo-superficie); }
.boton-play:disabled { opacity: 0.5; cursor: default; }
.boton-play svg { width: 20px; height: 20px; }
.boton-play .i-pausa, .reproduciendo .boton-play .i-play { display: none; }
.reproduciendo .boton-play .i-pausa { display: block; }
.pista { position: relative; flex: 1; min-width: 0; padding-top: 4px; }
.pista input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 24px; margin: 0; background: transparent; position: relative; z-index: 1; cursor: pointer;
}
.pista input[type="range"]:disabled { cursor: default; }
.pista input::-webkit-slider-runnable-track { height: 2px; background: var(--acento-interactivo); }
.pista input::-moz-range-track { height: 2px; background: var(--acento-interactivo); }
.pista input::-webkit-slider-thumb { -webkit-appearance: none; width: 8px; height: 20px; margin-top: -9px; border-radius: var(--radio-s); background: var(--acento-interactivo); border: 0; }
.pista input::-moz-range-thumb { width: 8px; height: 20px; border-radius: var(--radio-s); background: var(--acento-interactivo); border: 0; }
.pista input:focus-visible { outline-offset: 4px; }
.marcas { position: absolute; left: 4px; right: 4px; top: 13px; height: 10px; display: flex; justify-content: space-between; pointer-events: none; }
.marcas i { width: 1px; height: 10px; background: var(--acento-interactivo); }
.pista-textos { display: flex; justify-content: space-between; font-family: var(--fuente-datos); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--texto-secundario); margin-top: 2px; }
.lt-actual { color: var(--texto-principal); font-weight: 700; }
.modo-ultima .linea-tiempo { visibility: hidden; }

.info-canal { margin-top: var(--espacio-32); }
.info-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: var(--espacio-16); }
.info-cabeza h2, .info-cabeza h3 { font-size: 17px; font-weight: 700; }
.info-hora { font-size: 14px; color: var(--texto-secundario); white-space: nowrap; }
.info-canal > p { margin-top: var(--espacio-4); font-size: 15px; }
.nota-pendiente {
  margin-top: var(--espacio-8); padding: var(--espacio-8) var(--espacio-12); font-size: 13px;
  border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-m); color: var(--texto-secundario);
}
.proyeccion { display: grid; grid-template-columns: auto 1fr auto; column-gap: var(--espacio-16); align-items: start; margin-top: var(--espacio-24); }
.etiqueta-borde {
  font-size: 12px; font-weight: 700; padding: 2px var(--espacio-8); border: 1px solid var(--acento-interactivo);
  border-radius: var(--radio-m); color: var(--acento-interactivo); white-space: nowrap; margin-top: 2px;
}
.proyeccion h3 { font-size: 16px; font-weight: 700; }
.proyeccion p { font-size: 15px; margin-top: var(--espacio-4); }

.accion-desactivada { display: flex; align-items: center; gap: var(--espacio-8); }
.accion-texto { padding: 0; border: 0; background: none; font-size: 15px; font-weight: 700; color: var(--texto-secundario); white-space: nowrap; cursor: default; }
.accion-desactivada .etiqueta-borde { margin-top: 0; }

.separador {
  position: relative; display: flex; justify-content: space-around; align-items: center;
  margin: var(--espacio-64) 0 var(--espacio-48); height: 16px;
  font-family: var(--fuente-datos); font-size: 14px; line-height: 1; color: var(--acento-interactivo);
}
.separador::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--acento-interactivo); }
.separador span { position: relative; background: var(--fondo-base); padding: 0 var(--espacio-4); }

.leyenda { padding: 0 var(--espacio-12); }
.leyenda h2, .leyenda h3 { font-size: 18px; font-weight: 700; margin-bottom: var(--espacio-16); }
.leyenda-geocolor p + p { margin-top: var(--espacio-8); }
.leyenda-geocolor h2, .leyenda-geocolor h3 { margin-bottom: var(--espacio-8); }
#leyenda-vapor { margin-top: 0; }
.barra { height: 16px; border-radius: var(--radio-s); border: 1px solid var(--borde-sutil); }
.ticks { position: relative; height: 20px; font-family: var(--fuente-datos); font-size: 12px; color: var(--texto-secundario); margin-top: 4px; }
.ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.ticks span.fin { transform: translateX(-100%); }
.leyenda-filas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--espacio-16) var(--espacio-24); margin-top: var(--espacio-16); }
.leyenda-filas li { display: flex; gap: var(--espacio-12); align-items: flex-start; }
.leyenda-filas strong { font-size: 14px; font-weight: 700; display: block; }
.leyenda-filas p { font-size: 14px; color: var(--texto-secundario); }
.muestra { width: 20px; height: 14px; flex: none; margin-top: 3px; border: 1px solid var(--texto-principal); border-radius: var(--radio-s); }
.muestra.doble { background: linear-gradient(90deg, var(--a) 50%, var(--b) 50%); }
.nota { margin-top: var(--espacio-16); font-size: 13px; color: var(--texto-secundario); }

.ahora { background: var(--fondo-superficie); border-radius: var(--radio-l); padding: var(--espacio-24); }
.ahora-cabeza { display: flex; align-items: baseline; gap: var(--espacio-12); flex-wrap: wrap; }
.ahora-cabeza h2 { font-size: 20px; font-weight: 700; }
.ahora-sello { font-size: 13px; color: var(--texto-secundario); }
.condicion { display: flex; align-items: center; gap: var(--espacio-12); margin-top: var(--espacio-16); }
.condicion img { width: 48px; height: 48px; }
.condicion p { font-size: 18px; font-weight: 700; }
.temp { display: flex; align-items: flex-start; gap: var(--espacio-8); font-family: var(--fuente-datos); margin-top: var(--espacio-12); }
.temp-num { font-size: 56px; line-height: 1; font-variant-numeric: tabular-nums; }
.temp-u { font-size: 22px; color: var(--texto-secundario); }
.temp-sens { font-family: var(--fuente-interfaz); font-size: 14px; color: var(--texto-secundario); align-self: flex-end; margin-left: auto; text-align: right; }
.metricas { margin-top: var(--espacio-16); display: grid; gap: var(--espacio-8); }
.metricas div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--espacio-12); }
.metricas dt { font-size: 14px; color: var(--texto-secundario); }
.metricas dd { margin: 0; font-family: var(--fuente-datos); font-size: 17px; text-align: right; }
.metricas dd.sin-dato { font-family: var(--fuente-interfaz); font-size: 14px; color: var(--texto-secundario); }
.horas-t { margin-top: var(--espacio-24); padding-bottom: var(--espacio-8); border-bottom: 1px solid var(--borde-fuerte); font-size: 14px; font-weight: 700; color: var(--texto-secundario); }
.horas { margin-top: var(--espacio-12); display: grid; gap: var(--espacio-8); }
.hora-fila { display: grid; grid-template-columns: 48px 40px minmax(0, 1fr) max-content; align-items: center; gap: var(--espacio-12); font-family: var(--fuente-datos); }
.hora-fila .h { font-size: 13px; color: var(--texto-secundario); }
.hora-fila .t { font-size: 16px; }
.hora-fila .p { font-size: 12px; color: var(--texto-secundario); text-align: right; white-space: nowrap; }
.barra-prob { height: 4px; background: var(--fondo-elevado); border-radius: var(--radio-pildora); overflow: hidden; }
.barra-prob i { display: block; height: 100%; background: var(--acento-interactivo); border-radius: var(--radio-pildora); }
.ahora-pie { margin-top: var(--espacio-16); font-size: 12px; }
.esqueleto { display: grid; gap: var(--espacio-12); margin: var(--espacio-16) 0 var(--espacio-12); }
.esqueleto span { display: block; height: 20px; background: var(--fondo-elevado); border-radius: var(--radio-s); }
.esqueleto span:first-child { width: 40%; height: 12px; }
.esqueleto .fila { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--espacio-12); background: none; height: 36px; }
.esqueleto .fila i { background: var(--fondo-elevado); border-radius: var(--radio-s); }
.esqueleto .alto { height: 44px; }
.estado-caja h3 { font-size: 18px; font-weight: 700; margin-top: var(--espacio-16); }
.estado-caja p { margin-top: var(--espacio-8); font-size: 14px; color: var(--texto-secundario); }
.estado-caja button { margin-top: var(--espacio-12); }

.tarjeta { border: 1px solid var(--borde-fuerte); border-radius: var(--radio-l); padding: var(--espacio-24); }
.alertas h2 { font-size: 20px; font-weight: 700; }
.alertas > .pequeno { margin-top: var(--espacio-4); }
.alerta-met {
  position: relative; margin-top: var(--espacio-16); padding: var(--espacio-16); border-radius: var(--radio-l);
  background: var(--alerta-amarilla); color: var(--alerta-amarilla-texto);
}
.alerta-met[data-nivel="naranja"] { background: var(--alerta-naranja); color: var(--alerta-naranja-texto); }
.alerta-met[data-nivel="roja"] { background: var(--alerta-roja); color: var(--alerta-roja-texto); }

.icono-nivel { width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: var(--forma) center / contain no-repeat; mask: var(--forma) center / contain no-repeat;
  --forma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5 15.2 14.5H.8z'/%3E%3C/svg%3E"); }
[data-nivel="naranja"] .icono-nivel { --forma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 .8 15.2 8 8 15.2.8 8z'/%3E%3C/svg%3E"); }
[data-nivel="roja"] .icono-nivel { --forma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.1 1h5.8L15 5.1v5.8L10.9 15H5.1L1 10.9V5.1z'/%3E%3C/svg%3E"); }
.alerta-tipo { font-size: 14px; font-weight: 700; }
.alerta-nivel { display: flex; align-items: center; gap: var(--espacio-8); font-size: 18px; font-weight: 700; margin-top: var(--espacio-8); }
.alerta-met > p:nth-child(3) { margin-top: var(--espacio-8); font-size: 15px; }
.alerta-met .pequeno { margin-top: var(--espacio-8); }
.triangulo { width: 16px; height: 16px; flex: none; }
.regla { border: 0; border-top: 1px solid var(--borde-fuerte); margin: var(--espacio-24) 0 var(--espacio-16); }
.hidro-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: var(--espacio-12); }
.hidro-cabeza h3 { font-size: 16px; font-weight: 700; }
#hidro-cuerpo { margin-top: var(--espacio-12); display: grid; gap: var(--espacio-12); }
.hidro-grupo { display: grid; gap: 6px; }
.hidro-sub { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--texto-secundario); }
.fuente-fews { margin-top: var(--espacio-12); color: var(--acento-interactivo); }
.fuente-fews a { color: inherit; text-decoration: none; }
.fuente-fews a:hover { text-decoration: underline; }

.fews-alerta {
  position: relative; display: grid; gap: 6px;
  padding: 10px 12px 10px calc(6px + 12px);
  background: var(--fondo-base); border: 1px solid var(--borde-fuerte); border-radius: var(--radio-m); overflow: hidden;
}
.fews-alerta::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--c); box-shadow: inset calc(-1 * var(--alerta-contorno-ancho)) 0 0 var(--alerta-contorno); }
.fews-fila { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-8); }
.fews-chip { display: inline-flex; align-items: center; gap: var(--espacio-4); padding: 3px 8px; border-radius: var(--radio-m);
  background: var(--c); color: var(--ct); font-size: 13px; line-height: 16px; font-weight: 700; }
.fews-cuerpo { font-size: 14px; line-height: 20px; color: var(--texto-principal); }
.fews-alerta[data-nivel="amarilla"] { --c: var(--alerta-amarilla-relleno); --ct: var(--alerta-amarilla-texto); }
.fews-alerta[data-nivel="naranja"] { --c: var(--alerta-naranja-relleno); --ct: var(--alerta-naranja-texto); }
.fews-alerta[data-nivel="roja"] { --c: var(--alerta-roja-relleno); --ct: var(--alerta-roja-texto); }

.rio-lectura { font-size: 15px; line-height: 20px; color: var(--texto-principal); }
.rio-barra { position: relative; height: 14px; --relleno-rio: var(--marca-base-siempreverde); }
[data-tema="oscuro"] .rio-barra { --relleno-rio: var(--marca-base-lechuga); }
.rio-barra::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 6px; background: var(--borde-sutil); border-radius: 3px; }
.rio-barra i { position: absolute; left: 0; top: 4px; height: 6px; background: var(--relleno-rio); border-radius: 3px; }
.rio-barra b { position: absolute; top: 0; width: 2px; height: 14px; margin-left: -1px; background: var(--texto-principal); }
.rio-umbral { font-size: 12px; line-height: 16px; color: var(--texto-secundario); }

.hora-dato { display: inline-flex; align-items: center; gap: var(--espacio-4); font-size: 12px; line-height: 16px; font-weight: 700; color: var(--texto-principal); white-space: nowrap; }

.boton-primario {
  min-height: 44px; padding: 0 var(--espacio-16); border: 1px solid var(--acento-interactivo); border-radius: var(--radio-l);
  background: var(--acento-interactivo); color: var(--acento-texto-sobre); font-weight: 700; cursor: pointer;
  transition: background-color var(--mov-corto) var(--curva-salida), transform var(--mov-rapido) var(--curva-salida);
}
.boton-primario:disabled { cursor: not-allowed; opacity: 0.55; }
.boton-borde {
  min-height: 44px; padding: 0 var(--espacio-16); border: 1px solid var(--texto-principal); border-radius: var(--radio-m);
  background: transparent; font-weight: 700; cursor: pointer; transition: background-color var(--mov-corto) var(--curva-salida);
}
.boton-borde:hover { background: var(--fondo-elevado); }

.aviso { margin-top: var(--espacio-16); padding: var(--espacio-16); background: var(--fondo-superficie); border: 1px solid var(--borde-sutil); border-radius: var(--radio-l); }
.aviso h3 { font-size: 17px; font-weight: 700; }
.aviso p { margin-top: var(--espacio-8); font-size: 14px; color: var(--texto-secundario); }
.aviso button { margin-top: var(--espacio-12); }

.pie { max-width: calc(1312px + 2 * var(--espacio-64)); margin: 0 auto; padding: 0 var(--espacio-64) var(--espacio-48); }
.pie > p:first-child { border-top: 1px solid var(--borde-sutil); padding-top: var(--espacio-24); }
.pie p { font-size: 12px; color: var(--texto-secundario); margin-top: var(--espacio-8); }
.pie p.pie-grande { font-size: 14px; margin-top: var(--espacio-12); }

@media (max-width: 1023px) {
  .encabezado .pildora-estado { display: none; }
  .pildora-movil { display: inline-flex; align-self: flex-start; margin-top: var(--espacio-12); }
  .leyenda { padding: 0; }
  .leyenda-filas { grid-template-columns: repeat(2, 1fr); }
  .horas { grid-template-columns: repeat(6, 1fr); gap: var(--espacio-12); }
  .hora-fila { grid-template-columns: 1fr; text-align: center; gap: var(--espacio-4); }
  .hora-fila .p { text-align: center; }
  .metricas { grid-template-columns: repeat(3, 1fr); gap: var(--espacio-16); }
  .metricas div { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--espacio-2); }
  .metricas dd { text-align: left; }
}

@media (max-width: 599px) {
  .encabezado { flex-wrap: wrap; padding-block: var(--espacio-16); row-gap: var(--espacio-16); column-gap: var(--espacio-8); min-height: 0; }
  .encabezado-izq { display: contents; }
  .firma { order: 1; }
  .firma { flex: 0 1 auto; gap: var(--espacio-8); }
  .encabezado-der { order: 2; margin-left: auto; }
  .hora-linea { gap: var(--espacio-4); }
  .hora-zona { font-size: 12px; }
  .lugar { order: 3; flex-basis: 100%; padding: 0; }
  .hora-grande { font-size: 20px; }
  .firma-nombre { font-size: 18px; }
  .bajada { font-size: 17px; }
  .canales { align-self: stretch; }
  .controles { flex-direction: column; align-items: stretch; gap: var(--espacio-16); }
  .modo { display: grid; grid-template-columns: 1fr 1fr; }
  .info-hora-zona { display: none; }
  .proyeccion { grid-template-columns: 1fr; row-gap: var(--espacio-12); justify-items: start; }
  .metricas { grid-template-columns: 1fr 1fr; gap: 16px 24px; }
  .horas { grid-template-columns: 1fr; gap: var(--espacio-8); }
  .hora-fila { grid-template-columns: 44px 32px minmax(0, 1fr) max-content; text-align: left; gap: var(--espacio-8); }
  .hora-fila .p { text-align: right; }
  .leyenda-filas { grid-template-columns: 1fr; }
  .temp-num { font-size: 64px; }
}

.marco-envoltura { position: relative; }
.boton-ampliar {
  position: absolute; top: var(--espacio-16); right: var(--espacio-16); z-index: 2;
  display: inline-flex; align-items: center; gap: var(--espacio-8); height: 44px; padding: 0 18px 0 16px;
  background: var(--marca-base-medianoche); color: var(--marca-base-crema); border: 1px solid var(--marca-base-crema);
  border-radius: 22px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background-color var(--mov-corto) var(--curva-salida);
}
.boton-ampliar img { width: 16px; height: 16px; flex: none; overflow: visible; }
.boton-ampliar:hover { background: var(--marca-base-verde-coach); }
.boton-ampliar:focus-visible, .boton-cerrar:focus-visible { outline: 2px solid var(--acento-interactivo); outline-offset: 2px; }
.ampliado .boton-ampliar { display: none; }
.ampliado {
  border: 0; padding: var(--espacio-24); margin: auto; background: var(--fondo-base); color: var(--texto-principal);
  width: 80vw; height: 80vh; max-width: none; max-height: none; border-radius: 16px; overflow: hidden;
}
.ampliado::backdrop { background: var(--marca-base-medianoche); opacity: 0.94; }
.ampliado[open] { animation: ampliado-entra 200ms var(--curva-salida); }
.ampliado[open]::backdrop { animation: velo-entra 200ms var(--curva-salida); }
@keyframes ampliado-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes velo-entra { from { opacity: 0; } to { opacity: 0.94; } }
.ampliado-caja { display: flex; flex-direction: column; gap: var(--espacio-16); height: 100%; }
.ampliado-barra { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-12); }
.ampliado-titulo { flex: 1; min-width: 0; font-size: 28px; font-weight: 700; line-height: 1.2; }
.boton-cerrar {
  display: inline-flex; align-items: center; height: 44px; padding: 0 18px; flex: none;
  background: var(--marca-base-medianoche); color: var(--marca-base-crema); border: 1px solid var(--marca-base-crema); border-radius: 22px;
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
}
.boton-cerrar:hover { background: var(--marca-base-verde-coach); }
.ampliado-cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--espacio-12); }
.ampliado-cuerpo .marco-imagen { flex: 1; min-height: 0; aspect-ratio: auto; margin-top: 0; border-radius: 0; }
.ampliado-cuerpo .controles { margin-top: 0; }
html.sin-desplazar { overflow: hidden; }
@media (max-width: 599px) {
  .ampliado { width: 100vw; height: 100dvh; border-radius: 0; padding: var(--espacio-16); }
  .ampliado-titulo { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .ampliado[open] { animation: ampliado-entra var(--mov-corto) linear; }
  .ampliado[open]::backdrop { animation: none; }
}

.intro { display: none; }
html.con-intro .intro {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 100; background: var(--marca-base-crema); cursor: pointer;
}
.intro-centro { display: grid; justify-items: center; gap: 6px; }
.intro-logo { width: 181px; height: 181px; overflow: visible; }
.intro-texto { font-size: 29.7px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; color: var(--marca-base-medianoche); }

.sp-hoja { animation: sp-hoja 300ms var(--curva-salida) both; }
.sp-robot { transform-box: fill-box; transform-origin: 50% 50%; animation: sp-robot 300ms var(--curva-salida) both; }
.sp-gota { animation: sp-gota-aparece 300ms var(--curva-salida) both, sp-gota-cae 250ms var(--curva-salida) 300ms forwards; }
.intro-texto { animation: sp-texto 250ms var(--curva-salida) 300ms both; }
@keyframes sp-hoja { from { opacity: 0; transform: translateY(-179px); } to { opacity: 1; transform: none; } }
@keyframes sp-robot { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes sp-gota-aparece { from { opacity: 0; transform: translateY(-77px); } to { opacity: 1; transform: translateY(-77px); } }
@keyframes sp-gota-cae { from { opacity: 1; transform: translateY(-77px); } to { opacity: 0; transform: translateY(128px); } }
@keyframes sp-texto { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.intro.sale { background: transparent; transition: background-color 300ms ease-in-out; pointer-events: none; }
.intro.fin { opacity: 0; transition: opacity var(--mov-corto) linear; }
@media (max-width: 599px) {
  .intro-logo { width: 148px; height: 148px; }
  .intro-texto { font-size: 24.3px; }
}

@media (prefers-reduced-motion: reduce) {
  .entrada * { animation: none !important; transform: none !important; }
  html.con-intro .entrada { animation: entrada-fundido 200ms linear 300ms forwards; }
}
@keyframes entrada-fundido { to { opacity: 0; visibility: hidden; } }

@media (max-width: 599px) {
  .pista input[type="range"] { height: 44px; }
  .marcas { top: 21px; }
}
.panel-canal { display: block; }

html { scroll-padding-top: calc(var(--alto-encabezado, 0px) + 8px); }
.encabezado, .contenido, .pie { padding-inline: 16px; }
.encabezado { padding-block: var(--espacio-16); }
.contenido {
  display: flex; flex-direction: column; gap: 24px; max-width: 1200px; margin-inline: auto; box-sizing: content-box;
  padding-block: var(--espacio-24) var(--espacio-48);
}
.contenido > section { min-width: 0; }
.pie { max-width: 1200px; margin-inline: auto; box-sizing: content-box; }
#satelites { display: flex; flex-direction: column; gap: 16px; }
#clima, #alertas { padding: 16px; }
.titulo-seccion, .satelite h1.titulo-seccion, .ahora-cabeza h2.titulo-seccion, .alertas h2.titulo-seccion { font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; }
.visor { height: 300px; }

@media (max-width: 1023px) {
  .encabezado { position: sticky; top: 0; z-index: 20; background: var(--fondo-base); }
}

#satelites > *, .panel-canal > *, .canales, .marco-imagen, .controles, .info-canal, .proyeccion, .aviso { margin-top: 0; }
.panel-canal { display: flex; flex-direction: column; gap: 16px; }
.pildora-movil { margin-top: 0; }

.canales { gap: 8px; }
.canal { min-height: 44px; height: 44px; justify-content: center; }
@media (max-width: 599px) {

  .canales { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; align-self: stretch; min-width: 0; }
  .canales::-webkit-scrollbar { display: none; }
  .canal { flex: 0 0 auto; min-height: 44px; padding-inline: 16px; white-space: nowrap; scroll-snap-align: start; text-align: center; }
}

.visor .marco-imagen { height: 100%; aspect-ratio: auto; }
.marco-imagen.cubrir .img-ultima, .marco-imagen.cubrir .cuadros canvas { object-fit: cover; }
.ampliado .marco-imagen.cubrir .img-ultima, .ampliado .marco-imagen.cubrir .cuadros canvas { object-fit: contain; }

.boton-play { width: 56px; height: 56px; }
.boton-play svg { width: 24px; height: 24px; }

.lugar, .info-canal > p, .proyeccion p, .alerta-met > p:nth-child(3), .fews-cuerpo, .rio-lectura, .pie p.pie-grande { font-size: 16px; line-height: 24px; }
.lugar { padding-block: 10px; }

.leyendas { display: flex; flex-direction: column; gap: var(--espacio-24); }
.leyendas .separador { margin: var(--espacio-16) 0 0; }
.leyendas .leyenda { max-width: 832px; padding: 0; }
.leyendas .leyenda:not(#leyenda-vapor) + .leyenda { margin-top: 0; }

.alertas-columnas { display: flex; flex-direction: column; margin-top: var(--espacio-16); }
.alertas-columnas .alerta-met { margin-top: 0; }

@media (max-width: 599px) {
  .lugar { padding-block: 0; }
  .leyenda-filas p, .leyenda-geocolor p, .leyenda-visible p { font-size: 16px; line-height: 22px; }
}

@media (min-width: 600px) {
  .encabezado, .contenido, .pie { padding-inline: 32px; }
  .contenido { gap: 32px; padding-block: var(--espacio-32) var(--espacio-48); }
  #clima, #alertas { padding: 24px; }
  .titulo-seccion, .satelite h1.titulo-seccion, .ahora-cabeza h2.titulo-seccion, .alertas h2.titulo-seccion { font-size: 28px; line-height: 36px; }
  .visor { height: 420px; }
}
@media (min-width: 1024px) {

  .encabezado { padding-inline: max(120px, calc((100% - 1200px) / 2)); }
  .contenido, .pie { padding-inline: 120px; }
  .contenido { gap: 48px; }
  #clima, #alertas { padding: 32px; }
  .titulo-seccion, .satelite h1.titulo-seccion, .ahora-cabeza h2.titulo-seccion, .alertas h2.titulo-seccion { font-size: 32px; line-height: 40px; }
  .visor { height: 640px; }
  .clima-columnas { display: grid; grid-template-columns: 384px 1fr; gap: 48px; }
  .clima-columnas > * { min-width: 0; }
  .clima-horas .horas-t { margin-top: var(--espacio-16); }

  .alertas-columnas { display: flex; flex-direction: column; gap: 24px; }
  .alertas-columnas .regla { width: 100%; height: 1px; margin: 0; }
  .hidro-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }

  .leyendas #leyenda-ir { max-width: none; }
  #leyenda-ir .leyenda-filas { grid-template-columns: repeat(3, 1fr); column-gap: 48px; }
}

@media (min-width: 1024px) and (max-width: 1327px) {
  .clima-columnas { display: block; }
  .clima-horas .horas-t { margin-top: var(--espacio-24); }
  .metricas { grid-template-columns: repeat(3, 1fr); gap: var(--espacio-16); }
  .metricas div { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--espacio-2); }
  .metricas dd { text-align: left; }
}

.pista input[type="range"] { height: 44px; }
.marcas { top: 21px; }

p a[href] { position: relative; }
p a[href]::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }

.hora-dato { gap: 8px; font-weight: 500; color: var(--texto-secundario); }
.hora-dato .punto { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--c, var(--texto-secundario)); box-shadow: 0 0 0 var(--alerta-contorno-ancho) var(--alerta-contorno); }

.ampliado-encabezado { flex: 1; min-width: 0; display: grid; gap: 4px; }
.ampliado-sub { font-size: 16px; line-height: 24px; color: var(--texto-secundario); font-variant-numeric: tabular-nums; }
@media (max-width: 599px) { .ampliado-sub { font-size: 14px; line-height: 20px; } }

.img-ultima, .cuadros canvas, .cuadros video { image-rendering: auto; }

.pie .credito { font-size: 14px; line-height: 20px; color: var(--acento-interactivo); margin: var(--espacio-8) 0 0; }
.pie .credito a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pie .credito a:hover { text-decoration-thickness: 2px; }
.pie .credito a:focus-visible { outline: 2px solid var(--acento-interactivo); outline-offset: 2px; border-radius: 2px; }
@media (max-width: 599px) { .pie .credito span:not(.sep) { display: block; } .pie .credito .sep { display: none; } .pie .credito a { display: inline-block; padding-block: 12px; } }

.alerta-met[hidden], .regla[hidden] { display: none !important; }

.rio-lectura .dato, .rio-umbral .dato, .fews-cuerpo .dato { font-family: var(--fuente-interfaz); }
.metricas dd.texto { font-family: var(--fuente-interfaz); font-size: 16px; }

.rio-estado { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--texto-principal); margin-top: var(--espacio-12); }

.hora-etiqueta { font-size: 14px; line-height: 18px; margin-bottom: 0; }

.atajo-satelite { display: none; }
@media (max-width: 599px) {
  .lugar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .atajo-satelite { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--acento-interactivo); text-decoration: underline; text-underline-offset: 3px; }
}
@media (max-width: 599px) {
  .fews-fila { flex-wrap: wrap; row-gap: 8px; }
  .fews-chip { white-space: nowrap; }
}
@media (max-width: 1023px) {
  .hidro-columnas > .hidro-grupo + .hidro-grupo { margin-top: var(--espacio-24, 24px); }
}

.hora-imagen .hora-grande { font-family: var(--fuente-interfaz); font-variant-numeric: tabular-nums; }

.saltar { min-height: 44px; display: inline-flex; align-items: center; box-sizing: border-box; }

.pista input[type="range"] { height: 44px; margin: -10px 0; }

.boton-play[aria-disabled="true"] { cursor: progress; opacity: 0.6; }
.linea-tiempo[aria-busy="true"] .lt-actual { font-weight: 500; color: var(--texto-secundario); }

.hora-fila .p { display: grid; justify-items: end; line-height: 1.25; }
.hora-fila .p .mm { font-size: 12px; color: var(--texto-secundario); }
@media (max-width: 1023px) and (min-width: 600px) { .hora-fila .p { justify-items: center; } }

.fews-resumen .fews-chip { white-space: normal; }
.fews-detalle { margin-top: 2px; }
.fews-detalle > summary { min-height: 44px; display: flex; align-items: center; gap: var(--espacio-8); cursor: pointer; font-size: 14px; font-weight: 700; color: var(--acento-interactivo); }
.fews-detalle > ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.fews-explica { font-size: 14px; line-height: 20px; color: var(--texto-secundario); }

summary:focus-visible, input:focus-visible, button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--acento-interactivo); outline-offset: 2px; }
.pista input:focus-visible { outline-offset: -8px; }

.fews-alerta[data-nivel="amarilla"] { --co: var(--alerta-amarilla-contorno); }
.fews-alerta[data-nivel="naranja"] { --co: var(--alerta-naranja-contorno); }
.fews-alerta[data-nivel="roja"] { --co: var(--alerta-roja-contorno); }
.fews-alerta::before { box-shadow: inset calc(-1 * var(--alerta-contorno-ancho)) 0 0 var(--co, var(--alerta-contorno)); }
.fews-chip { gap: 6px; border: var(--alerta-contorno-ancho) solid var(--co, var(--alerta-contorno)); border-radius: 4px; }
.fews-alerta { border-radius: 4px; padding: 10px 12px 10px 18px; }
.hora-dato .punto { box-shadow: 0 0 0 var(--alerta-contorno-ancho) var(--co, var(--alerta-contorno)); }

.icono-alerta { width: 14px; height: 12.5px; flex: none; color: inherit; }

.fews-resumen .fews-fila { flex-wrap: wrap; row-gap: 4px; }
.fews-resumen .hora-dato { font-size: 12px; line-height: 16px; font-weight: 700; display: inline-flex; align-items: center; }

.fews-resumen .pulso { position: relative; width: 24px; height: 24px; display: grid; place-items: center; flex: none; }
.fews-resumen .pulso .punto { margin: 0; }
.fews-resumen .pulso::before { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid var(--c); animation: pulso var(--mov-pulso) var(--curva-pulso) infinite; }
@keyframes pulso { from { transform: scale(1); opacity: .6; } to { transform: scale(3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fews-resumen .pulso::before { animation: none; opacity: 0; } }

.fews-detalle > summary { list-style: none; font-size: 14px; line-height: 20px; gap: 8px; }
.fews-detalle > summary::-webkit-details-marker { display: none; }
.fews-detalle .flecha { width: 12px; height: 7px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fews-detalle .f-abierta, .fews-detalle[open] .f-cerrada { display: none; }
.fews-detalle[open] .f-abierta { display: inline; }

.hora-fila { grid-template-columns: 48px 40px minmax(0, 1fr) minmax(84px, max-content); }
@media (max-width: 599px) { .hora-fila { grid-template-columns: 44px 32px minmax(0, 1fr) minmax(84px, max-content); } }
.hora-fila .p .mm { line-height: 15px; font-weight: 400; }

.pie .credito a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }

.clima-horas { --hg-tarjeta: var(--marca-base-crema); --hg-ahora: var(--marca-base-esparrago); --hg-texto: var(--marca-base-medianoche); --hg-texto-2: var(--marca-base-siempreverde);
  --hg-gota: var(--marca-base-siempreverde); --hg-regla: var(--marca-base-siempreverde); --hg-celda: var(--hg-tarjeta);
  background: var(--hg-tarjeta); color: var(--hg-texto); border-radius: var(--radio-l); margin-top: var(--espacio-24);
  margin-inline: calc(-1 * var(--hg-sangria, 16px)); padding: var(--espacio-16) var(--hg-sangria, 16px); }
[data-tema="oscuro"] .clima-horas { --hg-tarjeta: transparent; --hg-ahora: var(--fondo-elevado); --hg-texto: var(--texto-principal); --hg-texto-2: var(--texto-secundario);
  --hg-gota: var(--acento-interactivo); --hg-regla: var(--borde-fuerte); --hg-celda: var(--fondo-superficie); }

@media (min-width: 600px) { .clima-horas { --hg-sangria: 24px; padding-block: var(--espacio-24); } }
@media (min-width: 1024px) { .clima-horas { --hg-sangria: 32px; } }

@media (min-width: 1328px) { .clima-horas { margin: 0; padding: var(--espacio-24); } }
.clima-horas .horas-t, .clima-horas .horas-t:first-child { margin-top: 0; font-size: 15px; line-height: 20px; color: var(--hg-texto); border-bottom-color: var(--hg-regla); }
.hg { --hg-col: 64px;
  display: flex; flex-direction: column; gap: var(--espacio-16); margin-top: var(--espacio-8); min-width: 0; }
.hg-titulo { font-size: 24px; line-height: 29px; font-weight: 700; color: var(--hg-texto); margin: 0; }
.hg-sub { font-size: 15px; line-height: 21px; color: var(--hg-texto-2); margin: calc(var(--espacio-8) - var(--espacio-16)) 0 0; }
@media (min-width: 600px) { .hg-titulo { font-size: 28px; line-height: 34px; } }

.hg-franja { min-width: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.hg-franja::-webkit-scrollbar { display: none; }
.hg-horas { display: grid; grid-template-columns: repeat(12, var(--hg-col)); width: max-content; list-style: none; margin: 0; padding: 0; }
@media (min-width: 600px) { .hg-horas { grid-template-columns: repeat(12, minmax(46px, 1fr)); width: auto; min-width: 100%; } }
.hg-hora { display: flex; flex-direction: column; gap: var(--espacio-4); min-width: 0; scroll-snap-align: start; position: relative; }
.hg-probable { height: 22px; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--espacio-4); position: relative; }
.es-probable .hg-probable::after { content: ""; display: block; height: 4px; background: var(--hg-gota); }
.hg-probable-t { position: absolute; left: 0; bottom: 8px; font-size: 12px; line-height: 14px; font-weight: 700; color: var(--hg-texto-2); white-space: nowrap; }
.hg-probable-t.al-final { left: auto; right: 0; }
.hg-datos { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-block: 10px; border-radius: var(--radio-l); color: var(--hg-texto); }
.es-ahora .hg-datos { background: var(--hg-ahora); }
.es-ahora { --hg-celda: var(--hg-ahora); }
.hg-h { font-size: 13px; line-height: 18px; white-space: nowrap; }
.es-ahora .hg-h { font-weight: 700; }
.hg-icono { display: block; flex: none; color: var(--hg-texto); }
.hg-icono .ic-fondo { fill: var(--hg-celda); }
.hg-t { font-size: 17px; line-height: 22px; font-weight: 700; white-space: nowrap; }
.hg-espacio { height: 2px; }
.hg-gota { display: block; flex: none; overflow: visible; }
.hg-gota-vacia { fill: var(--hg-celda); }
[data-tema="oscuro"] .hg-gota-vacia { fill: var(--fondo-base); }
.hg-gota-llena { fill: var(--hg-gota); }
.hg-gota-borde { fill: none; stroke: var(--hg-gota); stroke-width: 1.5; stroke-linejoin: round; }
.hg-leyenda .hg-gota-borde { stroke-width: 0.75; }
.hg-p { font-family: var(--fuente-datos); font-size: 15px; line-height: 20px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hg-mm { font-family: var(--fuente-datos); font-size: 12px; line-height: 16px; color: var(--hg-texto-2); white-space: nowrap; font-variant-numeric: tabular-nums; }

.hg-hora { container-type: inline-size; }
@container (max-width: 51.9px) { .hg-mm-u { display: none; } }
.hg-desliza { display: none; align-items: center; gap: 6px; margin: 0; font-size: 13px; line-height: 18px; color: var(--hg-texto-2); }
.hg.se-desliza .hg-desliza { display: flex; }
.hg-leyenda { display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 18px; color: var(--hg-texto-2); }
.hg-ley-gota { display: flex; align-items: center; gap: 6px; }
.hg-ley-gota .hg-gota:first-child { margin-right: -2px; }
@media (min-width: 600px) { .hg-leyenda { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 20px; } }
.hg-credito { margin: 0; font-size: 12px; line-height: 16px; color: var(--hg-texto-2); }

.hg-franja { --hg-fade-izq: 0px; --hg-fade-der: 0px; }
.hg-franja.fade-izq { --hg-fade-izq: 40px; }
.hg-franja.fade-der { --hg-fade-der: 40px; }
.hg-franja.fade-izq, .hg-franja.fade-der {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--hg-fade-izq), #000 calc(100% - var(--hg-fade-der)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--hg-fade-izq), #000 calc(100% - var(--hg-fade-der)), transparent 100%); }

@media (max-width: 599px) {
  .canales { gap: var(--espacio-4); }
  .canal { padding-inline: var(--espacio-12); }
}

.hg-franja:focus-visible { -webkit-mask-image: none; mask-image: none; }

@media (max-width: 599px) {
  .encabezado { flex-wrap: nowrap; align-items: center; padding-block: var(--espacio-8); row-gap: 0; column-gap: var(--espacio-12); min-height: 56px; }
  .encabezado .lugar, .encabezado .hora-fecha { display: none; }
  .firma { min-width: 0; }
  .encabezado-der { margin-left: auto; min-width: 0; }
  .hora-imagen { display: block; }
  .hora-etiqueta { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .hora-linea { white-space: nowrap; }
}
@media (max-width: 359px) {
  .firma-nombre { display: none; }
}

.canales-marco { display: contents; }
@media (max-width: 599px) {
  .canales-marco { display: block; min-width: 0; padding: var(--espacio-4); border: 1px solid var(--borde-fuerte); border-radius: var(--radio-l); }
  .canales-marco .canales { padding: 0; border: 0; border-radius: var(--radio-m); --c-fade-izq: 0px; --c-fade-der: 0px; }
  .canales.fade-izq { --c-fade-izq: 40px; }
  .canales.fade-der { --c-fade-der: 40px; }
  .canales.fade-izq, .canales.fade-der {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--c-fade-izq), #000 calc(100% - var(--c-fade-der)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--c-fade-izq), #000 calc(100% - var(--c-fade-der)), transparent 100%); }
  .canales:focus-visible, .canales:has(:focus-visible) { -webkit-mask-image: none; mask-image: none; }
}

.modo-op { white-space: nowrap; justify-content: center; }
@media (max-width: 359px) {
  .modo-de { display: none; }
  .modo-op { padding-inline: var(--espacio-12); }
}

.pista-textos { font-size: 13px; line-height: 16px; gap: var(--espacio-8); }
.pista-textos span { white-space: nowrap; }
.pista-textos .lt-actual { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.ticks span.ini { transform: none; left: 0 !important; }
.ticks span.fin .fin-num { position: static; transform: none; }
@media (max-width: 599px) {
  .ticks .fin-num { display: none; }
}