:root {
  --bg:#eceff0; --surface:#fff; --ink:#1b2428; --muted:#5b676c; --line:#d3d9db; --accent:#c2410c; --accent-ink:#fff; --soft:#f4f6f6;
  --ok:#1f7a4d; --warn:#8a5a00; --bad:#b42318; --ok-bg:#e3f3ea; --warn-bg:#fbefd2; --bad-bg:#fde7e4; --info:#1d4ed8; --info-bg:#e3ecfd;
  --font-display:"Barlow Condensed","Arial Narrow",Arial,sans-serif; --font-body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg:#12181b; --surface:#1a2226; --ink:#e8ecec; --muted:#9aa7ab; --line:#2b373c; --accent:#f0743a; --accent-ink:#1b1208; --soft:#20292d;
  --ok:#4cc38a; --warn:#e3b341; --bad:#f97066; --ok-bg:#163326; --warn-bg:#3a2f10; --bad-bg:#3d1d1a; --info:#7aa2ff; --info-bg:#1b2745; color-scheme:dark; } }
* { box-sizing:border-box; }
html,body { margin:0; }
body { background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:15px; line-height:1.45; }
h1,h2,h3 { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; margin:0; line-height:1.1; }
h1 { font-size:clamp(26px,5vw,34px); } h2 { font-size:20px; } h3 { font-size:16px; }
.app { display:grid; grid-template-columns:220px minmax(0,1fr); min-height:100dvh; }
.side { background:var(--surface); border-right:1px solid var(--line); padding:16px 12px; display:flex; flex-direction:column; gap:6px; position:sticky; top:0; height:100dvh; }
.brand { font-family:var(--font-display); font-weight:700; font-size:26px; letter-spacing:.05em; text-transform:uppercase; padding:4px 10px 12px; }
.brand b { color:var(--accent); }
.nav a { display:flex; gap:10px; align-items:center; padding:9px 10px; border-radius:8px; color:var(--ink); text-decoration:none; font-weight:600; }
.nav a[aria-current="page"] { background:var(--accent); color:var(--accent-ink); }
.nav a:not([aria-current="page"]):hover { background:var(--soft); }
.who { margin-top:auto; font-size:12px; color:var(--muted); padding:8px 10px; border-top:1px solid var(--line); }
.main { padding:20px clamp(14px,3vw,32px) 80px; display:flex; flex-direction:column; gap:16px; min-width:0; max-width:1240px; width:100%; }
.head { display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; justify-content:space-between; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:16px; display:flex; flex-direction:column; gap:12px; min-width:0; }
.cols { display:grid; gap:16px; grid-template-columns:minmax(0,1fr); align-items:start; }
@media (min-width:980px) { .cols.two { grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); } .sticky { position:sticky; top:16px; } }
.row { display:flex; flex-wrap:wrap; gap:12px; }
.field { display:flex; flex-direction:column; gap:4px; flex:1 1 170px; min-width:0; }
.field.sm { flex:0 1 110px; }
.card > .field, dialog .field, .accept .field { flex:none; }
label,.lbl { font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
input,select,textarea { font:inherit; color:var(--ink); background:var(--soft); border:1px solid var(--line); border-radius:6px; padding:9px 10px; width:100%; min-width:0; }
textarea { resize:vertical; }
:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
button,.btn { font:inherit; font-weight:600; cursor:pointer; border-radius:6px; border:1px solid var(--line); background:var(--surface); color:var(--ink); padding:9px 14px; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
button.primary,.btn.primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
button.ghost { background:transparent; } button.sm { padding:5px 10px; font-size:13px; } button.danger { color:var(--bad); border-color:var(--bad); }
button[disabled] { opacity:.5; cursor:not-allowed; }
.actions { display:flex; flex-wrap:wrap; gap:10px; }
.tag { font-size:12.5px; color:var(--muted); }
.badge { display:inline-block; font-size:12px; font-weight:600; border-radius:99px; padding:2px 10px; background:var(--soft); color:var(--muted); border:1px solid var(--line); white-space:nowrap; }
.badge.ok { background:var(--ok-bg); color:var(--ok); border-color:transparent; } .badge.warn { background:var(--warn-bg); color:var(--warn); border-color:transparent; }
.badge.bad { background:var(--bad-bg); color:var(--bad); border-color:transparent; } .badge.info { background:var(--info-bg); color:var(--info); border-color:transparent; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; }
.stat { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
.stat span { display:block; font-size:12px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; font-weight:600; }
.stat b { font-family:var(--font-display); font-size:26px; font-variant-numeric:tabular-nums; }
.neg { color:var(--bad); }
.list { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:8px; }
.item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; padding:11px 12px; border-top:1px solid var(--line); align-items:center; }
.item:first-child { border-top:0; } .item .t { font-weight:600; overflow-wrap:anywhere; } .item .amt { font-variant-numeric:tabular-nums; font-weight:600; text-align:right; }
.item .ctl { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.item.link { cursor:pointer; } .item.link:hover { background:var(--soft); }
.empty { padding:18px 12px; color:var(--muted); text-align:center; }
.tabs { display:flex; gap:2px; border-bottom:2px solid var(--line); overflow-x:auto; }
.tabs a { padding:9px 12px; font-family:var(--font-display); font-size:17px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); text-decoration:none; border-bottom:3px solid transparent; margin-bottom:-2px; white-space:nowrap; }
.tabs a[aria-current="page"] { color:var(--ink); border-bottom-color:var(--accent); }
.kanban { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px,1fr); gap:12px; overflow-x:auto; padding-bottom:6px; }
.kcol { background:var(--soft); border:1px solid var(--line); border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:8px; min-height:140px; }
.kcard { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:10px; display:flex; flex-direction:column; gap:6px; }
.prog { height:10px; border-radius:99px; background:var(--soft); border:1px solid var(--line); overflow:hidden; } .prog span { display:block; height:100%; background:var(--ok); }
.prog.cost span { background:var(--accent); } .prog.over span { background:var(--bad); }
.gantt { display:flex; flex-direction:column; gap:6px; }
.grow { display:grid; grid-template-columns:minmax(120px,200px) minmax(0,1fr); gap:10px; align-items:center; }
.gtrack { position:relative; height:26px; background:var(--soft); border-radius:6px; border:1px solid var(--line); overflow:hidden; }
.gbar { position:absolute; top:3px; bottom:3px; border-radius:4px; background:var(--info-bg); border:1px solid var(--info); overflow:hidden; } .gbar i { display:block; height:100%; background:var(--info); }
.gtoday { position:absolute; top:0; bottom:0; width:2px; background:var(--accent); }
.tbl { width:100%; border-collapse:collapse; font-size:14px; font-variant-numeric:tabular-nums; }
.tbl th,.tbl td { padding:7px 8px; text-align:right; border-top:1px solid var(--line); } .tbl th:first-child,.tbl td:first-child { text-align:left; }
.tbl thead th { border-top:0; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); background:var(--soft); }
.wrapx { overflow-x:auto; border:1px solid var(--line); border-radius:8px; }
.lines .line { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; padding:12px; border-top:1px solid var(--line); }
.lines .line:first-child { border-top:0; } .line .inputs { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:8px 10px; align-items:end; }
.line .inputs label { flex:0 1 100px; display:flex; flex-direction:column; gap:3px; } .line .inputs input { padding:6px 8px; }
.totals { display:flex; flex-direction:column; gap:6px; font-variant-numeric:tabular-nums; } .totals>div { display:flex; justify-content:space-between; gap:12px; }
.totals .big { font-family:var(--font-display); font-size:32px; font-weight:700; padding-top:8px; border-top:2px solid var(--ink); margin-top:4px; } .totals .big span:last-child { color:var(--accent); }
.internal { background:var(--soft); border:1px dashed var(--line); border-radius:8px; padding:10px 12px; display:flex; flex-direction:column; gap:4px; font-variant-numeric:tabular-nums; }
.internal div { display:flex; justify-content:space-between; gap:12px; }
.alert { background:var(--bad-bg); color:var(--bad); border-radius:8px; padding:10px 12px; font-weight:600; } .note { background:var(--warn-bg); color:var(--warn); border-radius:8px; padding:10px 12px; }
.photos { display:flex; flex-wrap:wrap; gap:8px; } .photos img { width:96px; height:72px; object-fit:cover; border-radius:6px; border:1px solid var(--line); cursor:pointer; }
.check { display:flex; flex-direction:row; align-items:center; gap:8px; text-transform:none; letter-spacing:0; font-size:14px; color:var(--ink); } .check input { width:auto; }
dialog { border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); padding:0; width:min(520px,calc(100vw - 24px)); }
dialog::backdrop { background:rgba(0,0,0,.45); } dialog form { padding:18px; display:flex; flex-direction:column; gap:12px; }
.toast { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(20px + env(safe-area-inset-bottom,0px)); background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:8px; font-weight:600; max-width:calc(100vw - 32px); z-index:50; text-align:center; }
.auth { max-width:420px; margin:8vh auto; padding:0 16px; } .auth .card { gap:14px; }
#printArea { display:none; }
@media (max-width:760px) {
  input,select,textarea { font-size:16px; } /* iOS hace zoom al enfocar campos menores a 16px */
  button,.btn { min-height:40px; } button.sm,.btn.sm { min-height:36px; }
  .main { padding-top:max(20px,env(safe-area-inset-top)); }
  .toast { bottom:calc(84px + env(safe-area-inset-bottom,0px)); }
  .app { grid-template-columns:1fr; padding-bottom:calc(64px + env(safe-area-inset-bottom,0px)); }
  .side { position:fixed; bottom:0; left:0; right:0; top:auto; height:auto; flex-direction:row; padding:6px; border-right:0; border-top:1px solid var(--line); z-index:20; overflow-x:auto; padding-bottom:calc(6px + env(safe-area-inset-bottom,0px)); }
  .brand,.who { display:none; } .nav { display:flex; gap:2px; width:100%; } .nav a { flex:1 1 0; min-width:0; justify-content:center; flex-direction:column; gap:0; font-size:10.5px; letter-spacing:-.01em; padding:8px 1px; text-align:center; overflow:hidden; text-overflow:clip; white-space:nowrap; }
  .grow { grid-template-columns:minmax(0,1fr); gap:3px; }
}
@media (max-width:400px) { .nav a { font-size:9.5px; letter-spacing:-.02em; }
}
@media print {
  body { background:#fff; } .app,.toast,dialog,.auth { display:none !important; }
  #printArea { display:block !important; color:#111; font-family:var(--font-body); font-size:11pt; }
  #printArea table { width:100%; border-collapse:collapse; } #printArea th { background:#222; color:#fff; padding:5px 6px; font-size:9pt; text-align:left; }
  #printArea td { padding:5px 6px; border-bottom:1px solid #ccc; vertical-align:top; } #printArea .r { text-align:right; white-space:nowrap; }
  @page { size:A4; margin:14mm; }
}
dialog:has(#impGo) { width:min(720px,calc(100vw - 16px)); }

/* presupuesto de obra */
details.cat { background:var(--surface); border:1px solid var(--line); border-radius:12px; margin:10px 0; padding:0 10px; }
details.cat > summary { padding:12px 2px; cursor:pointer; font-weight:600; }
.tbl.pres td, .tbl.pres th { vertical-align:top; } .tbl.pres td:first-child { min-width:150px; }
input.qty { width:78px; min-width:0; text-align:right; }
.tbl.apu { font-size:12.5px; } .tbl.apu td,.tbl.apu th { padding:6px 4px; } .tbl.apu td:nth-child(n+2) { white-space:nowrap; } .tbl.apu th[colspan] { text-align:left; background:var(--soft); }
dialog:has(#impGo) .actions { position:sticky; bottom:-1px; padding:12px 0 4px; background:inherit; z-index:2; }
dialog:has(#impGo) details > summary { cursor:pointer; padding:8px 0; color:var(--muted); font-weight:600; }
input[type=date],input[type=time] { -webkit-appearance:none; appearance:none; max-width:100%; min-height:42px; }
label.check.bc { align-items:flex-start; padding:8px 0; border-top:1px solid var(--line); } label.check.bc input { margin-top:3px; width:auto; }
.prow { padding:12px 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px; } .pname { font-weight:600; }
.pgrid { display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; } .pgrid label { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--muted); } .pgrid input.qty { width:100%; text-align:left; }
.pnum { display:flex; flex-direction:column; gap:2px; font-size:12px; color:var(--muted); } .pnum b { font-size:15px; color:var(--ink); }
input[type=checkbox] { accent-color:var(--accent); width:20px; height:20px; flex:none; } .check input[type=checkbox] { width:20px; }
body.locked #root { visibility:hidden; }