/* ============================================================
   Cartelera TV — estilos (lienzo 1920x1080)
   ============================================================ */
.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; }

/* ---------- Tag de sección ---------- */
.sec-tag { display: inline-flex; align-items: center; gap: 18px; margin-bottom: 28px; }
.sec-tag-bar { width: 64px; height: 12px; background: var(--ppi-green); border-radius: 999px; transform: skewX(-18deg); }
.sec-tag-txt { font-family: var(--font-head); font-weight: 800; font-size: 34px; text-transform: uppercase; letter-spacing: .06em; color: var(--ppi-green); }
.tone-light .sec-tag-txt { color: #fff; }
.tone-light .sec-tag-bar { background: #fff; }

/* ---------- Stage / transición ---------- */
.stage-inner { position: relative; width: 100%; height: 100%; }
.stage-slot { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease, transform .6s ease; transform: translateY(14px) scale(.995); pointer-events: none; }
.stage-slot.is-active { opacity: 1; transform: none; pointer-events: auto; }
.slide { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 70px 80px; }

/* ============================================================
   SLIDE: Alerta
   ============================================================ */
.slide-alert { background: var(--ppi-green-900); color: #fff; justify-content: center; gap: 36px; }
.alert-badge {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 18px;
  background: #fff; color: var(--ppi-green-900);
  font-family: var(--font-head); font-weight: 900; font-size: 40px; letter-spacing: .14em;
  padding: 14px 34px 14px 26px; border-radius: 8px; transform: skewX(-7deg);
  animation: alertpulse 1.6s ease-in-out infinite;
}
.alert-badge > * { transform: skewX(7deg); }
.alert-ico { display: inline-flex; color: var(--ppi-green-900); }
@keyframes alertpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.5);} 50% { box-shadow: 0 0 0 18px rgba(255,255,255,0);} }
.alert-title { font-size: 104px; line-height: .96; max-width: 1500px; text-wrap: balance; }
.alert-text { font-size: 46px; line-height: 1.3; max-width: 1350px; color: #d8e6df; font-weight: 400; margin-top: 6px; }
.alert-foot { position: absolute; bottom: 46px; right: 80px; font-size: 30px; color: var(--ppi-green-300); font-weight: 600; letter-spacing: .03em; }

/* ============================================================
   SLIDE: Noticia
   ============================================================ */
.slide-news { flex-direction: row; align-items: center; gap: 70px; background: var(--paper); }
.slide-news.no-img { flex-direction: column; justify-content: center; align-items: flex-start; }
.news-col { flex: 1; display: flex; flex-direction: column; }
.slide-news.has-img .news-col { max-width: 920px; }
.news-title { font-size: 92px; line-height: .96; color: var(--ink); text-wrap: balance; }
.slide-news.no-img .news-title { font-size: 116px; max-width: 1650px; }
.news-text { font-size: 44px; line-height: 1.34; color: var(--ppi-gray-10); font-weight: 400; margin-top: 34px; max-width: 1100px; }
.slide-news.no-img .news-text { font-size: 50px; max-width: 1500px; }
.news-media { flex: 0 0 760px; height: 820px; }
.news-img { width: 100%; height: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow-2); }

/* ---------- Placeholder de imagen ---------- */
.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: 'Saira', monospace; font-weight: 700; letter-spacing: .14em; color: var(--ppi-gray-10); font-size: 26px; text-transform: uppercase; }

/* ============================================================
   SLIDE: Seguridad
   ============================================================ */
