/* ═══════════════════════════════════════════════════════════════════════
   Secure Shore Cloud — sistema visual
   Paleta: harbor ink · reef teal · shallows · paper · coral
   Tipos:  Bricolage Grotesque (display) · Inter (UI) · IBM Plex Mono (datos)
   Firma:  el medidor de profundidad (uso de almacenamiento como nivel de agua)
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --ink:#141B22; --ink-2:#1B2A3A; --ink-3:#24405C;
  --teal:#4E7FA8; --teal-deep:#35618A; --shallows:#E4EDF6;
  --paper:#F5F7FA; --card:#FFFFFF; --line:#E2E8EE;
  --text:#1A242E; --muted:#5F7285; --coral:#D9532B;
  --r:10px; --r-lg:16px;
  --shadow:0 1px 2px rgba(10,37,51,.06),0 8px 24px rgba(10,37,51,.07);
  --font-ui:'Inter',system-ui,sans-serif;
  --font-display:'Bricolage Grotesque','Inter',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:15px/1.55 var(--font-ui);color:var(--text);background:var(--paper)}
.hidden{display:none!important}
.mono{font-family:var(--font-mono);font-size:.86em}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ─────────────── botones ─────────────── */
.btn{font:600 14px var(--font-ui);border:none;border-radius:var(--r);padding:9px 16px;cursor:pointer;transition:background .15s,transform .06s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--teal);color:#fff}
.btn-primary:hover{background:var(--teal-deep)}
.btn-outline{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-outline:hover{border-color:var(--teal);color:var(--teal-deep)}
.btn-ghost-solid{background:var(--paper);color:var(--muted)}
.btn-ghost-solid:hover{color:var(--text)}
.btn-lg{padding:13px 22px;font-size:15px;border-radius:12px}
.btn-ghost{background:none;border:none;color:rgba(255,255,255,.55);font-size:16px;cursor:pointer;padding:6px}
.btn-ghost:hover{color:#fff}

/* ═══════════════ LOGIN ═══════════════ */
.login{display:grid;grid-template-columns:minmax(340px,46%) 1fr;min-height:100vh}
.login-panel{position:relative;overflow:hidden;background:linear-gradient(168deg,var(--ink) 0%,var(--ink-2) 70%,var(--ink-3) 100%);color:#fff;padding:56px;display:flex;flex-direction:column}
.login-brand{font:600 17px var(--font-display);display:flex;align-items:center;gap:10px}
.brand-mark{color:var(--teal);font-size:1.25em;line-height:1}
.login-title{font-size:clamp(34px,4.2vw,52px);font-weight:700;line-height:1.08;margin:auto 0 14px}
.login-sub{color:rgba(255,255,255,.66);max-width:42ch;margin:0 0 90px}
.login-waves{position:absolute;inset:auto 0 0 0;height:120px;pointer-events:none}
.login-waves svg{width:100%;height:100%}
.w1{fill:rgba(78,127,168,.25);animation:drift 9s ease-in-out infinite alternate}
.w2{fill:rgba(78,127,168,.45);animation:drift 7s ease-in-out infinite alternate-reverse}
@keyframes drift{from{transform:translateX(-16px)}to{transform:translateX(16px)}}
.login-form-wrap{display:grid;place-items:center;padding:40px}
.login-form{width:min(400px,100%);background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:34px}
.login-form h2{margin:0 0 20px;font-size:24px}
.login-form label{display:block;font:600 13px var(--font-ui);color:var(--muted);margin:14px 0 6px}
.login-form input{width:100%;border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;font:15px var(--font-ui)}
.login-form input:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px var(--shallows)}
.login-form .btn{width:100%;margin-top:20px}
.form-error{color:var(--coral);font-size:13px;min-height:18px;margin:10px 0 0}
.demo-accounts{margin-top:22px;border-top:1px dashed var(--line);padding-top:16px}
.demo-label{font-size:12.5px;color:var(--muted);margin:0 0 10px}
.demo-chip{display:block;width:100%;text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:8px 12px;margin-bottom:6px;font:500 13px var(--font-ui);color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s}
.demo-chip:hover{border-color:var(--teal);background:var(--shallows)}

/* ═══════════════ APP SHELL ═══════════════ */
.app{display:grid;grid-template-columns:262px 1fr;min-height:100vh}
.sidebar{background:linear-gradient(180deg,var(--ink),var(--ink-2));color:#fff;display:flex;flex-direction:column;padding:22px 16px;position:sticky;top:0;height:100vh}
.sidebar-brand{font:600 16px var(--font-display);display:flex;align-items:center;gap:9px;padding:0 10px 20px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav-item{display:flex;align-items:center;gap:11px;color:rgba(255,255,255,.72);text-decoration:none;font:500 14px var(--font-ui);padding:9px 12px;border-radius:9px;transition:background .15s,color .15s}
.nav-ico{width:18px;text-align:center;opacity:.8}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-item.active{background:rgba(78,127,168,.22);color:#fff;box-shadow:inset 2px 0 0 var(--teal)}

/* Firma: medidor de profundidad */
.gauge{margin:auto 6px 18px;display:flex;gap:14px;align-items:flex-end}
.gauge-tank{position:relative;width:34px;height:96px;border:1.5px solid rgba(255,255,255,.35);border-radius:8px;overflow:hidden;background:rgba(255,255,255,.05)}
.gauge-ticks{position:absolute;inset:0}
.gauge-ticks i{position:absolute;left:0;width:7px;height:1px;background:rgba(255,255,255,.3)}
.gauge-ticks i:nth-child(1){top:25%}.gauge-ticks i:nth-child(2){top:50%;width:11px}.gauge-ticks i:nth-child(3){top:75%}.gauge-ticks i:nth-child(4){top:12.5%}
.gauge-water{position:absolute;left:0;right:0;bottom:0;height:8%;background:linear-gradient(180deg,var(--teal),var(--teal-deep));transition:height 1s cubic-bezier(.22,1,.36,1)}
.gauge-wave{position:absolute;top:-11px;left:0;width:200%;height:12px;fill:var(--teal);animation:wave 3.4s linear infinite}
@keyframes wave{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.gauge-text{display:flex;flex-direction:column;font-size:12.5px;color:rgba(255,255,255,.6);padding-bottom:2px}
.gauge-text strong{font:600 17px var(--font-display);color:#fff}
.gauge-plan{margin-top:6px;font-size:11px;color:var(--teal);letter-spacing:.03em;text-transform:uppercase}

.sidebar-user{display:flex;align-items:center;gap:10px;border-top:1px solid rgba(255,255,255,.12);padding-top:14px}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font:600 14px var(--font-ui);flex:none}
.sidebar-user-text{display:flex;flex-direction:column;min-width:0}
.sidebar-user-text strong{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user-text span{font-size:12px;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user .btn-ghost{margin-left:auto}

/* ─────────────── topbar + contenido ─────────────── */
.main{display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;gap:12px;padding:16px 28px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.breadcrumb{display:flex;align-items:center;gap:6px;font:600 15px var(--font-display);color:var(--ink);flex:1;min-width:0;overflow:hidden}
.breadcrumb a{color:var(--muted);text-decoration:none;font-weight:500}
.breadcrumb a:hover{color:var(--teal-deep)}
.crumb-sep{color:var(--line)}
.topbar-actions{display:flex;gap:10px;align-items:center}
.search{border:1px solid var(--line);border-radius:var(--r);padding:9px 13px;font:14px var(--font-ui);width:210px}
.search:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px var(--shallows)}
.content{padding:26px 28px;max-width:1120px;width:100%}
.view-title{font-size:22px;margin:0 0 4px}
.view-sub{color:var(--muted);margin:0 0 22px;font-size:14px}

.upload-bar{position:relative;height:34px;background:var(--shallows);display:flex;align-items:center;padding:0 28px;font:500 13px var(--font-ui);color:var(--teal-deep)}
#upload-bar-fill{position:absolute;inset:0;width:0;background:rgba(78,127,168,.25);transition:width .2s}
#upload-bar-text{position:relative}

/* ─────────────── tabla de archivos ─────────────── */
.file-table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.file-table thead th{font:600 12px var(--font-ui);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);background:#FBFDFD}
.file-table td{padding:12px 16px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle}
.file-table tbody tr:last-child td{border-bottom:none}
.file-table tbody tr{transition:background .12s;cursor:default}
.file-table tbody tr:hover{background:var(--shallows)}
.row-name{display:flex;align-items:center;gap:11px;font-weight:500;color:var(--ink)}
.row-name.folder{cursor:pointer}
.row-name .f-ico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:14px;flex:none}
.f-ico.folder{background:var(--shallows);color:var(--teal-deep)}
.f-ico.file{background:#EEF3F5;color:var(--ink-3)}
.badge{display:inline-block;font:500 11.5px var(--font-mono);background:var(--paper);border:1px solid var(--line);border-radius:99px;padding:2px 9px;color:var(--muted)}
.row-actions{display:flex;gap:4px;justify-content:flex-end;opacity:0;transition:opacity .12s}
tr:hover .row-actions{opacity:1}
.icon-btn{background:none;border:none;cursor:pointer;font-size:15px;color:var(--muted);padding:6px 8px;border-radius:7px;transition:background .12s,color .12s}
.icon-btn:hover{background:#fff;color:var(--teal-deep);box-shadow:var(--shadow)}
.icon-btn.danger:hover{color:var(--coral)}
.empty{background:var(--card);border:1.5px dashed var(--line);border-radius:var(--r-lg);padding:56px 20px;text-align:center;color:var(--muted)}
.empty strong{display:block;font:600 17px var(--font-display);color:var(--ink);margin-bottom:6px}

/* ─────────────── tarjetas de uso ─────────────── */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:22px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--shadow)}
.stat b{font:600 26px var(--font-display);color:var(--ink);display:block}
.stat span{font-size:13px;color:var(--muted)}
.usage-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow);margin-bottom:16px}
.usage-card h3{margin:0 0 14px;font-size:16px}
.meter{height:12px;background:var(--paper);border-radius:99px;overflow:hidden;border:1px solid var(--line)}
.meter>i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--teal-deep));border-radius:99px;transition:width .8s cubic-bezier(.22,1,.36,1)}
.meter-label{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-top:8px}
.hbar{display:grid;grid-template-columns:130px 1fr 74px;align-items:center;gap:12px;margin:9px 0;font-size:13.5px}
.hbar .track{height:9px;background:var(--paper);border-radius:99px;overflow:hidden;border:1px solid var(--line)}
.hbar .track i{display:block;height:100%;background:var(--teal);border-radius:99px}
.hbar .val{text-align:right;color:var(--muted)}

/* ─────────────── listas equipo / actividad / shares ─────────────── */
.list-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
.list-row{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line)}
.list-row:last-child{border-bottom:none}
.list-row .grow{flex:1;min-width:0}
.list-row .grow b{display:block;font-size:14px}
.list-row .grow span{font-size:12.5px;color:var(--muted)}
.role-pill{font:600 11px var(--font-ui);letter-spacing:.05em;background:var(--shallows);color:var(--teal-deep);border-radius:99px;padding:3px 10px;text-transform:uppercase}
.act-dot{width:8px;height:8px;border-radius:50%;background:var(--teal);flex:none}
.share-url-cell{font-family:var(--font-mono);font-size:12.5px;color:var(--teal-deep);text-decoration:none;word-break:break-all}
.share-url-cell:hover{text-decoration:underline}
.pill-expired{background:#FBEDE8;color:var(--coral)}

/* ─────────────── modales / toast / dropzone ─────────────── */
.modal{border:none;border-radius:var(--r-lg);box-shadow:0 24px 64px rgba(10,37,51,.28);padding:26px;width:min(440px,92vw)}
.modal::backdrop{background:rgba(10,37,51,.45);backdrop-filter:blur(2px)}
.modal h3{margin:0 0 4px;font-size:19px}
.modal-file{color:var(--muted);margin:0 0 16px}
.modal label{display:block;font:600 13px var(--font-ui);color:var(--muted);margin:12px 0 6px}
.modal input,.modal select{width:100%;border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;font:14px var(--font-ui)}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.share-result{display:flex;gap:8px;margin-top:14px}
.share-result input{flex:1;background:var(--paper)}
.versions-list{list-style:none;margin:8px 0 0;padding:0;max-height:300px;overflow:auto}
.versions-list li{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line);font-size:13.5px}
.versions-list li:last-child{border-bottom:none}
.v-num{font:600 13px var(--font-mono);background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:3px 8px}
.v-current .v-num{background:var(--shallows);border-color:var(--teal);color:var(--teal-deep)}
.versions-list .grow{flex:1}
.versions-list .grow span{display:block;font-size:12px;color:var(--muted)}
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font:500 14px var(--font-ui);padding:12px 20px;border-radius:12px;box-shadow:var(--shadow);z-index:60;animation:toast-in .22s cubic-bezier(.22,1,.36,1)}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
.dropzone{position:fixed;inset:0;background:rgba(10,37,51,.55);backdrop-filter:blur(3px);z-index:50;display:grid;place-items:center}
.dropzone-inner{background:var(--card);border:2px dashed var(--teal);border-radius:20px;padding:52px 70px;font:600 19px var(--font-display);color:var(--ink);text-align:center}
.dropzone-inner small{display:block;font:400 13px var(--font-ui);color:var(--muted);margin-top:8px}

/* ─────────────── página pública de link ─────────────── */
.share-body{display:grid;place-items:center;min-height:100vh;background:linear-gradient(168deg,var(--ink),var(--ink-2));padding:20px}
.share-card{background:var(--card);border-radius:20px;box-shadow:0 24px 64px rgba(0,0,0,.35);padding:44px;width:min(480px,94vw);text-align:center}
.share-brand{font:600 15px var(--font-display);color:var(--ink);display:flex;justify-content:center;gap:8px;margin-bottom:26px}
.share-eyebrow{font:600 12px var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--teal-deep);margin:0 0 8px}
.share-name{font-size:24px;margin:0 0 6px;word-break:break-word}
.share-meta{color:var(--muted);margin:0 0 24px}
.share-card .btn{display:inline-block;text-decoration:none}
.share-fine{font-size:12.5px;color:var(--muted);margin-top:20px}

/* ─────────────── responsive ─────────────── */
@media (max-width:920px){
  .login{grid-template-columns:1fr}
  .login-panel{padding:34px;min-height:270px}
  .login-sub{margin-bottom:40px}
  .app{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;padding:14px}
  .nav{flex-direction:row;flex-wrap:wrap}
  .gauge{display:none}
  .sidebar-user{border:none;padding:0;margin-left:auto}
  .topbar{flex-wrap:wrap}
  .search{width:100%}
  .content{padding:18px}
  .file-table .hide-sm{display:none}
  .row-actions{opacity:1}
}

/* registro */
.form-switch{font-size:13.5px;color:var(--muted);text-align:center;margin:16px 0 0}
.form-switch a{color:var(--teal-deep);font-weight:600;text-decoration:none}
.form-switch a:hover{text-decoration:underline}
.login-form select{width:100%;border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;font:15px var(--font-ui);background:#fff}
.login-form select:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px var(--shallows)}

