:root {
  /* Fondos */
  --bg:#f8f4ed; --bg2:#ffffff; --bg3:#f2ece0; --bg4:#e8e0d2;
  /* Bordes */
  --border:#e2d8c8; --border2:#cbbfac;
  /* Texto */
  --text:#1b1208; --text2:#6a5540; --text3:#a08a6e;
  /* Acento terracota */
  --accent:#b05430; --accent2:#923f22;
  /* Semánticos */
  --green:#2e6b4a; --amber:#a87820; --red:#b53838; --purple:#6843a8;
  /* Tipografía */
  --serif:'Fraunces',Georgia,serif;
  --sans:'Plus Jakarta Sans',system-ui,sans-serif;
  --mono:'DM Mono','Courier New',monospace;
  --r:8px;
  --sh:0 1px 3px rgba(80,55,30,.07),0 2px 8px rgba(80,55,30,.05);
  --sh-md:0 4px 16px rgba(80,55,30,.1),0 1px 4px rgba(80,55,30,.07);
  --sh-lg:0 8px 32px rgba(80,55,30,.14),0 2px 8px rgba(80,55,30,.08);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);background:var(--bg);color:var(--text);min-height:100vh;font-size:13px;line-height:1.5;overflow:hidden}

/* ── SHELL ── */
.shell{display:flex;height:100vh}

/* ── SIDEBAR ── */
.sidebar{width:200px;flex-shrink:0;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column}
.logo{padding:18px 18px 14px;border-bottom:1px solid var(--border)}
.logo-mark{font-family:var(--mono);font-size:10px;color:var(--accent);letter-spacing:.14em;text-transform:uppercase}
.logo-name{font-size:14px;font-weight:600;letter-spacing:-.02em;margin-top:3px}
.logo-sub{font-size:11px;color:var(--text3);margin-top:1px}
.nav{flex:1;padding:10px 0;overflow-y:auto}
.nav-lbl{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--text3);padding:10px 16px 5px}
.nav-item{display:flex;align-items:center;gap:9px;padding:8px 16px;cursor:pointer;color:var(--text2);font-size:12px;transition:all .15s;border-left:2px solid transparent;user-select:none}
.nav-item:hover{background:var(--bg3);color:var(--text)}
.nav-item.active{background:rgba(176,84,48,.1);color:var(--accent);border-left-color:var(--accent);font-weight:500}
.nav-icon{font-size:13px;width:16px;text-align:center;flex-shrink:0}
.nav-badge{margin-left:auto;background:var(--red);color:#fff;font-size:9px;font-family:var(--mono);padding:1px 5px;border-radius:8px}
.sidebar-foot{padding:14px 16px;border-top:1px solid var(--border);font-size:10px;color:var(--text3)}
.dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--green);margin-right:5px}

/* ── MAIN ── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.topbar{height:48px;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 20px;gap:14px;background:var(--bg2);flex-shrink:0}
.topbar-title{font-size:13px;font-weight:600;letter-spacing:-.01em}
.topbar-crumb{font-family:var(--mono);font-size:9px;color:var(--text3);letter-spacing:.06em}
.topbar-actions{margin-left:auto;display:flex;gap:7px;align-items:center}

/* ── VIEWS ── */
.view{display:none;flex:1;overflow:hidden;flex-direction:column}
.view.active{display:flex}
.view-body{flex:1;overflow-y:auto;padding:20px}

/* ── SPLIT LAYOUT (facturas) ── */
.split{display:flex;flex:1;overflow:hidden;gap:0}
.split-list{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--border)}
.split-panel{width:420px;flex-shrink:0;display:flex;flex-direction:column;overflow:hidden;background:var(--bg2)}

/* ── FILTER BAR ── */
.filters{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap;flex-shrink:0;background:var(--bg2)}
.sw{position:relative}
.sw .inp{padding-left:28px;min-width:200px}
.si{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:12px;pointer-events:none}

/* ── TABLE ── */
.tbl-wrap{flex:1;overflow-y:auto}
.tbl{width:100%;border-collapse:collapse;font-size:11.5px}
.tbl th{text-align:left;padding:9px 12px;font-size:9px;font-family:var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--text3);border-bottom:1px solid var(--border);white-space:nowrap;background:var(--bg2);position:sticky;top:0;z-index:1}
.tbl td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.tbl tr:last-child td{border-bottom:none}
.tbl tr{cursor:pointer;transition:background .1s}
.tbl tr:hover td{background:rgba(176,84,48,.04)}
.tbl tr.selected td{background:rgba(176,84,48,.08)!important;border-left:2px solid var(--accent)}
.tbl tr.selected td:first-child{padding-left:10px}

/* ── DETAIL PANEL ── */
.panel-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;color:var(--text3);gap:8px}
.panel-empty .ei{font-size:32px;opacity:.3}
.panel-empty p{font-size:12px}

.panel-scroll{flex:1;overflow-y:auto;padding:16px}
.panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:8px;flex-wrap:wrap}
.panel-id{font-family:var(--mono);font-size:11px;color:var(--text3);background:var(--bg3);padding:2px 8px;border-radius:4px}
.panel-status{}

.pfield{display:flex;align-items:baseline;gap:0;margin-bottom:5px;font-size:12px}
.pfield-label{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);width:106px;flex-shrink:0;padding-top:1px}
.pfield-value{color:var(--text);flex:1;min-width:0;word-break:break-word}
.pfield-value.mono{font-family:var(--mono);font-size:11px}
.pfield-value.big{font-size:16px;font-weight:600;font-family:var(--mono);color:var(--amber)}
.pfield-value.green{color:var(--green)}
.pfield-value.red{color:var(--red)}

