:root{
  --bg:#F1F3F6; --surface:#FFFFFF; --surface-2:#E7EAF0; --surface-3:#F7F8FA;
  --line:#D8DDE6; --line-strong:#C2C9D6;
  --ink:#12151B; --ink-2:#454D5C; --ink-3:#6E7788;
  --accent:#1B3A6B; --accent-soft:#E3EAF5; --accent-on:#FFFFFF;
  --p1:#9F1D14; --p2:#067647; --p3:#C2410C; --p4:#CA8504; --p5:#1758C4; --p6:#56606F;
  --p1-on:#FFFFFF; --p2-on:#FFFFFF; --p3-on:#FFFFFF; --p4-on:#3B2503; --p5-on:#FFFFFF; --p6-on:#FFFFFF;
  --late:#C2410C; --ontime:#9CA6B6; --danger:#9F1D14;
  --shadow:0 1px 2px rgba(18,21,27,.06), 0 8px 24px -16px rgba(18,21,27,.28);
  --r:10px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0E1116; --surface:#171B22; --surface-2:#1F242D; --surface-3:#12161C;
    --line:#2A313C; --line-strong:#3A434F;
    --ink:#EDF0F5; --ink-2:#A7B0BE; --ink-3:#7B8494;
    --accent:#8FB0E4; --accent-soft:#1B2534; --accent-on:#0E1116;
    --p1:#F04438; --p2:#17B26A; --p3:#EF6820; --p4:#EAAA08; --p5:#528BFF; --p6:#98A2B3;
    --p1-on:#250603; --p2-on:#032012; --p3-on:#2A1103; --p4-on:#2B1F02; --p5-on:#04122E; --p6-on:#14181E;
    --late:#EF6820; --ontime:#4B5563; --danger:#F04438;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -16px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --bg:#0E1116; --surface:#171B22; --surface-2:#1F242D; --surface-3:#12161C;
  --line:#2A313C; --line-strong:#3A434F;
  --ink:#EDF0F5; --ink-2:#A7B0BE; --ink-3:#7B8494;
  --accent:#8FB0E4; --accent-soft:#1B2534; --accent-on:#0E1116;
  --p1:#F04438; --p2:#17B26A; --p3:#EF6820; --p4:#EAAA08; --p5:#528BFF; --p6:#98A2B3;
  --p1-on:#250603; --p2-on:#032012; --p3-on:#2A1103; --p4-on:#2B1F02; --p5-on:#04122E; --p6-on:#14181E;
  --late:#EF6820; --ontime:#4B5563; --danger:#F04438;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -16px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1180px; margin:0 auto; padding:28px 20px 72px; display:flex; flex-direction:column; gap:30px}
h1,h2,h3{font-family:Archivo,"IBM Plex Sans",system-ui,sans-serif; margin:0; text-wrap:balance; letter-spacing:-.015em}
h1{font-size:clamp(28px,4.2vw,42px); font-weight:700; line-height:1.05}
h2{font-size:19px; font-weight:600}
h3{font-size:14px; font-weight:600}
p{margin:0}
.num{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}

.page-head{display:flex; flex-direction:column; gap:12px; border-bottom:1px solid var(--line); padding-bottom:22px}
.head-row{display:flex; flex-wrap:wrap; gap:20px; align-items:flex-end; justify-content:space-between}
.stamp{display:flex; flex-direction:column; gap:2px; align-items:flex-end; border-left:2px solid var(--accent); padding-left:14px}
.stamp b{font-family:"IBM Plex Mono",monospace; font-size:17px; font-weight:600; letter-spacing:-.02em}
.lede{color:var(--ink-2); max-width:64ch; font-size:15px}

/* estado de guardado */
.savebar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between}
.state{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:500;
  border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:5px 13px; color:var(--ink-2);
}
.state .led{width:8px; height:8px; border-radius:50%; background:var(--ink-3); flex:0 0 auto}
.state[data-s="saved"] .led{background:var(--p2)}
.state[data-s="saving"] .led,.state[data-s="pend"] .led{background:var(--p4)}
.state[data-s="error"] .led{background:var(--danger)}
.state[data-s="read"] .led{background:var(--p5)}
.state[data-s="local"] .led{background:var(--ink-3)}
.tools{display:flex; flex-wrap:wrap; gap:8px; align-items:center}

