/* ───────────────────────────────────────────────────────────────────────────
   swiss.css — Apple × Swiss for semantic HTML.
   System grotesk, flush left, hairline grid, black line icons, one red accent.
   Elements are styled by what they are (h1–h6, header, footer, nav, ol, li, a);
   classes appear only where two elements of the same kind play different roles.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #86868b;
  --paper: #fbfbfd;
  --cell: #fff;
  --cell-hover: #f5f5f7;
  --rule: #d2d2d7;
  --accent: #e30613;
  --bar: #000;
  --bar-ink: #f5f5f7;
  --bar-ink-2: #a1a1a6;
  --link-on-bar: #2997ff;
  --link: #0066cc;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;

  /* Text levels. Fluid between a phone and a desktop; each level steps down in size, then in weight, then in case. */
  --h1: clamp(1.625rem, min(1.25rem + 3.2vw, 7dvh), 3.5rem);
  --h2: clamp(1.375rem, min(1.05rem + 1.9vw, 5dvh), 2.25rem);
  --h3: clamp(1.25rem, 0.95rem + 1.1vw, 1.625rem);
  --h4: clamp(1.0625rem, 0.95rem + 0.45vw, 1.25rem);
  --h5: 1rem;
  --h6: 0.75rem;
  --body: 1rem;
  --small: 0.8125rem;

  --gutter: clamp(1rem, 4vw, 3rem);
  --bar-h: 5dvh;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ─── Base ─── */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { overflow: hidden; background: var(--paper); color: var(--ink); font: 400 var(--body)/1.4 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ol, ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
small { font-size: var(--small); }

/* ─── Text levels ─── */

h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--ink); font-weight: 700; line-height: 1.1; text-wrap: balance; }
h1 { font-size: var(--h1); letter-spacing: -0.035em; line-height: 1; }
h2 { font-size: var(--h2); letter-spacing: -0.03em; }
h3 { font-size: var(--h3); letter-spacing: -0.02em; font-weight: 600; }
h4 { font-size: var(--h4); letter-spacing: -0.01em; font-weight: 600; }
h5 { font-size: var(--h5); font-weight: 600; }
h6 { font-size: var(--h6); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

/* The page title: red square, heavy rule beneath. */
h1 { padding-bottom: 0.6rem; border-bottom: 2px solid var(--ink); }
h1::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.3em; background: var(--accent); vertical-align: 0.1em; }

/* ─── Bars: header and footer, black, 5% of the viewport each ─── */

body > header, body > footer { height: var(--bar-h); padding-inline: var(--gutter); background: var(--bar); color: var(--bar-ink);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: 100%; align-items: center; gap: 1rem; overflow: hidden; }
body > header > *, body > footer > * { min-width: 0; }

/* Header: back link left (kept in its cell when hidden, so nothing shifts), tenant centred, Ciserex right. */
body > header > a[rel="prev"] { justify-self: start; display: inline-flex; align-items: center; gap: 0.15em; padding: 0.2em 0.7em 0.2em 0.3em;
  border-radius: 999px; color: var(--link-on-bar); font-size: clamp(0.85rem, 2.2dvh, 1rem); white-space: nowrap; }