.psection{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.psection-title{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}

/* ── IMAGE PANELS ── */
.img-panels{display:flex;gap:8px;margin-top:4px}
.img-box{flex:1;min-width:0;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.img-box-header{padding:7px 10px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.img-box-title{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--text3)}
.img-box-body{flex:1;min-height:140px;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;overflow:hidden}
.img-box-body img{width:100%;height:100%;object-fit:cover;transition:transform .2s}
.img-box-body:hover img{transform:scale(1.04)}
.img-box-body .no-img{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text3);font-size:10px;font-family:var(--mono)}
.img-box-body .no-img span{font-size:22px;opacity:.4}
.img-box-footer{padding:6px 10px;border-top:1px solid var(--border);display:flex;align-items:center;gap:6px;flex-shrink:0}
.img-filename{font-family:var(--mono);font-size:9px;color:var(--text3);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* multiple comprobantes strip */
.comp-strip{display:flex;gap:6px;overflow-x:auto;padding:8px 10px;border-top:1px solid var(--border)}
.comp-thumb{width:52px;height:52px;flex-shrink:0;border:1px solid var(--border2);border-radius:4px;overflow:hidden;cursor:pointer;position:relative;background:var(--bg)}
.comp-thumb img{width:100%;height:100%;object-fit:cover}
.comp-thumb.active{border-color:var(--accent)}
.comp-thumb .cdel{position:absolute;top:1px;right:1px;background:rgba(224,85,85,.85);border:none;color:#fff;width:14px;height:14px;border-radius:2px;font-size:9px;cursor:pointer;display:none;align-items:center;justify-content:center;line-height:1}
.comp-thumb:hover .cdel{display:flex}
.comp-pdf{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:16px}

/* upload buttons */
.upload-btn{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:4px;border:1px dashed var(--border2);background:transparent;color:var(--text3);cursor:pointer;font-size:10px;font-family:var(--mono);transition:all .15s}
.upload-btn:hover{border-color:var(--accent);color:var(--accent);background:rgba(176,84,48,.06)}

/* ── PANEL ACTIONS BAR ── */
.panel-actions{padding:10px 16px;border-top:1px solid var(--border);display:flex;gap:8px;flex-shrink:0;background:var(--bg2)}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:5px;padding:6px 13px;border-radius:var(--r);border:none;cursor:pointer;font-family:var(--sans);font-size:12px;font-weight:500;transition:all .15s;white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent2)}
.btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--border2)}.btn-ghost:hover{background:var(--bg3);color:var(--text)}
.btn-danger{background:rgba(224,85,85,.12);color:var(--red);border:1px solid rgba(224,85,85,.25)}.btn-danger:hover{background:rgba(224,85,85,.22)}
.btn-green{background:rgba(46,204,138,.12);color:var(--green);border:1px solid rgba(46,204,138,.25)}.btn-green:hover{background:rgba(46,204,138,.22)}
.btn-sm{padding:4px 9px;font-size:11px}

/* ── BADGES ── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:4px;font-size:10px;font-family:var(--mono);font-weight:500;letter-spacing:.03em;white-space:nowrap}
.badge::before{content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0}
.bp{background:rgba(240,168,48,.12);color:var(--amber);border:1px solid rgba(240,168,48,.25)}.bp::before{background:var(--amber)}
.bpg{background:rgba(46,204,138,.12);color:var(--green);border:1px solid rgba(46,204,138,.25)}.bpg::before{background:var(--green)}
.bpar{background:rgba(139,104,232,.12);color:var(--purple);border:1px solid rgba(139,104,232,.25)}.bpar::before{background:var(--purple)}
.bc{background:rgba(138,149,176,.1);color:var(--text3);border:1px solid var(--border)}.bc::before{background:var(--text3)}
.bv{background:rgba(224,85,85,.12);color:var(--red);border:1px solid rgba(224,85,85,.25)}.bv::before{background:var(--red)}

/* ── STATS ── */
.stats-row{display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--bg2)}
.stat{flex:1;text-align:center}
.stat-lbl{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-bottom:3px}
.stat-val{font-family:var(--mono);font-size:14px;font-weight:600}
.stat-val.amber{color:var(--amber)} .stat-val.red{color:var(--red)} .stat-val.green{color:var(--green)}

/* ── PAGINATION ── */
.pag{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;border-top:1px solid var(--border);font-size:10px;color:var(--text3);flex-shrink:0;background:var(--bg2)}
.pag-btns{display:flex;gap:3px}
.pb{padding:3px 8px;border-radius:4px;border:1px solid var(--border);background:transparent;color:var(--text2);cursor:pointer;font-size:10px;font-family:var(--mono);transition:all .1s}
.pb:hover,.pb.active{background:var(--accent);color:#fff;border-color:var(--accent)}.pb:disabled{opacity:.3;cursor:not-allowed}

/* ── FORMS ── */
.inp,.sel,.ta{width:100%;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);color:var(--text);font-family:var(--sans);font-size:12px;padding:7px 10px;transition:border-color .15s;outline:none}
.inp:focus,.sel:focus,.ta:focus{border-color:var(--accent);background:rgba(176,84,48,.05)}
/* ── FOCO VISIBLE (accesibilidad teclado) ── */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.inp:focus-visible,.sel:focus-visible,.ta:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.btn:focus-visible,.fchip:focus-visible,.nav-item:focus-visible,.pb:focus-visible,.tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sel{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a08a6e' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;padding-right:26px}
.sel option{background:var(--bg3)}.ta{min-height:70px;resize:vertical}.inp::placeholder,.ta::placeholder{color:var(--text3)}
.fg{margin-bottom:12px}
.fl{display:block;font-size:10px;font-family:var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--text2);margin-bottom:4px}
.fl .req{color:var(--red);margin-left:2px}
.fgrid{display:grid;gap:12px}.fg2{grid-template-columns:1fr 1fr}.fg3{grid-template-columns:1fr 1fr 1fr}
.fsec{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:14px;margin-bottom:14px}
.fsec-title{font-size:9px;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;padding-bottom:7px;border-bottom:1px solid var(--border)}

/* ── MODAL ── */
.overlay{display:none;position:fixed;inset:0;background:rgba(30,18,8,.55);z-index:100;align-items:flex-start;justify-content:center;padding:36px 20px;overflow-y:auto;backdrop-filter:blur(3px)}
.overlay.open{display:flex}
.modal{background:var(--bg2);border:1px solid var(--border2);border-radius:8px;width:100%;max-width:720px;box-shadow:0 8px 40px rgba(80,55,30,.22);animation:min .2s ease}
@keyframes min{from{transform:translateY(-18px);opacity:0}to{transform:translateY(0);opacity:1}}
.mhd{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.mhd-title{font-size:14px;font-weight:600}
.mhd-id{font-family:var(--mono);font-size:11px;color:var(--text3);background:var(--bg3);padding:2px 7px;border-radius:4px}
.mclose{margin-left:auto;background:none;border:none;color:var(--text3);font-size:17px;cursor:pointer;padding:3px 7px;border-radius:4px}.mclose:hover{background:var(--bg3);color:var(--text)}
.mbody{padding:20px}
.mfooter{padding:14px 20px;border-top:1px solid var(--border);display:flex;gap:7px;justify-content:flex-end}

/* ── PENDIENTES SPLIT ── */
.pend-layout{display:flex;gap:0;flex:1;overflow:hidden}
.ag-sidebar{width:240px;flex-shrink:0;border-right:1px solid var(--border);overflow-y:auto;padding:12px}
.ag-card{border:1px solid var(--border);border-left:3px solid transparent;border-radius:var(--r);padding:11px 13px;cursor:pointer;transition:all .15s;margin-bottom:6px}
.ag-card:hover{border-left-color:var(--border2);background:var(--bg3)}
.ag-card.active{border-left-color:var(--accent);background:rgba(176,84,48,.07)}
.ag-name{font-size:11px;font-weight:500;margin-bottom:5px}
.ag-total{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--amber)}
.ag-n{font-size:10px;color:var(--text3);margin-top:1px}

/* ── CALENDAR ── */
.cal-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--bg2)}
.cal-title{font-size:16px;font-weight:600;letter-spacing:-.02em}
.cal-yr{color:var(--text3);font-weight:300}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:12px 16px;flex:1;overflow-y:auto;align-content:start}
.cal-dh{padding:6px 4px;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text3)}
.cal-day{min-height:94px;background:var(--bg2);border:1px solid var(--border);border-radius:4px;padding:5px;transition:border-color .1s}
.cal-day:hover{border-color:var(--border2)}.cal-day.other{opacity:.25}.cal-day.today{border-color:var(--accent);background:rgba(176,84,48,.05)}
.cal-dn{font-family:var(--mono);font-size:11px;color:var(--text3);margin-bottom:3px;font-weight:500}
.cal-day.today .cal-dn{color:var(--accent);font-weight:600}
.chip{display:block;padding:2px 5px;border-radius:3px;font-size:10px;font-family:var(--mono);margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;transition:opacity .1s}.chip:hover{opacity:.75}
.cpend{background:rgba(240,168,48,.2);color:var(--amber)}.cpag{background:rgba(46,204,138,.15);color:var(--green)}.cpar{background:rgba(139,104,232,.15);color:var(--purple)}.cvenc{background:rgba(224,85,85,.2);color:var(--red)}
.cmore{font-size:10px;color:var(--text3);padding:1px 3px}

/* ── MISC ── */
.loading{display:flex;align-items:center;justify-content:center;padding:48px;color:var(--text3);gap:9px}
.spin{width:16px;height:16px;border:2px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.empty{text-align:center;padding:48px 20px;color:var(--text3)}
.empty .ei{font-size:30px;margin-bottom:10px;opacity:.4}
.empty p{font-size:12px;color:var(--text2)}
::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
.text-muted{color:var(--text3)}.text-right{text-align:right}.text-green{color:var(--green)}.text-amber{color:var(--amber)}.text-red{color:var(--red)}
.mono{font-family:var(--mono);font-size:11px}

/* ── LIGHTBOX ── */
.lb{display:none;position:fixed;inset:0;background:rgba(0,0,0,.93);z-index:500;align-items:center;justify-content:center;flex-direction:column;gap:12px}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:82vh;object-fit:contain;border-radius:4px;transition:transform .1s;cursor:grab;user-select:none}
.lb img.dragging{cursor:grabbing;transition:none}
.lb-zoom-ctrls{display:flex;gap:6px;align-items:center}
.lb-zoom-ctrls button{background:rgba(255,255,255,.12);border:none;color:#fff;padding:5px 11px;border-radius:14px;cursor:pointer;font-size:13px;line-height:1}.lb-zoom-ctrls button:hover{background:rgba(255,255,255,.22)}
.lb-zoom-pct{color:rgba(255,255,255,.55);font-size:11px;font-family:var(--mono);min-width:36px;text-align:center}
.lb iframe{width:92vw;height:82vh;border:none;border-radius:4px;background:#fff}
.lb-x{position:fixed;top:16px;right:20px;background:rgba(255,255,255,.1);border:none;color:#fff;font-size:20px;cursor:pointer;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center}.lb-x:hover{background:rgba(255,255,255,.2)}
.lb-nav{display:flex;gap:10px;align-items:center}
.lb-nav button{background:rgba(255,255,255,.12);border:none;color:#fff;padding:7px 16px;border-radius:18px;cursor:pointer;font-size:11px}.lb-nav button:hover{background:rgba(255,255,255,.22)}
.lb-ctr{color:rgba(255,255,255,.55);font-size:11px;font-family:var(--mono)}

/* toast */
.toasts{position:fixed;bottom:20px;right:20px;z-index:300;display:flex;flex-direction:column;gap:7px}
.toast{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r);padding:10px 14px;font-size:12px;color:var(--text);box-shadow:0 4px 20px rgba(80,55,30,.18);animation:tin .2s ease;display:flex;align-items:center;gap:9px;min-width:220px}
@keyframes tin{from{transform:translateX(16px);opacity:0}to{transform:translateX(0);opacity:1}}
.toast.success{border-left:3px solid var(--green)}.toast.error{border-left:3px solid var(--red)}.toast.info{border-left:3px solid var(--accent)}
.toast span{flex:1}
.toast-action{margin-left:6px;background:var(--accent);color:#fff;border:none;border-radius:5px;padding:4px 11px;font-family:var(--sans);font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .12s}
.toast-action:hover{background:var(--accent2)}

/* folder modal */
.folder-banner{background:rgba(176,84,48,.08);border:1px solid rgba(176,84,48,.2);border-radius:var(--r);padding:8px 12px;display:flex;align-items:center;gap:9px;font-size:11px;margin-bottom:12px}
.folder-banner .fp{font-family:var(--mono);font-size:9px;color:var(--text2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(max-width:900px){
  .sidebar{width:52px}.logo-name,.logo-sub,.logo-mark,.nav-item span,.nav-lbl,.sidebar-foot{display:none}.nav-item{justify-content:center;padding:10px}
  .split-panel{width:340px}.img-panels{flex-direction:column}
}
/* ── DASHBOARD ── */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.kpi-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px}
.kpi-label{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);margin-bottom:6px}
.kpi-value{font-family:var(--mono);font-size:20px;font-weight:600;color:var(--text)}
.kpi-sub{font-size:10px;color:var(--text3);margin-top:3px}
.kpi-card.kpi-red .kpi-value{color:var(--red)}
.kpi-card.kpi-amber .kpi-value{color:var(--amber)}
.kpi-card.kpi-green .kpi-value{color:var(--green)}
.dash-grid{display:grid;grid-template-columns:1fr 300px;gap:16px}
.dash-section{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.dash-section-title{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);padding:10px 14px;border-bottom:1px solid var(--border)}
/* ── SKELETON ── */
@keyframes shimmer{0%{background-position:-600px 0}100%{background-position:600px 0}}
.skel{border-radius:4px;background:linear-gradient(90deg,var(--bg3) 25%,var(--bg4) 50%,var(--bg3) 75%);background-size:1200px 100%;animation:shimmer 1.6s infinite}
.skel-row{height:12px;margin-bottom:8px}.skel-row.w80{width:80%}.skel-row.w60{width:60%}
/* ── FILTER CHIPS ── */
.fchips{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.fchip{display:inline-flex;align-items:center;padding:3px 10px;border-radius:10px;font-size:10px;font-family:var(--mono);cursor:pointer;border:1px solid var(--border2);color:var(--text2);background:var(--bg2);transition:all .15s;white-space:nowrap;user-select:none}
.fchip:hover{border-color:var(--accent);color:var(--accent)}
.fchip.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.fchip-sep{width:1px;height:16px;background:var(--border);margin:0 3px;flex-shrink:0}
/* ── PROYECCIÓN ── */
.proy-row{display:flex;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid var(--border);font-size:11px}
.proy-row:last-child{border-bottom:none}
.proy-label{font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--text3);width:80px;flex-shrink:0}
.proy-bar-wrap{flex:1;background:var(--bg3);border-radius:3px;height:8px;overflow:hidden}
.proy-bar{height:100%;background:var(--accent);border-radius:3px;transition:width .4s ease}
.proy-total{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--text);width:100px;text-align:right;flex-shrink:0}
.proy-n{font-family:var(--mono);font-size:9px;color:var(--text3);width:50px;text-align:right;flex-shrink:0}
.proy-items{margin-left:90px;font-size:10px;color:var(--text3);padding-bottom:4px;line-height:1.7}
/* ── PROVEEDORES LAYOUT ── */
.prov-layout{display:flex;gap:0;flex:1;overflow:hidden}
.prov-list-side{width:280px;flex-shrink:0;border-right:1px solid var(--border);overflow-y:auto}
.prov-list-item{padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .1s}
.prov-list-item:hover{background:var(--bg3)}
.prov-list-item.active{background:rgba(176,84,48,.07);border-left:3px solid var(--accent)}
.prov-name{font-size:12px;font-weight:500}
.prov-rut{font-family:var(--mono);font-size:9px;color:var(--text3);margin-top:1px}
.prov-stats-panel{flex:1;overflow-y:auto;padding:18px}
.prov-stats-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text3);font-size:12px}
.prov-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.prov-stat-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px}
.prov-stat-lbl{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-bottom:4px}
.prov-stat-val{font-family:var(--mono);font-size:16px;font-weight:600;color:var(--text)}
/* ── COSTOS DASHBOARD ── */
.costos-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.costos-charts{display:grid;grid-template-columns:1fr 280px;gap:14px;margin-bottom:14px}
.chart-box{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.chart-box-title{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);padding:9px 12px;border-bottom:1px solid var(--border)}
.chart-box-body{padding:12px}
.donut-legend{margin-top:8px;display:flex;flex-direction:column;gap:3px}
.donut-item{display:flex;align-items:center;gap:6px;font-size:10px;cursor:pointer;padding:2px 4px;border-radius:4px;transition:background .1s}
.donut-item:hover{background:var(--bg3)}
.donut-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0}
.donut-name{flex:1;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:9px}
.donut-val{color:var(--text3);font-family:var(--mono);font-size:9px}
/* ── ROW ALERT COLORS ── */
.row-venc td{background:rgba(224,85,85,.07)!important}
.row-prox td{background:rgba(240,168,48,.055)!important}
/* ── TABS ── */
.tab-bar{display:flex;border-bottom:1px solid var(--border);background:var(--bg2);flex-shrink:0;align-items:center}
.tab{padding:10px 18px;cursor:pointer;font-size:12px;color:var(--text2);border-bottom:2px solid transparent;transition:all .15s;white-space:nowrap}
.tab:hover{color:var(--text)}
.tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:500}
.tab-filters{margin-left:auto;display:flex;align-items:center;gap:7px;padding:0 10px}
/* Calendar factura popup */
.cal-modal-overlay{position:fixed;inset:0;background:rgba(27,18,8,.45);z-index:500;display:flex;align-items:center;justify-content:center}
.cal-modal{background:var(--bg2);border:1px solid var(--border);border-radius:10px;width:440px;max-width:94vw;box-shadow:0 20px 60px rgba(27,18,8,.25);overflow:hidden}
.cal-modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border)}
.cal-modal-title{font-size:14px;font-weight:600}
.cal-modal-body{padding:18px}
.cal-modal-row{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--border)}
.cal-modal-row:last-child{border:none}
.cal-modal-lbl{font-family:var(--mono);font-size:10px;color:var(--text3);letter-spacing:.04em;text-transform:uppercase}
.cal-modal-val{font-size:13px;font-weight:500}
.cal-modal-footer{padding:12px 18px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end}

