@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#172b3c;--muted:#7d8a97;--line:#e7ecf0;--teal:#108478;--bg:#f5f7f9;--nav:#101f2c;--mint:#eaf6f1}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px 'DM Sans',Arial,sans-serif}h1,h2,h3,.brand{font-family:Manrope,Arial,sans-serif}button,input,select{font:inherit}button,a,select{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.55;cursor:wait}button:focus-visible,a:focus-visible{outline:3px solid #61c7b7;outline-offset:3px}a{color:inherit;text-decoration:none}button{border:0}input,select{border:1px solid #dfe5e9;border-radius:7px;background:white;color:var(--ink);padding:11px 12px;min-width:0}input:focus,select:focus{outline:2px solid #b0ded5;border-color:var(--teal)}[hidden]{display:none!important}aside{position:fixed;left:0;top:0;bottom:0;width:238px;background:var(--nav);color:#9dacbb;padding:30px 18px;display:flex;flex-direction:column}.brand{color:white;font-weight:800;font-size:24px;letter-spacing:-1px;display:block;white-space:nowrap}.brand span{color:#49b9a6}.brand:first-letter{color:#49b9a6}.workspace{margin:31px 0 30px;padding:13px 9px;display:flex;align-items:center;gap:10px;background:#192c3b;border:1px solid #2b3b48;border-radius:9px}.workspace-icon{border-radius:6px;background:#304857;padding:9px;font-size:11px;color:#e0eced}.workspace b{font-size:12px;color:#e6ebef}.workspace small{display:block;font-size:10px;margin-top:5px}.nav-label{font-size:10px;letter-spacing:1.5px;display:block;margin:0 12px 13px;color:#708494}nav a{display:flex;align-items:center;gap:12px;padding:13px 15px;margin:4px 0;border-radius:7px;font-size:13px}nav a span{font-size:21px;width:23px}nav a.active{background:#183e40;color:#79d5c3}nav a b{margin-left:auto;background:#25524e;padding:3px 7px;border-radius:5px;font-size:10px}#adminNav{margin-top:29px}.side-bottom{margin-top:auto}.side-help{padding:18px 15px;border:1px solid #2d3c49;border-radius:9px;margin-bottom:19px;font-size:11px}.side-help span{font-size:20px;color:#50bdab;display:block;margin-bottom:10px}.side-help b{color:#c8d6de}.side-help p{line-height:1.7;color:#8195a5;margin:7px 0 0}.profile{display:flex;align-items:center;gap:10px;color:white;width:100%;background:none;padding:13px 6px 0;border-top:1px solid #2b3c48;text-align:left}.profile b{font-size:11px}.profile small{display:block;color:#7e93a5;font-size:10px;margin-top:5px}.profile>span:last-child{margin-left:auto}.avatar{display:inline-grid;place-items:center;width:35px;height:35px;border-radius:50%;background:#e8f0ee;color:#1a7066;font-weight:700;font-size:11px;flex-shrink:0}.main{margin-left:238px}header{height:76px;background:white;border-bottom:1px solid var(--line);padding:0 34px;display:flex;align-items:center;justify-content:space-between;color:#7c8a96;font-size:12px}header>div{display:flex;align-items:center;gap:18px}header strong{color:#273b4b;font-weight:500}.header-icon{font-size:17px}.header-right{gap:9px}.small-avatar{margin-left:18px;width:33px;height:33px}.secure-dot,.dot{display:inline-block;width:6px;height:6px;background:#24a078;border-radius:50%;margin-right:6px}main{padding:30px 34px 0;max-width:1750px;margin:auto}.page-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.eyebrow{font-size:9px;letter-spacing:1.8px;color:var(--teal);font-weight:800}h1{font-size:27px;letter-spacing:-.9px;margin:8px 0 8px;font-weight:800}p{color:var(--muted);line-height:1.6}.page-top p{margin:0;font-size:12px}.primary{background:var(--teal);color:#fff;padding:12px 18px;border-radius:7px;font-weight:600;font-size:12px;box-shadow:0 3px 5px #10847810}.primary:hover{background:#0b7167}.secondary,.icon-button{background:white;border:1px solid #dfe6eb;border-radius:6px;color:#586b79;padding:9px 13px}.icon-button{font-size:18px;padding:7px 12px}.toolbar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);margin-bottom:24px;gap:12px}.tabs button{background:none;padding:15px 2px 17px;margin-right:22px;font-size:12px;color:#82909b}.tabs button.active{border-bottom:2px solid var(--teal);color:var(--teal);font-weight:700}.filters{display:flex;align-items:center;gap:12px;padding-bottom:8px}.filters>span{font-size:11px;color:#7e8b99}.filters select{font-size:11px;padding:8px 25px 8px 12px}.metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:15px;margin-bottom:25px}.metric{background:white;border:1px solid var(--line);border-radius:10px;padding:18px;text-align:left}.metric-top{display:flex;align-items:center;justify-content:space-between;color:#7b8994;font-size:11px}.metric-icon{display:grid;place-items:center;background:#edf3f7;border-radius:7px;width:30px;height:30px;font-size:17px;color:#6b8ca6}.metric-value{font-family:Manrope,Arial;font-size:29px;font-weight:800;margin:13px 0 9px;letter-spacing:-1px}.metric-note{font-size:10px;color:#8d99a4}.metric-note b{color:var(--teal);font-weight:500}.metric:nth-child(2) .metric-icon{background:#e9f7ef;color:#25a477}.metric:nth-child(3) .metric-icon{background:#fff5e7;color:#d99b41}.metric:nth-child(4) .metric-icon{background:#ffedf0;color:#d76d7b}.metric:nth-child(5) .metric-icon{background:#e9f6f5;color:#148f8a}.grid-main{display:grid;grid-template-columns:1.65fr 1fr;gap:22px;margin-bottom:23px}.card{background:white;border:1px solid var(--line);border-radius:10px;overflow:hidden}.card-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid #f0f3f5}.card-head h3{font-size:13px;margin:0 0 5px;font-weight:800}.card-head p{font-size:10px;margin:0}.card-head a,.text-button{color:var(--teal);font-size:11px;background:none;padding:4px}.card-body{padding:22px}.collection{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.collection .amount{font-size:29px;font-weight:800;letter-spacing:-1px;font-family:Manrope}.collection small{display:block;color:var(--muted);font-size:10px;margin-top:6px}.collection .pill{font-size:10px}.bar-chart{height:145px;display:flex;align-items:flex-end;justify-content:space-around;border-bottom:1px solid var(--line);background:repeating-linear-gradient(to top,transparent 0,transparent 35px,#f0f3f5 35px,#f0f3f5 36px);gap:12px;padding:0 10px}.bar-group{height:100%;display:flex;align-items:flex-end;gap:5px;flex:1;position:relative;max-width:60px}.bar{width:50%;border-radius:4px 4px 0 0;background:#1b9485;min-height:0}.bar.pending{background:#dcece8}.bar-group label{position:absolute;bottom:-25px;text-align:center;left:0;right:0;font-size:9px;color:#929ca6}.legend{display:flex;gap:20px;font-size:10px;color:#8998a2;margin-top:42px}.legend i{display:inline-block;width:7px;height:7px;background:#1b9485;border-radius:2px;margin-right:5px}.legend i.light{background:#dcece8}.zone-row{padding:16px 0;border-bottom:1px solid #edf1f4;display:flex;align-items:center;gap:12px}.zone-row:last-child{border:0}.zone-icon{width:37px;height:37px;border:1px solid #dcebe7;background:#f2f8f6;display:grid;place-items:center;color:#3a9888;border-radius:8px;font-size:21px}.zone-row b{font-size:11px}.zone-row small{display:block;font-size:10px;color:#97a2ac;margin-top:5px}.zone-row .zone-count{margin-left:auto;text-align:right}.zone-count b{font-size:13px}.table-toolbar{display:flex;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--line);gap:12px}.search{max-width:320px;width:100%;font-size:11px;background:#fafbfc}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;text-align:left;white-space:nowrap}th{font-size:9px;letter-spacing:.6px;color:#8c99a5;background:#fafbfc;padding:13px 20px;font-weight:600;text-transform:uppercase}td{padding:15px 20px;font-size:11px;border-top:1px solid #edf1f4}td strong{font-size:11px;font-weight:600}td small{display:block;font-size:9px;color:#94a0a9;margin-top:4px}.client-name{display:flex;align-items:center;gap:10px}.client-avatar{width:31px;height:31px;background:#edf2f8;color:#7189a4;border-radius:50%;display:grid;place-items:center;font-size:10px}.pill{display:inline-flex;align-items:center;gap:5px;font-size:9px;padding:5px 8px;border-radius:5px;background:#edf8f2;color:#2f9874;white-space:nowrap}.pill.orange{background:#fff6e7;color:#bc8b3d}.pill.red{background:#fff0f1;color:#c97078}.pill.gray{background:#f0f3f6;color:#83929d}.pill.blue{background:#eef3fa;color:#6483ae}.table-foot{padding:16px 22px;display:flex;justify-content:space-between;color:#9aa4ad;font-size:10px}.empty{padding:42px;text-align:center;color:#8b98a3;font-size:12px}.empty b{display:block;color:var(--ink);margin-bottom:7px}.action-row{display:flex;gap:6px}.action-row button{font-size:10px;padding:6px 9px}.zone-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.zone-card{padding:24px}.zone-card h3{margin:15px 0 8px}.zone-card .zone-icon{width:44px;height:44px}.zone-details{display:grid;grid-template-columns:1fr 1fr;gap:20px;font-size:12px;margin:24px 0}.zone-details small{display:block;color:var(--muted);font-size:10px;margin-bottom:6px}.zone-card button{margin-right:5px}.info{padding:13px 15px;background:#f0f7f5;border:1px solid #d6ebe5;border-radius:7px;color:#5a877c;font-size:11px;line-height:1.6;margin:15px 0}.demo-banner{display:flex;align-items:center;justify-content:space-between;background:#e9f3f1;border:1px solid #d7e9e4;color:#517c70;padding:10px 14px;border-radius:7px;font-size:10px;margin-bottom:24px;gap:15px}.demo-banner button{background:none;color:var(--teal);text-decoration:underline;font-size:10px}footer{padding:28px 0;display:flex;justify-content:space-between;color:#a1acb4;font-size:10px}dialog{border:1px solid #e4e9ed;border-radius:13px;padding:0;max-width:570px;width:calc(100% - 32px);color:var(--ink);box-shadow:0 20px 90px #0d2c3940}dialog::backdrop{background:#0d203873;backdrop-filter:blur(3px)}.modal-head{display:flex;justify-content:space-between;align-items:center;padding:25px 28px;border-bottom:1px solid var(--line)}.modal-head h2{font-size:20px;margin:7px 0 0}#modalBody{padding:22px 28px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.span2{grid-column:span 2}label{display:flex;flex-direction:column;gap:8px;font-size:11px;font-weight:600}label input,label select{width:100%;font-size:12px}label.check{flex-direction:row;align-items:center;margin-top:14px}label.check input{width:auto}.modal-footer{padding:18px 28px;background:#fafcfc;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px}#formError{padding:0 28px;margin:0 0 15px;color:#c46565;font-size:12px}#toast{position:fixed;bottom:24px;right:24px;max-width:450px;z-index:20;background:#183d36;color:white;padding:16px 22px;border-radius:9px;box-shadow:0 6px 30px #102f3322;display:none;font-size:12px;line-height:1.7}#toast.error{background:#85474a}.login-page{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:white}.login-art{background:#112e35;color:white;padding:45px 55px;display:flex;flex-direction:column;overflow:hidden}.login-copy{margin:auto 0;position:relative}.login-copy h1{font-size:44px;line-height:1.25;margin:20px 0}.login-copy p{color:#9eb7b5}.login-art small{color:#789793;font-size:10px}.network-art{height:150px;position:relative;display:flex;align-items:center}.network-art b{font-size:80px;color:#58c2ac;text-shadow:0 0 70px #50bda8}.network-art i{position:absolute;left:0;top:20px;width:120px;height:120px;border:1px solid #2d5c5c;border-radius:50%}.network-art i:nth-child(2){width:220px;height:220px;top:-30px;left:-50px}.network-art i:nth-child(3){width:340px;height:340px;top:-90px;left:-110px}.network-art i:nth-child(4){width:460px;height:460px;top:-150px;left:-170px}.login-form{display:grid;place-items:center;padding:40px}.login-form form{width:100%;max-width:350px}.mini-logo{font-size:40px;color:var(--teal);margin-bottom:23px}.login-form h2{font-size:24px;letter-spacing:-.7px}.login-form p{font-size:12px;margin-bottom:30px}.login-form label{margin-bottom:20px;font-size:12px}.login-form input{padding:13px}.full{width:100%;padding:14px;display:flex;justify-content:space-between}.login-form small{display:block;font-size:10px;color:#98a3ad;text-align:center;margin-top:25px}#loginError{color:#bc6262;margin:12px 0}.section-note{font-size:11px;color:var(--muted);margin-top:15px}@media(min-width:1500px){main{padding:38px 45px 0}.metric{padding:23px}.metric-value{font-size:34px}.card-body{padding:26px}.bar-chart{height:175px}}@media(max-width:1150px){aside{width:205px;padding:25px 13px}.main{margin-left:205px}main{padding:25px 22px 0}.metrics{gap:10px}.metric{padding:13px}.metric-top{font-size:10px}.metric-icon{width:23px;height:23px;font-size:13px}.grid-main{grid-template-columns:1.4fr 1fr}.zone-grid{grid-template-columns:1fr 1fr}.filters>span{display:none}.metric-note{font-size:9px}td,th{padding:13px}}@media(max-width:800px){aside{width:70px;padding:22px 9px}.brand{font-size:0}.brand:first-letter{font-size:30px}.workspace,.nav-label,.side-help,.profile>span:not(.avatar){display:none}nav{margin-top:30px}nav a{font-size:0;padding:12px}nav a span{font-size:23px}nav a b{display:none}.main{margin-left:70px}header{padding:0 20px;height:62px}.header-right>span:not(.avatar){display:none}.metrics{grid-template-columns:repeat(3,1fr)}.grid-main{grid-template-columns:1fr}.page-top{align-items:flex-start;gap:15px}h1{font-size:23px}.page-top p{max-width:270px;font-size:11px}.page-top .primary{white-space:nowrap;font-size:11px}.zone-grid{grid-template-columns:1fr}.login-art{padding:35px}.login-copy h1{font-size:32px}.demo-banner{line-height:1.6}.metric-value{font-size:26px}}@media(max-width:520px){main{padding:22px 14px 0}.metrics{grid-template-columns:1fr 1fr}.page-top{flex-direction:column}.toolbar{align-items:flex-start}.filters{gap:5px}.filters select{max-width:145px}.tabs button{margin-right:0;white-space:nowrap}.card-head{padding:17px}.card-head h3{font-size:12px}.card-body{padding:18px}.table-toolbar{padding:13px}.login-page{grid-template-columns:1fr}.login-art{display:none}.login-form{padding:28px}.form-grid{grid-template-columns:1fr}.span2{grid-column:auto}header>div{gap:10px;font-size:10px}.demo-banner{font-size:9px}.metric-icon{display:none}}
/* Legibilidad reforzada en la versión 1.1 */
:root{--muted:#516576;--ink:#122c40}body{font-size:15px;font-weight:500}.page-top p{font-size:14px;color:#4d6273}.eyebrow,.nav-label{font-size:11px;font-weight:800}.brand{font-size:25px}nav a{font-size:14px;font-weight:700;color:#bbcbd8}.workspace b,.profile b{font-size:13px}.workspace small,.profile small{font-size:11px;color:#b5c5d0}.metric-top{font-size:13px;font-weight:700;color:#435b6b}.metric-note{font-size:12px;color:#536b7a}.metric-value{font-size:32px}.card-head h3{font-size:16px}.card-head p{font-size:12px;color:#526878}th{font-size:11px;color:#456074;font-weight:800}td,td strong{font-size:13px;font-weight:600}td small{font-size:11px;color:#536d7f}.pill{font-size:11px;font-weight:700}.table-foot,.section-note{font-size:12px;color:#526b7d}.info{font-size:12px;color:#315f55;font-weight:600}.filters>span{font-size:12px;color:#516779}.filters select,.search{font-size:13px}.primary,.secondary,.action-row button,.text-button{font-size:13px;font-weight:700}.client-edit{background:none;border:0;color:#116d73;font:700 13px 'DM Sans',Arial;text-align:left;padding:0;text-decoration:underline;text-underline-offset:3px}.client-edit:hover{color:#084647}.cut-date{font-weight:700!important;color:#78542a!important}label{font-size:13px;font-weight:700}label input,label select{font-size:14px;color:#203e51}.zone-row b{font-size:13px}.zone-row small{font-size:12px;color:#546d7d}.zone-details{font-size:14px;font-weight:700}.zone-details small{font-size:12px;color:#526979}.table-toolbar select{font-size:13px}.demo-banner{font-size:12px;color:#315e54}.demo-banner button{font-size:12px}.card-head a{font-size:13px;font-weight:700}.login-form label{font-size:14px}.login-form p{font-size:14px}.login-form small{font-size:12px;color:#526879}input[readonly]{background:#edf2f5;color:#426176}.zone-card .secondary{margin-top:9px}@media(max-width:800px){aside>.brand{font-size:0}aside>.brand:first-letter{font-size:30px}nav a{font-size:0}.metric-top{font-size:12px}.metric-note{font-size:11px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.demo-banner{font-size:11px}.metric{padding:14px}.page-top p{font-size:13px}}

/* Tema claro inspirado en la referencia SmartPON. */
:root{--teal:#2e64ed;--ink:#25344b;--muted:#56667e;--bg:#ffffff;--line:#dce5f4;--mint:#eef4ff}body{background:#f7f9fc;font-family:Poppins,'Segoe UI',Arial,sans-serif;font-size:14px;font-weight:500}h1,h2,h3,.brand,.metric-value{font-family:Poppins,'Segoe UI',Arial,sans-serif}aside{background:white;color:#526680;border-right:1px solid #dce5f4}.brand{color:#2c61dd}.brand span{color:#22b68a}.workspace{background:#f5f8fc;border-color:#dce5f4}.workspace b{color:#29466a}.workspace small{color:#5e718d}.workspace-icon{background:#e5efff;color:#285ac6}nav a{color:#3e587a}nav a.active{background:#eaf1ff;color:#245ad7}nav a b{background:#d4e3ff;color:#245ad7}.nav-label{color:#637b9a}.side-help{background:#f8fbff;border-color:#dce5f4}.side-help b,.side-help p{color:#536987}.side-help span{color:#2f68e8}.profile{color:#304b70;border-color:#dce5f4}.profile small{color:#607697}header{background:#2e64ed;color:white;border:0}header strong{color:white}.header-right .avatar{background:#fff;color:#2e64ed}.secure-dot{background:#6ce2bd}.primary{background:#2e64ed;font-size:13px;box-shadow:none}.primary:hover{background:#2455d4}.secondary{color:#2a5bc7;border-color:#ccdaf2;font-size:13px}.secondary:hover{background:#eff4ff}.icon-button{border-color:#cbdaf3;color:#2d62d5}.eyebrow{color:#2e64ed}.tabs button.active{color:#2e64ed;border-color:#2e64ed}.card{border-color:#dce5f4;box-shadow:0 3px 10px #283d6010;background:white}.card-head{background:#f7f9fc;border-bottom-color:#dce5f4}.metric{padding:0;overflow:hidden;box-shadow:0 3px 10px #283d6015}.metric-top{padding:15px 17px 0;background:#1968c9;color:white;min-height:51px;gap:10px}.metric-icon{background:transparent!important;color:white!important;font-size:22px}.metric-value{padding:3px 17px 14px;margin:0;background:#1968c9;color:white;font-size:31px}.metric-note{padding:12px 17px;background:white;color:#235cbb;font-weight:600;min-height:43px}.metric-note b{color:inherit}.metric:nth-child(2) .metric-top,.metric:nth-child(2) .metric-value{background:#25b830}.metric:nth-child(2) .metric-note{color:#168020}.metric:nth-child(3) .metric-top,.metric:nth-child(3) .metric-value{background:#db2525}.metric:nth-child(3) .metric-note{color:#b62424}.metric:nth-child(4) .metric-top,.metric:nth-child(4) .metric-value{background:#2467ca}.metric:nth-child(5) .metric-top,.metric:nth-child(5) .metric-value{background:#22b68a}.metric:nth-child(5) .metric-note{color:#138465}.metric-top{font-size:12px}th{background:#f1f5fb;color:#3d5878;font-size:11px}td,td strong{font-weight:500;color:#2c405a}.client-edit{color:#285fd3;font-family:Poppins,Arial,sans-serif;font-weight:600}.client-edit:hover{color:#173d8d}.pill{font-size:11px;font-weight:600}.pill:not(.red):not(.gray):not(.orange):not(.blue){background:#eaf8ed;color:#188025}.pill.blue{background:#eaf1ff;color:#2b5bc3}.info{background:#f2f7ff;color:#3f5f8d;border-color:#d7e4fb;font-weight:500;line-height:1.8}.demo-banner{background:#f2f7ff;color:#3e5b85;border-color:#d7e4fb}.demo-banner>div{display:flex;gap:10px}.demo-banner button{color:#2b60d6;white-space:nowrap}.text-button{color:#2e64ed}.zone-icon{background:#edf3ff;border-color:#d8e4fb;color:#2f65db}.avatar{background:#eaf1ff;color:#2f64da}.zone-row small,.card-head p,.section-note,.table-foot{color:#546c8c}.modal-head{background:#f4f7fc}.modal-footer{background:#f7f9fc}.login-art{background:#2e64ed}.login-art .brand{color:white}.login-art .brand span{color:#b9f4df}.login-art .eyebrow,.login-art small,.login-copy p{color:#e0eaff}.login-form .mini-logo{color:#2e64ed}label{font-weight:500;color:#344a65}label input,label select{border-color:#c9d7ed;color:#263e5c;font-family:Poppins,Arial,sans-serif;font-size:13px}.form-separator{border:0;border-top:1px solid #dce5f4;margin:23px 0}.check{line-height:1.7}.side-help{margin-bottom:18px}main{padding-bottom:92px}#accountDock{position:fixed;bottom:0;right:0;z-index:9;background:#fff;border:1px solid #d5e0f3;border-right:0;border-bottom:0;border-radius:10px 0 0 0;padding:13px 22px;display:flex;align-items:center;gap:22px;box-shadow:0 -3px 20px #1f427b12}#accountDock b{display:block;font-size:13px;color:#2d4569}#accountDock small{display:block;font-size:12px;font-weight:600;color:#2a60cf;margin-top:4px}#accountDock .secondary{background:#23b78a;color:white;border-color:#23b78a;font-size:12px;padding:10px 13px}footer{padding-bottom:10px}input:focus,select:focus{outline-color:#bcd0fc;border-color:#5a86ec}#toast{background:#1d5fc5}.cut-date{color:#785420!important}@media(max-width:800px){nav a{font-size:0}.brand{font-size:0}.brand:first-letter{font-size:30px}#accountDock{padding:10px 13px;gap:12px;max-width:calc(100% - 70px)}#accountDock b{font-size:11px}#accountDock small{font-size:10px}#accountDock .secondary{font-size:10px}.metric-top{font-size:12px}.metric-note{font-size:10px}}@media(max-width:520px){.demo-banner{align-items:flex-start;flex-direction:column}.metric-top{padding:12px 12px 0;font-size:11px}.metric-value{padding:5px 12px 12px;font-size:28px}.metric-note{padding:10px 12px}.page-top .primary{font-size:12px}}

.danger{background:#dc2626;color:#fff;border:1px solid #dc2626;border-radius:8px;padding:10px 16px;font-weight:600;cursor:pointer}.danger:hover{background:#b91c1c}.exit-button{width:100%;margin:12px 0}

.pill.red{color:#dc2626;background:#fef2f2}.pill:not(.red):not(.gray):not(.orange):not(.blue){color:#15803d}.action-row .danger{background:#dc2626;color:#fff;border-color:#dc2626}#saveModal.danger{background:#dc2626;border-color:#dc2626}

.wait-panel{display:flex;align-items:center;gap:14px;padding:14px 18px;border:1px solid #c7ddf5;border-radius:12px;background:#f0f7ff;color:#16466d;font-size:14px;margin:12px 0}.wait-panel img{width:54px;height:54px;object-fit:contain}body>.wait-panel{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:10000;box-shadow:0 8px 30px #16375a33;max-width:90vw}.metric-icon svg{width:23px;height:23px}

.header-account{display:flex;align-items:center;gap:12px;background:transparent;color:inherit;padding:4px;border-radius:8px;font-size:13px;font-weight:700}.header-account:hover{background:#ffffff18}.company-logo-slot{display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 38px;border-radius:8px;background:#fff;color:#496998;border:1px solid #dbe6f5;overflow:hidden;font-size:10px}.company-logo-slot img{display:block;width:100%;height:100%;object-fit:contain;padding:2px}

nav a>span:first-child{display:inline-flex;align-items:center;justify-content:center;width:30px;flex:0 0 30px}nav .nav-icon-image{display:block;width:27px;height:27px;object-fit:contain}nav a{min-height:48px}@media(max-width:800px){nav .nav-icon-image{width:26px;height:26px}}

button.client-avatar{border:0;padding:0;cursor:pointer;flex-shrink:0}
button.client-avatar:hover,button.client-avatar:focus-visible{background:#dbeafe;outline:2px solid #2563eb}
.traffic-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.traffic-tabs .selected{background:#2563eb;color:white}
.traffic-totals{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:15px 0}
.traffic-totals>div{padding:16px;background:#f1f5fb;border-radius:10px}
.traffic-totals b,.traffic-totals small{display:block}.traffic-totals b{font-size:20px;margin-top:8px}
.traffic-chart{overflow:auto}.traffic-chart svg{width:100%;min-width:520px;display:block}
.traffic-legend{display:flex;gap:18px;font-size:12px;flex-wrap:wrap}.traffic-legend span:first-child{color:#2563eb}.traffic-legend span:nth-child(2){color:#16a085}.traffic-legend span:last-child{color:#8796aa}
.traffic-loading{display:flex;align-items:center;gap:12px;padding:35px 5px}
@media(max-width:550px){.traffic-totals{grid-template-columns:1fr}.traffic-totals>div{padding:10px}}

button.provider-edit{background:#2563eb;color:white;border:1px solid #2563eb}button.warning{background:#facc15;color:#422006;border:1px solid #eab308}

button.provider-edit{background:#2563eb;color:white;border:1px solid #2563eb}button.warning{background:#facc15;color:#422006;border:1px solid #eab308}

button.provider-edit{background:#2563eb;color:white;border:1px solid #2563eb}button.warning{background:#facc15;color:#422006;border:1px solid #eab308}

/* Uniform actions and responsive zone controls. */
.provider-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.provider-actions button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:36px;min-width:82px;padding:0 12px;border-radius:6px;font:600 12px Poppins,'Segoe UI',Arial,sans-serif;white-space:nowrap;cursor:pointer}
.zone-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px;border-top:1px solid var(--line);padding-top:18px}
.zone-actions .zone-wide{grid-column:1/-1}
.zone-card .zone-actions button{margin:0;width:100%;min-height:42px;padding:10px 12px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:7px;font:600 12px Poppins,'Segoe UI',Arial,sans-serif}
.zone-card{display:flex;flex-direction:column}.zone-card .zone-actions{margin-top:auto}.zone-details{margin-bottom:20px}

.plan-heading-icon{width:28px;height:28px;object-fit:contain;vertical-align:middle;margin-right:8px}

.plan-actions{flex-wrap:nowrap}.plan-actions button{width:82px;flex:0 0 82px}

.plan-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.import-plan-price{width:130px}

.fixed-plan-kind:disabled{background:#edf0f4;color:#657386;border-color:#d5dce5;opacity:1;cursor:default;-webkit-text-fill-color:#657386}
.zone-list{display:flex;flex-direction:column;gap:18px}.zone-horizontal{width:100%;padding:22px 24px;min-width:0}.zone-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.zone-title{display:flex;align-items:center;gap:14px;min-width:0}.zone-title h3{margin:0 0 5px;overflow-wrap:anywhere}.zone-host{font-size:13px;color:#546c8c}.zone-badges{display:flex;gap:8px;flex-wrap:wrap}.zone-connection{display:flex;gap:12px 28px;flex-wrap:wrap;font-size:12px;color:#62758e;margin:16px 0}.zone-connection b{font-weight:600;color:#344a65}.zone-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;padding:17px 0;border-top:1px solid var(--line)}.zone-stats small{display:block;font-size:11px;color:#62758e;margin-bottom:7px}.zone-stats strong{display:block;font-size:13px;color:#263e5c;font-weight:600;overflow-wrap:anywhere}.zone-horizontal .zone-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:0;padding-top:16px}.zone-horizontal .zone-actions button{width:auto;min-height:38px;padding:9px 13px;font-size:12px}.zone-title .zone-icon{flex-shrink:0}
@media(max-width:1200px){.zone-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:600px){.zone-horizontal{padding:18px}.zone-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.zone-horizontal .zone-actions button{flex:1 1 140px}.zone-connection{gap:8px 18px}}

.zone-mikrotik-logo{width:78px;height:42px;object-fit:contain;flex-shrink:0}

.iptv-client-field{display:block;margin:18px 0}.iptv-client-field small{display:block;margin-top:7px;color:#62758e;font-size:12px}

/* SmartPON shares the ISPSMART navigation and the page scroll. */
.smartpon-active .page-top{margin-bottom:16px}
.smartpon-active .toolbar{margin-bottom:16px}
.smartpon-workspace{min-width:0;overflow:hidden}
.smartpon-workspace .card-head{padding:14px 18px}
.smartpon-saved{padding:10px 16px;border-bottom:1px solid #dce5f4;background:#f8faff}
.smartpon-saved small{display:block;color:#546c8c;font-size:11px;line-height:1.6;margin-top:6px}
#savedOlts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px}
#savedOlts p{margin:0}
.smartpon-saved-olt{display:flex;align-items:center;gap:10px;padding:6px 10px;border:1px solid #dce5f4;border-radius:7px;background:white}
.smartpon-saved-olt .secondary{padding:6px 10px;font-size:12px}
.smartpon-frame{display:block;width:100%;height:700px;border:0;background:white}
.smartpon-loading{display:flex;gap:10px;align-items:center;margin:12px 16px;color:#546c8c;font-size:12px}
.smartpon-loading img{width:30px;height:30px;object-fit:contain}
.smartpon-saved-olt>div{min-width:0;max-width:220px}
.smartpon-saved-olt b{overflow-wrap:anywhere}
.smartpon-saved-olt small{margin-top:2px;font-size:10px}
.smartpon-saved-olt{flex-wrap:wrap}
.smartpon-saved-olt .text-button{font-size:11px}

/* Portada publicitaria: cortina limitada al panel azul. */
.login-art{position:relative;isolation:isolate;gap:28px;background:linear-gradient(145deg,#3065ed,#234bc5)}
.login-art:before,.login-art:after{content:"";position:absolute;width:430px;height:430px;border:1px solid #ffffff18;border-radius:50%;right:-220px;bottom:-160px;z-index:-1;pointer-events:none}
.login-art:after{width:600px;height:600px;right:-300px;bottom:-245px}
.login-promo{margin:auto 0;width:100%;min-width:0}.promo-stage{display:grid;overflow:hidden;position:relative}
.promo-slide{grid-area:1/1;padding:24px 0;visibility:hidden;clip-path:inset(0 100% 0 0);background:transparent;z-index:0;pointer-events:none}
.promo-slide.is-active{visibility:visible;clip-path:inset(0);z-index:2}.promo-slide.is-leaving{visibility:visible;clip-path:inset(0);z-index:1}
.promo-slide.is-entering{animation:promo-curtain .85s cubic-bezier(.22,.7,.2,1) both;background:#2b59dc}
@keyframes promo-curtain{from{clip-path:inset(0 100% 0 0);transform:translateX(-18px)}to{clip-path:inset(0);transform:translateX(0)}}
.promo-slide .eyebrow{font-size:11px;line-height:1.8;letter-spacing:1.5px;color:#b9f4df}.promo-slide h1{font-size:clamp(27px,3.1vw,46px);line-height:1.25;color:white;letter-spacing:-1.3px;margin:20px 0}
.promo-slide p{color:#e0eaff;max-width:440px;font-size:15px;line-height:1.8}.promo-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}.promo-tags span{border:1px solid #ffffff35;background:#ffffff10;border-radius:20px;padding:7px 12px;font-size:11px;color:white}
.promo-symbol{font-size:70px;line-height:1.3;color:#79e2cf;margin-top:26px;text-shadow:0 0 45px #89ffe740}.promo-controls{display:flex;align-items:center;justify-content:space-between;margin:10px 0 20px}.promo-dots{display:flex;gap:10px}.promo-dot{width:11px;height:11px;padding:0;border-radius:20px;background:#ffffff55;transition:width .3s,background .3s}.promo-dot[aria-pressed=true]{width:32px;background:#a5f1dc}.promo-pause{width:34px;height:34px;background:#ffffff15;border:1px solid #ffffff40;border-radius:50%;color:white;font-size:14px}
@media(max-width:800px){.login-page{grid-template-columns:1fr}.login-page .login-art{display:flex;padding:25px 28px;gap:10px}.login-art .brand{font-size:24px}.promo-slide{padding:18px 0 6px}.promo-slide h1{font-size:29px}.promo-slide p{font-size:13px}.promo-symbol{display:none}.promo-tags{margin-top:12px}.promo-controls{margin:14px 0 6px}.login-art>small{display:none}.login-form{padding:30px 24px}}
@media(prefers-reduced-motion:reduce){.promo-slide.is-entering{animation:none}.promo-dot{transition:none}}

#accountDock.expiry-warning{background:#fff0f0;border-color:#eaa3a3}#accountDock.expiry-warning b,#accountDock.expiry-warning small{color:#b91c1c}

/* Historial de proveedores: mayor ancho y contenido ajustado al espacio. */
#modal.history-modal{width:calc(100% - 32px);max-width:1050px}
#modal.history-modal .modal-head{padding:17px 22px}
#modal.history-modal .modal-head h2{font-size:18px}
#modal.history-modal #modalBody{padding:16px 22px}
#modal.history-modal .info{font-size:12px;line-height:1.5;padding:10px 12px}
#modal.history-modal #clearProviderHistory{font-size:12px;padding:9px 12px;margin:12px 0}
#modal.history-modal table{table-layout:fixed;white-space:normal}
#modal.history-modal th,#modal.history-modal td{font-size:11px;padding:9px 10px;white-space:normal;overflow-wrap:anywhere;vertical-align:top}
#modal.history-modal th:nth-child(1){width:20%}
#modal.history-modal th:nth-child(2){width:22%}
#modal.history-modal th:nth-child(3){width:40%}
#modal.history-modal th:nth-child(4){width:18%}
@media(max-width:600px){#modal.history-modal .modal-head{padding:13px 15px}#modal.history-modal #modalBody{padding:12px 15px}#modal.history-modal th,#modal.history-modal td{padding:7px 4px;font-size:10px;letter-spacing:0}#modal.history-modal th:nth-child(1){width:23%}#modal.history-modal th:nth-child(2){width:23%}#modal.history-modal th:nth-child(3){width:34%}#modal.history-modal th:nth-child(4){width:20%}}

.vpn-generate{display:flex;align-items:end;gap:16px;flex-wrap:wrap;padding:16px 22px}.vpn-generate label{flex:0 1 300px;min-width:200px}.vpn-generate select,.vpn-generate input{width:100%}.vpn-generate button{flex:none;margin-bottom:0}@media(max-width:640px){.vpn-generate label{flex:1 1 100%}}

#modalBody input:disabled{background:#edf2f5;color:#71808b;border-color:#d7e1e8;opacity:1;cursor:not-allowed;-webkit-text-fill-color:#71808b}