button{font:inherit}
.btn{
  cursor:pointer; font-size:13px; font-weight:600; border-radius:8px; padding:7px 14px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2);
  display:inline-flex; align-items:center; gap:7px; transition:border-color .12s, color .12s, background .12s;
}
.btn:hover{border-color:var(--line-strong); color:var(--ink)}
.btn-main{background:var(--accent); border-color:var(--accent); color:var(--accent-on)}
.btn-main:hover{filter:brightness(1.1); color:var(--accent-on)}
.btn-danger{color:var(--danger); border-color:var(--line)}
.btn-danger:hover{border-color:var(--danger); color:var(--danger)}
.btn:focus-visible,.chip:focus-visible,.sr-input:focus-visible,.lst:focus-visible,.f input:focus-visible,.f select:focus-visible,.edit:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.alert{
  display:flex; gap:14px; align-items:flex-start; background:var(--surface); border:1px solid var(--line);
  border-left:4px solid var(--p1); border-radius:var(--r); padding:16px 18px; box-shadow:var(--shadow);
}
.alert .k{font-family:"IBM Plex Mono",monospace; font-size:26px; font-weight:600; color:var(--p1); line-height:1.1}
.alert p{color:var(--ink-2); font-size:14.5px}
.alert strong{color:var(--ink)}

.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px 16px 14px; display:flex; flex-direction:column; gap:6px; box-shadow:var(--shadow)}
.kpi .lab{font-size:12px; color:var(--ink-3); letter-spacing:.04em; text-transform:uppercase; font-weight:500}
.kpi .val{font-family:"IBM Plex Mono",monospace; font-size:33px; font-weight:600; line-height:1; letter-spacing:-.03em}
.kpi .sub{font-size:12.5px; color:var(--ink-3)}
.kpi.is-crit .val{color:var(--p1)}
.kpi.is-warn .val{color:var(--p4)}
.kpi.is-good .val{color:var(--p2)}

.sec-head{display:flex; flex-wrap:wrap; gap:10px; align-items:baseline; justify-content:space-between; margin-bottom:14px}
.sec-head .note{font-size:13px; color:var(--ink-3); max-width:58ch}
.flow{display:flex; align-items:stretch; gap:0; overflow-x:auto; padding-bottom:6px}
.stage{flex:1 1 0; min-width:158px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 14px 12px; display:flex; flex-direction:column; gap:9px; box-shadow:var(--shadow)}
.stage-name{font-size:13px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--ink-2)}
.stage-n{font-family:"IBM Plex Mono",monospace; font-size:27px; font-weight:600; line-height:1; letter-spacing:-.03em}
.stage-n small{font-size:12px; font-weight:400; color:var(--ink-3); letter-spacing:0; margin-left:4px}
.bar{display:flex; gap:2px; height:9px; border-radius:3px; overflow:hidden; background:var(--surface-2)}
.bar span{display:block; border-radius:2px}
.bar .b-late{background:var(--late)} .bar .b-ok{background:var(--ontime)}
.stage-pct{font-size:12.5px; color:var(--ink-2)}
.stage-pct b{font-family:"IBM Plex Mono",monospace; font-weight:600}
.stage.jam{border-color:var(--p3)} .stage.jam .stage-pct b{color:var(--late)}
.arrow{display:flex; align-items:center; padding:0 6px; color:var(--line-strong); flex:0 0 auto}
.arrow svg{display:block}
.flow-legend{display:flex; gap:16px; margin-top:12px; font-size:12.5px; color:var(--ink-3); flex-wrap:wrap}
.swatch{display:inline-flex; align-items:center; gap:6px}
.swatch i{width:10px; height:10px; border-radius:2px; display:block}

