/* MDN Impresores: herramientas. Tokens specific to the tools live in this block. */
:root {
  --tool-sheet: oklch(99% 0.003 272); --tool-piece: oklch(34.9% 0.125 272.3 / 0.16); --tool-piece-line: oklch(34.9% 0.125 272.3);
  --stock-white: oklch(97% 0.004 90); --stock-kraft: oklch(72% 0.07 70); --stock-black: oklch(24% 0.01 272); --stock-navy: oklch(34.9% 0.125 272.3);
  --stock-ink-dark: oklch(24% 0.02 272); --stock-ink-light: oklch(96% 0.01 90);
  --gold-1: oklch(62% 0.11 80); --gold-2: oklch(86% 0.13 92); --gold-3: oklch(96% 0.06 98); --silver-1: oklch(62% 0.01 260); --silver-2: oklch(82% 0.01 260); --silver-3: oklch(97% 0.005 260);
  --glare: oklch(100% 0 0); --shade: oklch(15% 0.02 272);
  --face-line: oklch(20% 0.02 272 / 0.14);
  --glare-strong: oklch(100% 0 0 / 0.75); --glare-soft: oklch(100% 0 0 / 0.12); --relief-hi: oklch(100% 0 0 / 0.55); --relief-lo: oklch(15% 0.02 272 / 0.5);
}

