/* Mineral — the design system from docs/design-system.html, as a token file.
 *
 * Rules this file exists to enforce (see "Agent rules" in the design system):
 *  - a component never hardcodes a colour, radius, spacing or shadow a token
 *    already carries;
 *  - `data-theme` on <html> owns the theme, and both themes define every token;
 *  - dark is the default, light is a persisted preference.
 *
 * Only Latin subsets are vendored: Spanish fits in U+0000-00FF, and skipping
 * latin-ext and the six unused DM Sans weights keeps this at ~92 kB with no
 * request to a third-party origin (which the strict CSP would otherwise need an
 * exception for).
 */

/* ── Typefaces ───────────────────────────────────────────────────────────── */

/* One variable file covers every weight the design system uses (300–900). */
@font-face {
	font-family: "DM Sans";
	src: url("/fonts/dm-sans-var-latin.woff2") format("woff2-variations");
	font-weight: 300 1000;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "DM Mono";
	src: url("/fonts/dm-mono-400-latin.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "DM Mono";
	src: url("/fonts/dm-mono-500-latin.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* ── Theme tokens ───────────────────────────────────────────────────────── */

:root,
[data-theme="dark"] {
	color-scheme: dark;

	--bg-solid: #0c0f14;
	--surf: rgba(255, 255, 255, 0.05);
	--surf2: rgba(255, 255, 255, 0.03);
	--surf-hover: rgba(255, 255, 255, 0.09);
	--bord: rgba(255, 255, 255, 0.09);
	--bord2: rgba(255, 255, 255, 0.06);
	--bord-bright: rgba(212, 132, 90, 0.35);

	--az: #d4845a;
	--vib: #d4845a;
	--vd: #6ecfb0;
	--am: #e8b84a;
	--rj: #e86363;

	/* Filled badges — the selected state of the aptitude chips. In the dark theme
	   these are the palette colours themselves with a near-black label; in the
	   light theme the palette's *text* values (#1b9e7a, #a07020, #c03030) cannot
	   carry any single label colour (white is 3.38:1 on the jade and 4.34:1 on
	   the amber; near-black is 3.11:1 on the red), so the fills are their own
	   tokens. The prototype did the same thing for `--lv-n1..n4`. */
	--on-accent: #1c1814;
	--fill-ok: #6ecfb0;
	--fill-warn: #e8b84a;
	--fill-bad: #e86363;
	--fill-accent: #d4845a;

	--tx: #f2ede8;
	--tx2: #c8bfb4;
	/* The muted ladder, corrected. The design system shipped `--mt` #8a7f74
	   (4.91:1) and `--mt2` #5c534a (**2.55:1**), and `--mt2` carries the
	   smallest type in the app — 9px uppercase rail group labels, every table
	   header, instrument codes. 2.55:1 fails WCAG 2.1 AA, and the densest layer
	   of the interface was the least legible one. The values below are the ones
	   `prototype/NOTES.md` §"Contraste" computed and ratified: four steps,
	   16.5 / 10.6 / 7.1 / 4.6, all of them AA at any size. */
	--mt: #a79c90;
	/* Not #857a70. The prototype measured its ladder against `--bg-solid` only,
	   where #857a70 is 4.58:1 — but almost all of this token's text sits on a
	   *card*, and `--surf` is rgba(255,255,255,.05) over the page, where the same
	   value is 4.12:1 and still fails. 4.90:1 on the card, 5.45:1 on the page. */
	--mt2: #928779;

	--copper: #d4845a;
	/* Copper as a *text* colour, which `--copper` is not: the brand value is for
	   fills and borders. */
	--copper-text: #d4845a;
	/* Text *on* copper. White on #d4845a is 2.90:1 — the primary button failed
	   AA in dark. Near-black on copper is 6.09:1, and it reads as a bronze
	   plate rather than as a sticker. */
	--on-copper: #1c1814;
	--copper-dim: rgba(212, 132, 90, 0.15);
	--accent-glow: rgba(212, 132, 90, 0.12);
	/* A tenant swap changes this one property (design-system contract). It is
	   now read: the wordmark's chip derives from it. */
	--brand: #d4845a;
	/* The wordmark's chip, from the prototype's `.wordmark .wm-txt .s`. Its first
	   stop is `--brand`, so the tenant property has a real consumer and the chip
	   cannot drift from it. Same value today, so nothing moves on screen. */
	--logo-chip: linear-gradient(135deg, var(--brand), #b06030);

	/* ── Veta · the mineral palette ────────────────────────────────────────
	 *
	 * Four registers, and one law: colour that carries a word is **Estado**,
	 * colour that carries a place is **Gerencia**, colour that carries a rank is
	 * **Ordinal** — and the brand is one colour that classifies nothing.
	 *
	 * Every hue here is named after a mineral of the faena, which is why the
	 * product looks like Collahuasi and not like a dashboard. Additive: no
	 * existing value moves. It replaces the domain tokens that were declared in
	 * both themes and read by nothing (see the shared block below).
	 */

	/* ══ REGISTRO 1 · ESTADO — five families, four roles each
	 * tx = the colour as text on page/card    fill = a surface with --on-accent on it
	 * bg = a tint for blocks and rows         bd = the boundary that closes one
	 * The four tx values and three fills already shipped and were measured;
	 * Azurita and every bg/bd are new. Azurita is the state the app was missing:
	 * "Enviada sin firmar" is neither a warning nor a success, and it was
	 * borrowing the brand copper — which made the brand mean a state.
	 *
	 * `-bd` is a boundary, not a hairline. A 35% tint of the family colour is
	 * 2.22:1 on the page — under WCAG 1.4.11 for a component edge, which is what
	 * closes an input, a checkbox or a bar. These are opaque and clear 3:1 on
	 * both the page and the card, so no call site has to ask which kind it is.
	 * The decorative hairline is still --bord / --bord2 / --bord-bright. */
	--ok: var(--vd);
	--warn: var(--am);
	--bad: var(--rj);
	--info: #8fb8e8;
	--accent-tx: var(--copper-text);

	--ok-bg: rgba(110, 207, 176, 0.1);
	--warn-bg: rgba(232, 184, 74, 0.1);
	--bad-bg: rgba(232, 99, 99, 0.1);
	--info-bg: rgba(143, 184, 232, 0.1);
	--accent-bg: var(--copper-dim);

	--ok-bd: #407064;
	--warn-bd: #7a6534;
	--bad-bd: #a34b4d;
	--info-bd: #526882;
	--accent-bd: #8b5b43;

	/* Azurita's fill, carrying the same near-black label as the other four. */
	--info-fill: #a9cbef;

	/* ══ REGISTRO 2 · GERENCIA — six oxide hues plus two cases, markers only
	 * Named for the gerencia and not for an área: the areas layer is some
	 * twenty-seven rows and grows with every faena. A colour per área would be
	 * that many decisions and that many mistakes; a colour per gerencia is five,
	 * and the org chart is what people already use.
	 *
	 * This is the band that gives the product its identity. Two real areas are
	 * both called "Molienda" and two more both read "Flotación", and the marker
	 * is what tells them apart at a glance.
	 *
	 * Markers only — a rail, a dot or a border. A gerencia colour never carries a
	 * word, which is what keeps it out of the estado register; `tokens.test.ts`
	 * asserts that separation. The key comes from `lib/ui/gerencia.ts` and the
	 * colour is resolved by the `[data-marker]` rules in the Base section. */
	--ger-concentradora: #bf8a63; /* Operaciones Concentradora · the copper itself */
	--ger-mantencion: #b87f73; /* Mantención · hematita, oxide on steel */
	--ger-puerto: #7c9cbe; /* Puerto · azurita: the only cold hue, and it is the sea */
	--ger-metalurgia: #c0a96b; /* Metalurgia · azufre, the assay lab */
	--ger-integridad: #7ba694; /* Integridad Procesos · malaquita */
	--ger-operaciones: #a794be; /* a gerencia the seed does not name · manganeso */
	--ger-none: #8a8078; /* gerencia = '' — and one real área has exactly that */

	/* ══ REGISTRO 3 · ORDINAL — a four-step bronze ladder
	 * For anything that is a rank and not a category: secciones A/B/C, and the
	 * item numbering in the wizard. One hue holding, lightness climbing — it
	 * reads as "more" without saying anything about kind, so it can never be
	 * mistaken for a result. On dark, more = lighter. */
	--ord-1: #8a6a50;
	--ord-2: #a98363;
	--ord-3: #c79c77;
	--ord-4: #e5be9a;

	--font: "DM Sans", sans-serif;
	--mono: "DM Mono", monospace;

	--sh: 0 4px 24px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
	--shl: 0 16px 56px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.06) inset;

	--glass-blur: blur(24px) saturate(180%);
	--glass-border: 1px solid rgba(212, 132, 90, 0.15);
	--glass-shine: linear-gradient(
		135deg,
		rgba(212, 132, 90, 0.08) 0%,
		rgba(255, 255, 255, 0.03) 40%,
		transparent 100%
	);

	/* The design system's primary button gradient. Its second stop is lighter than
	   the original #b06030 because `--on-copper` is a near-black label in *both*
	   themes, and #1c1814 on #b06030 is 3.83:1 — the prototype measured only the
	   light stop. At #c1744a the label clears AA on both ends (6.09 / 4.93), and
	   the hover's brightness(1.06) raises contrast rather than spending it. */
	--accent-gradient: linear-gradient(135deg, #d4845a, #c1744a);
	--accent-shadow: 0 4px 14px rgba(212, 132, 90, 0.3);

	/* The ring is the focus indicator, so it is measured like one: WCAG asks a
	   focus indicator for 3:1 against the surfaces it surrounds. `rgba(…, .35)`
	   was **1.79:1** over `--bg-solid` — a glow that is legible on a monitor and
	   invisible to the people the criterion is for. `.9` is **5.55:1** on the
	   page, 5.06:1 on a card, 4.73:1 on a field and 4.01:1 on a hover surface,
	   and it is the value `--focus-ring-strong`'s own ring already used.
	   Asserted (both themes, four surfaces) by
	   `src/lib/ui/tokens.contrast.test.ts`. */
	--focus-ring: 0 0 0 3px rgba(212, 132, 90, 0.9);
	/* A copper ring on a copper button is invisible: the indicator has to
	   contrast with the element it surrounds, not with the page. This is the
	   backing ring, drawn *under* `--focus-ring`. */
	--focus-ring-strong: 0 0 0 2px var(--bg-solid), 0 0 0 4px rgba(212, 132, 90, 0.9);
}

[data-theme="light"] {
	color-scheme: light;

	--bg-solid: #faf8f5;
	--surf: rgba(255, 255, 255, 0.9);
	--surf2: rgba(255, 255, 255, 0.7);
	--surf-hover: rgba(255, 255, 255, 0.97);
	--bord: rgba(90, 70, 50, 0.2);
	--bord2: rgba(90, 70, 50, 0.12);
	--bord-bright: rgba(180, 100, 60, 0.25);

	--az: #b06030;
	--vib: #b06030;
	/* The prototype's light-theme semantic set. The app's #1b9e7a / #a07020 /
	   #c03030 were the *fill* values, and as text on cream they are 3.19 / 4.10 /
	   5.34:1 — the jade and the amber both failed, and they are what "Logrado"
	   and "En desarrollo" are written in. These three are 6.11 / 5.58 / 6.20:1. */
	--vd: #0e6b51;
	--am: #8a5a10;
	--rj: #b32424;

	/* The same near-black label on a lighter fill: 10.79 / 10.33 / 8.23:1. */
	--on-accent: #1c1814;
	--fill-ok: #8ed9c0;
	--fill-warn: #e9c169;
	--fill-bad: #ee9b9b;
	--fill-accent: #e0a077;

	--tx: #1c1814;
	--tx2: #3a3430;
	/* `--mt2` #9a8e84 was 3.01:1 on cream, and `--mt` #6a5e54 compressed the
	   ladder once `--mt2` moved. The prototype's pair, 7.35 / 4.82:1. */
	--mt: #5c5048;
	--mt2: #786c60;

	--copper: #b06030;
	/* Copper as text: #b06030 on #faf8f5 is 4.34:1, just under AA. The prototype's
	   #9c4f1d is 5.58:1. The brand copper stays intact for fills and borders. */
	--copper-text: #9c4f1d;
	/* On copper in the light theme white is 4.60:1 — but only against the flat
	   `--brand`, and the button paints a gradient. One near-black label for both
	   themes is simpler, and the copper plate reads as the brand rather than as a
	   sticker. */
	--on-copper: #1c1814;
	--copper-dim: rgba(176, 96, 48, 0.1);
	--accent-glow: rgba(176, 96, 48, 0.08);
	--brand: #b06030;
	/* In the light theme the prototype's chip is flat `--brand`. */
	--logo-chip: linear-gradient(135deg, var(--brand), var(--brand));

	/* ── Veta · the light half of the palette. Same five families, chalk-toned:
	 * the dark theme is jewel-toned and this one is chalk-toned on purpose, since
	 * a saturated jade behind 10px of DM Mono is legible on near-black and loud
	 * on cream. `--ok`/`--warn`/`--bad` repeat their aliases rather than inheriting
	 * them, because "both themes define every token" is the rule this file
	 * enforces and `tokens.test.ts` reads each block as text. */
	--ok: var(--vd);
	--warn: var(--am);
	--bad: var(--rj);
	--info: #2a5f96;
	--accent-tx: var(--copper-text);

	--ok-bg: rgba(14, 107, 81, 0.09);
	--warn-bg: rgba(138, 90, 16, 0.09);
	--bad-bg: rgba(179, 36, 36, 0.09);
	--info-bg: rgba(42, 95, 150, 0.09);
	--accent-bg: var(--copper-dim);

	--ok-bd: #0e6b51;
	--warn-bd: #8a5a10;
	--bad-bd: #b32424;
	--info-bd: #2a5f96;
	--accent-bd: #9c4f1d;

	--info-fill: #a9cbef;

	--ger-concentradora: #a8632c;
	--ger-mantencion: #99453a;
	--ger-puerto: #2a5e96;
	--ger-metalurgia: #836614;
	--ger-integridad: #22674f;
	--ger-operaciones: #684a96;
	--ger-none: #7a7268;

	/* On cream, more = darker. The ladder counts down. */
	--ord-1: #ad8257;
	--ord-2: #98683d;
	--ord-3: #7c5127;
	--ord-4: #5c3916;

	--sh: 0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(255, 255, 255, 0.95) inset;
	--shl: 0 8px 32px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.95) inset;

	--glass-blur: blur(20px) saturate(150%);
	--glass-border: 1px solid rgba(90, 70, 50, 0.1);
	--glass-shine: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.9) 0%,
		rgba(255, 255, 255, 0.3) 50%,
		transparent 100%
	);

	/* Same correction, same criterion: `.2` was **1.29:1** on cream. `.9` is
	   3.68:1, and it is what `--focus-ring-strong` below already used. */
	--focus-ring: 0 0 0 3px rgba(176, 96, 48, 0.9);
	--focus-ring-strong: 0 0 0 2px var(--bg-solid), 0 0 0 4px rgba(176, 96, 48, 0.9);
}

/* Same in both themes. */
:root {
	/* The signature's paper (L15). A stored signature is a **document**, not a
	   piece of the interface: it is drawn once, printed on a light report and read
	   back in either theme, so its colours cannot follow the theme. `--tx` as ink
	   is what made a signature drawn in the dark theme disappear on a light page.
	   Paper is the light theme's page and ink its text colour. */
	--sig-paper: #faf8f5;
	--sig-ink: #1c1814;

	/* `cambiar-clave` referenced `--err` and it was never defined, so the
	   declaration was dropped and the message inherited the body colour. It is
	   the danger tone; the alias is what the screen asked for. */
	--err: var(--rj);

	/* The type scale the design system describes in prose
	   (`docs/design-system.html:387`), named. Without it every component invents
	   its own size: the app had ten of them between 9px and 14px, which is why
	   nothing looks like it belongs to the same document. */
	--fs-display: 40px;
	--fs-hero: 34px;
	--fs-sect: 28px;
	--fs-card: 22px;
	--fs-logo: 16px;
	--fs-modal: 15px;
	--fs-btn: 14px;
	--fs-body: 13px;
	--fs-cell: 12px;
	--fs-label: 11px;
	--fs-micro: 10px;
	--fs-head: 9px;

	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 20px;
	--sp-6: 24px;
	--sp-7: 32px;
	--sp-8: 40px;
	--sp-9: 48px;

	--r-1: 6px;
	--r-2: 8px;
	--r-3: 12px;
	--r-4: 16px;
	--r-5: 24px;

	/* Component radii, per the design system's hierarchy: cards 22, modals 14,
	   inputs 7–10, pills half their height. */
	--r-card: 22px;
	--r-modal: 14px;
	--r-input: 8px;
	--r-pill: 999px;

	/* Form controls have one height, and a button that sits on the same line as one
	   uses it too (`<Button size="field">`). Without a shared token the two drift:
	   inputs were 34px and the button sizes were 26/30/42px, so a field and its own
	   submit button could not line up at any size. */
	--h-field: 34px;

	/* The label line above every form control, in `FieldLabel`. This is what makes a
	   **row** of fields line up: every field-like control starts with a line of
	   exactly this height, so their controls begin at the same y however tall their
	   hint or their error turns out to be. It is also the offset a button beside a
	   field has to carry, because a button has no label of its own. */
	--h-label: 16px;

	--z-base: 0;
	--z-dropdown: 100;
	--z-sticky: 200;
	--z-modal: 300;
	--z-toast: 400;

	--dur-1: 0.1s;
	--dur-2: 0.15s;
	--dur-3: 0.3s;
	--dur-4: 0.5s;

	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

	/* The gerencia marker's colour, resolved by the `[data-marker]` rules in the
	   Base section below. Declared here, in the block both themes read, so the
	   marker has a defined value in either theme and an unrecognised key degrades
	   to yeso-grey instead of to nothing. */
	--ger: var(--ger-none);

	/* Deleted from here: the categorical and domain layer that this repo
	   inherited from the design system — the six `--cat-*` series (two reds, a
	   pure `#c00000`, two cold blues that were the only cold thing in a
	   warm-mineral system), the `--est-*` and `--di-*` triads, and the `--lv-N1`
	   … `--lv-N4` ladder whose bottom step was a cold `#37474f`. Every one of
	   them was declared in both themes and read by **nothing** in `web/src`.
	
	   They are deleted rather than recoloured. Recolouring a token nobody reads
	   leaves it unread, and the next person still cannot tell whether it matters.
	
	   The Mineral series ramp (seven hues, `--cat-1` … `--cat-7`, with the pure
	   red removed) is specified and measured in `docs/paleta-veta.html`. It lands
	   with the first screen that actually draws a series: on the near-black
	   ground no eight-hue set separates under dichromacy — measured minimum
	   ΔL 1.1 — so a chart has to label its series rather than trust the colour,
	   and inventing the tokens early would only repeat the defect above. */
}

/* ── Base ───────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	/* Density is deliberate: trainers work through long item lists. */
	font-size: 13px;
}