.filters{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px}
.chip{
  font-size:12.5px; font-weight:500; cursor:pointer; background:var(--surface); color:var(--ink-2);
  border:1px solid var(--line); border-radius:999px; padding:5px 12px; display:inline-flex; align-items:center; gap:7px;
  transition:border-color .12s, color .12s, background .12s;
}
.chip:hover{border-color:var(--line-strong); color:var(--ink)}
.chip .dot{width:8px; height:8px; border-radius:50%; display:block}
.chip .cnt{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-3)}
.chip[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent); color:var(--ink)}
.chip[aria-pressed="true"] .cnt{color:var(--ink-2)}
.sr-input{font:inherit; font-size:13.5px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:999px; padding:6px 14px; min-width:170px; flex:1 1 170px; max-width:260px}
.sr-input::placeholder{color:var(--ink-3)}

.orders{display:flex; flex-direction:column; gap:24px}
.group{display:flex; flex-direction:column; gap:6px}
.grp{display:flex; flex-flow:row wrap; gap:8px 14px; align-items:baseline; padding:0 0 9px 14px; border-left:4px solid var(--pc); border-bottom:1px solid var(--line)}
.grp-n{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-3)}
.grp-act{flex:1 1 340px; font-size:13px; color:var(--ink-2); line-height:1.45; min-width:0}
.pill{display:inline-flex; align-items:center; justify-content:center; background:var(--pc); color:var(--pon); border-radius:5px; padding:3px 9px; font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap}
.order{
  display:grid; grid-template-columns:minmax(0,1fr) 112px 100px 80px 100px 74px 34px 34px; gap:12px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:10px 13px 10px 0; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.order::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--pc)}
.order.done{opacity:.45}
.order.done .cli{text-decoration:line-through}
.cli{font-weight:600; font-size:14.5px; overflow-wrap:anywhere; margin-left:13px}
.cli .flag{display:block; font-size:11.5px; font-weight:400; color:var(--p4); margin-top:2px; line-height:1.35}
.meta{display:flex; flex-direction:column; gap:1px; min-width:0}
.ml{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:500}
.meta b{color:var(--ink-2); font-weight:500; font-size:13.5px; overflow-wrap:anywhere}
.days{font-family:"IBM Plex Mono",monospace; font-size:20px; font-weight:600; text-align:right; letter-spacing:-.02em; color:var(--ink-2)}
.days small{display:block; font-size:10px; font-weight:400; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
.days.neg{color:var(--late)} .days.now{color:var(--p4)}
.lst{
  appearance:none; -webkit-appearance:none; margin:0; cursor:pointer; width:22px; height:22px; border-radius:6px;
  border:1.5px solid var(--line-strong); background:var(--surface-3); display:grid; place-content:center;
  transition:background .12s, border-color .12s;
}
.lst:hover{border-color:var(--p2)}
.lst:checked{background:var(--p2); border-color:var(--p2)}
.lst:checked::after{content:""; width:5px; height:9px; border:solid var(--p2-on); border-width:0 2px 2px 0; transform:rotate(45deg) translate(-1px,-1px)}
.lst:disabled{cursor:default; opacity:.5}
.edit{
  cursor:pointer; width:30px; height:30px; border-radius:8px; border:1px solid var(--line);
  background:var(--surface-3); color:var(--ink-3); display:grid; place-content:center; padding:0;
}
.edit:hover{border-color:var(--line-strong); color:var(--ink)}
.empty{padding:26px; text-align:center; color:var(--ink-3); font-size:14px; background:var(--surface); border:1px dashed var(--line); border-radius:var(--r)}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px; box-shadow:var(--shadow)}
table{width:100%; border-collapse:collapse; font-size:13.5px}
th{text-align:left; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); font-weight:500; padding:0 0 8px; border-bottom:1px solid var(--line)}
th.r,td.r{text-align:right}
td{padding:9px 0; border-bottom:1px solid var(--line); color:var(--ink-2)}
tr:last-child td{border-bottom:0}
td.name{color:var(--ink); font-weight:500}
.mini{display:flex; align-items:center; gap:8px; justify-content:flex-end}
.mini .track{width:54px; height:6px; background:var(--surface-2); border-radius:3px; overflow:hidden; flex:0 0 auto}
.mini .fill{display:block; height:100%; background:var(--late); border-radius:3px}
.mini .pv{font-family:"IBM Plex Mono",monospace; font-size:13px; width:38px; text-align:right; color:var(--ink)}
.checks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.checks li{display:flex; gap:11px; font-size:13.5px; color:var(--ink-2); line-height:1.45}
.checks .n{flex:0 0 auto; width:20px; height:20px; border-radius:5px; background:var(--surface-2); color:var(--ink-2); font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:600; display:grid; place-content:center; margin-top:1px}

footer{border-top:1px solid var(--line); padding-top:20px; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; font-size:13px; color:var(--ink-3)}
footer a{color:var(--accent); font-weight:500}

dialog{
  border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:14px;
  padding:0; width:min(520px,calc(100vw - 28px)); box-shadow:0 24px 60px -20px rgba(0,0,0,.5);
}
dialog::backdrop{background:rgba(9,12,17,.55)}
.dlg-head{padding:18px 20px 0; display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.dlg-body{padding:16px 20px; display:grid; grid-template-columns:1fr 1fr; gap:13px}
.f{display:flex; flex-direction:column; gap:5px; min-width:0}
.f.wide{grid-column:1/-1}
.f label{font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); font-weight:500}
.f input,.f select{font:inherit; font-size:14px; background:var(--surface-3); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:8px 10px; width:100%}
.f .hint{font-size:11.5px; color:var(--ink-3)}
.f-check{grid-column:1/-1; display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-2); padding:2px 0}
.dlg-foot{padding:14px 20px 18px; display:flex; gap:9px; justify-content:flex-end; flex-wrap:wrap; border-top:1px solid var(--line); margin-top:2px}
.dlg-foot .spacer{flex:1 1 auto}
.err{grid-column:1/-1; color:var(--danger); font-size:13px; min-height:0}

.toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%,8px); z-index:60; opacity:0;
  transition:opacity .14s, transform .14s; background:var(--ink); color:var(--bg);
  border-radius:9px; padding:9px 15px; font-size:13px; box-shadow:0 10px 26px -10px rgba(0,0,0,.6); pointer-events:none;
}
.toast.on{opacity:1; transform:translate(-50%,0)}
.tip{position:fixed; z-index:50; pointer-events:none; opacity:0; transform:translateY(3px); transition:opacity .1s, transform .1s; background:var(--ink); color:var(--bg); border-radius:7px; padding:7px 10px; font-size:12px; line-height:1.4; box-shadow:0 8px 22px -8px rgba(0,0,0,.5); max-width:230px}
.tip.on{opacity:1; transform:translateY(0)}
.tip b{font-family:"IBM Plex Mono",monospace}