/* ---------- Tool layout ---------- */
.tool { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; padding-block: var(--space-2xl); border-top: 1px solid var(--color-rule); }
.tool:first-of-type { border-top: 0; padding-top: 0; }
.tool-head { display: grid; gap: var(--space-md); align-content: start; }
.tool-head h2 { font-size: var(--text-3xl); }
.tool-head p { color: var(--color-ink-2); }
.tool-body { display: grid; gap: var(--space-lg); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-2); }
.tool-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.tool-fields.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tool-fields .full { grid-column: 1 / -1; }
.tool .ctl input, .tool .ctl select, .b3-form .ctl input, .b3-form .ctl select { font-variant-numeric: tabular-nums; }
.tool .ctl .hint:empty, .b3-form .ctl .hint:empty { display: none; }
.result { padding: var(--space-lg); border-radius: var(--radius-inner); background: var(--color-paper); display: grid; gap: var(--space-xs); }
.res-big { font-size: var(--text-xl); color: var(--color-ink); max-width: none; }
.res-big strong { font-size: var(--text-3xl); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.res-note { font-size: var(--text-sm); color: var(--color-muted); max-width: none; }
.res-dl { margin: 0; display: grid; gap: var(--space-sm); }
.res-dl dt { font-size: var(--text-sm); color: var(--color-muted); }
.res-dl dd { margin: 0; font-size: var(--text-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.res-actions { margin-top: var(--space-xs); }
.pliego-svg { width: 100%; max-height: 320px; }
.pliego-svg .sheet { fill: var(--tool-sheet); stroke: var(--color-rule); stroke-width: 1; }
.pliego-svg .piece { fill: var(--tool-piece); stroke: var(--tool-piece-line); stroke-width: 0.6; }
.unit-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.tool-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
@media (max-width: 60rem) { .tool { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); } .tool-cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .tool-body { padding: var(--space-lg); } .tool-fields.cols-3, .unit-row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Finishes simulator ---------- */
.sim { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: start; }
.sim-stage { perspective: 1100px; padding: var(--space-2xl) var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-2); touch-action: pan-y; cursor: crosshair; }
.sim-card { --mx: 30%; --my: 30%; --rx: 0deg; --ry: 0deg; --lx: 0; --ly: 0; position: relative; aspect-ratio: 16 / 10; max-width: 560px; margin-inline: auto; border-radius: var(--radius-control); transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; overflow: hidden; background: var(--stock); color: var(--stock-ink); box-shadow: var(--shadow-lift); display: grid; place-items: center; }
.sim-card[data-color="white"] { --stock: var(--stock-white); --stock-ink: var(--stock-ink-dark); }
.sim-card[data-color="navy"] { --stock: var(--stock-navy); --stock-ink: var(--stock-ink-light); }
.sim-card[data-color="black"] { --stock: var(--stock-black); --stock-ink: var(--stock-ink-light); }
.sim-card[data-color="kraft"] { --stock: var(--stock-kraft); --stock-ink: var(--stock-ink-dark); }
.sim-mark { position: relative; z-index: 2; text-align: center; font-weight: 800; font-size: clamp(2rem, 6vw, 3.75rem); letter-spacing: -0.03em; line-height: 1; color: var(--stock-ink); }
.sim-mark small { display: block; margin-top: var(--space-xs); font-size: 0.26em; font-weight: 500; letter-spacing: 0.02em; opacity: 0.8; }
.sim-glare, .sim-uv { position: absolute; inset: 0; pointer-events: none; }
.sim-glare { z-index: 3; background: radial-gradient(circle at var(--mx) var(--my), var(--glare), transparent 55%); opacity: var(--glare-o, 0.1); mix-blend-mode: soft-light; }
/* mate: almost no reflection */
.sim-card[data-finish="mate"] { --glare-o: 0.18; }
.sim-card[data-finish="brillante"] { --glare-o: 0.95; }
.sim-card[data-finish="brillante"] .sim-glare { mix-blend-mode: normal; background: radial-gradient(ellipse 45% 30% at var(--mx) var(--my), var(--glare-strong), var(--glare-soft) 55%, transparent 75%); }
.sim-card[data-finish="soft"] { --glare-o: 0.3; }
.sim-card[data-finish="soft"] .sim-glare { background: radial-gradient(circle at var(--mx) var(--my), var(--glare), transparent 85%); filter: blur(12px); }
/* barniz UV a registro: only the logo shines */
.sim-card[data-finish="uv"] { --glare-o: 0.12; }
.sim-card[data-finish="uv"] .sim-mark { background: radial-gradient(ellipse 40% 60% at var(--mx) var(--my), var(--glare), var(--stock-ink) 60%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 0.5px var(--stock-ink)); }
/* hot stamping: metallic foil that moves with the light */
.sim-card[data-finish="oro"] .sim-mark, .sim-card[data-finish="plata"] .sim-mark { background-size: 220% 100%; background-position: var(--mx) 0; -webkit-background-clip: text; background-clip: text; color: transparent; }
.sim-card[data-finish="oro"] .sim-mark { background-image: linear-gradient(105deg, var(--gold-1) 0%, var(--gold-2) 30%, var(--gold-3) 48%, var(--gold-2) 62%, var(--gold-1) 100%); }
.sim-card[data-finish="plata"] .sim-mark { background-image: linear-gradient(105deg, var(--silver-1) 0%, var(--silver-2) 30%, var(--silver-3) 48%, var(--silver-2) 62%, var(--silver-1) 100%); }
.sim-card[data-finish="oro"], .sim-card[data-finish="plata"] { --glare-o: 0.16; }
/* grabado en relieve: same colour as the stock, shaped only by light and shadow */
.sim-card[data-finish="relieve"] { --glare-o: 0.2; }
.sim-card[data-finish="relieve"] .sim-mark { color: var(--stock); text-shadow: calc(var(--lx) * -2px) calc(var(--ly) * -2px) 2px var(--relief-hi), calc(var(--lx) * 2.5px) calc(var(--ly) * 2.5px) 3px var(--relief-lo); }
.sim-controls { display: grid; gap: var(--space-lg); }
.sim-controls fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-xs); min-width: 0; }
.sim-controls legend { padding: 0; margin-bottom: var(--space-xs); font-size: var(--text-sm); font-weight: 700; color: var(--color-ink); }
.sim-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
.sim-swatches { display: flex; gap: var(--space-xs); }
.sim-swatches .option span { min-width: 48px; }
.sim-info { display: grid; gap: var(--space-xs); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); min-height: 9rem; }
.sim-info h2 { font-size: var(--text-2xl); }
.sim-hint { text-align: center; margin: var(--space-md) auto 0; font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 60rem) { .sim { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } .sim-stage { padding: var(--space-xl) var(--space-md); } }
@media (prefers-reduced-motion: reduce) { .sim-card { transform: none; } }

