:root{
  --c1:#30414A;--c2:#3D4E57;--c3:#405E7A;--c4:#DAEBF5;
  --bg:#000;--surface:#0b0f12;--surface2:#11181d;--text:#fff;
  --muted:rgba(255,255,255,.66);--muted2:rgba(255,255,255,.48);
  --stroke:rgba(255,255,255,.10);--stroke2:rgba(218,235,245,.18);
  --success:#7ed6a5;--warning:#f3cf72;--danger:#ff7b7b;
  --topbar-h:72px;--sidebar-w:270px;--radius:18px;--radius-sm:12px;
  --shadow:0 20px 60px rgba(0,0,0,.38);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}body{min-width:320px}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{color:inherit}img{max-width:100%}

/* APP LAYOUT */
.app-topbar{height:var(--topbar-h);position:fixed;inset:0 0 auto 0;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:0 22px;background:linear-gradient(110deg,rgba(0,0,0,.97),rgba(48,65,74,.90));border-bottom:1px solid var(--stroke);backdrop-filter:blur(16px);box-shadow:0 8px 35px rgba(0,0,0,.28)}
.app-topbar__left,.app-topbar__right{display:flex;align-items:center;gap:14px}.app-brand{display:flex;align-items:center;gap:12px;min-width:0}.app-brand__logo{height:40px;width:auto;display:block;filter:drop-shadow(0 8px 20px rgba(0,0,0,.45))}.app-brand__copy{display:flex;flex-direction:column;line-height:1.05}.app-brand__copy strong{font-size:14px;letter-spacing:.02em}.app-brand__copy small{font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
.icon-btn{width:42px;height:42px;border:1px solid var(--stroke);border-radius:13px;background:rgba(255,255,255,.035);display:none;align-items:center;justify-content:center;cursor:pointer}.icon-btn span{display:block;width:19px;height:2px;background:#fff;border-radius:5px;margin:3px auto}.icon-btn:hover{background:rgba(255,255,255,.08);border-color:var(--stroke2)}
.server-status{display:flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid var(--stroke);border-radius:999px;background:rgba(255,255,255,.035);font-size:12px}.server-status__dot,.sidebar-live-dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(126,214,165,.10),0 0 12px rgba(126,214,165,.55)}.server-status__label{color:var(--muted)}.server-status strong{font-size:12px;color:var(--c4)}
.user-menu{position:relative}.user-menu__trigger{border:0;background:transparent;display:flex;align-items:center;gap:9px;padding:5px 7px;border-radius:14px;cursor:pointer}.user-menu__trigger:hover{background:rgba(255,255,255,.05)}.user-avatar{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,var(--c3),var(--c1));border:1px solid rgba(255,255,255,.14);font-weight:800;color:var(--c4)}.user-menu__copy{display:flex;flex-direction:column;text-align:left;line-height:1.15}.user-menu__copy strong{font-size:13px}.user-menu__copy small{font-size:11px;color:var(--muted)}.user-menu__chevron{color:var(--muted)}.user-menu__dropdown{display:none;position:absolute;right:0;top:52px;width:210px;padding:8px;background:linear-gradient(155deg,#11191e,#0a0e11);border:1px solid var(--stroke2);border-radius:15px;box-shadow:var(--shadow)}.user-menu.is-open .user-menu__dropdown{display:block}.user-menu__header{display:flex;flex-direction:column;padding:10px 11px 12px;border-bottom:1px solid var(--stroke);margin-bottom:5px}.user-menu__header small{color:var(--muted);margin-top:3px}.user-menu__dropdown a{display:block;padding:10px 11px;border-radius:10px;font-size:13px;color:rgba(255,255,255,.86)}.user-menu__dropdown a:hover{background:rgba(255,255,255,.06)}.user-menu__dropdown .danger-link{color:#ffaaaa}

.app-shell{min-height:100vh;padding-top:var(--topbar-h);padding-left:var(--sidebar-w);background:radial-gradient(900px 500px at 88% 5%,rgba(64,94,122,.12),transparent 60%),#000}.app-sidebar{position:fixed;z-index:900;left:0;top:var(--topbar-h);bottom:0;width:var(--sidebar-w);display:flex;flex-direction:column;background:linear-gradient(180deg,#0b1013 0%,#080b0d 100%);border-right:1px solid var(--stroke);overflow:hidden}.app-sidebar__head{display:none;padding:18px;border-bottom:1px solid var(--stroke);position:relative}.app-sidebar__eyebrow{display:block;color:var(--c4);font-size:10px;letter-spacing:.18em;text-transform:uppercase}.app-sidebar__head strong{display:block;margin-top:4px}.sidebar-close{position:absolute;right:12px;top:13px;width:34px;height:34px;border:0;border-radius:10px;background:rgba(255,255,255,.06);font-size:24px;cursor:pointer}.sidebar-nav{padding:20px 14px;overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:rgba(218,235,245,.16) transparent}.sidebar-group+.sidebar-group{margin-top:22px}.sidebar-group__title{padding:0 12px 8px;color:var(--muted2);font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}.sidebar-link{position:relative;display:flex;align-items:center;gap:11px;min-height:42px;padding:9px 11px;border:1px solid transparent;border-radius:12px;color:rgba(255,255,255,.72);font-size:13px;transition:.18s ease}.sidebar-link:hover{color:#fff;background:rgba(255,255,255,.045);transform:translateX(2px)}.sidebar-link.is-active{color:#fff;background:linear-gradient(100deg,rgba(64,94,122,.32),rgba(48,65,74,.20));border-color:rgba(218,235,245,.11)}.sidebar-link.is-active:before{content:"";position:absolute;left:-1px;top:10px;bottom:10px;width:3px;border-radius:0 5px 5px 0;background:var(--c4);box-shadow:0 0 14px rgba(218,235,245,.35)}.sidebar-icon{width:21px;text-align:center;color:var(--c4);font-size:16px;opacity:.9}.sidebar-live-dot{margin-left:auto;width:6px;height:6px}.app-sidebar__footer{padding:14px;border-top:1px solid var(--stroke)}.sidebar-public-link{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border:1px solid var(--stroke);border-radius:12px;color:var(--c4);font-size:12px;background:rgba(255,255,255,.025)}.sidebar-public-link:hover{background:rgba(255,255,255,.06)}.app-sidebar__footer small{display:block;text-align:center;color:var(--muted2);font-size:10px;margin-top:10px}.sidebar-overlay{display:none}

.app-main{width:100%;max-width:1600px;margin:0 auto;padding:28px 30px 50px;min-width:0}.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}.page-head__copy h1{font-size:27px;margin:0 0 6px;letter-spacing:-.025em}.page-head__copy p{margin:0;color:var(--muted);font-size:13px}.page-actions{display:flex;gap:9px;flex-wrap:wrap}.eyebrow{display:block;color:var(--c4);font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:7px}

/* COMPONENTS */
.card{border-radius:var(--radius);background:linear-gradient(155deg,rgba(48,65,74,.58),rgba(17,24,29,.90));border:1px solid var(--stroke);padding:20px;box-shadow:0 14px 42px rgba(0,0,0,.28)}.card h2,.card h3{margin:0 0 8px;color:#fff}.card p{color:var(--muted);line-height:1.55}.card--flat{background:rgba(255,255,255,.025);box-shadow:none}.card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.card__head h3{margin:0;font-size:15px}.card__head p{margin:3px 0 0;font-size:12px}.card__link{font-size:12px;color:var(--c4);font-weight:700}.card__link:hover{text-decoration:underline}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.stats--6{grid-template-columns:repeat(6,minmax(0,1fr))}.stat{position:relative;overflow:hidden;min-height:122px;border-radius:16px;background:linear-gradient(145deg,rgba(48,65,74,.72),rgba(20,28,33,.82));border:1px solid var(--stroke);padding:17px;box-shadow:0 12px 35px rgba(0,0,0,.25);transition:.2s ease}.stat:after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-40px;top:-40px;background:rgba(218,235,245,.04)}.stat:hover{transform:translateY(-2px);border-color:rgba(218,235,245,.18)}.stat__top{display:flex;align-items:center;justify-content:space-between;gap:10px}.stat__icon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:rgba(218,235,245,.07);border:1px solid rgba(218,235,245,.10);color:var(--c4)}.stat__num{font-size:27px;font-weight:850;line-height:1;color:var(--c4);margin-top:15px}.stat__label{font-size:12px;color:var(--muted);margin-top:7px}.stat__link{position:absolute;inset:0;z-index:2;font-size:0}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}.stack{display:grid;gap:16px}.section-gap{margin-top:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:9px 13px;border-radius:12px;border:1px solid transparent;font-weight:750;font-size:12px;cursor:pointer;transition:.18s ease}.btn:hover{transform:translateY(-1px)}.btn--primary{background:linear-gradient(135deg,var(--c3),var(--c1));border-color:rgba(218,235,245,.15);color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.18)}.btn--primary:hover{filter:brightness(1.08)}.btn--ghost{background:rgba(255,255,255,.025);border-color:var(--stroke2);color:rgba(255,255,255,.86)}.btn--ghost:hover{background:rgba(255,255,255,.07)}.btn--danger{background:rgba(255,123,123,.08);border-color:rgba(255,123,123,.20);color:#ffb0b0}.btn--sm{min-height:34px;padding:7px 10px;border-radius:10px;font-size:11px}
.pill,.badge{display:inline-flex;align-items:center;gap:6px;width:max-content;padding:6px 9px;border-radius:999px;border:1px solid var(--stroke);background:rgba(255,255,255,.035);font-size:11px;color:rgba(255,255,255,.78)}.badge--success{color:#a9e7c2;border-color:rgba(126,214,165,.18);background:rgba(126,214,165,.07)}.badge--warning{color:#f8dd98;border-color:rgba(243,207,114,.18);background:rgba(243,207,114,.07)}.badge--danger{color:#ffb2b2;border-color:rgba(255,123,123,.18);background:rgba(255,123,123,.07)}
.alert{padding:13px 15px;border-radius:13px;border:1px solid var(--stroke);font-size:12px}.alert--danger{background:rgba(255,123,123,.07);border-color:rgba(255,123,123,.18);color:#ffb5b5}.alert--success{background:rgba(126,214,165,.07);border-color:rgba(126,214,165,.18);color:#afe8c7}
.table-wrap{width:100%;overflow-x:auto;border:1px solid var(--stroke);border-radius:14px;background:rgba(0,0,0,.12)}table{width:100%;border-collapse:collapse;font-size:12px}th,td{padding:12px 13px;text-align:left;border-bottom:1px solid rgba(255,255,255,.065);vertical-align:middle}th{color:var(--muted2);font-size:10px;text-transform:uppercase;letter-spacing:.09em;background:rgba(0,0,0,.14);white-space:nowrap}td{color:rgba(255,255,255,.80)}tbody tr:last-child td{border-bottom:0}tbody tr:hover td{background:rgba(255,255,255,.025)}.table-actions{display:flex;gap:6px;justify-content:flex-end;white-space:nowrap}.text-muted{color:var(--muted)!important}.text-small{font-size:11px}.empty-state{padding:30px;text-align:center;color:var(--muted)}
label{display:block;color:rgba(255,255,255,.78);font-size:12px;font-weight:700;margin:0 0 7px}.input,input[type="text"],input[type="email"],input[type="password"],input[type="date"],input[type="number"],select,textarea{width:100%;min-width:0;border-radius:12px;border:1px solid var(--stroke2);background:#10171b;color:#fff;padding:11px 12px;outline:none;transition:.18s ease}select option{background:#10171b;color:#fff}.input:focus,input:focus,select:focus,textarea:focus{border-color:rgba(218,235,245,.40);box-shadow:0 0 0 3px rgba(64,94,122,.18)}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-group{min-width:0}.form-group--full{grid-column:1/-1}

/* Legacy helpers kept for existing pages */
.container{width:min(1180px,92%);margin:auto}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.service,.product{border-radius:var(--radius);background:linear-gradient(155deg,rgba(48,65,74,.58),rgba(17,24,29,.90));border:1px solid var(--stroke);padding:18px}.checklist{list-style:none;padding:0}.checklist li{position:relative;padding-left:23px;margin:9px 0;color:var(--muted)}.checklist li:before{content:"✓";position:absolute;left:0;color:var(--c4)}

@media(max-width:1250px){.stats--6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:980px){:root{--topbar-h:64px}.app-topbar{padding:0 13px}.icon-btn{display:block}.app-brand__copy{display:none}.app-brand__logo{height:35px}.server-status__label{display:none}.user-menu__copy,.user-menu__chevron{display:none}.app-shell{padding-left:0}.app-sidebar{top:0;z-index:1200;width:min(290px,86vw);transform:translateX(-102%);transition:transform .24s ease;box-shadow:20px 0 60px rgba(0,0,0,.45)}.app-sidebar__head{display:block}.sidebar-open .app-sidebar{transform:translateX(0)}.sidebar-overlay{display:block;position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,.68);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:.2s}.sidebar-open .sidebar-overlay{opacity:1;visibility:visible}.sidebar-open{overflow:hidden}.app-main{padding:22px 16px 42px}.two-col{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.server-status{padding:8px 9px}.server-status strong{display:none}.page-head{align-items:flex-start;flex-direction:column;margin-bottom:18px}.page-head__copy h1{font-size:23px}.page-actions{width:100%}.page-actions .btn{flex:1}.stats,.stats--6{grid-template-columns:1fr 1fr;gap:10px}.stat{min-height:108px;padding:14px}.stat__num{font-size:23px}.card{padding:15px;border-radius:15px}.form-grid,.grid{grid-template-columns:1fr}.table-wrap{margin-left:0;margin-right:0}th,td{padding:10px 11px}.user-menu__dropdown{position:fixed;right:12px;top:60px}.app-topbar__left,.app-topbar__right{gap:8px}}
@media(max-width:420px){.stats,.stats--6{grid-template-columns:1fr}.app-main{padding-left:12px;padding-right:12px}.app-brand__logo{height:32px}}

/* =========================================================
   LEGACY MODULE NORMALIZATION
   Permite que módulos anteriores hereden el nuevo App Shell.
   ========================================================= */
.app-main > .card + .card{margin-top:18px}
.app-main > .two-col{margin-top:18px}
.app-main table{width:100%;border-collapse:collapse}
.app-main form{min-width:0}
.app-main .one-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.app-main .one-col>div{min-width:0}
.app-main textarea.input{min-height:100px;resize:vertical}

@media(max-width:760px){
  .app-main .one-col{grid-template-columns:1fr}
  .app-main table{min-width:720px}
  .app-main .card{overflow:hidden}
  .app-main .card>table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* =========================================================
   INFINITY OVERLAY LOADER
   ========================================================= */

.loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: none;

    align-items: center;
    justify-content: center;

    background: rgba(0,0,0,.72);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    opacity: 0;
    visibility: hidden;

    transition: opacity .2s ease;
}

.loader-overlay.is-visible {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.loader-box {
    min-width: 180px;
    padding: 26px 32px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;

    background: #30414A;
    border: 1px solid rgba(218, 235, 245, 0.16);
    border-radius: 16px;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.55);
}

.infinity-spinner {
    width: 42px;
    height: 42px;

    border: 4px solid rgba(218, 235, 245, 0.18);
    border-top-color: #DAEBF5;

    border-radius: 50%;

    animation: infinity-spin .75s linear infinite;
}

.loader-text {
    color: #DAEBF5;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .2px;
}

body.is-loading {
    cursor: wait;
}

@keyframes infinity-spin {
    to {
        transform: rotate(360deg);
    }
}
/* =========================================================
   CLIENT PROFILE / HESTIA LINK
   ========================================================= */
.profile-tabs{display:flex;gap:8px;flex-wrap:wrap;padding:7px;border:1px solid var(--stroke);border-radius:14px;background:rgba(255,255,255,.025)}
.profile-tab{padding:8px 12px;border-radius:10px;color:var(--muted2);font-size:12px;font-weight:750;transition:.18s ease}
.profile-tab:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.profile-field{min-width:0;padding:13px 14px;border-radius:13px;border:1px solid var(--stroke);background:rgba(0,0,0,.14);display:grid;gap:5px}
.profile-field span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.profile-field strong{font-size:13px;color:rgba(255,255,255,.90);word-break:break-word}
.profile-field--full{grid-column:1/-1}
.hestia-link-form{display:flex;align-items:end;gap:12px;flex-wrap:wrap}.hestia-link-form .form-group{flex:1 1 420px}
.hosting-summary{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap}
.hosting-account-main{display:grid;gap:4px}.hosting-account-main strong{font-size:22px;color:var(--c4)}.hosting-account-main small{color:var(--muted)}
@media(max-width:720px){.profile-grid{grid-template-columns:1fr}.profile-field--full{grid-column:auto}.hestia-link-form{display:grid}.hosting-summary{align-items:flex-start}}