/* ════════════════════════════════════════════════════════════════
   MAXIMPORT ADM — app.css  (estilo JM Tesorería)
   Tema CLARO por defecto + modo OSCURO con body.dark.
   Marca: rojo MAXIMPORT. Sidebar oscuro. Login con video + neón.
   ════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Inter+Tight:ital,wght@0,600;0,700;0,800;1,700;1,800&family=Saira+Condensed:ital,wght@0,800;0,900;1,800;1,900&family=JetBrains+Mono:wght@500;600&display=swap');

:root{
  --bg:#FAFBFC;--card:#fff;--card2:#F6F8FA;
  --bd:#EAEDF1;--bd2:#F1F4F7;
  --text:#1A2232;--text2:#3D4759;--sub:#6B7585;--subtle:#9AA3B2;
  --brand:#D42B1A;--brand2:#B01C0E;--brand-g:rgba(212,43,26,.07);
  --grn:#1A8F4C;--grn-bg:#F2FBF5;--grn-bd:#CDEFD8;
  --amb:#B0760E;--amb-bg:#FEFAF0;--amb-bd:#F6E2B0;
  --err:#D32F2F;--err-bg:#FDF4F4;--err-bd:#F5D2D2;
  --blu:#2563EB;--blu-bg:#EFF6FF;--blu-bd:#BFDBFE;
  --sb:#0E1420;--sb-bd:rgba(255,255,255,.06);--sb-hov:rgba(255,255,255,.045);--sb-act:rgba(212,43,26,.16);
  --f:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fh:'Inter Tight','Inter',sans-serif;
  --fm:'JetBrains Mono','Fira Code',monospace;
  --r:9px;--r-sm:7px;--r-md:13px;--r-lg:18px;
  --sh:0 1px 2px rgba(16,24,40,.03),0 1px 3px rgba(16,24,40,.02);
  --sh-md:0 4px 14px rgba(16,24,40,.06);--sh-lg:0 12px 36px rgba(16,24,40,.10);
  --side-w:240px;--top-h:54px;--dur:.16s;--ease:cubic-bezier(.4,0,.2,1);
  /* alias de compatibilidad (valores LITERALES por tema, para contraste correcto) */
  --tw:#1A2232;--tm:#6B7585;--td:#9AA3B2;--card-br:#EAEDF1;
  --yellow:#B0760E;--blue:#2563EB;--green:#1A8F4C;--red:#D42B1A;
}
body.dark{
  --bg:#0B0F17;--card:#151B26;--card2:#1B222F;
  --bd:#262E3D;--bd2:#1F2735;
  --text:#E8ECF2;--text2:#B8C0CC;--sub:#8A93A3;--subtle:#5E6675;
  --brand:#F1462F;--brand2:#D42B1A;--brand-g:rgba(241,70,47,.10);
  --grn:#3FC97A;--grn-bg:#11261A;--grn-bd:#1F4A33;
  --amb:#E0A23E;--amb-bg:#2A2110;--amb-bd:#4A3A1A;
  --err:#F0656A;--err-bg:#2A1416;--err-bd:#4A2024;
  --blu:#5B9DF5;--blu-bg:#13233D;--blu-bd:#244369;
  --sb:#070A10;--sb-bd:rgba(255,255,255,.05);--sb-hov:rgba(255,255,255,.04);--sb-act:rgba(241,70,47,.16);
  --sh:0 1px 2px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.25);
  --sh-md:0 4px 14px rgba(0,0,0,.4);--sh-lg:0 12px 36px rgba(0,0,0,.5);
  /* alias literales (modo oscuro) */
  --tw:#E8ECF2;--tm:#8A93A3;--td:#5E6675;--card-br:#262E3D;
  --yellow:#E0A23E;--blue:#5B9DF5;--green:#3FC97A;--red:#F1462F;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:13px;}
body{font-family:var(--f);color:var(--text);background:var(--bg);min-height:100vh;overflow:hidden;-webkit-font-smoothing:antialiased;transition:background var(--dur),color var(--dur);}
.hidden{display:none !important;}
svg{display:inline-block;vertical-align:middle;}
::-webkit-scrollbar{width:9px;height:9px;}::-webkit-scrollbar-thumb{background:var(--bd);border-radius:6px;}::-webkit-scrollbar-thumb:hover{background:var(--subtle);}

