/* ============================================================
   Cartelera TV — estilos (lienzo 1920x1080)

   Geometría: barra lateral --side-w, banda de sección --band-h y cinta
   inferior --ticker-h. El escenario útil es
     1920 - 340 = 1580 de ancho
     1080 - 76 - 104 = 900 de alto
   Los tres valores viven solo acá: antes la altura de la cinta estaba
   duplicada en .ticker y en el grid del layout, y era fácil cambiar una
   sin la otra.

   Tres verdes, tres papeles, sin mezclarlos:
     --ppi-green-900  chrome permanente (barra, meteo de la cinta, standby)
     --ppi-green      acento activo (banda, banderín, fecha de visita, progreso)
     --ppi-green-300  texto secundario sobre fondo oscuro
   ============================================================ */
:root { --side-w: 340px; --band-h: 104px; --ticker-h: 76px; }

.scaler-bg { position: fixed; inset: 0; background: #000; overflow: hidden; }
.canvas-1080 {
  position: absolute; width: 1920px; height: 1080px;
  transform-origin: top left; overflow: hidden; background: var(--paper);
}
.tv { width: 1920px; height: 1080px; display: flex; flex-direction: column; position: relative; }

/* ============================================================
   LAYOUT: PANEL (barra lateral + escenario + cinta)
   ============================================================ */
/* minmax(0,1fr): impide que la barra lateral, si su contenido excede la fila,
   estire la grilla y empuje la cinta fuera del lienzo de 1080. El overflow
   oculto de la barra es la red de seguridad final. */
.layout-panel {
  display: grid;
  grid-template-columns: var(--side-w) 1fr;
  grid-template-rows: minmax(0, 1fr) var(--ticker-h);
  grid-template-areas: "side main" "ticker ticker";
}
.panel-main { grid-area: main; position: relative; overflow: hidden; background: var(--paper); transition: background-color .6s ease; }
.layout-panel .ticker { grid-area: ticker; }

/* ---------- Barra lateral ---------- */
/* background-COLOR, no la forma corta `background`: el atajo reinicia
   background-image a none y borraba las franjas diagonales de .ppi-stripes
   (misma especificidad, y esta regla carga después de brand.css). La barra se
   veía plana desde que se le puso el color con el atajo. Igual en .slide-standby. */
.panel-side {
  grid-area: side; background-color: var(--ppi-green-900); color: #fff;
  padding: 34px 32px; display: flex; flex-direction: column; overflow: hidden;
}
/* ppi-white.png es cuadrado (1182x1182) y su tinta ocupa solo 1109x520: el 56 %
   del alto es transparencia. Recortarlo con object-fit obligaba al navegador a
   reducir 4,28x, y su remuestreo escalonaba las diagonales del swoosh (se veía
   despixelado). Estos assets vienen ya recortados a la tinta y remuestreados a
   2x del tamaño de uso, así el navegador solo reduce 2x, que resuelve limpio.
   Si cambia el tamaño en pantalla hay que regenerarlos: reducción por promedio
   de área con alfa premultiplicado desde ppi-white.png. */
.side-logo { width: 276px; height: auto; display: block; margin-bottom: 34px; }
/* El aire de arriba es algo menor que el de abajo: el bloque de indicadores
   queda centrado en la barra pero un poco sobre la mitad óptica. */
.side-gap { flex: .55; }
.side-spacer { flex: 1; }

/* Bloque destacado de días sin accidentes: es el dato que se pidió priorizar. */
.side-hero { margin-top: 4px; padding: 22px 24px; background: rgba(255,255,255,.07); border-left: 8px solid var(--ppi-green-300); border-radius: 4px; }
.side-hero-num { font-family: var(--font-head); font-weight: 900; font-size: 96px; line-height: .82; }
/* 22 px y no 26: "DÍAS SIN ACCIDENTES" mide 207 px de los 220 útiles del
   bloque; a 26 px se parte en dos líneas. */
.side-hero-lbl { font-family: var(--font-cond); font-weight: 700; font-size: 22px; text-transform: uppercase; letter-spacing: .1em; margin-top: 10px; color: var(--ppi-green-300); white-space: nowrap; }

/* Accidentabilidad y frecuencia, a dos columnas. Las columnas se dimensionan
   por su contenido y se separan con space-between: "ACCIDENTABILIDAD" es una
   sola palabra de 152 px que no cabe en la mitad de 276 y no puede partirse. */
.side-idx { margin-top: 26px; }
.side-idx-row { display: flex; justify-content: space-between; gap: 22px; }
.side-idx-num { font-family: var(--font-head); font-weight: 900; font-size: 46px; line-height: .9; }
.side-idx-lbl { font-family: var(--font-cond); font-weight: 700; font-size: 19px; text-transform: uppercase; letter-spacing: .08em; margin-top: 6px; color: var(--ppi-green-300); white-space: nowrap; }
.side-idx-date { font-size: 19px; color: rgba(255,255,255,.5); font-weight: 500; margin-top: 12px; }

/* Color del mes, al pie: placa blanca sólida. El círculo se despega del fondo
   por contraste de superficie, no por un borde.
   EXCEPCIÓN DE PALETA a propósito: azul/rojo/amarillo están prohibidos por la
   guía de marca, pero acá el color ES el dato (código de vigencia de
   instrumentos y elementos de izaje), no decoración. El nombre escrito
   acompaña al círculo porque rojo y verde son la mitad del año y un daltónico
   rojo-verde no los distingue. */
.side-color { background: #fff; border-radius: 6px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; }
.side-color-dot { flex: none; width: 54px; height: 54px; border-radius: 50%; }
/* "Amarillo" es el nombre más largo: medido, 138 px de los 176 útiles de la
   placa (276 - 32 de padding - 54 del círculo - 14 del hueco). Si se sube el
   tamaño hay que volver a medirlo. */
.side-color-name { font-family: var(--font-head); font-weight: 900; font-size: 34px; line-height: .9; color: var(--ink); }
.side-color-lbl { font-family: var(--font-cond); font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: .1em; margin-top: 4px; color: var(--ppi-gray-10); }
.dot-azul { background: #1668cc; }
.dot-verde { background: #2fa84f; }   /* más saturado que --ppi-green */
.dot-rojo { background: #d22b2b; }
.dot-amarillo { background: #f5c518; }

/* ---------- Reloj ---------- */
.clock-time { font-family: var(--font-head); font-weight: 900; line-height: .85; letter-spacing: -.02em; }
.clock-ss { font-size: .42em; vertical-align: super; margin-left: 8px; opacity: .7; font-weight: 700; }
.clock-col .clock-time { font-size: 82px; }
/* Condensada y en UNA línea: la fecha más larga del año ("miércoles, 30 de
   septiembre de 2026") mide 255 px a 19 px, contra los 276 disponibles. A 22 px
   se pasa, y dejarla partir en dos líneas haría bailar el bloque de abajo de un
   día a otro (los días cortos sí caben en una).
   ::first-letter en vez de capitalize: capitalize afecta a CADA palabra y la TV
   mostraba "Martes, 4 De Agosto De 2026". */
.clock-col .clock-date { font-family: var(--font-cond); font-weight: 600; font-size: 19px; margin-top: 8px; letter-spacing: .01em; color: var(--ppi-green-300); white-space: nowrap; }
.clock-col .clock-date::first-letter { text-transform: uppercase; }

/* ============================================================
   BANDA DE SECCIÓN
   ============================================================ */
.sec-band { flex: none; height: var(--band-h); display: flex; align-items: center; justify-content: space-between; padding: 0 56px 0 44px; }
.sec-band-title { display: flex; align-items: center; gap: 26px; min-width: 0; }
.sec-band-label { font-family: var(--font-head); font-weight: 900; font-size: 46px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-band-ico { display: inline-flex; flex: none; animation: flagpulse 1.4s ease-in-out infinite; }
@keyframes flagpulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.sec-band-dots { flex: none; display: flex; align-items: center; gap: 10px; margin-left: 30px; }
.sec-band-dot { width: 22px; height: 10px; border-radius: 999px; background: var(--dot-off); transition: width .4s ease; }
.sec-band-dot.is-on { width: 52px; background: var(--dot-on); }
/* Con muchos avisos los puntos encogen para no desbordar la banda. */
.sec-band-dots.is-many { gap: 7px; }
.sec-band-dots.is-many .sec-band-dot { width: 14px; }
.sec-band-dots.is-many .sec-band-dot.is-on { width: 34px; }

.sec-band-green { background: var(--ppi-green); color: #fff; --dot-on: #fff; --dot-off: rgba(255,255,255,.30); }
.sec-band-gray { background: var(--ppi-gray-10); color: #fff; --dot-on: #fff; --dot-off: rgba(255,255,255,.30); }
.sec-band-alert { background: #fff; color: var(--ink); --dot-on: var(--ink); --dot-off: rgba(12,15,14,.22); }
.sec-band-alert .sec-band-label { font-size: 52px; letter-spacing: .14em; }
.sec-band-hoy { background: #fff; color: var(--ppi-green); --dot-on: var(--ppi-green); --dot-off: rgba(12,15,14,.22); }

/* ============================================================
   STAGE / TRANSICIÓN
   ============================================================ */
.stage-inner { position: relative; width: 100%; height: 100%; }
/* El slot es banda + slide. La banda va DENTRO para que funda junto con su
   slide: fuera, el color nuevo aparecería de golpe sobre el slide viejo.
   Sin desplazamiento vertical en la transición: ahora que los slides llegan al
   borde, mover el slot destaparía una franja del de abajo. */
.stage-slot { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.stage-slot.is-active { opacity: 1; pointer-events: auto; }
.slide { flex: 1; min-height: 0; width: 100%; display: flex; position: relative; }

/* Standby y "cargando" fuera del layout: necesitan un contenedor con alto. */
.solo-stage { width: 1920px; height: 1080px; display: flex; flex-direction: column; }

/* Vista previa del escritorio: el escenario REAL dentro del lienzo, no los
   1920x1080 completos. Si no, los saltos de línea del titular no coinciden con
   la TV (el escenario es 21 % más angosto) y la vista previa engaña. */
.preview-stage { width: 1580px; height: 1004px; margin: 38px 170px; overflow: hidden; background: var(--paper); display: flex; flex-direction: column; }
/* flex:1 explícito: fuera del stage el slot no es absoluto, así que sin esto
   toma solo el alto de su contenido y el slide (que es flex:1) se colapsa. */
.preview-stage .stage-slot { position: relative; flex: 1; min-height: 0; opacity: 1; pointer-events: auto; }
.preview-stage.is-dark { background: var(--ppi-green); }
.preview-stage.is-ink { background: var(--ink); }

/* Modo captura (?slide= / ?still=1): sin fundido, sin ticker en marcha y con la
   barra de progreso a un valor fijo, para que dos corridas den la misma imagen. */
.is-still .stage-slot { transition: none; }
.is-still .progress-fill { transition: none !important; width: 45% !important; animation: none; }
.is-still .ticker-run { animation: none; }
.is-still .sec-band-ico { animation: none; }

/* ============================================================
   SLIDE: Alerta — invierte el lienzo
   ============================================================ */
.slide-alert { background: var(--ink); color: #fff; }
.alert-col { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 30px; padding: 56px 60px; }
.alert-media { flex: 0 0 700px; align-self: stretch; }   /* 700 x 900, a sangre */
.alert-title { font-size: 112px; line-height: .94; letter-spacing: -.015em; color: #fff; text-wrap: balance; overflow-wrap: break-word; }
.alert-text { font-size: 48px; line-height: 1.24; color: var(--line); font-weight: 400; margin: 0; }
.alert-chip { align-self: flex-start; display: inline-flex; align-items: center; padding: 12px 26px; border: 3px solid var(--ppi-green-300); border-radius: 6px; color: var(--ppi-green-300); font-family: var(--font-cond); font-weight: 700; font-size: 30px; letter-spacing: .1em; text-transform: uppercase; }

.slide-alert.no-img .alert-col { padding: 70px 90px; gap: 40px; }
.slide-alert.no-img .alert-title { font-size: 160px; line-height: .88; letter-spacing: -.025em; max-width: 1400px; }
.slide-alert.no-img .alert-text { font-size: 62px; line-height: 1.2; max-width: 1300px; }
.slide-alert.no-img .alert-chip { padding: 14px 30px; font-size: 34px; }

/* ============================================================
   SLIDE: Noticia
   ============================================================ */
.slide-news { background: var(--paper); }
.news-col { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 34px; padding: 56px 60px; }
.news-media { flex: 0 0 760px; align-self: stretch; }    /* 760 x 900, a sangre */
.news-title { font-size: 104px; line-height: .94; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; overflow-wrap: break-word; }
.news-text { font-size: 48px; line-height: 1.26; color: var(--ppi-gray-10); font-weight: 400; margin: 0; }
.news-rule { flex: none; width: 180px; height: 16px; background: var(--ppi-green); }

.slide-news.no-img .news-col { padding: 70px 90px; gap: 44px; }
.slide-news.no-img .news-title { font-size: 148px; line-height: .9; letter-spacing: -.02em; max-width: 1420px; }
.slide-news.no-img .news-text { font-size: 60px; line-height: 1.22; max-width: 1300px; }

/* Escalón para titulares largos: con foto la columna son ~700 px y a 112 px
   entran ~9 caracteres por línea; sin esto un título de 50 se va de alto. */
.slide-alert.has-img.is-long .alert-title { font-size: 92px; }
.slide-alert.no-img.is-long .alert-title { font-size: 132px; }
.slide-news.has-img.is-long .news-title { font-size: 88px; }
.slide-news.no-img.is-long .news-title { font-size: 124px; }

/* ---------- Foto a sangre: sin margen, radio ni sombra ---------- */
.news-img, .alert-img,
.news-media .asset-ph, .alert-media .asset-ph {
  width: 100%; height: 100%; display: block;
  border-radius: 0; box-shadow: none; border: 0;
}
/* Placeholder sobre fondo oscuro: la trama clara no se ve en la alerta. */
.alert-media .asset-ph { background-color: #151a18; background-image: repeating-linear-gradient(-45deg, transparent 0 22px, rgba(255,255,255,.05) 22px 44px); }
.alert-media .asset-ph span { color: var(--ppi-green-300); font-size: 28px; }

/* ---------- Placeholder de imagen (base) ---------- */
.asset-ph {
  width: 100%; height: 100%; border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  background-color: var(--paper-2);
  background-image: repeating-linear-gradient(-45deg, transparent 0 18px, rgba(99,101,105,.10) 18px 36px);
  border: 3px dashed var(--ppi-gray-7);
}
.asset-ph span { font-family: var(--font-head); font-weight: 700; letter-spacing: .14em; color: var(--ppi-gray-10); font-size: 26px; text-transform: uppercase; }

/* ============================================================
   SLIDE: Visitas
   ============================================================ */
.slide-visits { flex-direction: column; justify-content: center; gap: 26px; padding: 44px 60px; background: var(--paper); }
.visits-list { display: flex; flex-direction: column; gap: 26px; }
.visit-row { display: flex; align-items: stretch; gap: 36px; background: #fff; border-left: 16px solid var(--line); padding: 28px 40px; box-shadow: var(--shadow-1); }
.visit-row.is-live { border-left-color: var(--ppi-green); }

.visit-date { flex: 0 0 168px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--paper-2); color: var(--ink); padding: 14px 0; }
.visit-date.is-live { background: var(--ppi-green); color: #fff; }
/* nowrap: el guión del rango ("10–13") es un punto de corte válido y el
   navegador partía la cifra en dos líneas cuando no cabía. Mejor que encoja. */
.visit-d { font-family: var(--font-head); font-weight: 900; font-size: 82px; line-height: .9; white-space: nowrap; }
.visit-m { font-family: var(--font-cond); font-weight: 700; font-size: 30px; letter-spacing: .14em; }
/* Visita de varios días: el bloque conserva su ancho, la cifra se achica.
   "10–13" a 60 px mide 165 px de los 168 del bloque: sin holgura. A 52 px son
   143 px y el bloque respira. */
.visit-date.is-range .visit-d { font-size: 52px; letter-spacing: -.01em; }
.visit-date.is-cross { gap: 4px; padding: 14px 6px; }
.visit-dm { font-family: var(--font-head); font-weight: 900; font-size: 38px; line-height: 1; white-space: nowrap; }
.visit-arrow { font-size: 24px; line-height: 1; opacity: .9; }

.visit-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.visit-co { font-family: var(--font-head); font-weight: 900; font-size: 56px; line-height: 1.02; color: var(--ink); }
.visit-live { display: inline-block; vertical-align: middle; margin-left: 20px; padding: 6px 18px; background: var(--ppi-green); color: #fff; font-family: var(--font-cond); font-weight: 700; font-size: 26px; letter-spacing: .14em; }
/* Las personas van apiladas, una por línea. Antes se unían con " · " y se
   recortaban con -webkit-line-clamp: con nombres largos eso hacía DESAPARECER
   a la última persona sin avisar. El tope ahora es por cantidad (ver
   VISIT_MAX_PERSONAS) y el resto se declara como "y N más". */
.visit-sub { font-size: 34px; color: var(--ppi-gray-10); line-height: 1.2; }
.visit-mas { color: var(--ppi-gray-7); font-style: italic; }
.visit-meta { font-family: var(--font-cond); font-size: 30px; color: var(--ppi-gray-7); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* Una sola visita en agenda: la ficha toma la pantalla en vez de dejar huecos. */
.slide-visits.is-solo { padding: 70px 90px; }
.slide-visits.is-solo .visit-row { background: transparent; border-left: 0; box-shadow: none; padding: 0; gap: 60px; align-items: center; }
.slide-visits.is-solo .visit-date { flex: 0 0 300px; padding: 34px 0; }
.slide-visits.is-solo .visit-d { font-size: 180px; line-height: .86; }
.slide-visits.is-solo .visit-m { font-size: 52px; letter-spacing: .16em; margin-top: 8px; }
/* En la ficha grande el bloque son 300 px: "10–13" a 120 px pedía 330 y se
   partía en dos líneas. A 88 px mide 242 y entra entero. */
.slide-visits.is-solo .visit-date.is-range .visit-d { font-size: 88px; }
.slide-visits.is-solo .visit-date.is-cross .visit-dm { font-size: 64px; }
.slide-visits.is-solo .visit-info { gap: 22px; }
.visit-live-top { align-self: flex-start; padding: 8px 22px; background: var(--ppi-green); color: #fff; font-family: var(--font-cond); font-weight: 700; font-size: 32px; letter-spacing: .16em; }
.slide-visits.is-solo .visit-co { font-size: 104px; line-height: .94; letter-spacing: -.015em; }
.slide-visits.is-solo .visit-sub { font-size: 52px; line-height: 1.18; }
.slide-visits.is-solo .visit-meta { font-size: 40px; }

/* ============================================================
   SLIDE: Cumpleaños del mes — grilla 3x3 a sangre
   ============================================================ */
/* El fondo de la grilla solo debe verse como los hilos de 2 px entre celdas:
   las celdas sobrantes se pintan blancas (ver CumpleMes). */
.slide-cumple-mes { background: var(--line); }
.cumple-grid { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 2px; }
.cumple-grid.filas-1 { grid-template-rows: 1fr; }
.cumple-grid.filas-2 { grid-template-rows: repeat(2, 1fr); }
.cumple-cell { background: #fff; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 0 44px; gap: 10px; }
.cumple-day { font-family: var(--font-cond); font-weight: 700; font-size: 28px; letter-spacing: .12em; text-transform: uppercase; color: var(--ppi-green); }
.cumple-name { font-family: var(--font-head); font-weight: 900; font-size: 52px; line-height: 1; letter-spacing: -.01em; color: var(--ink); }
.cumple-area { font-size: 30px; color: var(--ppi-gray-10); }
/* Con una o dos filas sobra alto: el nombre crece para llenar la pantalla. */
.cumple-grid.filas-1 .cumple-name { font-size: 72px; }
.cumple-grid.filas-1 .cumple-day, .cumple-grid.filas-2 .cumple-day { font-size: 32px; }
.cumple-grid.filas-1 .cumple-area { font-size: 38px; }
.cumple-grid.filas-2 .cumple-name { font-size: 60px; }
.cumple-grid.filas-2 .cumple-area { font-size: 34px; }

/* ============================================================
   SLIDE: Cumpleaños de hoy — escenario verde
   ============================================================ */
.slide-cumple-hoy { --hoy-d: 290px; flex-direction: column; align-items: center; justify-content: center; gap: 52px; padding: 60px 80px; background: var(--ppi-green); color: #fff; }
/* Grilla de dos filas (fotos arriba, textos abajo) en vez de tarjetas
   apiladas: el área queda a la misma altura en todos aunque un nombre ocupe
   dos líneas. grid-auto-flow:column reparte cada par foto+texto en su columna. */
.hoy-row { display: grid; grid-auto-flow: column; grid-template-rows: auto auto; gap: 22px 70px; justify-content: center; justify-items: center; align-items: start; }
.hoy-txt { text-align: center; max-width: calc(var(--hoy-d) + 130px); }
.hoy-foto { width: var(--hoy-d); height: var(--hoy-d); flex: none; border-radius: 50%; overflow: hidden; border: 8px solid var(--ppi-green-300); }
/* Sin foto, la inicial sobre círculo verde: la fila no se descuadra al mezclar. */
.hoy-ini { display: flex; align-items: center; justify-content: center; background: var(--ppi-green-300); color: var(--ppi-green-900); font-family: var(--font-head); font-weight: 900; font-size: calc(var(--hoy-d) * .41); line-height: 1; border: 0; }
.hoy-foto.asset-ph { border-radius: 50%; border: 8px solid var(--ppi-green-300); background-color: var(--ppi-green-900); background-image: repeating-linear-gradient(-45deg, transparent 0 16px, rgba(255,255,255,.07) 16px 32px); }
.hoy-foto.asset-ph span { color: var(--ppi-green-300); font-size: 22px; }
.hoy-name { font-family: var(--font-head); font-weight: 900; font-size: 60px; line-height: 1.04; }
.hoy-area { font-size: 36px; color: var(--ppi-green-300); margin-top: 10px; }
.hoy-foot { font-family: var(--font-cond); font-weight: 700; font-size: 44px; letter-spacing: .1em; text-transform: uppercase; text-align: center; }
/* Los círculos encogen a partir de tres para que quepan en los 1420 útiles. */
.slide-cumple-hoy.n-3 { --hoy-d: 250px; }
.slide-cumple-hoy.n-3 .hoy-row { column-gap: 56px; }
.slide-cumple-hoy.n-3 .hoy-name { font-size: 52px; }
.slide-cumple-hoy.n-3 .hoy-area { font-size: 32px; }
.slide-cumple-hoy.n-4 { --hoy-d: 220px; }
.slide-cumple-hoy.n-4 .hoy-row { column-gap: 42px; }
.slide-cumple-hoy.n-4 .hoy-name { font-size: 44px; }
.slide-cumple-hoy.n-4 .hoy-area { font-size: 28px; }

/* ============================================================
   SLIDE: Video (a sangre, sin banda) y Standby
   ============================================================ */
.slide-video { padding: 0; background: #000; align-items: center; justify-content: center; }
.corp-video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.video-ph { border-radius: 0; border: none; background-color: #0c0f0e; background-image: repeating-linear-gradient(-45deg, transparent 0 26px, rgba(255,255,255,.04) 26px 52px); }
.video-ph span { color: #6b6f6d; font-size: 34px; }
/* bottom: 12px deja pasar la barra de progreso, que va pegada al borde. */
.video-cap { position: absolute; bottom: 12px; left: 0; right: 0; padding: 40px 60px; background: linear-gradient(to top, rgba(0,0,0,.85), transparent); color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 52px; }

.slide-standby { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 34px; background-color: var(--ppi-green-900); color: #fff; }
/* Sin playlist, Stage devuelve el standby directo dentro de .panel-main, que es
   un bloque: sin alto propio el slide medía lo que su contenido y quedaba
   pegado arriba en vez de centrado. Antes no se notaba porque el logo traía un
   56 % de transparencia que hacía de margen; con el logo recortado, la tinta
   tocaba el borde. */
.panel-main > .slide-standby { height: 100%; }
.standby-logo { width: 420px; opacity: .96; }
.standby-txt { font-family: var(--font-head); font-weight: 900; font-size: 72px; }
.standby-sub { font-size: 36px; color: var(--ppi-green-300); }

/* ============================================================
   CLIMA / UV (solo en la cinta inferior)
   ============================================================ */
.weather { display: flex; align-items: center; gap: 12px; }
.weather-ico { display: inline-flex; }
.weather-data { display: flex; align-items: baseline; gap: 12px; }
.weather-temp { font-family: var(--font-head); font-weight: 800; font-size: 32px; line-height: 1; }
.weather-temp span { font-size: .42em; vertical-align: super; opacity: .7; }
.weather-meta { font-size: 24px; line-height: 1; opacity: .8; font-weight: 500; }

/* Insignia "UV" (no un sol, para no confundir con el clima). */
.uv { display: flex; align-items: center; gap: 12px; }
.uv-badge { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 30px; padding: 0 5px; font-family: var(--font-head); font-weight: 900; font-size: 16px; letter-spacing: .02em; line-height: 1; border: 2px solid currentColor; border-radius: 7px; }
.uv-data { display: flex; align-items: baseline; gap: 10px; }
.uv-val { font-family: var(--font-head); font-weight: 800; font-size: 32px; line-height: 1; }
.uv-meta { font-size: 24px; line-height: 1; opacity: .8; font-weight: 500; }

/* ============================================================
   CINTA INFERIOR
   ============================================================ */
/* El filete superior se declara transparente en TODOS los tonos: con
   box-sizing:border-box, agregarlo solo en los oscuros restaría 2 px al alto
   de contenido y el texto saltaría en cada cambio de slide. */
.ticker { height: var(--ticker-h); flex: none; display: flex; align-items: stretch; background: var(--ink); color: #fff; overflow: hidden; border-top: 2px solid transparent; transition: border-top-color .6s ease; }
.ticker-flag { flex: none; white-space: nowrap; display: flex; align-items: center; justify-content: center; text-align: center; min-width: 220px; padding: 0 40px 0 32px; background: var(--ppi-green); font-family: var(--font-head); font-weight: 800; font-size: 28px; line-height: 1; letter-spacing: .08em; clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%); }
.ticker-track { flex: 1; display: flex; align-items: center; overflow: hidden; position: relative; }
.ticker-run { white-space: nowrap; font-size: 32px; line-height: 1; font-weight: 500; letter-spacing: .01em; will-change: transform; animation: tickerscroll 38s linear infinite; padding-left: 36px; }
/* Clima y UV al extremo derecho, con la diagonal espejada del banderín. */
.ticker-meteo { flex: none; display: flex; align-items: center; gap: 30px; padding: 0 34px 0 46px; background: var(--ppi-green-900); clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%); }
@keyframes tickerscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   BARRA DE PROGRESO (tiempo restante del aviso en curso)
   ============================================================ */
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; overflow: hidden; z-index: 5; transition: background-color .6s ease; }
.progress-fill { height: 100%; width: 0; }
.progress-video .progress-fill { width: 38% !important; animation: progslide 2.4s ease-in-out infinite; }
@keyframes progslide { 0% { transform: translateX(-120%); } 100% { transform: translateX(330%); } }

/* ============================================================
   TONO DEL ESCENARIO EN CURSO
   Lo pone LayoutPanel desde el item activo. Gobierna el fondo del escenario
   durante el fundido, el color de la barra de progreso y el filete de la cinta.
   ============================================================ */
.is-light .panel-main { background: var(--paper); }
.is-dark .panel-main { background: var(--ppi-green); }
.is-ink .panel-main { background: var(--ink); }
.is-standby .panel-main { background: var(--ppi-green-900); }
.is-standby .panel-side { border-right: 2px solid rgba(255,255,255,.12); }

.is-light .progress { background: rgba(24,86,64,.16); }
.is-light .progress-fill { background: var(--ppi-green); }
.is-dark .progress { background: rgba(255,255,255,.14); }
.is-ink .progress { background: rgba(255,255,255,.12); }
.is-dark .progress-fill, .is-ink .progress-fill { background: var(--ppi-green-300); }

.is-ink .ticker { border-top-color: rgba(255,255,255,.14); }