:root{
  --ink:#0F211B; --ink-2:#16302A; --ink-3:#1D3C33;
  --paper:#F4EEDC; --paper-dim:#E7DEC2;
  --line:#2C4A3F;
  --brass:#C8983E; --brass-soft:#E4C77E;
  --rojo:#B5453F; --rojo-soft:#E3A39D;
  --verde:#3E7C5C; --verde-soft:#9FCBAF;
  --gris:#7C8A82; --gris-soft:#C3CBC5;
  --text:#F4EEDC; --text-dim:#A9BDB3; --text-ink:#13241D;
  --serif:'Newsreader', serif; --sans:'Inter', sans-serif; --mono:'IBM Plex Mono', monospace;
  --radius:10px; --shadow:0 10px 30px -12px rgba(0,0,0,.45);
}
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.018) 0px, rgba(255,255,255,0.018) 1px, transparent 1px, transparent 33px),
    radial-gradient(ellipse 1200px 600px at 50% -10%, #1B3A30 0%, var(--ink) 55%);
  color:var(--text); font-family:var(--sans); min-height:100vh; -webkit-font-smoothing:antialiased;
}
a{ color:inherit; } button{ font-family:var(--sans); cursor:pointer; }
:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; border-radius:4px; }
input,textarea,select{ font-family:var(--sans); background:rgba(244,238,220,0.06); border:1px solid var(--line); color:var(--text); border-radius:7px; padding:9px 11px; font-size:14px; width:100%; }
input[type=date]{ color-scheme:dark; }
textarea{ resize:vertical; min-height:60px; }
label{ font-size:12px; color:var(--text-dim); display:block; margin-bottom:5px; }
.field{ margin-bottom:14px; }
.mono{ font-family:var(--mono); }
.checkfield{ display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.checkfield input[type=checkbox]{ width:16px; height:16px; }
.checkfield label{ margin:0; }

.shell{ max-width:1180px; margin:0 auto; padding:28px 22px 90px; }
.topbar{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:18px; }
.eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--brass-soft); margin:0 0 6px; }
h1.title{ font-family:var(--serif); font-weight:600; font-size:clamp(26px,4vw,38px); margin:0; letter-spacing:.2px; display:flex; align-items:center; gap:10px; }
.title em{ font-style:italic; color:var(--brass-soft); font-weight:500; }
.updated{ font-family:var(--mono); font-size:11px; color:var(--text-dim); margin-top:8px; }
.sub-stats{ font-size:13px; color:var(--text-dim); margin-top:6px; }
.sub-stats b{ color:var(--brass-soft); }
.gear{ width:38px;height:38px;border-radius:50%; border:1px solid var(--line); background:rgba(244,238,220,0.05); display:flex; align-items:center; justify-content:center; color:var(--text-dim); flex:none; transition:transform .25s ease, color .2s ease, border-color .2s ease; }
.gear:hover{ color:var(--brass-soft); border-color:var(--brass); transform:rotate(35deg); }
.topbtns{ display:flex; gap:8px; flex:none; }
.breadcrumb{ margin-bottom:12px; }
.breadcrumb button{ background:none; border:none; color:var(--brass-soft); font-family:var(--mono); font-size:11.5px; letter-spacing:.5px; padding:0; }
.breadcrumb button:hover{ text-decoration:underline; }
.colordot{ width:9px; height:9px; border-radius:50%; display:inline-block; flex:none; }