/* ══════════ LOGIN ══════════ */
#login-screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#0A0B0F;overflow:hidden;
  --lred:#D81E34;--lred2:#B01528;}
#login-screen::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse 620px 360px at 10% -8%,rgba(216,30,52,.13),transparent 64%),radial-gradient(ellipse 420px 320px at 90% 112%,rgba(216,30,52,.06),transparent 64%);
  animation:ambPulse 8s ease-in-out infinite alternate;}
@keyframes ambPulse{0%{opacity:.5}100%{opacity:.85}}
.login-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;background:#0A0B0F;}
.login-ov{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to right,rgba(9,10,14,.28) 0%,rgba(9,10,14,.28) 42%,rgba(9,10,14,.74) 64%,rgba(9,10,14,.92) 100%);}
.login-wrap{position:relative;z-index:2;display:flex;align-items:center;gap:56px;max-width:880px;width:100%;padding:24px;}
.login-brand{flex:1;animation:slideLeft .4s var(--ease) both;}
@keyframes slideLeft{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
/* Badge blanco redondeado con el logo (estilo JM Tesorería) */
.lb-badge{display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:14px;padding:6px 10px;margin-bottom:16px;box-shadow:0 8px 26px rgba(0,0,0,.45);}
.lb-badge img{display:block;height:60px;width:auto;max-width:260px;object-fit:contain;}
.lb-title{font-family:var(--fh);font-size:26px;font-weight:800;color:#fff;letter-spacing:-.01em;line-height:1;}
.lb-title .acc{color:var(--lred);font-weight:800;}
.lb-sub{font-size:12.5px;color:rgba(255,255,255,.36);line-height:1.7;max-width:300px;margin-top:12px;}
.login-card-shell{position:relative;flex-shrink:0;}
.lc-glow{position:absolute;inset:0;border-radius:18px;pointer-events:none;z-index:0;
  box-shadow:0 0 16px 1px rgba(216,30,52,.34),0 0 40px 6px rgba(216,30,52,.14),inset 0 0 0 1px rgba(216,30,52,.4);
  opacity:0;animation:glowBreathe 4.8s ease-in-out infinite alternate;will-change:opacity;}
@keyframes glowBreathe{from{opacity:0}to{opacity:.6}}
.login-card{position:relative;z-index:1;width:352px;background:rgba(255,255,255,.045);border:1px solid rgba(216,30,52,.30);border-radius:18px;overflow:hidden;backdrop-filter:blur(10px);animation:slideRight .4s var(--ease) .05s both;}
@keyframes slideRight{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.lc-bar{height:2px;background:linear-gradient(90deg,transparent,var(--lred) 30%,#F2617A 70%,transparent);}
.lc-body{padding:26px 24px 24px;}
.lc-title{font-family:var(--fh);font-size:20px;font-weight:700;color:#fff;letter-spacing:-.01em;}
.lc-sub{font-size:11.5px;color:rgba(255,255,255,.4);margin:4px 0 18px;}
.lf{margin-bottom:13px;}
.lf label{display:block;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:6px;}
.lf input{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:11px 13px;color:#fff;font-family:var(--f);font-size:13px;outline:none;transition:border var(--dur),box-shadow var(--dur);}
.lf input::placeholder{color:rgba(255,255,255,.25);}
.lf input:focus{border-color:var(--lred);box-shadow:0 0 0 3px rgba(216,30,52,.14);}
.l-btn{width:100%;margin-top:6px;background:var(--lred);color:#fff;border:none;border-radius:10px;padding:12px;font-family:var(--f);font-size:13.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:filter var(--dur),transform .1s;}
.l-btn:hover{filter:brightness(1.08);}.l-btn:active{transform:translateY(1px);}
.l-spin{width:13px;height:13px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:none;}
.l-msg{margin-top:12px;font-size:12px;color:#FCA5A5;min-height:16px;text-align:center;}

/* ══════════ SHELL ══════════ */
#shell{height:100vh;display:flex;flex-direction:column;}
#topbar{height:var(--top-h);background:var(--card);border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:10px;padding:0 16px;flex-shrink:0;box-shadow:var(--sh);z-index:30;}
.top-sep{width:1px;height:22px;background:var(--bd);margin:0 2px;}
.top-badge{font-family:var(--fh);font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--brand);border:1px solid var(--brand);border-radius:5px;padding:2px 6px;}
.top-r{margin-left:auto;display:flex;align-items:center;gap:10px;}
.top-user{font-size:12.5px;font-weight:600;color:var(--text);}
.top-role{font-size:9.5px;font-weight:700;letter-spacing:.06em;color:var(--brand);background:var(--brand-g);border:1px solid var(--brand-g);padding:2px 7px;border-radius:20px;}
.top-time{font-family:var(--fm);font-size:11px;color:var(--sub);}
.sync{font-size:10px;font-weight:600;color:var(--sub);display:flex;align-items:center;gap:4px;}
.sync.ok{color:var(--grn);}.sync.err{color:var(--amb);}
#body{flex:1;display:flex;overflow:hidden;}

/* ── Sidebar (siempre oscuro) ── */
#side{width:var(--side-w);background:var(--sb);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;}
.side-bar{height:2px;background:var(--brand);}
.side-sec{padding:8px 10px;}
.side-lbl{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.28);padding:8px 10px 5px;}
.nav-btn{width:100%;display:flex;align-items:center;gap:10px;background:none;border:none;border-left:2px solid transparent;color:rgba(255,255,255,.55);padding:9px 12px;border-radius:8px;cursor:pointer;font-family:var(--f);font-size:12.5px;font-weight:500;text-align:left;transition:background var(--dur),color var(--dur);}
.nav-btn:hover{background:var(--sb-hov);color:#fff;}
.nav-btn.on{background:var(--sb-act);color:#fff;border-left-color:var(--brand);font-weight:600;}
.nav-btn.disabled{display:none;}
.nav-ic{display:flex;width:17px;height:17px;flex-shrink:0;}
.side-div{height:1px;background:var(--sb-bd);margin:6px 14px;}
.side-ft{margin-top:auto;padding:12px 16px;border-top:1px solid var(--sb-bd);}
.side-ft-txt{font-size:10px;color:rgba(255,255,255,.3);}
.side-sync{font-size:10px;margin-top:4px;font-weight:600;color:rgba(255,255,255,.4);}
.side-sync.ok{color:#3FC97A;}

#main{flex:1;overflow-y:auto;padding:18px 22px;background:var(--bg);}
.page{display:none;animation:fadeIn .2s var(--ease);}
.page.on{display:block;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.pg-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
.pg-title{font-family:var(--fh);font-size:21px;font-weight:700;color:var(--text);letter-spacing:-.01em;}
.pg-sub{font-size:12px;color:var(--sub);margin-top:1px;}

/* ── Botones ── */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--bd);background:var(--card);padding:7px 13px;border-radius:var(--r);cursor:pointer;font-weight:500;font-size:12px;font-family:var(--f);color:var(--text2);white-space:nowrap;transition:background var(--dur),transform .1s,border var(--dur);}
.btn:hover{background:var(--card2);}.btn:active{transform:translateY(1px);}.btn:disabled{opacity:.4;cursor:not-allowed;}
.btn svg{width:14px;height:14px;}
.btn-sm{padding:5px 10px;font-size:11.5px;}
.btn-red{background:var(--brand);border-color:var(--brand);color:#fff;}.btn-red:hover{filter:brightness(1.08);background:var(--brand);}
.btn-ghost{border-color:transparent;background:transparent;color:var(--sub);}.btn-ghost:hover{background:var(--card2);}
.btn-danger{background:var(--err);border-color:var(--err);color:#fff;}.btn-danger:hover{filter:brightness(1.05);}

/* ── Iconos de acción en tablas ── */
.bic{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--bd);background:var(--card);border-radius:var(--r-sm);cursor:pointer;color:var(--sub);transition:all var(--dur);}
.bic:hover{background:var(--card2);color:var(--text);}
.bic svg{width:14px;height:14px;}
.bic.ed:hover{color:var(--blu);border-color:var(--blu-bd);}
.bic.dl:hover{color:var(--err);border-color:var(--err-bd);}
.bic-sm{width:26px;height:24px;font-size:10px;font-weight:700;}
.act-btns{display:flex;gap:4px;align-items:center;flex-wrap:wrap;}

/* ── KPIs ── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:16px;}
.kpi{background:var(--card);border:1px solid var(--bd);border-radius:var(--r-md);padding:14px 16px;position:relative;overflow:hidden;box-shadow:var(--sh);}
.kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;}
.kpi.c-red::before{background:var(--brand);}.kpi.c-yellow::before{background:var(--amb);}.kpi.c-green::before{background:var(--grn);}.kpi.c-blue::before{background:var(--blu);}
.kpi-lbl{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);}
.kpi-val{font-family:var(--fm);font-size:23px;font-weight:600;color:var(--text);line-height:1.1;margin:4px 0 2px;}
.kpi-sub{font-size:10.5px;color:var(--subtle);}

/* ── Charts ── */
.charts-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
.chart-card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r-md);padding:14px 16px;box-shadow:var(--sh);}
.chart-title{font-size:12px;font-weight:600;color:var(--text2);margin-bottom:12px;}
.bar-list{display:flex;flex-direction:column;gap:9px;}
.bar-item{display:flex;flex-direction:column;gap:3px;}
.bar-row{display:flex;justify-content:space-between;font-size:11px;}
.bar-name{color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px;}
.bar-num{color:var(--sub);font-family:var(--fm);}
.bar-track{height:7px;background:var(--card2);border-radius:5px;overflow:hidden;}
.bar-fill{height:100%;background:var(--brand);border-radius:5px;}
.bar-fill.bl{background:var(--blu);}
.donut-wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.donut-legend{display:flex;flex-direction:column;gap:6px;}
.leg-item{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--text2);}
.leg-dot{width:9px;height:9px;border-radius:3px;}

/* ── Tablas ── */
.tbl-wrap{background:var(--card);border:1px solid var(--bd);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh);margin-bottom:12px;}
.tbl-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid var(--bd);background:var(--card2);}
.tbl-title{font-size:12.5px;font-weight:600;color:var(--text);}
.tbl-search{border:1px solid var(--bd);border-radius:var(--r);padding:6px 9px;font-size:11.5px;font-family:var(--f);background:var(--card);color:var(--text);outline:none;}
.tbl-search:focus{border-color:var(--brand);}
table{width:100%;border-collapse:collapse;}
th{background:var(--card2);color:var(--sub);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:8px 10px;border-bottom:1px solid var(--bd);text-align:left;white-space:nowrap;}
td{padding:8px 10px;font-size:12px;border-bottom:1px solid var(--bd2);vertical-align:middle;color:var(--text2);}
tbody tr:hover td{background:var(--brand-g);}
.tbl-empty{text-align:center;color:var(--subtle);padding:26px;font-size:12px;}
.date-range{display:flex;align-items:center;gap:4px;}
.date-sep{color:var(--subtle);font-size:11px;}
.fi[type=date]{color-scheme:light;}
body.dark .fi[type=date]{color-scheme:dark;}

/* ── Badges / estados / chips ── */
.badge{display:inline-block;font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;letter-spacing:.02em;}
.b-f1{background:var(--amb-bg);color:var(--amb);border:1px solid var(--amb-bd);}
.b-f2{background:var(--blu-bg);color:var(--blu);border:1px solid var(--blu-bd);}
.b-f3{background:var(--grn-bg);color:var(--grn);border:1px solid var(--grn-bd);}
.fase-dots{display:flex;gap:3px;}
.fd{width:8px;height:8px;border-radius:50%;background:var(--bd);}
.fd.d1{background:var(--amb);}.fd.d2{background:var(--blu);}.fd.d3{background:var(--grn);}
.chip-warn{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;padding:2px 7px;border-radius:20px;background:var(--amb-bg);color:var(--amb);border:1px solid var(--amb-bd);white-space:nowrap;}
.chip-warn svg{width:11px;height:11px;}
.info-tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--sub);background:var(--card2);border:1px solid var(--bd);padding:4px 9px;border-radius:20px;}

/* ── Loading ── */
.ld{display:flex;align-items:center;justify-content:center;gap:10px;padding:40px;color:var(--sub);font-size:12.5px;}
.ld-ring{width:18px;height:18px;border:2px solid var(--bd);border-top-color:var(--brand);border-radius:50%;animation:spin .7s linear infinite;}
.sp{width:13px;height:13px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:none;}
@keyframes spin{to{transform:rotate(360deg)}}

/* ══════════ MODAL ══════════ */
#mbg{display:none;position:fixed;inset:0;background:rgba(8,10,15,.55);backdrop-filter:blur(3px);z-index:200;align-items:center;justify-content:center;padding:20px;}
#mbg.on{display:flex;}
.modal{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-lg);border-top:3px solid var(--brand);width:100%;max-width:780px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;animation:modalIn .22s var(--ease);}
@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.m-hd{padding:13px 18px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--card2);flex-shrink:0;}
.m-title{font-family:var(--fh);font-size:15px;font-weight:700;color:var(--text);}
.m-close{width:28px;height:28px;border-radius:var(--r);border:1px solid var(--bd);background:transparent;cursor:pointer;color:var(--sub);display:grid;place-items:center;}
.m-close:hover{background:var(--card);color:var(--text);}
.m-body{padding:18px;overflow-y:auto;}
.m-footer{display:flex;align-items:center;gap:8px;justify-content:flex-end;padding-top:14px;margin-top:14px;border-top:1px solid var(--bd);}

/* ── Formularios ── */
.fg{display:flex;flex-direction:column;gap:5px;margin-bottom:10px;}
.fg2{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;margin-bottom:8px;}
.fg2.full{grid-template-columns:1fr;}
.fg.s2{grid-column:span 2;}
.fl{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--sub);}
.fi{border:1px solid var(--bd);border-radius:var(--r);padding:8px 10px;font-size:12.5px;font-family:var(--f);background:var(--card);color:var(--text);outline:none;width:100%;transition:border var(--dur),box-shadow var(--dur);}
.fi:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-g);}
.fi-ro{background:var(--card2);color:var(--sub);}
textarea.fi{resize:vertical;min-height:64px;}
select.fi{cursor:pointer;}
.al{display:none;padding:9px 12px;border-radius:var(--r);font-size:12px;margin-bottom:12px;}
.al.ok{display:block;background:var(--grn-bg);color:var(--grn);border:1px solid var(--grn-bd);}
.al.err{display:block;background:var(--err-bg);color:var(--err);border:1px solid var(--err-bd);}

