/* Visor de presentaciones (presentaciones/<slug>/index.html). Interfaz oscura de color fijo: colores literales, no fichas del tema. */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0;background:#000;color:#EAF1F7;font-family:"Open Sans","Segoe UI",system-ui,sans-serif;overflow:hidden;-webkit-text-size-adjust:100%;overscroll-behavior:none}
.vz__sprite{position:absolute}
.vz{position:fixed;inset:0;height:100vh;height:100dvh;background:#000;touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none}
.vz__escena{position:absolute;inset:0;display:grid;place-items:center;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.vz__marco{position:relative;aspect-ratio:16/9;width:min(100vw - env(safe-area-inset-left) - env(safe-area-inset-right),(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom))*16/9);width:min(100vw - env(safe-area-inset-left) - env(safe-area-inset-right),(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom))*16/9);background:#06121F}
.vz__laminas{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.vz__lam{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 200ms cubic-bezier(.2,0,0,1),visibility 0s linear 200ms}
.vz__lam.on{opacity:1;visibility:visible;transition:opacity 200ms cubic-bezier(.2,0,0,1)}
.vz__lam img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
/* Los botones de la lámina (enlaces) se colocan con JavaScript en porcentaje de la lámina; el área sensible mide al menos 44 px */
.vz__hot{position:absolute;display:block;border-radius:6px;outline-offset:2px;-webkit-tap-highlight-color:rgba(125,184,242,.35)}
.vz__hot::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
.vz__hot:focus-visible{outline:3px solid #FFE815}
.vz__hot:hover{background:rgba(125,184,242,.14)}

.vz__barra{position:absolute;left:0;right:0;z-index:5;display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:rgba(6,18,31,.88);transition:opacity 220ms cubic-bezier(.2,0,0,1),visibility 0s linear 0s}
.vz__barra--sup{top:0;padding-top:max(.5rem,env(safe-area-inset-top));padding-left:max(.75rem,env(safe-area-inset-left));padding-right:max(.75rem,env(safe-area-inset-right))}
.vz__barra--inf{bottom:0;justify-content:center;gap:1.5rem;padding-bottom:max(.5rem,env(safe-area-inset-bottom))}
.vz.ocultas .vz__barra{opacity:0;visibility:hidden;pointer-events:none;transition:opacity 220ms cubic-bezier(.2,0,0,1),visibility 0s linear 220ms}
.vz__titulo{flex:1 1 auto;min-width:0;margin:0;font-size:1rem;font-weight:700;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vz__estado{margin:0;font-size:.8rem;color:#9FB3C4;white-space:nowrap}
.vz__estado:empty{display:none}
.vz__cont{margin:0;min-width:5rem;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.vz__btn{position:relative;display:inline-grid;place-items:center;flex:none;width:48px;height:48px;padding:0;border:0;border-radius:8px;background:transparent;color:#EAF1F7;cursor:pointer;text-decoration:none;font:inherit;-webkit-tap-highlight-color:transparent}
.vz__btn:hover{background:rgba(234,241,247,.14)}
.vz__btn:active{background:rgba(234,241,247,.24)}
.vz__btn:focus-visible{outline:3px solid #FFE815;outline-offset:-3px}
.vz__btn[hidden]{display:none}
.vz__btn--paso{width:56px;height:48px;background:#FFE815;color:#10202B}
.vz__btn--paso:hover{background:#FFF07A}
.vz__btn--paso:disabled{opacity:.35;cursor:default}
.vz__ic{width:26px;height:26px}
.vz__btn.listo{color:#7DB8F2}
/* Nombre del botón al señalarlo o enfocarlo con teclado (en pantalla táctil no hay señalado: el nombre accesible lo dice) */
.vz__btn[data-tip]::before{content:attr(data-tip);position:absolute;top:calc(100% + 6px);right:0;z-index:9;padding:.3rem .6rem;border-radius:6px;background:#EAF1F7;color:#10202B;font-size:.8rem;font-weight:600;line-height:1.3;white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(-3px);transition:opacity 120ms cubic-bezier(.2,0,0,1),transform 120ms cubic-bezier(.2,0,0,1)}
.vz__barra--inf .vz__btn[data-tip]::before{top:auto;bottom:calc(100% + 6px);right:auto;left:50%;transform:translate(-50%,3px)}
@media (hover:hover){.vz__btn[data-tip]:hover::before{opacity:1;transform:none;transition-delay:350ms}.vz__barra--inf .vz__btn[data-tip]:hover::before{transform:translate(-50%,0)}}
.vz__btn[data-tip]:focus-visible::before{opacity:1;transform:none}.vz__barra--inf .vz__btn[data-tip]:focus-visible::before{transform:translate(-50%,0)}

.vz__progreso{position:absolute;left:0;right:0;bottom:0;height:4px;z-index:6;background:rgba(234,241,247,.18);pointer-events:none}
.vz__progreso span{display:block;height:100%;width:0;background:#FFE815;transition:width 220ms cubic-bezier(.2,0,0,1)}

.vz__indice{position:absolute;inset:0;z-index:20;overflow:auto;background:#06121F;padding:max(4.5rem,calc(env(safe-area-inset-top) + 4rem)) max(1rem,env(safe-area-inset-right)) max(1.5rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left))}
.vz__indice[hidden]{display:none}
.vz__indice-x{position:fixed;top:max(.5rem,env(safe-area-inset-top));right:max(.75rem,env(safe-area-inset-right));z-index:21}
.vz__grilla{list-style:none;margin:0 auto;padding:0;max-width:1100px;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr))}
.vz__mini{position:relative;display:block;width:100%;padding:0;border:3px solid transparent;border-radius:8px;background:#0B1D2F;overflow:hidden;cursor:pointer;color:#EAF1F7;font:inherit;text-align:left}
.vz__mini img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.vz__mini span{position:absolute;left:.4rem;bottom:.4rem;padding:.1rem .5rem;border-radius:999px;background:#06121F;font-size:.8rem;font-weight:700}
.vz__mini[aria-current="true"]{border-color:#FFE815}
.vz__mini:focus-visible{outline:3px solid #FFE815;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.vz__lam,.vz__lam.on,.vz__barra,.vz__progreso span,.vz__btn::before{transition-duration:1ms!important}}
.vz__texto{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
