/* RECINTO · hoja de identidad + retícula v2 (ADR-0018). Tokens en :root reflejan config/theme.json (fuente
   documental). El pintor SVG no lleva hex: hereda estos colores por clase. Tipografías auto-alojadas en
   public/fonts/ (cero CDN, METODOLOGÍA §8). Tema gris-papel deliberado; ver docs/IDENTIDAD.md.

   RETÍCULA v2 — un solo DOM para todos los anchos; solo cambia el CSS:
   · FLUJO (base, <1200px o alto <600px): la página scrollea; la curva va primero, sticky y de alto acotado.
   · SHELL (≥1200×≥600): altura fija 100dvh; la curva es una FILA de la retícula (nunca sticky, no pisa nada);
     mesa (parámetros) y dossiers scrollean cada uno por su cuenta. 2 columnas hasta 1599, 3 desde 1600. */

/* ---- Fuentes auto-alojadas ---- */
@font-face { font-family: 'Syne'; font-weight: 700; font-display: swap; src: url('../fonts/syne-700.woff2') format('woff2'); }
@font-face { font-family: 'Syne'; font-weight: 800; font-display: swap; src: url('../fonts/syne-800.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 400; font-display: swap; src: url('../fonts/space-grotesk-400.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 500; font-display: swap; src: url('../fonts/space-grotesk-500.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 700; font-display: swap; src: url('../fonts/space-grotesk-700.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-weight: 400; font-display: swap; src: url('../fonts/space-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-weight: 700; font-display: swap; src: url('../fonts/space-mono-700.woff2') format('woff2'); }

:root {
  --paper: #F2F2EF;
  --paper-2: #E8E8E4;
  --ink: #1A1A18;
  --ink-soft: #3C3B38;
  --mute: #6E6D69;
  --hair: rgba(26, 26, 24, 0.16);
  --plot-bg: #FFFFFF;
  --signal: #C81A6B;
  --signal-dk: #7A1140;

  /* Acabados del visor 3D de la caja (material base, sin veneer). Los lee box3d.js por
     getComputedStyle: cero hex en JS. Documentados en config/theme.json. */
  --finish-plywood: #C9A66B;
  --finish-black: #211F1B;
  --finish-white: #ECEAE3;
  --viewer-light: #FFFFFF;   /* color de la luz (cielo/clave) del visor 3D */
  --viewer-ground: #8A8A86;  /* color de rebote del suelo (hemisférica) */
  /* Acabados de la BOCINA: plásticos de impresión (de diseño), no plywood. Los lee box3d.js. */
  --horn-rosa: #EC5E9A;
  --horn-menta: #27BDB0;
  --horn-naranja: #F0852E;
  --horn-negro: #1E1E1E;
  --horn-blanco: #EFEDE6;

  --font-display: 'Syne', 'Arial Black', system-ui, sans-serif;
  --font-sans: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'Space Mono', 'SFMono-Regular', ui-monospace, monospace;

  /* Estructura de la retícula (presentación). */
  --gut: 16px;                                   /* canal lateral */
  --bar-h: 52px;                                 /* barra superior en shell */
  --gap-field: 14px;                             /* separación entre mandos (antes 71 style= inline) */
  --chart-h: clamp(170px, 26svh, 240px);         /* alto de la curva (flujo móvil); se redefine por rango */
  --ax-fs: 11px;                                 /* cuerpo de los ejes a píxel real */
  --mesa-w: clamp(300px, 26vw, 360px);           /* carril de parámetros en shell */
  --obj-w: clamp(380px, 24vw, 480px);            /* carril del objeto en 3 columnas */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* app.js oculta filas con el atributo hidden: debe ganar SIEMPRE a cualquier display nuevo (.field, .docs…). */
[hidden] { display: none !important; }

html { height: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.3;
  margin: 0;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

.tag {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 400;
  display: block;
}
.grp-body > .tag, .grp-body > div > .tag, .field > .tag { margin-top: var(--gap-field); }
.grp-body > .tag:first-child, .grp-body > div > .tag:first-child { margin-top: 0; }
.mono { font-family: var(--font-mono); }
.disp { font-family: var(--font-display); }
h2.tag { font-size: 11.5px; }

/* Salto a la curva (teclado): invisible hasta recibir el foco. */
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: var(--paper); padding: 8px 12px; font-family: var(--font-mono); font-size: 12px; }
.skip:focus { left: 8px; }

/* ---- Barra superior ---- */
.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px var(--gut); border-bottom: 1.5px solid var(--ink); background: var(--paper); }
.wordmark { font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: -0.02em; line-height: 0.9; color: var(--ink); text-decoration: none; }
.wordmark .cut { font-style: italic; font-weight: 700; }
.wordmark-lg { font-size: clamp(40px, 8vw, 62px); }
.subtitle { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.topbar .subtitle { display: none; }
.tb-spacer { flex: 1; }
.tb-btn {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink); background: transparent; border: 1.5px solid var(--ink); padding: 0 10px; min-height: 34px;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; text-decoration: none; white-space: nowrap;
}
.tb-btn::-webkit-details-marker { display: none; }
.tb-btn:hover, .tb-btn:focus-visible { background: var(--paper-2); }
.tb-sm { min-height: 26px; font-size: 10.5px; padding: 0 8px; }
#preset-current { font-weight: 700; text-transform: none; letter-spacing: 0; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; }
/* Apoyo: tinta sólida; el magenta SOLO en hover/foco (presupuesto de señal, docs/IDENTIDAD.md). */
.btn-donate { background: var(--ink); color: var(--paper); }
.btn-donate:hover, .btn-donate:focus-visible { background: var(--signal); border-color: var(--signal); color: var(--paper); }
/* .seg.seg-xs: gana en especificidad a .seg (gap 6px, declarado más abajo); si no, EN|ES quedaban separados y el
   segundo botón, sin borde izquierdo, se veía «cortado» (feedback de Javier, 16-oct-2026). */
.seg.seg-xs { margin-top: 0; gap: 0; }
.seg.seg-xs button { min-height: 34px; padding: 0 9px; }
.seg.seg-xs button + button { border-left: 0; }

/* Menú desplegable (<details>): el panel flota bajo su botón; se cierra con Escape / clic fuera (shell.js). */
.menu { position: relative; }
.menu[open] > summary { background: var(--ink); color: var(--paper); }
.menu-panel { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(380px, calc(100vw - 2 * var(--gut))); background: var(--paper); border: 1.5px solid var(--ink); padding: 12px; }
.seg-col { flex-direction: column; align-items: stretch; margin-top: 0; }
.seg-col button { text-align: left; }
.menu-panel .hint { margin-top: 10px; }

/* Conmutador de sección (móvil). Oculto por encima (nav.… gana a .seg). */
nav.section-nav { display: none; }

/* ---- Pistas «i» (sustituyen a los title=; funcionan en táctil y con lector) ---- */
/* Pista «i»: CÍRCULO de 16 px con la i centrada. `.seg .hint-btn` gana a `.seg button` (relleno y alto mínimo), que
   dentro de la barra de vistas la estiraba a una elipse (feedback de Javier, 16-oct-2026). */
.hint-btn, .seg .hint-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; font-family: var(--font-mono); font-size: 10px; line-height: 1; width: 16px; min-width: 16px; height: 16px; min-height: 16px; border: 1px solid var(--mute); border-radius: 50%; background: transparent; color: var(--mute); cursor: pointer; vertical-align: middle; margin-left: 4px; padding: 0; text-transform: none; letter-spacing: 0; }
.hint-btn[aria-expanded='true'], .hint-btn:hover, .seg .hint-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.hint { font-size: 11.5px; line-height: 1.5; color: var(--ink-soft); margin-top: 8px; padding-left: 10px; border-left: 1.5px solid var(--hair); }
.hint code { font-family: var(--font-mono); }

/* ---- Retícula base = FLUJO (móvil/tablet/ventana baja) ---- */
.shell { display: flex; flex-direction: column; gap: 18px; padding: 10px var(--gut) 32px; }
.bench { order: 1; min-width: 0; }
.mesa { order: 2; min-width: 0; }
.docs { order: 3; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
/* La curva sticky en flujo: el bloque contenedor es .shell entero (bench no acota), así dura toda la página. */
.bench { display: contents; }
.bench-pin { order: 1; position: sticky; top: 0; z-index: 10; background: var(--paper); padding: 6px 0 4px; border-bottom: 1px solid var(--hair); }
.bench > .metrics { order: 1; }
body[data-dock='min'] .chart-host, body[data-dock='min'] .legend, body[data-dock='min'] #hint-spl { display: none; }
.bench-bar { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
.bench-bar #chart-title { flex: 1 1 100%; min-width: 0; margin: 0; }
#dock-full { margin-left: auto; }
/* .seg.seg-spl: gana en especificidad a .seg (flex-wrap: wrap) declarado más abajo. */
.seg.seg-spl { margin: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; align-items: center; }
.seg-spl button { font-size: 11px; padding: 4px 9px; white-space: nowrap; }
/* Curva A PÍXEL REAL (ADR-0018): el host fija el alto y la SVG lo llena; el pintor recibe clientWidth×clientHeight. */
.chart-host { width: 100%; min-width: 0; height: var(--chart-h); margin-top: 6px; }
.chart-host > svg { width: 100%; height: 100%; display: block; }
/* Pantalla completa de la curva (móvil): respaldo sin Fullscreen API. */
body.chart-full .bench-pin { position: fixed; inset: 0; z-index: 50; padding: 10px var(--gut); --chart-h: calc(100svh - 110px); overflow: auto; }
.legend { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 10.5px; color: var(--mute); margin-top: 4px; min-height: 1.4em; }
.legend .lg { white-space: nowrap; }
.lg-target { color: var(--signal-dk); }
.lg-offaxis { color: var(--signal-dk); }
.lg-tol { color: var(--mute); }
.lg-spl { color: var(--ink); }
.chart-host .fallback, .fallback { font-family: var(--font-mono); font-size: 13px; color: var(--signal-dk); padding: 20px; border: 1.5px solid var(--signal); }

/* ---- Pintor SVG (sin hex en JS: el color vive aquí) ---- */
.rcn-chart { width: 100%; height: auto; display: block; }
.plot-frame { fill: var(--plot-bg); stroke: var(--ink); stroke-width: 1.5; }
.grid { stroke: var(--hair); stroke-width: 1; }
.spl-line { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.tol-line { fill: none; stroke: var(--mute); stroke-width: 1.2; stroke-dasharray: 5 4; }
.z-line { fill: none; stroke: var(--mute); stroke-width: 1.6; stroke-dasharray: 5 4; }
.target { stroke: var(--signal); stroke-width: 1.6; stroke-dasharray: 2 5; }
.f3-mark { stroke: var(--signal); stroke-width: 1; opacity: 0.45; }
.xover-mark { stroke: var(--signal); stroke-width: 1; opacity: 0.45; }
.branch-line-lo { fill: none; stroke: var(--mute); stroke-width: 1.4; }
.branch-line-hi { fill: none; stroke: var(--mute); stroke-width: 1.4; stroke-dasharray: 4 4; }
.branch-line-mid { fill: none; stroke: var(--mute); stroke-width: 1.4; stroke-dasharray: 1 3; }
.offaxis-line { fill: none; stroke: var(--signal); stroke-width: 2; }
.ax { font-family: var(--font-mono); font-size: 18px; fill: var(--mute); }
.ax-x { text-anchor: middle; }
.ax-y-l { text-anchor: end; }
.ax-y-r { text-anchor: start; }
.ax-unit { font-size: 15px; letter-spacing: 0.08em; fill: var(--mute); }
.ax-unit-l { text-anchor: start; }
.ax-unit-r { text-anchor: end; }
.f3-label { fill: var(--signal-dk); text-anchor: start; font-size: 16px; }
/* Tamaños REALES del modo a píxel (el legado 960×360 conserva los 18/15/16 escalados). */
.rcn-chart--px .ax { font-size: var(--ax-fs); }
.rcn-chart--px .ax-unit { font-size: calc(var(--ax-fs) - 1px); }
.rcn-chart--px .f3-label { font-size: var(--ax-fs); }

/* ---- Métricas ---- */
.metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.metric { border: 1.5px solid var(--ink); padding: 8px 10px; min-width: 0; }
.metric-invert { background: var(--ink); color: var(--paper); }
.metric-invert .tag { color: #9b9a90; }
.metric-val { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin-top: 2px; overflow-wrap: anywhere; }
.metric-val span { font-family: var(--font-mono); font-weight: 400; font-size: 11px; }

/* ---- MESA: siete grupos plegables, numerados como el índice del dossier ---- */
.grp { border-top: 1.5px solid var(--ink); }
.grp:last-child { border-bottom: 1.5px solid var(--ink); }
.grp > summary { display: flex; align-items: baseline; gap: 10px; padding: 11px 0; cursor: pointer; list-style: none; font-family: var(--font-sans); font-weight: 700; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; min-height: 44px; }
.grp > summary::-webkit-details-marker { display: none; }
.grp > summary i { font-family: var(--font-mono); font-style: normal; font-weight: 400; font-size: 11px; color: var(--mute); }
.grp > summary::after { content: '+'; margin-left: auto; font-family: var(--font-mono); font-weight: 700; font-size: 14px; }
.grp[open] > summary::after { content: '−'; }
.grp-sum { flex: 1; min-width: 0; font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grp[open] > summary .grp-sum { visibility: hidden; }
.grp-body { padding-bottom: 18px; }
.grp.grp-empty { display: none; }
.ficha { margin-top: var(--gap-field); }
.ficha > summary { cursor: pointer; list-style: none; }
.ficha > summary::-webkit-details-marker { display: none; }
.ficha > summary::before { content: '▸ '; }
.ficha[open] > summary::before { content: '▾ '; }
.index-list { margin-top: 6px; }
.idx { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; padding: 5px 0; border-bottom: 1px solid var(--hair); }
.idx i { color: var(--mute); font-style: normal; }
.idx b { font-weight: 700; }

/* ---- Controles ---- */
.seg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.seg button {
  font-family: var(--font-mono); font-size: 11.5px;
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--ink); padding: 6px 10px; cursor: pointer;
  transition: background 0.08s, color 0.08s;
}
.seg button[aria-pressed='true'], .seg button[aria-selected='true'] { background: var(--ink); color: var(--paper); }
.seg button:disabled { border-color: var(--hair); color: var(--mute); cursor: not-allowed; }
@media (hover: hover) {
  .seg button:not(:disabled):hover { background: var(--paper-2); }
  .seg button[aria-pressed='true']:hover, .seg button[aria-selected='true']:hover { background: var(--ink); }
}
.seg button:focus-visible, .tb-btn:focus-visible, .rcn-btn:focus-visible, .hint-btn:focus-visible, .link-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* Mando = etiqueta + lectura arriba, pista a todo el ancho debajo (sin la lectura fija de 160px). */
.field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px; margin-top: var(--gap-field); }
.field > .tag { margin-top: 0; }
.field > .slider-out { font-size: 12.5px; font-weight: 700; text-align: right; white-space: nowrap; }
.field > input[type='range'] { grid-column: 1 / -1; width: 100%; margin: 10px 0 2px; }
.slider-out { font-size: 13px; font-weight: 700; }
input[type='range'] { -webkit-appearance: none; appearance: none; height: 2px; min-width: 0; background: var(--ink); cursor: pointer; touch-action: pan-y; }
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; background: var(--signal); border: none; }
input[type='range']::-moz-range-thumb { width: 16px; height: 16px; background: var(--signal); border: none; border-radius: 0; }
input[type='range']:focus-visible { outline: 2px solid var(--signal); outline-offset: 7px; }
.rcn-select { font-family: var(--font-mono); font-size: 12px; background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 0; padding: 7px 28px 7px 10px; width: 100%; margin-top: 9px; cursor: pointer; -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 16px) calc(50% - 2px), calc(100% - 11px) calc(50% - 2px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.rcn-select:focus { outline: 2px solid var(--signal); outline-offset: 1px; }
/* Táctil: objetivos de ≥40px y selects a 16px (iOS no hace zoom al enfocar). */
@media (pointer: coarse) {
  .seg button { min-height: 40px; }
  input[type='range'] { height: 28px; background: linear-gradient(var(--ink), var(--ink)) center / 100% 2px no-repeat; }
  input[type='range']::-webkit-slider-thumb { width: 24px; height: 24px; }
  input[type='range']::-moz-range-thumb { width: 24px; height: 24px; }
  .rcn-select { font-size: 16px; }
}

/* ---- Panel de caja ---- */
.boxpanel-wrap { border: 1.5px solid var(--ink); padding: 10px 12px; }
.boxpanel { display: flex; gap: 12px; align-items: center; }
.rcn-box { width: 44px; height: auto; flex: none; }
.box-wall { fill: none; stroke: var(--ink); stroke-width: 2.4; }
.box-driver { fill: none; stroke: var(--ink); stroke-width: 2.2; }
.box-dust { fill: var(--ink); }
.box-hair { stroke: var(--hair); stroke-width: 1.6; }
.box-port { fill: none; stroke: var(--ink); stroke-width: 2.2; }
.warn { color: var(--signal-dk); }
.boxname { font-weight: 700; font-size: 18px; margin: 2px 0 4px; }
.boxnums { font-size: 12px; line-height: 1.6; }
.boxnums b { font-weight: 700; }
.cabinet-panel { margin-top: 10px; }
.cab-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--hair); }
.cab-row b { font-weight: 700; font-size: 12px; }
.cab-note { font-size: 11.5px; margin-top: 9px; line-height: 1.5; }

/* ---- Dossiers en pestañas ---- */
.dossier { border-top: 1.5px solid var(--ink); padding-top: 8px; min-width: 0; }
.tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 0 10px; align-items: center; }
.tabs [role='tab'] { white-space: nowrap; }
.tabs #focus-docs { margin-left: auto; }
.tab-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* solo lectores: la pestaña ya titula */
.downloads { margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--hair); }
.downloads .tag { margin-bottom: 2px; }
.export-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.rcn-btn {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--paper); background: var(--ink); border: 1.5px solid var(--ink); padding: 9px 16px;
  cursor: pointer; transition: background 0.12s, color 0.12s;
}
@media (hover: hover) { .rcn-btn:hover { background: var(--signal); border-color: var(--signal); } }
.rcn-btn:active { background: var(--signal); border-color: var(--signal); }
.export-note { color: var(--mute); font-size: 11.5px; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; cursor: pointer; }

/* Visor 3D: el host fija el alto (aspect-ratio) y el canvas lo llena en absoluto; box3d.js lee
   clientWidth×clientHeight, así nunca entra en bucle con el tamaño del canvas. */
.box3d-host { position: relative; width: 100%; aspect-ratio: 5 / 4; min-height: 200px; max-height: min(480px, 60svh); margin: 0 auto 4px; touch-action: pan-y; }
.box3d-host canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.box3d-host.zoom-armed { touch-action: none; }
.box3d-host.zoom-armed canvas { outline: 1.5px solid var(--signal); outline-offset: 2px; }
.viewer-hint { font-size: 11px; color: var(--mute); text-align: center; margin: 4px auto 0; }
/* Iso SVG de respaldo (sin WebGL). */
.rcn-iso { width: 100%; height: auto; display: block; max-width: 480px; margin: 0 auto; }
.iso-top, .iso-side { fill: var(--paper-2); stroke: var(--ink); stroke-width: 1.6; }
.iso-front { fill: var(--paper); stroke: var(--ink); stroke-width: 1.8; }
.iso-driver, .iso-port { fill: none; stroke: var(--ink); stroke-width: 1.8; }
.iso-dust { fill: var(--ink); }
.iso-dim { font-family: var(--font-mono); font-size: 11px; fill: var(--mute); }
/* Despiece y esquema: a tamaño NATURAL con scroll propio (nunca en miniatura ilegible). */
.exp-host, .sch-host { width: 100%; overflow: auto; margin-top: 8px; }
.sch-host { border: 1.5px solid var(--ink); background: var(--plot-bg); padding: 8px; }
.rcn-exploded, .rcn-sch { display: block; max-width: none; width: auto; height: auto; }
.exp-panel { fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; }
.exp-panel-sub { stroke: var(--signal); stroke-dasharray: 5 3; }
.exp-cutout { fill: none; stroke: var(--mute); stroke-width: 1.4; stroke-dasharray: 4 3; }
.exp-cut-label { font-family: var(--font-mono); font-size: 9px; fill: var(--mute); }
.exp-name { font-family: var(--font-mono); font-size: 11px; fill: var(--ink); }
.exp-dim { font-family: var(--font-mono); font-size: 11px; fill: var(--mute); }
.sch-wire, .sch-wire-f { stroke: var(--ink); stroke-width: 1.6; fill: none; }
.sch-gnd { stroke: var(--mute); stroke-width: 1.2; }
.sch-node { fill: var(--ink); }
.sch-chip { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; }
.sch-chip.sch-lpad { stroke: var(--mute); }
.sch-chip.sch-zobel { stroke: var(--mute); stroke-dasharray: 3 2; }
.sch-chip.sch-bsc { stroke: var(--signal-dk); }
.sch-txt { font-family: var(--font-mono); font-size: 13px; fill: var(--ink); }

/* Sitio PÚBLICO (site.json host=public): se ocultan las funciones que necesitan el servidor local. */
body[data-host='public'] [data-local-only] { display: none !important; }
/* Enlaces de compra + etiqueta de afiliado (visible junto al enlace, LSSI art. 20) + invitación a apoyar. */
.bom-link { color: var(--ink); font-family: var(--font-mono); font-size: 11.5px; text-decoration: underline; white-space: nowrap; }
.bom-link:hover { color: var(--signal-dk); }
.bom-affil { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); border: 1px solid var(--hair); padding: 1px 5px; margin-left: 6px; white-space: nowrap; }
.bom-buy { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 11.5px; color: var(--mute); margin: 2px 0 6px; }
.nudge { color: var(--signal-dk); text-decoration: underline; white-space: nowrap; }

