/* ============================================================
   Paquete 18 · ESCENARIO (charlas y piezas en beats)
   ------------------------------------------------------------
   El estilo de una charla en beats, dentro del sistema: un lienzo 16:9, una
   escala de texto de escenario, nodos con enlaces para los diagramas y un marco
   para el QR de cierre. Nace del deck de Borja (beatdeck, MIT) traído a Aurora.

   Reglas (las mismas que el resto del sistema):
   - Todo lo público vive bajo `.nz-` y usa tokens; cero literales, cero glass,
     cero gradientes, cero !important.
   - Cada familia nace con su demo en specs/18.json (CSS sin demostrar es deuda).
   - Mobile-first: en móvil el escenario es una columna legible; el lienzo 16:9
     entra a partir de 960 px.
   - Una familia, un pack: aquí solo vive lo que es escenario.

   Hecho con ❤️ por David Antizar
   ============================================================ */

/* ---- 01 Lienzo: el escenario ---- */
.nz-escenario {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--nz-space-6);
  padding: var(--nz-space-6);
  background: var(--nz-bg);
  color: var(--nz-text);
  border: var(--nz-border-w) solid var(--nz-border-soft);
  border-radius: var(--nz-radius-lg);
}
@media (min-width: 960px) {
  .nz-escenario--lienzo {
    aspect-ratio: 16 / 9;
    gap: var(--nz-space-10);
    padding: var(--nz-space-12);
    overflow: hidden;
  }
}
.nz-escenario__cuerpo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--nz-space-6);
  flex: 1;
  min-width: 0;
}
.nz-escenario__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--nz-space-3);
}
.nz-escenario__marca {
  font-family: var(--nz-font-mono);
  font-size: var(--nz-text-2xs);
  letter-spacing: var(--nz-tracking-caps);
  text-transform: uppercase;
  color: var(--nz-text-mute);
}
.nz-escenario--profundo {
  /* Un escenario profundo no depende del tema: redefine los tokens de texto
     para que el contraste sea correcto también en light. */
  --nz-text: var(--nz-gray-0);
  --nz-text-soft: var(--nz-gray-300);
  --nz-text-mute: var(--nz-gray-400);
  --nz-text-faint: var(--nz-gray-500);
  --nz-border-soft: var(--nz-gray-800);
  --nz-border: var(--nz-gray-700);
  --nz-surface: var(--nz-gray-900);
  --nz-bg-soft: var(--nz-gray-900);
  background: var(--nz-gray-950);
  border-color: var(--nz-gray-800);
  color: var(--nz-gray-0);
}
.nz-escenario--profundo .nz-escenario__marca {
  color: var(--nz-gray-400);
}

