/* RAUGM 2026 - Pantalla de fotografía para los descansos.
   Idea: la foto es lo único con color; todo lo demás es vidrio esmerilado con línea blanca fina.
   Todas las medidas van en vh/vw para que escale igual en cualquier pantalla horizontal. */

:root {
  --ink: #ffffff;
  --ink-soft: rgba(255, 255, 255, 0.78);
  --ink-faint: rgba(255, 255, 255, 0.58);
  --glass: rgba(8, 12, 18, 0.34);
  --glass-line: rgba(255, 255, 255, 0.42);
  --live: #ff7a59;
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: 3vw;
  --fade: 1.8s;
  --sponsor-h: 7.5vh;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  background: #0b0f14;
  color: var(--ink);
  font-family: var(--font);
  cursor: none;
}

/* ---------- Fotos ---------- */
#stage { position: fixed; inset: 0; background: radial-gradient(120% 120% at 20% 10%, #1d2a38, #0b0f14); }

.slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--fade) ease-in-out; }
.slide.active { opacity: 1; }

.slide img { position: absolute; display: block; }
.backdrop { inset: -6%; width: 112%; height: 112%; object-fit: cover; filter: blur(5vh) brightness(0.68) saturate(1.25); }
.photo { inset: 0; width: 100%; height: 100%; object-fit: contain; transform-origin: var(--ox, 50%) var(--oy, 50%); }
.slide.cover .photo { object-fit: cover; }
/* "run" dura hasta que termina el fundido de salida, para que la foto no regrese a su tamaño al irse */
.slide.run .photo { animation: drift var(--drift, 16s) ease-out forwards; }

@keyframes drift {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

/* Oscurece apenas la parte baja y la alta para que el texto lea sobre cualquier foto */
.scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(5, 8, 12, 0.45) 0%, rgba(5, 8, 12, 0) 20%),
    linear-gradient(to top, rgba(5, 8, 12, 0.62) 0%, rgba(5, 8, 12, 0) 42%);
}

/* ---------- Vidrio ---------- */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(0.3vh) saturate(115%);
  backdrop-filter: blur(0.3vh) saturate(115%);
  border: 1px solid var(--glass-line);
  box-shadow: 0 1.4vh 5vh rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* ---------- Encabezado ---------- */
.top {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 3.4vh var(--gutter) 0;
  text-shadow: 0 0.2vh 1.6vh rgba(0, 0, 0, 0.45);
}
.brand { display: flex; flex-direction: column; gap: 0.5vh; }
.brand-name { font-weight: 600; font-size: 3vh; letter-spacing: 0.32em; }
.brand-sub { font-weight: 300; font-size: 1.9vh; letter-spacing: 0.14em; color: var(--ink-soft); text-transform: uppercase; }
.clock { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2vh; }
.clock-time { font-weight: 300; font-size: 7vh; line-height: 1; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.clock-date { font-weight: 300; font-size: 2vh; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- Pie ---------- */
.dock {
  position: fixed; left: var(--gutter); right: var(--gutter); bottom: 3.4vh;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.8vh;
}

.credit {
  display: inline-flex; align-items: baseline; gap: 1.4vh;
  padding: 1.1vh 2vh; border-radius: 99vh; font-size: 1.9vh;
  transition: opacity 0.6s ease;
}
.credit[hidden] { display: none; }
.credit { max-width: 100%; min-width: 0; }
.credit-title, .credit-author { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.credit-title { font-weight: 500; max-width: 60%; }
.credit-author { font-weight: 300; color: var(--ink-soft); }
.credit-author::before { content: "·"; margin-right: 1.4vh; color: var(--ink-faint); }

/* Fila sobre la barra: el crédito de la foto a la izquierda y el logo de patrocinador a la derecha */
.dock-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 2vw; width: 100%; min-width: 0; }

/* Logos en blanco (monocromáticos), sin placa: discretos, con una sombra suave para leerse sobre cualquier foto */
.sponsor {
  flex: none; margin-left: auto; width: 22vh; height: var(--sponsor-h);
  display: flex; align-items: center; justify-content: flex-end;
  opacity: 0; transition: opacity 0.8s ease;
}
.sponsor[hidden] { display: none; }
.sponsor.show { opacity: 0.94; }
.sponsor img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 0.25vh 0.9vh rgba(0, 0, 0, 0.6)); }