/* ---- Lista de la compra (BOM) ---- */
.bom-panel { margin-top: 8px; }
.bom-group { margin-top: 14px; padding-bottom: 4px; border-bottom: 1.5px solid var(--ink); }
.bom-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); margin-top: 9px; }
.bom-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 3.5px 0; border-bottom: 1px solid var(--hair); font-size: 12.5px; }
.bom-row b { font-weight: 700; font-family: var(--font-mono); white-space: nowrap; }
.bom-std { color: var(--mute); font-family: var(--font-mono); font-size: 11.5px; }
.bom-tag { color: var(--signal-dk); font-family: var(--font-mono); font-size: 11px; }
.bom-note { font-size: 11.5px; color: var(--mute); margin-top: 12px; line-height: 1.5; }
.bom-note code { font-family: var(--font-mono); }

/* ---- Diálogos (presets, acerca de) ---- */
/* El diálogo cabe siempre en el viewport (alto incluido el relleno, box-sizing global) y desplaza su contenido. */
dialog { margin: auto; width: min(760px, calc(100vw - 2 * var(--gut))); max-height: calc(100dvh - 2 * var(--gut)); border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); padding: 20px; overflow-y: auto; overscroll-behavior: contain; }
dialog::backdrop { background: rgba(26, 26, 24, 0.45); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
dialog p { margin-top: 10px; font-size: 13.5px; line-height: 1.5; }
dialog .meta { font-size: 11px; letter-spacing: 0.05em; color: var(--mute); }
dialog .about-links { margin-top: 16px; font-size: 11.5px; }
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 12px; }
.preset-grid button { font-family: var(--font-sans); font-size: 12.5px; text-align: left; white-space: normal; padding: 10px 12px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; }
.preset-grid button b { display: block; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; }
.preset-grid button small { display: block; margin-top: 4px; font-size: 11px; line-height: 1.4; color: var(--mute); }
.preset-grid button[aria-pressed='true'] { background: var(--ink); color: var(--paper); }
.preset-grid button[aria-pressed='true'] small { color: var(--paper-2); }
@media (hover: hover) { .preset-grid button:hover { background: var(--paper-2); } .preset-grid button[aria-pressed='true']:hover { background: var(--ink); } }