.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:26px; flex-wrap:wrap; }
.tab{ background:none; border:none; color:var(--text-dim); font-size:13px; font-weight:600; letter-spacing:.3px; padding:11px 16px; border-bottom:2px solid transparent; position:relative; top:1px; }
.tab.active{ color:var(--text); border-bottom-color:var(--brass); }
.tab:hover:not(.active){ color:var(--text); }
.tabpanel{ animation:fadeUp .35s ease both; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

.card{ background:linear-gradient(180deg, rgba(244,238,220,0.045), rgba(244,238,220,0.015)); border:1px solid var(--line); border-radius:var(--radius); padding:20px; }
.hero-row{ display:grid; grid-template-columns:1.3fr 1fr; gap:16px; margin-bottom:18px; }
@media (max-width:760px){ .hero-row{ grid-template-columns:1fr; } }
.hero{ background:linear-gradient(160deg, var(--ink-3), var(--ink-2)); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; box-shadow:var(--shadow); position:relative; overflow:hidden; }
.hero::before{ content:""; position:absolute; right:-40px; top:-40px; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle, rgba(200,152,62,0.16), transparent 70%); }
.hero .label{ font-family:var(--mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--text-dim); }
.hero .big{ font-family:var(--mono); font-weight:600; font-size:clamp(34px,5vw,48px); margin:8px 0 4px; letter-spacing:-1px; }
.hero .sub{ font-size:13px; color:var(--text-dim); line-height:1.5; }
.hero .sub b{ color:var(--brass-soft); font-weight:600; }
.kpi-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.kpi-stub{ background:var(--paper); color:var(--text-ink); border-radius:6px; padding:13px 14px; border-bottom:3px dashed var(--paper-dim); }
.kpi-stub .l{ font-family:var(--mono); font-size:10px; letter-spacing:1.2px; text-transform:uppercase; color:#5b6b62; }
.kpi-stub .v{ font-family:var(--mono); font-weight:600; font-size:19px; margin-top:5px; }
.kpi-stub.warn .v{ color:var(--rojo); } .kpi-stub.ok .v{ color:var(--verde); }
.alert-banner{ display:flex; align-items:center; gap:16px; border:1px solid var(--rojo-soft); background:rgba(181,69,63,0.12); border-radius:var(--radius); padding:16px 18px; margin-bottom:18px; }
.alert-banner.ok{ border-color:var(--verde-soft); background:rgba(62,124,92,0.12); }
.alert-banner p{ margin:0; font-size:13.5px; line-height:1.55; }
.alert-banner b{ color:var(--brass-soft); }

.stamp{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border:2px dashed currentColor; border-radius:4px; font-family:var(--mono); font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase; transform:rotate(-2deg); background:transparent; color:inherit; white-space:nowrap; }
.stamp.clickable{ transition:transform .15s ease, background .15s ease; }
.stamp.clickable:hover{ transform:rotate(0deg) scale(1.03); background:rgba(255,255,255,0.06); }
.stamp .pin{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }

.overlay{ position:fixed; inset:0; z-index:40; }
.popover{ position:absolute; z-index:50; background:var(--ink-3); border:1px solid var(--line); border-radius:9px; padding:10px; box-shadow:var(--shadow); min-width:210px; }
.popover .opt{ display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:6px; font-size:12.5px; cursor:pointer; }
.popover .opt:hover{ background:rgba(255,255,255,0.06); }
.popover .swatch{ width:9px; height:9px; border-radius:50%; flex:none; }
.popover hr{ border:none; border-top:1px solid var(--line); margin:6px 0; }
.popover .addrow{ display:flex; gap:6px; margin-top:6px; }
.popover .addrow input{ padding:6px 8px; font-size:12px; }
.popover .addrow button{ font-size:12px; }

.charts-row{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:16px; margin-bottom:16px; }
@media (max-width:860px){ .charts-row{ grid-template-columns:1fr; } }
.chart-card h3{ margin:0 0 4px; font-family:var(--serif); font-weight:500; font-size:16px; }
.chart-card .ch-sub{ font-size:11.5px; color:var(--text-dim); margin-bottom:10px; }
.chart-box{ position:relative; height:230px; } .chart-box.tall{ height:280px; }

.list{ display:flex; flex-direction:column; gap:10px; }
.row-card{ display:flex; gap:14px; align-items:flex-start; background:rgba(244,238,220,0.035); border:1px solid var(--line); border-left:4px solid var(--gris); border-radius:8px; padding:14px 16px; position:relative; }
.row-card .main{ flex:1; min-width:0; }
.row-card .top-line{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:space-between; }
.row-card .ttl{ font-family:var(--serif); font-size:16.5px; font-weight:500; }
.row-card .date{ font-family:var(--mono); font-size:11.5px; color:var(--text-dim); }
.row-card .amounts{ display:flex; gap:18px; margin-top:10px; flex-wrap:wrap; }
.amounts .a{ display:flex; flex-direction:column; gap:2px; }
.amounts .a .l{ font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--text-dim); }
.amounts .a .v{ font-family:var(--mono); font-size:14.5px; font-weight:600; }
.row-card .obs{ font-size:12.5px; color:var(--text-dim); margin-top:9px; line-height:1.5; font-style:italic; }
.row-card .chips{ display:flex; gap:6px; margin-top:9px; flex-wrap:wrap; }
.chip{ font-family:var(--mono); font-size:10.5px; background:rgba(255,255,255,0.06); border:1px solid var(--line); padding:3px 8px; border-radius:20px; color:var(--text-dim); }
.row-actions{ display:flex; flex-direction:column; gap:6px; align-items:flex-end; flex:none; }
.iconbtn{ background:none; border:1px solid var(--line); color:var(--text-dim); border-radius:6px; padding:6px 9px; font-size:11.5px; }
.iconbtn:hover{ color:var(--text); border-color:var(--brass); }
.iconbtn.danger:hover{ color:var(--rojo-soft); border-color:var(--rojo-soft); }
.confirm-row{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.confirm-row button{ font-size:11px; border-radius:6px; padding:5px 9px; border:1px solid var(--line); background:none; color:var(--text-dim); }
.confirm-row button.yes{ color:var(--rojo-soft); border-color:var(--rojo-soft); }

.btn{ border-radius:7px; padding:10px 16px; font-size:13px; font-weight:600; border:1px solid var(--brass); background:var(--brass); color:#16241B; }
.btn:hover{ background:var(--brass-soft); }
.btn.ghost{ background:none; color:var(--text); border-color:var(--line); }
.btn.ghost:hover{ border-color:var(--brass); color:var(--brass-soft); }
.btn.small{ padding:6px 10px; font-size:11.5px; }
.btnrow{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }

.panel{ background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:18px; animation:fadeUp .25s ease both; }
.panel h3{ margin:0 0 14px; font-family:var(--serif); font-weight:500; font-size:18px; }
.panel h4{ margin:18px 0 10px; font-family:var(--serif); font-weight:500; font-size:14.5px; color:var(--brass-soft); }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .grid3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
@media (max-width:680px){ .grid2,.grid3{ grid-template-columns:1fr; } }
.alloc-box{ border:1px dashed var(--line); border-radius:8px; padding:12px; margin-top:6px; }
.alloc-row{ display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid rgba(255,255,255,0.05); }
.alloc-row:last-child{ border-bottom:none; }
.alloc-row .nm{ flex:1; font-size:13px; } .alloc-row .pend{ font-family:var(--mono); font-size:11px; color:var(--text-dim); width:130px; }
.alloc-row input{ width:120px; padding:6px 8px; font-size:13px; }
.alloc-total{ display:flex; justify-content:space-between; margin-top:10px; padding-top:10px; border-top:1px solid var(--line); font-family:var(--mono); font-size:12.5px; flex-wrap:wrap; gap:8px; }
.alloc-total .ok{ color:var(--verde-soft); } .alloc-total .off{ color:var(--brass-soft); }
.toggle{ display:flex; gap:8px; align-items:center; }
.switch{ position:relative; width:42px; height:23px; flex:none; }
.switch input{ opacity:0; width:0; height:0; }
.switch .track{ position:absolute; inset:0; background:var(--line); border-radius:30px; transition:.2s; }
.switch .track:before{ content:""; position:absolute; width:17px; height:17px; left:3px; top:3px; background:var(--text); border-radius:50%; transition:.2s; }
.switch input:checked + .track{ background:var(--verde); } .switch input:checked + .track:before{ transform:translateX(19px); }

.timeline{ position:relative; padding-left:26px; }
.timeline::before{ content:""; position:absolute; left:6px; top:6px; bottom:6px; width:1px; background:var(--line); }
.tl-item{ position:relative; padding-bottom:20px; }
.tl-item::before{ content:""; position:absolute; left:-26px; top:4px; width:9px; height:9px; border-radius:50%; background:var(--brass); border:2px solid var(--ink); }
.tl-date{ font-family:var(--mono); font-size:11px; color:var(--brass-soft); letter-spacing:.5px; }
.tl-text{ font-size:13.5px; margin-top:4px; line-height:1.55; }
.tl-tag{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--text-dim); margin-left:8px; }

.empty{ text-align:center; padding:40px 20px; color:var(--text-dim); }
.empty .big-em{ font-family:var(--serif); font-style:italic; font-size:18px; color:var(--text); display:block; margin-bottom:6px; }
.section-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:10px; }
.section-head h2{ font-family:var(--serif); font-weight:500; font-size:21px; margin:0; }
.section-sub{ color:var(--text-dim); font-size:12.5px; margin-top:3px; }
footer{ text-align:center; margin-top:50px; color:var(--text-dim); font-size:11.5px; font-family:var(--mono); }
footer a{ text-decoration:underline; cursor:pointer; }