body > header > a[rel="prev"][hidden] { display: inline-flex; visibility: hidden; }
body > header > a[rel="prev"]:hover { background: rgb(255 255 255 / 0.12); }
body > header > a[rel="prev"] .ti { font-size: 1.25em; }
body > header > img { height: calc(var(--bar-h) * 0.7); width: auto; max-width: 56vw; object-fit: contain; }
body > header > a[rel="home"] { justify-self: end; display: flex; align-items: center; gap: 0.35em;
  color: #e9ebef; font: 600 clamp(0.95rem, 2.6dvh, 1.35rem)/1 var(--serif); letter-spacing: -0.01em; white-space: nowrap; }
body > header > a[rel="home"] img { height: calc(var(--bar-h) * 0.7); width: auto; }

/* Footer: where you are, left; the imprint, right. */
body > footer { grid-template-columns: 1fr auto; font-size: var(--small); }
body > footer ol { display: flex; gap: 0.4em; white-space: nowrap; overflow: hidden; }
body > footer li + li::before { content: "/"; margin-right: 0.4em; color: var(--bar-ink-2); }
body > footer li[aria-current] { color: var(--bar-ink); }
body > footer li:not([aria-current]) { color: var(--bar-ink-2); }
body > footer small { color: var(--bar-ink-2); }

/* ─── Stage: three sheets side by side (office, tool, stage); each level slides the next in from the right ─── */

main { height: calc(100dvh - 2 * var(--bar-h)); overflow: hidden; }
main > div { display: flex; width: 300%; height: 100%; transition: transform 0.55s var(--ease); }
main > div[data-level="1"] { transform: translateX(-33.3333%); }
main > div[data-level="2"] { transform: translateX(-66.6667%); }
main > div > * { width: calc(100% / 3); height: 100%; }
@media (prefers-reduced-motion: reduce) { main > div { transition: none; } }

/* A sheet: title, then the content in the space left. The launcher never scrolls (fit() sizes it); the others may. */
.sheet { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1rem, 2.5dvh, 1.5rem) var(--gutter); background: var(--paper); }
article.sheet { overflow: auto; overscroll-behavior: contain; }
article.sheet > * { flex: none; }
.sheet > .fit { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--shelf-gap); }
article.sheet > .fit { flex: none; }
.sheet > .lede { margin-top: -0.4rem; color: var(--ink-2); font-size: var(--h4); letter-spacing: -0.01em; }

/* ─── Shelf: a labelled section of tools. Sizes come from fit() as custom properties on <main>. ─── */

.shelf > header { display: flex; align-items: baseline; gap: 0.8em; height: calc(var(--head-font) * 1.25); margin-bottom: var(--head-gap);
  white-space: nowrap; overflow: hidden; }