/* ── Tabs de fases ── */
.ph-tabs{display:flex;gap:6px;margin-bottom:16px;border-bottom:1px solid var(--bd);}
.ph-tab{padding:8px 14px;font-size:12px;font-weight:600;color:var(--sub);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;display:flex;align-items:center;gap:6px;}
.ph-tab:hover{color:var(--text2);}
.ph-tab.on{color:var(--brand);border-bottom-color:var(--brand);}
.ph-tab.done::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--grn);}
.ph-tab.locked{opacity:.4;cursor:not-allowed;}

/* ── PDF widget ── */
.pdf-area{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1.5px dashed var(--bd);border-radius:var(--r);padding:12px;cursor:pointer;background:var(--card2);transition:border var(--dur);}
.pdf-area:hover{border-color:var(--brand);}
.pdf-area input{display:none;}
.pdf-area svg{width:18px;height:18px;color:var(--sub);}
.pdf-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;padding:6px 10px;border:1px solid var(--bd);border-radius:var(--r);background:var(--card);}
.pdf-row.has{border-color:var(--grn-bd);background:var(--grn-bg);}
.pdf-name{font-size:11px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pdf-name.empty{color:var(--subtle);}
.pdf-prog{display:none;height:4px;background:var(--bd);border-radius:3px;margin-top:5px;overflow:hidden;}
.pdf-prog-bar{height:100%;width:0;background:var(--brand);transition:width .3s;}

/* ── Chips de tipos ── */
.tipo-add{display:flex;gap:6px;}
.tipo-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;}
.tipo-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;background:var(--brand-g);color:var(--brand);border:1px solid var(--brand);border-radius:20px;padding:3px 9px;}
.tipo-chip .xc{cursor:pointer;opacity:.7;}.tipo-chip .xc:hover{opacity:1;}
.tipo-sel-wrap{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.tipo-check{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text2);cursor:pointer;padding:7px 10px;border:1px solid var(--bd);border-radius:var(--r);background:var(--card2);}
.tipo-check input{accent-color:var(--brand);width:15px;height:15px;}

