:root{--canvas:#070a0f;--surface:#0b1018;--surface-2:#0e1520;--surface-3:#121b28;--line:#1d2837;--line-soft:#16202d;--ink:#eef4fb;--muted:#8290a3;--primary:#22b8e6;--primary-dark:#0e9ecb;--success:#35d07f;--danger:#ff647c;--warning:#f7b955}
html{font-size:15px;background:var(--canvas);color:var(--ink);text-rendering:optimizeLegibility}
body{background:var(--canvas);color:var(--ink);letter-spacing:-.005em}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(700px 420px at 72% -10%,rgba(25,133,184,.09),transparent 70%);z-index:0}
.app-shell{position:relative;z-index:1;background:transparent;min-height:100vh}
.sidebar{width:244px;padding:22px 16px 18px;background:#080c12;border-right:1px solid #172130}
.sidebar-brand{height:52px;padding:2px 8px 16px;margin:0 0 26px;border-bottom:1px solid #172130}
.sidebar-brand img{width:142px!important;height:34px!important}
.nav-label{margin:0 10px 10px;color:#4e5c70;font-size:9px;letter-spacing:.14em}
.sidebar-nav{display:flex;flex-direction:column;gap:5px}
.nav-item{position:relative;min-height:43px;padding:10px 12px;gap:12px;border-radius:7px;color:#8593a7;font-size:13px;font-weight:650;letter-spacing:.005em}
.nav-item:hover{background:#0d141e;color:#dce8f5}
.nav-item.active{background:#101b28;color:#eaf8ff}
.nav-item.active:before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;border-radius:2px;background:#31c4f2;box-shadow:0 0 12px rgba(49,196,242,.55)}
.nav-icon{width:19px;height:19px;display:grid;place-items:center;color:#66768c}
.nav-item.active .nav-icon{color:#41c8f1}
.nav-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav-item:first-child .nav-icon svg{stroke-width:1.25}
.sidebar-foot{padding:15px 10px 4px;border:0;border-top:1px solid #172130;border-radius:0;background:transparent;color:#68778b;font-size:11px}
.system-dot,.topbar-status i{width:6px;height:6px;background:var(--success);box-shadow:0 0 0 3px rgba(53,208,127,.1),0 0 12px rgba(53,208,127,.28)}
.app-content{margin-left:244px}
.app-topbar{height:68px!important;padding:0 36px;background:rgba(7,10,15,.88);border-color:#172130;backdrop-filter:blur(18px);justify-content:space-between}
.topbar-status{display:flex;align-items:center;gap:9px;color:#657489;font-size:11px;font-weight:600}
.topbar-status i{display:block;border-radius:50%}
.account-menu summary{min-width:148px;padding:7px 8px 7px 12px!important;gap:13px!important;border:1px solid transparent;border-radius:7px!important;justify-content:flex-end}
.account-menu summary:hover{background:#0d141e!important;border-color:#1b2736}
.account-copy{display:grid;text-align:right;line-height:1.2}
.account-copy strong{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#dce6f1;font-size:12px;font-weight:700}
.account-copy small{margin:3px 0 0;color:#5f6e82;font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.account-chevron{display:block!important;width:15px;height:15px;fill:none;stroke:#657489;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.account-menu[open] .account-chevron{transform:rotate(180deg)}
.account-popover{top:49px!important;width:210px;padding:15px;background:#0d141e;border:1px solid #263344;border-radius:9px!important;box-shadow:0 22px 55px rgba(0,0,0,.48)}
.account-popover-label{color:#536276!important;font-size:9px!important;font-weight:800;letter-spacing:.12em}
.account-popover strong{margin-top:2px;color:#f1f6fc;font-size:13px}
.account-popover a{border-color:#263344;color:#ff8a9d}
.container{width:100%;max-width:1440px;padding:42px 42px 80px}
h1{font-size:29px;font-weight:720;letter-spacing:-.035em}
h2{letter-spacing:-.02em}
.page-head{margin-bottom:28px}
.page-head .muted{font-size:13px;color:#718096;margin-top:6px}
.eyebrow,.section-kicker{color:#32bde8;font-size:9px;letter-spacing:.14em;margin-bottom:8px}
.btn{min-height:39px;padding:9px 15px;border-radius:7px;background:#1baedb;color:#02131b;font-size:12px;font-weight:800;box-shadow:none;letter-spacing:.005em}
.btn:hover{background:#39c6ef;transform:none;box-shadow:0 0 0 3px rgba(34,184,230,.11)}
.btn.secondary{background:#0d141e;color:#c1ccda;border-color:#263344}
.btn.secondary:hover{background:#121c29;border-color:#35455a;color:#fff}
.btn.danger{background:#d74761;color:#fff}
.card,.stat{background:#0b1018;border:1px solid #1d2837;border-radius:10px;box-shadow:none}
.card{padding:24px}
.metric-grid{border:1px solid #1d2837;border-radius:10px;background:#0a0f16;overflow:hidden;margin-bottom:16px}
.metric{position:relative;padding:20px 22px;border-color:#1d2837}
.metric:before{content:"";position:absolute;left:21px;right:21px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(48,194,238,.6),transparent);opacity:0;transition:.2s}
.metric:hover:before{opacity:1}
.metric>span{color:#77869a;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.metric strong{font-size:27px;font-weight:720;letter-spacing:-.04em;margin:9px 0 7px}
.metric small{color:#5f6d80;font-size:10px}
.dashboard-grid{gap:16px;margin-bottom:16px}
.usage-card,.health-card,.recent-card{padding:23px 24px}
.card-head{margin-bottom:24px}
.card-head h2,.health-card h2{font-size:16px;font-weight:700}
.usage-list{gap:20px}
.usage-name,.usage-breakdown{font-size:11px}
.usage-name a{color:#dce8f4;text-decoration:none}
.usage-track{height:4px;background:#182231;border-radius:4px}
.usage-track i{border-radius:4px;background:linear-gradient(90deg,#20b8e7,#6678f4)}
.availability{border-color:#1d2837}
.availability strong{font-size:42px;font-weight:680;letter-spacing:-.05em}
.health-line i{height:4px;border-radius:3px;background:#182231}
.health-line em{border-radius:3px}
.text-link{color:#39bfe8;font-size:11px}
.table-wrap{border-color:#1d2837;border-radius:8px;background:#0a0f16}
table{background:#0a0f16}
th{height:42px;background:#0d141e;color:#657489;font-size:9px;letter-spacing:.11em}
th,td{padding:13px 15px;border-color:#192432;font-size:12px}
tbody tr:hover{background:#0e1722}
td a{color:#8adcf5;font-weight:700}
.status{padding:5px 8px;border-radius:5px;font-size:9px;letter-spacing:.07em}
.status:before{width:5px;height:5px}
.status.online{background:rgba(53,208,127,.1);color:#54dc93;border:1px solid rgba(53,208,127,.14)}
.status.offline{background:#151d28;color:#7d8999;border:1px solid #202c3a}
.search{padding:0;margin-bottom:18px}
.search input{height:40px}
input,select{min-height:43px;margin-top:7px;padding:10px 12px;border-radius:7px;background:#080d14;border-color:#263344;color:#e7eef7;font-size:13px}
input::placeholder{color:#4d5a6c}
input:hover,select:hover{border-color:#34445a}
input:focus,select:focus{border-color:#2ebce8;box-shadow:0 0 0 3px rgba(46,188,232,.1)}
label{color:#aab7c7;font-size:11px;letter-spacing:.01em}
label small{color:#5e6c7f;font-size:10px}
.form-shell{grid-template-columns:240px minmax(0,760px);gap:18px}
.form-aside{padding:25px 22px;border-radius:10px;background:#0a111a;border:1px solid #1d2b3a}
.form-aside h2{font-size:17px;margin:18px 0 9px}
.form-aside p{color:#738399;font-size:12px}
.aside-icon{width:auto;height:auto;display:inline-flex;padding:5px 8px;border:1px solid #24465a;border-radius:5px;background:#0d202b;color:#62d4f5;font-size:9px;letter-spacing:.1em}
.aside-tip{margin-top:25px;padding:15px 0 0;border:0;border-top:1px solid #1d2b3a;border-radius:0;background:transparent;color:#7d8da2;font-size:11px}
.aside-tip strong{color:#cbd7e5}
.form-main{border-radius:10px}
.form-section{padding:28px 30px;border-color:#1d2837;background:#0b1018}
.form-section h2{font-size:17px}
.form-section>.muted{font-size:11px;color:#667589}
.toggle-grid{gap:9px}
.toggle-card{padding:14px;border-radius:7px;background:#090e15;border-color:#243142}
.toggle-card:hover{background:#0d151f;border-color:#2e91ad}
.toggle-card strong,.active-check strong{color:#cbd6e4;font-size:11px}
.toggle-card small,.active-check small{font-size:10px}
.form-actions{padding:18px 30px;background:#090e15;border-color:#1d2837}
.alert{border-radius:7px;font-size:12px}
.alert.error{background:rgba(255,100,124,.08);color:#ff9bad;border-color:rgba(255,100,124,.24)}
.alert.success{background:rgba(53,208,127,.08);color:#6fe3a4;border-color:rgba(53,208,127,.22)}
.details{gap:10px}
.details .card{padding:17px;background:#0a0f16}
.details .card span{font-size:9px;color:#69788d}
.details .card strong{font-size:14px}
.danger-zone{background:#140d12;border-color:#42202c}
.code-row code{background:#05080d;border-color:#1d2837;border-radius:7px;color:#a9e9fc}
.dns-guide{border-radius:7px}

/* Autenticación */
.auth-page{position:relative;z-index:1;min-height:100vh;display:grid;grid-template-columns:minmax(420px,46%) 1fr;background:#070a0f}
.auth-brand-panel{position:relative;overflow:hidden;min-height:100vh;padding:56px;background:linear-gradient(145deg,#071019 0%,#0a1c29 55%,#08121c 100%);border-right:1px solid #1b2a38}
.auth-brand-panel:before{content:"";position:absolute;width:520px;height:520px;left:-190px;bottom:-230px;border-radius:50%;background:rgba(22,174,216,.13);filter:blur(70px)}
.auth-grid-glow{position:absolute;inset:0;opacity:.16;background-image:linear-gradient(rgba(92,178,206,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(92,178,206,.18) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,transparent 4%,#000 45%,transparent 100%)}
.auth-brand-content{position:relative;z-index:2;min-height:calc(100vh - 112px);display:flex;flex-direction:column;max-width:560px}
.auth-logo{width:176px;height:44px;object-fit:contain;object-position:left center}
.auth-brand-copy{margin:auto 0}
.auth-overline{display:block;margin-bottom:21px;color:#43c9ef;font-size:10px;font-weight:800;letter-spacing:.17em}
.auth-brand-copy h2{margin:0;color:#f6fbff;font-size:clamp(35px,4vw,56px);line-height:1.08;font-weight:680;letter-spacing:-.055em}
.auth-brand-copy h2 em{color:#49caef;font-style:normal}
.auth-brand-copy p{max-width:480px;margin:24px 0 0;color:#8499ad;font-size:14px;line-height:1.75}
.auth-trust{display:flex;flex-wrap:wrap;gap:21px;color:#6f8296;font-size:10px;font-weight:650}
.auth-trust span{display:flex;align-items:center;gap:7px}
.auth-trust i{width:5px;height:5px;border-radius:50%;background:#35d07f;box-shadow:0 0 8px rgba(53,208,127,.45)}
.auth-form-panel{position:relative;min-height:100vh;display:grid;place-items:center;padding:58px 34px 80px;background:#090d13}
.auth-form-inner{width:min(410px,100%)}
.auth-card{width:100%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.auth-card h1{font-size:30px;margin-bottom:8px}
.auth-form-kicker{display:block;margin-bottom:12px;color:#37c1e9;font-size:9px;font-weight:800;letter-spacing:.16em}
.auth-card>h1:first-child:before{content:"CUENTA SEGURA";display:block;margin-bottom:12px;color:#37c1e9;font-size:9px;font-weight:800;letter-spacing:.16em}
.auth-card>p.muted{margin:0 0 29px;color:#6f7e91;font-size:12px}
.auth-card form{margin-top:22px}
.auth-card label{margin:17px 0;color:#9ba9ba;font-size:11px}
.auth-card input{height:47px;background:#0b1119;border-color:#263344}
.auth-card .btn{width:100%;min-height:45px;margin-top:8px}
.auth-card>.btn{margin-top:24px}
.auth-link{font-size:11px;color:#657489}
.auth-link a{color:#46c6ed}
.auth-footer{position:absolute;bottom:23px;margin:0;color:#3f4b5c;font-size:9px;letter-spacing:.06em}
.mail-icon{width:52px;height:52px;display:grid;place-items:center;margin:22px 0;border:1px solid #214759;border-radius:9px;background:#0b1b24;color:#45c8ef;font-size:24px}
.service-bundle-row td{background:#0d1723}.bundle-subtitle{display:block;margin-top:4px;color:#7c91aa;font-size:11px;font-weight:500}.bundle-ports{display:flex;flex-wrap:wrap;gap:5px}.bundle-ports code{border:1px solid #26445a;border-radius:4px;background:#102233;color:#86dff8;padding:3px 6px;font-size:12px}

@media(max-width:1050px){.sidebar{width:216px}.app-content{margin-left:216px}.container{padding:36px 30px 70px}.form-shell{grid-template-columns:210px minmax(0,1fr)}.auth-brand-panel{padding:44px}}
@media(max-width:850px){.sidebar{width:70px;padding:16px 9px}.sidebar-brand{padding:0 0 16px;justify-content:center}.sidebar-brand img{width:38px!important;object-fit:cover!important;object-position:left!important}.nav-item{justify-content:center;padding:10px}.nav-item>span:last-child,.nav-label{display:none}.nav-item.active:before{top:12px;bottom:12px}.sidebar-foot{padding:14px 0 0;text-align:center}.app-content{margin-left:70px}.container{padding:32px 22px 65px}.form-shell{grid-template-columns:1fr}.auth-page{grid-template-columns:38% 1fr}.auth-brand-panel{padding:34px}.auth-brand-copy h2{font-size:34px}.auth-trust{display:grid;gap:9px}}
@media(max-width:640px){body:before{display:none}.app-content{padding-bottom:72px}.app-topbar{height:60px!important;padding:0 14px;background:#080c12}.mobile-brand img{width:112px!important;height:28px!important}.topbar-status{display:none}.account-menu summary{min-width:auto;padding:7px!important}.account-copy small{display:none}.account-copy strong{font-size:11px}.account-chevron{width:14px}.account-popover{top:43px!important}.container{padding:24px 14px 42px}.sidebar{height:66px!important;padding:7px 8px!important;background:rgba(8,12,18,.97);backdrop-filter:blur(15px)}.sidebar-nav{display:flex!important;grid-template-columns:none!important;gap:4px}.nav-item,.nav-item.active{flex:1;height:50px!important;padding:5px 3px!important;font-size:9px!important;gap:4px;border-radius:6px}.nav-item>span:last-child{display:block;font-size:9px}.nav-item.active:before{display:none}.nav-icon,.nav-icon svg{width:17px;height:17px}.page-head{gap:17px;margin-bottom:22px}.page-head h1{font-size:25px}.head-actions{gap:7px}.btn{min-height:40px}.metric-grid{border-radius:8px}.metric{padding:15px 14px}.metric:before{display:none}.metric strong{font-size:22px}.metric>span{font-size:9px}.dashboard-grid{gap:10px}.usage-card,.health-card,.recent-card,.card{padding:17px}.health-card{display:block}.table-wrap{border-radius:7px;margin-left:0;margin-right:0}.table-wrap:after{content:"Desliza para ver más →";display:block;position:sticky;left:0;padding:8px 12px;color:#526176;background:#090e15;font-size:9px;border-top:1px solid #192432}.form-section{padding:22px 17px}.form-actions{padding:16px 17px}.grid2{gap:0}.auth-page{display:block;background:#090d13}.auth-brand-panel{min-height:auto;height:116px;padding:27px 24px;border:0;border-bottom:1px solid #1b2a38}.auth-brand-content{min-height:0}.auth-logo{width:148px;height:36px}.auth-brand-copy,.auth-trust{display:none}.auth-grid-glow{opacity:.1}.auth-form-panel{min-height:calc(100vh - 116px);padding:39px 22px 72px;place-items:start center}.auth-card h1{font-size:27px}.auth-footer{bottom:20px}.inline-fields{grid-template-columns:minmax(90px,1fr) 65px 74px}}