body {
	margin: 0;
	background: var(--bg-solid);
	color: var(--tx);
	font-family: var(--font);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

a {
	/* A link is text, so it takes the AA-safe copper rather than the brand value.
	   They are the same colour in the dark theme; in the light theme `--az`
	   (#b06030) is 4.34:1 and fails. */
	color: var(--copper-text);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

::selection {
	background: var(--accent-glow);
}

/* A visible, consistent focus ring is not optional (WCAG 2.1 AA). */
:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* A table wider than its container scrolls *itself*, never the page. Eleven
 * screens hand-roll a table and none of them fitted a 360px viewport: at that
 * width the whole document scrolled sideways, which is what makes a page feel
 * broken on a phone. One utility, used by all of them.
 *
 * `contain: paint` is not optional. `overflow-x: auto` alone makes this element
 * a scroll container — the table is clipped and scrolls — **and still lets the
 * table's layout overflow widen the document**, so the page scrolled 132px into
 * empty background next to a perfectly clipped table. Measured, both ways. */
.table-scroll {
	overflow-x: auto;
	contain: paint;
}

/* A secondary action that is *not* a paragraph. Screens kept hand-rolling
 * `border: none; background: none; padding: 0` on anchors and submit buttons,
 * so a real action — Continuar, Abrir, Rechazar, Empezar — rendered exactly
 * like the text around it. This is the design system's `btn--quiet`: the
 * affordance without the weight of a bordered button. It fits an `<a>` and a
 * `<button>` alike, because both call sites exist. */
.action-link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	padding: 3px var(--sp-2);
	border: 1px solid transparent;
	border-radius: var(--r-1);
	background: none;
	color: var(--copper-text);
	font-family: var(--font);
	font-size: inherit;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition:
		background var(--dur-2) var(--ease-out),
		color var(--dur-2) var(--ease-out);
}

.action-link:hover {
	background: var(--surf-hover);
	text-decoration: none;
}

.action-link:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.action-link:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* ── The gerencia marker ──────────────────────────────────────────────────
 *
 * The key comes from `lib/ui/gerencia.ts` (a pure function of the API's
 * `gerencia` string); the colour is resolved here, so a gerencia added later is
 * one line of CSS and no component change at all.
 *
 * `--ger` falls back to yeso-grey in the shared `:root` block, so an
 * unrecognised key degrades to the neutral marker rather than to no marker.
 *
 * Two forms, because one cannot cover both: a `border-left` on a block element,
 * and an inset shadow on a table row's first cell. `border-left` on a `<tr>` is
 * not painted reliably, and a `<tr>` is not a containing block for an absolutely
 * positioned pseudo-element either, so the shadow is the form that renders in
 * both Blink and Gecko. */
[data-marker="concentradora"] {
	--ger: var(--ger-concentradora);
}
[data-marker="mantencion"] {
	--ger: var(--ger-mantencion);
}
[data-marker="puerto"] {
	--ger: var(--ger-puerto);
}
[data-marker="metalurgia"] {
	--ger: var(--ger-metalurgia);
}
[data-marker="integridad"] {
	--ger: var(--ger-integridad);
}
[data-marker="operaciones"] {
	--ger: var(--ger-operaciones);
}
[data-marker="none"] {
	--ger: var(--ger-none);
}

[data-marker]:not(tr) {
	border-left: 2px solid var(--ger);
}

tr[data-marker] > :first-child {
	box-shadow: inset 2px 0 0 var(--ger);
}

/* Skip link: the first focusable element on every page. */
.skip-link {
	position: absolute;
	left: var(--sp-3);
	top: calc(-1 * var(--sp-9));
	z-index: var(--z-toast);
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--r-2);
	background: var(--bg-solid);
	border: 1px solid var(--bord-bright);
	color: var(--tx);
	font-weight: 600;
	transition: top var(--dur-2) var(--ease-out);
}