/* ---- cartera ---- */
.cartera-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; margin-top:6px; }
.cliente-card{ background:linear-gradient(180deg, rgba(244,238,220,0.05), rgba(244,238,220,0.015)); border:1px solid var(--line); border-left:5px solid var(--cc,var(--brass)); border-radius:10px; padding:18px; display:flex; flex-direction:column; gap:10px; transition:transform .15s ease, border-color .15s ease; }
.cliente-card:hover{ transform:translateY(-2px); }
.cliente-card h3{ font-family:var(--serif); font-size:18px; margin:0; font-weight:500; }
.cliente-card .saldo{ font-family:var(--mono); font-size:21px; font-weight:600; }
.cliente-card .meta{ font-size:11.5px; color:var(--text-dim); display:flex; justify-content:space-between; gap:8px; }
.cliente-card .footer-row{ display:flex; justify-content:space-between; align-items:center; margin-top:auto; gap:8px; }
.addcard{ border:2px dashed var(--line); display:flex; align-items:center; justify-content:center; min-height:168px; color:var(--text-dim); font-family:var(--serif); font-size:15px; background:none; border-radius:10px; }
.addcard:hover{ border-color:var(--brass); color:var(--brass-soft); }
.swatch-pick{ display:flex; gap:8px; flex-wrap:wrap; }
.swatch-pick .sw{ width:24px; height:24px; border-radius:50%; cursor:pointer; border:2px solid transparent; }
.swatch-pick .sw.sel{ border-color:var(--text); }

