/* ============================================================================
   Egregium · sistema de diseño (identidad "vellum"). Ver docs/IDENTIDAD.md.
   Tokens en :root (también en config/theme.json como casillas amarillas).
   ============================================================================ */
:root{
  /* soporte */
  --vellum:#F4ECDC; --vellum-raised:#EDE2CB; --nocturne:#16140F;
  /* tinta */
  --ink:#23201B; --ink-dim:#4A4338; --chalk:#FAF6EC;
  /* acentos semánticos */
  --garnet:#7A1F2B; --garnet-bright:#9E3340; --lapis:#1F3A5F; --verdigris:#2E6E5E; --gilt:#A6791F;
  /* escala térmica de curvatura */
  --k-pos:var(--garnet); --k-zero:var(--vellum-raised); --k-neg:var(--lapis);
  /* geometría visual (incunable: casi recto, filetes de gilt) */
  --r:3px;
  --filet:rgba(166,121,31,.55);
  --hairline:rgba(35,32,27,.14);
  /* tipografía */
  --display:'Bodoni Moda','Bodoni 72',Didot,'Playfair Display',Cambria,Georgia,serif;
  --text:'Source Serif 4','Iowan Old Style',Palatino,Charter,Georgia,serif;
  --mono:'IBM Plex Mono','SF Mono',Menlo,Consolas,monospace;
  --math:'STIX Two Text',Georgia,'Times New Roman',serif;
}

