/* Hoja de /estudio, «Lo que cuesta digitalizarse» (D-81).
 *
 * Sale del `<style>` de `docs/estudio/estudio-fuente.html`, que es el fichero
 * de origen: si hay que tocar el estudio se toca allí y se vuelve a partir.
 * Dos diferencias con el fuente, las dos a propósito:
 *   1. TEMA CLARO POR DEFECTO (el director, 22-09): fuera los bloques
 *      `@media (prefers-color-scheme: dark)`. El botón «Tema» sigue y pone
 *      `data-theme="dark"` en <html> para quien lo quiera.
 *   2. Las reglas de `#years`, `#chCalc`, `.compara` y `.tooltip .nota` eran
 *      atributos `style=""` en el fuente; la CSP de `server.js` no admite
 *      estilos en línea, así que viven aquí.
 *   3. `.grid2` usa `minmax(min(320px,100%),1fr)`: con 320 a secas la rejilla
 *      se pasaba 6 px a 390 px de ventana (medido).
 *   4. Debajo de 640 px la barra de secciones va en su propia fila: con la
 *      marca en `nowrap` se encogía hasta enseñar dos letras (medido).
 *      La cabecera fija pasa entonces de 56 a 132 px, y el `scroll-margin-top`
 *      de las secciones sube con ella para que el ancla no quede tapada.
 * No entra en la cáscara del service worker: como `/legal`, se sirve viva.
 */
:root{
  color-scheme:light;
  --page:#f9f9f7; --surface:#fcfcfb; --surface-2:#f0efec;
  --ink:#0b0b0b; --ink-2:#52514e; --muted:#898781; --grid:#e1e0d9; --axis:#c3c2b7; --border:rgba(11,11,11,.10);
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#e87ba4; --s7:#4a3aa7;
  --seq-250:#86b6ef; --seq-400:#3987e5; --seq-500:#256abf; --seq-600:#184f95;
  --good:#0ca30c; --warn:#fab219; --serious:#ec835a; --critical:#d03b3b; --good-text:#006300;
  --radius:12px; --shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.05);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --page:#0d0d0d; --surface:#1a1a19; --surface-2:#242422;
  --ink:#ffffff; --ink-2:#c3c2b7; --muted:#898781; --grid:#2c2c2a; --axis:#383835; --border:rgba(255,255,255,.10);
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s7:#9085e9;
  --good-text:#0ca30c; --shadow:none;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.55;font-size:16px}
