:root{--dk:#0b3d2e;--dk2:#0f5040;--wa:#25d366;--bg:#f3f6f4;--card:#fff;--tx:#1d2b26;--mut:#6b7c75;--ok:#1fa855;--warn:#f59e0b;--bad:#e5484d;--r:14px}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--tx)}
a{color:var(--dk2)}.layout{display:flex;min-height:100vh}
.side{width:230px;background:var(--dk);color:#fff;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;padding:18px 12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;padding:4px 8px 22px}.brand img{width:38px;height:38px;border-radius:10px;background:#fff1}
.brand small{display:block;font-weight:400;color:var(--wa);font-size:12px}
.nav a{display:flex;align-items:center;gap:12px;color:#d6e9e1;text-decoration:none;padding:11px 12px;border-radius:10px;margin:2px 0;font-size:15px}
.nav a.on,.nav a:hover{background:var(--dk2);color:#fff}.nav a.on{box-shadow:inset 3px 0 var(--wa)}.nav .ic{width:22px;text-align:center;font-size:18px}
.badge{background:var(--bad);color:#fff;border-radius:99px;font-size:11px;padding:1px 7px;margin-left:auto}
.side .out{margin-top:auto;background:none;border:1px solid #ffffff33;color:#cfe;padding:9px;border-radius:10px;cursor:pointer}
main{margin-left:230px;flex:1;padding:26px 30px;max-width:1300px}
h1{font-size:24px;margin:0 0 4px}.sub{color:var(--mut);margin:0 0 20px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:18px}
.card{background:var(--card);border-radius:var(--r);padding:18px;box-shadow:0 1px 3px #0b3d2e14,0 6px 18px #0b3d2e0a}
.kpi .l{color:var(--mut);font-size:13px}.kpi .v{font-size:28px;font-weight:700;margin-top:6px}.kpi .v small{font-size:14px;color:var(--mut);font-weight:500}
.kpi.g{border-top:4px solid var(--ok)}.kpi.o{border-top:4px solid var(--warn)}.kpi.r{border-top:4px solid var(--bad)}.kpi.d{border-top:4px solid var(--dk)}
.grid2{display:grid;grid-template-columns:1.4fr 1fr;gap:14px}.card h3{margin:0 0 12px;font-size:16px}
.list .it{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid #eef2f0}.list .it:last-child{border:0}
.dot{width:10px;height:10px;border-radius:50%;flex:none}.verde{background:var(--ok)}.naranja{background:var(--warn)}.rojo{background:var(--bad)}
.pill{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:600}
.p-activo{background:#dcfce7;color:#166534}.p-prueba{background:#e0f2fe;color:#075985}.p-pausado{background:#fef3c7;color:#92400e}.p-baja{background:#fee2e2;color:#991b1b}
.p-ej{background:#fef3c7;color:#92400e}.p-paid{background:#dcfce7;color:#166534}.p-due{background:#fee2e2;color:#991b1b}.p-pend{background:#fef3c7;color:#92400e}
.ccards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}.cc{cursor:pointer;transition:.15s}.cc:hover{transform:translateY(-2px)}
.cc .top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}.cc .nm{font-weight:700}.mut{color:var(--mut);font-size:13px}
.bar{height:9px;background:#e8efeb;border-radius:9px;overflow:hidden;margin:6px 0}.bar>i{display:block;height:100%;border-radius:9px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.sp{flex:1}
.btn{border:0;background:var(--dk);color:#fff;padding:9px 15px;border-radius:10px;cursor:pointer;font-size:14px;text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.btn.wa{background:var(--wa);color:#063}.btn.ghost{background:#e7efeb;color:var(--dk)}.btn.sm{padding:6px 10px;font-size:13px}
table{width:100%;border-collapse:collapse;font-size:14px}th{text-align:left;color:var(--mut);font-weight:600;font-size:12px;text-transform:uppercase;padding:8px}td{padding:10px 8px;border-top:1px solid #eef2f0}
.tl{border-left:2px solid #d5e3dc;margin-left:6px;padding-left:18px}.tl .e{position:relative;padding:0 0 14px}.tl .e:before{content:"";position:absolute;left:-25px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--wa);border:2px solid #fff}
.tl .e.pago:before{background:var(--ok)}.tl .e.plan:before{background:var(--warn)}.tl .e.extra:before{background:var(--dk)}
form.f{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}label{font-size:12px;color:var(--mut);display:flex;flex-direction:column;gap:4px}
input,select{padding:9px;border:1px solid #cfdcd6;border-radius:9px;font-size:14px;background:#fff}
.chart{display:flex;align-items:flex-end;gap:14px;height:190px;padding-top:10px}.chart .m{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end}
.chart .bs{display:flex;gap:3px;align-items:flex-end;height:150px}.chart .bs i{width:14px;border-radius:5px 5px 0 0}.chart .lb{font-size:11px;color:var(--mut)}
.legend{display:flex;gap:14px;font-size:12px;color:var(--mut)}.legend b{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px}
.login{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,var(--dk),#136b51)}.login .card{width:min(360px,92vw);text-align:center}
.login img{width:70px;border-radius:16px;background:var(--dk)}.login input{width:100%;margin:6px 0}.login .btn{width:100%;justify-content:center;margin-top:8px}
.err{color:var(--bad);font-size:13px;min-height:18px}.topm{display:none}.hide-m{}
.modal{position:fixed;inset:0;background:#0007;display:grid;place-items:center;z-index:50;padding:12px}.modal .card{width:min(640px,100%);max-height:90vh;overflow:auto}
@media(max-width:820px){
 .side{inset:auto 0 0 0;width:auto;height:64px;flex-direction:row;padding:0 4px calc(env(safe-area-inset-bottom));z-index:20}
 .side .brand,.side .out{display:none}.nav{display:flex;width:100%;justify-content:space-around}
 .nav a{flex-direction:column;gap:2px;font-size:10.5px;padding:8px 4px;margin:0;position:relative}.nav a.on{box-shadow:inset 0 3px var(--wa)}
 .badge{position:absolute;top:2px;right:2px;font-size:9px;padding:0 5px}
 main{margin:0;padding:14px 14px 84px}.topm{display:flex;align-items:center;gap:10px;background:var(--dk);color:#fff;margin:-14px -14px 14px;padding:12px 14px;font-weight:700}
 .topm img{width:30px;border-radius:8px}.topm button{margin-left:auto;background:none;border:1px solid #fff4;color:#fff;border-radius:8px;padding:5px 9px}
 .cards{grid-template-columns:1fr 1fr;gap:10px}.kpi .v{font-size:22px}.grid2{grid-template-columns:1fr}h1{font-size:20px}
 .hide-m{display:none}table{font-size:13px}.tw{overflow-x:auto}
}
.tabs{display:flex;gap:6px;background:#e3ece8;padding:5px;border-radius:12px;margin:4px 0 12px;max-width:420px}
.tab{flex:1;text-align:center;padding:10px 12px;border-radius:9px;text-decoration:none;color:var(--dk);font-weight:600;font-size:14px;display:flex;justify-content:center;align-items:center;gap:8px}
.tab.on{background:#fff;box-shadow:0 1px 4px #0b3d2e22}.tbadge{background:var(--bad);color:#fff;border-radius:99px;font-size:11px;padding:1px 7px}
@media(max-width:820px){.tabs{max-width:none}}
.p-sec{background:#e7efeb;color:var(--dk2);margin-top:6px}.chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.chip{padding:6px 12px;border-radius:99px;background:#fff;border:1px solid #cfdcd6;color:var(--dk);text-decoration:none;font-size:13px}.chip.on{background:var(--dk);color:#fff;border-color:var(--dk)}
@media(max-width:820px){.chips{flex-wrap:nowrap;overflow-x:auto}.chip{white-space:nowrap}}
.gbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff;border:1px solid #dbe6e1;border-radius:12px;padding:8px 12px;margin:-6px 0 18px;font-size:14px}
.gbar.act{border-color:var(--wa);box-shadow:0 0 0 3px #25d36622}.gbar select{min-width:200px}
@media(max-width:820px){.gbar{position:sticky;top:0;z-index:10;margin:-14px -14px 14px;border-radius:0;border-width:0 0 1px}.gbar select{flex:1;min-width:0}.gbar>.mut{width:100%}}
main{min-width:0}
.gbar{align-items:flex-start}.gl{padding-top:6px;white-space:nowrap}.gchips{display:flex;gap:6px;flex-wrap:wrap;flex:1}.gn{width:100%}
.gchip{--c:var(--dk);display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px;border:1.5px solid #cfdcd6;background:#fff;font-size:13px;color:var(--tx);cursor:pointer;flex-direction:row;user-select:none}
.gchip input{width:15px;height:15px;margin:0;padding:0;accent-color:var(--c)}.gchip i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.gchip.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 12%,#fff);font-weight:600}
.secg{--c:var(--dk);border-left:5px solid var(--c);background:color-mix(in srgb,var(--c) 5%,transparent);border-radius:14px;padding:14px 14px 16px;margin:0 0 20px}
.sech{margin-bottom:12px}.sech h2{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:19px;color:var(--c)}.sech h2 i{width:14px;height:14px;border-radius:4px;background:var(--c)}
.subt{display:flex;flex-wrap:wrap;gap:8px}.subt span{background:#fff;border:1px solid color-mix(in srgb,var(--c) 30%,#fff);border-radius:10px;padding:6px 10px;font-size:13px;color:var(--mut)}.subt b{color:var(--tx);margin-left:3px}
.tot{margin:6px 0 10px;font-size:15px;color:var(--mut)}
@media(max-width:820px){.gchips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}.gchip{white-space:nowrap}.gl{display:none}.secg{padding:10px;margin:0 -4px 16px}.subt span{flex:1 1 45%}}
/* layout v7: fixed full-height sidebar, only content scrolls */
@media(min-width:821px){
 html,body{height:100%;overflow:hidden}
 .layout{height:100vh;min-height:0}
 .side{position:fixed;top:0;bottom:0;height:100vh;overflow-y:auto}
 main{height:100vh;overflow-y:auto;max-width:none;padding-top:0}
 main>*:not(.gbar):not(.topm){max-width:1240px}
 .gbar{position:sticky;top:0;z-index:15;margin:0 -30px 18px;border-radius:0;border-width:0 0 1px;padding:12px 30px;box-shadow:0 2px 8px #0b3d2e12}
}
@media(max-width:820px){
 .topm{position:sticky;top:0;z-index:16;margin-bottom:0}
 .gbar{top:54px;margin:0 -14px 14px}
 main h1{scroll-margin-top:140px}
}
/* v9 sector dropdown */
.gbar{align-items:center;flex-wrap:nowrap}.sdd{position:relative}
.sbtn{display:inline-flex;align-items:center;gap:6px;max-width:min(520px,70vw);padding:8px 14px;border-radius:10px;border:1.5px solid #cfdcd6;background:#fff;font-size:14px;color:var(--tx);cursor:pointer}
.sbtn b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sbtn.act{border-color:var(--wa);box-shadow:0 0 0 3px #25d36626;background:#f2fdf6}.sbtn .car{color:var(--mut)}
.spanel{position:absolute;top:calc(100% + 6px);left:0;z-index:40;width:300px;background:#fff;border-radius:12px;box-shadow:0 10px 30px #0b3d2e33;border:1px solid #dbe6e1;padding:6px}
.slist{max-height:min(320px,55vh);overflow-y:auto}.sdiv{height:1px;background:#eef2f0;margin:4px 0}
.sopt{--c:var(--dk);display:flex;flex-direction:row;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-size:14px;color:var(--tx);cursor:pointer}
.sopt:hover{background:#f3f6f4}.sopt.on{background:color-mix(in srgb,var(--c) 10%,#fff);font-weight:600}.sopt input{width:16px;height:16px;margin:0;accent-color:var(--c)}
.sopt i{width:10px;height:10px;border-radius:50%;background:var(--c);flex:none}.sopt .sn{flex:1}.sopt .sc{color:var(--mut);font-size:12px;background:#eef2f0;border-radius:99px;padding:1px 8px}
.sfoot{display:flex;justify-content:space-between;gap:8px;padding:8px 4px 2px;border-top:1px solid #eef2f0;margin-top:4px}.gn{width:auto}
@media(max-width:820px){.sdd{flex:1;min-width:0}.sbtn{width:100%;max-width:none}.sbtn b{flex:1;text-align:left}
 .spanel{position:fixed;left:10px;right:10px;width:auto;top:120px}.slist{max-height:50vh}.gbar>.gn{display:none}}
.si{font-size:1.05em;line-height:1}.sopt .si{width:20px;text-align:center}
.icopick{grid-column:1/-1;display:flex;flex-direction:column;gap:6px;font-size:12px}.icogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:6px}
.ico{display:block}.ico input{position:absolute;opacity:0;pointer-events:none}.ico span{display:grid;place-items:center;height:40px;border:1.5px solid #cfdcd6;border-radius:10px;font-size:20px;cursor:pointer;background:#fff}
.ico input:checked+span{border-color:var(--wa);background:#eafbf1;box-shadow:0 0 0 3px #25d36633}.ico span:hover{background:#f3f6f4}
.av{border-radius:50%;object-fit:cover;flex:none;background:#fff;border:1px solid #e3ece8;display:inline-block;vertical-align:middle}
.avf{display:inline-grid;place-items:center;border:0;color:#fff;line-height:1}.cc .top{align-items:center}.cc .top .sp{min-width:0}
.nmc{display:flex;align-items:center;gap:10px}.flogo{display:flex;flex-direction:column;align-items:center;gap:6px}.flogo .av{border:3px solid #fff;box-shadow:0 2px 8px #0b3d2e22}.lbtn{display:flex;gap:4px}
.logof{grid-column:1/-1;display:flex;flex-direction:column;gap:6px;font-size:12px}.it .av{margin-right:2px}

.smg{display:flex;flex-direction:column;gap:4px;margin:10px 0;max-height:60vh;overflow-y:auto}.smr{--c:var(--dk);display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;border:1px solid #eef2f0}
.smr i{width:10px;height:10px;border-radius:50%;background:var(--c);flex:none}.smr .sn{flex:1}.smr .sc{color:var(--mut);font-size:12px}.smr.off{background:#f7f8f7}.smr.off .sn{color:var(--mut)}
.p-inact{background:#eceff1;color:#607d8b;font-size:11px}.smr .del{color:#c62828}
.smh{margin:14px 0 2px;font-size:14px;color:var(--mut)}
.offl{display:flex;flex-direction:column;gap:8px;margin-top:12px}.offr{display:flex;align-items:center;gap:12px;padding:12px 14px;border-left:4px solid var(--c)}.offr .nm{font-weight:600}.offr .nm a{color:inherit}
.offn{background:#fff4e5;color:#8a5300;border-radius:8px;padding:8px 12px;margin:8px 0 0;font-size:13px}.btn.del{color:#c62828}