/* ── Detalle ── */
.det-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
.det-phase{border:1px solid var(--bd);border-radius:var(--r-md);overflow:hidden;}
.det-ph-hd{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--card2);border-bottom:1px solid var(--bd);font-size:12px;font-weight:700;color:var(--text);}
.det-row{display:flex;flex-direction:column;gap:1px;padding:7px 12px;border-bottom:1px solid var(--bd2);}
.det-lbl{font-size:9.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--subtle);}
.det-val{font-size:12px;color:var(--text);}
.det-val.empty{color:var(--subtle);font-style:italic;}

/* ── Confirmaciones ── */
.conf-msg{text-align:center;font-size:13px;color:var(--text2);line-height:1.7;padding:8px 0 4px;}
.conf-cod{display:inline-block;font-family:var(--fm);font-weight:600;color:var(--brand);font-size:14px;margin:4px 0;}

/* ══════════ VISOR PDF ══════════ */
#pv-bg{display:none;position:fixed;inset:0;background:rgba(8,10,15,.75);z-index:300;align-items:center;justify-content:center;padding:24px;}
#pv-bg.on{display:flex;}
#pv-box{background:var(--card);border-radius:var(--r-lg);width:100%;max-width:900px;height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--sh-lg);border-top:3px solid var(--brand);}
#pv-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 16px;border-bottom:1px solid var(--bd);background:var(--card2);}
#pv-title{font-size:13px;font-weight:600;color:var(--text);}
#pv-frame{flex:1;border:none;width:100%;background:#fff;}

