/* Lo que comparten todas las páginas, se carga después de los estilos de cada una:
   «Volver» arriba a la izquierda, el foco de luz para el tema arriba a la derecha y el botón para subir abajo a la derecha.
   Tiene sus propios colores (los de la documentación de Claude) para no depender de la paleta de cada guía. */
:root {
  --common-ink: #1D1C1A; --common-gray: #716C64; --common-card: #FFFFFF;
  --common-border: rgb(11 11 11 / .1); --common-hover: rgb(11 11 11 / .05);
  --common-yellow: #FFD43B; --common-gold: #B8860B; --common-bg: #FCFCFB; --common-ink-soft: #4D4B46; --common-line: #8C867B;
  --common-button: rgb(11 11 11 / .06); --common-button-hover: rgb(11 11 11 / .12);
  --common-right: #2C6549; --common-wrong: #9A2A1C; --common-on-answer: #FFFFFF;
  /* La tipografía de «Volver» y del índice: una sola en todas las páginas (la del sistema, sin descargar nada) */
  /* El ancho del texto que va debajo del título principal: el mismo en todas las páginas */
  --common-intro-width: 46rem;
  /* El espacio que queda debajo de lo último de cada guía (el último desplegable de «Para consultar») */
  --common-page-end: 64px;
  --common-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --common-ink: #EEEDE8; --common-gray: #A3A198; --common-card: #1A1A19; --common-border: rgb(255 255 255 / .1); --common-hover: rgb(255 255 255 / .075); --common-bg: #151515; --common-ink-soft: #CFCDC5; --common-line: #7A7872; --common-button: rgb(255 255 255 / .08); --common-button-hover: rgb(255 255 255 / .14); --common-right: #86CBA8; --common-wrong: #E8806A; --common-on-answer: #151515; }
}
/* Las alturas de la barra de arriba y de la tira del índice en el celular, para todas las páginas. Van sin peso (:where)
   para que una guía las cambie en su :root aunque su hoja se cargue antes (ECS agranda la barra en el celular). */
:where(:root) { --bar-height: 64px; --strip-height: 48px; }
:root[data-theme="dark"] { --common-ink: #EEEDE8; --common-gray: #A3A198; --common-card: #1A1A19; --common-border: rgb(255 255 255 / .1); --common-hover: rgb(255 255 255 / .075); --common-bg: #151515; --common-ink-soft: #CFCDC5; --common-line: #7A7872; --common-button: rgb(255 255 255 / .08); --common-button-hover: rgb(255 255 255 / .14); --common-right: #86CBA8; --common-wrong: #E8806A; --common-on-answer: #151515; }

/* Texto solo para lectores de pantalla */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* «Saltar al contenido»: escondido arriba hasta que se llega con el teclado */
.skip { position: fixed; left: 16px; top: calc(env(safe-area-inset-top, 0px) + 10px); z-index: 100; padding: .6rem 1rem; border-radius: 10px; background: var(--common-ink); color: var(--common-bg); font-family: var(--common-font); font-weight: 700; text-decoration: none; transform: translateY(calc(-100% - 40px)); }
.skip:focus { transform: none; }
/* «Volver» arriba a la izquierda y el foco arriba a la derecha: fijos (se quedan al desplazarse) y en el mismo lugar en todas las páginas,
   centrados en los primeros 64 px de la barra. Como están fuera del flujo, la barra de cada página les deja lugar a los costados. */
.back-link, .theme-button, .brand, .site-nav { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); z-index: 35; }
.back-link, .brand { left: 16px; }
.theme-button { right: 16px; }

/* La barra de la portada, la 404 y las guías con el kit (topbar.njk) no tiene nada en el flujo: ocupa su altura arriba de la página
   y deja fija una franja con el fondo detrás de «Volver» y del foco, para que el texto no pase por debajo. Los saltos a un título
   dejan lugar para la franja. ECS y Criptografía tienen su propia barra (.bar). */
.topbar { min-height: var(--bar-height); }
.topbar::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: calc(env(safe-area-inset-top, 0px) + var(--bar-height)); background: var(--common-bg); z-index: 30; pointer-events: none; }
html:has(.topbar) { scroll-padding-top: var(--bar-height); }

