/* Notas · pabloduque.dev
   Misma estética que la portada (tokens copiados de index.html). Sin dependencias.
   Idioma: cada texto va dos veces, con data-l="es" y data-l="en"; html[data-lang] decide cuál se ve.
   Tema: html[data-theme="light"|"dark"], lo fija /theme.js antes de pintar; paleta clara igual a /lab/lab.css.
   --lime es el color de marca (fondos); --lime-ink es el de texto y bordes finos, legible en los dos temas. */
:root{
  --bg:#0b0d11;--s1:#10141a;--s2:#0e1116;--s3:#13181f;--ink:#eceef1;--ink2:#cbd1d7;--ink3:#8f99a3;
  --line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.15);
  --lime:#c3e65f;--lime-ink:#c3e65f;--on-lime:#0b0d11;--blue:#86b8e8;--red:#ef7a62;
  --nav:rgba(11,13,17,.84);--muted:#a9b1ba;--code:#d6dbe0;--code-bg:rgba(255,255,255,.06);
  --sans:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --pad:clamp(16px,5vw,72px);--col:700px;color-scheme:dark
}
@supports (color:oklch(0.5 0.1 100)){:root{--lime:oklch(0.86 0.16 128);--lime-ink:oklch(0.86 0.16 128);--blue:oklch(0.78 0.11 230);--red:oklch(0.72 0.19 28)}}
/* Claro: «papel + resaltador lima + tinta». Sobre papel el lima como texto se vuelve oliva turbio, así que aquí
   el lima solo rellena y resalta (--marker), y el acento de texto es un verde más limpio (--lime-ink, 6,6:1 sobre --bg).
   Los grises de texto llevan el matiz oliva del papel (oklch C ~0,010, H ~125) en vez de azul-gris; mismos valores
   que el resto del sitio en claro. Contraste WCAG 2 / APCA Lc sobre --bg: --prose 12,6 / 95, --ink2 10,5 / 91,
   --muted 8,0 / 84, --ink3 6,7 / 80, --lime-ink 6,6 / 80, --red 6,7 / 78. */
html[data-theme="light"]{
  --bg:#f6f7f3;--s1:#ffffff;--s2:#eef0ea;--s3:#e7eae2;--ink:#14171c;--ink2:#393b36;--ink3:#555852;--prose:#2d2f29;
  --line:rgba(12,16,22,.10);--line2:rgba(12,16,22,.20);
  --lime:#c3e65f;--lime-ink:#3c6200;--on-lime:#0b0d11;--blue:#1b5a93;--red:#a9221d;
  --marker:rgba(195,230,95,.7);--lime-edge:rgba(60,98,0,.42);
  /* sombras del matiz del papel, más oscuras y menos saturadas, en capas y con la luz desde arriba */
  --shadow-rgb:43 48 37;--card-line:rgba(12,16,22,.09);
  --card-shadow:0 1px 1px rgb(var(--shadow-rgb)/.05),0 2px 4px -2px rgb(var(--shadow-rgb)/.06),0 10px 24px -16px rgb(var(--shadow-rgb)/.20);
  --nav:rgba(246,247,243,.86);--muted:#4a4d47;--code:#282a24;--code-bg:rgba(12,16,22,.06);color-scheme:light
}

/* idioma */
html[data-lang="es"] [data-l="en"],html[data-lang="en"] [data-l="es"]{display:none!important}

*,*::before,*::after{box-sizing:border-box}
/* La barra fija mide 57 px (+ el recorte superior del iPhone): sin este margen, al retroceder con Shift+Tab
   el elemento enfocado queda debajo de ella (WCAG 2.4.11). 72 px deja ver también el anillo de foco. */
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(72px + env(safe-area-inset-top,0px))}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--lime-ink);outline-offset:3px;border-radius:6px}
::selection{background:var(--lime);color:var(--on-lime)}
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:var(--lime);color:var(--on-lime);padding:8px 12px;border-radius:6px;text-decoration:none}
.skip:focus{left:8px}