*{box-sizing:border-box;}
html,body{height:100%;}
/* el atributo `hidden` debe ganar a los display:flex/grid de los contenedores (conmutador de vistas) */
[hidden]{display:none !important;}
body{
  margin:0;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  color:var(--ink);
  font-family:var(--text);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background-color:var(--vellum);
  /* pergamino: dos brillos suaves + viñeta tenue */
  background-image:
    radial-gradient(120% 90% at 30% 8%, #FBF5E8 0%, rgba(251,245,232,0) 45%),
    radial-gradient(120% 120% at 85% 110%, rgba(166,121,31,.07) 0%, rgba(166,121,31,0) 55%),
    radial-gradient(150% 130% at 50% 50%, rgba(35,32,27,0) 60%, rgba(35,32,27,.06) 100%);
  background-attachment:fixed;
}

/* ---------- frontispicio ---------- */
.frontispiece{ position:relative; text-align:center; padding:clamp(18px,3.2vw,34px) 20px 10px; }
.mark{ display:inline-flex; align-items:center; gap:16px; }
.seal{ width:54px; height:54px; flex:none; color:var(--ink); }
.seal-ring{ fill:none; stroke:var(--gilt); stroke-width:1.3; }
.seal-saddle{ fill:none; stroke:var(--garnet); stroke-width:2; stroke-linecap:round; }
.seal-normal{ stroke:var(--ink); stroke-width:1.8; stroke-linecap:round; }
.seal-dot{ fill:var(--garnet); }
.wordmark{ text-align:left; }
.wordmark h1{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(2.1rem,5.2vw,3.3rem);
  letter-spacing:.01em;
  margin:0; line-height:.98; color:var(--ink);
}
.subtitle{
  margin:.18em 0 0; color:var(--ink-dim);
  font-style:italic; font-size:clamp(.82rem,1.6vw,1rem); letter-spacing:.04em;
}
.filet{
  border:0; height:0;
  width:min(620px,84%);
  margin:16px auto 10px;
  border-top:1px solid var(--filet);
  position:relative;
}
.filet::after{
  content:"◆"; color:var(--gilt); font-size:.7rem;
  position:absolute; top:-.62em; left:50%; transform:translateX(-50%);
  background:var(--vellum); padding:0 .5em;
}
.tagline{
  margin:0; color:var(--garnet);
  font-family:var(--display); font-style:italic;
  font-size:clamp(1rem,2.1vw,1.25rem); letter-spacing:.01em;
}

/* ---------- layout ---------- */
.layout{
  flex:1 0 auto;            /* crece para llenar, pero NO encoge: evita solapes, deja scroll natural */
  display:grid; grid-template-columns:minmax(0,1fr) clamp(300px,26vw,360px);
  align-items:start;
  gap:clamp(14px,2vw,26px);
  padding:clamp(12px,2vw,26px) clamp(14px,3vw,34px) 8px;
}

/* ---------- lámina (canvas) ---------- */
.stage-card{ display:flex; flex-direction:column; }
.stage{
  position:relative; min-height:clamp(420px,62vh,640px);
  background:
    radial-gradient(130% 110% at 50% 28%, #F1E7D2 0%, #E7DABE 100%);
  border-radius:var(--r);
  /* doble filete de grabado: gilt fino + sombra de tinta */
  box-shadow:
    0 0 0 1px var(--filet),
    0 0 0 5px var(--vellum),
    0 0 0 6px var(--hairline),
    0 14px 40px -22px rgba(35,32,27,.5);
  overflow:hidden;
}
#plate{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; touch-action:none; cursor:grab;
}
#plate:active{ cursor:grabbing; }
.fallback{
  position:absolute; inset:auto 12px 12px; margin:0;
  color:var(--garnet); font-size:.85rem;
}
.plate-caption{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:10px 4px 0; color:var(--ink-dim);
}
.liber{ font-family:var(--display); font-style:italic; font-size:1.02rem; color:var(--ink); }
.hint{ font-size:.78rem; letter-spacing:.03em; text-transform:lowercase; }

/* ---------- raíl de paneles ---------- */
.rail{ display:flex; flex-direction:column; gap:clamp(12px,1.6vw,18px); min-width:0; }
.card{
  background:var(--vellum-raised);
  border:1px solid var(--hairline);
  border-radius:var(--r);
  padding:16px 18px;
  box-shadow:0 1px 0 var(--filet) inset;
}
.card h2{
  font-family:var(--display); font-weight:600;
  font-size:1.18rem; margin:0 0 .55em; color:var(--ink);
}
.card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.card-head h2{ margin:0; }
.pt{ color:var(--garnet); font-style:italic; }

.badges{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.badge{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.22em .5em; border-radius:2px; border:1px solid currentColor; white-space:nowrap;
}
.badge-calc{ color:var(--gilt); }
.badge-intr{ color:var(--lapis); }

.measures{ margin:.4em 0 0; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--hairline); border:1px solid var(--hairline); border-radius:2px; overflow:hidden; }
.m{ background:var(--vellum-raised); padding:9px 11px; }
.m dt{ font-size:.74rem; letter-spacing:.02em; color:var(--ink-dim); }
.m dt small{ font-style:italic; opacity:.8; }
.m dd{ margin:.1em 0 0; font-family:var(--mono); font-size:1.18rem; font-variant-numeric:tabular-nums; color:var(--ink); }
.m-gauss{ grid-column:1 / -1; }
.m-gauss dd{ font-size:1.6rem; color:var(--garnet); }

.classify{ margin:.7em 0 0; font-style:italic; color:var(--ink-dim); font-size:.92rem; }
.conv-note{ margin:.55em 0 0; font-size:.76rem; color:var(--ink-dim); font-style:italic; }
.conv-note b{ font-style:normal; color:var(--ink); }

.formula{
  margin:.9em 0 0; padding-top:.8em; border-top:1px solid var(--hairline);
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
.formula math{ font-family:var(--math); font-size:1.35rem; color:var(--ink); }
.formula-note{ font-style:italic; color:var(--ink-dim); font-size:.8rem; }

/* control: slider */
.ctl{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.4em; }
.ctl-name{ font-size:.92rem; color:var(--ink-dim); }
.ctl-sym{ font-family:var(--math); font-style:italic; color:var(--ink); }
.ctl-val{ font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--garnet); font-size:1.02rem; }
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:3px; background:var(--filet); border-radius:2px; outline:none; margin:.4em 0; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%; background:var(--garnet); border:2px solid var(--chalk); box-shadow:0 0 0 1px var(--gilt); cursor:pointer; }
input[type=range]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:var(--garnet); border:2px solid var(--chalk); box-shadow:0 0 0 1px var(--gilt); cursor:pointer; }
input[type=range]:focus-visible{ box-shadow:0 0 0 3px rgba(31,58,95,.35); }
.micro{ margin:.6em 0 0; font-size:.82rem; color:var(--ink-dim); }
.micro em{ font-family:var(--math); font-style:italic; color:var(--ink); }
.ink-garnet{ color:var(--garnet); }
.ink-lapis{ color:var(--lapis); }

/* scholion (glosa) */
.scholion{
  border-left:2px solid var(--gilt);
  padding:.2em 0 .2em 14px; margin:0;
  color:var(--ink-dim); font-size:.86rem; font-style:italic;
}
.scholion p{ margin:0; }
.scholion-tag{
  font-family:var(--mono); font-style:normal; font-size:.6rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gilt); margin-right:.5em;
}
.scholion strong{ color:var(--ink); font-weight:600; }
.scholion em{ font-family:var(--math); }

/* ---------- colofón ---------- */
.colophon{
  text-align:center; padding:14px 16px 18px; color:var(--ink-dim);
  font-size:.74rem; letter-spacing:.03em;
}
.colophon .dot{ color:var(--gilt); margin:0 .5em; }