/* ---------- fotos ---------- */
.cli{display:flex; align-items:flex-start; gap:11px}
.cli-txt{min-width:0; flex:1 1 auto}
.thumb{
  flex:0 0 auto; width:38px; height:38px; border-radius:7px; object-fit:cover; display:block;
  border:1px solid var(--line); background:var(--surface-2); cursor:zoom-in; padding:0;
}
.thumb:hover{border-color:var(--accent)}
.thumb:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.nofoto{
  flex:0 0 auto; width:38px; height:38px; border-radius:7px; border:1px dashed var(--line-strong);
  background:none; display:grid; place-content:center; color:var(--ink-3); cursor:pointer; padding:0;
}
.nofoto:hover{border-color:var(--accent); color:var(--accent)}
.nofoto:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.nofoto svg{display:block}
#dlgimg{width:min(880px,calc(100vw - 28px)); padding:0; overflow:hidden}
#dlgimg img{display:block; width:100%; max-height:78vh; object-fit:contain; background:var(--surface-3)}
.imgbar{display:flex; gap:12px; align-items:center; justify-content:space-between; padding:13px 16px; flex-wrap:wrap}
.imgbar .who{font-weight:600; font-size:14.5px}
.imgbar .sub{font-size:12.5px; color:var(--ink-3)}
.fotobox{grid-column:1/-1; border-top:1px solid var(--line); padding-top:13px; display:flex; gap:13px; align-items:flex-start; flex-wrap:wrap}
.fotoprev{width:104px; height:104px; border-radius:9px; object-fit:cover; border:1px solid var(--line); background:var(--surface-2)}
.fotoempty{
  width:104px; height:104px; border-radius:9px; border:1px dashed var(--line-strong);
  display:grid; place-content:center; color:var(--ink-3); font-size:12px; text-align:center; padding:8px;
}
.fotoacts{display:flex; flex-direction:column; gap:8px; min-width:0; flex:1 1 190px}
.fotoacts .t{font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); font-weight:500}
.fotoacts .hint{font-size:12px; color:var(--ink-3)}
input[type=file]{display:none}
.peso{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-3)}

/* ---------- gráficas ---------- */
:root{ --c-late:#C2410C; --c-ok:#7E8899; --c-in:#067647; --c-out:#C2410C; --c-bar:#1758C4; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --c-late:#EF6820; --c-ok:#79839A; --c-in:#17B26A; --c-out:#EF6820; --c-bar:#528BFF; } }
:root[data-theme="dark"]{ --c-late:#EF6820; --c-ok:#79839A; --c-in:#17B26A; --c-out:#EF6820; --c-bar:#528BFF; }

.charts{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start}
.charts .card{min-width:0; overflow:hidden}
.charts .card.wide{grid-column:1/-1}
.chead{display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; justify-content:space-between; margin-bottom:15px}
.chead h3{font-size:15px}
.chead .sub{font-size:12.5px; color:var(--ink-3)}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--ink-3); margin-top:14px}
.legend i{width:10px; height:10px; border-radius:2px; display:inline-block; margin-right:6px; vertical-align:-1px}