/* ---------- 3D box ---------- */
.b3 { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: start; }
.b3-stage { position: relative; height: clamp(340px, 56vh, 560px); border-radius: var(--radius-card); background: var(--color-paper-2); perspective: 1400px; display: grid; place-items: center; overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; }
.b3-stage.is-dragging { cursor: grabbing; }
.b3-stage:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.b3-box { --l: 160px; --w: 80px; --h: 200px; --rx: -18deg; --ry: -32deg; position: relative; width: var(--l); height: var(--h); transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); }
.b3-box[data-color="white"] { --stock: var(--stock-white); --stock-ink: var(--stock-ink-dark); }
.b3-box[data-color="kraft"] { --stock: var(--stock-kraft); --stock-ink: var(--stock-ink-dark); }
.b3-box[data-color="black"] { --stock: var(--stock-black); --stock-ink: var(--stock-ink-light); }
.b3-box[data-color="navy"] { --stock: var(--stock-navy); --stock-ink: var(--stock-ink-light); }
.b3-face { position: absolute; left: 50%; top: 50%; background: var(--stock); box-shadow: inset 0 0 0 1px var(--face-line); backface-visibility: visible; display: grid; place-items: center; color: var(--stock-ink); font-size: var(--text-sm); font-weight: 700; overflow: hidden; }
.b3-face::after { content: ""; position: absolute; inset: 0; background: var(--shade); opacity: var(--sh, 0); pointer-events: none; }
.b3-front, .b3-back { width: var(--l); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--l) / -2); }
.b3-front { transform: translateZ(calc(var(--w) / 2)); }
.b3-back { transform: rotateY(180deg) translateZ(calc(var(--w) / 2)); --sh: 0.14; }
.b3-left, .b3-right { width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2); --sh: 0.1; }
.b3-right { transform: rotateY(90deg) translateZ(calc(var(--l) / 2)); }
.b3-left { transform: rotateY(-90deg) translateZ(calc(var(--l) / 2)); }
.b3-top, .b3-bottom { width: var(--l); height: var(--w); margin: calc(var(--w) / -2) 0 0 calc(var(--l) / -2); }
.b3-bottom { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); --sh: 0.22; }
/* the lid hinges on the back edge */
.b3-top { margin: 0 0 0 calc(var(--l) / -2); transform-origin: 50% 0; transform: translateY(calc(var(--h) / -2)) translateZ(calc(var(--w) / -2)) rotateX(90deg); transition: transform var(--dur-long) var(--ease-out); --sh: 0.04; }
.b3-box.is-open .b3-top { transform: translateY(calc(var(--h) / -2)) translateZ(calc(var(--w) / -2)) rotateX(200deg); }
.b3-box[data-style="charola"] .b3-top { display: none; }
.b3-logo { width: 70%; height: 46%; background: var(--logo, none) center / contain no-repeat; }
.b3-box:not(.has-logo) .b3-logo { display: grid; place-items: center; width: auto; height: auto; padding: var(--space-xs); text-align: center; opacity: 0.75; }
.b3-box.has-logo .b3-logo span { display: none; }
.b3-hint { position: absolute; left: 0; right: 0; bottom: var(--space-md); text-align: center; font-size: var(--text-sm); color: var(--color-muted); pointer-events: none; max-width: none; }
.b3-form { display: grid; gap: var(--space-md); }
.b3-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-xs); min-width: 0; }
.b3-form legend { padding: 0; margin-bottom: var(--space-xs); font-size: var(--text-sm); font-weight: 700; color: var(--color-ink); }
.b3-dims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); }
.b3-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
.b3-form .check { display: flex; gap: var(--space-xs); align-items: center; font-size: var(--text-sm); color: var(--color-ink-2); min-height: 44px; }
.b3-form .check input { width: 20px; height: 20px; accent-color: var(--color-field); }
.b3-form input[type=file] { font-size: var(--text-sm); padding: var(--space-xs); min-height: 48px; }
.b3-out { margin-top: var(--space-2xl); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: start; }
.b3-dieline { padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: 0 0 0 1px var(--color-rule); }
.b3-dieline svg { width: 100%; height: auto; max-height: 520px; }
.b3-side { display: grid; gap: var(--space-md); align-content: start; }
.b3-side h2 { font-size: var(--text-2xl); }
.b3-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
@media (max-width: 60rem) { .b3, .b3-out { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } }