/* Criptografía: identidad "manuscrito de cifras". No carga /css/base.css (noBaseStyles): todo está acá.
   Papel liso con el mismo fondo que la documentación de Claude (casi blanco en claro, gris carbón en oscuro) y tinta casi negra; el azul de los enlaces es el único acento y el rojo queda solo para los errores. Letra sans moderna:
   Títulos en Space Grotesk, técnica y un poco mecánica, como una máquina de cifrar; texto en Hanken Grotesk.
   Elenco con color fijo, siempre acompañado del nombre: lapislázuli = Ana, cardenillo = Beto, púrpura = Eve y Mallory.
   Tokens en tres capas: primitivos (valores crudos) → semánticos (cambian con el tema) → componentes. */

/* 1. Primitivos */
:root {
  --bone-50: #FFFFFF; --bone-100: #FCFCFB; --stone-500: #8C867B;
  --ink-900: #1D1C1A; --gray-700: #52514E; --stone-600: #716C64;
  --rubric-700: #9A2A1C; --rubric-300: #E8806A;
  --lapis-700: #2E4C78; --lapis-300: #9DBAE6;
  --blue-700: #184F95; --blue-300: #6DA7EC;
  --verdigris-700: #2C6549; --verdigris-300: #86CBA8;
  --purple-700: #6B2C6E; --purple-300: #D9A0DB;
  --night-900: #151515; --night-800: #1A1A19; --night-500: #7A7872;
  --mist-100: #EEEDE8; --mist-200: #C3C2B7; --mist-300: #A3A198;
}

/* 2. Semánticos (claro) y tipografía */
:root {
  --paper: var(--bone-100); --surface: var(--bone-50); --card-border: rgb(11 11 11 / .1); --button-bg: rgb(11 11 11 / .06); --button-hover: rgb(11 11 11 / .12); --button-selected: rgb(11 11 11 / .12); --button-selected-hover: rgb(11 11 11 / .18); --ink: var(--ink-900); --text: var(--gray-700); --ink-soft: var(--stone-600);
  --rubric-text: var(--rubric-700); --link: var(--blue-700); --ana-text: var(--lapis-700); --beto-text: var(--verdigris-700); --spy-text: var(--purple-700);
  --border: var(--stone-500); --piece-border: var(--ink-900); --focus: var(--link);
  --ink-piece: var(--ink-900); --on-piece: var(--bone-50);
  /* Texto corrido como el de la documentación de Claude (su fuente es propia; Hanken Grotesk es la libre más parecida) */
  --f-text: "Hanken Grotesk", system-ui, sans-serif; --text-weight: 400; --f-title: "Space Grotesk", system-ui, sans-serif;
  --t-n1: 1rem; --t-0: 1.0546875rem; --t-1: 1.55rem; --t-2: clamp(2rem, 4.5vw, 2.6rem); --t-3: clamp(2.7rem, 8vw, 5rem);
  --measure: 52rem; --sidebar-width: 15rem; --gap: clamp(40px, 4vw, 64px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: var(--night-900); --surface: var(--night-800); --card-border: rgb(255 255 255 / .1); --button-bg: rgb(255 255 255 / .08); --button-hover: rgb(255 255 255 / .14); --button-selected: rgb(255 255 255 / .14); --button-selected-hover: rgb(255 255 255 / .2); --ink: var(--mist-100); --text: var(--mist-200); --text-weight: 360; --ink-soft: var(--mist-300);
    --rubric-text: var(--rubric-300); --link: var(--blue-300); --ana-text: var(--lapis-300); --beto-text: var(--verdigris-300); --spy-text: var(--purple-300);
    --border: var(--night-500); --piece-border: var(--mist-100); --focus: var(--link);
    --ink-piece: var(--mist-100); --on-piece: var(--night-900);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: var(--night-900); --surface: var(--night-800); --card-border: rgb(255 255 255 / .1); --button-bg: rgb(255 255 255 / .08); --button-hover: rgb(255 255 255 / .14); --button-selected: rgb(255 255 255 / .14); --button-selected-hover: rgb(255 255 255 / .2); --ink: var(--mist-100); --text: var(--mist-200); --text-weight: 360; --ink-soft: var(--mist-300);
  --rubric-text: var(--rubric-300); --link: var(--blue-300); --ana-text: var(--lapis-300); --beto-text: var(--verdigris-300); --spy-text: var(--purple-300);
  --border: var(--night-500); --piece-border: var(--mist-100); --focus: var(--link);
  --ink-piece: var(--mist-100); --on-piece: var(--night-900);
  color-scheme: dark;
}

/* 3. Componentes */
:root {
  --button-height: 40px;
}
@media (pointer: coarse) { :root { --button-height: 44px; } }
@media (min-width: 1100px) { :root { --strip-height: 0px; } }

/* Base: esta guía no carga /css/base.css, su reinicio es propio */
*, *::before, *::after { box-sizing: border-box; }
[hidden]:not([hidden=until-found i]) { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-height) + var(--strip-height) + 16px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--text); font: var(--text-weight) var(--t-0)/1.5 var(--f-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; }
h1, h2, h3, h4, .drawer > summary { font-family: var(--f-title); color: var(--ink); }
h1, h2, h3, h4 { text-wrap: balance; }
img, svg { display: block; max-width: 100%; }
/* Enlaces como en la documentación de Claude: subrayado fino al 40 % que se completa al pasar el mouse */
a { color: var(--link); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; transition: color .06s cubic-bezier(.165, .84, .44, 1), text-decoration-color .06s cubic-bezier(.165, .84, .44, 1); }
a:hover { text-decoration-color: currentColor; }
strong { font-weight: 650; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
/* Listas desplegables y campos para escribir: sin contorno al tocarlos; el borde se oscurece */
:where(select, textarea, input):focus-visible { outline: none; border-color: var(--ink); border-radius: 3px; }
main:focus { outline: none; }
button, input, select, textarea { font: inherit; font-variation-settings: inherit; color: inherit; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* Barra */
.bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; min-height: var(--bar-height); padding: 0 16px; background: var(--paper); }
/* «Volver», el foco y el botón para subir vienen de /css/common.css (fijos arriba) */

/* Página: columna con el índice (escritorio) o tira con el índice (celular, en /css/toc.css) */
.page { max-width: calc(var(--sidebar-width) + var(--gap) + var(--measure) + 32px); margin: 0 auto; padding: 0 16px; }
@media (min-width: 1100px) {
  /* El índice va contra el borde izquierdo (ver /css/toc.css) y el texto ocupa el resto, hasta su medida */
  .page { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, var(--measure)); gap: var(--gap); max-width: 1440px; margin: 0 auto; padding: 0 32px; }
}
main { padding-bottom: var(--common-page-end); min-width: 0; }