/* ── VIEW TRANSITIONS ── */
.view-enter-active{transition:opacity .2s ease,transform .22s ease}
.view-leave-active{transition:opacity .14s ease,transform .14s ease}
.view-enter-from{opacity:0;transform:translateY(7px)}
.view-leave-to{opacity:0;transform:translateY(-5px)}

/* ── KPI CARD HOVER ── */
.kpi-card{transition:transform .18s ease,box-shadow .18s ease}
.kpi-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}

/* ── BUTTON PRESS ── */
.btn:active{transform:scale(0.96);transition:transform .07s ease}

/* ── BETTER MODAL ANIMATION ── */
@keyframes modalIn{from{transform:translateY(12px) scale(.985);opacity:0}to{transform:none;opacity:1}}
.overlay.open .modal{animation:modalIn .24s cubic-bezier(.34,1.1,.64,1)}

/* ── TOAST EXIT ── */
@keyframes tout{from{transform:translateX(0);opacity:1}to{transform:translateX(14px);opacity:0}}
.toast.removing{animation:tout .18s ease forwards;pointer-events:none}

/* ── SKELETON ROWS (facturas table) ── */
.skel-tbl{width:100%;padding:4px 0}
.skel-tbl-row{display:flex;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border);align-items:center}
.skel-cell{border-radius:3px;background:linear-gradient(90deg,var(--bg3) 25%,var(--bg4) 50%,var(--bg3) 75%);background-size:1200px 100%;animation:shimmer 1.6s infinite;height:10px;flex-shrink:0}

/* ── STAT VALUE SKELETON ── */
.stat-skel{display:inline-block;width:52px;height:13px;border-radius:3px;background:linear-gradient(90deg,var(--bg3) 25%,var(--bg4) 50%,var(--bg3) 75%);background-size:1200px 100%;animation:shimmer 1.6s infinite;vertical-align:middle}

/* ── FA-3: Conciliación Bancaria ─────────────────────────────────────────── */
.conc-wrap { display:flex; flex-direction:column; height:100%; overflow:hidden; }