/* barra superior */
.nav{position:sticky;top:0;z-index:20;background:var(--nav);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.nav-in{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px var(--pad)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;letter-spacing:-.01em;white-space:nowrap;text-decoration:none}
.brand i{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--lime);color:var(--on-lime);font-style:normal;font-size:12px;font-weight:800}
.nav-act{display:flex;gap:8px;align-items:center;font-family:var(--mono);font-size:12px}
.nav-act a{padding:8px 11px;border-radius:6px;color:var(--muted);text-decoration:none;white-space:nowrap}
.nav-act a:hover{color:var(--ink)}
.lang{display:flex;border:1px solid var(--line2);border-radius:6px;overflow:hidden;background:none;padding:0;font-family:var(--mono);font-size:12px}
.lang span{padding:7px 9px;color:var(--muted)}
.lang span.on{background:var(--ink);color:var(--bg)}
/* botón de tema: muestra el tema al que cambia (☀ en oscuro, ☾ en claro); el glifo lo decide el CSS, sin esperar al JS */
.theme{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line2);border-radius:6px;background:none;padding:0;font-size:15px;line-height:1;color:var(--ink2)}
.theme .to-dark{font-size:18px}
.theme:hover{color:var(--ink);border-color:var(--ink3)}
html[data-theme="light"] .theme .to-light,html:not([data-theme="light"]) .theme .to-dark{display:none}
@media (max-width:520px){.brand span{display:none}.nav-act .hide-s{display:none}}

/* artículo */
.wrap{padding:clamp(36px,6vw,80px) var(--pad) 0}
.note{max-width:var(--col);margin:0 auto}
.back{display:inline-block;font-family:var(--mono);font-size:12px;color:var(--ink3);text-decoration:none;margin-bottom:28px}
.back:hover{color:var(--lime-ink)}
.meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-family:var(--mono);font-size:12px;color:var(--ink3);margin-bottom:16px}
.meta .k{color:var(--lime-ink)}
h1{margin:0;font-weight:700;font-size:clamp(34px,5.6vw,60px);line-height:1;letter-spacing:-.04em;text-wrap:balance}
.dek{margin:16px 0 0;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(21px,2.4vw,27px);line-height:1.3;letter-spacing:-.01em;color:var(--lime-ink);text-wrap:balance}

/* cifras de la nota */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:36px 0 28px;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.stat{padding:16px 12px 16px 0}
.stat+.stat{padding-left:14px;border-left:1px solid var(--line)}
.stat b{display:block;font-size:clamp(24px,3.4vw,36px);font-weight:700;letter-spacing:-.035em;line-height:1.05;font-variant-numeric:tabular-nums}
.stat b.bad{color:var(--red)}
.stat b.good{color:var(--lime-ink)}
.stat>span{display:block;margin-top:8px;font-size:13px;line-height:1.4;color:var(--muted)}
@media (max-width:560px){.stats{grid-template-columns:minmax(0,1fr)}.stat,.stat+.stat{padding:14px 0;border-left:0}.stat+.stat{border-top:1px solid var(--line)}}

/* cuerpo */
.body{font-family:var(--serif);font-size:clamp(18px,1.6vw,20px);line-height:1.68;color:var(--ink2)}
.body p{margin:0 0 1.05em;text-wrap:pretty}
.nw{white-space:nowrap}
.body h2{margin:2.1em 0 .6em;font-family:var(--sans);font-size:clamp(22px,2.4vw,27px);font-weight:700;line-height:1.15;letter-spacing:-.025em;color:var(--ink)}
/* Newsreader solo está autoalojada en 400 (normal e itálica): las negritas van en la sans, que sí tiene 300–800,
   en vez de una negrita sintética del navegador. */
.body strong{font-family:var(--sans);font-size:.92em;font-weight:650;letter-spacing:-.005em;color:var(--ink)}
.body em{color:var(--ink)}
.body a{color:var(--lime-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.body code{font-family:var(--mono);font-size:.8em;padding:1px 5px;border-radius:4px;background:var(--code-bg);color:var(--code);overflow-wrap:anywhere}
.body ul,.body ol{margin:0 0 1.05em;padding-left:1.3em}
.body li{margin:.35em 0}
.body li::marker{color:var(--ink3)}
.body blockquote{margin:1.4em 0;padding:2px 0 2px 18px;border-left:2px solid var(--lime-ink);font-style:italic;color:var(--ink)}
.body .aside{margin:1.4em 0;padding:14px 18px;border:1px solid var(--line2);border-radius:8px;background:var(--s1);font-family:var(--sans);font-size:15px;line-height:1.55;color:var(--ink2)}
.body .aside b{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--lime-ink);display:block;margin-bottom:4px}

/* tablas */
.tbl{margin:1.3em 0 1.5em;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:8px}
.tbl table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:13px;line-height:1.45}
.tbl th,.tbl td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-weight:500;font-size:12px;color:var(--ink3);background:var(--s2)}
.tbl tr:last-child td{border-bottom:0}
.tbl td{color:var(--code)}
.tbl td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .bad{color:var(--red)}
.tbl .good{color:var(--lime-ink)}
.tbl caption{caption-side:bottom;padding:9px 12px;text-align:left;font-size:12px;color:var(--ink3);border-top:1px solid var(--line)}
@media (max-width:560px){.tbl table{font-size:12px}.tbl th,.tbl td{padding:9px 8px}.tbl td.n{white-space:normal;text-align:left}}