/* ---- Colofón ---- */
.colophon { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); padding: 8px var(--gut) 10px; border-top: 1px solid var(--hair); }
.colophon .link-btn { font: inherit; color: var(--mute); }

/* ===== MÓVIL (<760): secciones Diseño · Construcción · Compra bajo la curva ===== */
@media (max-width: 759px) {
  nav.section-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0; padding: 0 var(--gut); position: sticky; top: 0; z-index: 11; background: var(--paper); }
  .section-nav button { border-left: 0; min-height: 40px; }
  .section-nav button:first-child { border-left: 1.5px solid var(--ink); }
  .bench-pin { top: 40px; }
  body[data-section='design'] .docs { display: none; }
  body:not([data-section='design']) .mesa { display: none; }
  body[data-section='build'] [data-panel='compra'], body[data-section='build'] .downloads { display: none; }
  body[data-section='buy'] .planos, body[data-section='buy'] [data-panel='3d'], body[data-section='buy'] [data-tab='3d'] { display: none; }
  body[data-section='build'] [data-tab='compra'] { display: none; }
  /* Barra en DOS filas: marca + idioma + apoyo arriba; presets + diseño abajo (el salto es un pseudo-ítem). */
  .topbar .wordmark { font-size: 26px; }
  .topbar { gap: 8px; }
  .topbar #about-open { display: none; } /* en móvil se llega desde el colofón */
  .topbar::after { content: ''; flex-basis: 100%; height: 0; order: 2; }
  #presets-open, #menu-design { order: 3; }
  #presets-open { flex: 1; min-width: 0; }
  /* La barra de la curva en una fila: vistas (con scroll) + plegar + pantalla completa; el título solo para lectores. */
  .bench-bar { flex-wrap: nowrap; }
  .bench-bar #chart-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #dock-min { white-space: nowrap; }
  #dock-full { display: inline-flex; }
}
/* Apaisado bajo (móvil girado): la curva deja de ser sticky y ocupa la pantalla. */
@media (max-width: 999px) and (max-height: 500px) {
  .bench-pin { position: static; }
  :root { --chart-h: 68svh; }
}