.shelf > header h2 { display: flex; align-items: center; gap: 0.4em; font-size: calc(var(--head-font) * 0.85); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.25; }
.shelf > header h2 small { color: var(--accent); font-size: 1em; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.shelf > header p { overflow: hidden; text-overflow: ellipsis; color: var(--ink-3); font-size: calc(var(--head-font) * 0.85); }

/* The grid: an ordered list, numbered by CSS counter, cells drawn with overlapping hairlines. */
.shelf ol { display: grid; grid-template-columns: repeat(var(--cols), var(--col-w)); counter-reset: tool; }
.shelf li { counter-increment: tool; min-width: 0; }
.shelf li > * { position: relative; display: flex; flex-direction: column; align-items: flex-start; height: 100%; padding: var(--pad);
  background: var(--cell); outline: 1px solid var(--rule); outline-offset: -0.5px; transition: background-color 0.2s ease; }
.shelf li > *::before { content: counter(tool, decimal-leading-zero) / ""; position: absolute; top: var(--pad); right: var(--pad);
  color: var(--accent); font-size: calc(var(--font) * 0.8); font-weight: 600; font-variant-numeric: tabular-nums; }
.shelf li > a:hover { background: var(--cell-hover); }
.shelf li > a:focus-visible { outline: 2px solid var(--link-on-bar); outline-offset: -2px; z-index: 1; }
.shelf li .ti { font-size: var(--tile); line-height: 1; color: var(--ink); }
.shelf h3, .shelf li p { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.shelf h3 { margin-top: var(--text-gap); font-size: var(--font); font-weight: 600; letter-spacing: -0.01em; }
.shelf li p { color: var(--ink-3); font-size: calc(var(--font) * 0.78); }

/* ─── Pipeline: a tool's stages in order, one full-width block each, top to bottom, an arrow on every seam.
   A block reads left to right: what the stage is, its figure, its measures, its adjustments. ─── */

.pipeline { --seam: clamp(1.75rem, 4.5dvh, 2.75rem); --axis: calc(clamp(1rem, 1.6vw, 1.5rem) + 1.125rem);
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--seam); counter-reset: etapa; }
.pipeline > li { counter-increment: etapa; position: relative; min-width: 0; }
.pipeline > li > section { --inset: clamp(1rem, 1.6vw, 1.5rem); position: relative; display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(9rem, 0.75fr) minmax(0, 1.5fr) minmax(0, 2.2fr);
  grid-template-rows: auto 1fr; grid-template-areas: "head cifra medidas ajustes" "link cifra medidas ajustes";
  gap: 0.75rem clamp(1.25rem, 2.4vw, 2.5rem); padding: var(--inset); background: var(--cell); outline: 1px solid var(--rule); outline-offset: -0.5px; }
/* The seam: a hairline from one block to the next on the axis of the icons, and an arrow disc in the middle of the gap. */
.pipeline > li:not(:last-child)::before { content: ""; position: absolute; top: 100%; left: var(--axis); width: 1px; height: var(--seam); background: var(--rule); }
.pipeline > li:not(:last-child)::after { content: "\2193"; position: absolute; z-index: 1; bottom: calc(var(--seam) / -2); left: var(--axis); translate: -50% 50%;
  display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 1px solid var(--rule); border-radius: 50%;
  background: var(--paper); color: var(--accent); font-size: 0.9rem; font-weight: 700; line-height: 1; }

.pipeline header { grid-area: head; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 0.6rem; align-content: start; }
.pipeline header::before { content: counter(etapa, decimal-leading-zero) / ""; grid-column: 2; color: var(--accent); font-size: var(--small); font-weight: 600; font-variant-numeric: tabular-nums; }
.pipeline header .ti { grid-row: 1 / span 3; align-self: center; font-size: 2.25rem; line-height: 1; }
.pipeline h2 { font-size: var(--h3); letter-spacing: -0.02em; }
.pipeline h2 a:hover { color: var(--accent); }
.pipeline header p { color: var(--ink-3); font-size: var(--small); }

.cifra { grid-area: cifra; display: flex; flex-direction: column; justify-content: flex-start; gap: 0.35rem; padding-left: clamp(1rem, 1.6vw, 1.5rem); border-left: 2px solid var(--ink); }
.cifra data { font-size: clamp(2.5rem, 1.6rem + 2.4vw, 4.25rem); font-weight: 700; letter-spacing: -0.045em; line-height: 0.9; font-variant-numeric: tabular-nums; }
.cifra span { color: var(--ink-2); font-size: var(--small); }

.pipeline dl { grid-area: medidas; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; column-gap: 1.25rem; margin: 0; }
.pipeline dl > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.1rem; padding-block: 0.4rem 0.55rem; border-top: 1px solid var(--rule); font-size: var(--small); }
.pipeline dt { color: var(--ink-2); }
.pipeline dd { margin: 0; font-size: var(--body); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.pipeline form { grid-area: ajustes; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; column-gap: 1.25rem; }
.pipeline form h3 { grid-column: 1 / -1; margin-bottom: 0.3rem; color: var(--ink-3); font-size: var(--h6); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.detalle { grid-area: link; align-self: end; justify-self: start; display: inline-flex; align-items: center; gap: 0.35em; color: var(--link); font-size: var(--small); font-weight: 600; }
.detalle .ti { transition: translate 0.2s var(--ease); }
.detalle:hover .ti { translate: 0.2em 0; }
.pipeline a:focus-visible, .ajuste :focus-visible, .tabla input:focus-visible { outline: 2px solid var(--link-on-bar); outline-offset: 2px; border-radius: 4px; }

/* ─── Adjustments: one row per control, hairline between ─── */

.ajuste { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 2.6rem; padding-block: 0.35rem;
  border: 0; border-top: 1px solid var(--rule); margin: 0; font-size: var(--small); }
.ajuste > span { color: var(--ink); }
.ajuste.range { flex-wrap: wrap; row-gap: 0.2rem; }
.ajuste.range output { font-weight: 600; font-variant-numeric: tabular-nums; }
.ajuste.range input { flex-basis: 100%; }
fieldset.ajuste { flex-direction: column; align-items: stretch; gap: 0.35rem; padding: 0.5rem 0 0.4rem; }
fieldset.ajuste legend { float: left; margin: 0 0 0.35rem; padding: 0; color: var(--ink); }
fieldset.ajuste > div { clear: both; display: flex; flex-wrap: wrap; gap: 0.3rem; }

input[type="range"] { width: 100%; margin: 0; accent-color: var(--accent); }
select { max-width: 60%; padding: 0.3em 1.6em 0.3em 0.6em; border: 1px solid var(--rule); border-radius: 6px; appearance: none;
  background: var(--cell) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236e6e73' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 0.55em center;
  color: var(--ink); font: inherit; text-overflow: ellipsis; }

/* A switch: the checkbox itself, drawn as a pill. */
input[role="switch"] { flex: none; position: relative; width: 2.1rem; height: 1.25rem; margin: 0; border-radius: 999px; appearance: none; cursor: pointer;
  background: #e3e3e8; transition: background-color 0.2s ease; }
input[role="switch"]::before { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.25rem - 4px); aspect-ratio: 1; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.25); transition: translate 0.2s var(--ease); }
input[role="switch"]:checked { background: var(--accent); }
input[role="switch"]:checked::before { translate: 0.85rem 0; }

/* Segmented and multi-choice: the inputs are hidden behind their labels, which read as chips. */
.segmented > div, .checks > div { gap: 0 !important; }
.segmented label, .checks label { position: relative; flex: 1; min-width: max-content; }
.segmented input, .checks input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.segmented span, .checks span { display: block; padding: 0.3em 0.7em; border: 1px solid var(--rule); margin-left: -1px; background: var(--cell); color: var(--ink-2); text-align: center; transition: background-color 0.2s ease, color 0.2s ease; }
.segmented label:first-child span, .checks label:first-child span { margin-left: 0; border-radius: 6px 0 0 6px; }
.segmented label:last-child span, .checks label:last-child span { border-radius: 0 6px 6px 0; }
.segmented input:checked + span, .checks input:checked + span { position: relative; border-color: var(--ink); background: var(--ink); color: var(--paper); }
.segmented input:focus-visible + span, .checks input:focus-visible + span { outline: 2px solid var(--link-on-bar); outline-offset: 1px; }

/* ─── Stage detail: the figures in a row, then tables ─── */

.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin: 0; border-top: 2px solid var(--ink); }
.cifras > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.2rem; padding: 0.8rem 1rem 0.9rem 0; border-bottom: 1px solid var(--rule); }
.cifras dt { color: var(--ink-2); font-size: var(--small); }
.cifras dd { display: flex; align-items: flex-end; min-height: calc(var(--h2) * 1.1); margin: 0; font-size: var(--h3); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cifras > div:first-child dd { color: var(--accent); font-size: var(--h2); font-weight: 700; }

.tabla { margin-top: 1rem; }
.tabla > header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.8em; margin-bottom: 0.4rem; }
.tabla > header h2 { font-size: var(--small); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.tabla > header h2 small { color: var(--accent); font-size: 1em; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.tabla > header p { color: var(--ink-3); font-size: var(--small); }
/* A table wider than its box scrolls, and says so: soft shadows at the edges that can still scroll (they travel with the content). */
.scroll { overflow-x: auto; background:
  linear-gradient(to right, var(--paper) 30%, transparent) left / 2rem 100% no-repeat local,
  linear-gradient(to left, var(--paper) 30%, transparent) right / 2rem 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / 0.14), transparent) left / 0.9rem 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 0.14), transparent) right / 0.9rem 100% no-repeat scroll; }