/* ── Banner de sesión ── */
#sess-banner{display:none;}
#sess-banner.warn{display:flex;position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:400;align-items:center;gap:10px;background:var(--amb-bg);color:var(--amb);border:1px solid var(--amb-bd);padding:8px 14px;border-radius:30px;font-size:12px;font-weight:600;box-shadow:var(--sh-md);}

/* ══════════ RESPONSIVE ══════════ */
@media(max-width:900px){
  #side{position:fixed;left:0;top:var(--top-h);bottom:0;z-index:60;transform:translateX(-100%);transition:transform var(--dur);}
  #side.open{transform:none;}
  .charts-row,.det-grid{grid-template-columns:1fr;}
}
@media(max-width:600px){
  .login-wrap{flex-direction:column;gap:26px;}
  .login-brand{text-align:center;}.lb-sub{margin:14px auto 0;}
  .login-card-shell,.login-card{width:100%;max-width:360px;}
  .fg2{grid-template-columns:1fr;}.fg.s2{grid-column:span 1;}
  .tipo-sel-wrap{grid-template-columns:1fr;}
}

/* ── Logo MAXIMPORT (wordmark) ── */
.mxlogo{display:block;}
.mxlogo .mx-word{font-family:'Saira Condensed','Archivo',Impact,'Arial Narrow',sans-serif;font-weight:900;font-style:italic;}

