/* ============================================================
   GestCampus · Capa de diseño compartida
   Aditiva: SOLO estilos nuevos (skip-link, hamburguesa, scrim,
   drawer móvil y pulido). No redefine la paleta de cada página,
   así no hay conflictos de cascada con sus <style> en línea.
   ============================================================ */
:root{
  --ease:cubic-bezier(.4,0,.2,1);
  --z-skip:200; --z-drawer:70; --z-scrim:60;
  --maxw:1280px;            /* ancho de contenido en páginas-documento */
}

/* Reset mínimo transversal (algunas páginas no fijaban el margen del body,
   lo que rompía el full-bleed al quitar el max-width del documento). */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ margin:0; }

/* ---- Accesibilidad: saltar al contenido ---- */
.skip-link{
  position:fixed; top:.6rem; left:.6rem; z-index:var(--z-skip);
  background:#2563EB; color:#fff;
  font:600 .9rem/1 "Inter","Segoe UI",system-ui,sans-serif;
  padding:.7rem 1rem; border-radius:10px; text-decoration:none;
  transform:translateY(-160%); transition:transform .18s var(--ease);
  box-shadow:0 10px 30px rgba(4,18,46,.35);
}
.skip-link:focus{ transform:none; outline:2px solid #2563EB; outline-offset:2px; }

/* ---- Botón hamburguesa (topbar oscura) ---- */
.nav-toggle{
  --bar:#fff;
  display:none; align-items:center; justify-content:center;
  width:2.35rem; height:2.35rem; flex:none; padding:0;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  border-radius:10px; cursor:pointer;
}
.nav-toggle:hover{ background:rgba(255,255,255,.16); }
.nav-toggle:focus-visible{ outline:2px solid #2563EB; outline-offset:2px; }
.nav-toggle .bars,
.nav-toggle .bars::before,
.nav-toggle .bars::after{
  content:""; display:block; width:18px; height:2px; border-radius:2px;
  background:var(--bar);
  transition:transform .25s var(--ease), opacity .2s var(--ease), background .2s var(--ease);
}
.nav-toggle .bars{ position:relative; }
.nav-toggle .bars::before{ position:absolute; left:0; top:-6px; }
.nav-toggle .bars::after{ position:absolute; left:0; top:6px; }
body.drawer-open .nav-toggle .bars{ background:transparent; }
body.drawer-open .nav-toggle .bars::before{ transform:translateY(6px) rotate(45deg); }
body.drawer-open .nav-toggle .bars::after{ transform:translateY(-6px) rotate(-45deg); }

/* ---- Velo (scrim) tras el drawer ---- */
.scrim{
  position:fixed; inset:0; z-index:var(--z-scrim); border:0;
  background:rgba(4,18,46,.5); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden;
  transition:opacity .25s var(--ease), visibility .25s var(--ease);
}
body.drawer-open .scrim{ opacity:1; visibility:visible; }
body.drawer-open{ overflow:hidden; }

/* La hamburguesa se muestra cuando el layout de app colapsa.
   El desplazamiento off-canvas del propio sidebar se define en
   cada página (dentro de su media query) porque su posición de
   escritorio es distinta. */
@media(max-width:900px){
  .nav-toggle{ display:inline-flex; }
}

/* ---- Pulido transversal ---- */
::selection{ background:#2563EB; color:#fff; }

@media(pointer:fine){
  *{ scrollbar-width:thin; scrollbar-color:#c3ccdd transparent; }
  *::-webkit-scrollbar{ width:10px; height:10px; }
  *::-webkit-scrollbar-track{ background:transparent; }
  *::-webkit-scrollbar-thumb{
    background:#c3ccdd; border-radius:99px;
    border:2px solid transparent; background-clip:content-box;
  }
  *::-webkit-scrollbar-thumb:hover{ background:#9AA6C0; background-clip:content-box; }
}

@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .skip-link,.scrim,
  .nav-toggle .bars,
  .nav-toggle .bars::before,
  .nav-toggle .bars::after{ transition:none; }
}

@media print{
  .nav-toggle,.scrim,.skip-link,.drawer-close{ display:none !important; }
  /* En las apps (campus/panel) se imprime solo la vista activa, sin el cromo:
     útil sobre todo para el certificado. */
  .top,.side{ display:none !important; }
  .shell{ display:block !important; }
  .main{ padding:0 !important; max-width:none !important; }
  .view{ display:none !important; }
  .view.on{ display:block !important; max-width:none !important; margin:0 !important; }
}

/* Destinos del skip-link: focalizables (tabindex=-1) y sin quedar bajo la topbar sticky. */
#explora,#contenido,#lectura,#panel-main{ scroll-margin-top:4.5rem; }
#explora:focus,#contenido:focus,#lectura:focus,#panel-main:focus{ outline:none; }

/* ---- Botón de cierre dentro del drawer (solo móvil) ---- */
.drawer-close{ display:none; }
@media(max-width:900px){
  .drawer-close{
    display:inline-flex; align-items:center; justify-content:center;
    position:absolute; top:.55rem; right:.55rem; width:2rem; height:2rem; z-index:2;
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
    color:#fff; border-radius:8px; font-size:1.35rem; line-height:1; cursor:pointer;
  }
  .drawer-close:hover{ background:rgba(255,255,255,.2); }
  .drawer-close:focus-visible{ outline:2px solid #2563EB; outline-offset:2px; }
}

/* ---- Utilidades ---- */
@media(max-width:560px){
  .u-hide-sm{ display:none !important; }
  /* Declutter de la topbar en móviles pequeños: el badge de título del logo. */
  .logo .for{ display:none; }
}