/* Upload state */
.conc-upload-area { display:flex; align-items:center; justify-content:center; flex:1; padding:var(--sp4); }
.conc-hero { text-align:center; max-width:560px; width:100%; }
.conc-hero-icon { font-size:3rem; margin-bottom:var(--sp2); }
.conc-hero-title { font-size:1.4rem; font-weight:700; color:var(--fg1); margin:0 0 var(--sp1); }
.conc-hero-sub { color:var(--fg3); font-size:.85rem; line-height:1.6; margin:0 0 var(--sp4); }

.conc-dropzone {
  border:2px dashed var(--border);
  border-radius:var(--r2);
  padding:var(--sp5) var(--sp4);
  cursor:pointer;
  transition:border-color .15s, background .15s;
  background:var(--bg2);
  margin-bottom:var(--sp3);
}
.conc-dropzone:hover, .conc-dropzone.drag-over {
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 6%, var(--bg2));
}
.conc-dropzone.has-file { border-color:var(--green); border-style:solid; }
.conc-dz-inner { display:flex; flex-direction:column; align-items:center; gap:var(--sp1); }
.conc-dz-icon { font-size:2rem; }
.conc-dz-label { font-weight:600; color:var(--fg1); font-size:.9rem; }
.conc-dz-hint { color:var(--fg3); font-size:.78rem; }

.conc-actions { display:flex; gap:var(--sp2); justify-content:center; margin-bottom:var(--sp2); }
.conc-error-banner { color:var(--red); font-size:.82rem; margin-top:var(--sp1); }

/* Result state */
.conc-result { display:flex; flex-direction:column; height:100%; overflow:hidden; }
.conc-result-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp2) var(--sp3);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.conc-result-title { font-weight:700; font-size:.95rem; color:var(--fg1); }
.conc-result-sub { font-size:.78rem; color:var(--fg3); margin-top:2px; }

/* KPI strip */
.conc-kpi-strip {
  display:flex; gap:var(--sp2); padding:var(--sp3);
  flex-shrink:0; flex-wrap:wrap;
}
.conc-kpi {
  flex:1; min-width:110px;
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--r2);
  padding:var(--sp2) var(--sp3); text-align:center;
  border-top:3px solid transparent;
}
.conc-kpi.green  { border-top-color:var(--green); }
.conc-kpi.amber  { border-top-color:var(--amber); }
.conc-kpi.red    { border-top-color:var(--red); }
.conc-kpi.blue   { border-top-color:var(--accent); }
.conc-kpi.neutral{ border-top-color:var(--border); }
.conc-kpi-val { font-size:1.4rem; font-weight:800; color:var(--fg1); font-variant-numeric:tabular-nums; }
.conc-kpi-lbl { font-size:.7rem; color:var(--fg3); margin-top:2px; text-transform:uppercase; letter-spacing:.04em; }

/* Progress bar */
.conc-progress-wrap { padding:0 var(--sp3) var(--sp2); flex-shrink:0; }
.conc-progress-bar {
  height:6px; border-radius:3px; background:var(--bg3); overflow:hidden; margin-bottom:4px;
}
.conc-progress-fill {
  height:100%; border-radius:3px;
  background:linear-gradient(90deg, var(--green), color-mix(in srgb, var(--green) 60%, var(--accent)));
  transition:width .6s ease;
}
.conc-progress-lbl { font-size:.75rem; color:var(--fg3); }

/* Tabs */
.conc-tabs {
  display:flex; gap:2px; padding:0 var(--sp3);
  border-bottom:1px solid var(--border); flex-shrink:0;
}
.conc-tab {
  padding:var(--sp2) var(--sp3); font-size:.8rem; font-weight:500;
  border:none; background:none; cursor:pointer; color:var(--fg3);
  border-bottom:2px solid transparent; margin-bottom:-1px;
  display:flex; align-items:center; gap:var(--sp1); transition:color .12s;
}
.conc-tab:hover { color:var(--fg1); }
.conc-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.conc-tab-badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; border-radius:9px;
  font-size:.7rem; font-weight:700; padding:0 5px;
}
.conc-tab-badge.green  { background:color-mix(in srgb,var(--green)  15%,transparent); color:var(--green); }
.conc-tab-badge.amber  { background:color-mix(in srgb,var(--amber)  15%,transparent); color:var(--amber); }
.conc-tab-badge.red    { background:color-mix(in srgb,var(--red)    15%,transparent); color:var(--red); }
.conc-tab-badge.blue   { background:color-mix(in srgb,var(--accent) 15%,transparent); color:var(--accent); }

/* Section scroll */
.conc-section { flex:1; overflow-y:auto; padding:var(--sp3); }
.conc-empty { text-align:center; padding:var(--sp6) var(--sp3); color:var(--fg3); font-size:.9rem; }

/* Alert banners */
.conc-alert {
  border-radius:var(--r1); padding:var(--sp2) var(--sp3);
  font-size:.82rem; margin-bottom:var(--sp3); line-height:1.5;
}
.conc-alert.amber { background:color-mix(in srgb,var(--amber) 10%,var(--bg2)); border:1px solid color-mix(in srgb,var(--amber) 30%,transparent); color:var(--fg2); }
.conc-alert.red   { background:color-mix(in srgb,var(--red)   10%,var(--bg2)); border:1px solid color-mix(in srgb,var(--red)   30%,transparent); color:var(--fg2); }
.conc-alert.blue  { background:color-mix(in srgb,var(--accent)10%,var(--bg2)); border:1px solid color-mix(in srgb,var(--accent)30%,transparent); color:var(--fg2); }

