/* ============================================================
   MEM · Shell compartido
   Tokens de diseño + cabecera + navegación + pie.
   Seguro de cargar en cualquier página: no define reglas sobre
   `body`, `table`, `th`, `td` ni otros elementos que las fichas
   de curso ya estilizan por su cuenta.
   ============================================================ */

:root{
  --navy:#082c4c;
  --blue:#0c4f83;
  --blue2:#176fa9;
  --sky:#edf6fb;
  --mint:#dff3ec;
  --green:#19725a;
  --amber:#48a9d4;
  --amber-soft:#e6f5fb;
  --ink:#183143;
  --muted:#597080;
  --line:#d7e3ea;
  --paper:#fff;
  --bg:#f4f8fb;
  --radius:18px;
  --shadow:0 12px 34px rgba(8,44,76,.09);
  --font-body:"Aptos","Segoe UI Variable Text","Segoe UI",Arial,sans-serif;
  --font-display:"Aptos Display","Segoe UI Variable Display","Aptos","Segoe UI",Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

/* Salto al contenido, para navegación por teclado */
.skip{position:absolute;left:-9999px;top:10px;background:#fff;padding:10px 14px;border-radius:8px;z-index:200}
.skip:focus{left:10px}

/* --- Cabecera --- */
header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
.topbar{max-width:1180px;margin:auto;min-height:72px;padding:8px 24px;display:flex;align-items:center;gap:24px}
.brand{text-decoration:none;display:flex;align-items:center;gap:12px;color:var(--navy)}
.brand-logo{width:54px;height:54px;object-fit:contain;display:block;flex:0 0 54px}
.brand small{display:block;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.brand strong{font-family:var(--font-display);font-weight:750;font-size:15px}

nav{margin-left:auto;display:flex;align-items:center;gap:4px}
nav a,.nav-button{border:0;background:transparent;text-decoration:none;color:var(--muted);font-family:var(--font-body);font-size:13px;font-weight:750;padding:9px 11px;border-radius:10px;cursor:pointer}
nav a:hover,.nav-button:hover{background:var(--sky);color:var(--blue)}
nav a[aria-current="page"]{background:var(--sky);color:var(--blue)}

/* --- Pie --- */
footer{background:var(--navy);color:#bdd5e3;padding:28px 24px;font-family:var(--font-body);font-size:12px}
.footer-inner{max-width:1180px;margin:auto;display:flex;justify-content:space-between;gap:30px}
footer strong{color:#fff}
footer a{color:#9ed0e9}

@media(max-width:640px){
  /* La navegación se conserva: en un sitio multipágina estos enlaces son
     la única forma de moverse entre las páginas. Pasa a una segunda fila. */
  .topbar{padding:8px 14px;min-height:0;flex-wrap:wrap;gap:6px 12px}
  .brand-logo{width:40px;height:40px;flex-basis:40px}
  .brand small{display:none}
  .brand strong{font-size:13px}
  nav{margin-left:0;width:100%;gap:2px;border-top:1px solid var(--line);padding-top:6px;overflow-x:auto}
  nav a,.nav-button{font-size:12px;padding:7px 9px;white-space:nowrap}
  .footer-inner{display:block}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
}
@media print{
  header,.skip{display:none!important}
  footer{background:#fff;color:#333;border-top:1px solid #999}
  footer strong{color:#000}
}