/* Panel del arquitecto. Tokens share names with public/index.html where they overlap. */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Barlow-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/BarlowCondensed-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/BarlowCondensed-600.woff2') format('woff2'); }

:root {
  --paper: #e8ecf0; --sheet: #fbfcfd; --ink: #14202e; --muted: #566677; --rule: #c8d1da;
  --bp: #0f2c4f; --bp-line: #cfe3f5; --bp-dim: #93b4d6;
  --orange: #ff6a1a; --orange-ink: #1d0d02; --orange-hover: #ff8040;
  --warn-bg: #fff2e6; --warn-ink: #5a3410; --focus: #1a6fe0;
  --field: #fff; --field-line: #7d8fa1; --bp-edge: transparent;
  --grid: rgba(15, 44, 79, .055); --grid-major: rgba(15, 44, 79, .07); --dim: #8496a8;
  --err-bg: #fdecec; --err-ink: #7a1620; --err-line: #c42b3a;
  --ok-bg: #e1f3e7; --ok-ink: #0f4a26; --chip-bg: #e4eaf1; --chip-ink: #2c3b4c;
  color-scheme: light;
  --ui: 'Barlow', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --display: 'Barlow Condensed', 'Arial Narrow', 'Barlow', system-ui, sans-serif;
  --side-w: 256px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --paper: #0a1220; --sheet: #111c2c; --ink: #e4ecf5; --muted: #9aabbd; --rule: #25364a;
    --bp: #0c2644; --warn-bg: #2b1c0f; --warn-ink: #ffd2b0; --focus: #6aa5ff;
    --field: #0b1522; --field-line: #6a7f96; --bp-edge: #1f4673;
    --grid: rgba(147, 180, 214, .06); --grid-major: rgba(147, 180, 214, .1); --dim: #4d6580;
    --err-bg: #2d1318; --err-ink: #ffc9cf; --err-line: #ff7b88;
    --ok-bg: #123222; --ok-ink: #b8efcb; --chip-bg: #1b2b3f; --chip-ink: #c3d1e0;
    color-scheme: dark;
  }
}
:root[data-theme=dark] {
  --paper: #0a1220; --sheet: #111c2c; --ink: #e4ecf5; --muted: #9aabbd; --rule: #25364a;
  --bp: #0c2644; --warn-bg: #2b1c0f; --warn-ink: #ffd2b0; --focus: #6aa5ff;
  --field: #0b1522; --field-line: #6a7f96; --bp-edge: #1f4673;
  --grid: rgba(147, 180, 214, .06); --grid-major: rgba(147, 180, 214, .1); --dim: #4d6580;
  --err-bg: #2d1318; --err-ink: #ffc9cf; --err-line: #ff7b88;
  --ok-bg: #123222; --ok-ink: #b8efcb; --chip-bg: #1b2b3f; --chip-ink: #c3d1e0;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.5 var(--ui); }
h1, h2 { font-family: var(--display); font-weight: 600; margin: 0; }
p { margin: 0 0 10px; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ico { flex: none; display: block; }
.skip { position: absolute; left: 12px; top: -64px; z-index: 30; padding: 10px 14px; background: var(--orange); color: var(--orange-ink); font-weight: 600; border-radius: 4px; text-decoration: none; }
.skip:focus { top: 12px; }
.nojs { max-width: 520px; margin: 20vh auto; padding: 0 16px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--ink); border-radius: 4px; background: var(--sheet); color: var(--ink); font: 600 14px/1 var(--ui); padding: 12px 16px; min-height: 42px; cursor: pointer; margin: 0; text-decoration: none; }
.btn:hover { background: var(--paper); }
.btn.primary { background: var(--orange); border-color: var(--orange); color: var(--orange-ink); }
.btn.primary:hover { background: var(--orange-hover); border-color: var(--orange-hover); }
.btn.quiet { border-color: var(--field-line); font-weight: 500; }

/* ---------- Forms ---------- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 5px; }
input:not([type=checkbox]):not([type=file]), select { width: 100%; border: 1px solid var(--field-line); border-radius: 4px; padding: 11px 10px; min-height: 44px; background: var(--field); color: var(--ink); font: inherit; }
input[type=checkbox] { width: 20px; height: 20px; margin: 0; accent-color: var(--bp); flex: none; }
input[aria-invalid=true], select[aria-invalid=true] { border-color: var(--err-line); box-shadow: inset 3px 0 0 var(--err-line); }
.form-error { margin: 0 0 14px; padding: 10px 12px; border-left: 4px solid var(--err-line); background: var(--err-bg); color: var(--err-ink); font-size: 14px; }
.hint { margin: 12px 0 0; font-size: 13px; color: var(--muted); }

/* ---------- Login: a drawing sheet on the paper ---------- */
.login-stage { min-height: 100vh; display: grid; place-items: center; padding: 72px 16px 32px; }
.login-theme { position: fixed; top: 16px; right: 16px; z-index: 6; }
.login-sheet { position: relative; width: min(920px, 100%); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 56px 48px; color: #fff; border-radius: 4px; outline: 1px solid var(--bp-edge);
  background-color: var(--bp);
  background-image:
    linear-gradient(rgba(207, 227, 245, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(207, 227, 245, .08) 1px, transparent 1px),
    linear-gradient(rgba(207, 227, 245, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(207, 227, 245, .045) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; }
.reg { position: absolute; width: 22px; height: 22px; border: 2px solid var(--bp-line); pointer-events: none; }
.reg.tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.reg.tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.reg.bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.reg.br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.login-intro h1 { font-size: clamp(46px, 8vw, 84px); line-height: .95; text-transform: uppercase; letter-spacing: .01em; margin-bottom: 18px; }
.login-intro p { color: var(--bp-dim); font-size: 18px; max-width: 30ch; margin: 0; }
.login-form { background: var(--sheet); color: var(--ink); border-top: 4px solid var(--orange); padding: 24px 22px 20px; }
.login-form .btn { width: 100%; }

/* ---------- Shell ---------- */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
.topbar, .scrim { display: none; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px; padding: 20px 14px 14px; color: var(--bp-line); background-color: var(--bp); border-right: 1px solid var(--bp-edge); overflow-y: auto;
  background-image: linear-gradient(rgba(207, 227, 245, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(207, 227, 245, .05) 1px, transparent 1px); background-size: 24px 24px; }
.side :focus-visible { outline-color: #fff; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 6px 18px; margin-bottom: 8px; border-bottom: 1px solid rgba(147, 180, 214, .35); color: #fff; text-decoration: none; }
.brand-mark { width: 30px; height: 30px; flex: none; color: var(--orange); }
.brand strong { font: 600 24px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a, .side-link { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px 8px 14px; color: var(--bp-line); font-weight: 500; text-decoration: none; border-radius: 3px; }
.nav a:hover, .side-link:hover { background: rgba(207, 227, 245, .1); color: #fff; }
.nav a[aria-current=page] { background: rgba(207, 227, 245, .14); color: #fff; font-weight: 600; }
.nav a[aria-current=page]::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: var(--orange); }
.side-spacer { flex: 1; min-height: 16px; }
.side-link { border-top: 1px solid rgba(147, 180, 214, .25); border-radius: 0; }
.titleblock { border: 1px solid var(--bp-dim); display: grid; font-size: 13px; line-height: 1.35; }
.tb-row { display: grid; grid-template-columns: 62px minmax(0, 1fr); border-bottom: 1px solid rgba(147, 180, 214, .55); }
.tb-row dt { padding: 6px 8px; color: var(--bp-dim); border-right: 1px solid rgba(147, 180, 214, .55); }
.tb-row dd { margin: 0; padding: 6px 8px; color: #fff; overflow-wrap: anywhere; }
.titleblock dl { margin: 0; }
.tb-actions { display: grid; grid-template-columns: 1fr 1fr; }
.tb-actions button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 4px; white-space: nowrap; border: 0; background: transparent; color: var(--bp-line); font: 500 13px/1.2 var(--ui); cursor: pointer; }
.tb-actions button + button { border-left: 1px solid rgba(147, 180, 214, .55); }
.tb-actions button:hover { background: rgba(207, 227, 245, .1); color: #fff; }

.content { min-width: 0; background-color: var(--paper);
  background-image: linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px), linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; background-position: -1px -1px; }
.banner { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--warn-bg); color: var(--warn-ink); border-bottom: 2px solid var(--orange); font-size: 14px; }
.banner p { margin: 6px 0 0; }
.banner button { flex: none; min-width: 44px; min-height: 36px; border: 1px solid currentColor; border-radius: 4px; background: transparent; color: inherit; font: 600 13px var(--ui); cursor: pointer; }
.view { max-width: 1120px; padding: 40px 40px 64px; outline: none; }

/* ---------- Page header: cota + condensed heading ---------- */
.page-head { margin-bottom: 28px; }
.cota { display: flex; align-items: center; gap: 12px; max-width: 520px; margin-bottom: 10px; color: var(--muted); font-size: 14px; }
.cota::before, .cota::after { content: ""; flex: 1; height: 11px; background: linear-gradient(var(--dim), var(--dim)) center / 100% 1px no-repeat; }
.cota::before { border-left: 1px solid var(--dim); }
.cota::after { border-right: 1px solid var(--dim); }
.cota-label { flex: none; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-head h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1; text-transform: uppercase; letter-spacing: .015em; }
.lead { margin: 12px 0 0; color: var(--muted); max-width: 60ch; }
.pending { max-width: 640px; padding: 14px 16px; border: 1px dashed var(--field-line); border-left: 4px solid var(--orange); background: var(--sheet); }
.pending p { margin: 0; color: var(--ink); }

.stats { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; max-width: 640px; }
.stat { display: flex; flex-direction: column; padding: 14px 16px; background: var(--sheet); border: 1px solid var(--rule); border-top: 3px solid var(--bp); border-radius: 3px; }
.stat-n { font: 600 46px/1.05 var(--display); font-variant-numeric: tabular-nums; }
.stat-l { color: var(--muted); font-size: 14px; }

/* ---------- Narrow screens: top bar + slide-in menu ---------- */
@media (max-width: 860px) {
  .shell { display: block; }
  .topbar { position: sticky; top: 0; z-index: 12; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px 6px 16px; background: var(--bp); color: #fff; border-bottom: 1px solid var(--bp-edge); }
  .topbar .brand { padding: 0; margin: 0; border: 0; }
  .topbar .brand strong { font-size: 21px; }
  .topbar .brand-mark { width: 24px; height: 24px; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(147, 180, 214, .5); border-radius: 4px; background: transparent; color: #fff; cursor: pointer; }
  .menu-btn:focus-visible { outline-color: #fff; }
  .side { position: fixed; z-index: 20; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); height: auto; visibility: hidden; transform: translateX(-102%); transition: transform .22s ease, visibility 0s .22s; box-shadow: 8px 0 32px rgba(0, 0, 0, .35); }
  .side .brand { display: none; }
  .menu-open .side { visibility: visible; transform: none; transition: transform .22s ease, visibility 0s; }
  .menu-open .scrim { display: block; position: fixed; inset: 0; z-index: 15; background: rgba(5, 12, 22, .55); }
  .view { padding: 28px 16px 48px; }
  .login-sheet { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 44px 20px 24px; }
  .login-intro p { font-size: 16px; }
}
@media (max-width: 420px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Jobs: shared bits ---------- */
.sr-only, .sr-file { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.btn.sm { min-height: 34px; padding: 8px 12px; font-size: 13px; }
.btn:disabled { opacity: .55; cursor: default; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border: 1px solid var(--field-line); border-radius: 4px; background: var(--sheet); color: var(--ink); cursor: pointer; }
.icon-btn:hover { background: var(--paper); }
.icon-btn.danger { color: var(--err-ink); border-color: transparent; background: transparent; }
.icon-btn.danger:hover { background: var(--err-bg); border-color: var(--err-line); }
select { appearance: auto; }
.field.grow { flex: 1 1 220px; }
.check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: 14px; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 3px; border: 1px solid transparent; font: 600 12px/1.5 var(--ui); white-space: nowrap; background: var(--chip-bg); color: var(--chip-ink); }
.badge.st-active { background: var(--ok-bg); color: var(--ok-ink); }
.badge.incomplete, .badge.referential { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--orange); }
.badge.unsaved { background: var(--orange); color: var(--orange-ink); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chip { padding: 1px 8px; border-radius: 10px; background: var(--chip-bg); color: var(--chip-ink); font-size: 12px; line-height: 1.6; }
.notice { margin: 0 0 16px; padding: 10px 12px; border-left: 4px solid var(--bp-dim); background: var(--sheet); font-size: 14px; }
.notice.warn { border-left-color: var(--orange); background: var(--warn-bg); color: var(--warn-ink); }
.form-info { margin: 0; padding: 8px 12px; border-left: 4px solid var(--focus); background: var(--sheet); font-size: 14px; }
select { width: 100%; }

/* ---------- Jobs: toolbar ---------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; padding: 14px 16px 6px; margin-bottom: 12px; background: var(--sheet); border: 1px solid var(--rule); border-top: 3px solid var(--bp); border-radius: 3px; }
.toolbar .field { margin: 0; flex: 0 1 190px; min-width: 150px; }
.toolbar .field.grow { flex: 1 1 240px; }
.toolbar .check { margin-bottom: 0; align-self: flex-end; }
.toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.count { margin: 0 auto 0 0; color: var(--muted); font-size: 14px; }
.view-toggle { display: inline-flex; border: 1px solid var(--field-line); border-radius: 4px; overflow: hidden; }
.view-toggle button { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 14px; border: 0; background: var(--sheet); color: var(--ink); font: 500 14px var(--ui); cursor: pointer; }
.view-toggle button + button { border-left: 1px solid var(--field-line); }
.view-toggle button[aria-pressed=true] { background: var(--bp); color: #fff; }
.view-toggle button:focus-visible { outline-offset: -3px; }

/* ---------- Jobs: thumbnails ---------- */
.thumb { display: block; width: 64px; height: 48px; overflow: hidden; border: 1px solid var(--rule); border-radius: 2px; background: var(--paper); }
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.thumb.ph { background-color: var(--bp); color: var(--bp-line); border-color: var(--bp-edge); background-image: linear-gradient(rgba(207, 227, 245, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(207, 227, 245, .1) 1px, transparent 1px); background-size: 8px 8px; }
.thumb.ph svg { display: block; width: 100%; height: 100%; padding: 3px; }

/* ---------- Jobs: table ---------- */
.table-wrap { overflow-x: auto; background: var(--sheet); border: 1px solid var(--rule); border-radius: 3px; }
.jobs-table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 14px; }
.jobs-table th, .jobs-table td { padding: 10px 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--rule); }
.jobs-table thead th { position: sticky; top: 0; background: var(--paper); font-weight: 600; color: var(--muted); font-size: 13px; white-space: nowrap; }
.jobs-table th.num, .jobs-table td.num { text-align: right; }
.jobs-table tbody tr { cursor: pointer; }
.jobs-table tbody tr:hover { background: color-mix(in srgb, var(--bp) 7%, transparent); }
.jobs-table tbody tr:last-child > * { border-bottom: 0; }
.jobs-table .c-thumb { width: 80px; padding-right: 0; }
.jobs-table .c-code { font-weight: 600; white-space: nowrap; }
.jobs-table .c-name { min-width: 260px; }
.jobs-table .c-name .badge { margin-top: 4px; }
.code-link { display: inline-flex; align-items: center; min-height: 44px; font: 600 20px/1 var(--display); letter-spacing: .02em; color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.code-link:hover { color: var(--bp); }
:root[data-theme=dark] .code-link:hover { color: var(--bp-line); }
button.sort { border: 0; background: transparent; color: inherit; font: inherit; padding: 8px 0; min-height: 36px; cursor: pointer; white-space: nowrap; }
button.sort:hover { color: var(--ink); text-decoration: underline; }
.sort-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sort-row label { color: var(--muted); font-size: 14px; }
.sort-row select { width: auto; min-width: 200px; }

/* ---------- Jobs: cards ---------- */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.card { position: relative; display: flex; flex-direction: column; background: var(--sheet); border: 1px solid var(--rule); border-top: 3px solid var(--bp); border-radius: 3px; overflow: hidden; }
.card:hover { border-color: var(--field-line); border-top-color: var(--orange); }
.card:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.card .thumb { width: 100%; height: auto; aspect-ratio: 4 / 3; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; }
.card-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.card-code { font: 600 22px/1 var(--display); letter-spacing: .02em; }
.card h3 { margin: 4px 0 0; font: 600 20px/1.15 var(--display); }
.card-link { color: inherit; text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; }
.card-link:focus-visible { outline: none; }
.meta { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 8px 0 0; font-size: 13px; }
.meta div { min-width: 0; }
.meta dt { color: var(--muted); }
.meta dd { margin: 0; overflow-wrap: anywhere; }

.empty { padding: 36px 20px; text-align: center; background: var(--sheet); border: 1px dashed var(--field-line); border-radius: 3px; }
.empty p { margin: 0 0 12px; }

/* ---------- Drawer ---------- */
html.drawer-open { overflow: hidden; }
.drawer-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(5, 12, 22, .55); }
.drawer { position: fixed; z-index: 41; top: 0; right: 0; bottom: 0; width: min(760px, 100vw); display: flex; flex-direction: column; background: var(--sheet); color: var(--ink); border-left: 1px solid var(--rule); box-shadow: -12px 0 40px rgba(0, 0, 0, .3); animation: drawer-in .2s ease-out; outline: none; }
@keyframes drawer-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-head, .tabs, .drawer-msg, .toast-region, .drawer-foot { flex: none; }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px 12px; border-bottom: 1px solid var(--rule); border-top: 4px solid var(--orange); }
.dh-main { min-width: 0; }
.dh-code { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 2px; font: 600 20px/1.2 var(--display); letter-spacing: .03em; color: var(--muted); }
.dh-ver { font: 500 14px var(--ui); letter-spacing: 0; }
.drawer-head h2 { font-size: 28px; line-height: 1.1; overflow-wrap: anywhere; }
.dh-side { display: flex; align-items: center; gap: 8px; flex: none; }
.switch { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px 6px 8px; border: 1px solid var(--field-line); border-radius: 22px; background: var(--sheet); color: var(--ink); font: 600 13px var(--ui); cursor: pointer; }
.sw-track { position: relative; width: 36px; height: 20px; border-radius: 10px; background: var(--field-line); transition: background .15s; }
.sw-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch[aria-checked=true] .sw-track { background: #1b7a43; }
.switch[aria-checked=true] .sw-track::after { transform: translateX(16px); }
.tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--rule); overflow-x: auto; }
.tabs [role=tab] { position: relative; flex: none; min-height: 46px; padding: 10px 14px; border: 0; background: transparent; color: var(--muted); font: 500 15px var(--ui); cursor: pointer; }
.tabs [role=tab][aria-selected=true] { color: var(--ink); font-weight: 600; }
.tabs [role=tab][aria-selected=true]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 3px; background: var(--orange); }
.tabs [role=tab]:focus-visible { outline-offset: -3px; }
.drawer-msg:not(:empty) { padding: 10px 20px 0; }
.drawer-msg p { margin: 0; }
.drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 20px 24px; overscroll-behavior: contain; }
.drawer-body h3 { font: 600 22px/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; margin: 22px 0 10px; }
.drawer-body section:first-child h3 { margin-top: 0; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sec-head h3 { margin: 0 !important; }
.toast-region:not(:empty) { padding: 0 20px 8px; }
.toast { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 14px; background: var(--bp); color: #fff; border-radius: 4px; font-size: 14px; }
.toast .btn { background: transparent; color: #fff; border-color: var(--bp-dim); min-height: 38px; }
.toast .btn:hover { background: rgba(207, 227, 245, .15); }
.toast :focus-visible { outline-color: #fff; }
.drawer-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 20px; border-top: 1px solid var(--rule); background: var(--paper); }
.dirty-state { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--muted); }
.dirty-state .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--field-line); }
.dirty-state.is-dirty { color: var(--ink); font-weight: 600; }
.dirty-state.is-dirty .dot { background: var(--orange); }
.foot-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* summary */
.summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; margin: 0 0 18px; }
.summary div { min-width: 0; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.summary .wide { grid-column: 1 / -1; }
.summary dt { color: var(--muted); font-size: 13px; }
.summary dd { margin: 2px 0 0; overflow-wrap: anywhere; }

/* material lines */
.lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.line { padding: 10px 12px 12px; border: 1px solid var(--rule); border-left: 4px solid var(--bp-dim); border-radius: 3px; background: var(--paper); }
.line-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.line-name { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.line-head .icon-btn { margin-left: auto; }
.badge.kind-fixed { background: var(--chip-bg); }
.badge.kind-range { background: var(--ok-bg); color: var(--ok-ink); }
.badge.kind-perimeter { background: var(--bp); color: #fff; }
.badge.kind-manual { background: var(--warn-bg); color: var(--warn-ink); }
.line-fields, .finish-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 12px; align-items: end; }
.field.sm { margin: 0; }
.field.sm input:not([type=checkbox]), .field.sm select { min-height: 40px; padding: 8px 9px; }
.field.wide, .line-fields .wide, .finish-grid .wide { grid-column: 1 / -1; }
.with-unit { display: flex; align-items: center; gap: 6px; }
.with-unit .unit { flex: none; max-width: 72px; color: var(--muted); font-size: 12px; line-height: 1.2; overflow-wrap: anywhere; }
.avg { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--muted); }
.avg strong { color: var(--ink); }
.add-panel { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--field-line); border-radius: 3px; background: var(--paper); }
.add-panel h4 { margin: 0 0 8px; font: 600 18px var(--display); text-transform: uppercase; }
.add-row { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.add-row .field { flex: 1 1 200px; margin-bottom: 8px; }
.pick-list { list-style: none; margin: 4px 0 10px; padding: 0; max-height: 240px; overflow-y: auto; border: 1px solid var(--rule); background: var(--sheet); }
.pick { display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--rule); background: transparent; color: var(--ink); font: 14px var(--ui); text-align: left; cursor: pointer; }
.pick span { color: var(--muted); font-size: 12px; }
.pick:hover { background: color-mix(in srgb, var(--bp) 9%, transparent); }
.pick:focus-visible { outline-offset: -3px; }
.empty-li { padding: 10px 12px; color: var(--muted); font-size: 14px; }

/* images */
.dropzone { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px; margin-bottom: 16px; text-align: center; border: 2px dashed var(--field-line); border-radius: 4px; background: var(--paper); cursor: pointer; }
.dropzone small { color: var(--muted); }
.dropzone:hover, .dropzone.is-over { border-color: var(--orange); background: var(--warn-bg); color: var(--warn-ink); }
.dropzone:hover small, .dropzone.is-over small { color: inherit; }
.dropzone:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.gallery { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.shot { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: 3px; background: var(--paper); overflow: hidden; }
.shot-img { position: relative; display: block; padding: 0; border: 0; border-bottom: 1px solid var(--rule); background: var(--bp); cursor: zoom-in; }
.shot-img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.shot-img:focus-visible { outline-offset: -3px; }
.shot-badges { position: absolute; left: 6px; top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.shot-meta { display: flex; flex-direction: column; gap: 6px; padding: 10px; }
.shot-meta .check { min-height: 40px; }

/* considerations */
.cons { list-style: none; margin: 0 0 8px; padding: 0; }
.cons li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.cons.removed li { color: var(--muted); }
.cons-form { margin-top: 22px; padding-top: 6px; border-top: 1px solid var(--rule); }

/* lightbox */
.lightbox { position: fixed; z-index: 60; inset: 0; display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; padding: 16px; background: rgba(5, 12, 22, .92); color: #fff; outline: none; }
.lb-fig { grid-column: 2; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; max-height: 100%; min-height: 0; }
.lb-fig img { max-width: 100%; max-height: calc(100vh - 110px); object-fit: contain; background: #fff; }
.lb-fig figcaption { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; align-items: center; font-size: 14px; }
.lb-btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 50%; background: rgba(0, 0, 0, .4); color: #fff; cursor: pointer; }
.lb-btn:hover { background: rgba(255, 255, 255, .2); }
.lb-btn:focus-visible { outline-color: #fff; }
.lb-close { position: absolute; top: 14px; right: 14px; }
.lb-prev { grid-column: 1; grid-row: 1; justify-self: center; }
.lb-next { grid-column: 3; grid-row: 1; justify-self: center; }

@media (max-width: 860px) {
  .drawer { width: 100vw; border-left: 0; }
  .drawer-head { padding: 12px 14px 10px; }
  .drawer-head h2 { font-size: 24px; }
  .drawer-body { padding: 14px; }
  .drawer-foot { padding: 10px 14px; }
  .drawer-foot .foot-actions, .drawer-foot .btn { flex: 1 1 auto; }
  .toast-region:not(:empty) { padding: 0 14px 8px; }
  .drawer-msg:not(:empty) { padding: 10px 14px 0; }
  .toolbar .field { flex: 1 1 150px; }
}
@media (max-width: 560px) {
  .summary, .meta { grid-template-columns: minmax(0, 1fr); }
  .lightbox { grid-template-columns: 44px minmax(0, 1fr) 44px; padding: 8px; }
  .lb-btn { width: 40px; height: 40px; }
  .toolbar-row .btn.primary { flex: 1 1 100%; }
  .switch .sw-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .switch { padding: 6px 8px; }
}
@media (prefers-contrast: more) {
  .badge { border-color: currentColor; }
}


/* ---------- Wizard: Nuevo trabajo ---------- */
.wz-head { margin-bottom: 18px; }
.wz-title { font-size: clamp(26px, 3.4vw, 34px); line-height: 1; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
.wz { max-width: 1040px; }
.linklike { border: 0; background: transparent; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.field-err { margin: 4px 0 0; padding-left: 8px; border-left: 3px solid var(--err-line); color: var(--err-ink); font-size: 13px; line-height: 1.35; }
.field textarea, .wz textarea { width: 100%; border: 1px solid var(--field-line); border-radius: 4px; padding: 10px; background: var(--field); color: var(--ink); font: inherit; resize: vertical; }
.wz textarea[aria-invalid=true] { border-color: var(--err-line); }

/* stepper: a dimension line with numbered nodes */
.wz-stepper ol { list-style: none; display: flex; margin: 0 0 18px; padding: 0; overflow-x: auto; }
.wz-stepper li { position: relative; flex: 1 1 0; min-width: 48px; }
.wz-stepper li + li::before { content: ""; position: absolute; top: 20px; left: -50%; right: 50%; border-top: 2px solid var(--dim); }
.wz-stepper li.is-done + li::before, .wz-stepper li.is-current + li.is-blocked::before { border-top-style: solid; }
.wz-stepper li.is-blocked::before, .wz-stepper li.is-blocked + li::before { border-top-style: dashed; }
.wz-stepper li.is-done::before, .wz-stepper li.is-warn::before, .wz-stepper li.is-current::before { border-top-color: var(--bp-dim); }
.wz-stepper button { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; min-height: 48px; padding: 2px 2px 6px; border: 0; background: transparent; color: var(--ink); font: 500 12px/1.2 var(--ui); text-align: center; cursor: pointer; }
.wz-stepper button:focus-visible { outline-offset: -2px; }
.wz-n { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 2px solid var(--bp); background: var(--sheet); font: 600 20px/1 var(--display); letter-spacing: .02em; }
.wz-n .ico { width: 18px; height: 18px; stroke-width: 2.4; }
.is-done .wz-n { background: var(--bp); border-color: var(--bp); color: #fff; }
.is-current .wz-n { background: var(--orange); border-color: var(--orange); color: var(--orange-ink); box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--orange); }
.is-warn .wz-n { border-color: var(--orange); border-style: dashed; }
.is-blocked .wz-n { border: 2px dashed var(--field-line); background: transparent; color: var(--muted); }
.is-blocked button { color: var(--muted); cursor: not-allowed; }
.is-current button { font-weight: 600; }
:root[data-theme=dark] .is-done .wz-n { border-color: var(--bp-dim); }
.wz-flash { margin: 0 0 12px; padding: 8px 12px; border-left: 4px solid var(--focus); background: var(--sheet); font-size: 14px; }
.wz-resume { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.wz-resume p { margin: 0; }
.wz-resume-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* the sheet: a drawing sheet with registration marks and a ghost sheet number */
.wz-sheet { position: relative; background: var(--sheet); border: 1px solid var(--rule); border-top: 4px solid var(--orange); padding: 26px 30px 32px; overflow: hidden; }
.wz-sheet::before, .wz-sheet::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid var(--bp-dim); pointer-events: none; }
.wz-sheet::before { left: 8px; bottom: 8px; border-right: 0; border-top: 0; }
.wz-sheet::after { right: 8px; bottom: 8px; border-left: 0; border-top: 0; }
.wz-num { position: absolute; top: 4px; right: 18px; font: 600 clamp(80px, 14vw, 150px)/1 var(--display); color: transparent; -webkit-text-stroke: 1.5px var(--rule); user-select: none; pointer-events: none; }
.wz-sheet > * { position: relative; }
.wz-sheet > .wz-num { position: absolute; }
.wz-q { max-width: 22ch; margin: 6px 0 10px; font: 600 clamp(34px, 5.4vw, 58px)/1 var(--display); text-transform: uppercase; letter-spacing: .012em; outline: none; }
.wz-sheet .lead { margin: 0 0 22px; }
.wz-body.anim { animation: wz-in .26s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes wz-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.wz-errsum { margin-bottom: 16px; }
.wz-errsum p { margin: 0 0 4px; }
.wz-errsum ul { margin: 0; padding-left: 18px; }
.wz-body h3 { font: 600 22px/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; margin: 22px 0 10px; }
.wz-body h4 { font: 600 17px/1.2 var(--display); text-transform: uppercase; letter-spacing: .02em; margin: 18px 0 8px; color: var(--muted); }
.wz-sec:first-child h3 { margin-top: 0; }
.wz-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; align-items: start; }
.wz-grid2 .wide { grid-column: 1 / -1; }
.wz-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.wz-main { min-width: 0; }
.wz-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }

/* type cards: native radios, drafting-sheet look */
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.type-card { position: relative; display: block; cursor: pointer; }
.type-card input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.tc-body { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 12px 14px 14px; border: 1.5px solid var(--field-line); border-top: 4px solid var(--bp); background: var(--paper); transition: border-color .15s, background .15s; }
.type-card:hover .tc-body { border-color: var(--bp); }
.type-card:has(input:checked) .tc-body { border-color: var(--orange); border-top-color: var(--orange); background: var(--warn-bg); color: var(--warn-ink); }
.type-card:has(input:checked) .tc-meta { color: inherit; }
.type-card:has(input:focus-visible) .tc-body { outline: 3px solid var(--focus); outline-offset: 2px; }
.tc-thumb { display: block; width: 100%; aspect-ratio: 4 / 2.2; background-color: var(--bp); color: var(--bp-line); background-image: linear-gradient(rgba(207, 227, 245, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(207, 227, 245, .1) 1px, transparent 1px); background-size: 8px 8px; }
.tc-thumb svg { display: block; width: 100%; height: 100%; padding: 6px; }
.tc-thumb.plus { display: flex; align-items: center; justify-content: center; }
.tc-thumb.plus .ico { width: 34px; height: 34px; }
.tc-name { font: 600 24px/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.tc-meta { font-size: 13px; color: var(--muted); }
.type-card.new .tc-body { border-style: dashed; }
.wz-newtype { margin-top: 22px; padding: 14px 16px 6px; border: 1px dashed var(--field-line); border-left: 4px solid var(--orange); background: var(--paper); }
.wz-newtype h3 { margin-top: 0; }
.field.prefix input { text-transform: uppercase; letter-spacing: .12em; max-width: 8em; }

/* name preview */
.wz-preview { position: sticky; top: 16px; padding: 14px 16px 16px; border: 1px solid var(--bp); border-top: 4px solid var(--bp); background: var(--paper); }
.pv-k { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.pv-code { margin: 0; font: 600 34px/1 var(--display); letter-spacing: .03em; color: var(--bp); }
:root[data-theme=dark] .pv-code { color: var(--bp-line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .pv-code { color: var(--bp-line); } }
.wz-preview .pv-name { margin: 6px 0 4px; font: 600 24px/1.1 var(--display); text-transform: none; letter-spacing: .005em; }
.pv-long { margin: 8px 0 0; font-size: 13px; color: var(--muted); }

/* star picker */
.wz-star { margin-top: 8px; }
.wz-star h3 { margin-top: 12px; }
.wz-chosen { margin: 6px 0 10px; padding: 8px 12px; border-left: 4px solid var(--bp); background: var(--paper); }

/* editable materials table */
.wz-table-wrap { container-type: inline-size; overflow-x: auto; background: var(--sheet); border: 1px solid var(--rule); }
.wz-table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 14px; }
.wz-table th { padding: 8px 10px; text-align: left; font-size: 13px; color: var(--muted); background: var(--paper); white-space: nowrap; border-bottom: 2px solid var(--bp-dim); }
.wz-table td { padding: 8px 10px; vertical-align: top; border-bottom: 1px solid var(--rule); }
.wz-table tbody tr:last-child td { border-bottom: 0; }
.wz-table .c-n { width: 36px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wz-table .c-mat { min-width: 190px; }
.wz-table .sub { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.wz-table input:not([type=checkbox]), .wz-table select { min-height: 40px; padding: 6px 8px; font-size: 14px; }
.wz-table select { min-width: 140px; }
.wz-table .note { margin-top: 6px; }
.wz-table td:nth-child(6) { min-width: 112px; }
.wz-foot { display: none; margin: 18px 0 0; font-size: 14px; }
.wz-table .c-mat .badge { margin-left: 4px; }
.wz-table .coef { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.wz-table .coef .cell-field { flex: 1 1 96px; min-width: 96px; }
.wz-table .coef .avg { flex-basis: 100%; margin: 0; font-size: 12px; }
.wz-table .with-unit .unit { max-width: 64px; }
.wz-table .c-act { width: 1%; white-space: nowrap; }
.row-actions { display: flex; gap: 2px; }
.row-actions .icon-btn { width: 40px; height: 40px; }
.icon-btn[aria-disabled=true] { opacity: .4; cursor: default; }
.wz-table-wrap:focus-visible { outline-offset: 2px; }
@container (max-width: 760px) {
  .wz-table { min-width: 0; display: block; }
  .wz-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
  .wz-table tbody { display: block; }
  .wz-table tr { display: block; margin: 10px; padding: 8px 12px; border: 1px solid var(--rule); border-left: 4px solid var(--bp-dim); background: var(--paper); }
  .wz-table td { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 10px; align-items: center; padding: 6px 0; border: 0; }
  .wz-table td::before { content: attr(data-label); color: var(--muted); font-size: 13px; }
  .wz-table .c-n { width: auto; font-weight: 600; }
  .wz-table .c-act { width: auto; white-space: normal; }
  .wz-table .c-mat > * { grid-column: 2; }
  .wz-table .c-mat .badge { justify-self: start; }
  .wz-table .coef { min-width: 0; }
}
@container (max-width: 430px) {
  .wz-table td { grid-template-columns: minmax(0, 1fr); }
  .wz-table .c-mat > * { grid-column: auto; }
}

/* desperdicio + terminacion */
.wz-now { margin: 10px 0; padding: 8px 12px; border-left: 4px solid var(--bp); background: var(--paper); }
.wz-over { list-style: none; margin: 0 0 10px; padding: 0; }
.wz-over li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.finish-grid2 { margin-top: 12px; }
.finish-grid2 .btn { margin-top: 8px; }

/* review */
.rv-sec { padding: 4px 0 12px; border-bottom: 1px solid var(--rule); }
.rv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rv-head h3 { margin: 12px 0 8px; }
.rv-list { list-style: none; margin: 0; padding: 0; }
.rv-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 5px 0; border-bottom: 1px dotted var(--rule); }
.rv-problems { margin: 6px 0 0; padding-left: 18px; }
.rv-thumbs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.rv-thumbs li { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.rv-thumbs img { width: 112px; height: 84px; object-fit: contain; background: var(--bp); border: 1px solid var(--rule); }
.shot-img.static { position: relative; cursor: default; }

/* footer navigation */
.wz-nav { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 14px; padding: 12px 14px; background: var(--sheet); border: 1px solid var(--rule); border-bottom: 3px solid var(--bp); box-shadow: 0 -8px 16px -10px rgba(5, 12, 22, .35); }
.wz-nav-side, .wz-nav-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wz-save-note { flex: 1 1 200px; margin: 0; font-size: 13px; color: var(--muted); text-align: center; }
.wz-save-note.is-bad { color: var(--err-ink); font-weight: 600; }

/* create-material dialog */
.wz-modal { width: min(660px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--field-line); border-top: 4px solid var(--orange); background: var(--sheet); color: var(--ink); overflow: auto; }
.wz-modal::backdrop { background: rgba(5, 12, 22, .6); }
.wz-mform { padding: 18px 20px 20px; }
.wz-mform h3 { margin: 0 0 4px; font: 600 26px/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.mm-pres { margin: 6px 0 14px; padding: 8px 12px 12px; border: 1px solid var(--rule); }
.mm-pres legend { padding: 0 6px; font-size: 13px; color: var(--muted); }
.mm-pres-row { display: grid; grid-template-columns: minmax(0, 1fr) 130px 44px; gap: 8px; align-items: start; }
.mm-pres-row .icon-btn { margin-top: 24px; }
.mm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

@media (max-width: 860px) {
  .wz-sheet { padding: 20px 16px 28px; }
  .wz-cols { grid-template-columns: minmax(0, 1fr); }
  .wz-preview { position: static; order: -1; }
  .wz-grid2 { grid-template-columns: minmax(0, 1fr); }
  .wz-nav { padding: 10px 12px; }
}
@media (max-width: 640px) {
  .wz-stepper .wz-l { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wz-stepper .is-current .wz-l { position: static; width: auto; height: auto; margin: 0; clip: auto; }
  .wz-n { width: 34px; height: 34px; font-size: 18px; }
  .wz-stepper li + li::before { top: 17px; }
  .wz-num { font-size: 76px; top: 0; right: 10px; }
  .mm-pres-row { grid-template-columns: minmax(0, 1fr) 100px 44px; }
  .wz-nav { flex-wrap: nowrap; gap: 8px; }
  .wz-nav-side .btn.quiet, .wz-save-note:not(.is-bad) { display: none; }
  .wz-save-note { order: 3; flex-basis: 100%; }
  .wz-nav-main { flex: 1 1 auto; justify-content: flex-end; flex-wrap: wrap; }
  .wz-nav-main .btn { flex: 1 1 auto; }
  .wz-foot { display: block; }
}

/* ---------- Materiales + Ajustes ---------- */
.btn.danger { border-color: var(--err-line); color: var(--err-ink); background: transparent; }
.btn.danger:hover { background: var(--err-bg); }
.btn[aria-disabled=true] { opacity: .6; cursor: default; }
.warn-text { color: var(--err-ink); }
.spacer { flex: 1 1 auto; }

.mat-wrap, .set-wrap { container-type: inline-size; overflow-x: auto; background: var(--sheet); border: 1px solid var(--rule); border-radius: 3px; }
.mat-table, .set-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mat-table { min-width: 860px; }
.mat-table th, .mat-table td, .set-table th, .set-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.mat-table thead th, .set-table thead th { background: var(--paper); color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; border-bottom: 2px solid var(--bp-dim); }
.mat-table tbody tr, .set-table tbody tr { cursor: default; }
.mat-table tbody tr { cursor: pointer; }
.mat-table tbody tr:hover { background: color-mix(in srgb, var(--bp) 7%, transparent); }
.mat-table tbody tr:last-child > *, .set-table tbody tr:last-child > * { border-bottom: 0; }
.mat-table .c-name { min-width: 220px; }
.mat-open { display: inline-flex; align-items: center; min-height: 40px; padding: 0; border: 0; background: transparent; color: var(--ink); font: 600 15px/1.25 var(--ui); text-align: left; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; cursor: pointer; }
.mat-open:hover { color: var(--bp); }
:root[data-theme=dark] .mat-open:hover { color: var(--bp-line); }
.pres-list { list-style: none; margin: 0; padding: 0; }
.pres-list li { padding: 1px 0; }
.use-n { font-weight: 600; }
@container (max-width: 760px) {
  .mat-table, .set-table { min-width: 0; display: block; }
  .mat-table thead, .set-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mat-table tbody, .set-table tbody { display: block; }
  .mat-table tr, .set-table tr { display: block; margin: 10px; padding: 8px 12px; border: 1px solid var(--rule); border-left: 4px solid var(--bp-dim); background: var(--paper); }
  .mat-table td, .mat-table th[scope=row], .set-table td, .set-table th[scope=row] { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 10px; align-items: center; padding: 6px 0; border: 0; }
  .mat-table td::before, .mat-table th[scope=row]::before, .set-table td::before, .set-table th[scope=row]::before { content: attr(data-label); color: var(--muted); font-size: 13px; font-weight: 500; }
}
@container (max-width: 430px) {
  .mat-table td, .mat-table th[scope=row], .set-table td, .set-table th[scope=row] { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

.page-toast { position: fixed; left: 16px; bottom: 16px; z-index: 30; width: min(440px, calc(100vw - 32px)); }
.page-toast .toast { box-shadow: 0 8px 24px rgba(5, 12, 22, .35); }

.mat-sec { margin-bottom: 18px; }
.mat-sec .btn.danger { margin-top: 4px; }
.tag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 12px; }
.use-list { list-style: none; margin: 0; padding: 0; }
.use-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.use-list a { font: 600 18px/1 var(--display); letter-spacing: .02em; }

.set-sec { margin: 0 0 40px; max-width: 920px; }
.set-sec > h2 { font-size: clamp(28px, 3.4vw, 38px); line-height: 1.05; text-transform: uppercase; letter-spacing: .015em; }
.set-sec > .lead { margin: 8px 0 16px; }
.set-sec > .cota { margin-top: 0; }
.set-sec h3 { margin: 22px 0 6px; font: 600 22px/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.set-sec .hint { margin: 8px 0 10px; }
.set-table .with-unit { max-width: 150px; }
.pct-input { max-width: 110px; text-align: right; font-variant-numeric: tabular-nums; }
.row-status { font-size: 13px; color: var(--muted); }
.row-status.is-bad { color: var(--err-ink); font-weight: 600; }
.set-table .c-status { min-width: 180px; }
.cons-type { padding: 4px 16px 14px; margin-bottom: 14px; background: var(--sheet); border: 1px solid var(--rule); border-top: 3px solid var(--bp); border-radius: 3px; }
.cons-edit { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; }
.cons-item { display: grid; grid-template-columns: 130px minmax(0, 1fr) 44px; gap: 8px 12px; align-items: start; padding: 10px 12px; border: 1px solid var(--rule); border-left: 4px solid var(--bp-dim); background: var(--paper); }
.cons-item .icon-btn { margin-top: 22px; }
.cons-item textarea { width: 100%; min-height: 64px; border: 1px solid var(--field-line); border-radius: 4px; padding: 8px 9px; background: var(--field); color: var(--ink); font: inherit; resize: vertical; }
.set-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; }
.reset-box { margin-top: 8px; padding: 14px 16px; border: 1px dashed var(--err-line); border-left: 4px solid var(--err-line); background: var(--paper); }
.reset-box h3 { margin-top: 0; }
.reset-confirm { padding: 12px 14px; border: 1px solid var(--err-line); background: var(--err-bg); color: var(--err-ink); }
.reset-confirm .btn { background: var(--sheet); color: var(--ink); }
.reset-confirm .btn.danger { color: var(--err-ink); }
.reset-confirm p { margin: 0 0 10px; }
@media (max-width: 560px) {
  .cons-item { grid-template-columns: minmax(0, 1fr) 44px; }
  .cons-item .cons-text { grid-column: 1 / -1; grid-row: 2; }
  .cons-item .icon-btn { grid-column: 2; grid-row: 1; margin-top: 22px; }
  .cons-type { padding: 4px 12px 12px; }
  .page-toast { left: 8px; bottom: 8px; width: calc(100vw - 16px); }
}
@container (max-width: 760px) {
  .set-table td.c-status { padding: 0; }
  .set-table td.c-status::before { display: none; }
}

/* ---------- Calcular (T6) ---------- */
.sec-title { margin: 0 0 12px; font-size: 26px; text-transform: uppercase; letter-spacing: .02em; }
.cmp-job { margin-bottom: 16px; padding: 14px 16px; background: var(--sheet); border: 1px solid var(--rule); border-top: 3px solid var(--bp); border-radius: 3px; }
.cmp-job h2 { font-size: 28px; line-height: 1.1; overflow-wrap: anywhere; margin: 4px 0 6px; }
.cmp-job p { margin: 0 0 6px; }
.cmp-job-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 14px; }
.reasons { margin: 6px 0 0; padding-left: 20px; }
.notice.ok { display: flex; gap: 10px; align-items: flex-start; border-left-color: var(--ok-ink); background: var(--ok-bg); color: var(--ok-ink); }
.notice.ok a { color: inherit; font-weight: 600; }
.cmp-form { margin-bottom: 20px; }
.cmp-set { margin: 0 0 14px; padding: 14px 16px 4px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 3px; min-width: 0; }
.cmp-set legend { padding: 0 6px; font: 600 20px/1.2 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.cmp-set .hint { margin: 0 0 12px; }
.cmp-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 18px; }
.cmp-fields .field .hint { margin: 5px 0 0; }
.opt { font-weight: 400; }
.dims { margin: 4px 0 14px; padding: 12px 14px; border: 1px dashed var(--field-line); background: var(--paper); }
.dims-title { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.dims-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.dims-row .field { flex: 0 1 120px; min-width: 96px; }
.dims-x { padding-bottom: 12px; color: var(--muted); font-size: 18px; }
.dims .form-error { margin: 10px 0 0; }
.cmp-results { margin-bottom: 16px; }
.cmp-sum { margin: 0 0 8px; font-size: 14px; }
.cmp-empty { padding: 24px 16px; }
.cmp-empty p:last-child { margin: 0; }
.form-error ul { margin: 4px 0 0; padding-left: 20px; }
.form-error p { margin: 0; }
.cmp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.cmp-status:empty { display: none; }
.cmp-status { margin-bottom: 18px; outline: none; }
.cmp-status .notice { margin: 0; }
.cmp-status .form-error { margin: 0; }
.cmp-cons, .det-sec { margin-top: 28px; }
.cons-group { margin-bottom: 14px; }
.cons-group h3 { margin: 0 0 6px; font: 600 15px var(--ui); color: var(--muted); }
.cons-list { margin: 0; padding-left: 20px; }
.cons-list li { margin-bottom: 4px; }

/* results table: stacks into cards when its own container is narrow */
.res-wrap, .hist-wrap { container-type: inline-size; }
.res-table, .hist-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.res-table th, .res-table td, .hist-table th, .hist-table td { padding: 10px 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--rule); }
.res-table thead th, .hist-table thead th { background: var(--paper); color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.res-table .num, .hist-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.res-table tbody tr:last-child > *, .hist-table tbody tr:last-child > * { border-bottom: 0; }
.res-table .c-mat, .hist-table .c-job { font-weight: 600; }
.res-table .c-qty strong { font-size: 16px; }
.res-table .c-qty .unit { color: var(--muted); font-size: 12px; }
@container (max-width: 680px) {
  .res-table, .res-table tbody { display: block; }
  .res-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
  .res-table tr { display: block; margin: 10px; padding: 6px 12px; border: 1px solid var(--rule); border-left: 4px solid var(--bp-dim); background: var(--paper); }
  .res-table th, .res-table td { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 10px; align-items: baseline; padding: 6px 0; border: 0; text-align: left; }
  .res-table .num { text-align: left; }
  .res-table th::before, .res-table td::before { content: attr(data-label); color: var(--muted); font-size: 13px; font-weight: 400; }
}
@container (max-width: 430px) {
  .res-table th, .res-table td { grid-template-columns: 96px minmax(0, 1fr); }
}
@container (max-width: 680px) {
  .res-table .c-mat { grid-template-columns: minmax(0, 1fr); padding-bottom: 4px; font-size: 15px; }
  .res-table .c-mat::before { display: none; }
}
@container (max-width: 860px) {
  .hist-table, .hist-table tbody { display: block; }
  .hist-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hist-table tr { display: block; margin: 10px; padding: 6px 12px; border: 1px solid var(--rule); border-left: 4px solid var(--bp-dim); background: var(--paper); cursor: pointer; }
  .hist-table th, .hist-table td { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 4px 10px; align-items: baseline; padding: 5px 0; border: 0; text-align: left; }
  .hist-table .num { text-align: left; }
  .hist-table th::before, .hist-table td::before { content: attr(data-label); color: var(--muted); font-size: 13px; font-weight: 400; }
  .hist-table .c-act { width: auto; }
}
@container (max-width: 430px) {
  .hist-table th, .hist-table td { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* job picker (#/calcular without id) */
.job-picks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.job-pick { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; min-height: 56px; padding: 10px 14px; background: var(--sheet); border: 1px solid var(--rule); border-left: 4px solid var(--bp); border-radius: 3px; text-decoration: none; }
.job-pick:hover { border-left-color: var(--orange); background: var(--paper); }
.jp-code { font: 600 22px/1 var(--display); letter-spacing: .02em; }
.jp-name { overflow-wrap: anywhere; }

/* history */
.hist-table .c-job { min-width: 220px; }
.hist-table .c-job .code-link { font-weight: 600; white-space: nowrap; }
.h-title { font-weight: 400; margin-left: 6px; }
.hist-table tbody tr { cursor: pointer; }
.hist-table tbody tr:hover { background: color-mix(in srgb, var(--bp) 7%, transparent); }
.badge.src-plano { background: var(--bp); color: #fff; }
.badge.src-panel { background: var(--chip-bg); color: var(--chip-ink); }
.back { margin: 0 0 14px; }
.back a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 500; }

/* dashboard */
.dash-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.stats.dash-stats { max-width: none; }
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.dash-card { min-width: 0; padding: 14px 16px 16px; background: var(--sheet); border: 1px solid var(--rule); border-top: 3px solid var(--bp); border-radius: 3px; }
.dash-card.is-alert { border-top-color: var(--orange); }
.dash-card.wide { grid-column: 1 / -1; }
.dash-card h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 24px; text-transform: uppercase; letter-spacing: .02em; }
.dash-card h2 .ico { color: var(--orange); }
.dash-list { list-style: none; margin: 0; padding: 0; }
.dash-list > li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.dash-list > li:last-child { border-bottom: 0; }
.dash-list .dl-main { min-width: 0; overflow-wrap: anywhere; }
.dash-list .dl-meta { color: var(--muted); font-size: 13px; }
.dash-list .dl-meta a { font-weight: 600; }
.alert-list > li { display: block; }
.alert-list .reasons { color: var(--muted); font-size: 13px; }
.dash-link { text-decoration: none; }
.dash-link:hover { text-decoration: underline; }
.dash-ok { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px; background: var(--ok-bg); color: var(--ok-ink); border-left: 4px solid var(--ok-ink); }
.dash-more { margin: 10px 0 0; font-size: 14px; }
@media (max-width: 860px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
}

img.img-broken { visibility: hidden; }