/* ---- 02 Roles de texto del escenario ---- */
.nz-esc-titular {
  font-family: var(--nz-font-titulo);
  font-size: var(--nz-esc-titular);
  font-weight: var(--nz-peso-titulo);
  line-height: var(--nz-leading-tight);
  letter-spacing: var(--nz-tracking-tight);
  text-wrap: balance;
  margin: 0;
}
.nz-esc-editorial {
  font-family: var(--nz-font);
  font-size: var(--nz-esc-editorial);
  font-weight: var(--nz-peso-normal);   /* era 300: la variable se sirve 400-700 */
  line-height: var(--nz-leading-snug);
  letter-spacing: var(--nz-tracking-tight);
  text-wrap: pretty;
  max-width: 36ch;
  margin: 0;
}
.nz-esc-numeral {
  font-family: var(--nz-font-titulo);
  font-size: var(--nz-esc-numeral);
  font-weight: var(--nz-peso-titulo);
  line-height: var(--nz-leading-tight);
  letter-spacing: var(--nz-tracking-tight);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.nz-esc-etiqueta {
  font-family: var(--nz-font-mono);
  font-size: var(--nz-esc-etiqueta);
  font-weight: var(--nz-peso-fuerte);
  letter-spacing: var(--nz-tracking-caps);
  text-transform: uppercase;
  color: var(--nz-text-mute);
  margin: 0;
}
.nz-esc-dato {
  font-size: var(--nz-esc-dato);
  line-height: var(--nz-leading-snug);
  color: var(--nz-text-soft);
  max-width: 52ch;
  margin: 0;
}
.nz-esc-titular--brand,
.nz-esc-editorial--brand,
.nz-esc-numeral--brand {
  color: var(--nz-brand-strong);
}
.nz-esc-titular--accent,
.nz-esc-editorial--accent,
.nz-esc-numeral--accent,
.nz-esc-etiqueta--accent {
  color: var(--nz-accent-strong);
}
.nz-esc-titular--muted,
.nz-esc-editorial--muted {
  color: var(--nz-text-mute);
}

/* ---- 03 Nodos y enlaces: el diagrama que se construye ---- */
.nz-nodo {
  display: flex;
  flex-direction: column;
  gap: var(--nz-space-1);
  padding: var(--nz-space-4);
  background: var(--nz-surface);
  border: var(--nz-border-w) solid var(--nz-border-strong);
  border-radius: var(--nz-radius-md);
  min-width: 0;
}
.nz-nodo__tipo {
  font-family: var(--nz-font-mono);
  font-size: var(--nz-text-2xs);
  letter-spacing: var(--nz-tracking-caps);
  text-transform: uppercase;
  color: var(--nz-text-mute);
}
.nz-nodo__valor {
  font-size: var(--nz-text-lg);
  font-weight: var(--nz-peso-fuerte);
  color: var(--nz-text);
}
.nz-nodo--acento {
  border-color: var(--nz-accent);
}
.nz-nodo--apagado {
  opacity: 0.4;
}
.nz-enlace {
  display: block;
  position: relative;
  height: var(--nz-border-w);
  background: var(--nz-border-strong);
  margin-block: var(--nz-space-4);
}
.nz-enlace--acento {
  background: var(--nz-accent);
}
.nz-enlace__punta {
  position: absolute;
  top: 50%;
  right: calc(-1 * var(--nz-space-1));
  width: var(--nz-space-2);
  height: var(--nz-space-2);
  border-top: var(--nz-border-w) solid var(--nz-border-strong);
  border-right: var(--nz-border-w) solid var(--nz-border-strong);
  transform: translateY(-50%) rotate(45deg);
}
.nz-enlace--acento .nz-enlace__punta {
  border-color: var(--nz-accent);
}

/* ---- 05 Recorrido: la charla entera, sin una línea de JS ---- */
/* Un `.nz-recorrido` agrupa beats con `id`. Si el navegador soporta `:has()`,
   se enseña UN beat cada vez y manda la URL (`#b06`); las flechas del navegador
   recorren la charla. Si no lo soporta, no se esconde nada y la página se lee
   entera de arriba abajo: el contenido nunca queda inalcanzable. */
.nz-recorrido {
  display: flex;
  flex-direction: column;
  gap: var(--nz-space-6);
  min-width: 0;
}
.nz-recorrido__beat {
  display: flex;
  flex-direction: column;
  gap: var(--nz-space-4);
  min-width: 0;
  scroll-margin-block-start: var(--nz-space-6);
}
@supports selector(:has(*)) {
  /* con un beat apuntado, se ve solo ese */
  .nz-recorrido:has(.nz-recorrido__beat:target) .nz-recorrido__beat:not(:target) {
    display: none;
  }
  /* sin nada apuntado, la charla abre por el primer beat */
  .nz-recorrido:not(:has(.nz-recorrido__beat:target)) .nz-recorrido__beat:not(:first-child) {
    display: none;
  }
}

/* ---- 06 Presentación: el deck a pantalla completa (modo charla) ----
   La página entera es la presentación: cada slide ocupa el viewport completo
   y el navegador salta de uno en uno con rueda, swype o las anclas de la barra.
   Cero JS: el snap lo hace el navegador y sin él las slides se apilan legibles.
   La barra de la portada va DENTRO de la primera slide: no tapa ningún snap.
   Dos vías de declaración, ninguna por casualidad: (a) el deck estático que
   es hijo directo de <body> manda su página; (b) el runtime de OpenUI marca
   <html> con data-nz-presentacion al pintar un Presentacion, sin depender de
   dónde inserte el marcado. Así una demo de presentación suelta dentro del
   catálogo no secuestra el scroll de su propia página. */
html[data-nz-presentacion] {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}
/* La barra en modo deck (fixed, sin flujo) vive en SU pack: p2-navigation,
   sección 07 — aquí solo manda el snap del deck. */
@supports selector(:has(*)) {
  html:has(> body > .nz-presentacion) {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
  }
}
.nz-presentacion {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.nz-escenario--pantalla {
  min-height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  justify-content: center;
  border: 0;
  border-radius: 0;
}
@media (min-width: 960px) {
  .nz-escenario--pantalla { gap: var(--nz-space-8); padding-inline: var(--nz-gutter); }
}
/* Barra de slide: posición (contador) y movimiento (anclas con destino real).
   El contador se escribe en cada slide — sin JS no hay «actual» dinámico y el
   contenido nunca miente: el que compone el deck pone su número. */
.nz-esc-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--nz-space-3);
  width: 100%;
  margin-top: auto;   /* anclado al pie de la slide, aunque el cuerpo crezca */
}
.nz-esc-nav__contador {
  font-family: var(--nz-font-mono);
  font-size: var(--nz-text-2xs);
  letter-spacing: var(--nz-tracking-caps);
  text-transform: uppercase;
  color: var(--nz-text-mute);
}
.nz-esc-nav__enlace {
  display: inline-flex;
  align-items: center;
  gap: var(--nz-space-2);
  min-height: var(--nz-tactil);
  padding: 0 var(--nz-space-3);
  background: var(--nz-surface);
  border: var(--nz-border-w) solid var(--nz-border);
  color: var(--nz-text);
  font-size: var(--nz-text-sm);
  font-weight: var(--nz-peso-fuerte);
  text-decoration: none;
}
.nz-esc-nav__enlace:hover { background: var(--nz-bg-inset); }
.nz-esc-nav__enlace--final { background: var(--nz-brand); border-color: var(--nz-brand); color: var(--nz-text-invert); }
.nz-esc-nav__enlace--final:hover { background: var(--nz-brand-strong); border-color: var(--nz-brand-strong); }

/* ---- 04 QR de cierre ---- */
.nz-qr {
  display: flex;
  flex-direction: column;
  gap: var(--nz-space-3);
  align-items: flex-start;
}
.nz-qr__marco {
  display: block;
  width: var(--nz-esc-qr);
  height: var(--nz-esc-qr);
  padding: var(--nz-space-3);
  background: var(--nz-gray-0);
  border-radius: var(--nz-radius-md);
}
.nz-qr__marco svg,
.nz-qr__marco img {
  display: block;
  width: 100%;
  height: 100%;
}
.nz-qr__marco svg {
  color: var(--nz-gray-950);
}
.nz-qr__pie {
  font-family: var(--nz-font-mono);
  font-size: var(--nz-text-2xs);
  letter-spacing: var(--nz-tracking-caps);
  text-transform: uppercase;
  color: var(--nz-text-mute);
}