/* barras horizontales */
.hchart{display:flex; flex-direction:column; gap:9px}
.crow{display:grid; grid-template-columns:104px minmax(0,1fr) 62px; gap:11px; align-items:center}
.clab{font-size:12.5px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ctrack{height:16px; background:var(--surface-2); border-radius:4px; overflow:hidden}
.cbar{display:flex; gap:2px; height:100%; min-width:2px; transition:width .25s ease}
.cseg{display:block; border-radius:2px; min-width:2px}
.cseg.late{background:var(--c-late)} .cseg.ok{background:var(--c-ok)}
.cseg.bar{background:var(--c-bar)} .cseg.owe{background:var(--c-out)}
.cval{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:12.5px; color:var(--ink); text-align:right}
.crow:hover .ctrack{outline:1px solid var(--line-strong); outline-offset:1px}

/* barras verticales (día a día) */
.vwrap{overflow-x:auto; max-width:100%; padding-bottom:4px}
.vchart{display:flex; align-items:flex-end; gap:6px; height:150px; min-width:min-content}
.vcol{display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:5px; flex:1 0 30px; height:100%; cursor:default}
.vstack{display:flex; flex-direction:column-reverse; gap:2px; width:100%; max-width:34px; justify-content:flex-end}
.vseg{display:block; border-radius:3px 3px 0 0; min-height:2px; transition:height .25s ease}
.vseg.in{background:var(--c-in)} .vseg.late{background:var(--c-late)} .vseg.bar{background:var(--c-bar)} .vseg.ok{background:var(--c-ok)}
.vseg + .vseg{border-radius:0}
.vzero{width:100%; max-width:34px; height:2px; background:var(--line); border-radius:2px}
.vlab{font-family:"IBM Plex Mono",monospace; font-size:10px; color:var(--ink-3); white-space:nowrap}
.vtop{font-family:"IBM Plex Mono",monospace; font-size:10.5px; font-weight:600; color:var(--ink-2); white-space:nowrap; margin-bottom:1px}
.vcol.hoy .vlab{color:var(--accent); font-weight:600}
.vcol:hover .vstack{filter:brightness(1.12)}
.cempty{padding:26px 8px; text-align:center; color:var(--ink-3); font-size:13.5px}

/* registro de abonos */
.abrow{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.abchip{
  display:inline-flex; align-items:center; gap:8px; background:var(--surface-2); border-radius:999px;
  padding:4px 6px 4px 12px; font-size:12.5px; color:var(--ink-2);
}
.abchip b{font-family:"IBM Plex Mono",monospace; color:var(--ink)}
.abchip .x{
  cursor:pointer; border:0; background:none; color:var(--ink-3); font-size:15px; line-height:1;
  padding:2px 5px; border-radius:50%;
}
.abchip .x:hover{color:var(--danger); background:var(--surface)}
.abnone{font-size:12.5px; color:var(--ink-3)}
.f-sub{grid-column:1/-1; border-top:1px solid var(--line); padding-top:13px; display:flex; flex-direction:column; gap:8px}
.f-sub .t{font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); font-weight:500}
.addab{display:grid; grid-template-columns:1fr 1fr auto; gap:8px; align-items:end}

@media (max-width:860px){
  .charts{grid-template-columns:1fr}
  .crow{grid-template-columns:86px minmax(0,1fr) 54px; gap:9px}
  .addab{grid-template-columns:1fr 1fr; }
  .addab .btn{grid-column:1/-1}
}

/* ---------- dinero ---------- */
.vsel{
  font:inherit; font-size:13px; background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:999px; padding:6px 12px; cursor:pointer; max-width:200px;
}
.vsel:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.m-mny b{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:13.5px}
.m-mny .sub2{font-size:10.5px; color:var(--ink-3); line-height:1.2}
.m-mny .sin{color:var(--ink-3); font-weight:400; font-size:12.5px; font-family:"IBM Plex Sans",sans-serif}
.m-mny.debe b{color:var(--p3)}
.m-mny.pagado b{color:var(--p2)}
.mnums{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.mnum{display:flex; flex-direction:column; gap:2px}
.mnum b{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:23px; font-weight:600; letter-spacing:-.02em}
.mnum b.ok{color:var(--p2)} .mnum b.debt{color:var(--p3)}
.mbar{display:flex; gap:2px; height:10px; border-radius:4px; overflow:hidden; background:var(--surface-2); margin-top:14px}
.mbar span{display:block; border-radius:2px}
.mbar .paid{background:var(--p2)} .mbar .owed{background:var(--p3)}
.mnote{display:flex; justify-content:space-between; gap:12px; font-size:12.5px; color:var(--ink-3); margin-top:7px; flex-wrap:wrap}
.mnote b{font-family:"IBM Plex Mono",monospace; color:var(--ink-2)}
td.owe{color:var(--p3); font-weight:600}
.hint.debt{color:var(--p3); font-weight:500}
.hint.ok{color:var(--p2); font-weight:500}
.hint.warn{color:var(--p4); font-weight:500}

/* ---------- pestañas ---------- */
.tabs{display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--line)}
.tab{
  cursor:pointer; font-size:14.5px; font-weight:600; padding:9px 15px 11px; border:0; background:none;
  color:var(--ink-3); border-bottom:2px solid transparent; margin-bottom:-1px;
  display:inline-flex; align-items:center; gap:8px; transition:color .12s, border-color .12s;
}
.tab:hover{color:var(--ink-2)}
.tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--accent)}
.tab .cnt{font-family:"IBM Plex Mono",monospace; font-size:11.5px; font-weight:500; color:var(--ink-3); background:var(--surface-2); border-radius:999px; padding:1px 8px}
.tab[aria-selected="true"] .cnt{background:var(--accent-soft); color:var(--ink-2)}
.tab:focus-visible{outline:2px solid var(--accent); outline-offset:-2px; border-radius:6px}