/* «← Volver» */
.back-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-family: var(--common-font); font-size: 1.0625rem; font-weight: 700; color: var(--common-ink); text-decoration: none; }
.back-link svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Foco de luz: amarillo cuando está prendido (modo claro), gris cuando está apagado (modo oscuro) */
.theme-button { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; background: transparent; border: 0; color: var(--common-ink); cursor: pointer; flex: none; }
.theme-button svg { width: 28px; height: 28px; }
/* Sin JavaScript el botón queda vacío y no hace nada: se esconde y el tema sigue al del sistema */
html:not(.js) .theme-button { display: none; }
.bulb path { fill: none; stroke: var(--common-gray); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bulb--on path { stroke: var(--common-gold); }
.bulb--on .bulb-glass { fill: var(--common-yellow); }

/* Volver arriba: abajo a la derecha, aparece al bajar (sin JavaScript queda siempre a la vista) */
.to-top { position: fixed; right: 24px; bottom: 24px; z-index: 30; display: grid; place-items: center; width: 48px; height: 48px; background: var(--common-card); color: var(--common-ink); border: 1px solid var(--common-border); border-radius: 8px; box-shadow: 0 2px 8px rgb(0 0 0 / .08); transition: opacity .2s, visibility .2s; }
.to-top:hover { background: var(--common-hover); color: var(--common-ink); text-decoration: none; }
.to-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.js .to-top:not(.to-top--visible) { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* Lo que necesita JavaScript (el cuestionario) se esconde sin él, y su aviso se esconde con él */
.js .no-js-only, html:not(.js) .js-only { display: none !important; }

/* Para consultar: el contorno, el + y − y los tamaños de letra son los mismos en todas las guías (el contorno y el signo, como en
   Criptografía); cada guía solo pone sus tipografías. */
.reference { display: grid; gap: 16px; font-size: 1.0625rem; }
.reference > h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); }
.drawer { background: var(--common-card); border: 2px solid var(--common-ink); border-radius: 14px; }
.drawer > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 12px 20px; list-style: none; cursor: pointer; font-weight: 700; font-size: 1.15rem; }
.drawer > summary::-webkit-details-marker { display: none; }
.drawer > summary::after { content: "+"; font-size: 1.4rem; font-weight: 600; line-height: 1; color: var(--common-ink); }
.drawer[open] > summary { border-bottom: 1.5px solid var(--common-ink); }
.drawer[open] > summary::after { content: "−"; }
.drawer-body { display: grid; gap: 14px; padding: 16px 20px 20px; }
.drawer-body > * { margin: 0; min-width: 0; }
.reference .glossary dd, .reference .q-why, .reference .q-opt { font-size: .95rem; }

/* Glosario y cuestionario de «Para consultar»: la misma estructura en todas las guías. El cuestionario toma el aspecto del de
   Criptografía; una guía con otro estilo (ECS) cambia las variables --q-* de .reference en su hoja. */
.reference .glossary { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 0 28px; }
.reference .glossary div { padding: 10px 0; border-bottom: 1px solid var(--common-border); }
.reference .glossary dt { font-weight: 700; }
.reference .glossary dd { margin: 2px 0 0; color: var(--common-gray); }
.reference .quiz { display: grid; gap: 22px; counter-reset: q; }
.reference .q { display: grid; gap: 10px; counter-increment: q; }
.reference .q-text, .reference .q-why { margin: 0; }
.reference .q-text { font-weight: 700; }
.reference .q-text::before { content: counter(q) ". "; color: var(--q-number, var(--common-gray)); font-family: var(--q-number-font, inherit); }
.reference .q-options { display: flex; flex-wrap: wrap; gap: 10px; }
.reference .q-opt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: .3rem .75rem; background: var(--q-bg, var(--common-button)); color: var(--q-ink, var(--common-ink)); border: var(--q-border, 0); border-radius: var(--q-radius, 8px); box-shadow: var(--q-shadow, none); font-family: var(--q-family, inherit); font-weight: var(--q-weight, 500); line-height: 1.25; cursor: pointer; touch-action: manipulation; }
.reference .q-opt:hover { background: var(--q-bg-hover, var(--common-button-hover)); }
.reference .q-opt[aria-disabled="true"] { cursor: default; }
.reference .q-opt[aria-disabled="true"]:hover { background: var(--q-bg, var(--common-button)); }
.reference .q-opt.right, .reference .q-opt.right:hover { background: var(--q-right, var(--common-right)); color: var(--q-on-answer, var(--common-on-answer)); }
.reference .q-opt.wrong, .reference .q-opt.wrong:hover { background: var(--q-wrong, var(--common-wrong)); color: var(--q-on-answer, var(--common-on-answer)); text-decoration: line-through; }
.reference .q-why { color: var(--common-gray); }
.reference .q-verdict { font-weight: 700; }
.reference .quiz-total { font-size: 1.1rem; font-weight: 700; }
.reference .quiz-total:empty { display: none; }
@media (pointer: coarse) { .reference .q-opt { min-height: 44px; } }