/* ── Giro del icono del botón refrescar ── */
.spin-ic{animation:spin .7s linear infinite;transform-origin:50% 50%;}

/* ════════════════════════════════════════════════════════════════
   REFINAMIENTO v4.2 — pulido profesional (capa aditiva)
   Eleva la percepción de calidad sin cambiar la identidad de marca:
   elevación más fina, tipografía de datos, foco accesible y
   micro-interacciones discretas. Cargar SIEMPRE al final.
   ════════════════════════════════════════════════════════════════ */

:root{
  --sh:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.03);
  --sh-md:0 6px 18px rgba(16,24,40,.07),0 2px 6px rgba(16,24,40,.04);
  --sh-lg:0 18px 48px rgba(16,24,40,.14),0 4px 12px rgba(16,24,40,.06);
  --ring:0 0 0 3px var(--brand-g);
}
body.dark{
  --sh:0 1px 2px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.3);
  --sh-md:0 6px 18px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.3);
  --sh-lg:0 18px 48px rgba(0,0,0,.6),0 4px 12px rgba(0,0,0,.4);
}

/* Foco visible y consistente para teclado (accesibilidad) */
button:focus-visible,a:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,.nav-btn:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-sm);
}

/* Barra superior: leve profundidad y separación más nítida */
#topbar{box-shadow:0 1px 0 var(--bd),0 2px 8px rgba(16,24,40,.04);}
.top-role{border-color:transparent;box-shadow:inset 0 0 0 1px var(--brand-g);}