.tabla table { width: 100%; border-collapse: collapse; font-size: var(--small); font-variant-numeric: tabular-nums; }
.tabla thead th { padding: 0.45rem 0.75rem 0.45rem 0; border-bottom: 1px solid var(--ink); color: var(--ink-3); font-size: var(--h6); font-weight: 600;
  letter-spacing: 0.08em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.tabla td, .tabla tbody th { padding: 0.55rem 0.75rem 0.55rem 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; font-weight: 400; }
.tabla tbody th > span { font-weight: 600; }
.tabla tbody th small { display: block; max-width: 48ch; margin-top: 0.1rem; color: var(--ink-3); font-size: 0.75rem; line-height: 1.35; }
.tabla tbody tr:hover { background: var(--cell-hover); }
.tabla tr.off th > span, .tabla tr.off td:not(.sw) { color: var(--ink-3); }
.tabla .num { text-align: right; white-space: nowrap; }
.tabla td.sw { width: 1%; }
.tabla td.bar { width: 38%; min-width: 10rem; }
.tabla td.bar > div { display: flex; align-items: center; gap: 0.6rem; }
.tabla td.bar .num { flex: none; min-width: 2.5ch; }
.tabla .track { flex: 1; height: 0.5rem; background: var(--cell-hover); }
.tabla .track > span { display: block; height: 100%; background: var(--accent); }
.tabla tr.off .track > span { background: var(--ink-3); }
.tag { display: inline-block; margin: 0 0.25rem 0.2rem 0; padding: 0.05em 0.5em; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-2); font-size: 0.75rem; white-space: nowrap; }
.marca { display: inline-block; padding-left: 0.7em; position: relative; white-space: nowrap; }
.marca::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 0.4em; height: 0.4em; background: var(--ink-3); }
.marca[data-tono="ok"]::before { background: var(--ink); }
.marca[data-tono="aviso"]::before { background: #f5a623; }
.marca[data-tono="riesgo"]::before { background: var(--accent); }
.swatch { display: inline-block; width: 0.7em; height: 0.7em; margin-right: 0.5em; background: var(--c); vertical-align: -0.05em; }

/* Table views: sortable headers, the group-by control, collapsible group rows. */
.tabla > header .vista { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; font-size: var(--small); }
.tabla > header .vista > span { color: var(--ink-3); white-space: nowrap; }
.vista .segmented { display: flex; }
.tabla thead th button { display: inline-flex; align-items: center; gap: 0.3em; padding: 0; border: 0; background: none; color: inherit;
  font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.tabla thead th.num button { flex-direction: row-reverse; }
.tabla thead th button .ti { font-size: 1.1em; opacity: 0.35; transition: opacity 0.2s ease; }
.tabla thead th button:hover { color: var(--ink); }
.tabla thead th button:hover .ti, .tabla thead th[aria-sort="ascending"] .ti, .tabla thead th[aria-sort="descending"] .ti { opacity: 1; }
.tabla thead th[aria-sort="ascending"], .tabla thead th[aria-sort="descending"] { color: var(--accent); }
.tabla thead th button:focus-visible, .tabla .grupo button:focus-visible { outline: 2px solid var(--link-on-bar); outline-offset: 2px; border-radius: 4px; }
.tabla tr.grupo:hover { background: none; }
.tabla tr.grupo th { padding: 1.1rem 0 0.4rem; border-bottom: 1px solid var(--ink); }
.tabla tbody:first-of-type tr.grupo th { padding-top: 0.6rem; }
.tabla tr.grupo button { display: inline-flex; align-items: baseline; gap: 0.45rem; padding: 0; border: 0; background: none; color: var(--ink);
  font: 600 var(--small)/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.tabla tr.grupo button .ti { align-self: center; font-size: 1rem; transition: rotate 0.2s var(--ease); }
.tabla tr.grupo button[aria-expanded="false"] .ti { rotate: -90deg; }
.tabla tr.grupo small { color: var(--accent); font-size: 1em; letter-spacing: 0; font-variant-numeric: tabular-nums; text-transform: none; }

/* Table or grid: the mode switch in every table header, and the cards of the grid (same cells, labelled). */
.tabla > header .modo { display: inline-flex; margin-left: auto; }
.tabla > header .vista + .modo { margin-left: 0.6rem; }
.modo button { display: inline-grid; place-items: center; width: 2rem; height: 1.8rem; padding: 0; border: 1px solid var(--rule); margin-left: -1px; background: var(--cell); color: var(--ink-2); cursor: pointer; }
.modo button:first-child { margin-left: 0; border-radius: 6px 0 0 6px; }
.modo button:last-child { border-radius: 0 6px 6px 0; }
.modo button[aria-pressed="true"] { position: relative; border-color: var(--ink); background: var(--ink); color: var(--paper); }
.modo button .ti { font-size: 1rem; }
.modo button:focus-visible { outline: 2px solid var(--link-on-bar); outline-offset: 1px; }
.cuadricula { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0; margin-top: 0.6rem; }
.cuadricula > li { min-width: 0; }
.cuadricula article { display: flex; flex-direction: column; height: 100%; padding: 0.9rem 1rem 1rem; background: var(--cell); outline: 1px solid var(--rule); outline-offset: -0.5px; font-size: var(--small); font-variant-numeric: tabular-nums; }
.cuadricula article:hover { background: var(--cell-hover); }
.cuadricula article > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.6rem; padding-bottom: 0.55rem; border-bottom: 2px solid var(--ink); }
.cuadricula article > header > div:first-child { min-width: 0; }
.cuadricula article > header > div:first-child > span { font-weight: 600; font-size: var(--body); letter-spacing: -0.01em; }
.cuadricula article > header small { display: block; margin-top: 0.15rem; color: var(--ink-3); font-size: 0.75rem; }
.cuadricula dl { display: grid; gap: 0; margin: 0; }
.cuadricula dl > div { display: grid; grid-template-columns: minmax(6rem, 40%) 1fr; gap: 0.6rem; padding: 0.3rem 0; border-top: 1px solid var(--rule); }
.cuadricula dl > div:first-child { border-top: 0; }
.cuadricula dt { color: var(--ink-3); font-size: var(--h6); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; align-self: center; }
.cuadricula dd { margin: 0; min-width: 0; }
.cuadricula dd > div.num { text-align: left; }
.cuadricula dd > div.bar > div { display: flex; align-items: center; gap: 0.5rem; }
.cuadricula .track { flex: 1; height: 0.4rem; background: var(--cell-hover); }
.cuadricula .track > span { display: block; height: 100%; background: var(--accent); }
.cuadricula li.off article > header span, .cuadricula li.off dd { color: var(--ink-3); }
.grupo-cuadricula { margin-top: 1.1rem; font-size: var(--small); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.grupo-cuadricula small { color: var(--accent); letter-spacing: 0; }

/* Charts (nucleo/graficos.js: d3 + Observable Plot + d3-sankey). The figure reserves its height, so the page does not jump when the library draws. */
figure.grafico { margin: 0; min-width: 0; }
figure.grafico figcaption { margin-bottom: 0.35rem; color: var(--ink-3); font-size: var(--h6); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
figure.grafico figcaption small { color: var(--ink-3); font-size: 1em; font-weight: 400; letter-spacing: 0; text-transform: none; }
figure.grafico .grafico-lienzo { min-height: var(--alto, 180px); overflow-x: auto; }
figure.grafico .grafico-svg { display: block; max-width: 100%; height: auto; }
figure.grafico .grafico-cargando, figure.grafico .grafico-error { display: grid; place-items: center; min-height: var(--alto, 180px); color: var(--ink-3); font-size: var(--small); }
figure.grafico .marca-interactiva { cursor: pointer; }
figure.grafico rect.marca-interactiva:hover { opacity: 0.8; }
figure.grafico rect.zona:is(:hover, [aria-pressed="true"], [aria-describedby]) { fill: rgb(29 29 31 / 0.05); opacity: 1; }
figure.grafico .marca-interactiva:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
figure.grafico-compacto .grafico-lienzo { overflow: hidden; }
figure.grafico .bandas path { transition: stroke-opacity 0.15s ease; }
figure.grafico .bandas path:hover { stroke-opacity: 0.5; }
figure.grafico .nodos g.marca-interactiva:hover rect { stroke: var(--accent); stroke-width: 2px; }
figure.grafico [aria-label="y-axis tick label"] text, figure.grafico [aria-label="x-axis tick label"] text { fill: var(--ink-2); }

/* ─── Buttons ─── */

.boton { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.45em 0.9em; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--cell); color: var(--ink); font: 600 var(--small)/1.2 var(--sans); white-space: nowrap; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; }
.boton .ti { font-size: 1.15em; }
.boton:hover { border-color: var(--ink-3); }
.boton.primario { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.boton.primario:hover { background: #000; }
.boton.peligro { border-color: var(--accent); background: var(--accent); color: #fff; }
.boton.peligro.sutil { border-color: transparent; background: none; color: var(--accent); }
.boton.peligro.sutil:hover { border-color: var(--accent); }
.boton:disabled, .icono:disabled { opacity: 0.45; cursor: default; }
.icono { display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; }
.icono .ti { font-size: 1.15rem; }
.icono:hover:not(:disabled) { background: var(--cell-hover); color: var(--ink); }
.boton:focus-visible, .icono:focus-visible { outline: 2px solid var(--link-on-bar); outline-offset: 2px; }

/* Live states shared by any stage. */
.muted { color: var(--ink-3); }
.marca.girando::before { background: var(--link); animation: latido 0.9s ease-in-out infinite; }
@keyframes latido { 50% { opacity: 0.2; } }

/* ─── The side sheet: a modal dialog sliding in from the right ─── */

dialog.hoja { position: fixed; inset: 0 0 0 auto; width: min(44rem, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0;
  border: 0; border-left: 1px solid var(--rule); background: var(--paper); color: var(--ink); box-shadow: -24px 0 48px rgb(0 0 0 / 0.08);
  transition: translate 0.45s var(--ease), overlay 0.45s allow-discrete, display 0.45s allow-discrete; }
dialog.hoja[open] { display: flex; flex-direction: column; translate: 0 0; }
dialog.hoja:not([open]) { translate: 100% 0; }
@starting-style { dialog.hoja[open] { translate: 100% 0; } }
dialog.hoja::backdrop { background: rgb(0 0 0 / 0.3); }
@media (prefers-reduced-motion: reduce) { dialog.hoja { transition: none; } }

dialog.hoja > header { position: relative; flex: none; padding: 1.25rem 3.5rem 0.9rem var(--gutter); border-bottom: 2px solid var(--ink); }
dialog.hoja > header h2 { font-size: var(--h2); }
dialog.hoja > header h2::before { content: ""; display: inline-block; width: 0.45em; height: 0.45em; margin-right: 0.3em; background: var(--accent); vertical-align: 0.1em; }
dialog.hoja > header p { margin-top: 0.2rem; color: var(--ink-2); font-size: var(--small); }
dialog.hoja > header .icono { position: absolute; top: 1rem; right: 1rem; }
dialog.hoja > form, dialog.hoja > .cuerpo { flex: 1; min-height: 0; overflow: auto; padding: 1rem var(--gutter) 1.5rem; }
dialog.hoja > footer { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; padding: 0.8rem var(--gutter); border-top: 1px solid var(--rule); background: var(--cell); }
dialog.hoja .empuje { flex: 1; }
dialog.hoja .confirmar { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--accent); font-size: var(--small); font-weight: 600; }
dialog.hoja code { font-size: 0.95em; }

.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1.25rem; }
.campo { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.campo.ancho { grid-column: 1 / -1; }
.campo label { color: var(--ink-2); font-size: var(--h6); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.campo input, .campo textarea, .campo select { width: 100%; max-width: none; padding: 0.5em 0.65em; border: 1px solid var(--rule); border-radius: 6px; background-color: var(--cell);
  color: var(--ink); font: inherit; font-size: var(--small); }
.campo select { padding-right: 1.6em; }
.campo input[readonly] { background: var(--cell-hover); color: var(--ink-2); }
.campo textarea { resize: vertical; }
.campo :is(input, textarea, select):focus { outline: 2px solid var(--link-on-bar); outline-offset: -1px; border-color: transparent; }
.campo :is(input, textarea):user-invalid { border-color: var(--accent); }
.campo small { color: var(--ink-3); font-size: 0.75rem; }
dialog.hoja .error { display: flex; gap: 0.4rem; margin-top: 1rem; padding: 0.6rem 0.8rem; border-left: 3px solid var(--accent); background: #fdecee; color: var(--ink); font-size: var(--small); }

.lectura { margin-top: 1.25rem; }
dialog.hoja > .cuerpo .lectura { margin-top: 0; }
.lectura h3 { margin-bottom: 0.4rem; color: var(--ink-3); font-size: var(--h6); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.estado-lectura { padding-bottom: 0.6rem; border-bottom: 1px solid var(--ink); color: var(--ink-2); font-size: var(--small); }
.estado-lectura .marca { margin-right: 0.4rem; color: var(--ink); font-weight: 600; }
.items { counter-reset: item; }
.items li { counter-increment: item; position: relative; padding: 0.7rem 0 0.75rem 2rem; border-bottom: 1px solid var(--rule); }
.items li::before { content: counter(item, decimal-leading-zero); position: absolute; left: 0; top: 0.75rem; color: var(--accent); font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.items a { font-weight: 600; line-height: 1.3; }
.items a:hover { color: var(--link); }
.items small { display: block; margin-top: 0.15rem; color: var(--ink-3); font-size: 0.75rem; }
.items p { margin-top: 0.3rem; color: var(--ink-2); font-size: var(--small); line-height: 1.45; }

.procedencia { display: flex; gap: 0.5rem; margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid var(--rule); color: var(--ink-3); font-size: 0.75rem; }
.procedencia .ti { font-size: 1rem; }
.procedencia strong { color: var(--ink-2); font-weight: 600; }

/* Medium: the block folds into two rows — identity and figure, then measures and adjustments. */
@media (max-width: 1180px) {
  .pipeline > li > section { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto;
    grid-template-areas: "head cifra" "medidas ajustes" "link ajustes"; }
  .pipeline form { grid-template-columns: minmax(0, 1fr); }
}

/* ─── Narrow screens ─── */

@media (max-width: 640px) {
  body > header { gap: 0.5rem; }
  body > header > a[rel="home"] span { display: none; }
  body > header > a[rel="prev"] { padding-right: 0.3em; }
  body > header > a[rel="prev"] span:not(.ti) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body > footer small { display: none; }
  body > footer { grid-template-columns: 1fr; }
  .pipeline > li > section { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "cifra" "medidas" "ajustes" "link"; row-gap: 1rem; }
  .cifra { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 0 0.5rem; padding: 0.9rem 0 0; border-left: 0; border-top: 2px solid var(--ink); }
  .tabla td.bar { min-width: 7rem; }
  .tabla > header .vista { flex-wrap: wrap; margin-left: 0; }
  .campos { grid-template-columns: minmax(0, 1fr); }
  dialog.hoja { border-left: 0; }
}