/* ═══════════════ LANDING ═══════════════ */
.landing{background:var(--paper)}
.l-nav{position:sticky;top:0;z-index:20;background:rgba(246,249,250,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.l-nav-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:26px;padding:14px 24px}
.l-brand{font:700 17px var(--font-display);color:var(--ink);display:flex;align-items:center;gap:9px}
.l-links{display:flex;gap:22px;margin-left:auto}
.l-links a{color:var(--muted);text-decoration:none;font:500 14px var(--font-ui);transition:color .15s}
.l-links a:hover{color:var(--teal-deep)}
.ext{font-size:.85em;opacity:.7}
.l-nav-cta{display:flex;gap:10px}

.l-hero{position:relative;overflow:hidden;background:linear-gradient(172deg,var(--ink) 0%,var(--ink-2) 52%,#24405C 82%,var(--teal-deep) 100%);color:#fff;padding:96px 24px 210px;text-align:center}
.l-sun{position:absolute;top:52px;right:12%;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(220,235,250,.55),rgba(156,195,228,.18) 60%,transparent 72%);filter:blur(2px);animation:sunFloat 8s ease-in-out infinite alternate}
@keyframes sunFloat{from{transform:translateY(0)}to{transform:translateY(10px)}}
.l-hero-inner{position:relative;max-width:760px;margin:0 auto;z-index:2}
.l-eyebrow{font:600 13px var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:#9CC3E4;margin:0 0 18px}
.l-title{font-size:clamp(42px,6.4vw,72px);font-weight:800;line-height:1.04;margin:0 0 20px}
.l-title em{font-style:normal;color:#B7D6EF}
.l-sub{font-size:17.5px;color:rgba(255,255,255,.75);max-width:56ch;margin:0 auto 32px}
.l-hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-glass{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.3)}
.btn-glass:hover{background:rgba(255,255,255,.2)}
.l-stats{display:flex;gap:44px;justify-content:center;margin-top:52px;flex-wrap:wrap}
.l-stats b{display:block;font:700 26px var(--font-display);color:#B7D6EF}
.l-stats span{font-size:13px;color:rgba(255,255,255,.6)}
.l-waves{position:absolute;left:0;right:0;bottom:-2px;height:190px;pointer-events:none}
.l-waves svg{width:100%;height:100%}
.lw1{fill:rgba(156,195,228,.16);animation:drift 11s ease-in-out infinite alternate}
.lw2{fill:rgba(156,195,228,.3);animation:drift 8s ease-in-out infinite alternate-reverse}
.lw3{fill:var(--paper)}

.l-section{max-width:1100px;margin:0 auto;padding:84px 24px;text-align:center}
.l-h2{font-size:clamp(28px,3.6vw,40px);font-weight:700;color:var(--ink);margin:0 0 12px;line-height:1.15}
.l-lead{color:var(--muted);font-size:16.5px;max-width:60ch;margin:0 auto 44px}
.l-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;text-align:left}
.l-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s}
.l-card:hover{transform:translateY(-3px);box-shadow:0 4px 8px rgba(10,37,51,.06),0 16px 36px rgba(10,37,51,.1)}
.l-card-ico{width:44px;height:44px;border-radius:12px;background:var(--shallows);color:var(--teal-deep);display:grid;place-items:center;font-size:20px;margin-bottom:16px}
.l-card h3{font-size:17px;margin:0 0 8px}
.l-card p{font-size:14px;color:var(--muted);margin:0;line-height:1.6}

.l-section-dark{max-width:none;background:linear-gradient(168deg,var(--ink),var(--ink-2));color:#fff;text-align:left}
.l-sec-inner{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr;gap:56px;align-items:center;padding:0 24px}
.l-section-dark .l-h2{color:#fff}
.l-lead-light{color:rgba(255,255,255,.7);font-size:16px;margin:0 0 26px}
.l-checks{list-style:none;margin:0;padding:0}
.l-checks li{position:relative;padding:9px 0 9px 34px;font-size:15px;color:rgba(255,255,255,.85)}
.l-checks li::before{content:'✓';position:absolute;left:0;top:7px;width:22px;height:22px;border-radius:50%;background:rgba(78,127,168,.25);color:#B7D6EF;display:grid;place-items:center;font-size:12px;font-weight:700}
.l-gauge-demo{display:flex;flex-direction:column;align-items:center;gap:18px}
.l-tank{width:88px;height:220px;border-radius:16px}
.l-tank .gauge-wave{top:-11px}
.l-tank-cap{font-size:13.5px;color:rgba(255,255,255,.55);text-align:center;margin:0}

.l-cta{padding-bottom:100px}
.l-footer{background:var(--ink);color:#fff;padding:34px 24px}
.l-footer-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.l-footer .l-brand{color:#fff}
.l-footer .l-links a{color:rgba(255,255,255,.65)}
.l-footer .l-links a:hover{color:#B7D6EF}
.l-fine{margin-left:auto;font-size:12.5px;color:rgba(255,255,255,.45)}

.back-link{display:inline-block;font-size:13px;color:var(--muted);text-decoration:none;margin-bottom:14px}
.back-link:hover{color:var(--teal-deep)}
.label-hint{font-weight:400;text-transform:none;letter-spacing:0;color:var(--teal-deep)}
.nav-ext{margin-top:6px;border-top:1px solid rgba(255,255,255,.1);padding-top:12px}
.team-phone{font-family:var(--font-mono);font-size:12.5px;color:var(--teal-deep)}

@media (max-width:880px){
  .l-links{display:none}
  .l-sec-inner{grid-template-columns:1fr;gap:40px}
  .l-gauge-demo{order:-1}
  .l-fine{margin-left:0}
}

/* ═══════════════ LANDING REACT (identidad del logo: carbón + acero + cromo) ═══════════════ */
.sl-body{background:#14181D}
#landing-root{display:block;background:#14181D;color:#E8EEF5;font-family:var(--font-ui)}
.sl-chrome{background:linear-gradient(100deg,#6E93B8 0%,#C9DCEF 30%,#F2F7FB 50%,#9CC3E4 68%,#3D628A 100%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:chromeSweep 5s linear infinite}
.sl-chrome-dark{background:linear-gradient(100deg,#183048,#4E7FA8 45%,#8FB6DA 55%,#183048);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:chromeSweep 6s linear infinite}
@keyframes chromeSweep{to{background-position:220% center}}

.sl-btn{font:600 14px var(--font-ui);border:none;border-radius:11px;padding:10px 18px;cursor:pointer;transition:transform .12s,box-shadow .2s,background .2s}
.sl-btn:active{transform:translateY(1px)}
.sl-btn.primary{background:linear-gradient(135deg,#4E7FA8,#35618A);color:#fff;box-shadow:0 4px 18px rgba(78,127,168,.35)}
.sl-btn.primary:hover{box-shadow:0 6px 26px rgba(120,170,215,.5);transform:translateY(-1px)}
.sl-btn.ghost{background:transparent;color:#C9DCEF;border:1px solid rgba(156,195,228,.35)}
.sl-btn.ghost:hover{border-color:#9CC3E4;background:rgba(156,195,228,.08)}
.sl-btn.glass{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px)}
.sl-btn.glass:hover{background:rgba(255,255,255,.15)}
.sl-btn.xl{padding:14px 26px;font-size:15.5px;border-radius:13px}
.sl-btn.pulse{animation:btnPulse 2.6s ease-in-out infinite}
@keyframes btnPulse{0%,100%{box-shadow:0 4px 18px rgba(78,127,168,.35)}50%{box-shadow:0 4px 30px rgba(156,195,228,.6)}}

.sl-nav{position:sticky;top:0;z-index:30;background:rgba(20,24,29,.6);backdrop-filter:blur(12px);border-bottom:1px solid rgba(156,195,228,.1);transition:background .3s,box-shadow .3s}
.sl-nav.scrolled{background:rgba(20,24,29,.92);box-shadow:0 6px 24px rgba(0,0,0,.35)}
.sl-nav-inner{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:26px;padding:10px 24px}
.sl-links{display:flex;gap:24px;margin-left:auto;align-items:center}
.sl-links a{color:#A9BDD2;text-decoration:none;font:500 14px var(--font-ui);transition:color .15s}
.sl-links a:hover{color:#E8F1FA}
.sl-ext{font-size:.85em;opacity:.7}
.sl-nav-cta{display:flex;gap:10px}

.sl-hero{position:relative;overflow:hidden;padding:92px 24px 220px;text-align:center;background:radial-gradient(1100px 620px at 50% -8%,#24405C 0%,#1B2A3A 42%,#14181D 78%)}
.sl-particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sl-orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;transition:transform .2s ease-out}
.sl-orb.o1{width:420px;height:420px;top:-90px;left:8%;background:rgba(78,127,168,.28);transform:translate(calc(var(--mx,0)*26px),calc(var(--my,0)*20px))}
.sl-orb.o2{width:340px;height:340px;top:16%;right:4%;background:rgba(200,220,240,.14);transform:translate(calc(var(--mx,0)*-34px),calc(var(--my,0)*-24px))}
.sl-hero-inner{position:relative;max-width:780px;margin:0 auto;z-index:2}
.sl-eyebrow{font:600 12.5px var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:#9CC3E4;margin:0 0 16px}
.sl-title{font:800 clamp(42px,6.4vw,74px)/1.04 var(--font-display);letter-spacing:-.015em;color:#F2F6FA;margin:0 0 20px}
.sl-sub{font-size:17.5px;line-height:1.6;color:#A9BDD2;max-width:56ch;margin:0 auto 32px}
.sl-hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.sl-stats{display:flex;gap:48px;justify-content:center;margin-top:54px;flex-wrap:wrap}
.sl-stats b{display:block;font:700 27px var(--font-display);color:#C9DCEF}
.sl-stats span{font-size:13px;color:#7E93A8}
.sl-waves{position:absolute;left:0;right:0;bottom:-2px;height:190px;pointer-events:none}
.sl-waves svg{width:100%;height:100%}
.slw.a{fill:rgba(78,127,168,.18);animation:drift 11s ease-in-out infinite alternate}
.slw.b{fill:rgba(156,195,228,.16);animation:drift 8s ease-in-out infinite alternate-reverse}
.slw.c{fill:#14181D}

.sl-ticker{overflow:hidden;border-top:1px solid rgba(156,195,228,.1);border-bottom:1px solid rgba(156,195,228,.1);background:#171C23;padding:13px 0}
.sl-ticker-row{display:flex;gap:44px;width:max-content;animation:tickerMove 26s linear infinite}
.sl-tick{font:500 13.5px var(--font-mono);color:#7E93A8;white-space:nowrap}
@keyframes tickerMove{to{transform:translateX(-50%)}}

.sl-section{max-width:1120px;margin:0 auto;padding:92px 24px;text-align:center}
.sl-h2{font:700 clamp(28px,3.6vw,42px)/1.15 var(--font-display);color:#F2F6FA;margin:0 0 12px}
.sl-h2.light{color:#F2F6FA}
.sl-lead{color:#8DA2B7;font-size:16.5px;max-width:60ch;margin:0 auto 46px}
.sl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;text-align:left}
.sl-card{background:linear-gradient(180deg,#1B222B,#171C23);border:1px solid rgba(156,195,228,.12);border-radius:18px;padding:26px;transition:transform .18s ease-out,border-color .2s,box-shadow .2s;will-change:transform}
.sl-card:hover{border-color:rgba(156,195,228,.35);box-shadow:0 18px 44px rgba(0,0,0,.4),0 0 0 1px rgba(156,195,228,.08)}
.sl-card-ico{width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,rgba(78,127,168,.3),rgba(24,48,72,.6));color:#C9DCEF;display:grid;place-items:center;font-size:20px;margin-bottom:16px;border:1px solid rgba(156,195,228,.2)}
.sl-card h3{font:600 17px var(--font-display);color:#E8EEF5;margin:0 0 8px}
.sl-card p{font-size:14px;color:#8DA2B7;margin:0;line-height:1.65}

.sl-dark{background:linear-gradient(180deg,#14181D 0%,#1A2C42 28%,#1B2A3A 58%,#14181D 100%)}
.sl-dark-inner{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr;gap:56px;align-items:center;padding:92px 24px;text-align:left}
.sl-lead-light{color:#A9BDD2;font-size:16px;margin:0 0 26px}
.sl-checks{list-style:none;margin:0;padding:0}
.sl-checks li{position:relative;padding:9px 0 9px 36px;font-size:15px;color:#D5E1EC}
.sl-checks li::before{content:'✓';position:absolute;left:0;top:7px;width:23px;height:23px;border-radius:50%;background:rgba(78,127,168,.3);color:#C9DCEF;display:grid;place-items:center;font-size:12px;font-weight:700;border:1px solid rgba(156,195,228,.25)}
.sl-tank-wrap{display:flex;flex-direction:column;align-items:center;gap:18px}
.sl-tank{position:relative;width:92px;height:230px;border:1.5px solid rgba(201,220,239,.4);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.04);box-shadow:0 0 44px rgba(78,127,168,.25)}
.sl-ticks i{position:absolute;left:0;width:9px;height:1px;background:rgba(201,220,239,.35)}
.sl-ticks i:nth-child(1){top:25%}.sl-ticks i:nth-child(2){top:50%;width:14px}.sl-ticks i:nth-child(3){top:75%}.sl-ticks i:nth-child(4){top:12.5%}
.sl-water{position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(180deg,#4E7FA8,#24405C)}
.sl-wave{position:absolute;top:-11px;left:0;width:200%;height:12px;fill:#4E7FA8;animation:wave 3.4s linear infinite}
.sl-tank-cap{font-size:13.5px;color:#7E93A8;text-align:center;margin:0}

.sl-cta{padding-bottom:110px}
.sl-footer{background:linear-gradient(180deg,#14181D,#0F1318 45%);border-top:1px solid rgba(156,195,228,.08);padding:32px 24px}
.sl-footer-inner{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.sl-fine{margin-left:auto;font-size:12.5px;color:#5F7285}

/* reveals */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

@media (max-width:880px){
  .sl-links{display:none}
  .sl-dark-inner{grid-template-columns:1fr;gap:40px}
  .sl-tank-wrap{order:-1}
  .sl-fine{margin-left:0}
  .sl-hero{padding-top:64px}
}



/* ═══════════════ AUTH OVERLAY (integrado a la landing) ═══════════════ */
.no-scroll{overflow:hidden}
.auth-overlay{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:22px;
  background:rgba(12,16,21,.55);backdrop-filter:blur(14px) saturate(1.1);
  opacity:0;pointer-events:none;transition:opacity .32s ease}
.auth-overlay.open{opacity:1;pointer-events:auto}
.auth-card{position:relative;width:min(460px,94vw);max-height:92vh;overflow:auto;
  background:linear-gradient(180deg,#1B222B,#151A21);border:1px solid rgba(156,195,228,.18);border-radius:22px;
  box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 0 1px rgba(156,195,228,.06),0 0 80px rgba(78,127,168,.18);
  padding:34px 34px 28px;
  transform:translateY(28px) scale(.96);opacity:0;transition:transform .38s cubic-bezier(.22,1,.36,1),opacity .3s}
.auth-overlay.open .auth-card{transform:none;opacity:1}
.auth-close{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.06);border:1px solid rgba(156,195,228,.18);
  color:#A9BDD2;width:34px;height:34px;border-radius:10px;cursor:pointer;font-size:14px;transition:background .15s,color .15s}
.auth-close:hover{background:rgba(255,255,255,.12);color:#fff}
.auth-form h2{font:700 23px var(--font-display);color:#F2F6FA;margin:0 0 16px;text-align:center}
.auth-form label{display:block;font:600 12.5px var(--font-ui);color:#8DA2B7;margin:13px 0 6px;letter-spacing:.02em}
.auth-form input,.auth-form select{width:100%;background:#12161C;border:1px solid rgba(156,195,228,.2);border-radius:11px;
  padding:11px 13px;font:15px var(--font-ui);color:#E8EEF5;transition:border-color .15s,box-shadow .15s}
.auth-form input::placeholder{color:#4E5E70}
.auth-form input:focus,.auth-form select:focus{border-color:#6FA0CB;outline:none;box-shadow:0 0 0 3px rgba(78,127,168,.25)}
.auth-form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8DA2B7 50%),linear-gradient(135deg,#8DA2B7 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px;background-repeat:no-repeat}
.auth-form .full{width:100%;margin-top:18px}
.auth-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.auth-two{grid-template-columns:1fr}}
.auth-form .form-switch{color:#8DA2B7}
.auth-form .form-switch a{color:#9CC3E4}
.auth-form .form-error{color:#F08A6A}
.auth-form .demo-accounts{border-top:1px dashed rgba(156,195,228,.2);margin-top:20px;padding-top:15px}
.auth-form .demo-label{color:#8DA2B7}
.auth-form .demo-chip{background:#12161C;border:1px solid rgba(156,195,228,.18);color:#C9DCEF}
.auth-form .demo-chip:hover{border-color:#6FA0CB;background:#182029}
.auth-form .label-hint{color:#6FA0CB;font-weight:400}
/* animación al alternar login <-> registro */
.auth-form:not(.hidden){animation:authSwap .32s cubic-bezier(.22,1,.36,1)}
@keyframes authSwap{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

/* ═══════ LOGO: tamaños coherentes + animación simple (sin capas) ═══════ */
.sl-logo{width:112px;height:auto;display:block}
.sl-hero-logo{width:min(320px,64vw);height:auto;display:block}
@keyframes logoFloat{from{transform:translateY(0)}to{transform:translateY(-8px)}}
@keyframes logoGlow{from{filter:drop-shadow(0 10px 26px rgba(120,170,215,.22))}to{filter:drop-shadow(0 14px 44px rgba(156,195,228,.5))}}
.sl-footer .sl-logo{width:100px}
.sidebar-logo{width:128px;height:auto;display:block}
.auth-logo{width:168px;height:auto;display:block}
.sl-nav-inner{padding:8px 24px}
@media (max-width:880px){.sl-hero-logo{width:min(240px,58vw)}}
@media (prefers-reduced-motion:reduce){.sl-hero-wrap{animation:none}}

/* selects acordes al tema oscuro (el desplegable nativo hereda color-scheme) */
.auth-form input,.auth-form select{color-scheme:dark}
.auth-form select option{background:#12161C;color:#E8EEF5}

/* ═══════ Brillo del logo (overlay ceñido a la imagen: no puede desalinearse) ═══════ */
.shine{position:relative;display:inline-block;width:fit-content;line-height:0}
.shine>img{margin:0}
.shine>i{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 34%,rgba(215,232,250,.5) 46%,rgba(255,255,255,.9) 50%,rgba(215,232,250,.5) 54%,transparent 66%);
  background-size:260% 100%;background-repeat:no-repeat;
  -webkit-mask:url('/assets/logo.webp') center/100% 100% no-repeat;
  mask:url('/assets/logo.webp') center/100% 100% no-repeat;
  mix-blend-mode:screen;animation:logoSweep 5.2s ease-in-out infinite}
@keyframes logoSweep{0%{background-position:135% 0}45%,100%{background-position:-135% 0}}
.sl-hero-wrap{margin-bottom:26px;animation:logoFloat 6s ease-in-out infinite alternate,logoGlow 4.5s ease-in-out infinite alternate}
.auth-logo-wrap{display:block;width:fit-content;margin:0 auto 18px}
.sidebar-logo-wrap{display:block;width:fit-content;margin:2px auto 0}
@media (prefers-reduced-motion:reduce){.shine>i{animation:none;display:none}}

/* ═══════ Select custom (reemplaza el desplegable nativo en el registro) ═══════ */
.ns{position:relative}
.ns-native{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;margin:0;padding:0}
.ns-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:#12161C;border:1px solid rgba(156,195,228,.2);border-radius:11px;padding:11px 13px;
  font:15px var(--font-ui);color:#E8EEF5;cursor:pointer;transition:border-color .15s,box-shadow .15s;text-align:left}
.ns-toggle:focus-visible,.ns.open .ns-toggle{border-color:#6FA0CB;outline:none;box-shadow:0 0 0 3px rgba(78,127,168,.25)}
.ns-caret{width:8px;height:8px;border-right:2px solid #8DA2B7;border-bottom:2px solid #8DA2B7;
  transform:rotate(45deg) translateY(-2px);transition:transform .28s cubic-bezier(.22,1,.36,1);flex:none}
.ns.open .ns-caret{transform:rotate(-135deg) translateY(-2px)}
.ns-menu{position:absolute;left:0;right:0;top:calc(100% + 7px);z-index:12;list-style:none;margin:0;padding:6px;
  background:linear-gradient(180deg,#1B222B,#141920);border:1px solid rgba(156,195,228,.26);border-radius:14px;
  box-shadow:0 20px 48px rgba(0,0,0,.55),0 0 0 1px rgba(156,195,228,.05);
  opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top center;pointer-events:none;
  transition:opacity .18s ease,transform .26s cubic-bezier(.22,1,.36,1)}
.ns.open .ns-menu{opacity:1;transform:none;pointer-events:auto}
.ns-opt{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;
  color:#C9DCEF;cursor:pointer;font:14.5px var(--font-ui);transition:background .12s,color .12s}
.ns-opt:hover{background:rgba(78,127,168,.18);color:#fff}
.ns-opt em{font-style:normal;opacity:0;color:#9CC3E4;transition:opacity .15s}
.ns-opt.sel{color:#fff}
.ns-opt.sel em{opacity:1}

/* ═══════════════ LAYOUT MOBILE (fluido en cualquier tamaño) ═══════════════ */
.mobile-top,.mobile-nav{display:none}
@media (max-width:820px){
  .app{display:block}
  .sidebar{display:none}
  .main{min-height:100svh;padding-bottom:76px}
  .mobile-top{display:flex;align-items:center;gap:12px;background:linear-gradient(180deg,#1B222B,#171C23);
    border-bottom:1px solid rgba(156,195,228,.14);padding:10px 14px;position:sticky;top:0;z-index:25}
  .mobile-top-logo{width:96px;height:auto;display:block}
  .m-gauge{margin-left:auto;font:500 11.5px var(--font-mono);color:#9CC3E4;background:rgba(78,127,168,.15);
    border:1px solid rgba(156,195,228,.25);border-radius:999px;padding:5px 10px;white-space:nowrap}
  .mobile-top .btn-ghost{color:#C9DCEF;font-size:17px;min-width:40px;min-height:40px}
  .mobile-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;
    background:rgba(20,24,29,.96);backdrop-filter:blur(12px);border-top:1px solid rgba(156,195,228,.16);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .mobile-nav .nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:7px 2px;border-radius:12px;font:500 10.5px var(--font-ui);color:#7E93A8;text-decoration:none;
    transition:color .15s,background .15s;min-height:48px;justify-content:center}
  .mobile-nav .nav-ico{font-size:17px;line-height:1}
  .mobile-nav .nav-item.active{color:#C9DCEF;background:rgba(78,127,168,.18)}
  .topbar{flex-wrap:wrap;gap:10px;padding:12px 14px}
  .topbar .breadcrumb{width:100%;order:0}
  .topbar-actions{width:100%;order:1;display:flex;gap:8px}
  .topbar-actions .search{flex:1;min-width:0}
  .btn,.demo-chip{min-height:44px}
  .btn-ghost{min-height:44px;min-width:44px}
  .content{padding:14px}
  .file-table th,.file-table td{padding:10px 8px;font-size:13.5px}
  .modal{width:min(94vw,440px)}
  /* overlay de auth como hoja completa en pantallas pequeñas */
  .auth-overlay{padding:0;align-items:stretch}
  .auth-card{width:100vw;max-height:100svh;border-radius:0;padding:28px 22px calc(24px + env(safe-area-inset-bottom))}
}
@media (max-width:520px){
  .sl-stats{gap:26px}
  .sl-hero{padding-bottom:170px}
  .l-hero-cta,.sl-hero-cta{flex-direction:column;align-items:stretch}
  .sl-hero-cta .sl-btn{width:100%}
}

/* ═══════════════ PLANES (landing) ═══════════════ */
.sl-tabs{display:inline-flex;gap:4px;padding:5px;margin:0 auto 34px;border-radius:14px;
  background:#171C23;border:1px solid rgba(156,195,228,.16)}
.sl-tab{background:transparent;border:none;border-radius:10px;padding:9px 18px;cursor:pointer;
  font:600 13.5px var(--font-ui);color:#8DA2B7;transition:background .2s,color .2s}
.sl-tab:hover{color:#C9DCEF}
.sl-tab.on{background:linear-gradient(135deg,#4E7FA8,#35618A);color:#fff;box-shadow:0 4px 14px rgba(78,127,168,.3)}
.sl-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;text-align:left;align-items:stretch}
.sl-plans.dense{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.sl-plan{position:relative;display:flex;flex-direction:column;background:linear-gradient(180deg,#1B222B,#171C23);
  border:1px solid rgba(156,195,228,.14);border-radius:18px;padding:24px 22px;transition:border-color .2s,box-shadow .2s,transform .18s}
.sl-plan:hover{border-color:rgba(156,195,228,.34);transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.38)}
.sl-plan.hot{border-color:rgba(120,170,215,.5);box-shadow:0 0 0 1px rgba(120,170,215,.18),0 18px 44px rgba(0,0,0,.42)}
.sl-badge{position:absolute;top:-10px;left:22px;background:linear-gradient(135deg,#4E7FA8,#35618A);color:#fff;
  font:600 10.5px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.sl-plan h3{font:700 20px var(--font-display);color:#F2F6FA;margin:0 0 3px}
.sl-plan h3.sl-plan-sm{font-size:15.5px;line-height:1.3;min-height:2.6em}
.sl-plan-tag{font-size:12.5px;color:#7E93A8;margin:0 0 14px}
.sl-price{font:700 30px var(--font-display);color:#C9DCEF;margin-bottom:4px;line-height:1.1}
.sl-price span{display:block;font:400 12px var(--font-ui);color:#7E93A8;margin-top:3px}
.sl-plan-setup{font:500 12px var(--font-mono);color:#9CC3E4;margin:0 0 10px}
.sl-plan ul{list-style:none;margin:14px 0 20px;padding:0;flex:1}
.sl-plan li{position:relative;padding:6px 0 6px 20px;font-size:13.5px;color:#A9BDD2}
.sl-plan li::before{content:'✓';position:absolute;left:0;color:#6FA0CB;font-size:11px;font-weight:700;top:7px}
.sl-btn.full{width:100%}
.sl-fineprint{max-width:70ch;margin:26px auto 0;font-size:12.5px;color:#7E93A8;line-height:1.65}
.sl-custom{margin-top:26px;padding:28px;border-radius:18px;text-align:center;
  background:linear-gradient(135deg,rgba(78,127,168,.16),rgba(24,48,72,.3));border:1px dashed rgba(156,195,228,.3)}
.sl-custom h3{font:700 20px var(--font-display);color:#F2F6FA;margin:0 0 8px}
.sl-custom p{color:#A9BDD2;font-size:14.5px;max-width:56ch;margin:0 auto 18px}

/* ═══════════════ CONTACTO ═══════════════ */
.sl-contact-inner{max-width:1000px;margin:0 auto;padding:82px 24px;text-align:center}
.sl-contact-inner .sl-lead-light{margin:0 auto 34px;max-width:56ch}
.sl-contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.sl-contact-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 20px;border-radius:16px;
  background:rgba(255,255,255,.05);border:1px solid rgba(156,195,228,.18);text-decoration:none;transition:border-color .2s,background .2s,transform .18s}
a.sl-contact-card:hover{border-color:#6FA0CB;background:rgba(255,255,255,.09);transform:translateY(-3px)}
.sl-contact-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:19px;margin-bottom:6px;
  background:rgba(78,127,168,.28);color:#C9DCEF;border:1px solid rgba(156,195,228,.22)}
.sl-contact-card b{font:600 15px var(--font-display);color:#E8EEF5}
.sl-contact-card span:last-child{font-size:13.5px;color:#8DA2B7;line-height:1.5}

/* ═══════════════ Selector de plan en el registro ═══════════════ */
.plan-pick{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:6px}
.plan-opt{position:relative;text-align:left;background:#12161C;border:1px solid rgba(156,195,228,.2);border-radius:12px;
  padding:11px 12px;cursor:pointer;transition:border-color .16s,background .16s;color:#E8EEF5}
.plan-opt:hover{border-color:#6FA0CB;background:#182029}
.plan-opt.on{border-color:#6FA0CB;background:rgba(78,127,168,.18);box-shadow:0 0 0 3px rgba(78,127,168,.2)}
.plan-opt b{display:block;font:600 14px var(--font-ui);margin-bottom:2px}
.plan-opt span{display:block;font:500 11.5px var(--font-mono);color:#9CC3E4}
.plan-opt em{display:block;font-style:normal;font-size:11.5px;color:#7E93A8;margin-top:2px}
.plan-skip{margin-top:9px;font-size:12.5px;color:#7E93A8;text-align:center;line-height:1.5}

/* ═══════════════ Aviso de espacio lleno (app) ═══════════════ */
.quota-alert{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px;padding:15px 18px;border-radius:14px;
  background:linear-gradient(135deg,rgba(200,140,80,.16),rgba(78,127,168,.14));border:1px solid rgba(220,170,110,.34)}
.quota-alert b{font:600 14.5px var(--font-display);color:#F2F6FA;display:block;margin-bottom:2px}
.quota-alert p{margin:0;font-size:13px;color:#A9BDD2}
.quota-alert .grow{flex:1;min-width:200px}
.upgrade-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:6px}
.upgrade-card{background:#12161C;border:1px solid rgba(156,195,228,.18);border-radius:14px;padding:18px}
.upgrade-card.on{border-color:#6FA0CB;box-shadow:0 0 0 2px rgba(78,127,168,.22)}
.upgrade-card h4{font:700 16px var(--font-display);color:#F2F6FA;margin:0 0 2px}
.upgrade-card .up-price{font:700 21px var(--font-display);color:#C9DCEF;margin:6px 0 2px}
.upgrade-card .up-period{font-size:11.5px;color:#7E93A8}
.upgrade-card ul{list-style:none;margin:12px 0 14px;padding:0}
.upgrade-card li{padding:4px 0 4px 17px;position:relative;font-size:12.5px;color:#A9BDD2}
.upgrade-card li::before{content:'✓';position:absolute;left:0;color:#6FA0CB;font-size:10px;font-weight:700;top:5px}

@media (max-width:560px){
  .sl-tabs{width:100%;flex-direction:column}
  .plan-pick{grid-template-columns:1fr}
}

/* ═══════════════ Configurador de servidor ═══════════════ */
.sl-builder{margin-top:26px;border-radius:20px;overflow:hidden;text-align:left;
  background:linear-gradient(160deg,#1B222B,#141920);border:1px solid rgba(156,195,228,.2)}
.sl-builder-head{padding:26px 26px 0}
.sl-builder-head h3{font:700 22px var(--font-display);color:#F2F6FA;margin:0 0 6px}
.sl-builder-head p{color:#8DA2B7;font-size:14.5px;margin:0}
.sl-builder-body{display:grid;grid-template-columns:1.55fr 1fr;gap:24px;padding:24px 26px 26px}
.sl-bgroup{margin-bottom:18px}
.sl-bgroup>label{display:block;font:600 12px var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:#8DA2B7;margin-bottom:8px}
.sl-bopts{display:flex;flex-wrap:wrap;gap:7px}
.sl-bopt{background:#12161C;border:1px solid rgba(156,195,228,.2);border-radius:10px;padding:8px 12px;cursor:pointer;
  font:500 13.5px var(--font-ui);color:#C9DCEF;transition:border-color .15s,background .15s,color .15s;display:flex;align-items:center;gap:6px}
.sl-bopt:hover{border-color:#6FA0CB;background:#182029}
.sl-bopt.on{border-color:#6FA0CB;background:rgba(78,127,168,.25);color:#fff;box-shadow:0 0 0 2px rgba(78,127,168,.2)}
.sl-bopt em{font-style:normal;font:500 11.5px var(--font-mono);color:#9CC3E4}
.sl-builder-sum{align-self:start;position:sticky;top:86px;background:#12161C;border:1px solid rgba(156,195,228,.24);
  border-radius:16px;padding:22px}
.sl-sum-label{font:600 11.5px var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:#7E93A8}
.sl-sum-price{font:700 36px var(--font-display);color:#C9DCEF;margin:8px 0 2px;line-height:1}
.sl-sum-price span{display:block;font:400 12px var(--font-ui);color:#7E93A8;margin-top:4px}
.sl-sum-setup{font:500 12.5px var(--font-mono);color:#9CC3E4;margin:0 0 16px}
.sl-sum-list{list-style:none;margin:0 0 18px;padding:14px 0 0;border-top:1px dashed rgba(156,195,228,.2)}
.sl-sum-list li{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:13px}
.sl-sum-list span{color:#7E93A8}
.sl-sum-list b{color:#E8EEF5;font-weight:600;text-align:right}
.sl-sum-fine{font-size:11.5px;color:#7E93A8;margin:12px 0 0;text-align:center;line-height:1.5}
@media (max-width:860px){.sl-builder-body{grid-template-columns:1fr}.sl-builder-sum{position:static}}

/* ═══════════════ Checkout ═══════════════ */
.modal-wide{width:min(94vw,520px)}
/* El checkout hereda el tema del modal: nada de colores fijos de oscuro —
   en modo claro los importes eran casi invisibles sobre el fondo blanco. */
.co-item{background:var(--shallows);border:1px solid var(--line);border-radius:13px;padding:16px 18px;margin-bottom:14px}
.co-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.co-head b{font:700 17px var(--font-display);color:var(--text)}
.co-term{font:500 11.5px var(--font-mono);color:var(--teal-deep);background:rgba(78,127,168,.16);border-radius:999px;padding:3px 9px}
.co-specs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:5px 14px}
.co-specs li{position:relative;padding-left:15px;font-size:12.5px;color:var(--muted)}
.co-specs li::before{content:'✓';position:absolute;left:0;color:var(--teal);font-size:10px;top:2px}
.co-lines{padding:4px 2px}
.co-line{display:flex;justify-content:space-between;padding:8px 0;font-size:14px;color:var(--muted)}
.co-line b{color:var(--text);font-family:var(--font-mono);font-weight:600}
.co-line.total{border-top:1px solid var(--line);margin-top:6px;padding-top:12px;font-size:16px}
.co-line.total b{color:var(--teal-deep);font:700 19px var(--font-display)}
.co-note{font-size:12px;color:var(--muted);margin:10px 0 0;line-height:1.55}

/* ═══════════════ Facturación ═══════════════ */
.bill-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 0;border-bottom:1px solid rgba(156,195,228,.1)}
.bill-row:last-child{border-bottom:none}
.bill-row .grow{flex:1;min-width:210px}
.bill-row b{display:block;font:600 15px var(--font-display);color:#E8EEF5}
.bill-row span{display:block;font-size:12.5px;color:#7E93A8}
.bill-specs{font-family:var(--font-mono);font-size:11.5px!important;color:#5F7285!important;margin-top:3px}
.bill-next{color:#9CC3E4!important;margin-top:3px}
.bill-status{font:600 10.5px var(--font-ui)!important;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;display:inline-block!important}
.bill-status.active{background:rgba(78,168,120,.2);color:#7FD6A5}
.bill-status.pending{background:rgba(200,160,80,.2);color:#E0BE7A}
.bill-status.past_due{background:rgba(220,120,80,.2);color:#F0A080}
.bill-status.cancelled,.bill-status.suspended{background:rgba(140,150,160,.18);color:#9BA8B5}

/* ═══════════════ Área de pago PayPal en el checkout ═══════════════ */
.pp-area{margin:18px 0 6px;min-height:52px}
.pp-area .full{width:100%}
.pp-loading{display:flex;align-items:center;justify-content:center;gap:10px;height:52px;
  color:var(--muted);font-size:13.5px;background:var(--shallows);border:1px solid var(--line);border-radius:12px}
.pp-loading::before{content:'';width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(156,195,228,.3);border-top-color:#6FA0CB;animation:ppSpin .7s linear infinite}
@keyframes ppSpin{to{transform:rotate(360deg)}}
.pp-sim{margin:9px 0 0;text-align:center;font-size:11.5px;color:var(--muted);font-style:italic}
.pp-error{margin:10px 0 0;padding:11px 13px;border-radius:11px;font-size:13px;color:#B4432B;
  background:rgba(217,83,43,.1);border:1px solid rgba(217,83,43,.3)}
.co-hold{margin:14px 0 0;padding:12px 14px;border-radius:12px;font-size:13px;line-height:1.55;color:#8A5A18;
  background:rgba(220,170,110,.16);border:1px solid rgba(200,150,90,.4)}
[data-theme="dark"] .pp-error{color:#F0B49A;background:rgba(200,110,80,.14);border-color:rgba(220,140,110,.3)}
[data-theme="dark"] .co-hold{color:#E8C08A;background:rgba(220,170,110,.13);border-color:rgba(220,170,110,.3)}

/* ═══════════ Espacios (público/privado) ═══════════ */
.space-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.space-tab{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 15px;
  font:600 13px var(--font-ui);color:var(--muted);cursor:pointer;transition:all .15s}
.space-tab:hover{border-color:var(--teal);color:var(--text)}
.space-tab.on{background:var(--shallows);border-color:var(--teal);color:var(--teal-deep)}
.space-pick{border:1px solid var(--line);border-radius:999px;padding:8px 12px;font:500 13px var(--font-ui);color:var(--muted);background:var(--card)}
.space-note{font-size:12px;color:#B07A3A;background:rgba(220,170,110,.14);border:1px solid rgba(200,150,90,.3);
  border-radius:999px;padding:6px 12px}

/* ═══════════ Equipo ═══════════ */
.team-actions{display:flex;gap:10px;margin-bottom:16px}
.team-sub{font:600 15px var(--font-display);color:var(--text);margin:22px 0 10px}
.avatar.inv{background:var(--shallows);color:var(--teal-deep);font-size:14px}
.inv-link{display:block;font-size:11px;color:var(--muted);word-break:break-all;margin-top:2px}
.member-result{background:var(--shallows);border:1px solid var(--line);border-radius:11px;padding:11px 13px;font-size:13.5px;color:var(--text)}
.row-act{font-size:13px}

/* ═══════════ Servidores ═══════════ */
.srv-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;margin-bottom:16px;box-shadow:var(--shadow)}
.srv-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.srv-head b{font:700 17px var(--font-display);color:var(--text)}
.srv-pill{font:600 11px var(--font-ui);text-transform:uppercase;letter-spacing:.05em;border-radius:999px;padding:4px 11px}
.srv-pill.ok{background:rgba(90,180,130,.15);color:#2E7D4F;border:1px solid rgba(90,180,130,.3)}
.srv-pill.wait{background:rgba(220,170,110,.15);color:#B07A3A;border:1px solid rgba(200,150,90,.3)}
.srv-pill.reboot{background:var(--shallows);color:var(--teal-deep);border:1px solid var(--teal);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.55}}
.srv-price{margin-left:auto;color:var(--muted);font-size:13px}
.srv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.srv-block h4{font:600 12px var(--font-ui);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 8px;display:flex;align-items:center;gap:8px}
.srv-specs,.srv-ips{list-style:none;margin:0;padding:0}
.srv-specs li{padding:3px 0;font-size:13px;color:var(--text)}
.srv-ips li{padding:2px 0;font-size:12.5px;color:var(--teal-deep)}
.srv-more,.srv-none{font-size:12px;color:var(--muted)}
.srv-next{font-size:12px;color:var(--muted);margin:10px 0 0}
.srv-addon-tag{background:var(--shallows);color:var(--teal-deep);font-size:10px;border-radius:999px;padding:2px 8px;text-transform:none;letter-spacing:0}
.srv-demo-tag{background:rgba(220,170,110,.15);color:#B07A3A;font-size:9.5px;border-radius:999px;padding:2px 7px;text-transform:none;letter-spacing:0}
.spark{width:100%;height:44px;display:block;margin-bottom:10px;border-radius:6px;background:var(--paper)}
.srv-tele h4:nth-of-type(2){margin-top:2px}
.srv-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.btn-sm{padding:8px 14px;font-size:13px}
.srv-log{flex:1;min-width:100%}
.srv-log summary{font-size:12.5px;color:var(--muted);cursor:pointer;padding:4px 0}
.srv-log ul{list-style:none;margin:8px 0 0;padding:0;max-height:150px;overflow:auto}
.srv-log li{font-size:12px;color:var(--text);padding:3px 0;border-bottom:1px dashed var(--line)}
.srv-log li .mono{color:var(--muted);margin-right:8px}

/* ═══════════ Modal de bloques IP ═══════════ */
.modal-sub{font-size:13.5px;color:var(--muted);margin:-6px 0 14px;line-height:1.55}
.ip-field{width:100%}
.ip-packs{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:6px 0 4px}
.ip-pack{text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:11px 13px;cursor:pointer;transition:all .15s}
.ip-pack:hover{border-color:var(--teal)}
.ip-pack.on{border-color:var(--teal);background:var(--shallows);box-shadow:0 0 0 3px rgba(78,127,168,.15)}
.ip-pack b{display:block;font:600 13px var(--font-ui);color:var(--text);margin-bottom:3px}
.ip-pack span{font:500 11.5px var(--font-mono);color:var(--teal-deep)}
.ip-qty-row{display:flex;align-items:center;gap:12px;margin-top:6px}
.ip-qty{font:700 17px var(--font-display);min-width:26px;text-align:center}
.ip-total{margin-left:auto;font-size:13px;color:var(--muted)}
.ip-total b{color:var(--text);font-size:15px}
@media (max-width:560px){.ip-packs{grid-template-columns:1fr}}

.sl-staff{color:#5F7285;text-decoration:none;transition:color .15s}
.sl-staff:hover{color:#9CC3E4}


/* ───────── carrito de pagos pendientes ───────── */
.cart-btn {
  position: relative; width: 40px; height: 38px; border-radius: 10px;
  border: 1px solid var(--line, #2a3340); background: transparent;
  font-size: 17px; cursor: pointer; display: grid; place-items: center;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.cart-btn:hover { border-color: var(--accent, #4E7FA8); background: rgba(78,127,168,.12); transform: translateY(-1px); }
.cart-badge {
  position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 999px; background: linear-gradient(135deg, #4E7FA8, #7fb2dd);
  color: #06121f; font-size: 11px; font-weight: 800; display: grid; place-items: center;
  box-shadow: 0 2px 10px rgba(78,127,168,.55); pointer-events: none;
}
.cart-badge.pop { animation: cartPop .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes cartPop { 0% { transform: scale(.3); } 60% { transform: scale(1.5); } 100% { transform: scale(1); } }
.cart-bounce { animation: cartBounce .5s cubic-bezier(.2,1.8,.35,1); }
@keyframes cartBounce { 0% { transform: scale(1); } 35% { transform: scale(1.28) rotate(-6deg); } 70% { transform: scale(.94) rotate(3deg); } 100% { transform: scale(1); } }
.fly-chip {
  position: fixed; z-index: 1000; transform: translate(0, 0) scale(1);
  padding: 7px 14px; border-radius: 999px; pointer-events: none;
  background: linear-gradient(135deg, #C9DCEF, #7fb2dd);
  color: #0b1622; font-weight: 700; font-size: 13px; white-space: nowrap;
  box-shadow: 0 6px 26px rgba(127,178,221,.65), 0 0 0 1px rgba(255,255,255,.25) inset;
  transition: transform .8s cubic-bezier(.45,.05,.35,1.1), opacity .8s ease;
  opacity: 1;
}
.cart-body { display: flex; flex-direction: column; gap: 10px; min-height: 60px; }
.cart-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--line, #2a3340); border-radius: 12px;
  animation: cartRowIn .3s ease both;
}
@keyframes cartRowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cart-row .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cart-row b { font-size: 14px; }
.cart-row span { font-size: 12.5px; color: var(--muted, #93a4b6); }
.cart-x { padding: 6px 10px; }
.cart-empty { padding: 14px 4px; }

/* ───────── selector mensual / anual en el checkout ───────── */
.co-terms { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 4px; }
.co-term-btn {
  position: relative; padding: 12px 10px 10px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line, #2a3340); background: transparent; color: inherit;
  font-weight: 700; font-size: 14px; display: flex; flex-direction: column; gap: 3px; align-items: center;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.co-term-btn em { font-style: normal; font-weight: 500; font-size: 12.5px; color: var(--muted, #93a4b6); }
.co-term-btn:hover { border-color: var(--accent, #4E7FA8); transform: translateY(-1px); }
.co-term-btn.on { border-color: var(--accent, #4E7FA8); background: rgba(78,127,168,.14); box-shadow: 0 0 0 1px var(--accent, #4E7FA8) inset; }
.co-promo {
  position: absolute; top: -9px; right: 10px; font-style: normal;
  background: linear-gradient(135deg, #e9c46a, #f4a261); color: #241a05;
  font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(233,196,106,.4);
}
.co-strike { color: var(--muted, #93a4b6); font-weight: 500; margin-right: 6px; }
.svc-sub { margin: 18px 2px 8px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #93a4b6); }


/* ───────── desplegables del catálogo (Billing) ───────── */
.acc {
  border: 1px solid var(--line, #2a3340); border-radius: 14px; margin: 10px 0;
  overflow: hidden; background: rgba(255,255,255,.015);
  transition: border-color .2s ease;
}
.acc[open] { border-color: var(--accent, #4E7FA8); }
.acc summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 12px; padding: 15px 18px;
  transition: background .15s ease;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { background: rgba(78,127,168,.09); }
.acc summary b { font-size: 15px; }
.acc-meta { color: var(--muted, #93a4b6); font-size: 12.5px; margin-left: auto; }
.acc-chev { font-style: normal; font-size: 18px; line-height: 1; color: var(--muted, #93a4b6); transition: transform .25s ease; }
.acc[open] .acc-chev { transform: rotate(180deg); color: var(--accent, #4E7FA8); }
.acc-body { padding: 4px 16px 16px; animation: accIn .3s ease both; }
@keyframes accIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ───────── brillo que señala dónde está el carrito ───────── */
.cart-glow { animation: cartGlow 2.4s ease; }
@keyframes cartGlow {
  0%, 100% { box-shadow: none; }
  12%, 55% { box-shadow: 0 0 0 3px rgba(127,178,221,.85), 0 0 24px 6px rgba(127,178,221,.55); border-color: #7fb2dd; }
  80% { box-shadow: 0 0 0 2px rgba(127,178,221,.35), 0 0 12px 2px rgba(127,178,221,.25); }
}


/* ───────── logo del nav del landing: independiente y protagonista ─────────
   (clase propia: cambiarla no toca el logo del footer, del hero ni de la app) */
.sl-logo-nav { width: 152px; height: auto; display: block; }
@media (max-width: 880px) { .sl-logo-nav { width: 124px; } }
.sl-nav-glow { filter: drop-shadow(0 0 0 rgba(127,178,221,0)); animation: navLogoGlow 5s ease-in-out infinite; }
@keyframes navLogoGlow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(127,178,221,.18)); }
  50% { filter: drop-shadow(0 0 16px rgba(127,178,221,.6)) drop-shadow(0 0 34px rgba(78,127,168,.35)); }
}
/* barrido de brillo propio, más frecuente y ancho que el genérico */
.sl-nav-glow > i {
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  background-size: 240% 100%;
  animation: navSweep 3.4s cubic-bezier(.4,0,.2,1) infinite;
  mix-blend-mode: screen;
}
@keyframes navSweep { 0% { background-position: 130% 0; } 55%, 100% { background-position: -130% 0; } }
@media (prefers-reduced-motion: reduce) { .sl-nav-glow, .sl-nav-glow > i { animation: none; } }

/* ───────── logo de la app (sidebar): un poco más visible, clase propia ───────── */
.sidebar-logo { width: 146px; filter: drop-shadow(0 0 10px rgba(78,127,168,.35)); }

/* ───────── desplegable de documentación (nav del landing) ───────── */
.sl-docs { position: relative; }
.sl-docs-btn {
  background: none; border: none; cursor: pointer;
  font: 500 14px var(--font-ui); color: #A9BDD2; line-height: inherit;
  display: inline-flex; align-items: center; gap: 5px; padding: 0;
  transition: color .15s;
}
.sl-docs-btn:hover, .sl-docs-btn.on { color: #E8F1FA; }
.sl-docs-chev { font-style: normal; font-size: 15px; line-height: 1; transition: transform .22s ease; }
.sl-docs-btn.on .sl-docs-chev { transform: rotate(180deg); }
.sl-docs-menu {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  min-width: 250px; padding: 8px; border-radius: 14px; z-index: 60;
  background: rgba(16, 20, 26, .96); border: 1px solid rgba(201,220,239,.16);
  backdrop-filter: blur(14px); box-shadow: 0 18px 50px rgba(0,0,0,.55);
  display: flex; flex-direction: column; gap: 2px;
  animation: docsIn .22s cubic-bezier(.2,1,.35,1) both;
}
@keyframes docsIn { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.sl-docs-menu a, .sl-docs-item {
  display: block; padding: 9px 12px; border-radius: 9px; font-size: 13.5px;
  color: rgba(201,220,239,.85); text-decoration: none; transition: background .13s, color .13s;
}
.sl-docs-menu a:hover { background: rgba(78,127,168,.18); color: #fff; }
.sl-docs-head {
  padding: 9px 12px 3px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(147,164,182,.75);
}
.sl-docs-item.disabled { color: rgba(147,164,182,.55); cursor: default; }
.sl-wip {
  font-style: normal; margin-left: 7px; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; letter-spacing: .05em; vertical-align: 1px;
  background: rgba(233,196,106,.16); border: 1px solid rgba(233,196,106,.4); color: #e9c46a;
}

/* ───────── sección de soberanía de datos ───────── */
.sl-sov { padding-top: 26px; }
.sl-sov-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
@media (max-width: 880px) { .sl-sov-grid { grid-template-columns: 1fr; } }
.sl-sov-card {
  position: relative; padding: 26px 24px; border-radius: 16px;
  background: linear-gradient(165deg, #171C23, #10141A);
  border: 1px solid rgba(201,220,239,.13); color: rgba(201,220,239,.8);
  overflow: hidden; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.sl-sov-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, #7fb2dd, transparent);
  opacity: .6;
}
.sl-sov-card:hover { transform: translateY(-5px); border-color: rgba(127,178,221,.5); box-shadow: 0 16px 44px rgba(8,14,22,.5); }
.sl-sov-ico { font-size: 26px; display: block; margin-bottom: 12px; color: #9CC3E4; }
.sl-sov-card h3 { color: #EAF2FA; font-size: 17px; margin-bottom: 9px; }
.sl-sov-card p { font-size: 13.5px; line-height: 1.75; }
.sl-sov-card b { color: #C9DCEF; }


/* ───────── landing: fondo del hero con más vida (misma estética) ───────── */
.sl-aurora {
  position: absolute; inset: -30% -20%; pointer-events: none; opacity: .5;
  background: conic-gradient(from 210deg at 50% 40%,
    transparent 0deg, rgba(78,127,168,.16) 70deg, rgba(201,220,239,.10) 120deg,
    transparent 180deg, rgba(53,97,138,.14) 260deg, transparent 330deg);
  filter: blur(46px);
  animation: auroraTurn 26s linear infinite;
}
@keyframes auroraTurn { from { transform: rotate(0deg) scale(1.05); } to { transform: rotate(360deg) scale(1.05); } }
.sl-orb.o3 {
  width: 260px; height: 260px; bottom: 18%; left: 30%;
  background: rgba(78,127,168,.18);
  transform: translate(calc(var(--mx,0)*18px), calc(var(--my,0)*30px));
  animation: orbDrift 14s ease-in-out infinite alternate;
}
@keyframes orbDrift { from { margin-left: -30px; } to { margin-left: 40px; margin-bottom: 26px; } }
.sl-streaks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sl-streaks i {
  position: absolute; top: -12%; width: 1.5px; height: 120px; border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(201,220,239,.85), transparent);
  opacity: 0; transform: rotate(24deg);
  animation: streakFall 9s linear infinite;
}
.sl-streaks i:nth-child(1) { left: 18%; animation-delay: 2.2s; }
.sl-streaks i:nth-child(2) { left: 58%; height: 90px; animation-delay: 5.6s; animation-duration: 8s; }
.sl-streaks i:nth-child(3) { left: 82%; height: 140px; animation-delay: 8.4s; animation-duration: 10s; }
@keyframes streakFall {
  0%, 88% { opacity: 0; transform: rotate(24deg) translateY(0); }
  90% { opacity: .9; }
  100% { opacity: 0; transform: rotate(24deg) translateY(72vh); }
}
/* secciones oscuras: rejilla que respira, muy sutil */
.sl-dark { position: relative; overflow: hidden; }
.sl-dark::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(78,127,168,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(78,127,168,.07) 1px, transparent 1px);
  background-size: 34px 34px;
  animation: gridBreath 18s linear infinite;
}
@keyframes gridBreath { from { background-position: 0 0; } to { background-position: 34px 34px; } }
.sl-dark > * { position: relative; }
@media (prefers-reduced-motion: reduce) { .sl-aurora, .sl-streaks i, .sl-dark::before, .sl-orb.o3 { animation: none; } }

/* ═════════ REVAMP VISUAL DE LA APP DEL CLIENTE (v21) ═════════
   Misma paleta y lenguaje; más profundidad, y el logo como protagonista. */

/* lienzo general con un degradado frío muy suave */
.app { background:
  radial-gradient(900px 340px at 82% -6%, rgba(78,127,168,.10), transparent 60%),
  linear-gradient(180deg, #F2F5F9, #F5F7FA 40%); }

/* sidebar: más profundidad y un pedestal luminoso para el logo */
.sidebar {
  background:
    radial-gradient(340px 200px at 50% 0%, rgba(78,127,168,.30), transparent 70%),
    linear-gradient(180deg, #10161E 0%, #16283C 52%, #122031 100%);
  border-right: 1px solid rgba(201,220,239,.10);
  box-shadow: inset -18px 0 34px -26px rgba(0,0,0,.55);
}
.sidebar-brand { position: relative; padding: 8px 0 16px; margin-bottom: 10px; }
.sidebar-brand::after {
  content: ''; position: absolute; left: 8%; right: 8%; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,220,239,.35), transparent);
}
.sidebar-logo {
  width: 158px;
  filter: drop-shadow(0 0 14px rgba(127,178,221,.55)) drop-shadow(0 4px 18px rgba(0,0,0,.4));
  animation: brandBreath 6s ease-in-out infinite;
}
@keyframes brandBreath {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(127,178,221,.4)) drop-shadow(0 4px 18px rgba(0,0,0,.4)); }
  50% { filter: drop-shadow(0 0 20px rgba(127,178,221,.75)) drop-shadow(0 4px 18px rgba(0,0,0,.4)); }
}
/* barrido de brillo propio del logo de la app, elegante y espaciado */
.sidebar-logo-wrap > i {
  background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.5) 50%, transparent 66%);
  background-size: 260% 100%;
  animation: appSweep 6s cubic-bezier(.4,0,.2,1) infinite;
  mix-blend-mode: screen;
}
@keyframes appSweep { 0%, 55% { background-position: 135% 0; } 90%, 100% { background-position: -135% 0; } }

/* navegación lateral */
.nav-item { border-radius: 11px; margin: 1px 0; transition: background .16s, color .16s, transform .16s; }
.nav-item:hover { transform: translateX(3px); }
.nav-item.active {
  background: linear-gradient(90deg, rgba(78,127,168,.34), rgba(78,127,168,.12));
  box-shadow: inset 3px 0 0 #7fb2dd, 0 0 18px -6px rgba(78,127,168,.55);
}
.nav-ico { opacity: .9; }

/* topbar de cristal */
.topbar {
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(20,40,60,.08);
}
.search { border-radius: 999px; }

/* tarjetas: filo superior luminoso + elevación al pasar */
.usage-card, .stat {
  position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid #E6ECF2;
  box-shadow: 0 1px 2px rgba(10,37,51,.05), 0 10px 30px rgba(10,37,51,.07);
  transition: transform .2s ease, box-shadow .2s ease;
}
.usage-card::before, .stat::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(78,127,168,.55), transparent);
  opacity: .7;
}
.stat:hover { transform: translateY(-3px); box-shadow: 0 3px 6px rgba(10,37,51,.06), 0 16px 40px rgba(10,37,51,.12); }

/* botones */
.btn-primary {
  background: linear-gradient(135deg, #4E7FA8, #35618A);
  box-shadow: 0 4px 14px rgba(53,97,138,.28);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-primary:hover { background: linear-gradient(135deg, #5589B5, #35618A); filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 7px 20px rgba(53,97,138,.38); }
.btn-primary:active { transform: translateY(0); }

/* títulos de vista con acento de marca */
.view-title { position: relative; padding-left: 14px; }
.view-title::before {
  content: ''; position: absolute; left: 0; top: 15%; bottom: 15%; width: 4px; border-radius: 4px;
  background: linear-gradient(180deg, #7fb2dd, #35618A);
}

/* modales y scrollbars a juego */
.modal { border-radius: 18px; border: 1px solid #E2E8EE; box-shadow: 0 30px 80px rgba(10,25,40,.35); }
.modal::backdrop { background: rgba(12,20,28,.5); backdrop-filter: blur(4px); }
.content::-webkit-scrollbar, body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-thumb { background: #C6D4E0; border-radius: 8px; border: 2px solid var(--paper); }
body::-webkit-scrollbar-thumb:hover { background: #A9BDD2; }


/* ───────── nav: logo sencillo (sin animaciones recurrentes) ───────── */
.sl-nav-glow { animation: none; filter: drop-shadow(0 1px 8px rgba(127,178,221,.28)); }
.sl-nav-glow > i { animation: none; display: none; }

/* ───────── barra de progreso de lectura ───────── */
.sl-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #35618A, #7fb2dd, #C9DCEF);
  box-shadow: 0 0 12px rgba(127,178,221,.6);
}

/* ───────── submenú de SLAs en Documents ───────── */
.sl-docs-sub-btn {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 9px 12px; border-radius: 9px; font: inherit; font-size: 13.5px;
  color: rgba(201,220,239,.85); transition: background .13s, color .13s;
}
.sl-docs-sub-btn:hover { background: rgba(78,127,168,.18); color: #fff; }
.sl-docs-sub-btn .sl-docs-chev { transition: transform .22s ease; }
.sl-docs-sub-btn.on .sl-docs-chev { transform: rotate(180deg); }
.sl-docs-sub {
  margin: 2px 0 4px 10px; padding-left: 8px;
  border-left: 1px solid rgba(127,178,221,.35);
  display: flex; flex-direction: column; gap: 2px;
  animation: docsIn .2s ease both;
}
.sl-docs-sub a { font-size: 13px; padding: 8px 10px; }

/* ───────── HUB del data center, integrado en el landing ───────── */
.sl-hub {
  position: relative; overflow: hidden; padding: 96px 24px 100px;
  background:
    radial-gradient(800px 420px at 78% 14%, rgba(78,127,168,.16), transparent 60%),
    linear-gradient(180deg, #14181D 0%, #0F1722 30%, #121D2B 62%, #14181D 100%);
  color: rgba(201,220,239,.8);
}
.sl-hub::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(78,127,168,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(78,127,168,.07) 1px, transparent 1px);
  background-size: 34px 34px;
  animation: gridBreath 18s linear infinite;
}
.sl-hub-inner { position: relative; max-width: 880px; margin: 0 auto; text-align: center; }
.sl-hub-eyebrow {
  font: 500 11px var(--font-mono); letter-spacing: .28em; text-transform: uppercase;
  color: #7fb2dd; margin-bottom: 16px;
}
.sl-hub .rv { opacity: 0; transform: translateY(26px) scale(.985); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.sl-hub .rv.in { opacity: 1; transform: none; }

/* mapa: llega con un despliegue de cortina + líneas que se dibujan */
.sl-hub-map {
  position: relative; height: 290px; margin: 40px auto 36px; max-width: 760px;
  border-radius: 18px; overflow: hidden;
  background: radial-gradient(460px 300px at 50% 8%, rgba(78,127,168,.30), transparent 70%), #0B1017;
  border: 1px solid rgba(201,220,239,.16);
  box-shadow: 0 26px 70px rgba(0,0,0,.5);
  clip-path: inset(0 46% 0 46% round 18px);
  transition: clip-path 1s cubic-bezier(.7,0,.2,1), opacity .5s ease;
  opacity: 0;
}
.sl-hub-map.in { clip-path: inset(0 0 0 0 round 18px); opacity: 1; }
.sl-hub-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(78,127,168,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(78,127,168,.10) 1px, transparent 1px);
  background-size: 32px 32px; animation: gridBreath 20s linear infinite;
}
.sl-hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sl-hub-line { fill: none; stroke: #4E7FA8; stroke-width: 1.3; opacity: .65; }
@keyframes hubDash { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -40; } }
.sl-hub-dot {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: #C9DCEF; box-shadow: 0 0 10px #C9DCEF;
}
.sl-hub-city {
  position: absolute; font: 500 9.5px var(--font-mono); letter-spacing: .12em;
  text-transform: uppercase; color: rgba(201,220,239,.6);
}
.sl-hub-city.bs {
  color: #C9DCEF; font-size: 10.5px; bottom: 26px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; text-shadow: 0 0 14px rgba(78,127,168,.6);
}
.sl-hub-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.sl-hub-center i {
  position: absolute; border-radius: 50%; border: 1px solid rgba(201,220,239,.35);
  width: 60px; height: 60px; animation: expandRing 3s ease-out infinite;
}
.sl-hub-center i:nth-child(2) { width: 115px; height: 115px; animation-delay: .7s; }
.sl-hub-center i:nth-child(3) { width: 175px; height: 175px; animation-delay: 1.4s; }
@keyframes expandRing { 0% { opacity: .8; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.22); } }
.sl-hub-center b {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: #C9DCEF; box-shadow: 0 0 18px #C9DCEF, 0 0 44px rgba(78,127,168,.5); z-index: 2;
}
.sl-hub-badge {
  position: absolute; top: 14px; right: 14px; padding: 6px 13px; border-radius: 999px;
  background: rgba(78,127,168,.16); border: 1px solid rgba(78,127,168,.55);
  font: 500 9.5px var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: #C9DCEF;
}
.sl-hub-copy { max-width: 640px; margin: 0 auto 26px; font-size: 14px; line-height: 1.85; }
.sl-hub-copy b { color: #E8F1FA; }
.sl-hub-pills { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 26px; }
.sl-hub-pill {
  padding: 11px 18px; border-radius: 12px; text-decoration: none;
  font: 500 11.5px var(--font-ui); letter-spacing: .1em; text-transform: uppercase;
  background: rgba(78,127,168,.12); border: 1px solid rgba(78,127,168,.5); color: #C9DCEF;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.sl-hub-pill:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 30px rgba(0,0,0,.4); background: rgba(78,127,168,.22); }
.sl-hub-unique {
  display: flex; gap: 14px; align-items: center; text-align: left;
  max-width: 640px; margin: 0 auto 30px; padding: 15px 18px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(78,127,168,.18), rgba(201,220,239,.05));
  border: 1px solid rgba(78,127,168,.5); font-size: 12.5px; line-height: 1.65;
}
.sl-hub-unique b { color: #E8F1FA; }
.sl-hub-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; max-width: 560px;
  margin: 0 auto 34px; border-radius: 14px; overflow: hidden;
  background: rgba(201,220,239,.14);
}
.sl-hub-stats > div { background: #0C1118; padding: 18px 12px; display: flex; flex-direction: column; gap: 5px; }
.sl-hub-stats b { font: 800 27px var(--font-display); color: #C9DCEF; line-height: 1; }
.sl-hub-stats span { font: 400 9px var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: #93a4b6; }
.sl-hub-cta { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.sl-hub-cta span { font-size: 12px; color: #93a4b6; }
@media (max-width: 640px) { .sl-hub-map { height: 240px; } .sl-hub-stats { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .sl-hub-map { clip-path: none; opacity: 1; transition: none; }
  .sl-hub-line { stroke-dashoffset: 0; animation: none; }
}


/* ═════════ REWORK ABSOLUTO DE LA APP (v22) — "Harbor Light" ═════════
   El logo tiene trazos oscuros: sobre fondo claro se lee perfecto.
   Sidebar de cristal claro, acentos acero, y movimiento en cada vista. */

/* sidebar: cristal claro — el logo por fin es 100% legible */
.sidebar {
  background:
    radial-gradient(360px 220px at 50% -4%, rgba(78,127,168,.14), transparent 70%),
    linear-gradient(180deg, #FDFEFF 0%, #F0F5FA 55%, #E7EEF6 100%);
  border-right: 1px solid #DCE5EE;
  box-shadow: inset -16px 0 30px -26px rgba(20,40,60,.18);
  color: var(--text);
}
.sidebar-brand { padding: 10px 0 18px; }
.sidebar-brand::after { background: linear-gradient(90deg, transparent, rgba(78,127,168,.4), transparent); }
.sidebar-logo {
  width: 172px;
  animation: none;
  filter: drop-shadow(0 6px 16px rgba(20,40,60,.18));
  transition: transform .25s ease, filter .25s ease;
}
.sidebar-logo-wrap:hover .sidebar-logo { transform: scale(1.03); filter: drop-shadow(0 8px 22px rgba(53,97,138,.3)); }
.sidebar-logo-wrap > i { display: none; }

/* navegación: texto oscuro, activo = píldora acero brillante */
.nav-item { color: #3D5166; font-weight: 500; }
.nav-item:hover { background: rgba(78,127,168,.10); color: #14181D; transform: translateX(4px); }
.nav-item.active {
  background: linear-gradient(135deg, #4E7FA8, #35618A);
  color: #fff;
  box-shadow: 0 6px 18px rgba(53,97,138,.4), inset 0 1px 0 rgba(255,255,255,.22);
  transform: translateX(2px);
}
.nav-item.active .nav-ico { opacity: 1; }
.nav-ext { color: #6B7E92; }

/* medidor de agua sobre claro */
.gauge-tank { border-color: rgba(20,40,60,.30); background: rgba(78,127,168,.06); }
.gauge-ticks i { background: rgba(20,40,60,.28); }
.gauge-text { color: var(--muted); }
.gauge-text strong { color: #14181D; }
.gauge-plan { color: #4E7FA8; }

/* usuario y salida */
.sidebar-user { border-top: 1px solid #DCE5EE; }
.sidebar-user-text strong { color: #14181D; }
.sidebar-user-text span { color: var(--muted); }
.sidebar .btn-ghost { color: #5F7285; }
.sidebar .btn-ghost:hover { color: #14181D; background: rgba(20,40,60,.07); }
.avatar { background: linear-gradient(135deg, #4E7FA8, #7fb2dd); color: #fff; box-shadow: 0 4px 12px rgba(53,97,138,.35); }

/* cada vista entra con una coreografía sutil (WOW en cada clic) */
@keyframes viewRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.content .view-title { animation: viewRise .4s cubic-bezier(.22,1,.36,1) both; }
.content .view-sub { animation: viewRise .4s .05s cubic-bezier(.22,1,.36,1) both; }
.content .stat-grid .stat:nth-child(1) { animation: viewRise .45s .08s cubic-bezier(.22,1,.36,1) both; }
.content .stat-grid .stat:nth-child(2) { animation: viewRise .45s .14s cubic-bezier(.22,1,.36,1) both; }
.content .stat-grid .stat:nth-child(3) { animation: viewRise .45s .20s cubic-bezier(.22,1,.36,1) both; }
.content .stat-grid .stat:nth-child(n+4) { animation: viewRise .45s .26s cubic-bezier(.22,1,.36,1) both; }
.content .usage-card { animation: viewRise .5s .12s cubic-bezier(.22,1,.36,1) both; }
.content .usage-card ~ .usage-card { animation-delay: .2s; }
.content .quota-alert { animation: viewRise .4s both; }

/* tarjetas del catálogo: brillo reactivo al pasar */
.upgrade-card {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  border-radius: 14px;
}
.upgrade-card:hover {
  transform: translateY(-5px);
  border-color: rgba(78,127,168,.6);
  box-shadow: 0 4px 8px rgba(10,37,51,.06), 0 18px 44px rgba(53,97,138,.20);
}
.acc summary:active { transform: scale(.995); }

/* filas (archivos, facturación, carrito) con hover con vida */
.bill-row, .cart-row { transition: background .15s ease, transform .15s ease, border-color .15s ease; }
.bill-row:hover, .cart-row:hover { background: rgba(78,127,168,.05); transform: translateX(3px); border-color: rgba(78,127,168,.35); }

/* botón primario con barrido de luz al pasar (efecto WOW discreto) */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
  background-size: 240% 100%; background-position: 130% 0;
  transition: background-position .6s ease;
}
.btn-primary:hover::after { background-position: -130% 0; }

/* topbar: hairline inferior con gradiente de marca */
.topbar { border-bottom: none; box-shadow: 0 1px 0 #E2E8EE, 0 2px 14px rgba(20,40,60,.05); }
.topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(78,127,168,.4), transparent);
  pointer-events: none;
}
.topbar { position: sticky; }

/* login: que el logo también luzca legible ahí */
.auth-logo { filter: drop-shadow(0 6px 18px rgba(20,40,60,.25)); }

@media (prefers-reduced-motion: reduce) {
  .content .view-title, .content .view-sub, .content .stat, .content .usage-card { animation: none; }
}


/* ═════════ v23 — WOW pass ═════════ */

/* navegación por anclas: suave, nunca brusca */
html { scroll-behavior: smooth; }
#sl-features, #sl-pricing, #sl-security, #sl-hub, #sl-contact { scroll-margin-top: 84px; }

/* ── menú Documents: reconstruido, encajado y con muelle ── */
.sl-nav .sl-docs-menu {
  position: absolute; top: calc(100% + 14px); left: auto; right: -10px; transform: none;
  width: 276px; padding: 8px; border-radius: 15px; z-index: 90;
  background: rgba(15, 19, 25, .97); border: 1px solid rgba(201,220,239,.17);
  backdrop-filter: blur(16px); box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(78,127,168,.12);
  display: block; font-size: 14px; line-height: 1.35; text-align: left;
  transform-origin: top right;
  animation: menuPop .38s cubic-bezier(.3,1.45,.4,1) both;
}

.sl-nav .sl-docs-menu > * {
  display: flex; align-items: center; gap: 8px; width: 100%; margin: 0;
  padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 1.35;
  color: rgba(201,220,239,.88); text-decoration: none; box-sizing: border-box;
  animation: menuItem .35s cubic-bezier(.22,1,.36,1) both;
}
.sl-nav .sl-docs-menu > *:nth-child(1) { animation-delay: .04s; }
.sl-nav .sl-docs-menu > *:nth-child(2) { animation-delay: .08s; }
.sl-nav .sl-docs-menu > *:nth-child(3) { animation-delay: .12s; }
.sl-nav .sl-docs-menu > *:nth-child(4) { animation-delay: .16s; }
.sl-nav .sl-docs-menu > *:nth-child(5) { animation-delay: .20s; }
@keyframes menuItem { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.sl-nav .sl-docs-menu a:hover { background: rgba(78,127,168,.20); color: #fff; transform: translateX(3px); transition: background .13s, color .13s, transform .13s; }
.sl-nav .sl-docs-sub-btn { justify-content: space-between; cursor: pointer; background: none; border: none; font: inherit; }
.sl-nav .sl-docs-sub-btn:hover { background: rgba(78,127,168,.20); color: #fff; }
/* submenú SLA: despliegue líquido por grid-rows */
.sl-nav .sl-docs-sub-wrap {
  display: grid; grid-template-rows: 0fr; padding: 0 0 0 14px;
  transition: grid-template-rows .42s cubic-bezier(.25,1,.35,1);
  animation: none;
}
.sl-nav .sl-docs-sub-wrap.on { grid-template-rows: 1fr; }
.sl-nav .sl-docs-sub {
  overflow: hidden; min-height: 0; margin: 0; padding: 0 0 0 10px;
  border-left: 1px solid rgba(127,178,221,.4);
  display: flex; flex-direction: column; gap: 1px;
}
.sl-nav .sl-docs-sub a {
  display: block; padding: 9px 11px; margin: 0; border-radius: 8px;
  font-size: 13px; color: rgba(201,220,239,.8); text-decoration: none;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .3s .1s, transform .3s .1s, background .13s, color .13s;
}
.sl-nav .sl-docs-sub-wrap.on .sl-docs-sub a { opacity: 1; transform: none; }
.sl-nav .sl-docs-sub a:hover { background: rgba(78,127,168,.2); color: #fff; }
.sl-nav .sl-docs-item { color: rgba(147,164,182,.6); cursor: default; }

/* ── HUB: el mapa vive por sí mismo (nada que esperar) + paquetes de datos ── */
.sl-hub-map, .sl-hub .sl-hub-map {
  opacity: 1 !important; clip-path: none !important; transform: none !important;
  animation: hubGlow 5s ease-in-out infinite;
}
@keyframes hubGlow {
  0%, 100% { box-shadow: 0 26px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(78,127,168,.2); }
  50% { box-shadow: 0 26px 70px rgba(0,0,0,.5), 0 0 44px -4px rgba(78,127,168,.55), 0 0 0 1px rgba(127,178,221,.45); }
}
/* rutas fluyendo en permanencia */
.sl-hub-line { stroke-dasharray: 6 4; stroke-dashoffset: 0; animation: hubDash 2.6s linear infinite; }
.sl-hub-line.d2 { animation-delay: .5s; }
.sl-hub-line.d3 { animation-delay: 1s; }
.sl-hub-dot { animation: dotGlow 2.6s ease-in-out infinite; }
@keyframes dotGlow { 0%,100% { box-shadow: 0 0 8px #C9DCEF; } 50% { box-shadow: 0 0 18px #C9DCEF, 0 0 30px rgba(127,178,221,.7); } }
/* los paquetes de luz recorriendo las tres rutas */
.sl-hub-pkt {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: #F2F8FF;
  box-shadow: 0 0 10px #EAF4FF, 0 0 26px rgba(127,178,221,.9);
  offset-rotate: 0deg;
}
.sl-hub-pkt.k1 { offset-path: path('M380 158 Q230 122 90 74'); animation: pktRun 4.4s .4s linear infinite; }
.sl-hub-pkt.k2 { offset-path: path('M380 158 Q500 104 648 60'); animation: pktRun 5.2s 1.6s linear infinite; }
.sl-hub-pkt.k3 { offset-path: path('M380 158 Q310 208 152 236'); animation: pktRun 4.8s 2.7s linear infinite; }
@keyframes pktRun {
  0% { offset-distance: 0%; opacity: 0; }
  7% { opacity: 1; }
  86% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@supports not (offset-path: path('M0 0 L1 1')) { .sl-hub-pkt { display: none; } }
@media (max-width: 720px) { .sl-hub-pkt { display: none; } }

/* ── botones y tabs del landing: reactivos ── */
.sl-btn { position: relative; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.sl-btn:hover { transform: translateY(-2px); }
.sl-btn.primary:hover { box-shadow: 0 10px 26px rgba(78,127,168,.5); }
.sl-btn::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,.3) 50%, transparent 64%);
  background-size: 250% 100%; background-position: 135% 0;
  transition: background-position .55s ease;
}
.sl-btn:hover::after { background-position: -135% 0; }
.sl-tab { transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.sl-tab:hover { transform: translateY(-2px); }
.sl-tab.on { box-shadow: 0 6px 18px rgba(78,127,168,.35); }
.sl-plan { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.sl-plan:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(10,25,40,.16); }

/* ── app: fondo con vida (auroras a la deriva, sutiles) ── */
.main { position: relative; }
.main::before, .main::after {
  content: ''; position: fixed; z-index: 0; pointer-events: none; border-radius: 50%;
  filter: blur(34px);
}
.main::before {
  width: 560px; height: 560px; top: -14%; right: -8%;
  background: radial-gradient(circle, rgba(78,127,168,.14), transparent 62%);
  animation: blobA 26s ease-in-out infinite alternate;
}
.main::after {
  width: 480px; height: 480px; bottom: -16%; left: 12%;
  background: radial-gradient(circle, rgba(127,178,221,.10), transparent 62%);
  animation: blobB 32s ease-in-out infinite alternate;
}
@keyframes blobA { from { transform: translate(0,0) scale(1); } to { transform: translate(-70px, 50px) scale(1.12); } }
@keyframes blobB { from { transform: translate(0,0) scale(1.05); } to { transform: translate(80px, -40px) scale(.95); } }
.topbar, .content, .upload-bar { position: relative; z-index: 1; }

/* botón de tema */
.theme-toggle {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line);
  background: transparent; cursor: pointer; font-size: 16px; display: grid; place-items: center;
  transition: transform .3s cubic-bezier(.3,1.5,.4,1), background .15s, border-color .15s;
}
.theme-toggle:hover { border-color: var(--teal); background: rgba(78,127,168,.1); }
.theme-toggle:active { transform: rotate(180deg) scale(.9); }

/* ═════════ MODO OSCURO de la app — "Harbor Night" ═════════ */
[data-theme="dark"] { color-scheme: dark; }
[data-theme="dark"] body { background: #0E1319; }
[data-theme="dark"] .app,
[data-theme="dark"] .login,
[data-theme="dark"] .modal {
  --paper: #0E1319; --card: #151C25; --line: #26313E;
  --text: #E7EEF6; --muted: #93A4B6; --ink: #EAF2FA;
  --shallows: #1B2836;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.5);
  color: var(--text);
}
[data-theme="dark"] .app {
  background:
    radial-gradient(900px 340px at 82% -6%, rgba(78,127,168,.16), transparent 60%),
    linear-gradient(180deg, #0C1117, #0E1319 40%);
}
[data-theme="dark"] .main::before { background: radial-gradient(circle, rgba(78,127,168,.24), transparent 62%); }
[data-theme="dark"] .main::after { background: radial-gradient(circle, rgba(127,178,221,.16), transparent 62%); }

/* sidebar nocturno: el logo flota sobre un halo de luz (legible con trazos oscuros) */
[data-theme="dark"] .sidebar {
  background:
    radial-gradient(360px 220px at 50% -4%, rgba(78,127,168,.22), transparent 70%),
    linear-gradient(180deg, #0D1218 0%, #121B26 55%, #0E161F 100%);
  border-right: 1px solid #1F2A37;
  box-shadow: inset -16px 0 30px -26px rgba(0,0,0,.7);
}
[data-theme="dark"] .sidebar-brand::before {
  content: ''; position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);
  width: 210px; height: 120px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(238,246,253,.95), rgba(201,220,239,.4) 58%, transparent 78%);
  filter: blur(12px); z-index: 0;
  animation: plateBreath 6s ease-in-out infinite;
}
@keyframes plateBreath { 0%,100% { opacity: .78; } 50% { opacity: 1; } }
[data-theme="dark"] .sidebar-brand .shine { position: relative; z-index: 1; }
[data-theme="dark"] .sidebar-logo { filter: drop-shadow(0 4px 14px rgba(0,0,0,.5)); }
[data-theme="dark"] .sidebar-brand::after { background: linear-gradient(90deg, transparent, rgba(127,178,221,.35), transparent); }
[data-theme="dark"] .nav-item { color: #A9BDD2; }
[data-theme="dark"] .nav-item:hover { background: rgba(78,127,168,.16); color: #fff; }
[data-theme="dark"] .gauge-tank { border-color: rgba(201,220,239,.3); background: rgba(78,127,168,.08); }
[data-theme="dark"] .gauge-ticks i { background: rgba(201,220,239,.3); }
[data-theme="dark"] .gauge-text { color: var(--muted); }
[data-theme="dark"] .gauge-text strong { color: #fff; }
[data-theme="dark"] .sidebar-user { border-top-color: #1F2A37; }
[data-theme="dark"] .sidebar-user-text strong { color: #fff; }
[data-theme="dark"] .sidebar .btn-ghost { color: #93A4B6; }
[data-theme="dark"] .sidebar .btn-ghost:hover { color: #fff; background: rgba(255,255,255,.08); }

/* superficies */
[data-theme="dark"] .topbar {
  background: rgba(14,19,25,.72);
  box-shadow: 0 1px 0 #1F2A37, 0 2px 14px rgba(0,0,0,.35);
}
[data-theme="dark"] .search { background: #10161E; color: var(--text); border-color: #26313E; }
[data-theme="dark"] .search::placeholder { color: #5F7285; }
[data-theme="dark"] .usage-card, [data-theme="dark"] .stat {
  background: var(--card); border-color: #26313E;
  box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.45);
}
[data-theme="dark"] .usage-card::before, [data-theme="dark"] .stat::before { opacity: 1; }
[data-theme="dark"] .modal { background: var(--card); color: var(--text); border-color: #26313E; }
[data-theme="dark"] .modal::backdrop { background: rgba(2,6,10,.66); }
[data-theme="dark"] .acc { background: rgba(255,255,255,.02); border-color: #26313E; }
[data-theme="dark"] .acc summary:hover { background: rgba(78,127,168,.12); }
[data-theme="dark"] .btn-outline { border-color: #31435A; color: var(--text); background: transparent; }
[data-theme="dark"] .btn-outline:hover { background: rgba(78,127,168,.14); }
[data-theme="dark"] .btn-ghost-solid { background: #1B2530; color: var(--text); }
[data-theme="dark"] .cart-btn { border-color: #26313E; }
[data-theme="dark"] .bill-row:hover, [data-theme="dark"] .cart-row:hover { background: rgba(78,127,168,.09); }
[data-theme="dark"] .quota-alert { background: rgba(233,196,106,.08); border-color: rgba(233,196,106,.3); }


/* ═════════ v24 — portal "More services" en la app + fondo con más vida ═════════ */

/* el modal es un portal oscuro hacia el data center, en ambos temas */
.modal-hub {
  background: linear-gradient(165deg, #10151C, #0C1118) !important;
  color: #C9DCEF !important;
  border: 1px solid rgba(78,127,168,.4) !important;
  width: min(680px, 94vw);
  box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 60px -10px rgba(78,127,168,.35) !important;
}
.modal-hub h3 { color: #F2F8FC; }
.modal-hub .modal-sub { color: #93A4B6; }
.hub-mini { height: 225px; max-width: none; margin: 16px 0 18px; }
.hub-mini .sl-hub-pkt { display: none; }        /* las rutas fluyen; los paquetes son del hub grande */
.hub-links { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 16px; }
.hub-links a {
  display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-radius: 11px;
  text-decoration: none; font: 500 13px var(--font-ui); letter-spacing: .06em;
  color: #C9DCEF; background: rgba(78,127,168,.10); border: 1px solid rgba(78,127,168,.4);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.hub-links a:hover { transform: translateX(5px); background: rgba(78,127,168,.22); box-shadow: 0 8px 22px rgba(0,0,0,.35); }
.hub-stats-mini {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: rgba(201,220,239,.14); border-radius: 12px; overflow: hidden; margin-bottom: 18px;
}
.hub-stats-mini > div { background: #0B1016; padding: 13px 10px; text-align: center; }
.hub-stats-mini b { display: block; font: 800 20px var(--font-display); color: #C9DCEF; line-height: 1.1; }
.hub-stats-mini span { font: 400 9px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: #7d8fa1; }
.hub-actions { display: flex; gap: 10px; justify-content: flex-end; }
.hub-actions .btn-primary { text-decoration: none; }
.modal-hub .btn-ghost-solid { background: rgba(255,255,255,.08); color: #C9DCEF; }

/* fondo de la app: tercer orbe + más presencia, sin perder sobriedad */
.main::before { background: radial-gradient(circle, rgba(78,127,168,.18), transparent 62%); }
.content::after {
  content: ''; position: fixed; z-index: 0; pointer-events: none;
  width: 380px; height: 380px; top: 40%; left: 38%; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,220,239,.08), transparent 60%);
  filter: blur(30px);
  animation: blobC 38s ease-in-out infinite alternate;
}
@keyframes blobC { from { transform: translate(-60px, 0) scale(.9); } to { transform: translate(70px, -60px) scale(1.15); } }
[data-theme="dark"] .content::after { background: radial-gradient(circle, rgba(127,178,221,.12), transparent 60%); }


/* ═════════ v25 ═════════ */

/* ── chevron geométrico: perfectamente centrado, sin métricas de fuente ── */
.sl-docs-chev, .sl-docs-sub-btn .sl-docs-chev {
  width: 8px; height: 8px; flex: none; display: inline-block; margin: -3px 0 0 3px;
  border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg); transition: transform .28s cubic-bezier(.3,1.4,.4,1);
  font-size: 0; line-height: 0;
}
.sl-docs-btn.on .sl-docs-chev, .sl-docs-sub-btn.on .sl-docs-chev { transform: rotate(-135deg) translate(-2px, -2px); }
.sl-docs-link {
  display: flex; align-items: center; width: 100%; background: none; border: none;
  cursor: pointer; text-align: left; font: inherit;
}

/* ── modales de la app: entran con física, no de golpe ── */
.modal[open] { animation: modalSpring .5s cubic-bezier(.24,1.3,.35,1) both; }
@keyframes modalSpring {
  from { opacity: 0; transform: translateY(22px) scale(.94); }
  to { opacity: 1; transform: none; }
}
.modal[open]::backdrop { animation: veilIn .35s ease both; }
@keyframes veilIn { from { opacity: 0; } to { opacity: 1; } }

/* ── pop-up de la política de cancelación (landing) ── */
.sl-policy-veil {
  position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
  padding: 22px; background: rgba(6,10,15,.62); backdrop-filter: blur(8px);
  animation: veilIn .3s ease both;
}
.sl-policy {
  position: relative; width: min(620px, 100%); max-height: 86vh; overflow-y: auto;
  background: linear-gradient(170deg, #171D25, #10151C);
  border: 1px solid rgba(78,127,168,.4); border-radius: 20px; padding: 34px 36px 26px;
  color: rgba(201,220,239,.85);
  box-shadow: 0 44px 110px rgba(0,0,0,.65), 0 0 60px -12px rgba(78,127,168,.4);
  animation: modalSpring .55s cubic-bezier(.24,1.3,.35,1) both;
}
.sl-policy-x {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(201,220,239,.18); color: #C9DCEF;
  cursor: pointer; font-size: 14px; transition: background .15s, transform .15s;
}
.sl-policy-x:hover { background: rgba(78,127,168,.28); transform: rotate(90deg); }
.sl-policy-eyebrow { font: 500 10px var(--font-mono); letter-spacing: .26em; text-transform: uppercase; color: #7fb2dd; margin: 0 0 10px; }
.sl-policy h3 { font: 800 24px var(--font-display); color: #F2F8FC; margin: 0 0 10px; }
.sl-policy-note { font-size: 12.5px; color: #93a4b6; margin: 0 0 18px; line-height: 1.6; }
.sl-policy-body h4 {
  font: 700 12px var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  color: #9CC3E4; margin: 20px 0 8px; padding-top: 14px; border-top: 1px solid rgba(201,220,239,.12);
}
.sl-policy-body h4:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.sl-policy-body p { font-size: 13.5px; line-height: 1.8; margin: 0 0 12px; }
.sl-policy-body b { color: #E8F1FA; }
.sl-policy-foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(201,220,239,.12); }
.sl-policy-foot a { color: #7fb2dd; text-decoration: none; font-size: 13px; }
.sl-policy-foot a:hover { color: #C9DCEF; }



/* ═════════ v26 — menú Documents reconstruido desde cero (clases nuevas) ═════════ */
.ssdocs { position: relative; display: flex; align-items: center; }
.ssdocs-btn {
  background: none; border: none; cursor: pointer;
  font: 500 14px var(--font-ui); color: #A9BDD2; line-height: 1;
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 0;
  transition: color .15s;
}
.ssdocs-btn:hover, .ssdocs-btn.on { color: #E8F1FA; }
.ssdocs-chev {
  width: 7px; height: 7px; flex: none;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .25s cubic-bezier(.3,1.3,.4,1);
}
.on > .ssdocs-chev { transform: rotate(-135deg) translate(-1px, -1px); }
.ssdocs-menu {
  position: absolute; top: calc(100% + 16px); right: 0; width: 268px;
  padding: 7px; border-radius: 14px; z-index: 120; box-sizing: border-box;
  background: rgba(15, 19, 25, .97); border: 1px solid rgba(201,220,239,.16);
  box-shadow: 0 22px 56px rgba(0,0,0,.55);
  transform-origin: top right;
  animation: ssMenuIn .32s cubic-bezier(.3,1.35,.4,1) both;
}
@keyframes ssMenuIn { from { opacity: 0; transform: translateY(-10px) scale(.94); } to { opacity: 1; transform: none; } }
.ssdocs-item {
  display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; box-sizing: border-box;
  padding: 10px 12px; border-radius: 9px; border: none; background: none; cursor: pointer;
  font: 400 13.5px/1.35 var(--font-ui); color: rgba(201,220,239,.88);
  text-decoration: none; text-align: left;
  transition: background .13s, color .13s;
}
.ssdocs-item:hover { background: rgba(78,127,168,.20); color: #fff; }
.ssdocs-item.off { color: rgba(147,164,182,.55); cursor: default; }
.ssdocs-item.off:hover { background: none; color: rgba(147,164,182,.55); }
.ssdocs-group .ssdocs-chev { margin-left: auto; }
.ssdocs-subwrap {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .38s cubic-bezier(.25,1,.35,1);
}
.ssdocs-subwrap.on { grid-template-rows: 1fr; }
.ssdocs-sub {
  overflow: hidden; min-height: 0; box-sizing: border-box;
  margin-left: 14px; padding-left: 10px;
  border-left: 1px solid rgba(127,178,221,.38);
  display: flex; flex-direction: column;
}
.ssdocs-sub .ssdocs-item {
  font-size: 13px; padding: 9px 10px;
  opacity: 0; transform: translateY(-5px);
  transition: opacity .28s .08s, transform .28s .08s, background .13s, color .13s;
}
.ssdocs-subwrap.on .ssdocs-item { opacity: 1; transform: none; }


/* ═════════ v27 — secciones seamless ═════════ */
/* las rejillas técnicas aparecen y desaparecen en fundido, nunca cortadas */
.sl-dark::before, .sl-hub::before {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
/* marcador moderno de sección: una línea de luz fina, centrada, con halo suave */
.sl-dark::after, .sl-hub::after {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(560px, 72%); height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(201,220,239,.30), transparent);
  box-shadow: 0 0 18px rgba(127,178,221,.30);
}

/* ═════════ v27 — logo en modo oscuro: brillo del propio logo ═════════ */
/* halo de fondo mucho más discreto: ambiente, no protagonista */
[data-theme="dark"] .sidebar-brand::before {
  width: 210px; height: 118px;
  background: radial-gradient(closest-side, rgba(201,220,239,.10), rgba(78,127,168,.06) 60%, transparent 82%);
  filter: blur(22px);
}
/* y el brillo vive en el logo: un fino contorno de luz perfila cada letra
   (el "DATA PROTECTION" oscuro queda dibujado por su propio halo) */
/* variante propia para oscuro: el texto inferior ya viene en cromo claro,
   así que solo necesita una sombra sutil para asentarse en el fondo */
[data-theme="dark"] .sidebar-logo { filter: drop-shadow(0 4px 14px rgba(0,0,0,.55)); }


/* ═════════ v28 — restos claros que quedaban en modo oscuro ═════════ */
[data-theme="dark"] .file-table { background: var(--card); border-color: #26313E; }
[data-theme="dark"] .file-table thead th { background: #111820; color: #93A4B6; border-bottom-color: #26313E; }
[data-theme="dark"] .file-table td { border-bottom-color: #222C38; }
[data-theme="dark"] .file-table tbody tr:hover { background: rgba(78,127,168,.12); }
[data-theme="dark"] .row-name { color: #E7EEF6; }
[data-theme="dark"] .f-ico.file { background: #1D2733; color: #9CC3E4; }
[data-theme="dark"] .f-ico.folder { background: rgba(78,127,168,.22); color: #9CC3E4; }
[data-theme="dark"] .badge { background: #131A22; border-color: #2B3745; color: #93A4B6; }
[data-theme="dark"] .icon-btn { color: #93A4B6; }
[data-theme="dark"] .icon-btn:hover { background: rgba(78,127,168,.2); color: #C9DCEF; box-shadow: none; }
[data-theme="dark"] .empty { background: var(--card); border-color: #2B3745; color: #93A4B6; }
[data-theme="dark"] .empty strong { color: #E7EEF6; }
[data-theme="dark"] .space-tab { background: #151C25; border-color: #2B3745; color: #A9BDD2; }
[data-theme="dark"] .space-tab:hover { border-color: var(--teal); color: #fff; }
[data-theme="dark"] .space-tab.on { background: rgba(78,127,168,.24); border-color: var(--teal); color: #C9DCEF; }
[data-theme="dark"] .list-card { background: var(--card); border-color: #26313E; }
[data-theme="dark"] .list-row { border-bottom-color: #222C38; }
[data-theme="dark"] .list-row .grow b { color: #E7EEF6; }
[data-theme="dark"] .pill-expired { background: rgba(217,83,43,.16); color: #E8825F; }
[data-theme="dark"] .btn-outline { background: transparent; }
[data-theme="dark"] .upgrade-card { background: #121820; border-color: #2B3745; }
[data-theme="dark"] .breadcrumb, [data-theme="dark"] .crumb-sep { color: #93A4B6; }
[data-theme="dark"] .breadcrumb a, [data-theme="dark"] .breadcrumb b { color: #C9DCEF; }
[data-theme="dark"] .view-sub { color: #93A4B6; }
[data-theme="dark"] .hbar .track { background: #1D2733; }
[data-theme="dark"] .login-form input, [data-theme="dark"] .login-form select {
  background: #10161E; color: var(--text); border-color: #2B3745;
}
[data-theme="dark"] .toast { background: #1D2733; border: 1px solid #2B3745; }
[data-theme="dark"] .upload-bar { background: #151C25; }
[data-theme="dark"] .modal h3, [data-theme="dark"] .modal h4 { color: #E7EEF6; }
[data-theme="dark"] .modal-sub { color: #93A4B6; }
[data-theme="dark"] .co-term-btn { border-color: #2B3745; }
[data-theme="dark"] .stat b { color: #E7EEF6; }


/* conmutación de la variante del logo según el tema */
.dark-logo { display: none; }
[data-theme="dark"] .light-logo { display: none; }
[data-theme="dark"] .dark-logo { display: block; }


/* ═════════ v29.1 — líneas únicas + menú de planes ═════════ */
/* el titular del hero nunca se parte: se encoge antes que envolver */
.sl-title { font-size: clamp(30px, 5.6vw, 62px); }
.sl-line { white-space: nowrap; }
.sl-noline { white-space: nowrap; }
@media (max-width: 560px) { .sl-noline { white-space: normal; } }  /* móvil estrecho: mejor envolver que desbordar */
.ssdocs-plans { width: 216px; }
.ssdocs-plans .ssdocs-item { gap: 10px; }


/* ═════════ v32 — showcase de las instalaciones (hub) ═════════ */
.sl-fac {
  position: relative; max-width: 760px; margin: 38px auto 40px;
  aspect-ratio: 2 / 1; min-height: 240px;
  border-radius: 20px; overflow: hidden; isolation: isolate;
  border: 1px solid rgba(201,220,239,.18);
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(78,127,168,.18);
}
/* el halo vive en una capa propia y solo anima su opacidad (composición pura) */
.sl-fac::after {
  content: ''; position: absolute; inset: -2px; border-radius: 21px; z-index: 5;
  pointer-events: none;
  box-shadow: 0 0 46px -6px rgba(78,127,168,.5), 0 0 0 1px rgba(127,178,221,.4) inset;
  opacity: 0; animation: facGlow 6s ease-in-out infinite;
  will-change: opacity;
}
@keyframes facGlow { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
/* la foto respira: Ken Burns lento y perpetuo */
.sl-fac-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform-origin: 55% 45%;
  animation: facKen 22s ease-in-out infinite alternate;
  will-change: transform;
  z-index: 0;
}
@keyframes facKen {
  from { transform: scale(1.06) translate(0, 0); }
  to { transform: scale(1.16) translate(-2.2%, 1.6%); }
}
/* barrido de luz diagonal, como en el logo */
.sl-fac-sheen {
  position: absolute; top: -30%; bottom: -30%; left: 0; width: 34%; z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(232,241,250,.13) 50%, transparent);
  transform: translateX(-160%) skewX(-14deg);
  animation: facSheen 7.5s cubic-bezier(.4,0,.2,1) infinite;
  mix-blend-mode: screen;
  will-change: transform;
}
@keyframes facSheen {
  0%, 55% { transform: translateX(-160%) skewX(-14deg); }
  92%, 100% { transform: translateX(460%) skewX(-14deg); }
}
/* rejilla técnica fundida, coherente con el hub */
.sl-fac-grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(127,178,221,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127,178,221,.10) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 78%);
}
/* sombreado para que el texto viva sobre la foto */
.sl-fac-shade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,11,17,.42) 0%, transparent 32%),
    linear-gradient(0deg, rgba(6,10,15,.88) 0%, rgba(6,10,15,.42) 30%, transparent 58%);
}
/* esquinas de visor que se dibujan al entrar */
.sl-fac-corner {
  position: absolute; width: 26px; height: 26px; z-index: 3; pointer-events: none;
  border: 0 solid rgba(201,220,239,.75); opacity: 0;
  transition: opacity .5s .5s ease, transform .5s .5s cubic-bezier(.2,1.4,.4,1);
  transform: scale(.4);
}
.sl-fac.in .sl-fac-corner { opacity: 1; transform: scale(1); }
.sl-fac-corner.c1 { top: 14px; left: 14px; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 8px; }
.sl-fac-corner.c2 { top: 14px; right: 14px; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 8px; transition-delay: .58s; }
.sl-fac-corner.c3 { bottom: 14px; left: 14px; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 8px; transition-delay: .66s; }
.sl-fac-corner.c4 { bottom: 14px; right: 14px; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 8px; transition-delay: .74s; }
/* chips flotantes tipo callout */
.sl-fac-chips {
  position: absolute; top: 16px; right: 16px; z-index: 4;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.sl-fac-chip {
  padding: 7px 13px; border-radius: 999px;
  background: rgba(10, 15, 22, .62); border: 1px solid rgba(201,220,239,.28);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  color: #DCE9F6; font: 500 11px var(--font-mono); letter-spacing: .08em;
  opacity: 0; transform: translateX(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.sl-fac.in .sl-fac-chip { opacity: 1; transform: none; }
.sl-fac.in .sl-fac-chip:nth-child(1) { transition-delay: .7s; animation: chipFloat 6s 1.5s ease-in-out infinite; }
.sl-fac.in .sl-fac-chip:nth-child(2) { transition-delay: .84s; animation: chipFloat 7s 1.8s ease-in-out infinite; }
.sl-fac.in .sl-fac-chip:nth-child(3) { transition-delay: .98s; animation: chipFloat 6.5s 2.1s ease-in-out infinite; }
@keyframes chipFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
/* leyenda inferior */
.sl-fac-cap { position: absolute; left: 22px; right: 22px; bottom: 18px; z-index: 4; text-align: left; }
.sl-fac-eyebrow {
  display: flex; align-items: center; gap: 8px; margin: 0 0 7px;
  font: 500 10px var(--font-mono); letter-spacing: .24em; text-transform: uppercase; color: #9CC3E4;
}
.sl-fac-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #7fb2dd; flex: none;
  box-shadow: 0 0 8px #7fb2dd; animation: facPulse 2.2s ease-in-out infinite;
}
@keyframes facPulse { 0%, 100% { opacity: 1; box-shadow: 0 0 8px #7fb2dd; } 50% { opacity: .45; box-shadow: 0 0 3px #7fb2dd; } }
.sl-fac-cap h3 { margin: 0 0 6px; font: 800 clamp(19px, 2.6vw, 26px) var(--font-display); color: #F2F8FC; }
.sl-fac-cap p { margin: 0; max-width: 480px; font-size: 12.5px; line-height: 1.6; color: rgba(201,220,239,.78); }
@media (max-width: 640px) {
  .sl-fac { aspect-ratio: 4 / 3; }
  .sl-fac-chips { display: none; }
  .sl-fac-cap p { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-fac::after, .sl-fac-img, .sl-fac-sheen, .sl-fac-chip, .sl-fac-dot { animation: none; }
}




/* ═════════ v36 — foco global latente + entrada del builder ═════════ */
/* el foco vive sobre toda la página: pequeño, tenue, y late como un pulso */
.sl-spot {
  position: fixed; top: 0; left: 0; width: 180px; height: 180px;
  pointer-events: none; z-index: 25;              /* sobre las secciones, bajo el nav (30) */
  opacity: 0; transition: opacity .45s ease;
  will-change: transform;
}
.sl-spot i {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(127,178,221,.085), rgba(127,178,221,.03) 48%, transparent 72%);
  mix-blend-mode: screen;
  animation: spotPulse 2.6s ease-in-out infinite;
}
@keyframes spotPulse {
  0%, 100% { transform: scale(.82); opacity: .75; }
  50% { transform: scale(1.12); opacity: 1; }
}

/* el configurador entra con estallido: resorte + fogonazo + piezas en cascada */
.sl-builder, .sl-builder.cb-replay {
  animation: cbIn .6s cubic-bezier(.22,1.25,.36,1) both, cbGlow 1.5s .25s ease-out both;
}
@keyframes cbIn { from { opacity: 0; transform: translateY(28px) scale(.955); } to { opacity: 1; transform: none; } }
@keyframes cbGlow {
  0% { box-shadow: 0 0 0 0 rgba(127,178,221,0); }
  30% { box-shadow: 0 0 64px -6px rgba(127,178,221,.5), 0 0 0 1px rgba(127,178,221,.45); }
  100% { box-shadow: 0 0 0 0 rgba(127,178,221,0); }
}
.sl-builder-head { animation: cbUp .5s .12s cubic-bezier(.22,1,.36,1) both; }
.sl-builder-groups > *:nth-child(1) { animation: cbUp .45s .18s cubic-bezier(.22,1,.36,1) both; }
.sl-builder-groups > *:nth-child(2) { animation: cbUp .45s .24s cubic-bezier(.22,1,.36,1) both; }
.sl-builder-groups > *:nth-child(3) { animation: cbUp .45s .30s cubic-bezier(.22,1,.36,1) both; }
.sl-builder-groups > *:nth-child(4) { animation: cbUp .45s .36s cubic-bezier(.22,1,.36,1) both; }
.sl-builder-groups > *:nth-child(n+5) { animation: cbUp .45s .42s cubic-bezier(.22,1,.36,1) both; }
.sl-builder-sum { animation: cbUp .55s .34s cubic-bezier(.22,1,.36,1) both; }
@keyframes cbUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .sl-spot i, .sl-builder, .sl-builder-head, .sl-builder-groups > *, .sl-builder-sum { animation: none; }
  .sl-builder { opacity: 1; }
}


/* ═════════ v37 ═════════ */

/* ── cambio de pestaña en Plans: las tarjetas entran en cascada, nunca de golpe ── */
@keyframes planCard { from { opacity: 0; transform: translateY(18px) scale(.975); } }
.sl-plans > * { animation: planCard .5s cubic-bezier(.22,1,.36,1) backwards; }
.sl-plans > *:nth-child(1) { animation-delay: .03s; }
.sl-plans > *:nth-child(2) { animation-delay: .09s; }
.sl-plans > *:nth-child(3) { animation-delay: .15s; }
.sl-plans > *:nth-child(4) { animation-delay: .21s; }
.sl-plans > *:nth-child(n+5) { animation-delay: .27s; }
.sl-fineprint { animation: planCard .5s .3s cubic-bezier(.22,1,.36,1) backwards; }
.sl-cbgate { animation: planCard .5s .34s cubic-bezier(.22,1,.36,1) backwards; }

@property --cbang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
/* ── botón portal del configurador: imposible no verlo ── */
.sl-cbgate { display: flex; justify-content: center; margin-top: 26px; }
.sl-cbgate-btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: 16px; text-align: left;
  padding: 18px 26px; border-radius: 16px; cursor: pointer;
  background: linear-gradient(120deg, #1B2836, #16202B 60%);
  border: 1px solid rgba(127,178,221,.35); color: #E8F1FA;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.sl-cbgate-btn::before {
  content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: 17px;
  background: conic-gradient(from var(--cbang, 0deg), transparent 0deg, rgba(127,178,221,.75) 40deg, transparent 110deg);
  animation: cbSpin 3.4s linear infinite; opacity: .8;
}
.sl-cbgate-btn::after {
  content: ''; position: absolute; inset: 1px; z-index: -1; border-radius: 15px;
  background: linear-gradient(120deg, #1B2836, #16202B 60%);
}
@keyframes cbSpin { to { --cbang: 360deg; } }
@supports not (background: conic-gradient(from 1deg, red, blue)) { .sl-cbgate-btn::before { display: none; } }
.sl-cbgate-btn:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(53,97,138,.35); border-color: rgba(127,178,221,.7); }
.sl-cbgate-ico { font-style: normal; font-size: 26px; color: #9CC3E4; transition: transform .5s cubic-bezier(.3,1.4,.4,1); }
.sl-cbgate-btn:hover .sl-cbgate-ico { transform: rotate(120deg); }
.sl-cbgate-btn b { display: block; font: 700 16px var(--font-display); }
.sl-cbgate-btn em { display: block; font: 400 12.5px var(--font-ui); font-style: normal; color: #93A4B6; margin-top: 3px; max-width: 380px; }
.sl-cbgate-arrow { font-style: normal; font-size: 19px; color: #7fb2dd; transition: transform .2s ease; }
.sl-cbgate-btn:hover .sl-cbgate-arrow { transform: translateX(5px); }

/* ── borde luminoso de las tarjetas: anillo enmascarado, solo pinta en el filo ── */
.sl-plan::before {
  content: ''; position: absolute; inset: -1.5px; border-radius: 19px;
  padding: 1.5px; pointer-events: none;
  background: conic-gradient(from calc(var(--ang, 0deg) - 70deg),
    transparent 0deg,
    rgba(127,178,221,.08) 34deg,
    rgba(163,203,238,.9) 70deg,
    rgba(127,178,221,.08) 106deg,
    transparent 140deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0; transition: opacity .35s ease;
}
.sl-plan:hover::before { opacity: 1; }

/* ── ticker: cinta que se pausa bajo el cursor ── */
.sl-ticker:hover .sl-ticker-row { animation-play-state: paused; }
.sl-tick { transition: color .2s ease; }
.sl-ticker:hover .sl-tick:hover { color: #C9DCEF; }

/* ── stats del hero: el valor rueda, y su etiqueta lo sigue en coherencia ── */
.sl-stats b { animation: statRoll .7s cubic-bezier(.22,1.2,.36,1) backwards; }
.sl-stats span { display: block; margin-top: 5px; animation: statFade .55s cubic-bezier(.22,1,.36,1) backwards; }
.sl-stats > div:nth-child(1) b { animation-delay: .55s; }
.sl-stats > div:nth-child(2) b { animation-delay: .70s; }
.sl-stats > div:nth-child(3) b { animation-delay: .85s; }
.sl-stats > div:nth-child(1) span { animation-delay: .72s; }
.sl-stats > div:nth-child(2) span { animation-delay: .87s; }
.sl-stats > div:nth-child(3) span { animation-delay: 1.02s; }
@keyframes statRoll { from { opacity: 0; transform: translateY(16px) scale(.9); } }
@keyframes statFade { from { opacity: 0; transform: translateY(9px); } }

/* ── mitigación del congelado del mapa al hacer scroll: capa propia para las rutas ── */
.sl-hub-lines, .sl-hub-grid { transform: translateZ(0); will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .sl-plans > *, .sl-fineprint, .sl-cbgate, .sl-stats > div > b, .sl-cbgate-btn::before { animation: none; }
}


/* ═════════ v38 — pop del selector de pestañas ═════════ */
@keyframes tabPop { 0% { transform: scale(.9); } 55% { transform: scale(1.08); } 100% { transform: scale(1); } }
.sl-tab.on { animation: tabPop .45s cubic-bezier(.3,1.5,.4,1); }
@media (prefers-reduced-motion: reduce) { .sl-tab.on, .sl-stats b, .sl-stats span { animation: none; } }


/* ═════════ v39 — configurador en Billing (pop-up) ═════════ */
.cb-card { border-style: dashed !important; }
.cb-card .up-price { font-size: 19px; }
.custom-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 4px; border-bottom: 1px solid rgba(201,220,239,.12);
}
.custom-row:last-of-type { border-bottom: none; }
.custom-row label { font: 500 13px var(--font-ui); color: #C9DCEF; }
.custom-row select {
  background: #10161E; color: #E7EEF6; border: 1px solid #2B3745;
  border-radius: 9px; padding: 8px 11px; font: 13.5px var(--font-ui); min-width: 190px;
}
.custom-total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 14px; padding: 13px 15px; border-radius: 12px;
  background: rgba(78,127,168,.14); border: 1px solid rgba(78,127,168,.45);
}
.custom-total span { font: 500 12px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: #93A4B6; }
.custom-total b { font: 800 24px var(--font-display); color: #EAF4FF; transition: transform .15s ease; }
.custom-total b.tick { animation: priceTick .3s cubic-bezier(.3,1.5,.4,1); }
@keyframes priceTick { 0% { transform: scale(.92); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
.custom-note { margin: 10px 2px 0; font-size: 11.5px; color: #7d8fa1; }




/* ═════════ v40 ═════════ */
/* tres términos en el checkout */
.co-terms.three { grid-template-columns: 1fr 1fr 1fr; }
.co-terms.three .co-term-btn { padding: 11px 8px 9px; font-size: 13px; }
.co-terms.three .co-term-btn em { font-size: 11.5px; }
.co-terms.three .co-promo { right: 6px; font-size: 9.5px; padding: 2px 6px; }

/* el bloque de PayPal como tarjeta intencional (el iframe exige fondo claro) */
.pp-area { border-radius: 14px; overflow: hidden; }
[data-theme="dark"] .pp-area {
  background: #F4F7FA; padding: 14px 14px 6px;
  border: 1px solid #26313E;
  box-shadow: 0 0 0 1px rgba(78,127,168,.25), 0 10px 30px rgba(0,0,0,.35);
}
[data-theme="dark"] .pp-area .pp-sim { color: #5F7285; }
[data-theme="dark"] .pp-area .pp-loading { color: #5F7285; }

/* configurador: píldoras de marca (adiós selects nativos) */
.custom-row { flex-direction: column; align-items: flex-start; gap: 9px; }
.custom-row select { display: none; }
.custom-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.custom-pill {
  padding: 8px 15px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid rgba(201,220,239,.22);
  color: #A9BDD2; font: 500 12.5px var(--font-ui);
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.custom-pill:hover { border-color: rgba(127,178,221,.6); color: #E7EEF6; transform: translateY(-1px); }
.custom-pill.on {
  background: linear-gradient(135deg, #4E7FA8, #35618A);
  border-color: transparent; color: #fff;
  box-shadow: 0 4px 14px rgba(53,97,138,.45), inset 0 1px 0 rgba(255,255,255,.2);
}


/* ═════════ v41 — configurador compacto: cabe sin scroll ═════════ */
/* dos columnas de componentes: mitad de alto, mismo contenido */
#modal-custom { width: min(96vw, 640px); padding: 22px 24px 20px; }
#modal-custom h3 { font-size: 18px; margin-bottom: 4px; }
#modal-custom .modal-sub { font-size: 12.5px; margin-bottom: 14px; }
#custom-body { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; }
#modal-custom .custom-row {
  padding: 8px 0; gap: 6px; border-bottom: none;
}
#modal-custom .custom-row label {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #93A4B6;
}
#modal-custom .custom-pills { gap: 6px; }
#modal-custom .custom-pill { padding: 6px 12px; font-size: 12px; }
/* el total y la nota cruzan las dos columnas */
#modal-custom .custom-total {
  grid-column: 1 / -1; margin-top: 10px; padding: 11px 14px;
}
#modal-custom .custom-total b { font-size: 21px; }
#modal-custom .custom-note { grid-column: 1 / -1; margin: 8px 2px 0; font-size: 11px; }
#modal-custom .modal-actions { margin-top: 16px; }
@media (max-width: 560px) {
  #custom-body { grid-template-columns: 1fr; }
  #modal-custom .custom-row { padding: 7px 0; }
}


/* ═════════ v42 — credenciales del servidor + aceptación del AUP ═════════ */
/* estado bloqueado */
.cred-locked {
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
  padding: 13px 14px; border-radius: 12px;
  background: rgba(78,127,168,.07); border: 1px dashed rgba(78,127,168,.45);
}
.cred-lock { font-size: 19px; filter: drop-shadow(0 0 8px rgba(127,178,221,.5)); }
.cred-locked p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }

/* estado revelado */
.cred-open { display: flex; flex-direction: column; gap: 6px; }
.cred-row { display: flex; align-items: center; gap: 8px; }
.cred-label {
  width: 66px; flex: none; font: 500 10px var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.cred-val {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--text);
  padding: 5px 9px; border-radius: 8px;
  background: rgba(78,127,168,.08); border: 1px solid rgba(78,127,168,.25);
}
.cred-val.cred-scrambling { color: #7fb2dd; text-shadow: 0 0 10px rgba(127,178,221,.5); }
.cred-copy { flex: none; font-size: 13px; padding: 5px 7px; }
.cred-note { margin: 5px 0 0; font-size: 11px; color: var(--muted); }
/* fogonazo al revelarse */
.cred-flash { animation: credFlash 1.4s ease-out both; border-radius: 12px; }
@keyframes credFlash {
  0% { box-shadow: 0 0 0 0 rgba(127,178,221,0); }
  25% { box-shadow: 0 0 34px -2px rgba(127,178,221,.55), 0 0 0 1px rgba(127,178,221,.5); }
  100% { box-shadow: 0 0 0 0 rgba(127,178,221,0); }
}

/* modal del AUP */
#modal-aup { width: min(96vw, 620px); }
.aup-scroll { max-height: 46vh; overflow-y: auto; padding-right: 6px; }
.aup-scroll > p { font-size: 13px; line-height: 1.65; color: #C9DCEF; }
.aup-points { margin: 12px 0; padding-left: 18px; display: flex; flex-direction: column; gap: 9px; }
.aup-points li { font-size: 12.5px; line-height: 1.6; color: rgba(201,220,239,.8); }
.aup-points b { color: #EAF4FF; }
.aup-link { font-size: 12px; }
.aup-link a { color: #7fb2dd; text-decoration: none; }
.aup-link a:hover { color: #C9DCEF; }
.aup-check {
  display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  background: rgba(78,127,168,.10); border: 1px solid rgba(78,127,168,.4);
  transition: background .15s ease, border-color .15s ease;
}
.aup-check:hover { background: rgba(78,127,168,.16); }
.aup-check input { margin-top: 2px; width: 16px; height: 16px; accent-color: #4E7FA8; flex: none; cursor: pointer; }
.aup-check span { font-size: 12.5px; line-height: 1.55; color: #DCE9F6; }
#aup-accept:disabled { opacity: .45; cursor: not-allowed; }

/* en modo claro, las credenciales conservan legibilidad */
[data-theme="dark"] .cred-val { background: rgba(78,127,168,.14); border-color: rgba(78,127,168,.4); }


/* ═════════ v44 — bloque 3: verificación, recuperación y cancelación ═════════ */
.verify-banner {
  display: flex; align-items: center; gap: 12px;
  margin: 12px 22px 0; padding: 11px 16px; border-radius: 12px;
  background: rgba(78,127,168,.10); border: 1px solid rgba(78,127,168,.4);
  position: relative; z-index: 1;
  animation: viewRise .4s cubic-bezier(.22,1,.36,1) both;
}
.verify-banner .vb-ico { font-size: 17px; }
.verify-banner p { margin: 0; flex: 1; font-size: 13px; color: var(--text); }
.btn-sm { padding: 7px 13px; font-size: 12.5px; }
[data-theme="dark"] .verify-banner { background: rgba(78,127,168,.14); border-color: rgba(78,127,168,.5); }

.bill-cancelat { color: #C86E50 !important; font-weight: 600; }
.bill-status.cancel-scheduled { background: rgba(200,110,80,.16); color: #E8825F; }
#modal-cancel { width: min(94vw, 480px); }
#cx-body p { font-size: 13.5px; line-height: 1.7; margin: 0 0 12px; }
#cx-body b { color: var(--text); }


/* ═════════ v45 — aprovisionamiento con estados ═════════ */
.cred-building { border-style: solid; }
.cred-building .spin { display: inline-block; animation: gearSpin 2.4s linear infinite; }
@keyframes gearSpin { to { transform: rotate(360deg); } }
.cred-building .dots i { animation: dotBlink 1.4s infinite; }
.cred-building .dots i:nth-child(2) { animation-delay: .2s; }
.cred-building .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dotBlink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
.cred-failed { border-color: rgba(200,110,80,.55); background: rgba(200,110,80,.08); }
.srv-pill.bad { background: rgba(200,110,80,.16); color: #E8825F; }
.bill-status.provisioning { background: rgba(78,127,168,.16); color: #7fb2dd; }
.bill-status.provision-failed { background: rgba(200,110,80,.16); color: #E8825F; }
@media (prefers-reduced-motion: reduce) { .cred-building .spin, .cred-building .dots i { animation: none; } }


/* ═════════ v47 — Mi cuenta, gate y recibos ═════════ */
.acct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; align-items: start; }
.acct-card label {
  display: block; margin: 14px 0 6px;
  font: 600 12.5px var(--font-ui); color: var(--muted);
}
.acct-card input {
  width: 100%; padding: 10px 13px; border-radius: 10px;
  background: var(--paper); color: var(--text);
  border: 1px solid var(--line); font: 14.5px var(--font-ui);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.acct-card input:focus { outline: none; border-color: #6FA0CB; box-shadow: 0 0 0 3px rgba(78,127,168,.18); }
.acct-card .btn { margin-top: 16px; }
.acct-static { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-height: 34px; }
.acct-dim { color: var(--muted); font-size: 13px; }
.acct-chip {
  padding: 3px 10px; border-radius: 999px;
  font: 600 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  background: rgba(78,127,168,.14); color: #35618A; border: 1px solid rgba(78,127,168,.3);
}
.acct-chip.ok { background: rgba(42,157,105,.12); color: #2A9D69; border-color: rgba(42,157,105,.3); }
.acct-chip.warn { background: rgba(233,196,106,.16); color: #A47F1E; border-color: rgba(233,196,106,.4); }
[data-theme="dark"] .acct-chip { color: #9CC3E4; }
[data-theme="dark"] .acct-chip.ok { color: #4FC08D; }
[data-theme="dark"] .acct-chip.warn { color: #E9C46A; }

.acct-theme { display: flex; gap: 10px; margin-top: 6px; }
.acct-theme-opt {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px; border-radius: 12px; cursor: pointer;
  font: 600 13.5px var(--font-ui); color: var(--muted);
  background: var(--paper); border: 1px solid var(--line);
  transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.acct-theme-opt i { font-style: normal; font-size: 15px; }
.acct-theme-opt:hover { border-color: #6FA0CB; color: var(--text); }
.acct-theme-opt.on {
  color: var(--text); border-color: #4E7FA8;
  box-shadow: 0 0 0 3px rgba(78,127,168,.18), 0 4px 14px rgba(53,97,138,.16);
}

.rcp-list { display: flex; flex-direction: column; }
.rcp-row {
  display: flex; align-items: center; gap: 13px; padding: 10px 4px;
  border-bottom: 1px solid var(--line);
}
.rcp-row:last-child { border-bottom: none; }
.rcp-num { flex: none; font-size: 11.5px; color: var(--muted); letter-spacing: .04em; }
.rcp-row .grow b { display: block; font-size: 13.5px; }
.rcp-row .grow span { font-size: 12px; color: var(--muted); }
.rcp-amt { flex: none; font-size: 14px; }
@media (max-width: 620px) { .rcp-num { display: none; } }

/* ═══════════════ Carrito: cajón lateral fijo (borde derecho) ═══════════════
   Siempre al alcance dentro de la app: una pestaña flotante pegada al borde
   lo abre desde cualquier vista. Animación solo con transform/opacity. */
.cart-tab{
  position:fixed;top:50%;right:0;z-index:58;
  display:none;align-items:center;justify-content:center;
  width:46px;height:64px;padding:0;
  transform:translateY(-50%);
  background:linear-gradient(135deg,var(--teal),var(--teal-deep));color:#fff;
  border:none;border-radius:14px 0 0 14px;cursor:pointer;font-size:19px;
  box-shadow:-6px 8px 24px rgba(10,37,51,.28),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .32s cubic-bezier(.25,.9,.3,1.15),filter .15s ease;
}
body.in-app .cart-tab{display:flex}
.cart-tab:hover{filter:brightness(1.1);transform:translateY(-50%) translateX(-3px)}
.cart-tab.drawer-out{transform:translateY(-50%) translateX(calc(-1 * min(400px, 92vw)))}
.cart-tab .cart-badge{top:6px;right:6px}

.cart-scrim{
  position:fixed;inset:0;z-index:70;background:rgba(10,17,24,.45);
  opacity:0;pointer-events:none;transition:opacity .28s ease;
}
.cart-scrim.open{opacity:1;pointer-events:auto}

.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:71;
  width:min(400px,92vw);margin:0;padding:22px 22px 18px;
  display:flex;flex-direction:column;gap:12px;
  background:var(--card);border-left:1px solid var(--line);
  box-shadow:-24px 0 60px rgba(10,37,51,.25);
  transform:translateX(103%);
  transition:transform .34s cubic-bezier(.25,.9,.3,1.05);
}
.cart-drawer.open{transform:translateX(0)}
.cart-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cart-drawer-head h3{margin:0;font:700 19px var(--font-display);color:var(--text)}
.cart-close{color:var(--muted);font-size:17px}
.cart-close:hover{color:var(--text)}
.cart-drawer-sub{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5}
.cart-drawer .cart-body{flex:1;overflow-y:auto;padding-right:4px;margin-right:-4px}
.cart-drawer .cart-row{background:var(--shallows);border:1px solid var(--line);border-radius:12px;padding:12px 14px}

[data-theme="dark"] .cart-drawer{
  --paper:#0E1319;--card:#151C25;--line:#26313E;--text:#E7EEF6;--muted:#93A4B6;--shallows:#1B2836;
  color:var(--text);box-shadow:-24px 0 60px rgba(0,0,0,.55);
}
[data-theme="dark"] .cart-scrim{background:rgba(4,8,12,.6)}

@media (max-width:640px){
  .cart-tab{width:42px;height:58px;font-size:17px}
  .cart-drawer{width:min(360px,94vw)}
  .cart-tab.drawer-out{transform:translateY(-50%) translateX(calc(-1 * min(360px, 94vw)))}
}

/* Opciones del configurador que este host aún no puede entregar */
.custom-pill.off{opacity:.42;cursor:not-allowed;filter:grayscale(.4)}
.custom-pill.off:hover{transform:none;border-color:var(--line)}

/* "Looking for something else?" — pie del configurador a medida */
.custom-alt{margin:14px 0 0;padding-top:13px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--muted);line-height:1.6}
.custom-alt a{color:var(--teal-deep);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(78,127,168,.35)}
.custom-alt a:hover{border-bottom-color:var(--teal-deep)}
.custom-alt span{display:block;margin-top:2px;font-size:11.5px;color:var(--muted);opacity:.85}
.sl-builder-alt{margin:18px auto 0;max-width:920px;padding:14px 18px;border-radius:12px;text-align:center;
  background:rgba(24,48,72,.25);border:1px solid rgba(156,195,228,.16);font-size:13.5px;color:#A9BDD2}
.sl-builder-alt a{color:#C0D8F0;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(192,216,240,.4)}
.sl-builder-alt a:hover{border-bottom-color:#C0D8F0}
.sl-builder-alt em{display:block;margin-top:4px;font-style:normal;font-size:12px;color:#7E93A8}

/* specs del build a medida dentro del carrito */
.cart-row .cart-spec{display:block;font-style:normal;font:500 11.5px var(--font-mono);color:var(--muted);margin:2px 0 3px}

/* tarjeta Visit us clicable → Google Maps */
a.sl-contact-card{text-decoration:none;color:inherit;cursor:pointer}
a.sl-contact-card:hover{border-color:rgba(156,195,228,.4)}
.sl-map-hint{display:block;margin-top:6px;font-style:normal;font-size:11.5px;color:#8FB6DA;opacity:0;transition:opacity .2s}
a.sl-contact-card:hover .sl-map-hint{opacity:1}