/* ===== TABLET (760–1199) y ventana baja: flujo con la curva sticky, mesa a 2 columnas ===== */
@media (min-width: 760px) {
  :root { --chart-h: clamp(220px, 34svh, 340px); --ax-fs: 12px; }
  .topbar .subtitle { display: inline; margin-right: 8px; }
  .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mesa { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); column-gap: 28px; align-items: start; }
  .grp:last-child { border-bottom: 0; }
  .bench-bar { flex-wrap: nowrap; }
  .bench-bar #chart-title { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #dock-full { display: none; }
}
@media (min-width: 760px) and (max-width: 1199px) {
  .docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 24px; align-items: start; }
}

/* ===== SHELL (≥1200×≥600): altura fija, cada carril con su scroll; la curva es una fila, nunca sticky ===== */
@media (min-width: 1200px) and (min-height: 600px) {
  :root { --chart-h: clamp(200px, 30dvh, 520px); }
  body { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
  .topbar { flex: none; flex-wrap: nowrap; height: var(--bar-h); padding-block: 0; }
  .colophon { flex: none; padding-block: 4px; }
  .shell { flex: 1; min-height: 0; display: grid; gap: 10px 22px; padding: 10px var(--gut) 0;
    grid-template-columns: var(--mesa-w) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: 'mesa bench' 'mesa docs'; }
  .bench { display: block; grid-area: bench; min-width: 0; }
  .mesa { grid-area: mesa; display: block; padding-right: 10px; }
  .docs { grid-area: docs; }
  .mesa, .docs { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding-bottom: 24px; padding-left: 4px; }
  .bench-pin { position: static; border: 0; padding: 0; }
  .grp > summary { position: sticky; top: 0; z-index: 2; background: var(--paper); }
  .metric { padding: 6px 10px; }
  .metric-val { font-size: 17px; }
  /* «Ampliar» los dossiers: la curva baja para dejar sitio al 3D y a la compra. */
  body[data-focus='docs'] .chart-host { --chart-h: 160px; }
  .box3d-host { max-height: min(420px, 50dvh); }
}

/* ===== 3 COLUMNAS (≥1600): mesa | curva + planos | objeto (3D siempre a la vista) ===== */
@media (min-width: 1600px) and (min-height: 600px) {
  :root { --chart-h: clamp(240px, 40dvh, 600px); --ax-fs: 13px; --mesa-w: clamp(320px, 20vw, 400px); }
  .shell { grid-template-columns: var(--mesa-w) minmax(0, 1fr) var(--obj-w); grid-template-areas: 'mesa bench objeto' 'mesa planos objeto'; }
  .docs { display: contents; }
  #focus-docs { display: none; }
  .planos { grid-area: planos; border-top: 0; padding-top: 0; }
  .objeto { grid-area: objeto; border-top: 0; border-left: 1.5px solid var(--ink); padding: 0 0 24px 20px; }
  .planos, .objeto { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
  .planos.dossier-empty { display: none; }
  .box3d-host { max-height: min(560px, 56dvh); }
}
@media (min-width: 2200px) {
  .shell, .topbar, .colophon { width: 100%; max-width: 2200px; margin-inline: auto; }
}