/* Table */
.conc-tbl { width:100%; border-collapse:collapse; font-size:.82rem; }
.conc-tbl th {
  text-align:left; font-size:.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--fg3);
  padding:var(--sp1) var(--sp2); border-bottom:1px solid var(--border);
  position:sticky; top:0; background:var(--bg1); z-index:1;
}
.conc-tbl th.right, .conc-tbl td.right { text-align:right; }
.conc-tbl td { padding:var(--sp1) var(--sp2); border-bottom:1px solid var(--border); color:var(--fg2); vertical-align:middle; }
.conc-tbl tfoot td { padding:var(--sp2); border-top:2px solid var(--border); border-bottom:none; color:var(--fg1); background:var(--bg2); }
.conc-tbl tbody tr:hover { background:var(--bg2); }
.conc-row-matched { }
.conc-desc { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conc-link { color:var(--accent); cursor:pointer; text-decoration:underline; text-decoration-style:dotted; }
.conc-link:hover { text-decoration-style:solid; }

/* Confidence badge */
.conc-badge {
  display:inline-flex; align-items:center; gap:3px;
  padding:2px 8px; border-radius:10px; font-size:.72rem; font-weight:600;
}
.conc-badge.green { background:color-mix(in srgb,var(--green) 15%,transparent); color:var(--green); }
.conc-badge.amber { background:color-mix(in srgb,var(--amber) 15%,transparent); color:var(--amber); }
.conc-badge-sub { font-weight:400; opacity:.8; }

/* Utility */
.mono { font-variant-numeric:tabular-nums; font-family:var(--mono,monospace); }
.text-green { color:var(--green); }
.text-amber { color:var(--amber); }

/* ── Costos: filtros compactos ───────────────────────────────────────────── */
.cos-filters {
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  padding:7px 14px;
  border-bottom:1px solid var(--border);
  background:var(--bg2);
  flex-shrink:0;
}
.cos-sel  { height:28px; font-size:11px; min-width:130px; flex:1; max-width:170px; padding:0 6px; }
.cos-date { height:28px; font-size:11px; width:116px; padding:0 6px; }
.cos-sep  { width:1px; height:18px; background:var(--border); flex-shrink:0; }
.cos-count { font-family:var(--mono); font-size:10px; color:var(--fg3); white-space:nowrap; }

.cos-toggle {
  display:flex; border:1px solid var(--border); border-radius:5px; overflow:hidden; flex-shrink:0;
}
.cos-toggle button {
  padding:4px 10px; font-size:11px; font-weight:500; border:none; cursor:pointer;
  background:transparent; color:var(--fg2); transition:background .12s, color .12s;
}
.cos-toggle button + button { border-left:1px solid var(--border); }
.cos-toggle button.active { background:var(--accent); color:#fff; }

/* Costos: KPI row */
.cos-kpi-row {
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  padding:10px 14px; flex-shrink:0;
}
.cos-kpi-row .kpi-card { padding:10px 14px; }
.cos-kpi-row .kpi-value { font-size:16px; }

/* Costos: tab bar */
.cos-tab-bar {
  display:flex; gap:0; border-bottom:1px solid var(--border);
  padding:0 14px; flex-shrink:0;
}
.cos-tab {
  padding:7px 16px; font-size:12px; font-weight:500;
  border:none; background:none; cursor:pointer; color:var(--fg3);
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .12s;
}
.cos-tab:hover { color:var(--fg1); }
.cos-tab.active { color:var(--accent); border-bottom-color:var(--accent); }

/* Costos: table helpers */
.cos-filters .btn-sm { height:28px; padding:0 10px; font-size:11px; }

/* ── Costos: drill-down tree table ──────────────────────────────────────── */
.cos-tree-tbl { width:100%; border-collapse:collapse; font-size:.82rem; }
.cos-tree-tbl th {
  padding:var(--sp1) var(--sp2); font-size:.7rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; color:var(--fg3);
  border-bottom:1px solid var(--border); cursor:default;
  background:var(--bg1); position:sticky; top:0; z-index:1;
}
.cos-tree-tbl td { padding:5px var(--sp2); border-bottom:1px solid var(--border); color:var(--fg2); vertical-align:middle; }
.cos-tree-tbl tfoot td { border-top:2px solid var(--border); border-bottom:none; background:var(--bg2); color:var(--fg1); font-weight:600; }

.cos-tree-row { transition:background .1s; }
.cos-tree-row.expandable { cursor:pointer; }
.cos-tree-row:hover { background:var(--bg2); }

/* Depth backgrounds */
.cos-depth-0 { background:var(--bg1); }
.cos-depth-0:hover { background:var(--bg3); }
.cos-depth-1 { background:color-mix(in srgb, var(--bg2) 60%, var(--bg1)); }
.cos-depth-2 { background:var(--bg2); }
.cos-depth-3 { background:color-mix(in srgb, var(--bg3) 40%, var(--bg2)); font-size:.78rem; }

/* Expand toggle */
.cos-tree-toggle { width:28px; text-align:center; cursor:pointer; }
.cos-toggle-btn { font-size:.75rem; color:var(--fg3); user-select:none; transition:color .1s; }
.cos-tree-row:hover .cos-toggle-btn { color:var(--accent); }

/* Depth indent */
.cos-depth-indent { display:inline-block; }

/* Node type labels */
.cos-type-campo   { font-weight:700; color:var(--fg1); font-size:.85rem; }
.cos-type-frutal  { font-weight:600; color:var(--fg1); }
.cos-type-variedad{ color:var(--fg2); }
.cos-type-cuartel { color:var(--fg3); font-size:.78rem; }

/* ── Costos: drill-down chart breadcrumb ─────────────────────────────────── */
.cos-breadcrumb {
  display:flex; align-items:center; gap:4px; flex-wrap:wrap;
  padding:var(--sp2) var(--sp2) 0;
  font-size:.78rem;
}
.cos-crumb { display:flex; align-items:center; gap:4px; }
.cos-crumb-sep { color:var(--fg3); font-size:.7rem; }
.cos-crumb-btn {
  border:none; background:none; cursor:pointer; color:var(--accent);
  font-size:.78rem; padding:2px 6px; border-radius:4px;
  text-decoration:underline; text-decoration-style:dotted;
}
.cos-crumb-btn:hover { background:color-mix(in srgb, var(--accent) 10%, transparent); text-decoration-style:solid; }
.cos-crumb-label { color:var(--fg3); font-size:.78rem; }
.cos-crumb-current { color:var(--fg1); font-weight:600; }
.cos-crumb-back {
  margin-left:auto; border:1px solid var(--border); background:var(--bg2);
  cursor:pointer; color:var(--fg2); font-size:.75rem;
  padding:2px 8px; border-radius:4px;
}
.cos-crumb-back:hover { background:var(--bg3); color:var(--fg1); }

/* chart-box gets title from breadcrumb in campo tab, hide default title */
.cos-tree-tbl .right { text-align:right; }

/* ── DASHBOARD REDESIGN ────────────────────────────────────────────────────── */
.dash-wrap { display:flex; flex-direction:column; gap:14px; padding:16px 20px; overflow-y:auto; flex:1; }

/* KPI strip — 6 cards */
.dash-kpis {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:10px;
  flex-shrink:0;
}
@media(max-width:1200px){ .dash-kpis { grid-template-columns:repeat(3,1fr); } }

.dash-kpi {
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--r);
  padding:12px 14px; display:flex; flex-direction:column; gap:3px;
  box-shadow:var(--sh);
}
.dash-kpi-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--text3); }
.dash-kpi-value { font-size:19px; font-weight:700; letter-spacing:-.02em; color:var(--text); line-height:1.1; }
.dash-kpi-sub   { font-size:10px; color:var(--text3); }
.dash-kpi.kpi-red    { border-left:3px solid var(--red);    }
.dash-kpi.kpi-amber  { border-left:3px solid var(--amber);  }
.dash-kpi.kpi-green  { border-left:3px solid var(--green);  }
.dash-kpi.kpi-purple { border-left:3px solid var(--purple); }
.dash-kpi.kpi-accent { border-left:3px solid var(--accent); }