/* ---------- responsive ---------- */
@media (max-width:880px){
  .layout{ grid-template-columns:1fr; }
  .stage{ min-height:min(62vh,460px); }
  .mark{ gap:12px; }
  .wordmark{ text-align:left; }
}
@media (prefers-reduced-motion:no-preference){
  .badge,.m dd{ transition:color .2s ease; }
}

/* ---------- conmutador de Libri ---------- */
.libri{ display:flex; justify-content:center; gap:4px; margin-top:6px; flex-wrap:wrap; }
.libri button{
  font-family:var(--display); font-size:1rem; color:var(--ink-dim);
  background:none; border:none; cursor:pointer; padding:.3em .85em;
  border-bottom:2px solid transparent; letter-spacing:.01em;
}
.libri button:hover{ color:var(--ink); }
.libri button[aria-pressed="true"]{ color:var(--garnet); border-bottom-color:var(--gilt); }
.libri button:focus-visible{ outline:2px solid var(--lapis); outline-offset:3px; border-radius:2px; }

/* ---------- pictograma (Liber II) ---------- */
#picto{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:crosshair; }

.comp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:.4em; }
.comp{ border:1px solid var(--hairline); border-radius:2px; padding:9px 11px; background:var(--vellum); }
.comp-contra{ border-left:3px solid var(--garnet); }
.comp-cova{ border-left:3px solid var(--lapis); }
.comp-title{ display:block; font-size:.7rem; letter-spacing:.02em; color:var(--ink-dim); margin-bottom:.45em; }
.comp-title small{ display:block; font-style:italic; opacity:.8; }
.comp-row{ display:flex; justify-content:space-between; align-items:baseline; }
.comp-k{ font-family:var(--math); font-style:italic; color:var(--ink-dim); }
.comp-row .num{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:1.05rem; }
.comp-contra .num{ color:var(--garnet); }
.comp-cova .num{ color:var(--lapis); }

.metric-line{ margin:.8em 0 0; padding-top:.7em; border-top:1px solid var(--hairline); display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; font-size:.85rem; color:var(--ink-dim); }
.metric-label{ font-family:var(--math); font-style:italic; color:var(--ink); }
.gval{ font-family:var(--mono); font-size:.82rem; }
.gval b{ color:var(--ink); font-weight:600; }

.ctl-actions{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin:.7em 0 0; }
.btn{ font-family:var(--text); font-size:.85rem; color:var(--chalk); background:var(--garnet); border:1px solid var(--garnet); border-radius:var(--r); padding:.4em .85em; cursor:pointer; }
.btn:hover{ background:var(--garnet-bright); border-color:var(--garnet-bright); }
.btn:focus-visible{ outline:2px solid var(--lapis); outline-offset:2px; }
.check{ display:inline-flex; align-items:center; gap:6px; font-size:.85rem; color:var(--ink-dim); cursor:pointer; }
.check input{ accent-color:var(--lapis); width:15px; height:15px; }

/* ---------- selector de superficies (Liber I) ---------- */
.surf-select{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px; }
.surf-select button{
  font-family:var(--text); font-size:.8rem; color:var(--ink-dim);
  background:var(--vellum); border:1px solid var(--hairline); border-radius:var(--r);
  padding:.3em .6em; cursor:pointer; transition:color .15s ease, background .15s ease;
}
.surf-select button:hover{ color:var(--ink); border-color:var(--gilt); }
.surf-select button[aria-pressed="true"]{ background:var(--garnet); color:var(--chalk); border-color:var(--garnet); }
.surf-select button:focus-visible{ outline:2px solid var(--lapis); outline-offset:2px; }
.surf-params{ display:flex; flex-direction:column; }
.kformula{ font-family:var(--math); font-style:italic; font-size:1.06rem; color:var(--ink); }

/* ---------- tarjetas plegables (raíl más corto) ---------- */
details.card > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px;
}
details.card > summary::-webkit-details-marker{ display:none; }
details.card > summary h2{ margin:0; }
details.card > summary::after{
  content:'▸'; color:var(--gilt); font-size:.85rem; transition:transform .15s ease;
}
details.card[open] > summary::after{ transform:rotate(90deg); }
details.card[open] > summary{ margin-bottom:.6em; }
details.card > summary:focus-visible{ outline:2px solid var(--lapis); outline-offset:3px; border-radius:2px; }

/* ---------- visualizador de curvatura: leyenda ---------- */
.legend{ display:flex; align-items:center; gap:8px; margin:.6em 0 .2em; }
.legend-bar{ flex:1; height:12px; border-radius:2px; border:1px solid var(--hairline); background:var(--vellum-raised); }
.leg-end{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:.74rem; color:var(--ink-dim); min-width:52px; }
.leg-end:last-child{ text-align:right; }