/* evidencia */
.ev{margin:48px 0 0;padding:20px 22px;border:1px solid var(--line2);border-radius:10px;background:var(--s1)}
.ev h2{margin:0 0 12px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;color:var(--lime-ink)}
.ev ul{margin:0;padding:0;list-style:none;font-family:var(--mono);font-size:13px;line-height:1.5}
.ev li{padding:8px 0;border-top:1px solid var(--line);color:var(--muted)}
.ev li:first-child{border-top:0;padding-top:0}
.ev a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px;overflow-wrap:anywhere}
.ev a:hover{color:var(--lime-ink);text-decoration-color:var(--lime-ink)}

/* índice de notas */
.list{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--line2)}
.list li{border-bottom:1px solid var(--line2)}
.list a{display:block;padding:24px 0;text-decoration:none}
.list .meta{margin-bottom:10px}
.list h2{margin:0;font-size:clamp(22px,2.8vw,30px);font-weight:700;line-height:1.1;letter-spacing:-.03em;color:var(--ink);transition:color .2s}
.list p{margin:10px 0 0;font-size:16px;line-height:1.55;color:var(--ink2);max-width:620px}
.list .go{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:12px;color:var(--ink3);transition:color .2s}
.list a:hover h2,.list a:focus-visible h2,.list a:hover .go,.list a:focus-visible .go{color:var(--lime-ink)}
.intro{margin:16px 0 0;font-size:18px;line-height:1.6;color:var(--ink2);max-width:620px}

/* pie */
.foot{max-width:var(--col);margin:64px auto 0;padding:22px 0 calc(32px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;font-family:var(--mono);font-size:12px;color:var(--ink3)}
.foot a{color:var(--ink2);text-decoration:none}
.foot a:hover{color:var(--lime-ink)}

/* tema claro: solo html[data-theme="light"]; el oscuro es la marca y no se toca */
/* rellenos lima: sobre papel el lima casi no se separa del fondo (1,3:1), así que ganan un contorno fino */
html[data-theme="light"] .brand i,html[data-theme="light"] .skip{box-shadow:inset 0 0 0 1px var(--lime-edge)}
html[data-theme="light"] .brand:hover i{background:#b9df4b}
/* cifra «buena»: en oscuro va en lima; en claro, tinta con resaltador lima debajo. Las rojas siguen rojas, sin resaltador.
   width:fit-content deja el resaltador del ancho de la cifra; el margen negativo compensa el relleno y conserva la alineación.
   Con line-height 1,05 la caja es casi la altura de la cifra: el 62–90 % habitual caería bajo la línea base y parecería un
   subrayado, así que la franja va del 48 al 86 % (mitad inferior de los dígitos y un poco por debajo). */
html[data-theme="light"] .stat b.good{
  width:fit-content;max-width:100%;margin-left:-.06em;padding:0 .06em;color:var(--ink);
  background-image:linear-gradient(transparent 48%,var(--marker) 48%,var(--marker) 86%,transparent 86%);
  background-repeat:no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone
}
/* entradilla en serif itálica: tinta suave en vez de verde */
html[data-theme="light"] .dek{color:var(--ink2)}
/* paneles: papel blanco con borde tenue y una sombra corta, para que no queden planos sobre el fondo */
html[data-theme="light"] .ev,html[data-theme="light"] .body .aside{border-color:var(--card-line);box-shadow:var(--card-shadow)}
html[data-theme="light"] .tbl{background:var(--s1);border-color:var(--card-line);box-shadow:var(--card-shadow)}
/* suavizado: antialiased conviene al texto claro sobre oscuro, pero en macOS adelgaza la tinta oscura sobre papel */
html[data-theme="light"] body{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}
/* cuerpo en Newsreader: su altura x (0,426 del cuerpo) es menor que la de la sans, así que pide más contraste
   que --ink2 (Lc 95 frente a 91). El archivo no tiene eje wght, así que el peso no se puede subir. */
html[data-theme="light"] .body{color:var(--prose)}
/* etiquetas mono de color (antetítulo, estados de las tablas): 500 en claro, donde el trazo fino de 12–13 px
   se pierde sobre papel. Plex Mono 500 ya se usa en los th, en .ev h2 y en la portada (en el índice es la única
   petición nueva, 15 KB, y suele venir en caché). La mono neutra sigue en 400. */
html[data-theme="light"] .meta .k,html[data-theme="light"] .tbl .good,html[data-theme="light"] .tbl .bad{font-weight:500}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{.nav,.skip{display:none}body{background:#fff;color:#111}.body,.body strong,.body em,h1,html[data-theme="light"] .body{color:#111}.dek,.meta .k{color:#4c6a10}}