/* Chasis del deck: navegación, transiciones, HUD del presentador.
   El aspecto de cada slide vive en slides.css. */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    /* Negro fuera del escenario: son las barras del letterbox. */
    background: #000;
    color: var(--paper);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

body {
    display: grid;
    place-items: center;
    cursor: default;
}

body.is-idle {
    cursor: none;
}

/* EL ESCENARIO — siempre 16:9.
   Se encaja dentro de la ventana y sobra negro arriba/abajo o a los lados.
   No es capricho: garantiza que lo que se ve al diseñar es exactamente lo
   que sale por el proyector del auditorio, sea cual sea la resolución del
   equipo que toque usar.

   `container-type: size` es la pieza clave: convierte el escenario en un
   contenedor de consulta, de modo que dentro se puede medir en `cqw`/`cqh`
   —porcentajes DEL ESCENARIO— en vez de `vw`/`vh`, que medirían la ventana
   e ignorarían las barras. Por eso en todo el deck no debe quedar ni un
   `vw` ni un `vh`. */
#deck {
    position: relative;
    width: min(100vw, calc(100dvh * 16 / 9));
    height: min(100dvh, calc(100vw * 9 / 16));
    container-type: size;
    overflow: hidden;
    background: var(--bg-near-black);
}

.slide {
    position: absolute;
    inset: 0;
    display: none;
    padding: var(--pad-slide);
    opacity: 0;
    transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}

.slide.is-mounted {
    display: grid;
}

.slide.is-active {
    opacity: 1;
    transform: none;
    z-index: 2;
}

.slide.is-leaving {
    opacity: 0;
    z-index: 1;
    pointer-events: none;
}

/* Dirección de la transición: avanzar empuja hacia arriba, retroceder hacia abajo. */
.slide.enter-forward {
    transform: translateY(2.5rem);
}

.slide.enter-backward {
    transform: translateY(-2.5rem);
}

/* --- HUD del presentador --------------------------------------------- */

.hud {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 1.1rem;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: var(--paper-mute);
    background: linear-gradient(to top, rgba(5, 20, 31, 0.92), transparent);
    opacity: 0;
    transition: opacity 200ms var(--ease-out);
    pointer-events: none;
}

.hud.is-visible {
    opacity: 1;
}

.hud__spacer {
    flex: 1;
}

.hud__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
}

.hud__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--paper-mute);
}

.hud__dot[data-state='ok'] {
    background: var(--good);
    box-shadow: 0 0 0.5rem var(--good);
}

.hud__dot[data-state='warn'] {
    background: var(--alert);
}

.hud__dot[data-state='off'] {
    background: #47606f;
}

/* Barra de progreso de tiempo: la charla dura 20 minutos exactos. */
.timebar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 60;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    opacity: 0;
    transition: opacity 200ms var(--ease-out);
}

.timebar.is-visible {
    opacity: 1;
}

.timebar__fill {
    height: 100%;
    width: 0;
    background: var(--accent);
    transition: width 1s linear;
}

.timebar__fill[data-over='true'] {
    background: var(--alert);
}

/* --- Utilidades compartidas ------------------------------------------ */

.u-hide {
    display: none !important;
}

.kicker {
    font-family: var(--font-display);
    font-size: var(--fs-note);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
}

.slide h1,
.slide h2,
.slide h3 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    margin: 0;
    text-wrap: balance;
}

/* Ojo con la especificidad: `.slide p` es (0,1,1) y le gana a cualquier
   clase de componente (0,1,0). Por eso aquí NO se fija ni tamaño ni color —
   solo lo estructural. El tamaño base se hereda de `.slide` y el color del
   registro (papel/pantalla); así una clase como `.cover__lead` puede
   sobrescribirlos sin pelear a golpe de `!important`. */
.slide {
    font-size: var(--fs-body);
}

.slide p {
    margin: 0;
    line-height: var(--lh-snug);
    text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
    .slide,
    .timebar__fill {
        transition: none;
    }
}