a{color:var(--s1)}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .5rem}
h1{font-size:clamp(1.9rem,4.5vw,3rem);letter-spacing:-.02em}
h2{font-size:clamp(1.4rem,3vw,2rem);letter-spacing:-.01em;margin-top:0}
h3{font-size:1.15rem}
p{margin:.4rem 0 .9rem}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
/* header / nav */
header.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
header.top .wrap{display:flex;align-items:center;gap:12px;min-height:56px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.brand{font-weight:700;white-space:nowrap}
.brand small{color:var(--muted);font-weight:500}
nav.sections{display:flex;gap:4px;overflow-x:auto;flex:1;scrollbar-width:none}
nav.sections::-webkit-scrollbar{display:none}
nav.sections a{white-space:nowrap;text-decoration:none;color:var(--ink-2);padding:6px 10px;border-radius:999px;font-size:.9rem}
nav.sections a.active,nav.sections a:hover{background:var(--surface-2);color:var(--ink)}
.controls{display:flex;gap:6px;align-items:center}
nav.sections a.destacado{background:color-mix(in srgb,var(--s3) 18%,transparent);color:var(--good-text);font-weight:700;border:1px solid color-mix(in srgb,var(--s3) 45%,transparent)}
nav.sections a.destacado.active,nav.sections a.destacado:hover{background:var(--s3);color:#fff}
.senal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:12px 14px;border-radius:10px;background:color-mix(in srgb,var(--s3) 12%,transparent);border:1px solid color-mix(in srgb,var(--s3) 35%,transparent);font-size:.95rem}
.senal span{flex:1 1 320px;color:var(--ink-2)}
.senal span b{color:var(--ink)}
.btn-senal{display:inline-block;background:var(--s3);color:#fff;text-decoration:none;font-weight:600;padding:8px 14px;border-radius:999px;white-space:nowrap}
.btn-senal:hover{filter:brightness(1.08)}
button.ctl{background:var(--surface-2);border:1px solid var(--border);color:var(--ink);border-radius:999px;padding:6px 12px;cursor:pointer;font:inherit;font-size:.85rem}
button.ctl[aria-pressed="true"]{background:var(--s1);color:#fff;border-color:transparent}
/* hero */
.hero{padding:56px 0 32px}
.hero .kicker{color:var(--s2);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem}
.hero p.lead{font-size:1.15rem;color:var(--ink-2);max-width:760px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:24px 0}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.tile .v{font-size:1.9rem;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.tile .l{color:var(--ink-2);font-size:.9rem;margin-top:4px}
.tile .r{color:var(--muted);font-size:.75rem;margin-top:6px}
.tile.accent{border-top:4px solid var(--s1)}
.tile.accent2{border-top:4px solid var(--s2)}
.tile.accent3{border-top:4px solid var(--s3)}
.tile.accent4{border-top:4px solid var(--critical)}
/* sections */
section.block{padding:40px 0;border-top:1px solid var(--border);scroll-margin-top:64px}
section.hero{scroll-margin-top:64px}
section.block>.wrap>p.intro{font-size:1.05rem;color:var(--ink-2);max-width:820px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin:16px 0}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:16px}
.badge{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:999px;border:1px solid var(--border);vertical-align:middle}
.badge.oficial{background:color-mix(in srgb,var(--s1) 14%,transparent);color:var(--s1)}
.badge.mercado{background:color-mix(in srgb,var(--s4) 18%,transparent);color:#8a5b00}
:root[data-theme="dark"] .badge.mercado{color:#f2b84a}
.badge.opinion{background:color-mix(in srgb,var(--s5) 18%,transparent);color:#a83a68}
:root[data-theme="dark"] .badge.opinion{color:#f39ec0}
.ref{font-size:.78rem;color:var(--s1);text-decoration:none;vertical-align:super;line-height:0;margin-left:1px}
.ref:hover{text-decoration:underline}
body.hide-opinion .opinion-block{display:none}
.note{font-size:.9rem;color:var(--ink-2);border-left:3px solid var(--s4);padding:8px 12px;background:var(--surface-2);border-radius:0 8px 8px 0;margin:12px 0}
.note.crit{border-left-color:var(--critical)}
.note.good{border-left-color:var(--good)}
ul.clean{padding-left:1.2rem;margin:.3rem 0 .8rem}
ul.clean li{margin:.25rem 0}
table.data{width:100%;border-collapse:collapse;font-size:.92rem;margin:8px 0}
table.data th,table.data td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--grid);vertical-align:top}
table.data th{color:var(--ink-2);font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}
table.data td.num,table.data th.num{text-align:right;font-variant-numeric:tabular-nums}
table.data th.num{white-space:nowrap}
.card{overflow-x:auto;min-width:0}
table.data tr.hl td{background:color-mix(in srgb,var(--s1) 10%,transparent);font-weight:600}
.small{font-size:.85rem;color:var(--muted)}
/* charts */
.chart{margin:12px 0}
.chart .title{font-weight:600;margin-bottom:2px}
.chart .sub{color:var(--muted);font-size:.85rem;margin-bottom:10px}
.chart .row{display:grid;grid-template-columns:minmax(120px,32%) 1fr auto;align-items:center;gap:10px;padding:5px 0;cursor:default}
.chart .row:hover .bar{filter:brightness(1.08)}
.chart .lab{font-size:.9rem;color:var(--ink);line-height:1.2}
.chart .lab small{color:var(--muted)}
.chart .track{height:16px;background:transparent;position:relative}
.chart .bar{height:100%;background:var(--s1);border-radius:0 4px 4px 0;min-width:2px;transition:width .5s ease}
.chart .val{font-size:.9rem;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.chart .row.hl .lab{font-weight:700}
.chart .row.hl .bar{outline:2px solid var(--ink);outline-offset:1px}
.chart .legend{display:flex;flex-wrap:wrap;gap:12px;font-size:.85rem;color:var(--ink-2);margin:6px 0 4px}
.chart .legend span{display:inline-flex;align-items:center;gap:6px}
.chart .legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.chart .tools{display:flex;gap:8px;justify-content:flex-end}
.chart .tools button{background:none;border:none;color:var(--s1);cursor:pointer;font:inherit;font-size:.82rem;padding:2px 4px}
.chart table.data{display:none}
.chart.table-mode .rows{display:none}
.chart.table-mode table.data{display:table}
.tooltip{position:fixed;pointer-events:none;background:var(--ink);color:var(--page);padding:8px 10px;border-radius:8px;font-size:.82rem;max-width:280px;z-index:100;opacity:0;transition:opacity .12s;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.tooltip.on{opacity:1}
/* timeline */
.timeline{list-style:none;padding:0;margin:8px 0;border-left:2px solid var(--axis)}
.timeline li{position:relative;padding:4px 0 12px 20px}
.timeline li::before{content:"";position:absolute;left:-7px;top:11px;width:12px;height:12px;border-radius:50%;background:var(--s1);border:2px solid var(--surface)}
.timeline li b{display:block}
.timeline li.jx::before{background:var(--s2)}
.timeline li.dip::before{background:var(--s3)}
/* calculator */
.calc{display:grid;grid-template-columns:1.4fr 1fr;gap:20px}
@media (max-width:860px){.calc{grid-template-columns:1fr}}
.mod{border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin:10px 0;background:var(--surface)}
.mod.off{opacity:.55}
.mod header{display:flex;align-items:flex-start;gap:10px}
.mod header label.t{font-weight:600;flex:1;cursor:pointer}
.mod header input[type=checkbox]{width:20px;height:20px;margin-top:2px;accent-color:var(--s1)}
.mod .desc{font-size:.85rem;color:var(--ink-2);margin:4px 0 8px 30px}
.mod .fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-left:30px}
.mod .f label{display:block;font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.mod .f input[type=number]{width:100%;padding:7px 8px;border:1px solid var(--axis);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-variant-numeric:tabular-nums}
.mod .sum{margin:8px 0 0 30px;font-size:.88rem;color:var(--ink-2)}
.mod .sum b{color:var(--ink)}
.totals{position:sticky;top:70px}
.totals .big{font-size:2.4rem;font-weight:700;letter-spacing:-.02em;line-height:1.05}
.totals .big small{font-size:1rem;font-weight:500;color:var(--muted);display:block;letter-spacing:0}
.totals .line{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--grid);font-size:.92rem}
.totals .line b{font-variant-numeric:tabular-nums}
#years.horizonte{width:60px;padding:3px 6px;border:1px solid var(--axis);border-radius:6px;background:var(--surface);color:var(--ink);font:inherit}
#chCalc{margin-top:14px}
.totals p.compara{margin-top:12px}
.tooltip .nota{opacity:.8}
.totals .actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
/* references */
ol.refs{padding-left:1.4rem;font-size:.9rem}
ol.refs li{margin:6px 0;scroll-margin-top:80px}
ol.refs li:target{background:color-mix(in srgb,var(--s4) 20%,transparent);border-radius:6px;padding:4px 6px}
ol.refs li a{word-break:break-all}
.aviso{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;background:var(--surface);border:1px solid var(--border);border-left:5px solid var(--s3);border-radius:var(--radius);padding:14px 18px;margin:18px 0 6px;font-size:.93rem}
.aviso .ic{font-size:1.5rem;line-height:1}
.aviso b{color:var(--ink)}
.aviso .meta{color:var(--muted);font-size:.82rem;margin-top:6px}
.compromiso{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:12px 0}
.compromiso div{background:var(--surface-2);border-radius:10px;padding:12px 14px;font-size:.92rem}
.compromiso div b{display:block;margin-bottom:4px}
.compromiso+h3{margin-top:24px}
#compromiso{background:color-mix(in srgb,var(--s3) 10%,var(--page));border-top:3px solid var(--s3)}
#compromiso .compromiso div,#compromiso .note{background:var(--surface)}
.cero{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--s3) 14%,transparent);font-size:.92rem}
.cero b{font-size:1.4rem;color:var(--good-text);font-variant-numeric:tabular-nums}
.fix{background:color-mix(in srgb,var(--s4) 22%,transparent);border-radius:4px;padding:0 4px}
footer{padding:32px 0 60px;color:var(--muted);font-size:.85rem;border-top:1px solid var(--border)}
details{margin:8px 0}
details summary{cursor:pointer;font-weight:600;color:var(--s1)}
.hero-figure{font-size:clamp(2.6rem,7vw,4.6rem);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--s1)}
@media print{header.top,.controls,.chart .tools,.totals .actions{display:none}body{background:#fff;color:#000}section.block{padding:16px 0}.card{box-shadow:none;break-inside:avoid}}
@media (max-width:640px){nav.sections{flex:1 1 100%;order:3}.brand{flex:1}section.block,section.hero{scroll-margin-top:140px}ol.refs li{scroll-margin-top:150px}}