/* Rueda de César: el anillo de afuera claro y el de adentro (el que gira) entintado */
.disc { overflow: visible; }
.disc path { fill: var(--surface); stroke: var(--piece-border); stroke-width: 1.2; }
.disc text { font: 700 11px var(--f-text); fill: var(--ink); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.disc .disc-mark { fill: var(--piece-border); stroke: none; }
.disc .disc-axle { fill: var(--piece-border); }
.disc-ring { transform: rotate(var(--rotation, 0deg)); transform-box: view-box; transform-origin: 0 0; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
/* Las letras giran con su anillo pero quedan derechas, para leerlas en cualquier posición. */
.disc-ring text { transform: rotate(calc(-1 * var(--rotation, 0deg))); transform-box: fill-box; transform-origin: center; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.disc-ring--moving path { fill: var(--ink-piece); stroke: var(--surface); }
.disc-ring--moving text { fill: var(--on-piece); }

/* Portada a todo el ancho, arriba del índice y del texto (como en la guía de videojuegos); el título se descifra al cargar */
.cover { display: grid; justify-items: center; gap: 20px; text-align: center; max-width: calc(var(--sidebar-width) + var(--gap) + var(--measure) + 32px); margin: 0 auto; padding: 48px 16px 64px; }
.cover h1 { font-weight: 700; font-size: var(--t-3); line-height: 1; letter-spacing: -.015em; }
.title-cipher { display: block; min-height: 2em; }
@media (min-width: 1100px) { .title-cipher { min-height: 1em; } }
.title-letter-ciphered { color: var(--link); }
/* Con JavaScript, el título espera a estar cifrado antes de verse (y aparece igual si el script falla). */
.js .title-cipher:not([data-ready]) { animation: reveal 0s 1.5s both; }
@keyframes reveal { from { visibility: hidden; } to { visibility: visible; } }
.intro { max-width: var(--common-intro-width); font-size: var(--t-1); line-height: 1.3; color: var(--ink-soft); }

/* Anillos y secciones */
.ring { padding-top: 48px; }
/* Una sola línea: la que abre la primera parte */
#fundamentals { border-top: 2px solid var(--piece-border); }
.ring-head { margin-bottom: 8px; }
.ring-head > * + * { margin-top: 12px; }
.ring-head h2 { font-weight: 700; font-size: var(--t-2); line-height: 1.05; }
.ring-head > p { color: var(--ink-soft); }
.section { padding: 40px 0 8px; }
.section > * + * { margin-top: 1em; }
.section :where(ul, ol):not([class]) { padding-left: 1.25em; }
.section h3 { font-weight: 600; font-size: var(--t-1); line-height: 1.2; }
.note { padding: 14px 18px; background: var(--surface); border-left: 4px solid var(--piece-border); }
.source-note { font-size: var(--t-n1); line-height: 1.5; color: var(--ink-soft); }
figure.illustration svg { width: min(100%, 26rem); height: auto; }
figure.illustration figcaption { margin-top: 8px; font-size: var(--t-n1); color: var(--ink-soft); }
.illustration :where(rect, circle, path, line, polyline) { stroke: var(--piece-border); }
.illustration text { fill: var(--ink); font: 600 12px var(--f-title); }
/* Dibujo del buzón: tinta sobre papel, la llave en el verde de Beto (la clave privada es suya) */
figure.illustration svg.drawing { width: min(100%, 34rem); }
.drawing text { text-anchor: middle; dominant-baseline: central; }
.drawing .drawing-label { font-size: 14px; font-weight: 500; fill: var(--ink-soft); }
.drawing .drawing-title { font-size: 15px; font-weight: 700; }
.drawing .drawing-title--beto { fill: var(--beto-text); }
.drawing :where(rect, polygon, polyline, circle, line) { stroke: var(--piece-border); stroke-width: 1.5; stroke-linejoin: round; }
.drawing .drawing-arrow { stroke: var(--ink-soft); }
.drawing marker path { fill: none; stroke: var(--ink-soft); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mailbox .mailbox-body, .mailbox .mailbox-door { fill: var(--surface); }
.mailbox .mailbox-slot { fill: var(--ink-piece); stroke: none; }
.mailbox .mailbox-opening { fill: var(--paper); stroke-dasharray: 3 3; }
.mailbox .mailbox-lock { fill: var(--ink-piece); stroke: none; }
.mailbox .mailbox-letter { fill: var(--surface); }
.mailbox .mailbox-letter-flap { fill: none; }
.mailbox .mailbox-key { fill: none; stroke: var(--beto-text); stroke-width: 3; stroke-linecap: round; }
/* Saludo de TLS: dos actores con su línea de vida y cuatro pasos numerados entre ellos */
figure.illustration svg.tls { width: min(100%, 34rem); }
.tls text { text-anchor: middle; dominant-baseline: central; }
.tls .tls-actor { fill: var(--surface); stroke-width: 1.5; }
.tls .tls-name { font-size: 15px; font-weight: 700; }
.tls .tls-lifeline { stroke: var(--border); stroke-width: 1.5; stroke-dasharray: 4 5; }
.tls .tls-arrow { stroke-width: 1.5; }
.tls .tls-arrow--encrypted { stroke-width: 3; }
.tls marker path { fill: none; stroke: var(--piece-border); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tls .tls-step { fill: var(--ink-piece); stroke: none; }
.tls .tls-number { fill: var(--on-piece); font: 700 12px var(--f-text); }
.tls .tls-text { font-size: 14px; font-weight: 500; }
.table-scroll { max-width: 100%; overflow-x: auto; }
table { border-collapse: collapse; font-size: var(--t-n1); }
th, td { padding: 6px 10px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
th { font-weight: 700; }
caption { text-align: left; font-weight: 700; padding-bottom: 6px; }

/* Placas (demos): una hoja más clara apoyada sobre el pergamino */
/* Como las tarjetas de la documentación de Claude: borde de tinta al 10 % y esquinas de 11 px */
.demo-card { margin: 28px 0; padding: 24px; background: var(--surface); border: 1px solid var(--card-border); border-radius: 11px; }
.demo-card > * + * { margin-top: 14px; }
.demo-card h4, .demo-card h5 { font-family: var(--f-text); }
.demo-card h4 { font-weight: 700; font-size: 1.3rem; line-height: 1.25; }
.demo-card h5 { font-weight: 700; font-size: 1.1rem; }
.demo-live > * + *, .demo-static > * + * { margin-top: 14px; }
.demo-live > h5 { margin-top: 28px; }
.demo-card p .ciphertext { padding: 2px 6px; }
.instructions { color: var(--ink-soft); font-size: var(--t-n1); }
.controls { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: end; }
.controls > .field:has(input[type="range"]) { flex: 1 1 8rem; }
.field { display: grid; gap: 4px; min-width: 0; }
.field--wide { width: 100%; }
.field > label, .field-title { font-size: var(--t-n1); font-weight: 650; }
/* Botones: fondo gris muy claro que se oscurece al pasar el mouse; el principal o el activo, un gris más marcado */
.button { min-height: var(--button-height); padding: 6px 16px; background: var(--button-bg); color: var(--ink); border: 0; border-radius: 8px; font-size: 1rem; font-weight: 500; line-height: 1.25; cursor: pointer; touch-action: manipulation; }
.button:hover { background: var(--button-hover); }
.button--primary, .button[aria-pressed="true"] { background: var(--button-selected); }
.button--primary:hover, .button[aria-pressed="true"]:hover { background: var(--button-selected-hover); }
input[type="range"] { width: 100%; min-height: var(--button-height); margin: 0; accent-color: var(--ink); }
textarea, select, input[type="number"] { min-height: var(--button-height); padding: 6px 10px; background: var(--paper); border: 1.5px solid var(--border); border-radius: 3px; }
textarea { width: 100%; resize: vertical; font-family: var(--f-text); font-size: 1rem; }
[aria-invalid="true"] { border-color: var(--rubric-text); border-width: 2px; }
.ciphertext { font-family: var(--f-text); font-size: 1rem; letter-spacing: .04em; overflow-wrap: anywhere; padding: 10px 12px; background: var(--paper); border: 1px dashed var(--border); border-radius: 3px; }
.notice { font-weight: 700; color: var(--text); }
.notice:empty { display: none; }
.error { font-weight: 700; color: var(--rubric-text); }
.help { font-size: var(--t-n1); color: var(--ink-soft); }
.ana { color: var(--ana-text); font-weight: 700; }
.beto { color: var(--beto-text); font-weight: 700; }
.eve { color: var(--spy-text); font-weight: 700; }
.disc--wheel { width: min(100%, 17rem); margin: 0 auto; }

/* RSA */
.rsa-keys { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.rsa-keys dt { font-size: var(--t-n1); color: var(--ink-soft); }
.rsa-keys dd { font: 600 1.2rem/1.3 var(--f-text); }

/* Intermediario */
/* Los nodos del camino tienen borde punteado, para que no se confundan con los botones (que tienen borde lleno). */
.path { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: center; }
.node { position: relative; padding: 6px 12px; border: 1.5px dashed var(--border); border-radius: 3px; background: var(--paper); }
.node + .node::before { content: "→"; position: absolute; left: -24px; color: var(--ink-soft); }
.steps { padding-left: 1.4em; }
.steps li + li { margin-top: 4px; }
[data-result="read"] .mitm-verdict, [data-result="blocked"] .mitm-verdict { color: var(--spy-text); font-weight: 700; }
[data-result="delivered"] .mitm-verdict { color: var(--beto-text); font-weight: 700; }

/* Cuestionario, como el de ECS: preguntas numeradas, opciones como botones; la correcta en verde y la equivocada tachada en rojo */
/* Para consultar: cuestionario, glosario, aclaraciones y fuentes */
.reference { padding: 48px 0 0; --q-number-font: var(--f-title); }
.reference h2 { font-weight: 700; }
.reference .quiz-total { font-family: var(--f-title); }
.drawer > summary::after { font-family: var(--f-text); }
.clarifications, .sources { padding-left: 1.25em; }
.clarifications li + li { margin-top: 16px; }
.sources li + li { margin-top: 6px; }
/* Desplegables de consulta, como los cajones de la guía de ECS */