/* Pantalla de proyección — Grupo Novaliv. Medidas en vh/vw para que escale igual
   en una TV 1080p, una 4K o un proyector. */

@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fuentes/urbanist-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fuentes/urbanist-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --azul: #003DC6;
  --azul-osc: #002C91;
  --verde: #76D363;
  --verde-txt: #2F8A1F;
  --fondo: #EEF1F5;
  --papel: #FFFFFF;
  --tinta: #1E2329;
  --tenue: #5B6370;
  --urgente: #C8323F;
  --importante: #A86400;
  --fuente: "Urbanist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { background: var(--fondo); color: var(--tinta); font-family: var(--fuente); }

.pp { height: 100vh; display: grid; grid-template-rows: 11vh 1fr 6vh; position: relative; }
.pp.quieto { cursor: none; }

/* ---------- Barra ---------- */
.pp-barra {
  background: var(--azul); color: #fff; display: flex; align-items: center; justify-content: space-between;
  padding: 0 4vw; position: relative; z-index: 2;
}
.pp-marca { display: flex; align-items: center; gap: 1.2vh; }
.pp-marca .gota { width: 4.4vh; height: 6vh; }
.marca-texto { display: flex; flex-direction: column; text-transform: uppercase; font-weight: 300; line-height: .98; letter-spacing: .06em; }
.marca-texto .mt-1 { font-size: 2.1vh; }
.marca-texto .mt-2 { font-size: 2.9vh; letter-spacing: .07em; }
.pp-sep { width: 1px; height: 5vh; background: rgba(255, 255, 255, .35); margin: 0 1.2vh; }
.pp-sub { font-size: 1.6vh; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--verde); }
.pp-reloj { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; }
#pp-hora { font-size: 4.6vh; font-weight: 300; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
#pp-fecha { font-size: 1.8vh; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }

.pp-ola { position: fixed; top: calc(11vh - 1px); left: 0; width: 100%; height: 5vh; transform: scaleY(-1); z-index: 1; pointer-events: none; }
.pp-ola path { fill: var(--azul); }

/* ---------- Escena y transiciones ---------- */
.pp-escena { position: relative; overflow: hidden; }
.pp-diapo {
  position: absolute; inset: 5.5vh 4vw 2vh; opacity: 0; transform: translateX(3vw);
  transition: opacity .8s ease, transform .8s ease;
}
.pp-diapo.activa { opacity: 1; transform: none; }
.pp-diapo.saliendo { opacity: 0; transform: translateX(-3vw); }

/* ---------- Diapositiva de texto ---------- */
.pp-texto { display: flex; align-items: center; justify-content: center; }
.pp-tarjeta {
  width: min(84vw, 150vh); max-height: 100%; overflow: hidden; background: var(--papel); border-radius: 4vh;
  padding: 5vh 5.5vh; box-shadow: 0 2vh 5vh -2.5vh rgba(16, 32, 72, .35);
  display: flex; flex-direction: column;
}
.p1 .pp-tarjeta { box-shadow: inset 1.2vh 0 0 var(--importante), 0 2vh 5vh -2.5vh rgba(16, 32, 72, .35); }
.p2 .pp-tarjeta { box-shadow: inset 1.2vh 0 0 var(--urgente), 0 2vh 5vh -2.5vh rgba(16, 32, 72, .35); }
.pp-titulo { margin: 1.6vh 0 2.2vh; font-size: 7vh; font-weight: 400; line-height: 1.08; color: var(--azul); letter-spacing: -.01em; }
.pp-cuerpo { font-size: 4.2vh; line-height: 1.45; overflow-wrap: anywhere; }
.pp-cuerpo p { margin: 0 0 .7em; }
.pp-cuerpo ul { margin: 0 0 .7em; padding-left: 1.2em; }
.pp-cuerpo li { margin: .2em 0; }
.pp-cuerpo li::marker { color: var(--verde-txt); }
.pp-cuerpo h3 { font-size: 1.15em; color: var(--azul); margin: .6em 0 .3em; font-weight: 600; }
.pp-cuerpo a { color: var(--azul); text-decoration: none; }
.pp-cuerpo strong { font-weight: 700; }
.pp-fecha { margin: auto 0 0; padding-top: 2vh; font-size: 2vh; color: var(--tenue); letter-spacing: .03em; }

