:root{
--bg:#F8FAFC;--card:#FFFFFF;--border:#E2E8F0;--border-soft:#EEF2F7;
--text:#0F172A;--text2:#334155;--muted:#64748B;--faint:#94A3B8;
--primary:#2563EB;--primary-d:#1D4ED8;--primary-soft:#EFF6FF;--ring:rgba(37,99,235,.22);
--ok:#16A34A;--ok-soft:#ECFDF5;--bad:#DC2626;--bad-soft:#FEF2F2;--warn:#D97706;--warn-soft:#FFFBEB;
--amber-bg:#FFFBEB;--amber-bd:#FDE68A;--amber-t:#92400E;
--green-bg:#ECFDF5;--green-t:#166534;--red-bg:#FEF2F2;--red-t:#991B1B;
--blue-bg:#EFF6FF;--blue-t:#1E40AF;--purple-bg:#F5F3FF;--purple-t:#5B21B6;--cyan-bg:#ECFEFF;--cyan-t:#155E75;
--r:14px;--r-sm:10px;
--sh-sm:0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.06);
--sh-md:0 4px 6px -2px rgba(15,23,42,.05),0 12px 24px -8px rgba(15,23,42,.08)}
[data-theme=dark]{
--bg:#0A1120;--card:#111A2E;--border:#1E293B;--border-soft:#16203A;--text:#E2E8F0;--text2:#CBD5E1;
--muted:#94A3B8;--faint:#64748B;--primary-soft:#12244D;--ring:rgba(96,165,250,.3);--sh-sm:0 1px 2px rgba(0,0,0,.3);--sh-md:0 8px 24px -8px rgba(0,0,0,.5);
--amber-bg:#29220A;--amber-bd:#57450E;--amber-t:#FCD34D;
--green-bg:#06281A;--green-t:#4ADE80;--red-bg:#2E0E0E;--red-t:#F87171;
--blue-bg:#0F1F42;--blue-t:#93C5FD;--purple-bg:#1E1440;--purple-t:#C4B5FD;--cyan-bg:#062A30;--cyan-t:#67E8F9}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{font-family:"Inter","Segoe UI",system-ui,Arial,sans-serif;background:var(--bg);color:var(--text);
font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--primary);text-decoration:none}
h1{font-size:20px;font-weight:700;letter-spacing:-.01em}
h2{font-size:14px;font-weight:600;margin:20px 0 10px;color:var(--text)}
::selection{background:var(--primary);color:#fff}

/* ══════════ SHELL ══════════ */
.shell{display:flex;min-height:100vh}
.sidebar{width:250px;flex-shrink:0;position:fixed;top:0;bottom:0;left:0;background:var(--card);
border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:40;transition:transform .22s ease}
.side-head{display:flex;gap:11px;align-items:center;padding:16px 16px;border-bottom:1px solid var(--border-soft)}
.logo{width:38px;height:38px;border-radius:11px;flex-shrink:0;display:grid;place-items:center;font-size:19px;
background:linear-gradient(135deg,#2563EB,#1D4ED8);box-shadow:0 4px 10px -2px rgba(37,99,235,.45);color:#fff}
.side-head b{font-size:14px;font-weight:700;display:block;letter-spacing:-.01em}
.side-head small{font-size:11px;color:var(--muted);line-height:1.3;display:block}
.nav{padding:10px 10px 10px;overflow-y:auto;flex:1}
.nav-group{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
padding:16px 12px 6px;font-weight:600}
.nav-link{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;
color:var(--muted);font-size:13.5px;font-weight:500;margin-bottom:2px;position:relative;transition:all .15s}
.nav-link svg{width:17px;height:17px;stroke-width:1.8;flex-shrink:0}
.nav-link:hover{color:var(--text);background:var(--bg)}
.nav-link.active{background:var(--primary-soft);color:var(--primary);font-weight:600}
.nav-link.active::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;
border-radius:0 3px 3px 0;background:var(--primary)}
.pill{margin-left:auto;background:var(--primary);color:#fff;font-size:10.5px;font-weight:700;
border-radius:999px;padding:1px 8px;box-shadow:0 2px 6px -1px rgba(37,99,235,.5)}
.side-foot{border-top:1px solid var(--border-soft);padding:13px 16px;display:flex;gap:11px;align-items:center}
.avatar{width:36px;height:36px;border-radius:999px;background:linear-gradient(135deg,#DBEAFE,#BFDBFE);
color:#1D4ED8;display:grid;place-items:center;font-weight:700;font-size:13px;flex-shrink:0;
border:2px solid #fff;box-shadow:var(--sh-sm)}
[data-theme=dark] .avatar{background:linear-gradient(135deg,#1E3A8A,#1E40AF);color:#BFDBFE;border-color:var(--border)}
.side-foot b{font-size:13px;display:block}
.side-foot small{font-size:11px;color:var(--muted)}
.side-foot a{margin-left:auto;font-size:12px;color:var(--muted);padding:5px 9px;border-radius:7px;border:1px solid var(--border)}
.side-foot a:hover{color:var(--bad);border-color:var(--bad)}
.backdrop{display:none}
.main{flex:1;min-width:0;margin-left:250px;display:flex;flex-direction:column}
.topbar{height:60px;position:sticky;top:0;z-index:30;background:var(--bg);
border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:0 22px}
.crumbs{font-size:13px;color:var(--faint);display:flex;align-items:center;gap:7px}
.crumbs b{color:var(--text);font-weight:600}
.top-right{margin-left:auto;display:flex;align-items:center;gap:9px}
.icon-btn{width:36px;height:36px;border:1px solid var(--border);background:var(--card);border-radius:9px;
display:grid;place-items:center;cursor:pointer;position:relative;color:var(--muted);transition:all .15s}
.icon-btn:hover{color:var(--text);border-color:#CBD5E1;box-shadow:var(--sh-sm)}
.icon-btn svg{width:17px;height:17px;stroke-width:1.8}
.icon-badge{position:absolute;top:-5px;right:-5px;background:var(--bad);color:#fff;
font-size:10px;font-weight:700;border-radius:999px;padding:1px 6px;box-shadow:0 2px 5px rgba(220,38,38,.5)}
.env{font-size:11.5px;color:var(--muted);padding:6px 12px;border-radius:999px;background:var(--card);
border:1px solid var(--border);display:flex;align-items:center;gap:7px}
.env::before{content:"";width:7px;height:7px;border-radius:99px;background:var(--ok);
box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 18%,transparent)}
.burger{display:none}
.content{padding:26px 24px 48px;max-width:1180px;width:100%;margin:0 auto}

/* ══════════ ESTRUCTURA DE VISTA ══════════ */
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;
flex-wrap:wrap;margin-bottom:20px}
.page-head h1{font-size:21px}
.page-head .sub{color:var(--muted);font-size:13px;margin-top:3px}
.grid{display:grid;gap:16px}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-2-1{grid-template-columns:minmax(0,7fr) minmax(0,3fr);align-items:start}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-sm)}
.card-pad{padding:18px}
.card-title{font-size:14px;font-weight:600;padding:16px 18px 0;display:flex;justify-content:space-between;align-items:center}
.card-title small{color:var(--muted);font-weight:400;font-size:12px}

/* KPIs */
.kpis{margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:17px 18px;
box-shadow:var(--sh-sm);transition:box-shadow .15s,transform .15s}
.kpi:hover{box-shadow:var(--sh-md);transform:translateY(-1px)}
.kpi .k-top{display:flex;justify-content:space-between;align-items:flex-start}
.kpi small{display:block;color:var(--muted);font-size:12.5px;font-weight:500}
.kpi .k-ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
background:var(--bg);color:var(--muted);transition:all .15s}
.kpi .k-ico svg{width:18px;height:18px;stroke-width:1.8}
.kpi b{display:block;font-size:27px;font-weight:800;letter-spacing:-.02em;margin-top:10px;
font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.kpi .k-sub{font-size:12px;color:var(--muted);margin-top:3px}
.kpi.ok b{color:var(--ok)}
.kpi.ok .k-ico{color:var(--ok);background:var(--ok-soft)}
.kpi.good b{color:#15803D}.kpi.good .k-ico{color:var(--ok);background:var(--ok-soft)}
.kpi.bad b{color:var(--bad)}.kpi.bad .k-ico{color:var(--bad);background:var(--bad-soft)}
.kpi.warn b{color:var(--warn)}.kpi.warn .k-ico{color:var(--warn);background:var(--warn-soft)}
.kpi.hl .k-ico{color:var(--primary);background:var(--primary-soft)}

/* banner contextual */
.banner{display:flex;align-items:center;gap:13px;background:var(--amber-bg);
border:1px solid var(--amber-bd);color:var(--amber-t);padding:12px 16px;border-radius:var(--r);
margin-bottom:18px;font-size:13.5px;box-shadow:var(--sh-sm)}
.banner b{font-weight:700}
.banner a{margin-left:auto;white-space:nowrap;background:var(--amber-t);color:#fff;
padding:7px 14px;border-radius:8px;font-size:12.5px;font-weight:600;box-shadow:0 2px 6px -1px rgba(146,64,14,.4)}

/* feed actividad */
.feed{background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-sm)}
.feed-item{display:flex;align-items:center;gap:13px;padding:13px 18px;border-bottom:1px solid var(--border-soft);
transition:background .12s}
a.feed-item:hover{background:var(--bg)}
.feed-item:last-child{border-bottom:0}
.dot{width:9px;height:9px;border-radius:99px;flex-shrink:0;box-shadow:0 0 0 3px currentColor}
.dot.ok{color:var(--ok);background:var(--ok)}
.dot.warn{color:var(--warn);background:var(--warn)}
.dot.bad{color:var(--bad);background:var(--bad)}
.feed-main{flex:1;min-width:0}
.feed-main b{font-weight:600;font-size:14px;display:block;letter-spacing:-.01em}
.feed-main small{color:var(--muted);font-size:12px}
.feed-amt{font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.feed-arrow{color:var(--faint);flex-shrink:0;transition:transform .15s,color .15s}
a.feed-item:hover .feed-arrow{transform:translateX(3px);color:var(--primary)}
.feed-arrow svg{width:17px;height:17px;stroke-width:1.8}

/* widgets */
.widget{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:17px 18px;
margin-bottom:16px;box-shadow:var(--sh-sm)}
.widget h3{font-size:13.5px;font-weight:600;margin-bottom:14px}
.w-row{margin-bottom:13px}
.w-row:last-child{margin-bottom:0}
.w-top{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:6px}
.w-top span{color:var(--muted)}
.w-top b{font-variant-numeric:tabular-nums;font-weight:700}
.bar{height:6px;border-radius:99px;background:var(--border-soft);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#3B82F6,#2563EB);
transition:width .5s ease}
.bar.ok i{background:linear-gradient(90deg,#22C55E,#16A34A)}
.bar.warn i{background:linear-gradient(90deg,#F59E0B,#D97706)}
.bar.bad i{background:linear-gradient(90deg,#EF4444,#DC2626)}
.tasa-big{font-size:24px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tasa-big small{font-size:12px;color:var(--muted);font-weight:500}

/* tablas */
.tabla{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--border);
border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-sm);font-size:13.5px}
.tabla th{background:var(--bg);color:var(--muted);text-align:left;padding:11px 16px;
font-size:11px;text-transform:uppercase;letter-spacing:.07em;font-weight:600;border-bottom:1px solid var(--border)}
.tabla td{padding:12px 16px;border-bottom:1px solid var(--border-soft);vertical-align:middle}
.tabla tbody tr{transition:background .12s}
.tabla tbody tr:hover{background:var(--bg)}
.tabla tbody tr:last-child td{border-bottom:0}
.tabla .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600}
.tabla.detalle th{width:190px}
.tabla a{font-weight:600}
.vacio{text-align:center;color:var(--faint);padding:18px!important;font-size:13px}

/* badges */
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;
font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.badge::before{content:"";width:6px;height:6px;border-radius:99px;background:currentColor}
.badge.activo,.badge.pendiente{background:var(--amber-bg);color:var(--amber-t)}
.badge.pagado,.badge.aprobado{background:var(--green-bg);color:var(--green-t)}
.badge.rechazado,.badge.anulado,.badge.bad{background:var(--red-bg);color:var(--red-t)}
.badge.admin{background:var(--blue-bg);color:var(--blue-t)}
.badge.encargado{background:var(--cyan-bg);color:var(--cyan-t)}
.badge.cobranza{background:var(--purple-bg);color:var(--purple-t)}

/* flashes */
.flash{padding:12px 16px;border-radius:11px;margin:0 0 16px;font-size:13.5px;box-shadow:var(--sh-sm);
display:flex;align-items:center;gap:8px}
.flash.ok{background:var(--green-bg);color:var(--green-t);border:1px solid #BBF7D0}
[data-theme=dark] .flash.ok{border-color:#14532D}
.flash.error{background:var(--red-bg);color:var(--red-t);border:1px solid #FECACA}
[data-theme=dark] .flash.error{border-color:#7F1D1D}
.flash.aviso{background:var(--amber-bg);color:var(--amber-t);border:1px solid var(--amber-bd)}

/* formularios */
form.formcard,form.logincard{background:var(--card);border:1px solid var(--border);border-radius:var(--r);
padding:20px;display:grid;gap:13px;max-width:560px;box-shadow:var(--sh-sm)}
label{display:grid;gap:6px;font-size:12.5px;font-weight:600;color:var(--text2)}
[data-theme=dark] label{color:#CBD5E1}
input,select,textarea{padding:10px 13px;border:1px solid var(--border);border-radius:var(--r-sm);
font-size:14px;width:100%;background:var(--card);color:var(--text);font-family:inherit;transition:all .15s}
input:hover,select:hover{border-color:#CBD5E1}
input:focus,select:focus,textarea:focus{outline:3px solid var(--ring);border-color:var(--primary)}
textarea{resize:vertical}

/* botones */
.btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--primary);color:#fff;
padding:9px 16px;border-radius:var(--r-sm);font-size:13.5px;font-weight:600;border:0;cursor:pointer;
box-shadow:0 3px 8px -2px rgba(37,99,235,.5);transition:all .15s}
.btn-primary:hover{background:var(--primary-d);box-shadow:0 5px 14px -3px rgba(37,99,235,.55);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-primary svg{width:15px;height:15px;stroke-width:2.2}
button,.btn{display:inline-flex;align-items:center;gap:6px;background:var(--card);color:var(--text);
border:1px solid var(--border);padding:8px 14px;border-radius:var(--r-sm);font-size:13px;font-weight:600;
cursor:pointer;transition:all .15s}
button:hover,.btn:hover{border-color:#CBD5E1;box-shadow:var(--sh-sm)}
.btn.wa{background:var(--ok);border-color:var(--ok);color:#fff;box-shadow:0 3px 8px -2px rgba(22,163,74,.45)}
.btn.wa:hover{background:#15803D}
.btn.tg{background:#2A6FB0;border-color:#2A6FB0;color:#fff}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.acciones{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.acciones form{display:inline}

/* utilidades */
.linkbox{background:var(--card);border:1.5px dashed #93C5FD;border-radius:var(--r);padding:16px;margin:14px 0}
.linkrow{display:flex;gap:8px;margin:9px 0}
.linkrow input{font-size:12.5px;color:var(--muted);background:var(--bg)}
.fila-titulo{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.buscador{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.buscador input{max-width:230px}
.resetform{display:flex;gap:5px;align-items:center}
.resetform input{width:140px;padding:7px}
.good{color:var(--ok)}.bad{color:var(--bad)}.sub2,.sub{color:var(--muted);font-size:12.5px}

/* login y portal deudor */
.loginbody{min-height:100vh;display:grid;place-items:center;background:
radial-gradient(1000px 500px at 50% -10%,color-mix(in srgb,var(--primary) 8%,transparent),transparent),var(--bg)}
.logincard{width:min(92vw,380px);text-align:center;border-radius:18px;padding:32px 26px;gap:15px}
.logincard .logo{margin:0 auto;width:52px;height:52px;font-size:26px;border-radius:14px}
.logincard h1{font-size:19px}
.logincard .sub{margin-bottom:2px}
.logincard label{text-align:left}
.logincard button{justify-content:center;background:var(--primary);color:#fff;border-color:var(--primary);
font-size:14.5px;padding:11px;font-weight:600;box-shadow:0 4px 12px -3px rgba(37,99,235,.5)}
.inst-header{text-align:center;padding:24px 8px 8px;line-height:1.5}
.inst-header .logo{margin:0 auto 10px}
.inst-header b{font-size:13px;letter-spacing:.05em;display:block}
.inst-header small{color:var(--muted);font-size:11.5px}
.deudorbody{background:var(--bg)}
.wrap{width:100%}
.wrap.narrow{max-width:580px;margin:0 auto}

/* responsive */
@media(max-width:1024px){
.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-2-1{grid-template-columns:1fr}}
@media(max-width:820px){
.sidebar{transform:translateX(-105%)}
.sidebar.open{transform:none;box-shadow:0 0 0 100vmax rgba(2,6,23,.45)}
.backdrop.show{display:block;position:fixed;inset:0;background:rgba(2,6,23,.45);z-index:35}
.main{margin-left:0}
.burger{display:grid}
.content{padding:18px 14px 36px}
.topbar{padding:0 14px}
.env span{display:none}}
@media(max-width:560px){
.grid-4{grid-template-columns:1fr 1fr;gap:10px}
.kpi{padding:13px 14px}.kpi b{font-size:20px}
.tabla{display:block;overflow-x:auto}
h1{font-size:18px}
.page-head .btn-primary{width:100%;justify-content:center}}