/* ---------- barra de orden ---------- */
.sortbar{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:11px 13px; margin-bottom:14px; box-shadow:var(--shadow);
}
.sortbar .lab{font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); font-weight:500; margin-right:2px}
.sort{
  cursor:pointer; font-size:12.5px; font-weight:500; background:var(--surface-3); color:var(--ink-2);
  border:1px solid var(--line); border-radius:999px; padding:5px 12px;
  display:inline-flex; align-items:center; gap:7px; transition:border-color .12s, color .12s, background .12s;
}
.sort:hover{border-color:var(--line-strong); color:var(--ink)}
.sort[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent); color:var(--ink)}
.sort .dir{font-size:11.5px; color:var(--ink-3); white-space:nowrap}
.sort[aria-pressed="true"] .dir{color:var(--ink-2)}
.sort:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ---------- listado plano ---------- */
.flat{display:flex; flex-direction:column; gap:6px}
.frow{
  display:grid; grid-template-columns:minmax(0,1fr) 112px 100px 80px 100px 74px 34px 34px; gap:12px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:10px 13px 10px 0; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.frow::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--pc)}
.tag{
  display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; border-radius:4px; padding:2px 6px;
  background:var(--pc); color:var(--pon); margin-left:9px; vertical-align:2px;
}
.undo{
  cursor:pointer; font-size:12.5px; font-weight:600; border-radius:8px; padding:6px 12px;
  border:1px solid var(--line); background:var(--surface-3); color:var(--ink-2); white-space:nowrap;
}
.undo:hover{border-color:var(--p5); color:var(--p5)}
.undo:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.drow{grid-template-columns:minmax(0,1fr) 112px 100px 80px 100px 132px}
.dhead{
  display:flex; gap:12px; align-items:flex-start; background:var(--surface); border:1px solid var(--line);
  border-left:4px solid var(--p2); border-radius:var(--r); padding:14px 16px; box-shadow:var(--shadow); margin-bottom:14px;
}
.dhead p{font-size:13.5px; color:var(--ink-2)}
.dhead .k{font-family:"IBM Plex Mono",monospace; font-size:24px; font-weight:600; color:var(--p2); line-height:1.1}

