:root{
  --bg:#0f1115; --bg2:#171a21; --bg3:#1f2430; --line:#2a3040;
  --txt:#f2f5fa; --txt2:#aab4c6; --mut:#7b8496;
  --accent:#4da3ff; --rojo:#ff5252; --verde:#43d17b; --amarillo:#ffce4d;
  --b-local:#4da3ff; --b-vehiculos:#ff9257; --b-casa:#b78cff;
  --b-compras:#4dd08a; --b-extras:#ffd75e;
  --radius:14px; --shadow:0 6px 24px rgba(0,0,0,.45);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; padding:0; background:var(--bg); color:var(--txt);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px; overscroll-behavior-y:none}
button{font-family:inherit; font-size:inherit; color:inherit; cursor:pointer}
input{font-family:inherit}
.hidden{display:none !important}

/* ============ SPLASH ============ */
.splash{position:fixed; inset:0; background:var(--bg); display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:10px; z-index:100}
.splash-logo{width:76px; height:76px; border-radius:20px; background:var(--accent);
  color:#06121f; font-size:44px; font-weight:800; display:flex; align-items:center; justify-content:center}
.splash-tit{font-size:24px; font-weight:800; letter-spacing:.5px}
.splash-sub{color:var(--mut); font-size:14px}

/* ============ PIN ============ */
.overlay{position:fixed; inset:0; background:rgba(0,0,0,.72); z-index:90;
  display:flex; align-items:center; justify-content:center; padding:16px}
#pin-overlay{background:var(--bg)} /* con PIN no se ve nada de fondo */
.pin-box{background:var(--bg2); border:1px solid var(--line); border-radius:20px;
  padding:26px 22px; width:300px; max-width:94vw; text-align:center; box-shadow:var(--shadow)}
.pin-tit{font-size:18px; font-weight:700; margin-bottom:18px}
.pin-dots{display:flex; gap:14px; justify-content:center; margin-bottom:20px}
.pin-dots i{width:14px; height:14px; border-radius:50%; background:var(--bg3);
  border:1px solid var(--line); transition:background .15s}
.pin-dots i.on{background:var(--accent); border-color:var(--accent)}
.pin-pad{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.pin-pad button{height:58px; border-radius:14px; border:1px solid var(--line);
  background:var(--bg3); font-size:22px; font-weight:600}
.pin-pad button:active{background:var(--accent); color:#06121f}
.pin-hide{visibility:hidden}
.pin-del{font-size:18px !important}
.pin-msg{min-height:20px; margin-top:14px; color:var(--rojo); font-size:14px}
.pin-msg.ok{color:var(--verde)}

/* ============ APP LAYOUT ============ */
.app{display:flex; flex-direction:column; min-height:100vh; min-height:100dvh;
  max-width:520px; margin:0 auto; position:relative}
.hdr{position:sticky; top:0; z-index:40; background:linear-gradient(180deg,var(--bg2),var(--bg2) 78%,rgba(23,26,33,.92));
  border-bottom:1px solid var(--line); padding:10px 12px 12px;
  padding-top:calc(10px + env(safe-area-inset-top))}
.hdr-mes{display:flex; align-items:center; justify-content:center; gap:6px}
.hdr-mes span{font-size:15px; font-weight:700; letter-spacing:1.2px; color:var(--txt2); min-width:170px; text-align:center}
.mes-btn{width:40px; height:36px; border-radius:10px; border:1px solid var(--line);
  background:var(--bg3); font-size:20px; line-height:1}
.hdr-total{display:flex; flex-direction:column; align-items:center; margin-top:6px}
.hdr-total-label{font-size:11px; letter-spacing:2px; color:var(--mut)}
.hdr-total-fila{display:flex; align-items:center; justify-content:center; gap:10px}
.hdr-total-monto{font-size:34px; font-weight:800; color:var(--rojo); font-variant-numeric:tabular-nums}
.hdr-iva{font-size:12px; color:var(--mut); margin-top:2px; font-variant-numeric:tabular-nums}
.ojo{background:none; border:0; font-size:22px; line-height:1; padding:8px; margin:-8px;
  cursor:pointer; opacity:.8}
.ojo:active{transform:scale(1.15)}

/* ============ TABS ============ */
.tab{flex:1; min-width:0; padding:12px 12px 96px}
.tab.anim{animation:tabin .18s ease}
@keyframes tabin{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* ============ SOLAPAS ============ */
.solapas{display:flex; gap:8px; overflow-x:auto; padding-bottom:10px; scrollbar-width:none}
.solapas::-webkit-scrollbar{display:none}
.solapa{flex:0 0 auto; padding:8px 14px; border-radius:999px; border:1.5px solid var(--line);
  background:var(--bg2); color:var(--txt2); font-size:13px; font-weight:700;
  display:flex; align-items:center; gap:7px}
.solapa .punto{width:9px; height:9px; border-radius:50%}
.solapa.on{background:var(--bg3); color:var(--txt); border-color:var(--sc,var(--accent))}
.solapa.on .punto{box-shadow:0 0 8px currentColor}

/* ============ AVISOS ============ */
.avisos{margin:12px 12px 0}
.aviso{display:flex; align-items:center; gap:10px; background:#2a1f10;
  border:1px solid #6b5218; border-left:4px solid var(--amarillo);
  border-radius:12px; padding:10px 12px; margin-bottom:8px; font-size:14px}
.aviso b{color:var(--amarillo)}
.aviso .av-txt{flex:1; min-width:0; overflow:hidden; font-size:14px}
.aviso button{border:0; background:var(--amarillo); color:#241a04; font-weight:700;
  border-radius:9px; padding:7px 11px; font-size:13px}
.aviso .av-cerrar{background:none; color:var(--mut); font-size:16px; padding:4px 6px}

/* ============ CATEGORÍAS ============ */
.lista-cats{display:flex; flex-direction:column; gap:10px}
.cat{background:var(--bg2); border:1px solid var(--line); border-left:5px solid var(--c,var(--accent));
  border-radius:var(--radius); overflow:hidden}
.cat-top{display:flex; align-items:center; gap:10px; padding:12px 12px}
.cat-nom{flex:1; min-width:0; overflow:hidden}
.cat-nom .n{font-weight:700; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cat-nom .d{font-size:11px; color:var(--mut); margin-top:2px; display:flex; gap:6px; align-items:center}
.badge{font-size:10px; padding:1px 6px; border-radius:6px; background:var(--bg3);
  border:1px solid var(--line); color:var(--txt2); letter-spacing:.4px}
.badge.fijo{border-color:#2f5a8c; color:#7db8ff}
.badge.aviso{border-color:#6b5218; color:var(--amarillo)}
.cat-monto{font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; text-align:right}
.cat-monto.cero{color:var(--mut); font-weight:600}
.cat-btns{display:flex; gap:8px}
.cat-btn{width:42px; height:42px; border-radius:12px; border:1px solid var(--line);
  background:var(--bg3); font-size:20px; font-weight:700; line-height:1}
.cat-btn.mas{background:#12331f; border-color:#1f5c39; color:var(--verde)}
.cat-btn.menos{background:#2b1414; border-color:#5c1f1f; color:var(--rojo)}
.cat-btn:active{transform:scale(.94)}
.cat-det{display:none; border-top:1px dashed var(--line); padding:8px 12px 10px}
.cat.abierta .cat-det{display:block}
.hist-line{display:flex; align-items:center; gap:8px; font-size:13px; padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.05); color:var(--txt2)}
.hist-line:last-child{border-bottom:0}
.hl-fecha{width:74px; color:var(--mut); font-size:12px}
.hl-nota{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hl-monto{font-variant-numeric:tabular-nums; font-weight:700}
.hl-monto.neg{color:var(--rojo)}
.hl-borr{border:0; background:none; color:var(--mut); font-size:15px; padding:2px 6px}
.hist-vacio{color:var(--mut); font-size:13px; padding:6px 0}

/* ============ BOTONES GENERALES ============ */
.btn-fantasma{width:100%; padding:12px; border-radius:12px; border:1.5px dashed var(--line);
  background:none; color:var(--txt2); font-weight:600; margin-top:12px}
.btn-fantasma:active{border-color:var(--accent); color:var(--accent)}
.btn-primario{padding:13px 22px; border-radius:12px; border:0; background:var(--accent);
  color:#06121f; font-weight:800; font-size:16px}
.btn-primario:active{filter:brightness(.9)}
.btn-mini{padding:8px 14px; border-radius:10px; border:1px solid var(--line);
  background:var(--bg3); font-size:13px; font-weight:600}
.btn-mini:disabled{opacity:.45}
.btn-rojo{border-color:#5c1f1f; color:var(--rojo); background:#2b1414}
.nueva-cat-row{padding-bottom:8px}

/* ============ HISTORIAL ============ */
.hist-tools{display:flex; flex-direction:column; gap:10px; margin-bottom:10px}
.hist-ordenes{display:flex; gap:8px}
.chip{padding:7px 14px; border-radius:999px; border:1px solid var(--line);
  background:var(--bg2); color:var(--txt2); font-size:13px; font-weight:600}
.chip-on{background:var(--accent); border-color:var(--accent); color:#06121f}
.hist-total{font-size:13px; color:var(--mut); margin-bottom:8px}
.hist-lista{display:flex; flex-direction:column; gap:6px}
.hitem{display:flex; align-items:center; gap:10px; background:var(--bg2);
  border:1px solid var(--line); border-left:4px solid var(--c,var(--accent));
  border-radius:10px; padding:9px 11px; font-size:14px}
.hitem .h-f{width:70px; color:var(--mut); font-size:12px}
.hitem .h-c{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hitem .h-n{color:var(--mut); font-size:12px; display:block}
.hitem .h-iva{color:var(--accent); font-size:11px; font-weight:700; white-space:nowrap}
.hitem .h-m{font-weight:800; font-variant-numeric:tabular-nums}
.hitem .h-x{border:0; background:none; color:var(--mut); font-size:15px; padding:4px}
.hist-vacio-gran{color:var(--mut); text-align:center; padding:40px 10px; font-size:14px}

/* ============ AJUSTES ============ */
.aj-tit{font-size:20px; font-weight:800; margin:4px 0 14px}
.aj-grupo{background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius);
  margin-bottom:14px; overflow:hidden}
.aj-tit-min{font-size:12px; letter-spacing:1.5px; color:var(--mut); padding:12px 14px 4px}
.aj-row{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 14px; border-bottom:1px solid rgba(255,255,255,.05); font-size:14px}
.aj-row:last-child{border-bottom:0}
.aj-peligro span{color:var(--rojo)}
.aj-ver{text-align:center; color:var(--mut); font-size:12px; margin-top:8px}
.aj-cats{padding:4px 14px 0}
.aj-cat{display:flex; align-items:center; gap:8px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.05); font-size:14px}
.aj-cat .punto{width:10px; height:10px; border-radius:50%; flex:0 0 auto}
.aj-cat .ac-n{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.aj-cat.off .ac-n{opacity:.45; text-decoration:line-through}
.aj-cat .ac-b{border:0; background:none; font-size:15px; padding:4px 7px}
.switch{position:relative; display:inline-block; width:46px; height:26px; flex:0 0 auto}
.switch input{opacity:0; width:0; height:0}
.switch i{position:absolute; inset:0; background:var(--bg3); border:1px solid var(--line);
  border-radius:999px; transition:.2s}
.switch i::before{content:""; position:absolute; width:18px; height:18px; left:3px; top:3px;
  background:var(--mut); border-radius:50%; transition:.2s}
.switch input:checked + i{background:#123a5e; border-color:var(--accent)}
.switch input:checked + i::before{transform:translateX(20px); background:var(--accent)}

/* ============ GRÁFICOS ============ */
.g-cab{display:flex; justify-content:space-between; align-items:baseline; margin:2px 0 12px}
.g-cab-tit{letter-spacing:1.5px; color:var(--txt2); font-weight:700; font-size:14px}
.g-cab-total{font-size:26px; font-weight:800; color:var(--rojo); font-variant-numeric:tabular-nums}
.g-card{background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; margin-bottom:12px}
.g-tit{font-size:11px; letter-spacing:1.8px; color:var(--mut); margin-bottom:12px;
  text-transform:uppercase}
.g-donut-fila{display:flex; gap:14px; align-items:center}
.g-donut{width:132px; height:132px; flex:0 0 auto; position:relative}
.g-donut svg{width:100%; height:100%; display:block}
.g-donut-c{position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; pointer-events:none}
.g-donut-c b{font-size:14px; font-weight:800}
.g-donut-c span{font-size:10px; color:var(--mut); letter-spacing:1px}
.g-leyenda{flex:1; display:flex; flex-direction:column; gap:8px; min-width:0}
.g-leg{display:flex; align-items:center; gap:8px; font-size:13px}
.g-leg i{width:11px; height:11px; border-radius:3px; flex:0 0 auto}
.g-leg .l-n{flex:1; min-width:0; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; color:var(--txt2)}
.g-leg .l-m{font-weight:700; font-variant-numeric:tabular-nums; font-size:12px}
.g-leg .l-p{color:var(--mut); font-size:11px; width:36px; text-align:right}
.g-bar{margin-bottom:10px}
.g-bar:last-child{margin-bottom:0}
.g-bar-top{display:flex; justify-content:space-between; gap:10px; font-size:13px; margin-bottom:4px}
.g-bar-top .b-n{color:var(--txt2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.g-bar-top .b-m{font-weight:700; font-variant-numeric:tabular-nums; flex:0 0 auto}
.g-bar-track{height:9px; border-radius:5px; background:var(--bg3); overflow:hidden}
.g-bar-track i{display:block; height:100%; border-radius:5px}
.g-evol{display:flex; align-items:flex-end; gap:5px; height:124px; padding-top:4px}
.g-mes{flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-end; height:100%; gap:5px; min-width:0}
.g-mes-b{width:100%; max-width:26px; border-radius:4px 4px 0 0; background:var(--accent);
  min-height:3px; transition:height .25s}
.g-mes.on .g-mes-b{background:var(--rojo)}
.g-mes.cero .g-mes-b{background:var(--bg3)}
.g-mes span{font-size:9px; color:var(--mut); letter-spacing:.5px}
.g-mes.on span{color:var(--txt); font-weight:700}
.g-stats{margin-top:14px; border-top:1px dashed var(--line); padding-top:11px;
  font-size:13px; color:var(--txt2); display:flex; flex-direction:column; gap:7px}
.g-stats b{color:var(--txt)}
.g-stats .up{color:var(--rojo); font-weight:700}
.g-stats .down{color:var(--verde); font-weight:700}
.g-stats .dim{color:var(--mut)}

/* ============ BOTTOM NAV ============ */
.botnav{position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:520px; z-index:50; display:flex;
  background:var(--bg2); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom)}
.botnav-b{flex:1; background:none; border:0; padding:9px 0 8px; color:var(--mut);
  font-size:11px; font-weight:700; display:flex; flex-direction:column; align-items:center; gap:2px}
.botnav-b .bn-i{font-size:20px}
.botnav-b.on{color:var(--accent)}

/* ============ CAMPOS + ✕ ============ */
.campo{position:relative; display:flex; align-items:center; background:var(--bg3);
  border:1px solid var(--line); border-radius:12px; margin-bottom:4px}
.campo:focus-within{border-color:var(--accent)}
.campo input{flex:1; background:none; border:0; outline:0; color:var(--txt);
  font-size:17px; padding:13px 40px 13px 13px; min-width:0}
.campo input[type=date]{padding-right:40px}
.campo-pref{padding-left:13px; color:var(--mut); font-weight:700}
.campo-x{position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border-radius:50%; border:0; background:var(--bg);
  color:var(--mut); font-size:13px; display:flex; align-items:center; justify-content:center}
.campo-x:active{background:var(--line); color:var(--txt)}
.campo-buscar input{padding-left:13px}
.campo-label{display:block; font-size:12px; color:var(--mut); margin:12px 0 6px; letter-spacing:.5px}

/* ============ SHEET ============ */
.sheet-wrap{position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.6);
  display:flex; align-items:flex-end}
.sheet{width:100%; max-width:520px; margin:0 auto; background:var(--bg2);
  border-radius:22px 22px 0 0;
  border-top:1px solid var(--line); padding:8px 16px calc(18px + env(safe-area-inset-bottom));
  animation:up .2s ease}
@keyframes up{from{transform:translateY(40px); opacity:.4} to{transform:none; opacity:1}}
.sheet-grip{width:44px; height:5px; border-radius:3px; background:var(--line); margin:4px auto 12px}
.sheet-tit{font-size:17px; font-weight:800; margin-bottom:12px}
.sheet-modo{display:flex; gap:8px; margin-bottom:6px; flex-wrap:wrap}
.sheet-err{min-height:20px; color:var(--rojo); font-size:13px; margin-top:4px}
.sheet-acc{display:flex; gap:10px; justify-content:flex-end; margin-top:12px}
.sheet-acc .btn-fantasma{width:auto; margin-top:0; padding:13px 18px}

/* ============ MODAL ============ */
.modal-box{background:var(--bg2); border:1px solid var(--line); border-radius:18px;
  padding:18px 16px; width:340px; max-width:94vw; max-height:86vh; overflow:auto; box-shadow:var(--shadow)}
.modal-tit{font-size:17px; font-weight:800; margin-bottom:12px}
.msel{display:flex; flex-direction:column; gap:8px; margin-top:6px}
.msel button{display:flex; align-items:center; gap:9px; padding:11px 12px; border-radius:11px;
  border:1px solid var(--line); background:var(--bg3); font-size:14px; text-align:left}
.msel button .punto{width:10px; height:10px; border-radius:50%; flex:0 0 auto}
.msel button:active{border-color:var(--accent)}
.msel small{color:var(--mut); margin-left:auto}
.tipo-sel{display:flex; gap:8px; margin-top:4px}
.tipo-sel .chip{flex:1; text-align:center}
.confirm-txt{font-size:14px; color:var(--txt2); line-height:1.5}

/* ============ TOAST ============ */
.toast{position:fixed; left:50%; bottom:86px; transform:translateX(-50%); z-index:120;
  background:#000; border:1px solid var(--line); color:var(--txt); padding:11px 18px;
  border-radius:12px; font-size:14px; box-shadow:var(--shadow); max-width:92vw; text-align:center}
.toast.err{border-color:#7a2b2b; color:#ff9c9c}

/* ============ PRINT ============ */
@media print{
  body{background:#fff; color:#000}
  .botnav,.hdr-mes,.avisos,.solapas,.cat-btns,.nueva-cat-row,.aj-grupo,.hist-tools,.campo-x{display:none !important}
  .hidden{display:none !important}
  .tab{padding:0}
  .cat,.hitem{border:1px solid #ccc; color:#000; background:#fff}
  .cat-nom .n,.cat-monto{color:#000}
  .hdr-total-monto{color:#c00}
  .hdr{background:#fff; border-color:#ccc}
  .hdr-mes span{color:#000}
}