/* ---------- web pública: «Acerca de», «♥ Apoya», aviso legal (ADR-0005) ---------- */
.masthead-actions{ position:absolute; top:12px; right:clamp(14px,3vw,34px); display:flex; gap:10px; align-items:center; }
.link-btn{ font-family:var(--display); font-style:italic; font-size:.98rem; color:var(--ink-dim); background:none; border:none; padding:.3em .3em; cursor:pointer; }
.link-btn:hover{ color:var(--ink); }
.btn-donate{ font-family:var(--text); font-size:.85rem; color:var(--garnet); background:var(--vellum); border:1px solid var(--garnet); border-radius:var(--r); padding:.3em .75em; text-decoration:none; white-space:nowrap; }
.btn-donate:hover{ background:var(--garnet); color:var(--chalk); }
.link-btn:focus-visible,.btn-donate:focus-visible,.about a:focus-visible,.colophon a:focus-visible{ outline:2px solid var(--lapis); outline-offset:2px; border-radius:2px; }
.colophon a{ color:var(--ink-dim); }
.colophon a:hover{ color:var(--ink); }

.about{
  width:min(560px, calc(100% - 32px)); max-height:calc(100dvh - 32px); padding:0;
  color:var(--ink); background:var(--vellum); border:1px solid var(--hairline); border-radius:var(--r);
  box-shadow:0 0 0 1px var(--filet), 0 24px 60px -20px rgba(35,32,27,.55);
}
.about::backdrop{ background:rgba(35,32,27,.45); }
.about-body{ position:relative; padding:22px 24px 20px; }
.about-close{ position:absolute; top:8px; right:10px; margin:0; }
.about h2{ font-family:var(--display); font-weight:600; font-size:1.6rem; margin:0 1.6em .15em 0; line-height:1.1; }
.about-meta{ margin:0 0 1em; font-family:var(--mono); font-size:.78rem; color:var(--ink-dim); }
.about p{ margin:.7em 0 0; font-size:.95rem; }
.about a{ color:var(--garnet); }
.about .about-links{ margin-top:1.1em; padding-top:.8em; border-top:1px solid var(--filet); font-size:.85rem; }

/* aviso legal (public/legal.html): un documento que desplaza con normalidad */
.legal{ width:100%; max-width:760px; margin:0 auto; padding:24px 20px 48px; font-size:.95rem; }
.legal h1{ font-family:var(--display); font-weight:600; font-size:clamp(1.7rem,4.5vw,2.3rem); margin:.4em 0 .1em; line-height:1.1; }
.legal h2{ font-family:var(--display); font-weight:600; font-size:1.15rem; margin:1.6em 0 .4em; padding-top:.7em; border-top:1px solid var(--filet); }
.legal p,.legal li{ margin:.5em 0 0; }
.legal ul{ padding-left:1.2em; }
.legal a{ color:var(--garnet); }
.legal-date{ font-family:var(--mono); font-size:.78rem; color:var(--ink-dim); }
.legal-owner{ margin-top:.7em; padding:10px 12px; font-family:var(--mono); font-size:.85rem; background:var(--vellum-raised); border:1px solid var(--hairline); border-radius:var(--r); }

/* ---------- móvil y táctil (sin rediseñar): flujo, texto legible y objetivos de dedo ---------- */
@media (max-width:880px){
  .masthead-actions{ position:static; justify-content:flex-end; margin:-8px 0 8px; }
  /* suelo de legibilidad: las etiquetas de ≈10 px suben a ≈11 px; el escritorio no cambia */
  .badge{ font-size:.72rem; }
  .scholion-tag,.m dt small,.comp-title small{ font-size:.7rem; }
}
.hint-touch{ display:none; }
@media (pointer:coarse){
  .link-btn,.btn-donate,.btn,.libri button,.surf-select button,.check,details.card > summary{ min-height:44px; }
  .btn-donate{ display:inline-flex; align-items:center; }
  .check input{ width:22px; height:22px; }
  /* el carril sigue midiendo 3 px a la vista; el relleno recortado agranda la zona que se puede tocar */
  input[type=range]{ height:40px; padding:18.5px 0; background-clip:content-box; }
  input[type=range]::-webkit-slider-thumb{ width:26px; height:26px; }
  input[type=range]::-moz-range-thumb{ width:24px; height:24px; }
  .colophon a{ display:inline-block; padding:12px 4px; }
  .hint-fine{ display:none; }
  .hint-touch{ display:inline; }
}