:root{
  --navy:#0A2463;--navy2:#1B3A7A;--navy3:#061440;
  --green:#00A651;--green2:#008C44;--gbg:#E8F8F0;
  --red:#DC2626;--rbg:#FEF2F2;--amber:#D97706;
  --purple:#7C3AED;--pbg:#F5F3FF;--blue:#2563EB;--bbg:#EFF6FF;
  --bg:#EEF2F7;--card:#fff;--text:#1A202C;--muted:#64748B;--brd:#E2E8F0;
  --r:14px;--sh:0 2px 12px rgba(0,0,0,.08);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
.hidden{display:none!important}

/* ── Welcome ──────────────────────────────────── */
#ws{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--navy3),var(--navy),var(--navy2))}
.wc{background:rgba(255,255,255,.97);border-radius:22px;padding:2.5rem 2rem;
  max-width:440px;width:90%;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.wlogo{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-bottom:1.2rem}
.wicon{width:48px;height:48px;background:linear-gradient(135deg,var(--navy),var(--green));
  border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.wtitle{font-size:1.5rem;font-weight:800;color:var(--navy)}
.wtitle span{color:var(--green);font-weight:300}
.wdesc{color:var(--muted);font-size:.88rem;line-height:1.6;margin-bottom:1.5rem;text-align:center}
.wbtns{display:flex;flex-direction:column;gap:.6rem}
.wb{padding:.78rem 1rem;border:none;border-radius:10px;font-size:.9rem;font-weight:600;
  cursor:pointer;transition:transform .15s;display:flex;align-items:center;justify-content:center;gap:.5rem}
.wb:hover{transform:translateY(-1px)}
.wb-navy{background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;box-shadow:0 4px 12px rgba(10,36,99,.3)}
.wb-gray{background:#F1F5F9;color:var(--text);border:1.5px solid var(--brd)}
.wb-amber{background:linear-gradient(135deg,#D97706,#B45309);color:#fff;box-shadow:0 4px 12px rgba(217,119,6,.3)}
.wb-green{background:linear-gradient(135deg,#15803d,var(--green));color:#fff;box-shadow:0 4px 12px rgba(0,166,81,.25)}
.sep{display:flex;align-items:center;gap:.5rem;color:var(--muted);font-size:.74rem;margin:.1rem 0}
.sep::before,.sep::after{content:'';flex:1;height:1px;background:var(--brd)}
.wnote{font-size:.71rem;color:var(--muted);margin-top:.8rem;text-align:center;line-height:1.5}
.gs-panel{background:var(--gbg);border:1.5px solid #86efac;border-radius:11px;padding:1.1rem}
.gs-panel h3{font-size:.9rem;font-weight:700;color:#15803d;margin-bottom:.55rem}
.gs-steps{font-size:.77rem;color:#166534;line-height:1.9;list-style:none}
.gs-steps li::before{content:'→ ';font-weight:700}
.gs-inp{width:100%;padding:.52rem .8rem;border:1.5px solid #86efac;border-radius:8px;font-size:.85rem;outline:none;background:#fff;margin:.75rem 0 .55rem}
.gs-inp:focus{border-color:#15803d}
.gs-row{display:flex;gap:.5rem}
.btn-back{padding:.58rem .85rem;background:#F1F5F9;border:none;border-radius:7px;cursor:pointer;font-size:.84rem}
.btn-go{flex:1;padding:.58rem;background:#15803d;color:#fff;border:none;border-radius:7px;font-size:.86rem;font-weight:700;cursor:pointer}
.btn-go:disabled{background:#94a3b8;cursor:wait}
.gs-msg{font-size:.77rem;margin-top:.45rem;padding:.32rem .6rem;border-radius:6px;display:none}
.gs-msg.ok{background:var(--gbg);color:#15803d;display:block}
.gs-msg.err{background:var(--rbg);color:var(--red);display:block}

/* ── Navbar ───────────────────────────────────── */
.nav{background:linear-gradient(90deg,var(--navy3),var(--navy));display:flex;align-items:center;
  gap:.35rem;padding:0 1.2rem;height:58px;position:sticky;top:0;z-index:100;box-shadow:0 2px 12px rgba(0,0,0,.2)}
.nlogo{display:flex;align-items:center;gap:.5rem;margin-right:auto}
.nicon{width:30px;height:30px;background:linear-gradient(135deg,var(--navy),var(--green));
  border-radius:7px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ntitle{font-size:.92rem;font-weight:700;color:#fff}
.ntitle span{color:var(--green);font-weight:300}
.nfile{font-size:.67rem;background:rgba(255,255,255,.1);color:#94a3b8;padding:.17rem .48rem;
  border-radius:5px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nb{background:transparent;border:none;color:#94a3b8;padding:.38rem .65rem;border-radius:7px;
  cursor:pointer;font-size:.8rem;font-weight:500;transition:all .15s;white-space:nowrap}
.nb:hover,.nb.on{background:rgba(255,255,255,.12);color:#fff}
.nb.on{border-bottom:2px solid var(--green)}
.nsave{background:var(--green);color:#fff;border:none;border-radius:7px;padding:.38rem .78rem;
  cursor:pointer;font-size:.79rem;font-weight:600;white-space:nowrap}
.nsave:hover{background:var(--green2)}.nsave.busy{background:var(--amber)}
.nclose{background:transparent;border:none;color:#64748b;cursor:pointer;font-size:1rem;padding:.28rem;border-radius:5px}
.nclose:hover{color:var(--red)}
.gs-dot{background:rgba(21,128,61,.25);color:#86efac;padding:.17rem .48rem;border-radius:99px;font-size:.69rem;font-weight:600}

/* ── Layout ───────────────────────────────────── */
.page{max-width:1080px;margin:1.5rem auto;padding:0 1.1rem}
.page h2{font-size:1.25rem;font-weight:700;margin-bottom:1rem}

/* ── Range bar ────────────────────────────────── */
.range-bar{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;
  background:var(--card);border-radius:var(--r);padding:.75rem 1.1rem;
  box-shadow:var(--sh);margin-bottom:1.1rem}
.range-label{font-size:.78rem;font-weight:700;color:var(--muted);white-space:nowrap}
.range-presets{display:flex;gap:.35rem;flex-wrap:wrap}
.rpbtn{padding:.32rem .72rem;border:1.5px solid var(--brd);border-radius:99px;
  background:#fff;cursor:pointer;font-size:.78rem;font-weight:600;color:var(--muted);transition:all .15s}
.rpbtn:hover{border-color:var(--navy);color:var(--navy)}
.rpbtn.on{border-color:var(--navy);background:var(--navy);color:#fff}
.range-custom{display:flex;align-items:center;gap:.4rem}
.range-custom input{padding:.3rem .6rem;border:1.5px solid var(--brd);border-radius:7px;font-size:.8rem;outline:none}
.range-custom input:focus{border-color:var(--navy)}
.range-info{font-size:.74rem;color:var(--muted);margin-left:auto;white-space:nowrap}

/* ── KPI cards ────────────────────────────────── */
.kgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:.85rem;margin-bottom:1.2rem}
.kc{background:var(--card);border-radius:var(--r);padding:1.1rem 1.3rem;box-shadow:var(--sh);
  border-left:4px solid transparent;transition:transform .15s}
.kc:hover{transform:translateY(-2px)}
.kc-sal{border-color:var(--blue)}.kc-ent{border-color:var(--green)}.kc-usc{border-color:var(--red)}.kc-aho{border-color:var(--purple)}
.klabel{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:.28rem}
.kval{font-size:1.45rem;font-weight:800}
.kc-sal .kval{color:var(--navy)}.kc-ent .kval{color:var(--green)}.kc-usc .kval{color:var(--red)}.kc-aho .kval{color:var(--purple)}
.ksub{font-size:.68rem;font-weight:600;padding:.11rem .42rem;border-radius:99px;display:inline-block;margin-top:.28rem}
.kc-ent .ksub{background:var(--gbg);color:var(--green2)}.kc-usc .ksub{background:var(--rbg);color:var(--red)}
.kc-aho .ksub{background:var(--pbg);color:var(--purple)}.kc-sal .ksub{background:var(--bbg);color:var(--blue)}

/* ── Charts ───────────────────────────────────── */
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-bottom:1.2rem}
@media(max-width:680px){.cgrid{grid-template-columns:1fr}}
.cc{background:var(--card);border-radius:var(--r);padding:1.2rem;box-shadow:var(--sh)}
.cc h3{font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:.85rem}
.cw{position:relative;height:215px}

/* ── Section cards ────────────────────────────── */
.sc{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;margin-bottom:1.2rem}
.sc-head{display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 1.1rem;border-bottom:1px solid var(--brd);flex-wrap:wrap;gap:.4rem}
.sc-head h3{font-size:.86rem;font-weight:700}
.sc-head a{font-size:.76rem;color:var(--green);cursor:pointer;font-weight:600}

/* ── Data table ───────────────────────────────── */
.dt{width:100%;border-collapse:collapse}
.dt th{padding:.55rem .9rem;text-align:left;font-size:.67rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);font-weight:700;background:#FAFBFC;border-bottom:1.5px solid var(--brd)}
.dt td{padding:.7rem .9rem;border-bottom:1px solid #F1F5F9;font-size:.86rem;vertical-align:middle}
.dt tr:last-child td{border-bottom:none}.dt tr:hover td{background:#FAFBFC}
.pill{display:inline-flex;align-items:center;gap:.28rem;padding:.13rem .52rem;border-radius:99px;font-size:.72rem;font-weight:600}
.badge{display:inline-block;padding:.13rem .48rem;border-radius:99px;font-size:.69rem;font-weight:700}
.be{background:var(--gbg);color:var(--green2)}.bu{background:var(--rbg);color:var(--red)}
.ie{color:var(--green);font-weight:700}.iu{color:var(--red);font-weight:700}
.erow{text-align:center;padding:2.5rem 1rem;color:var(--muted);font-size:.86rem}

/* ── Historial footer ─────────────────────────── */
.hist-footer{padding:.7rem 1.1rem;background:#FAFBFC;border-top:1px solid var(--brd);
  font-size:.8rem;color:var(--muted);display:flex;gap:1.5rem;flex-wrap:wrap}
.hist-footer strong{color:var(--text)}

/* ── Filter bar ───────────────────────────────── */
.filter-bar{padding:1rem 1.1rem}
.filter-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.75rem;margin-bottom:.6rem}
.filter-row:last-child{margin-bottom:0}
.filter-summary{font-size:.76rem;color:var(--muted);padding-top:.5rem;
  border-top:1px solid var(--brd);margin-top:.4rem;min-height:1.2rem}
.btn-reset-filters{padding:.42rem .85rem;background:var(--rbg);color:var(--red);
  border:1.5px solid #FCA5A5;border-radius:7px;cursor:pointer;font-size:.8rem;font-weight:600;white-space:nowrap}
.btn-reset-filters:hover{background:var(--red);color:#fff;border-color:var(--red)}

/* ── Resumen mensual ──────────────────────────── */
.sbar{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;
  background:linear-gradient(90deg,#EFF6FF,#F0FDFA);border-bottom:1px solid var(--brd);padding:.85rem 1.1rem}
.sbar label{font-size:.82rem;font-weight:700;color:var(--navy);white-space:nowrap}
.sinp{width:145px;padding:.42rem .78rem;border:1.5px solid #BFDBFE;border-radius:7px;
  font-size:.92rem;font-weight:700;outline:none;background:#fff;color:var(--navy);text-align:right}
.sinp:focus{border-color:var(--navy)}
.shint{font-size:.72rem;color:var(--muted);margin-left:auto}
.msel{display:flex;gap:.38rem}
.msel select{padding:.26rem .55rem;border:1.5px solid var(--brd);border-radius:6px;font-size:.78rem;outline:none;background:#fff}
.rt{width:100%;border-collapse:collapse}
.rt th{padding:.55rem .9rem;font-size:.67rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);font-weight:700;background:#FAFBFC;border-bottom:1.5px solid var(--brd);text-align:right}
.rt th:first-child{text-align:left}
.rt td{padding:.68rem .9rem;border-bottom:1px solid #F1F5F9;font-size:.86rem;text-align:right;font-variant-numeric:tabular-nums}
.rt td:first-child{text-align:left;vertical-align:middle}
.rt tbody tr:hover td{background:#FAFBFC}
.pinp{width:108px;padding:.3rem .58rem;text-align:right;border:1.5px solid var(--brd);border-radius:6px;font-size:.86rem;outline:none;background:#fff}
.pinp:focus{border-color:var(--navy)}
.rp{color:var(--green);font-weight:700}.rn{color:var(--red);font-weight:700}.rz{color:var(--muted)}
.rt tfoot tr.rtot td{background:#F1F5F9;font-weight:800;font-size:.88rem;border-top:2px solid var(--brd);border-bottom:none;padding:.82rem .9rem}
.rt tfoot tr.rah td{background:linear-gradient(90deg,var(--gbg),#fff);font-weight:800;font-size:.88rem;border-bottom:none;padding:.82rem .9rem;color:var(--green2)}

/* ── Form ─────────────────────────────────────── */
.fw{max-width:560px}
.fs{background:var(--card);border-radius:var(--r);padding:1.65rem;box-shadow:var(--sh)}
.fs h3{font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);margin-bottom:1rem;padding-bottom:.6rem;border-bottom:1px solid var(--brd)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;margin-bottom:.75rem}
.fg{display:flex;flex-direction:column;gap:.22rem}
.fg label{font-size:.74rem;font-weight:700;color:var(--muted)}
.fg input,.fg select{padding:.52rem .82rem;border:1.5px solid var(--brd);border-radius:8px;
  font-size:.9rem;outline:none;transition:border-color .15s;background:#fff;color:var(--text)}
.fg input:focus,.fg select:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(10,36,99,.07)}
.trow{display:flex;gap:.65rem;margin-bottom:.85rem}
.tbtn{flex:1;padding:.62rem;border:2px solid var(--brd);border-radius:9px;
  background:#fff;cursor:pointer;font-size:.84rem;font-weight:600;color:var(--muted);transition:all .15s;text-align:center}
.tbtn.au{border-color:var(--red);background:var(--rbg);color:var(--red)}
.tbtn.ae{border-color:var(--green);background:var(--gbg);color:var(--green2)}
.bsub{width:100%;padding:.72rem;background:linear-gradient(135deg,var(--navy),var(--navy2));
  color:#fff;border:none;border-radius:9px;font-size:.92rem;font-weight:700;cursor:pointer;margin-top:.4rem}
.bsub:hover{opacity:.91}
.bdel{background:transparent;border:1.5px solid #FCA5A5;color:var(--red);
  border-radius:6px;padding:.23rem .58rem;cursor:pointer;font-size:.76rem}
.bdel:hover{background:var(--red);color:#fff;border-color:var(--red)}
.fmsg{margin-top:.5rem;font-size:.8rem;padding:.42rem .72rem;border-radius:7px}
.fmsg.ok{background:var(--gbg);color:var(--green2)}.fmsg.err{background:var(--rbg);color:var(--red)}

/* ── Historial head ───────────────────────────── */
.hhead{display:flex;align-items:flex-start;flex-wrap:wrap;gap:.6rem;margin-bottom:.75rem}
.hhead h2{margin-bottom:0}

/* ── Sub-tabs ─────────────────────────────────── */
.sub-tabs{display:flex;gap:.4rem;margin-bottom:1.1rem;flex-wrap:wrap}
.stab{padding:.48rem 1rem;border:1.5px solid var(--brd);border-radius:8px;
  background:#fff;cursor:pointer;font-size:.84rem;font-weight:600;color:var(--muted);transition:all .15s}
.stab:hover{border-color:var(--navy);color:var(--navy)}
.stab.on{border-color:var(--navy);background:var(--navy);color:#fff}

/* ── Bulk table ───────────────────────────────── */
.bulk-info{background:var(--bbg);border:1.5px solid #BFDBFE;border-radius:10px;
  padding:.7rem 1rem;font-size:.84rem;color:#1D4ED8;margin-bottom:.9rem}
.bt{width:100%;border-collapse:collapse;min-width:780px}
.bt th{padding:.52rem .7rem;text-align:left;font-size:.67rem;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted);font-weight:700;background:#FAFBFC;border-bottom:1.5px solid var(--brd)}
.bt td{padding:.38rem .4rem;border-bottom:1px solid #F1F5F9;vertical-align:middle}
.bt tr:hover td{background:#FAFBFC}
.bt td input,.bt td select{width:100%;padding:.38rem .55rem;border:1.5px solid var(--brd);
  border-radius:7px;font-size:.86rem;outline:none;background:#fff;transition:border-color .15s}
.bt td input:focus,.bt td select:focus{border-color:var(--navy)}
.bt td select.sel-tipo{width:100px}
.bt td input.inp-fecha{width:130px}
.bt td input.inp-imp{width:90px;text-align:right}
.bt td.td-del{width:36px;text-align:center}
.btn-row-del{background:transparent;border:none;cursor:pointer;color:#94a3b8;font-size:1rem}
.btn-row-del:hover{color:var(--red)}
.bulk-actions{display:flex;align-items:center;gap:.6rem;margin-top:.8rem;flex-wrap:wrap}
.btn-add-row{padding:.5rem 1rem;background:var(--gbg);color:var(--green2);
  border:1.5px solid #86efac;border-radius:8px;cursor:pointer;font-size:.86rem;font-weight:700}
.btn-add-row:hover{background:#bbf7d0}
.btn-clear-bulk{padding:.5rem .9rem;background:var(--rbg);color:var(--red);
  border:1.5px solid #FCA5A5;border-radius:8px;cursor:pointer;font-size:.84rem;font-weight:600}
.btn-clear-bulk:hover{background:#fecaca}
.bulk-count{font-size:.82rem;color:var(--muted)}

/* ── Import ───────────────────────────────────── */
.drop-zone{border:2.5px dashed #BFDBFE;border-radius:12px;padding:2.5rem 1.5rem;
  text-align:center;cursor:pointer;transition:all .2s;background:#F8FAFC;margin-bottom:.9rem}
.drop-zone:hover,.drop-zone.drag-over{border-color:var(--navy);background:var(--bbg)}
.drop-icon{font-size:2.2rem;margin-bottom:.6rem}
.drop-zone p{color:var(--muted);font-size:.88rem;line-height:1.6}
.drop-zone strong{color:var(--navy)}
.drop-sub{font-size:.78rem!important;margin-top:.35rem}
.drop-zone code{background:#E2E8F0;padding:.1rem .35rem;border-radius:4px;font-size:.76rem}
.tmpl-row{display:flex;align-items:center;gap:.75rem;margin-bottom:1.1rem;font-size:.83rem;color:var(--muted)}
.btn-tmpl{padding:.42rem .9rem;background:#F1F5F9;border:1.5px solid var(--brd);
  border-radius:7px;cursor:pointer;font-size:.82rem;font-weight:600;color:var(--navy)}
.btn-tmpl:hover{background:var(--bbg);border-color:var(--blue)}
.preview-head{display:flex;align-items:center;justify-content:space-between;
  padding:.8rem 0;margin-bottom:.75rem;flex-wrap:wrap;gap:.5rem}
.preview-head strong{font-size:.92rem}
.row-ok{color:var(--green);font-size:.75rem;font-weight:700}
.row-warn{color:var(--amber);font-size:.75rem;font-weight:700}
.row-err{color:var(--red);font-size:.75rem;font-weight:700}
.row-skip{opacity:.45}
.chk{width:15px;height:15px;cursor:pointer;accent-color:var(--navy)}

/* ── Indicators ───────────────────────────────── */
#si{position:fixed;top:68px;right:1rem;background:var(--green);color:#fff;
  padding:.33rem .75rem;border-radius:7px;font-size:.74rem;font-weight:600;
  opacity:0;transition:opacity .22s;pointer-events:none;z-index:999}
#si.on{opacity:1}#si.err{background:var(--red)}
#toast{position:fixed;bottom:1.2rem;right:1.2rem;background:#1A202C;color:#fff;
  padding:.62rem 1.05rem;border-radius:8px;font-size:.81rem;font-weight:500;
  box-shadow:0 4px 14px rgba(0,0,0,.16);z-index:9999;transform:translateY(55px);transition:transform .22s;pointer-events:none}
#toast.on{transform:translateY(0)}
#lov{position:fixed;inset:0;background:rgba(6,20,64,.62);z-index:9000;display:none;align-items:center;justify-content:center}
#lov.on{display:flex}
.lcard{background:#fff;border-radius:12px;padding:1.6rem 2rem;text-align:center;min-width:220px}
.lcard p{color:var(--muted);font-size:.84rem;margin-top:.45rem}
.spin{font-size:1.7rem;display:inline-block;animation:sp 1s linear infinite;margin-bottom:.5rem}
@keyframes sp{to{transform:rotate(360deg)}}

@media(max-width:560px){
  .frow,.filter-row{grid-template-columns:1fr}
  .kgrid{grid-template-columns:1fr 1fr}
  .nav{padding:0 .65rem}.nb{padding:.35rem .4rem;font-size:.74rem}.ntitle{display:none}
  .sbar{flex-direction:column;align-items:flex-start}.sinp{width:100%}
  .range-bar{gap:.4rem}.rpbtn{font-size:.72rem;padding:.28rem .55rem}
}

/* ── Auth screen ──────────────────────────────────── */
#auth-screen{display:none;min-height:100vh;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--navy3),var(--navy),var(--navy2))}
.auth-tabs{display:flex;gap:.4rem;margin-bottom:1.3rem}
.auth-tab{flex:1;padding:.52rem;border:1.5px solid var(--brd);border-radius:8px;
  background:#F1F5F9;cursor:pointer;font-size:.88rem;font-weight:600;color:var(--muted);transition:all .15s}
.auth-tab.active{border-color:var(--navy);background:var(--navy);color:#fff}
.auth-field{display:flex;flex-direction:column;gap:.22rem;margin-bottom:.75rem}
.auth-field label{font-size:.74rem;font-weight:700;color:var(--muted)}
.auth-field input{padding:.58rem .85rem;border:1.5px solid var(--brd);border-radius:8px;
  font-size:.92rem;outline:none;transition:border-color .15s}
.auth-field input:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(10,36,99,.07)}
.auth-btn{width:100%;padding:.74rem;background:linear-gradient(135deg,var(--navy),var(--navy2));
  color:#fff;border:none;border-radius:9px;font-size:.94rem;font-weight:700;cursor:pointer;
  margin-bottom:.6rem;transition:opacity .15s}
.auth-btn:hover{opacity:.9}
.auth-link{display:block;text-align:center;font-size:.8rem;color:var(--green);
  cursor:pointer;font-weight:600;margin-bottom:.5rem}
.auth-link:hover{text-decoration:underline}
.auth-msg{font-size:.82rem;padding:.42rem .72rem;border-radius:7px;margin-top:.5rem}
.auth-msg.ok  {background:var(--gbg);color:var(--green2)}
.auth-msg.err {background:var(--rbg);color:var(--red)}
.auth-msg.info{background:var(--bbg);color:var(--blue)}
.auth-sep{display:flex;align-items:center;gap:.5rem;color:var(--muted);
  font-size:.74rem;margin:.9rem 0 .5rem}
.auth-sep::before,.auth-sep::after{content:'';flex:1;height:1px;background:var(--brd)}

/* ── Nav profile & logout ─────────────────────────── */
.nusr{width:34px;height:34px;border-radius:50%;flex-shrink:0;overflow:hidden;
  background:linear-gradient(135deg,var(--navy2),var(--green));
  border:2px solid rgba(255,255,255,.25);color:#fff;
  font-size:.78rem;font-weight:800;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .15s}
.nusr:hover{border-color:rgba(255,255,255,.55);transform:scale(1.06)}
.nlogout{background:rgba(220,38,38,.1);border:1.5px solid rgba(220,38,38,.25);
  color:#fca5a5;padding:.38rem .72rem;border-radius:7px;cursor:pointer;
  font-size:.79rem;font-weight:600;white-space:nowrap;transition:all .15s}
.nlogout:hover{background:var(--red);color:#fff;border-color:var(--red)}
@media(max-width:560px){.nlogout span{display:none}}

/* ── Profile Panel ────────────────────────────────── */
#profileOverlay{position:fixed;inset:0;background:rgba(6,20,64,.52);z-index:5000;
  display:flex;justify-content:flex-end;backdrop-filter:blur(3px)}
#profileOverlay.hidden{display:none!important}
.profile-panel{background:#fff;width:100%;max-width:420px;height:100%;overflow-y:auto;
  box-shadow:-6px 0 40px rgba(0,0,0,.18);display:flex;flex-direction:column;
  animation:slideInR .25s ease}
@keyframes slideInR{from{transform:translateX(100%)}to{transform:translateX(0)}}
.profile-header{display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.4rem;border-bottom:1px solid var(--brd);
  background:linear-gradient(90deg,var(--navy3),var(--navy));
  color:#fff;position:sticky;top:0;z-index:1}
.profile-title{font-size:.97rem;font-weight:700}
.profile-close-btn{background:rgba(255,255,255,.15);border:none;color:#fff;
  width:30px;height:30px;border-radius:7px;cursor:pointer;font-size:.95rem;
  display:flex;align-items:center;justify-content:center}
.profile-close-btn:hover{background:rgba(255,255,255,.28)}
.profile-section{padding:1.2rem 1.4rem;border-bottom:1px solid var(--brd)}
.psec-label{font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);margin-bottom:.85rem}
.psec-desc{font-size:.82rem;color:var(--muted);line-height:1.6;margin-bottom:.75rem}
.profile-avatar-row{display:flex;align-items:center;gap:1.1rem}
.profile-avatar{width:72px;height:72px;border-radius:50%;flex-shrink:0;overflow:hidden;
  background:linear-gradient(135deg,var(--navy),var(--green));
  color:#fff;font-size:1.45rem;font-weight:800;
  display:flex;align-items:center;justify-content:center}
.profile-avatar-actions{display:flex;flex-direction:column;gap:.45rem}
.pfield{margin-bottom:.75rem}
.pfield label{display:block;font-size:.72rem;font-weight:700;color:var(--muted);margin-bottom:.22rem}
.pfield-val{font-size:.9rem;color:var(--text);font-weight:500}
.pfield input{width:100%;padding:.52rem .82rem;border:1.5px solid var(--brd);
  border-radius:8px;font-size:.9rem;outline:none;background:#fff}
.pfield input:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(10,36,99,.07)}
.pbtn{padding:.54rem 1rem;background:linear-gradient(135deg,var(--navy),var(--navy2));
  color:#fff;border:none;border-radius:8px;font-size:.86rem;font-weight:600;
  cursor:pointer;margin-top:.3rem;display:inline-flex;align-items:center;gap:.3rem}
.pbtn:hover{opacity:.9}.pbtn:disabled{background:#94a3b8;cursor:wait}
.pbtn-sm{background:#F1F5F9;color:var(--text);border:1.5px solid var(--brd);
  background-image:none;padding:.42rem .85rem;font-size:.82rem}
.pbtn-sm:hover{background:var(--bbg);border-color:var(--navy);color:var(--navy);opacity:1}
.pbtn-del{background:var(--rbg);color:var(--red);border:1.5px solid #FCA5A5;
  background-image:none;padding:.42rem .85rem;font-size:.82rem}
.pbtn-del:hover{background:var(--red);color:#fff;border-color:var(--red);opacity:1}
.profile-msg{font-size:.8rem;padding:.42rem .72rem;border-radius:7px;margin-top:.5rem}
.profile-msg.ok{background:var(--gbg);color:var(--green2)}
.profile-msg.err{background:var(--rbg);color:var(--red)}
.profile-msg.info{background:var(--bbg);color:var(--blue)}
.profile-danger-section{background:#FFF5F5}