@media (max-width:940px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .frow{grid-template-columns:minmax(0,1fr) 96px 96px 64px 34px 34px; row-gap:10px; padding-bottom:12px}
  .frow .cli{grid-column:1/-1}
  .frow .m-area{margin-left:13px}
  .drow{grid-template-columns:minmax(0,1fr) 96px 96px 132px}
  .grid2{grid-template-columns:1fr}
  .order{grid-template-columns:minmax(0,1fr) 96px 96px 64px 34px 34px; row-gap:10px; padding-bottom:12px}
  .order .cli{grid-column:1/-1}
  .order .m-area{margin-left:13px}
}
@media (max-width:560px){
  .wrap{padding:20px 14px 56px; gap:26px}
  .kpis{grid-template-columns:1fr 1fr; gap:10px}
  .order,.frow{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 58px 34px}
  .mnums{grid-template-columns:1fr; gap:10px}
  .mnum b{font-size:20px}
  .order .m-sal,.frow .m-sal{grid-column:1/2; margin-left:13px}
  .order .edit,.frow .edit{grid-column:4/5}
  .drow{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 120px}
  .drow .m-area,.drow .m-vend{display:none}
  .dlg-body{grid-template-columns:1fr}
  .tab{padding:8px 11px 10px; font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ================= acceso e instalación ================= */
.gate{min-height:100vh; display:grid; place-items:center; padding:24px}
.gatebox{
  width:min(420px,100%); background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:26px; box-shadow:var(--shadow);
}
.gatebox .eyebrow{display:block; margin-bottom:6px}
.gatebox h1{font-size:26px; margin-bottom:6px}
.gatebox .lede{font-size:14px; margin-bottom:20px}
.gform{display:flex; flex-direction:column; gap:14px}
.gform .f input{font-size:16px}
.gform .btn{justify-content:center; padding:11px 16px; font-size:14.5px}
.gerr{
  color:var(--danger); font-size:13.5px; min-height:1px;
  background:color-mix(in srgb, var(--danger) 9%, transparent); border-radius:8px; padding:9px 12px;
}
.gerr:empty{display:none; padding:0}
.gok{color:var(--p2); font-size:13.5px}

/* ================= barra de usuario ================= */
.userbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.whoami{
  display:inline-flex; align-items:center; gap:9px; font-size:12.5px; color:var(--ink-2);
  border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:5px 6px 5px 13px;
}
.whoami b{font-weight:600; color:var(--ink)}
.rolechip{
  font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; border-radius:999px; padding:3px 9px;
  background:var(--accent-soft); color:var(--accent);
}
.rolechip.prod{background:var(--surface-2); color:var(--ink-2)}
.live{display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-3)}
.live .led{width:7px; height:7px; border-radius:50%; background:var(--p2); flex:0 0 auto}
.live.off .led{background:var(--ink-3)}
.live.off{color:var(--ink-3)}

/* ================= usuarios ================= */
.utable td.r{white-space:nowrap}
.upill{
  font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; border-radius:4px; padding:2px 7px; background:var(--surface-2); color:var(--ink-2);
}
.upill.admin{background:var(--accent-soft); color:var(--accent)}
.upill.off{background:color-mix(in srgb, var(--danger) 12%, transparent); color:var(--danger)}
.uacts{display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap}
.uacts .undo{padding:5px 10px; font-size:12px}

/* ---------- importar desde la hoja ---------- */
#dlgimp{width:min(620px,calc(100vw - 28px))}
.impfuente{display:flex; flex-wrap:wrap; gap:8px; padding-bottom:14px; margin-bottom:14px;
  border-bottom:1px solid var(--line)}
.imppest{display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-bottom:14px;
  background:var(--surface-3); border:1px solid var(--line); border-radius:9px; padding:10px 12px}
.imppest label{font-size:12.5px; color:var(--ink-3); margin:0}
.imppest select{flex:1 1 200px; min-width:0; font:inherit; font-size:14px; background:var(--surface-2);
  color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:7px 9px}
.impsum{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:4px}
.impbox{background:var(--surface-3); border:1px solid var(--line); border-radius:9px; padding:12px 13px}
.impbox b{display:block; font-family:"IBM Plex Mono",monospace; font-size:25px; font-weight:600; line-height:1.1}
.impbox span{font-size:11.5px; color:var(--ink-3); letter-spacing:.04em; text-transform:uppercase}
.impbox.nuevo b{color:var(--p2)} .impbox.cambio b{color:var(--p5)} .impbox.falta b{color:var(--p4)}
.implist{max-height:230px; overflow-y:auto; border:1px solid var(--line); border-radius:9px; margin-top:6px}
.implist ul{list-style:none; margin:0; padding:0}
.implist li{padding:9px 13px; border-bottom:1px solid var(--line); font-size:13px; color:var(--ink-2)}
.implist li:last-child{border-bottom:0}
.implist b{color:var(--ink)}
.implist .que{font-size:11.5px; color:var(--ink-3); display:block; margin-top:2px}
.impnota{
  font-size:12.5px; color:var(--ink-2); background:var(--accent-soft);
  border-radius:9px; padding:11px 13px; line-height:1.45;
}
.impvacio{padding:22px; text-align:center; color:var(--ink-3); font-size:13.5px}