.skip-link:focus-visible {
	top: var(--sp-3);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-1: 0s;
		--dur-2: 0s;
		--dur-3: 0s;
		--dur-4: 0s;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ── Print: forced light, whatever the screen theme ─────────────────────── */

@media print {
	:root,
	[data-theme="dark"] {
		color-scheme: light;
		--bg-solid: #fff;
		--surf: #fff;
		--surf2: #fff;
		--bord: rgba(0, 0, 0, 0.25);
		--bord2: rgba(0, 0, 0, 0.15);
		--tx: #000;
		--tx2: #1c1814;
		/* These were the pre-correction values, repeated here on purpose so print
		   does not derive from the light theme. They have to be corrected here too,
		   or the report prints its labels at 2.55:1. */
		--mt: #4a4139;
		--mt2: #59504a;
		--copper: #8a4520;
		--copper-text: var(--copper);
		--az: #8a4520;
		--on-accent: #1c1814;
		/* The semantic set is a *screen* palette: the dark theme's jade on paper is
		   1.87:1. Print takes the light theme's. */
		--vd: #0e6b51;
		--am: #8a5a10;
		--rj: #b32424;
		--fill-ok: #8ed9c0;
		--fill-warn: #e9c169;
		--fill-bad: #ee9b9b;
		--fill-accent: #e0a077;
		/* Veta on paper. Only the values that would genuinely fail on white are
		   repeated: the dark theme's azurita (#8fb8e8) prints at 1.9:1, its azufre
		   gerencia at 2.3:1 and its ord-4 at 1.5:1, so a printed report would carry
		   invisible markers. `--ok`/`--warn`/`--bad` and `--accent-tx` need no
		   entry — they are aliases of tokens corrected just above. */
		--info: #2a5f96;
		--ger-concentradora: #a8632c;
		--ger-mantencion: #99453a;
		--ger-puerto: #2a5e96;
		--ger-metalurgia: #836614;
		--ger-integridad: #22674f;
		--ger-operaciones: #684a96;
		--ger-none: #7a7268;
		--ord-1: #ad8257;
		--ord-2: #98683d;
		--ord-3: #7c5127;
		--ord-4: #5c3916;
		/* The document header prints the logotype. A white chip label is a logotype and
		   is exempt from 1.4.3, but on paper it still has to be legible, so the chip
		   is the deeper copper (7.11:1) rather than the screen brand. */
		--brand: #8a4520;
		--logo-chip: linear-gradient(135deg, #8a4520, #8a4520);
		--sh: none;
		--shl: none;
		--glass-blur: none;
		--glass-border: 1px solid rgba(0, 0, 0, 0.25);
		--glass-shine: none;
	}

	body {
		background: #fff;
	}

	/* The app's chrome is not part of anything anybody prints. */
	.sidebar-slot,
	.topbar-slot,
	.skip-link,
	.no-print {
		display: none !important;
	}

	main {
		padding: 0;
	}

	/* A report is a document: never split across two pages. The page break
	   between them belongs to the batch-print screen, which knows how many it
	   is printing. */
	.report {
		break-inside: avoid;
	}
}