.info {
  width: 100%; border-radius: 2.6vh; padding: 2.6vh 2.8vw;
  display: grid; grid-template-columns: 1.45fr 1px 1fr; gap: 0 2.6vw; align-items: stretch;
  height: 27vh; overflow: hidden; /* altura fija: el pie no se mueve al cambiar el contenido */
  opacity: 0; transition: opacity 0.9s ease;
}
body.ready .info { opacity: 1; }
.divider { background: linear-gradient(to bottom, transparent, var(--glass-line) 20%, var(--glass-line) 80%, transparent); }
/* --k escala todo el texto de la columna: app.js lo baja cuando el contenido no cabe */
.col { --k: 1; font-size: calc(var(--k) * 1vh); display: flex; flex-direction: column; gap: 1em; min-width: 0; }

.label {
  display: flex; align-items: center; gap: 1em;
  font-size: 1.7em; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-soft);
}
.live-dot { width: 1.1vh; height: 1.1vh; border-radius: 50%; background: var(--live); box-shadow: 0 0 1.6vh var(--live); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; transform: scale(0.8); } }

.kind { font-size: 1.7em; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); }
.headline {
  font-size: 4.2em; font-weight: 500; line-height: 1.18; text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.headline.small { font-size: 3.4em; }
.detail { font-size: 2.3em; font-weight: 300; color: var(--ink-soft); }
.when { font-size: 4.8em; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; }
.when small { font-size: 0.42em; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-left: 0.6em; }

.chips { display: flex; flex-wrap: wrap; gap: 1em 1.2em; margin-top: 0.4em; }
.chip {
  display: inline-flex; align-items: baseline; gap: 0.9em; min-width: 0; max-width: 26vw;
  padding: 0.7em 1.5em; border-radius: 99vh; font-size: 1.9em; font-weight: 300;
  border: 1px solid var(--glass-line); background: rgba(255, 255, 255, 0.08);
}
.chip b { font-weight: 600; }
.chip.more { font-weight: 500; }
.chip span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Pantalla de cierre (pasada la fecha de desactivación) ---------- */
.closed {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh;
  background: radial-gradient(120% 120% at 20% 10%, #1d2a38, #0b0f14); text-align: center;
}
.closed[hidden] { display: none; }
.closed-name { font-weight: 600; font-size: 6vh; letter-spacing: 0.32em; }
.closed-text { font-weight: 300; font-size: 2.6vh; letter-spacing: 0.12em; color: var(--ink-soft); }
body.is-closed #stage, body.is-closed .top, body.is-closed .dock, body.is-closed .sim { display: none; }

/* ---------- Modo simulación ---------- */
.sim {
  position: fixed; top: 50%; right: 0; transform: translateY(-50%) rotate(-90deg); transform-origin: right bottom;
  padding: 0.6vh 1.6vh; font-size: 1.5vh; letter-spacing: 0.16em; text-transform: uppercase;
  background: rgba(255, 122, 89, 0.85); color: #1a0d08; border-radius: 1vh 1vh 0 0; font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .slide.run .photo { animation: none; }
  .live-dot { animation: none; }
}

/* ---------- Modo sala (?sala=C): cola de turnos de una sala ----------
   La foto se ve completa (con el tinte leve de siempre); el panel de la sala va encima y el crédito
   de la foto queda abajo, afuera del panel, en letra pequeña. */
body.mode-room .dock { bottom: 2vh; }
body.mode-room .dock .info { display: none; }
body.mode-room .credit {
  padding: 0; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  font-size: 1.6vh; text-shadow: 0 0.2vh 1.2vh rgba(0, 0, 0, 0.75);
}
body.mode-room .credit-author { color: var(--ink); opacity: 0.85; }

.room {
  position: fixed; left: var(--gutter); right: var(--gutter); top: 17vh; bottom: calc(2vh + var(--sponsor-h) + 1.6vh);
  border-radius: 2.6vh; padding: 3vh 2.8vw; display: flex; flex-direction: column; gap: 2.2vh;
  opacity: 0; transition: opacity 0.9s ease;
}
.room[hidden] { display: none; }
/* Sin desenfoque: la foto se ve nítida detrás del panel; el tinte sube un poco para que el texto siga leyéndose */
.room.glass { background: rgba(8, 12, 18, 0.42); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.ready .room { opacity: 1; }

.room-head { display: flex; align-items: baseline; gap: 2.4vw; flex-wrap: wrap; }
.room-name { font-size: 3.2vh; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; }
.room-sub { font-size: 2vh; font-weight: 300; letter-spacing: 0.08em; color: var(--ink-soft); }
.room-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.2fr 1px 1fr; gap: 0 2.6vw; }
.room-cols .col { min-height: 0; overflow: hidden; }

.talk-title { font-size: 4.4em; font-weight: 500; line-height: 1.16; text-wrap: balance; }
.presenter { font-size: 2.8em; font-weight: 500; line-height: 1.2; }
.presenter small { font-size: 0.62em; font-weight: 300; color: var(--ink-soft); }
.meta { display: flex; align-items: center; gap: 1em; font-size: 2.2em; font-weight: 300; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.tag {
  font-size: 0.72em; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.35em 1em; border-radius: 99vh; border: 1px solid var(--glass-line); background: rgba(255, 255, 255, 0.08);
}

.queue { display: flex; flex-direction: column; gap: 1.5em; }
.day-sep { font-size: 1.7em; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft); }
.row { display: grid; grid-template-columns: 11.5em 1fr; gap: 0 0.8em; align-items: baseline; }
.row-time { font-size: 2.8em; font-weight: 300; line-height: 1.1; font-variant-numeric: tabular-nums; }
.row-body { min-width: 0; display: flex; flex-direction: column; gap: 0.25em; }
.row-title {
  font-size: 2.2em; font-weight: 500; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.row-meta { font-size: 1.7em; font-weight: 300; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* El primero de la fila es el siguiente turno: más grande */
.row.first .row-time { font-size: 3.6em; }
.row.first .row-title { font-size: 2.9em; -webkit-line-clamp: 3; }
.row.first .row-meta { font-size: 2em; }

/* ---------- Carteles (?sala=carteles): la sesión arriba y el cartel en turno en grande ---------- */
.session-name { font-size: 3em; font-weight: 500; line-height: 1.18; text-wrap: balance; }
.poster-code {
  align-self: flex-start; font-size: 2em; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.3em 0.9em; border-radius: 99vh; border: 1px solid var(--glass-line); background: rgba(255, 255, 255, 0.1);
}
.row-code { font-size: 1.9em; font-weight: 500; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.poster-list .row { grid-template-columns: 8.6em 1fr; }
.poster-list .row.dim { opacity: 0.7; }
.follows { margin-top: auto; display: flex; flex-direction: column; gap: 0.5em; padding-top: 1em; border-top: 1px solid var(--glass-line); }
.follows-name {
  font-size: 2.1em; font-weight: 500; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- Embebida como portada del sitio (?modo=portada) ----------
   En pantallas angostas (teléfono) lo único legible es la foto y el nombre: el programa y los logos se ocultan. */
@media (max-width: 720px) {
  body.mode-portada .info,
  body.mode-portada .credit,
  body.mode-portada .sponsor,
  body.mode-portada .clock-date { display: none; }
  body.mode-portada .brand-name { font-size: 4.4vh; }
  body.mode-portada .brand-sub { font-size: 3vh; }
  body.mode-portada .clock-time { font-size: 9vh; }
}