:root{--green:#00e5a0;--gbg:rgba(0,229,160,.08);--gbd:rgba(0,229,160,.3);--red:#ff5555;--rbg:rgba(255,85,85,.08);--rbd:rgba(255,85,85,.3);--amber:#ffb700;--abg:rgba(255,183,0,.08);--abd:rgba(255,183,0,.3);--blue:#4da6ff;--bbg:rgba(77,166,255,.08);--bbd:rgba(77,166,255,.3);--purple:#c084fc;--sec:#5a7a9a;--mut:#253a55;}
*{box-sizing:border-box;margin:0;padding:0}html{background:#04080f}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#dce8f8;background:#04080f}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background:#1a3050;border-radius:2px}
input,select,button{font-family:inherit;outline:none}input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}
select option{background:#0d1829;color:#dce8f8}optgroup{color:var(--sec);font-style:normal;font-weight:600}
.tab{display:none}.tab.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.tab.active{animation:fadeIn .2s ease}
.nav-btn{transition:all .2s;border-bottom:2px solid transparent;color:var(--sec)}.nav-btn.active{border-bottom-color:var(--green);color:var(--green)}.nav-btn.active .nl{font-weight:700}
.inp{width:100%;background:#112038;border:1px solid #1a3050;border-radius:8px;padding:9px 12px;color:#dce8f8;font-size:13px;transition:border .2s}.inp:focus{border-color:#243f6a}
.inp-amb{color:var(--amber);font-size:22px;font-weight:900}
.tp{flex:1;padding:9px 4px;border-radius:8px;border:1px solid #1a3050;background:#112038;color:var(--sec);font-size:12px;font-weight:600;cursor:pointer;text-align:center;transition:all .2s}
.tp.i{border-color:var(--gbd);background:var(--gbg);color:var(--green)}.tp.e{border-color:var(--rbd);background:var(--rbg);color:var(--red)}.tp.t{border-color:var(--bbd);background:var(--bbg);color:var(--blue)}
.mp{padding:8px 4px;border-radius:8px;border:1px solid #1a3050;background:#112038;color:var(--sec);font-size:11px;font-weight:600;cursor:pointer;text-align:center;transition:all .2s;flex:1;min-width:0}.mp.on{border-color:var(--gbd);background:var(--gbg);color:var(--green)}
.cr{display:flex;align-items:center;gap:10px;background:#112038;border:1px solid #1a3050;border-radius:8px;padding:11px 14px;cursor:pointer;transition:border .2s;user-select:none}.cr.on{border-color:var(--abd);background:var(--abg)}
.chk{width:18px;height:18px;border-radius:5px;border:2px solid #243f6a;background:transparent;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;font-size:11px;color:transparent}.chk.on{background:var(--amber);border-color:var(--amber);color:#000}
.vb{background:var(--abg);border:1px solid var(--abd);border-radius:8px;padding:12px;display:none}.vb.on{display:block}
.bs{width:100%;padding:13px;border-radius:10px;cursor:pointer;font-size:15px;font-weight:900;transition:all .3s;border:1px solid var(--gbd);background:var(--green);color:#04080f}.bs.e{background:var(--red);border-color:var(--rbd);color:#fff}.bs.t{background:var(--blue);border-color:var(--bbd);color:#fff}.bs.c{background:var(--amber);border-color:var(--abd);color:#04080f}.bs:disabled{opacity:.5;cursor:not-allowed}
.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-120px);z-index:9999;border-radius:12px;padding:13px 20px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:10px;box-shadow:0 8px 32px rgba(0,0,0,.6);transition:transform .35s cubic-bezier(.34,1.56,.64,1);pointer-events:none;min-width:260px}.toast.show{transform:translateX(-50%) translateY(0)}
.ts{background:#003d29;border:1px solid var(--gbd);color:var(--green)}.te{background:#2a0808;border:1px solid var(--rbd);color:var(--red)}.tt{background:#030d1a;border:1px solid var(--bbd);color:var(--blue)}.tc{background:#2a1a00;border:1px solid var(--abd);color:var(--amber)}
.fw{max-height:660px;overflow-y:auto}
.dh{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;background:rgba(7,16,31,.97);border-bottom:1px solid rgba(26,48,80,.6);position:sticky;top:0;z-index:2;backdrop-filter:blur(8px)}
.dl{display:flex;align-items:center;gap:10px}.dn{font-size:26px;font-weight:900;color:#dce8f8;line-height:1;letter-spacing:-0.02em}.dm{display:flex;flex-direction:column;gap:1px}.da{font-size:12px;font-weight:700;color:var(--sec);line-height:1}.do{font-size:10px;color:var(--mut);line-height:1;margin-top:1px}.dt{display:flex;align-items:center;gap:6px}
.bi{font-size:12px;font-weight:700;padding:4px 10px;border-radius:20px;background:rgba(0,229,160,.1);color:var(--green);border:1px solid rgba(0,229,160,.22);white-space:nowrap}.bi.z{background:rgba(90,122,154,.07);color:#3a5874;border-color:rgba(90,122,154,.16);font-weight:500}
.be{font-size:12px;font-weight:700;padding:4px 10px;border-radius:20px;background:rgba(255,85,85,.1);color:var(--red);border:1px solid rgba(255,85,85,.22);white-space:nowrap}.be.z{background:rgba(90,122,154,.07);color:#3a5874;border-color:rgba(90,122,154,.16);font-weight:500}
.ti{display:flex;align-items:center;gap:12px;padding:12px 18px;cursor:pointer;transition:background .15s;border-bottom:1px solid rgba(26,48,80,.3)}.ti:last-child{border-bottom:none}.ti:hover{background:rgba(36,63,106,.38)}
.tic{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}.ti:hover .tic{transform:scale(1.06)}
.tb{flex:1;min-width:0}.tcn{font-size:13px;font-weight:600;color:#dce8f8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.tdt{font-size:11px;color:var(--sec);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0}.ta{font-size:15px;font-weight:800;letter-spacing:-.01em;white-space:nowrap}.tm{font-size:10px;color:var(--sec);white-space:nowrap}
.fe{padding:56px 24px;text-align:center}
.ld{display:inline-block;width:16px;height:16px;border:2px solid rgba(0,229,160,.3);border-top-color:var(--green);border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-right:6px}@keyframes spin{to{transform:rotate(360deg)}}
.tbl{width:100%;border-collapse:collapse;font-size:12px}.tbl th{color:var(--sec);font-size:10px;letter-spacing:.07em;text-transform:uppercase;padding:8px 12px;border-bottom:1px solid #1a3050;font-weight:600;text-align:left;white-space:nowrap}.tbl td{padding:9px 12px;border-bottom:1px solid rgba(26,48,80,.45);vertical-align:middle}.tbl tr:last-child td{border-bottom:none}.tbl tbody tr{transition:background .15s}.tbl tbody tr:hover{background:rgba(36,63,106,.4)}
.mo{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .2s}.mo.open{opacity:1;pointer-events:all}
.mc{background:#0d1829;border:1px solid #1a3050;border-radius:18px;width:100%;max-width:500px;max-height:90vh;display:flex;flex-direction:column;transform:scale(.95) translateY(16px);transition:transform .25s cubic-bezier(.34,1.4,.64,1)}.mo.open .mc{transform:scale(1) translateY(0)}
.ml{font-size:10px;color:var(--sec);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;font-weight:600}
.bdel{padding:11px 18px;border-radius:10px;border:1px solid var(--rbd);background:var(--rbg);color:var(--red);font-size:13px;font-weight:700;cursor:pointer}.bdel:hover{background:rgba(255,85,85,.2)}
.bupd{padding:11px 22px;border-radius:10px;border:1px solid var(--gbd);background:var(--green);color:#04080f;font-size:13px;font-weight:900;cursor:pointer;transition:all .3s}.bh{opacity:0;pointer-events:none;transform:translateX(10px)}.bv{opacity:1;pointer-events:all;transform:translateX(0)}
.sc{background:#0d1829;border:1px solid #1a3050;border-radius:14px;padding:20px}.si{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-radius:8px;background:#112038;border:1px solid #1a3050;margin-bottom:6px}
.db{width:24px;height:24px;border-radius:6px;border:none;background:rgba(255,85,85,.12);color:var(--red);cursor:pointer;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}.db:hover{background:rgba(255,85,85,.25)}
.ar{display:flex;gap:8px;margin-top:10px}.ai{flex:1;background:#112038;border:1px solid #1a3050;border-radius:8px;padding:8px 12px;color:#dce8f8;font-size:13px}.ai:focus{border-color:#243f6a;outline:none}.ab{padding:8px 14px;border-radius:8px;border:1px solid var(--gbd);background:var(--gbg);color:var(--green);font-weight:700;font-size:12px;cursor:pointer;white-space:nowrap}.ab:hover{background:rgba(0,229,160,.15)}
.kpi{background:#0d1829;border:1px solid #1a3050;border-radius:12px;padding:16px}.hb{border-radius:14px;padding:22px 24px}.cw{position:relative;height:200px}.pw{position:relative;height:180px}.pbg{height:4px;background:#112038;border-radius:2px}.pf{height:100%;border-radius:2px;transition:width .4s}
.fbtn{padding:6px 16px;border-radius:7px;border:none;background:transparent;color:var(--sec);font-size:12px;font-weight:700;cursor:pointer;transition:all .18s;white-space:nowrap}
.fbtn:hover:not(.fon){color:#dce8f8}
.fbtn.fon{background:var(--green);color:#04080f}
/* FAB */
#fab{display:none}
@media(max-width:1023px){
  #fab{display:flex}
  #form-col{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,0);backdrop-filter:blur(0px);display:flex;align-items:flex-end;transform:translateY(100%);pointer-events:none;transition:transform .38s cubic-bezier(.32,.72,0,1),background .38s,backdrop-filter .38s;}
  #form-col.mob-open{transform:translateY(0);background:rgba(0,0,0,.7);backdrop-filter:blur(5px);pointer-events:all;}
  #form-col>div{border-radius:20px 20px 0 0!important;max-height:92vh;overflow-y:auto;width:100%;border-left:none!important;border-right:none!important;border-bottom:none!important;}
  #form-col .mob-handle{display:flex}
}
.mob-handle{display:none;align-items:center;justify-content:space-between;padding:16px 20px 0;margin-bottom:-4px;}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
@keyframes pop{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}.pop{animation:pop .25s cubic-bezier(.34,1.4,.64,1)}

/* ═══════════════════════════════════════════════════════
   BOTTOM NAV (mobile < 768px)
═══════════════════════════════════════════════════════ */
.bottom-nav{display:none}
@media(max-width:767px){
  #topnav{display:none}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .bottom-nav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:250;
    background:rgba(7,16,31,.97);border-top:1px solid rgba(26,48,80,.6);
    backdrop-filter:blur(10px);padding-bottom:env(safe-area-inset-bottom);
  }
  .bn-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 2px 7px;background:transparent;border:none;color:var(--sec);font-size:10px;font-weight:600;cursor:pointer;transition:color .2s;min-height:56px}
  .bn-btn .bn-ic{font-size:19px;line-height:1}
  .bn-btn.active{color:var(--green)}
  #fab{bottom:calc(64px + env(safe-area-inset-bottom) + 14px)!important;right:16px!important}
  .fw{max-height:none}
}

/* ═══════════════════════════════════════════════════════
   FORMULARIO comodo en pantallas pequenas
═══════════════════════════════════════════════════════ */
@media(max-width:767px){
  .inp{padding:12px 14px;font-size:16px}
  .inp-amb{font-size:24px}
  .tp{padding:12px 4px;font-size:13px}
  .mp{padding:10px 4px;font-size:12px}
  .cr{padding:13px 14px}
  .bs{padding:15px;font-size:16px}
  #form-col .ml,#form-col .text-xs{font-size:12px}
}

/* ═══════════════════════════════════════════════════════
   KPIs / mini-stats en mobile
═══════════════════════════════════════════════════════ */
@media(max-width:480px){
  .kpi{padding:13px}
  .hb{padding:18px 16px}
  .hb .text-5xl{font-size:2.1rem}
}

/* ═══════════════════════════════════════════════════════
   TABLAS responsive (tarjetas apiladas en pantallas muy chicas)
═══════════════════════════════════════════════════════ */
@media(max-width:480px){
  .tbl thead{display:none}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl tr{padding:10px 14px;border-bottom:1px solid rgba(26,48,80,.45)}
  .tbl tr:last-child{border-bottom:none}
  .tbl td{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:none;text-align:right!important}
  .tbl td::before{content:attr(data-label);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--sec);font-weight:600;text-align:left}
}