/* Row 2 — charts side by side */
.dash-row2 {
  display:grid;
  grid-template-columns:1fr 320px;
  gap:12px;
  flex-shrink:0;
}
@media(max-width:1100px){ .dash-row2 { grid-template-columns:1fr; } }

/* Row 3 — three columns */
.dash-row3 {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px;
  flex-shrink:0;
}
@media(max-width:1100px){ .dash-row3 { grid-template-columns:1fr 1fr; } }

/* Generic card */
.dash-card {
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--sh); overflow:hidden;
}
.dash-card-hdr {
  display:flex; align-items:center; gap:8px;
  padding:10px 14px; border-bottom:1px solid var(--border);
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--text2);
}
.dash-card-hdr .dash-badge {
  margin-left:auto; font-size:9px; font-family:var(--mono); font-weight:700;
  padding:1px 6px; border-radius:8px; background:var(--bg4); color:var(--text3);
}
.dash-card-body { padding:12px 14px; }

/* Trend chart card */
.dash-trend-wrap { position:relative; height:160px; }
.dash-trend-legend {
  display:flex; gap:14px; padding:6px 14px;
  font-size:10px; color:var(--text3); border-top:1px solid var(--border);
}
.dash-trend-legend span { display:flex; align-items:center; gap:5px; }