/* ---- comprobantes ---- */
.filebtn{ display:inline-block; border:1px dashed var(--line); border-radius:7px; padding:10px 14px; font-size:12.5px; color:var(--text-dim); cursor:pointer; }
.filebtn:hover{ border-color:var(--brass); color:var(--brass-soft); }
input[type=file]{ display:none; }
.comp-grid{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.comp-item{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.comp-thumb{ position:relative; width:62px; height:62px; border-radius:7px; overflow:hidden; border:1px solid var(--line); background:rgba(255,255,255,0.04); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.comp-thumb img{ width:100%; height:100%; object-fit:cover; }
.comp-thumb .pdf-ic{ font-size:21px; }
.comp-thumb .rm{ position:absolute; top:2px; right:2px; width:16px; height:16px; border-radius:50%; background:rgba(0,0,0,0.7); color:#fff; font-size:10px; display:flex; align-items:center; justify-content:center; border:none; line-height:1; }
.comp-name{ font-size:9px; color:var(--text-dim); text-align:center; max-width:62px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.warn-line{ font-size:11.5px; color:var(--rojo-soft); margin-top:6px; }

.lightbox-overlay{ position:fixed; inset:0; background:rgba(10,18,15,0.9); z-index:80; display:flex; align-items:center; justify-content:center; padding:30px; }
.lightbox-box{ max-width:90vw; max-height:88vh; display:flex; flex-direction:column; align-items:center; gap:12px; }
.lightbox-box img{ max-width:100%; max-height:74vh; border-radius:8px; box-shadow:var(--shadow); }
.lightbox-box .lb-name{ font-family:var(--mono); font-size:12px; color:var(--text-dim); }

.cat-manager{ display:flex; flex-direction:column; gap:10px; }
.cat-chip-row{ display:flex; gap:8px; flex-wrap:wrap; }
.cat-chip{ display:flex; align-items:center; gap:6px; background:rgba(255,255,255,0.05); border:1px solid var(--line); border-radius:20px; padding:5px 10px; font-size:12px; }
.cat-chip .sw{ width:9px; height:9px; border-radius:50%; }
.cat-chip button{ background:none; border:none; color:var(--text-dim); font-size:12px; padding:0; }
.cat-chip button:hover{ color:var(--rojo-soft); }
.addrow2{ display:flex; gap:8px; }
.addrow2 input{ flex:1; }

/* ============================= AUTH SCREENS ============================= */
.auth-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.auth-card{ width:100%; max-width:380px; background:var(--ink-2); border:1px solid var(--line); border-radius:14px; padding:32px 28px; box-shadow:var(--shadow); }
.auth-card h1{ font-family:var(--serif); font-size:22px; margin:0 0 6px; color:var(--paper); }
.auth-card .auth-sub{ font-size:12.5px; color:var(--text-dim); margin:0 0 22px; line-height:1.5; }
.auth-card .field{ margin-bottom:14px; }
.auth-card .btn{ width:100%; text-align:center; }
.auth-links{ display:flex; justify-content:space-between; margin-top:16px; font-size:12px; }
.auth-links a{ color:var(--brass-soft); cursor:pointer; text-decoration:none; }
.auth-links a:hover{ text-decoration:underline; }
.auth-ok-line{ font-size:12.5px; color:var(--verde-soft); margin-bottom:14px; line-height:1.5; }
.topbtns{ display:flex; align-items:center; gap:10px; }
.usrchip{ font-size:11.5px; color:var(--text-dim); margin-right:2px; }