/* Sidebar: activo con acento y transición del borde */
.nav-btn{transition:background var(--dur),color var(--dur),border-color var(--dur);}
.nav-btn.on{box-shadow:inset 2px 0 0 var(--brand);}

/* Títulos de página con jerarquía tipográfica más marcada */
.pg-title{font-weight:800;letter-spacing:-.02em;}

/* KPIs: elevación al pasar el cursor y cifras alineadas (tabular) */
.kpi{transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur);}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--card-br);}
.kpi::before{height:3px;opacity:.9;}
.kpi-val{font-variant-numeric:tabular-nums;letter-spacing:-.01em;font-weight:700;font-size:24px;}
.kpi-lbl{color:var(--text2);}

/* Tarjetas de gráficos y tablas: mismo lenguaje de elevación */
.chart-card,.tbl-wrap{transition:box-shadow var(--dur) var(--ease),border-color var(--dur);}
.chart-card:hover,.tbl-wrap:hover{box-shadow:var(--sh-md);}
.chart-title{letter-spacing:.01em;text-transform:uppercase;font-size:10.5px;font-weight:700;color:var(--sub);}

/* Barras del dashboard: relleno con leve degradado */
.bar-fill{background:linear-gradient(90deg,var(--brand2),var(--brand));}
.bar-fill.bl{background:linear-gradient(90deg,#1D4FD8,var(--blu));}
.bar-track{background:var(--bd2);}

/* Botón primario: sombra de color sutil y realce en hover */
.btn{transition:background var(--dur),transform .08s,box-shadow var(--dur),border-color var(--dur);}
.btn-red{box-shadow:0 1px 2px rgba(212,43,26,.25),0 2px 8px rgba(212,43,26,.14);}
.btn-red:hover{box-shadow:0 2px 4px rgba(212,43,26,.3),0 6px 16px rgba(212,43,26,.2);}
.btn:not(.btn-ghost):hover{transform:translateY(-1px);}

/* Tablas: encabezado fijo al hacer scroll y filas más legibles */
.tbl-wrap{position:relative;}
thead th{position:sticky;top:0;z-index:2;}
tbody tr{transition:background var(--dur);}
tbody tr:hover td{background:var(--brand-g);}
td{color:var(--text2);}

/* Campos de formulario: foco con anillo coherente */
.fi:focus,.tbl-search:focus{box-shadow:var(--ring);}

/* Badges de estado: un punto de color al frente para lectura rápida */
.badge{display:inline-flex;align-items:center;gap:5px;font-weight:700;}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85;}

/* Modal / visor: un pelín más de aire y borde superior más presente */
.modal,#pv-box{border-top-width:3px;}
.m-title{font-weight:800;letter-spacing:-.01em;}

/* Respeta la preferencia de menos movimiento */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

/* ── Logo real MAXIMPORT (reemplaza el wordmark SVG) ──────────────
   Dos versiones: negra para fondos claros, blanca para el modo oscuro.
   Los slashes rojos se conservan en ambas. */
.mxlogo{height:22px;width:auto;max-width:200px;display:none;}
.mxlogo-light{display:block;}
body.dark .mxlogo-light{display:none;}
body.dark .mxlogo-dark{display:block;}
@media(max-width:600px){ .mxlogo{height:18px;max-width:150px;} }
/* Badge del login: el logo es ancho (wordmark), se ajusta sin deformar */
.lb-badge img{height:auto !important;width:auto !important;max-width:230px;max-height:44px;}

/* ════════════════ TESORERÍA — clases del módulo ════════════════ */
.top-badge{margin-left:10px;padding:3px 9px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.04em;color:var(--brand,#D42B1A);border:1px solid var(--brand,#D42B1A);background:transparent}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:16px}
.rep-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:900px){.rep-grid{grid-template-columns:1fr}}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;align-items:center}
.filters .fi{max-width:190px}
table.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl-scroll{overflow-x:auto}
table.tbl th{text-align:left;padding:8px 10px;border-bottom:2px solid var(--bd,#e6e6e6);color:var(--text2,#667);font-weight:700;white-space:nowrap;position:sticky;top:0;background:var(--card,#fff)}
table.tbl td{padding:8px 10px;border-bottom:1px solid var(--bd,#eee);color:var(--text,#222)}
table.tbl tbody tr:hover td{background:var(--brand-g,#fbeceb)}
table.tbl tr.grp td{background:#1a1a1d;color:#fff;font-weight:800;font-size:11px;letter-spacing:.05em;text-transform:uppercase}
body.dark table.tbl tr.grp td{background:#0c0f16}
table.tbl tr.tot td{font-weight:800;border-top:1px solid var(--bd,#ddd)}
table.tbl tr.sub td{color:var(--text2,#667)}
table.tbl tr.res-ok td{background:#e9f9ef;font-weight:800;color:#0f7a37}
table.tbl tr.res-bad td{background:#fdeceb;font-weight:800;color:#b42318}
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.b-green{background:#e7f8ee;color:#0f7a37}.b-red{background:#fdecea;color:#c0392b}.b-gray{background:#eef1f5;color:#5b6472}
.bars{display:flex;flex-direction:column;gap:8px}
.barline{display:grid;grid-template-columns:70px 1fr 1fr;gap:8px;align-items:center}
.barlbl{font-size:12px;color:var(--text2,#667);font-weight:600}
.barwrap{display:flex;align-items:center;gap:8px}
.bar-track{flex:1;height:14px;background:var(--bd2,#eef1f5);border-radius:7px;overflow:hidden}
.bar-fill{height:100%;background:linear-gradient(90deg,#e2231a,#D42B1A);border-radius:7px}
.bar-fill.bl{background:linear-gradient(90deg,#1D4FD8,#2563eb)}
.barval{font-size:11px;color:var(--text2,#667);white-space:nowrap;min-width:80px}
.fg{margin-bottom:12px}.frow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
@media(max-width:640px){.frow{grid-template-columns:1fr}}
.fl{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--text2,#667);margin-bottom:5px}
.fi{width:100%;padding:9px 11px;border:1px solid var(--bd,#d7dbe0);border-radius:9px;font-size:13px;background:var(--card,#fff);color:var(--text,#111);font-family:inherit}
.fi:focus{outline:none;border-color:var(--brand,#D42B1A);box-shadow:0 0 0 3px var(--brand-g,#fbeceb)}
.hint{font-size:12px;color:var(--text2,#667);background:var(--bd2,#f6f7f9);border-radius:8px;padding:8px 10px;margin:8px 0}
.m-ft{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.ib{background:transparent;border:1px solid var(--bd,#e0e0e0);border-radius:8px;padding:5px;cursor:pointer;color:var(--text2,#667);margin-left:4px}
.ib:hover{border-color:var(--brand,#D42B1A);color:var(--brand,#D42B1A)}
.empty{padding:30px;text-align:center;color:var(--text2,#889)}
.sp{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;vertical-align:middle;visibility:hidden}
.sp.on{visibility:visible;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;right:20px;bottom:20px;z-index:9999;display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:10px;background:#1a1a1d;color:#fff;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.25);transform:translateY(20px);opacity:0;transition:all .25s}
.toast.show{transform:translateY(0);opacity:1}
.toast.ok{background:#0f7a37}.toast.err{background:#c0392b}
code{background:var(--bd2,#f0f0f0);padding:1px 6px;border-radius:5px;font-size:11px}