/* ---------- Diapositiva con imagen o PDF ---------- */
.pp-imagen { display: grid; grid-template-columns: auto 30vw; justify-content: center; gap: 3vw; align-items: center; }
/* --r = ancho/alto de la imagen (lo pone pantalla.js); 75.5vh = alto útil de la escena. */
.pp-medio { --r: 1.5; width: min(58vw, calc(75.5vh * var(--r))); aspect-ratio: var(--r); align-self: center; }
.pp-medio img {
  width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 2vh;
  background: #fff; box-shadow: 0 2vh 5vh -2.5vh rgba(16, 32, 72, .45);
}
.pp-imagen.vertical { grid-template-columns: auto 34vw; }
.pp-info {
  align-self: center; background: var(--papel); border-radius: 3.2vh; padding: 4vh 3.5vh;
  box-shadow: 0 2vh 5vh -2.5vh rgba(16, 32, 72, .3); max-height: 100%; overflow: hidden;
}
.p1 .pp-info { box-shadow: inset 0 1vh 0 var(--importante), 0 2vh 5vh -2.5vh rgba(16, 32, 72, .3); }
.p2 .pp-info { box-shadow: inset 0 1vh 0 var(--urgente), 0 2vh 5vh -2.5vh rgba(16, 32, 72, .3); }
.pp-info .pp-titulo { font-size: 4.4vh; margin: 1.4vh 0 1.6vh; }
.pp-extracto { margin: 0; font-size: 2.5vh; line-height: 1.45; color: var(--tinta); }
.pp-info .pp-fecha { margin-top: 2.4vh; }

/* ---------- Etiquetas ---------- */
.pp-chips { display: flex; flex-wrap: wrap; gap: 1vh; }
.pp-chip {
  font-size: 1.6vh; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: .55vh 1.5vh; border-radius: 99px; line-height: 1.4;
}
.pp-cat { color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.pp-urgente { color: #fff; background: var(--urgente); }
.pp-importante { color: var(--importante); background: #FFF3DD; }
.pp-fijado { color: var(--azul); background: #E8EEFC; }

/* ---------- Pie: contador y barra de avance ---------- */
.pp-pie { display: grid; grid-template-columns: 12vw 1fr 30vw; align-items: center; gap: 2vw; padding: 0 4vw; }
.pp-contador { font-size: 2vh; font-weight: 600; letter-spacing: .1em; color: var(--tenue); font-variant-numeric: tabular-nums; }
.pp-avance { height: .7vh; background: rgba(0, 61, 198, .12); border-radius: 99px; overflow: hidden; }
#pp-avance { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--azul), var(--verde)); border-radius: 99px; }
.pp-estado { font-size: 1.8vh; color: var(--tenue); text-align: right; }

/* ---------- Vacío y botón ---------- */
.pp-vacio { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--azul); gap: 3vh; }
.pp-vacio[hidden] { display: none; }
.pp-vacio .gota { width: 14vh; height: 19vh; }
.pp-vacio p { font-size: 3vh; color: var(--tenue); margin: 0; }
.pp-completa {
  position: fixed; right: 2vw; bottom: 8vh; z-index: 3; font: 600 1.7vh var(--fuente); letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: var(--azul); border: 0; border-radius: 99px; padding: 1.4vh 2.6vh; cursor: pointer;
  box-shadow: 0 1vh 3vh -1vh rgba(0, 0, 0, .4); transition: opacity .3s;
}
.pp.quieto .pp-completa { opacity: 0; pointer-events: none; }

/* Pantallas verticales (TV girada o tótem) */
@media (orientation: portrait) {
  .pp-imagen, .pp-imagen.vertical { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 2.5vh; }
  .pp-medio { width: min(92vw, calc(40vh * var(--r))); justify-self: center; align-self: end; }
  .pp-sub, .pp-sep { display: none; }
  #pp-fecha { font-size: 1.4vh; }
  .pp-info { align-self: stretch; padding: 2.6vh 3vh; }
  .pp-pie { grid-template-columns: 18vw 1fr 30vw; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-diapo { transition: opacity .4s; transform: none !important; }
}