.slide-safety { background: var(--ppi-green); color: #fff; align-items: center; justify-content: center; text-align: center; }
.safety-wrap { display: flex; flex-direction: column; align-items: center; }
.safety-num { font-family: var(--font-head); font-weight: 900; font-size: 380px; line-height: .82; letter-spacing: -.02em; }
.safety-lbl { font-family: var(--font-head); font-weight: 800; font-size: 64px; letter-spacing: .1em; margin-top: 10px; }
.safety-sub { font-size: 36px; color: #cfe2da; margin-top: 26px; font-weight: 500; }
.safety-tag { position: absolute; bottom: 48px; font-size: 30px; letter-spacing: .04em; color: #bcd6cc; font-weight: 600; }

/* ============================================================
   SLIDE: Visitas
   ============================================================ */
.slide-visits { background: var(--paper); }
.visits-list { display: flex; flex-direction: column; gap: 30px; margin-top: 12px; }
.visit-row { display: flex; align-items: stretch; gap: 36px; background: #fff; border: 2px solid var(--line); border-left: 14px solid var(--ppi-green); border-radius: var(--r-md); padding: 32px 40px; box-shadow: var(--shadow-1); }
.visit-date { flex: 0 0 130px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--ppi-green); color: #fff; border-radius: var(--r-sm); padding: 14px 0; }
.visit-d { font-family: var(--font-head); font-weight: 900; font-size: 70px; line-height: 1; }
.visit-m { font-family: var(--font-head); font-weight: 700; font-size: 28px; letter-spacing: .12em; }
.visit-info { display: flex; flex-direction: column; justify-content: center; }
.visit-co { font-family: var(--font-head); font-weight: 800; font-size: 50px; color: var(--ink); line-height: 1.04; }
.visit-pp { font-size: 36px; color: var(--ppi-gray-10); margin-top: 8px; }
.visit-meta { font-size: 28px; color: var(--ppi-gray-7); margin-top: 10px; font-weight: 600; letter-spacing: .02em; }

/* ============================================================
   SLIDE: Cumpleaños
   ============================================================ */
.slide-cumple { background: var(--ppi-green); color: #fff; }
.cumple-grid { display: flex; gap: 40px; margin-top: 18px; justify-content: center; }
.cumple-card { flex: 1; max-width: 360px; background: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.16); border-radius: var(--r-lg); padding: 30px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cumple-photo { width: 230px; height: 230px; border-radius: 50%; overflow: hidden; border: 6px solid #fff; flex: none; }
.cumple-photo.asset-ph { border-style: solid; background-color: rgba(255,255,255,.12); background-image: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(255,255,255,.12) 14px 28px); }
.cumple-photo.asset-ph span { color: #fff; }
.cumple-name { font-family: var(--font-head); font-weight: 800; font-size: 44px; margin-top: 26px; line-height: 1.04; }
.cumple-area { font-size: 30px; color: #cfe2da; margin-top: 8px; }
.cumple-foot { position: absolute; bottom: 46px; left: 0; right: 0; text-align: center; font-size: 32px; color: #dceae4; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 14px; }
.cumple-ico { display: inline-flex; }

/* ============================================================
   SLIDE: Video
   ============================================================ */
.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; }
.video-cap { position: absolute; bottom: 0; left: 0; right: 0; padding: 40px 60px; background: linear-gradient(to top, rgba(0,0,0,.8), transparent); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 44px; }

/* ============================================================
   SLIDE: Standby
   ============================================================ */
.slide-standby { background: var(--ppi-green-900); color: #fff; align-items: center; justify-content: center; text-align: center; gap: 20px; }
.standby-logo { width: 380px; opacity: .96; }
.standby-txt { font-family: var(--font-head); font-weight: 800; font-size: 56px; margin-top: 20px; }
.standby-sub { font-size: 30px; color: var(--ppi-green-300); }

/* ============================================================
   RELOJ / CLIMA / SEGURIDAD MINI
   ============================================================ */
.clock-time { font-family: var(--font-head); font-weight: 900; line-height: .9; letter-spacing: -.01em; }
.clock-ss { font-size: .42em; vertical-align: super; margin-left: 8px; opacity: .7; font-weight: 700; }
.clock-date { font-weight: 600; text-transform: capitalize; opacity: .9; }
.clock-col .clock-time { font-size: 84px; }
.clock-col .clock-date { font-size: 26px; margin-top: 6px; }
.clock-row { display: flex; flex-direction: column; align-items: flex-end; }
.clock-row .clock-time { font-size: 64px; }
.clock-row .clock-date { font-size: 24px; }

.weather { display: flex; align-items: center; gap: 18px; }
.weather-ico { display: inline-flex; }
.weather-temp { font-family: var(--font-head); font-weight: 800; font-size: 58px; line-height: 1; }
.weather-temp span { font-size: .42em; vertical-align: super; opacity: .7; }
.weather-meta { font-size: 22px; line-height: 1.2; opacity: .85; font-weight: 500; }
.weather-compact { gap: 12px; }
.weather-compact .weather-temp { font-size: 40px; }
.weather-compact .weather-meta { font-size: 18px; }

.safety-mini { display: flex; align-items: center; gap: 18px; }
.safety-mini-ico { display: inline-flex; }
.safety-mini-num { font-family: var(--font-head); font-weight: 900; font-size: 66px; line-height: .9; }
.safety-mini-lbl { font-size: 22px; text-transform: uppercase; letter-spacing: .04em; opacity: .85; font-weight: 600; max-width: 200px; }

/* ============================================================
   TICKER
   ============================================================ */
/* Cinta más alta y con el texto centrado verticalmente: deja margen de
   resguardo arriba y abajo para las smart TV que recortan píxeles del borde. */
.ticker { height: 108px; flex: none; display: flex; align-items: stretch; background: var(--ink); color: #fff; overflow: hidden; }
.ticker-flag { flex: none; white-space: nowrap; display: flex; align-items: center; justify-content: center; text-align: center; min-width: 240px; padding: 0 48px 20px 36px; background: var(--ppi-green); font-family: var(--font-head); font-weight: 800; font-size: 32px; line-height: 1; letter-spacing: .08em; clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 100%, 0 100%); }
.ticker-track { flex: 1; display: flex; align-items: center; overflow: hidden; position: relative; }
/* top negativo: compensa la métrica de Saira para centrar ópticamente el texto
   en la cinta (no toca el transform de la animación). */
.ticker-run { white-space: nowrap; font-size: 38px; line-height: 1; font-weight: 500; letter-spacing: .01em; will-change: transform; animation: tickerscroll 38s linear infinite; padding-left: 40px; position: relative; top: -10px; }
@keyframes tickerscroll { from { transform: translateX(0);} to { transform: translateX(-50%);} }

/* ============================================================
   LAYOUT: PANEL (sidebar + escenario)
   ============================================================ */
.layout-panel { display: grid; grid-template-columns: 460px 1fr; grid-template-rows: 1fr 108px; grid-template-areas: "side main" "ticker ticker"; }
.panel-side { grid-area: side; background: var(--ppi-green); color: #fff; padding: 56px 44px; display: flex; flex-direction: column; }
.side-logo { width: 300px; align-self: center; margin-bottom: 44px; }
.side-div { height: 2px; background: rgba(255,255,255,.16); margin: 36px 0; }
.side-spacer { flex: 1; }
.side-foot { font-size: 24px; opacity: .7; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.panel-main { grid-area: main; position: relative; overflow: hidden; background: var(--paper); }
.layout-panel .ticker { grid-area: ticker; }

/* ============================================================
   LAYOUT: FULLBLEED (barra superior + escenario a sangre)
   ============================================================ */
.layout-fullbleed { background: var(--paper); }
.fb-top { flex: none; height: 132px; display: flex; align-items: center; justify-content: space-between; padding: 0 64px; background: #fff; border-bottom: 4px solid var(--ppi-green); }
.fb-logo { height: 64px; }
.fb-top-right { display: flex; align-items: center; gap: 32px; color: var(--ink); }
.fb-div { width: 2px; height: 64px; background: var(--line); }
.fb-main { flex: 1; position: relative; overflow: hidden; }
.fb-swoosh { position: absolute; left: -100px; bottom: -60px; width: 900px; height: 220px; background: var(--ppi-gray-7); opacity: .14; border-radius: 999px; transform: rotate(-7deg); pointer-events: none; z-index: 0; }
.layout-fullbleed .stage-inner { position: relative; z-index: 1; }

/* ============================================================
   LAYOUT: CINE (fondo verde, tarjeta central)
   ============================================================ */
.layout-cine { background: var(--ppi-green-900); }
.cine-top { flex: none; height: 120px; display: flex; align-items: center; justify-content: space-between; padding: 0 60px; color: #fff; }
.cine-logo { height: 56px; }
.cine-top-right { display: flex; align-items: center; gap: 40px; }
.cine-main { flex: 1; padding: 0 70px 40px; display: flex; }
.cine-card { flex: 1; background: var(--paper); border-radius: 28px; overflow: hidden; position: relative; box-shadow: 0 30px 80px rgba(0,0,0,.4); }
.cine-card .slide { padding: 64px 72px; }
.cine-card .slide-safety, .cine-card .slide-cumple, .cine-card .slide-alert { border-radius: 28px; }