/* ZonaBilling — estilo ZonaStreaming / CastPanel (claro + oscuro) */
:root{--acc:#1E88E5;--acc2:#1565C0;--dark:#0D1B2A;--top:#2E3134;--bg:#F1F1F1;--card:#FFFFFF;--side:#F8F8F8;--group:#E6E6E6;
--tx:#1F2933;--mut:#5B6670;--line:#D5DCE1;--line2:#E3E8EC;--ok:#1E8A43;--okbtn:#1E9E4A;--okb:#e7f5ec;--warn:#b7700a;--warnb:#fdf3e1;
--bad:#C53030;--badb:#fdecec;--info:#1565C0;--infob:#e6f0fb;--mutb:#eef1f4;--in:#fff;--r:6px;--sh:0 1px 2px rgba(0,0,0,.05)}
[data-theme=dark]{--bg:#0f1722;--card:#162131;--side:#121c2a;--group:#1b2738;--top:#0a111b;--dark:#0a111b;--tx:#e3e8f0;--mut:#93a0b4;
--line:#26344a;--line2:#1f2c3f;--okb:#12301f;--warnb:#3a2a0c;--badb:#3b1616;--infob:#13284a;--mutb:#1b2637;--in:#0f1825;--sh:none}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font:14px/1.5 "Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--tx)}
a{color:var(--acc2);text-decoration:none}a:hover{text-decoration:underline}[data-theme=dark] a{color:#5aa6e0}
h1{font-size:24px;font-weight:600;margin:0}h2{font-size:16px;font-weight:700;margin:0 0 12px}h3{font-size:14.5px;margin:0 0 8px}
.ico{width:17px;height:17px;flex:0 0 17px;vertical-align:-3px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ── ÁREA DE CLIENTES (cabecera + barra de menú, como el portal de clientes) ── */
.hdr{background:var(--card);border-bottom:1px solid var(--line2)}
.hdr .in{max-width:1170px;margin:auto;display:flex;align-items:center;gap:16px;padding:12px 16px}
.hdr .logo img{max-height:44px;display:block}.hdr .logo b{font-size:20px;color:var(--tx)}
.hdr .sp{flex:1}.hdr .tl{display:flex;align-items:center;gap:16px;font-size:13px}.hdr .tl a{color:var(--mut)}
.btn-cart{background:var(--dark);color:#fff!important;padding:8px 16px;border-radius:4px;font-weight:700;font-size:13px;display:inline-flex;gap:7px;align-items:center}
.mnav{background:var(--dark)}.mnav .in{max-width:1170px;margin:auto;display:flex;align-items:stretch;padding:0 8px;flex-wrap:wrap}
.mnav .it{position:relative}.mnav .it>a{display:flex;align-items:center;gap:6px;color:#fff;padding:11px 12px;font-size:14px;text-decoration:none}
.mnav .it>a:hover,.mnav .it.on>a{background:rgba(255,255,255,.1)}.mnav .sp{flex:1}
.mnav .dd{display:none;position:absolute;top:100%;left:0;min-width:210px;background:var(--card);border:1px solid var(--line);border-radius:0 0 6px 6px;box-shadow:0 8px 24px rgba(0,0,0,.15);z-index:40;padding:6px 0}
.mnav .it.r .dd{left:auto;right:0}.mnav .it:hover .dd,.mnav .it:focus-within .dd{display:block}
.mnav .dd a{display:flex;gap:9px;align-items:center;padding:8px 16px;color:var(--tx);font-size:13.5px}.mnav .dd a:hover{background:var(--side);text-decoration:none;color:var(--acc)}
.mnav .caret{border:4px solid transparent;border-top-color:currentColor;margin-top:4px}
.cwrap{max-width:1170px;margin:auto;padding:24px 16px 40px;display:flex;gap:24px;align-items:flex-start}
.cwrap .cside{width:250px;flex:0 0 250px}.cwrap .cmain{flex:1;min-width:0}
.ptitle{border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:18px;display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.ptitle h1{color:var(--acc2);font-weight:400;font-size:28px}[data-theme=dark] .ptitle h1{color:#6fb4ec}.ptitle .sub{color:var(--mut);font-size:15px}.ptitle .sp{flex:1}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:18px;overflow:hidden;box-shadow:var(--sh)}
.panel .ph{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--side);border-bottom:1px solid var(--line);font-weight:700;font-size:14px}
.panel .pb{padding:14px}.panel .lst a{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line2);color:var(--tx);font-size:13.5px}
.panel .lst a:last-child{border-bottom:0}.panel .lst a:hover{background:var(--side);text-decoration:none}
.panel .lst a.on{background:var(--top);color:#fff;font-weight:600}.panel .lst a .n{margin-left:auto;background:var(--mutb);color:var(--mut);border-radius:10px;padding:0 8px;font-size:12px}
.panel .pf{padding:10px 14px;border-top:1px solid var(--line2);background:var(--side)}
.cfoot{border-top:1px solid var(--line);background:var(--card);color:var(--mut);font-size:12px}.cfoot .in{max-width:1170px;margin:auto;padding:22px 16px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden;margin-bottom:20px}
.tile{padding:18px;border-right:1px solid var(--line);position:relative;color:var(--tx)!important;text-decoration:none!important}.tile:last-child{border-right:0}
.tile:hover{background:var(--side)}.tile .ti{position:absolute;right:16px;top:16px;opacity:.25}.tile .ti .ico{width:34px;height:34px}
.tile .v{font-size:34px;font-weight:300;line-height:1.1}.tile .l{color:var(--mut);font-size:13px;text-transform:uppercase;letter-spacing:.03em}
.tile .bar{position:absolute;left:0;right:0;bottom:0;height:4px}.b1{background:#29b6f6}.b2{background:#26a65b}.b3{background:#e74c3c}.b4{background:#f1c40f}

/* ── ADMIN (barra superior oscura + menú lateral claro por grupos, estilo CastPanel) ── */
.awrap{display:flex;min-height:calc(100vh - 54px)}
.atop{height:54px;background:var(--top);color:#fff;display:flex;align-items:center;gap:14px;padding:0 16px;position:sticky;top:0;z-index:30}
.atop .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;color:#fff;min-width:214px}.atop .logo img{max-height:34px}
.atop .logo .dot{width:30px;height:30px;border-radius:6px;background:var(--acc);display:grid;place-items:center}
.atop form{flex:1;max-width:420px}.atop input{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);color:#fff}
.atop input::placeholder{color:#b8c0c8}.atop .sp{flex:1}.atop a,.atop .who{color:#e6e9ec;font-size:13px}.atop .tb{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:5px}
.atop .tb:hover{background:rgba(255,255,255,.1);text-decoration:none}
.aside{width:230px;flex:0 0 230px;background:var(--side);border-right:1px solid var(--line);position:sticky;top:54px;height:calc(100vh - 54px);overflow-y:auto}
.aside .grp{display:flex;align-items:center;gap:7px;background:var(--group);padding:7px 12px;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--mut);border-bottom:1px solid var(--line);margin-top:2px}.aside .grp .ico{width:14px;height:14px}
.aside .grp .ico{color:var(--acc)}
.aside a{display:flex;align-items:center;gap:9px;padding:6px 14px 6px 16px;color:var(--tx);font-size:13px;line-height:1.35}
.aside a:hover{background:var(--card);text-decoration:none}.aside a .ico{width:15px;height:15px;color:var(--mut)}
.aside a.on{background:var(--card);color:var(--acc2);font-weight:700;box-shadow:inset 3px 0 0 var(--acc)}.aside a.on .ico{color:var(--acc)}
.aside a .n{margin-left:auto;background:var(--bad);color:#fff;border-radius:10px;padding:0 7px;font-size:11px;font-weight:700}
.amain{flex:1;min-width:0;padding:20px 24px 40px}
.crumb{display:flex;align-items:center;gap:8px;margin-bottom:16px;font-weight:600}.crumb .ico{color:var(--acc)}
.box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:18px;box-shadow:var(--sh)}
.box>.bh{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--line);font-weight:700;font-size:15px}.box>.bh .sp{flex:1}
.box>.bb{padding:18px}.box.p0>.bb{padding:0}.box .bf{padding:12px 18px;border-top:1px solid var(--line2);background:var(--side);display:flex;gap:8px;flex-wrap:wrap}
.burger{display:none;background:none;border:0;color:#fff;cursor:pointer;padding:4px}

/* ── Comunes ── */
.grid{display:grid;gap:16px}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{display:flex;gap:14px;align-items:center;padding:16px 18px}.stat .i{width:46px;height:46px;border-radius:8px;display:grid;place-items:center;background:var(--infob);color:var(--acc)}
.stat .v{font-size:22px;font-weight:700}.stat .l{color:var(--mut);font-size:12.5px}.stat.ok .i{background:var(--okb);color:var(--ok)}.stat.warn .i{background:var(--warnb);color:var(--warn)}.stat.bad .i{background:var(--badb);color:var(--bad)}
.tbl{width:100%;border-collapse:collapse}.tbl th,.tbl td{padding:10px 14px;border-bottom:1px solid var(--line2);text-align:left;vertical-align:middle}
.tbl th{font-size:12.5px;color:var(--mut);font-weight:700;background:var(--side);border-bottom:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:0}.tbl tbody tr:hover td,.tbl tr:hover td{background:rgba(30,136,229,.04)}.tbl .r{text-align:right}.tbl .c{text-align:center}
.tscroll{overflow-x:auto}.empty{padding:34px;text-align:center;color:var(--mut)}
.badge{display:inline-block;padding:2px 9px;border-radius:3px;font-size:11.5px;font-weight:700;white-space:nowrap;text-transform:uppercase;letter-spacing:.02em}
.badge.ok{background:var(--okb);color:var(--ok)}.badge.warn{background:var(--warnb);color:var(--warn)}.badge.bad{background:var(--badb);color:var(--bad)}.badge.info{background:var(--infob);color:var(--info)}.badge.mut{background:var(--mutb);color:var(--mut)}
label{display:block;font-size:13px;color:var(--tx);margin:0 0 4px;font-weight:700}
.f{margin-bottom:12px}.f .hint{font-size:12px;color:var(--mut);margin-top:3px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=url],input[type=tel],input[type=search],select,textarea{
width:100%;padding:8px 11px;border:1px solid var(--line);border-radius:4px;background:var(--in);color:var(--tx);font:inherit;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(30,136,229,.15)}
textarea{min-height:110px;resize:vertical}.chk{display:flex;gap:8px;align-items:center;font-weight:600;color:var(--tx);font-size:13.5px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}.row>*{flex:1;min-width:150px}
.btn{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:4px;border:1px solid var(--line);background:var(--card);color:var(--tx)!important;font:inherit;font-weight:700;font-size:13.5px;cursor:pointer;white-space:nowrap;text-decoration:none!important}
.btn:hover{border-color:var(--acc);color:var(--acc)!important}.btn.pri{background:var(--acc);border-color:var(--acc);color:#fff!important}.btn.pri:hover{background:var(--acc2);border-color:var(--acc2)}
.btn.ok{background:var(--okbtn);border-color:var(--okbtn);color:#fff!important}.btn.ok:hover{filter:brightness(.95)}
.btn.dk{background:var(--dark);border-color:var(--dark);color:#fff!important}.btn.bad{color:var(--bad)!important;border-color:rgba(197,48,48,.35)}.btn.bad:hover{background:var(--badb)}
.btn.sm{padding:4px 10px;font-size:12.5px}.btn.lg{padding:10px 20px;font-size:15px}.btn.w{width:100%;justify-content:center}.btn:disabled{opacity:.55;cursor:not-allowed}
.acts{display:flex;gap:6px;flex-wrap:wrap}
.alert{padding:11px 14px;border-radius:4px;margin-bottom:14px;border:1px solid;font-size:13.5px}
.alert.ok{background:var(--okb);border-color:rgba(30,138,67,.3);color:var(--ok)}.alert.bad{background:var(--badb);border-color:rgba(197,48,48,.3);color:var(--bad)}
.alert.warn{background:var(--warnb);border-color:rgba(183,112,10,.3);color:var(--warn)}.alert.info{background:var(--infob);border-color:rgba(21,101,192,.25);color:var(--info)}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}
.tabs a{padding:9px 14px;color:var(--mut);border:1px solid transparent;border-bottom:0;border-radius:4px 4px 0 0;font-weight:700;white-space:nowrap;margin-bottom:-1px}
.tabs a.on{color:var(--tx);background:var(--card);border-color:var(--line)}.tabs a:hover{text-decoration:none;color:var(--acc2)}
.dl{display:grid;grid-template-columns:160px 1fr;gap:8px 14px;font-size:13.5px}.dl dt{color:var(--mut);font-weight:600}.dl dd{margin:0;word-break:break-word}
/* login */
.auth{min-height:100vh;display:grid;place-items:center;padding:20px;background:var(--dark)}
.auth .box2{width:100%;max-width:400px;background:rgba(22,36,64,.94);color:#e8eef6;border-radius:6px;padding:30px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.auth .lg{text-align:center;margin-bottom:18px}.auth .lg img{max-height:54px}.auth h1{text-align:center;margin-bottom:4px;font-size:20px;color:#fff}
.auth .sub{text-align:center;color:#9fb2c8;margin-bottom:18px}.auth label{color:#cfdbe8}
.auth input{background:#E8F0FE;color:#1F2933;border-color:#c9d6ea}.auth .links{display:flex;justify-content:space-between;margin-top:14px;font-size:13px}.auth .links a{color:#5aa6e0}
.auth .btn.pri{background:#2F6FA8;border-color:#2F6FA8}
/* tienda */
.plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.plan{background:var(--card);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;box-shadow:var(--sh)}
.plan .pn{padding:12px 16px;background:var(--side);border-bottom:1px solid var(--line);font-weight:800;text-transform:uppercase;font-size:14px;letter-spacing:.02em}
.plan .pbd{display:flex;gap:12px;padding:14px 16px;flex:1}.plan ul{margin:0;padding-left:16px;font-size:12.5px;flex:1;color:var(--tx)}
.plan .pp{text-align:center;min-width:120px;font-size:12px;color:var(--mut)}.plan .pr{font-size:22px;font-weight:700;color:var(--tx)}
.plan .pf2{padding:0 16px 14px;display:flex;flex-direction:column;gap:8px}
/* factura */
.inv{background:#fff;color:#1f2933;border-radius:6px;padding:34px;border:1px solid var(--line)}.inv .head{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.inv .tt{font-size:26px;font-weight:800}.inv .tbl th{background:#f3f5f7;color:#5b6670}.inv .tbl td{border-color:#e3e8ec}.inv .tot td{font-weight:800;font-size:15px}
.stamp{display:inline-block;border:3px solid;border-radius:6px;padding:4px 14px;font-weight:800;letter-spacing:.08em;transform:rotate(-6deg);font-size:18px}
.stamp.Paid{color:#1e8a43}.stamp.Unpaid{color:#c53030}.stamp.Cancelled,.stamp.Refunded{color:#5b6670}
.msg{border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;overflow:hidden;background:var(--card)}.msg .mh{display:flex;gap:10px;padding:9px 14px;background:var(--side);font-size:13px}.msg .mh .sp{flex:1}
.msg.staff{border-color:rgba(30,136,229,.5)}.msg.staff .mh{background:var(--infob)}.msg .mb{padding:14px;white-space:pre-wrap;word-break:break-word}
.pag{display:flex;gap:6px;justify-content:flex-end;padding:12px 16px;align-items:center}
.muted{color:var(--mut)}.small{font-size:12.5px}.mono{font-family:Consolas,monospace}.nowrap{white-space:nowrap}.tr{text-align:right}.mt{margin-top:14px}
.sbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center}.sbar input,.sbar select{width:auto;min-width:170px}
@media(max-width:1000px){.g4,.tiles{grid-template-columns:repeat(2,1fr)}.tile:nth-child(2){border-right:0}.g3{grid-template-columns:1fr 1fr}.cwrap{flex-direction:column}.cwrap .cside{width:100%;flex:none;order:2}}
@media(max-width:760px){.aside{position:fixed;left:-260px;z-index:35;transition:left .2s;top:54px;box-shadow:0 0 40px rgba(0,0,0,.3)}.aside.open{left:0}.burger{display:block}
.atop .logo{min-width:0}.atop form,.atop .who{display:none}.amain{padding:14px}.g2,.g3,.g4,.tiles{grid-template-columns:1fr}.tile{border-right:0;border-bottom:1px solid var(--line)}
.dl{grid-template-columns:1fr}.inv{padding:18px}.hdr .tl a:not(.btn-cart){display:none}}
@media print{.hdr,.mnav,.cside,.cfoot,.atop,.aside,.noprint{display:none!important}.cwrap,.amain{padding:0;max-width:none}body{background:#fff}.inv{border:0}}
/* bloques genéricos (cliente y admin) */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:18px;margin-bottom:18px}
.card.p0{padding:0;overflow:hidden}.card .hd{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line);background:var(--side)}
.card .hd h2{margin:0;font-size:15px}.card .hd .sp{flex:1}.card.stat{padding:16px 18px}
.ph{display:flex;align-items:flex-end;gap:12px;margin-bottom:18px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:8px}.ph .sp{flex:1}
.ph h1{color:var(--acc2);font-weight:400;font-size:28px}[data-theme=dark] .ph h1{color:#6fb4ec}.ph .sub{color:var(--mut);font-size:14px}
.amain .ph h1{font-size:22px;font-weight:700;color:var(--tx)}

/* ═════ Administrador estilo WHMCS ═════ */
[data-theme=dark] body.adm{--bg:#111214;--card:#1f2024;--side:#17181b;--group:#26282c;--line:#2e3036;--line2:#26282d;--tx:#d9dce2;--mut:#8b919b;--in:#16171a;--mutb:#24262a}
body.adm{--wtop:#1c1d20;--wtopt:#d9dce2;padding-top:52px}
.wtop{position:fixed;top:0;left:0;right:0;height:52px;z-index:50;background:var(--wtop);color:var(--wtopt);display:flex;align-items:center;gap:4px;padding:0 12px;box-shadow:0 1px 0 rgba(0,0,0,.35)}
.wtop a{color:var(--wtopt);text-decoration:none}.wtop .sp{flex:1}
.wlogo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:19px;margin-right:10px;white-space:nowrap}.wlogo img{height:30px}
.wlogo .dot{width:30px;height:30px;border-radius:7px;background:var(--acc);display:grid;place-items:center}.wlogo .dot .ico{color:#fff}
.wmenu{display:flex;align-items:stretch;height:52px}
.wmenu .dd{position:relative;display:flex}.wmenu .ddb{display:flex;align-items:center;gap:5px;padding:0 12px;font-size:14px;opacity:.88}
.wmenu .ddb:hover,.wmenu .dd:hover .ddb,.wmenu .dd.on .ddb{opacity:1;background:rgba(255,255,255,.07)}
.wmenu .dd.on .ddb{box-shadow:inset 0 -3px 0 var(--acc)}.wmenu .ddb.plus{font-size:20px;padding:0 13px}.wmenu .car{font-size:10px;opacity:.6}
.wmenu .n,.wsb .n{background:var(--bad);color:#fff;border-radius:9px;padding:0 6px;font-size:11px;font-weight:700;line-height:17px}
.wmenu .ddm{display:none;position:absolute;top:52px;left:0;min-width:230px;background:var(--card);border:1px solid var(--line);border-top:3px solid var(--acc);box-shadow:0 10px 24px rgba(0,0,0,.35);padding:5px 0;z-index:60}
.wmenu .dd:hover .ddm{display:block}
.wmenu .ddm a{display:flex;align-items:center;gap:9px;padding:7px 15px;color:var(--tx);font-size:13.5px;white-space:nowrap}.wmenu .ddm a .ico{width:15px;height:15px;color:var(--mut)}
.wmenu .ddm a:hover{background:var(--mutb)}.wmenu .ddm a.on{color:var(--acc);font-weight:700}.wmenu .ddm a .n{margin-left:auto}
.wsearch{position:relative;margin:0 6px}.wsearch input{width:220px;height:34px;border-radius:4px;border:0;background:rgba(255,255,255,.1);color:#fff;padding:0 32px 0 10px}
.wsearch input::placeholder{color:rgba(255,255,255,.55)}.wsearch .ico{position:absolute;right:9px;top:9px;color:rgba(255,255,255,.7)}
.wclock{display:flex;align-items:center;gap:6px;font-weight:700;font-size:15px;padding:0 8px;white-space:nowrap}
.wtop .wi{display:grid;place-items:center;width:36px;height:36px;border-radius:4px}.wtop .wi:hover{background:rgba(255,255,255,.08)}
.wwho{display:flex;align-items:center;gap:6px;padding:0 8px;font-size:13px;opacity:.85;white-space:nowrap}
.wtop .burger{display:none;background:none;border:0;color:#fff;padding:6px;cursor:pointer}
.wwrap{display:flex;min-height:calc(100vh - 52px)}
.wside{width:200px;flex:0 0 200px;background:var(--side);border-right:1px solid var(--line);font-size:13px;position:sticky;top:52px;height:calc(100vh - 52px);overflow-y:auto}
.wsb{padding:10px 10px 12px;border-bottom:1px solid var(--line)}
.wsh{display:flex;align-items:center;gap:7px;font-weight:800;font-size:14px;margin:2px 0 7px}.wsh .ico{width:15px;height:15px;color:var(--mut)}
.wsb>a{display:flex;align-items:center;gap:7px;padding:3px 2px;color:var(--acc);font-size:13px}.wsb>a .ico{width:14px;height:14px;color:var(--mut)}
[data-theme=dark] .wsb>a{color:#6fb3ec}
.wsi{color:var(--mut);font-size:12px;line-height:1.6;word-break:break-word}
.wsf select,.wsf input{width:100%;height:30px;font-size:12.5px;padding:3px 7px;margin-bottom:6px;border:1px solid var(--line);background:var(--in);color:var(--tx);border-radius:3px}
.wsf .row2{display:flex}.wsf .row2 input{border-radius:3px 0 0 3px;margin:0}.wsf button{border:1px solid var(--line);border-left:0;background:var(--group);color:var(--tx);font-size:12px;padding:0 10px;border-radius:0 3px 3px 0;cursor:pointer}
.on-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#2ec26b;margin-right:6px}
.wmin{display:block;text-align:center;padding:8px;font-size:12px;color:var(--mut)}
.wmax{display:none;position:fixed;left:0;top:64px;background:var(--group);color:var(--tx);padding:6px 9px;border-radius:0 5px 5px 0;z-index:40;text-decoration:none}
body.side-off .wside{display:none}body.side-off .wmax{display:block}
.wmain{flex:1;min-width:0;padding:18px 22px 40px}
.wtitle{font-size:22px;font-weight:700;margin:2px 0 14px}
.wtiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.wtile{display:flex;height:72px;border-radius:3px;overflow:hidden;color:#fff!important;text-decoration:none!important}
.wti{width:34%;max-width:120px;display:grid;place-items:center;background:rgba(0,0,0,.14)}.wti .ico{width:38px;height:38px;stroke-width:2.2;color:#fff}
.wtb{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 14px}.wtb b{font-size:26px;font-weight:400;line-height:1.1}.wtb small{font-size:12px;opacity:.9}
.wtile.t1{background:#4f8f45}.wtile.t2{background:#c4467e}.wtile.t3{background:#c8892a}.wtile.t4{background:#4aa2b6}.wtile:hover{filter:brightness(1.08)}
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.wgrid .wide{grid-column:span 2}
.wp{background:var(--card);border:1px solid var(--line);border-radius:3px;min-width:0}
.wph{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);font-weight:700;font-size:13.5px;color:var(--mut)}.wph .sp{flex:1}
.wpx{font-weight:400;font-size:12.5px;display:inline-flex}.wpb{padding:14px}.wpb.p0{padding:0}
.wpf{padding:9px 14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--mut);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.wtabs{display:inline-flex;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.wtabs button{background:transparent;border:0;border-left:1px solid var(--line);color:var(--tx);font:inherit;font-size:12px;font-weight:400;padding:5px 11px;cursor:pointer}
.wtabs button:first-child{border-left:0}.wtabs button.on{background:var(--group);font-weight:700}
.wleg{display:flex;justify-content:center;align-items:center;gap:6px;font-size:12px;color:var(--mut);margin-bottom:6px;flex-wrap:wrap}
.wleg span{display:inline-block;width:34px;height:11px;border-radius:2px;margin-left:10px}.wleg .lo{background:#9aa0a8}.wleg .la{background:#2f6fe0}.wleg .li{background:#3fae49}
.wchart{width:100%;height:260px;display:block}.wchart .gl{stroke:var(--line);stroke-width:1}.wchart .ax{fill:var(--mut);font-size:11px}
.wchart .ai{fill:rgba(63,174,73,.55)}.wchart .li{fill:none;stroke:#7fd36f;stroke-width:2}.wchart .lo{fill:none;stroke:#9aa0a8;stroke-width:2}.wchart .la{fill:none;stroke:#2f6fe0;stroke-width:2}
.wchart .pt{fill:#fff;stroke:#7fd36f;stroke-width:1.5}
.wauto{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.wa{text-align:center;padding:8px 4px 4px;border-top:2px solid}.wa span{display:block;font-size:12px;color:var(--mut)}.wa b{font-size:22px;font-weight:400}
.wa.c1{border-color:#2aa3b8}.wa.c1 b{color:#2aa3b8}.wa.c2{border-color:#3fae49}.wa.c2 b{color:#3fae49}.wa.c3{border-color:#d99a2b}.wa.c3 b{color:#d99a2b}
.wa.c4{border-color:#c4467e}.wa.c4 b{color:#c4467e}.wa.c5{border-color:#e05252}.wa.c5 b{color:#e05252}.wa.c6{border-color:#8b5cf6}.wa.c6 b{color:#8b5cf6}
.wbill{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0}.wbill div{padding:16px 14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.wbill div:nth-child(2n){border-right:0}.wbill b{display:block;font-size:24px;font-weight:400}.wbill span{font-size:12.5px;color:var(--mut)}
.wbill .ok b{color:#3fae49}.wbill .warn b{color:#e3a33a}.wbill .pink b{color:#e0457f}.wbill .mut b{color:var(--mut)}
.wrow{display:block;padding:9px 14px;border-bottom:1px solid var(--line2);color:var(--tx)!important;text-decoration:none!important;font-size:13px}
.wrow:last-child{border-bottom:0}.wrow b{display:block;font-weight:700}.wrow small{color:var(--mut);font-size:11.5px}.wrow small.r{float:right}
a.wrow:hover{background:var(--mutb)}.wact .wrow span{color:#6fb3ec;font-size:12.5px}body.adm:not([data-x]) .wact .wrow span{color:var(--acc)}
.wstaff{display:flex;align-items:center;gap:10px;padding:6px 0}.wstaff .av{width:34px;height:34px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;font-weight:800}
.wstaff small{margin-left:auto;color:var(--mut)}
@media (max-width:1200px){.wgrid{grid-template-columns:1fr 1fr}.wgrid .wide{grid-column:span 2}.wclock{display:none}}
@media (max-width:900px){
 .wtop .burger{display:block}.wsearch,.wwho{display:none}
 .wmenu{display:none;position:fixed;top:52px;left:0;right:0;bottom:0;height:auto;flex-direction:column;background:var(--wtop);overflow-y:auto;padding:6px 0}
 body.menu-open .wmenu{display:flex}.wmenu .dd{flex-direction:column}.wmenu .ddb{padding:12px 16px}
 .wmenu .ddm{position:static;display:none;border:0;box-shadow:none;background:rgba(255,255,255,.04)}.wmenu .dd.open .ddm{display:block}.wmenu .dd:hover .ddm{display:none}.wmenu .dd.open:hover .ddm{display:block}
 .wmenu .ddm a{color:#d9dce2}.wside{display:none}.wmax{display:none!important}
 .wtiles{grid-template-columns:1fr 1fr}.wgrid{grid-template-columns:1fr}.wgrid .wide{grid-column:auto}.wmain{padding:14px}}
@media (max-width:520px){.wtiles{grid-template-columns:1fr}.wtb b{font-size:22px}}
.wgrid{align-items:start}.wrow span,.wrow b{overflow-wrap:anywhere;word-break:break-word}.wmain{overflow-x:hidden}
@media (max-width:900px){.wchart{height:190px}.wph{flex-wrap:wrap}}
/* submenús de segundo nivel (como WHMCS) */
.wmenu .fly{position:relative}.wmenu .fly .arr{margin-left:auto;padding-left:14px;opacity:.6}
.wmenu .flym{display:none;position:absolute;left:100%;top:-6px;min-width:220px;background:var(--card);border:1px solid var(--line);box-shadow:0 10px 24px rgba(0,0,0,.25);padding:5px 0;z-index:61}
.wmenu .fly:hover>.flym{display:block}.wmenu .flym a{display:flex;padding:7px 15px;color:var(--tx);font-size:13.5px;white-space:nowrap}.wmenu .flym a:hover{background:var(--mutb)}
.wmenu .ddm.right{left:auto;right:0}.wacc{height:52px}.wacc .ddb{gap:6px;font-size:13px}
/* modo día: barra superior oscura como WHMCS, contenido claro */
:root body.adm{--wtop:#2b3037}
@media (max-width:900px){.wmenu .flym{position:static;display:block;border:0;box-shadow:none;padding-left:14px;background:transparent}.wmenu .fly .arr{display:none}.wacc{display:flex!important;position:static;height:auto;background:none}.wacc .ddm{display:none!important}}
/* Ajustes (como WHMCS) */
.cfg-head{display:flex;align-items:flex-end;margin:-4px 0 18px;padding-bottom:14px;border-bottom:1px solid var(--line)}.cfg-head h1{font-size:26px;font-weight:400}
.cfg{display:grid;grid-template-columns:240px 1fr;gap:28px}.cfg aside a{display:block;padding:10px 14px;color:var(--tx);font-weight:600;font-size:13.5px;border-left:3px solid transparent;text-decoration:none}
.cfg aside a:hover{background:var(--mutb)}.cfg aside a.on{background:var(--mutb);border-left-color:var(--okbtn)}
.cfg-s{position:relative;margin-bottom:14px}.cfg-s input{width:100%;height:40px;padding-left:34px;border:1px solid var(--line);border-radius:4px;background:var(--in);color:var(--tx)}.cfg-s .ico{position:absolute;left:11px;top:12px;color:var(--mut)}
.cfg-t{font-size:18px;font-weight:600;margin:6px 0 16px}.cfg-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.cfg-c{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:3px;text-decoration:none!important;min-height:200px}
.cfg-c .ci{display:grid;place-items:center;height:88px;border-bottom:1px solid var(--line)}.cfg-c .ci .ico{width:44px;height:44px;color:var(--mut);stroke-width:1.6}
.cfg-c:hover .ci .ico{color:var(--acc)}.cfg-c .cb{padding:16px 18px}.cfg-c b{display:block;color:var(--acc);font-size:15px;font-weight:600}.cfg-c small{display:block;color:var(--mut);font-size:13px;margin-top:6px;line-height:1.4}
@media (max-width:900px){.cfg{grid-template-columns:1fr}.cfg aside{display:flex;flex-wrap:wrap;gap:4px}.cfg aside .cfg-s{flex-basis:100%}.cfg aside a{border-left:0;border-radius:3px;padding:6px 10px}}
/* calendario */
.cal td{vertical-align:top;height:96px;width:14.28%;border:1px solid var(--line2);font-size:12px}.cal td b{display:block;color:var(--mut);font-weight:700}.cal td.hoy{background:var(--infob)}
.cal-ev,.cal-inv,.cal-todo{display:block;margin-top:3px;padding:2px 5px;border-radius:3px;font-size:11.5px;line-height:1.3}.cal-ev{background:var(--acc);color:#fff}.cal-inv{background:var(--warnb);color:var(--warn)!important}.cal-todo{background:var(--mutb)}
/* perfil de cliente y servicio (como WHMCS) */
.csel{max-width:480px;width:100%;margin:0 0 12px}.ctabs{margin-bottom:14px}.ctabs a{font-size:13px}
.cname{color:#d98b1a;font-size:22px;font-weight:700;margin:4px 0 14px}
.csum{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
.cbox{background:var(--card);border:1px solid var(--line);border-radius:3px;padding:12px 14px;margin-bottom:16px}.cbox h3{text-align:center;color:var(--acc);font-weight:700;font-size:15px;margin:0 0 10px}
.kv{width:100%;border-collapse:collapse;font-size:13px}.kv td{padding:5px 8px;border-bottom:1px solid var(--line2)}.kv td:first-child{color:var(--mut);width:46%}
.cact{display:flex;flex-direction:column;gap:2px;margin-top:10px}.cact form{display:block;margin:0}
.lnk{display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:3px 0;color:var(--acc);font:inherit;font-size:13px;cursor:pointer;text-decoration:none}.lnk:hover{text-decoration:underline}.lnk .ico{width:14px;height:14px}.lnk.bad{color:var(--bad)}
.ssel{display:flex;gap:8px;align-items:center;margin-bottom:12px}.ssel select{max-width:560px;flex:1}
.g2c{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}.kv2{width:100%;border-collapse:collapse}.kv2 td{padding:6px 8px;border-bottom:1px solid var(--line2);vertical-align:middle}
.kv2 td.fl{width:38%;text-align:right;color:var(--mut);font-size:13px;background:var(--mutb)}.kv2.wide td.fl{width:19%}.kv2 input,.kv2 select,.kv2 textarea{width:100%}.kv2 input[type=checkbox]{width:auto}
.sfoot{text-align:center;padding-top:14px}
@media (max-width:1100px){.csum{grid-template-columns:1fr 1fr}}@media (max-width:800px){.csum,.g2c{grid-template-columns:1fr}.kv2 td.fl,.kv2.wide td.fl{width:40%;text-align:left}}
@media (max-width:1560px){.wclock{display:none}.wsearch input{width:170px}.wmenu .ddb{padding:0 10px}}
@media (max-width:1280px){.wsearch{display:none}.wlogo span{display:none}}