/* Donut chart card */
.dash-donut-wrap { position:relative; height:180px; display:flex; align-items:center; justify-content:center; }
.dash-donut-legend { padding:0 14px 10px; }
.dash-donut-legend-item { display:flex; align-items:center; gap:6px; font-size:10px; padding:2px 0; color:var(--text2); }
.dash-donut-legend-dot  { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* Top proveedores */
.dash-prov-row {
  display:flex; align-items:center; gap:8px; padding:6px 0;
  border-bottom:1px solid var(--border); font-size:11px;
}
.dash-prov-row:last-child { border-bottom:none; }
.dash-prov-rank { font-family:var(--mono); font-size:10px; color:var(--text3); width:16px; flex-shrink:0; }
.dash-prov-name { flex:1; font-weight:500; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dash-prov-n    { font-size:10px; color:var(--text3); flex-shrink:0; }
.dash-prov-amt  { font-family:var(--mono); font-weight:600; font-size:11px; flex-shrink:0; text-align:right; min-width:72px; }

/* Proyección */
.dash-proy-row { display:flex; align-items:center; gap:8px; padding:5px 0; font-size:11px; border-bottom:1px solid var(--border); }
.dash-proy-row:last-child { border-bottom:none; }
.dash-proy-label { font-weight:500; min-width:80px; flex-shrink:0; }
.dash-proy-bar-wrap { flex:1; height:6px; background:var(--bg4); border-radius:3px; overflow:hidden; }
.dash-proy-bar { height:100%; background:var(--accent); border-radius:3px; transition:width .4s ease; }
.dash-proy-total { font-family:var(--mono); font-size:10px; font-weight:600; min-width:70px; text-align:right; color:var(--accent); }
.dash-proy-n { font-size:10px; color:var(--text3); min-width:42px; text-align:right; }

/* Aging buckets */
.dash-aging-row {
  padding:6px 0; border-bottom:1px solid var(--border); cursor:pointer;
}
.dash-aging-row:last-child { border-bottom:none; }
.dash-aging-hdr { display:flex; align-items:center; gap:8px; font-size:11px; }
.dash-aging-label { font-weight:600; min-width:82px; }
.dash-aging-bar-wrap { flex:1; height:5px; background:var(--bg4); border-radius:3px; overflow:hidden; }
.dash-aging-bar { height:100%; border-radius:3px; }
.dash-aging-amt  { font-family:var(--mono); font-size:10px; font-weight:600; min-width:72px; text-align:right; }
.dash-aging-sub  { font-size:10px; padding:6px 0 2px; }

/* Alertas table — row 4 */
.dash-alertas { }
.dash-alertas tr { cursor:pointer; }
.dash-alertas td { font-size:11px; padding:5px 10px; }

/* Skeleton states */
.dash-skel { background:var(--bg4); border-radius:4px; animation:pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }

/* ── Dashboard: campo filter strip ─────────────────────────────────────────── */
.dash-field-filter {
  display:flex; align-items:center; gap:10px; flex-shrink:0;
  padding:0 2px 4px;
}
.dash-field-lbl {
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--text3); white-space:nowrap;
}


/* ── Modo consulta (solo lectura, lectores vía OneDrive) ─────────────────────── */
.modo-lector-chip {
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:600; color:var(--accent);
  background:var(--bg3); border:1px solid var(--border);
  padding:3px 9px; border-radius:12px; margin-right:4px; white-space:nowrap;
}
/* Ocultar toda acción de escritura cuando la app corre en modo lector.
   Las acciones de creación/edición/borrado usan .btn-primary / .btn-danger. */
body.modo-lector .btn-primary,
body.modo-lector .btn-danger { display:none !important; }

/* ════════════════════════════════════════════════════════════════════════════
   MÓVIL — versión amigable para teléfono
   · Barra inferior de pestañas (estilo app)  · Sidebar como cajón deslizable
   · Reflow de grillas/splits a una columna   · Modales a pantalla completa
   Punto de corte: 640px (teléfonos). Tablets ≤900px siguen con el riel de íconos.
   ════════════════════════════════════════════════════════════════════════════ */

/* Elementos solo-móvil: ocultos por defecto en escritorio */
.bottombar { display:none; }
.nav-backdrop { display:none; }
.panel-back { display:none; }

@media (max-width:640px) {
  /* ── Shell en columna: contenido arriba, barra de pestañas abajo ── */
  .shell { flex-direction:column; height:100dvh; }

  /* ── Sidebar → cajón lateral deslizable ── */
  .sidebar {
    position:fixed; top:0; left:0; bottom:0;
    width:82vw; max-width:300px; z-index:1200;
    transform:translateX(-100%); transition:transform .25s ease;
    box-shadow:0 0 50px rgba(0,0,0,.5);
  }
  .sidebar.open { transform:translateX(0); }
  /* Dentro del cajón mostramos las etiquetas completas (anula el riel de ≤900px) */
  .logo-name, .logo-sub, .logo-mark, .sidebar-foot { display:block; }
  .nav-lbl { display:block; }
  .nav-item { justify-content:flex-start; padding:11px 16px; font-size:14px; }
  .nav-item span { display:inline; }
  .nav-badge { margin-left:auto; }

  /* Fondo oscuro tras el cajón */
  .nav-backdrop {
    display:block; position:fixed; inset:0; z-index:1100;
    background:rgba(20,12,6,.5);
  }

  /* ── Topbar: deja respirar y envuelve las acciones ── */
  .topbar { height:auto; min-height:48px; flex-wrap:wrap; padding:8px 12px; gap:8px; }
  .topbar-actions { margin-left:auto; flex-wrap:wrap; justify-content:flex-end; }
  .topbar-title { font-size:15px; }

  /* ── Barra inferior de pestañas ── */
  .bottombar {
    display:flex; flex-shrink:0; height:58px;
    background:var(--bg2); border-top:1px solid var(--border); z-index:1000;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .bb-item {
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; color:var(--text3); font-size:10px; cursor:pointer;
    border:none; background:none; user-select:none;
    -webkit-tap-highlight-color:transparent; transition:color .15s;
  }
  .bb-item svg { width:19px; height:19px; }
  .bb-item.active { color:var(--accent); }

  /* ── Reflow de grillas a 1–2 columnas ── */
  .kpi-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .dash-kpis { grid-template-columns:1fr 1fr !important; gap:10px; }
  .dash-row2, .dash-row3, .dash-grid, .costos-charts { grid-template-columns:1fr !important; }
  .costos-kpis, .prov-stat-grid { grid-template-columns:1fr 1fr !important; }
  .fgrid.fg2, .fgrid.fg3 { grid-template-columns:1fr; }

  /* ── Split (lista + panel) → apilado verticalmente ── */
  .split { flex-direction:column; overflow-y:auto; }
  .split-list { border-right:none; border-bottom:1px solid var(--border); flex:0 0 auto; }
  .split-panel { width:100%; flex:0 0 auto; }
  .tbl-wrap { flex:0 0 auto; overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* Panel de detalle de Facturas → hoja a pantalla completa al seleccionar
     (lo muestra el JS con display:flex; aquí lo sacamos del flujo y lo fijamos) */
  #detail-panel { position:fixed; inset:0; z-index:1300; width:100%; max-width:100%;
                  overflow-y:auto; box-shadow:0 -2px 40px rgba(0,0,0,.4); }
  .panel-back { display:inline-flex; }

  /* ── Tira de estadísticas (Resultados/Facturas): que envuelva en vez de cortarse ── */
  .stats-row { flex-wrap:wrap; row-gap:12px; }
  .stat { flex:1 1 40%; min-width:96px; }

  /* Gráficos de Resultados con grilla 2-col en estilo inline → 1 columna */
  #res-content div[style*="1fr 1fr"] { grid-template-columns:1fr !important; }
  /* Detalle de factura desde el calendario: secciones a una columna */
  #cal-fac-overlay div[style*="1fr 1fr"] { grid-template-columns:1fr !important; }

  /* ── Proveedores (lista + panel de estadísticas) → apilado ── */
  .prov-layout { flex-direction:column; }
  .prov-list-side { width:100%; max-height:42vh; flex:0 0 auto;
                    border-right:none; border-bottom:1px solid var(--border); }
  .prov-stats-panel { flex:1; min-height:0; padding:14px; }

  /* ── Tablas: legibles, con scroll horizontal si hace falta ── */
  .tbl { font-size:12px; }
  .tbl th, .tbl td { padding:8px 10px; }
  .tbl td { max-width:none; }

  /* ── Modales a pantalla completa, por encima de la barra inferior ── */
  .overlay { padding:0; align-items:stretch; z-index:1400; }
  .modal { max-width:100%; width:100%; border-radius:0; border:none; min-height:100dvh; }
  /* Otros diálogos/lightbox también por encima de la barra (z:1000) */
  .cal-modal-overlay, .lb { z-index:1400; }

  /* ── Calendario más compacto ── */
  .cal-grid { padding:8px; gap:1px; }

  /* ── Objetivos táctiles cómodos ── */
  .btn { min-height:36px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   RESULTADOS — en celular la tabla ancha (métricas × temporadas) es ilegible:
   se oculta y se muestra una tarjeta vertical de UNA temporada a la vez.
   ════════════════════════════════════════════════════════════════════════════ */
.res-mobile { display:none; }              /* en escritorio mandamos la tabla */
.res-m-card { border:1px solid var(--border); border-radius:8px; overflow:hidden; background:var(--bg2); }
.res-m-sec  { font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
              padding:9px 14px; background:var(--bg3); color:var(--text3); }
.res-m-row  { display:flex; justify-content:space-between; align-items:baseline; gap:14px;
              padding:10px 14px; border-top:1px solid var(--border); }
.res-m-lbl  { font-size:13px; color:var(--text2); }
.res-m-val  { font-size:14px; font-family:var(--mono); text-align:right; white-space:nowrap; }

@media (max-width:640px) {
  .res-desktop { display:none; }           /* oculta la tabla ancha */
  .res-mobile  { display:block; }          /* muestra la tarjeta por temporada */
}

/* ════════════════════════════════════════════════════════════════════════════
   COSTOS — los árboles (Por Campo / Por Centro) tienen demasiadas columnas para
   el celular. En ≤640px dejamos Nivel + el monto principal, y bajamos las demás
   métricas a una sublínea bajo el nombre. El drill-down (▸) se mantiene.
   ════════════════════════════════════════════════════════════════════════════ */
.cos-sub { display:none; font-size:11px; color:var(--text3); margin-top:3px; font-family:var(--mono); }

@media (max-width:640px) {
  .cos-sub { display:block; }
  /* Por Campo: ocultar Ha(3), N°(4), $/Ha(6) → quedan Nivel + Facturado */
  .cos-campo-tbl th:nth-child(3),  .cos-campo-tbl td:nth-child(3),
  .cos-campo-tbl th:nth-child(4),  .cos-campo-tbl td:nth-child(4),
  .cos-campo-tbl th:nth-child(6),  .cos-campo-tbl td:nth-child(6) { display:none; }
  /* Por Centro: ocultar N°(3) y % Total(5) → quedan Centro + Facturado */
  .cos-centro-tbl th:nth-child(3), .cos-centro-tbl td:nth-child(3),
  .cos-centro-tbl th:nth-child(5), .cos-centro-tbl td:nth-child(5) { display:none; }
  /* Gráficos de Por Centro (grid 1fr 260px inline) → una columna */
  .cos-centro-charts { grid-template-columns:1fr !important; }
}