/* Pasarela Nebulae — Capa cósmica (dark/light + fondo nebulosa + planetas + toggle)
 * © 2026 Bijan Berahimi S. · BBS Comunicaciones. */

/* ─────────────────────────────────────────────────────────────
   Acentos nebulosa (ambos modos)
   ───────────────────────────────────────────────────────────── */
:root{
  --neb-indigo:#5b6ef0; --neb-violet:#8b5cf6; --neb-pink:#e056b0; --neb-cyan:#45d4e8;
  --star-op:0;            /* sin estrellas en claro */
  --neb-op:0.10;          /* nubes muy sutiles en claro */
}

/* ─────────────────────────────────────────────────────────────
   MODO OSCURO — redefine la paleta base; los roles cascada solos
   ───────────────────────────────────────────────────────────── */
html.dark{
  --white:     #12131d;
  --off-white: #07080f;
  --gray-50:   #161826;
  --gray-100:  #23263a;
  --gray-150:  #2a2d44;
  --gray-200:  #343858;
  --gray-300:  #5e6280;
  --gray-400:  #9094b2;
  --gray-500:  #bcc0da;
  --gray-700:  #e7e8f3;
  --black:     #f3f4fb;

  --text-invert:#ffffff;
  --accent:      var(--neb-indigo);
  --accent-hover:#4356e6;
  --bg-card:     rgba(20,22,34,0.66);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 8px 30px rgba(0,0,0,.5);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.6);

  --star-op:0.85;
  --neb-op:0.42;
  color-scheme: dark;
}

/* Glass cards en oscuro */
html.dark .card,
html.dark .panel,
html.dark .login-card{ backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); }

/* Headers / footer translúcidos correctos en oscuro */
html.dark .site-header{ background:rgba(7,8,15,.72); border-bottom-color:var(--bd); }
html.dark .adm-header{  background:rgba(7,8,15,.78); border-bottom-color:var(--bd); }
html.dark .site-footer,
html.dark .adm-footer{ background:transparent; }
html.dark .user-chip,
html.dark .adm-user-chip{ background:rgba(255,255,255,.05); }

/* CTA / botones primarios índigo en oscuro */
html.dark .site-nav a.cta,
html.dark .btn-primary{ background:linear-gradient(100deg,var(--accent-hover),var(--accent) 55%,var(--neb-violet)); color:#fff; border:0; }
html.dark .site-nav a.cta:hover,
html.dark .btn-primary:hover{ filter:brightness(1.08); }
html.dark .demo-banner{ background:rgba(139,92,246,.14); color:#cbb8ff; }

/* ─────────────────────────────────────────────────────────────
   FONDO CÓSMICO (estrellas + nubes nebulosa)
   ───────────────────────────────────────────────────────────── */
.cosmos-bg{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.cosmos-bg .neb{ position:absolute; border-radius:50%; filter:blur(110px); opacity:var(--neb-op); transition:opacity .4s; }
.cosmos-bg .neb-a{ width:46vw; height:46vw; top:-14vw; left:-10vw; background:radial-gradient(circle,var(--neb-violet),transparent 65%); }
.cosmos-bg .neb-b{ width:44vw; height:44vw; bottom:-18vw; right:-12vw; background:radial-gradient(circle,var(--neb-indigo),transparent 62%); }
.cosmos-bg .neb-c{ width:34vw; height:34vw; top:38%; left:46%; background:radial-gradient(circle,var(--neb-pink),transparent 60%); opacity:calc(var(--neb-op)*.7); }
.cosmos-bg .stars{
  position:absolute; inset:0; opacity:var(--star-op); transition:opacity .4s;
  background-image:
    radial-gradient(1.3px 1.3px at 25px 35px,#fff,transparent),
    radial-gradient(1px 1px at 90px 130px,#cfe3ff,transparent),
    radial-gradient(1.5px 1.5px at 165px 75px,#fff,transparent),
    radial-gradient(1px 1px at 210px 190px,#e6ccff,transparent),
    radial-gradient(1.2px 1.2px at 130px 240px,#fff,transparent),
    radial-gradient(1px 1px at 300px 60px,#bfe9ff,transparent),
    radial-gradient(1.4px 1.4px at 360px 200px,#fff,transparent);
  background-size:300px 300px, 380px 380px, 300px 300px, 420px 420px, 340px 340px, 460px 460px, 300px 300px;
  background-repeat:repeat;
}
@keyframes twinkle{ 0%,100%{opacity:var(--star-op)} 50%{opacity:calc(var(--star-op)*.55)} }
html.dark .cosmos-bg .stars{ animation:twinkle 6s ease-in-out infinite; }

/* ─────────────────────────────────────────────────────────────
   TOGGLE de tema
   ───────────────────────────────────────────────────────────── */
.theme-toggle{
  width:38px; height:38px; border-radius:var(--r-pill);
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--bg-subtle); border:1px solid var(--bd-strong); color:var(--text-soft);
  cursor:pointer; transition:all .18s; font-size:14px; line-height:1; margin-right:6px;
}
.theme-toggle:hover{ color:var(--text); border-color:var(--accent); }
.theme-toggle .fa-sun{ display:none; }
html.dark .theme-toggle .fa-moon{ display:none; }
html.dark .theme-toggle .fa-sun{ display:inline; }

/* ─────────────────────────────────────────────────────────────
   STATS como PLANETAS (nebula = nebulosa)
   ───────────────────────────────────────────────────────────── */
.stat-orbit{ display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:18px; margin:22px 0 24px; }
.stat-cell{ display:flex; flex-direction:column; align-items:center; gap:13px; text-align:center; }
.planet{
  position:relative; width:104px; height:104px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background:radial-gradient(circle at 32% 28%, var(--p-lite), var(--p-core) 58%, var(--p-deep));
  box-shadow: inset 0 2px 6px rgba(255,255,255,.35), inset 0 -8px 18px rgba(0,0,0,.35),
              0 10px 34px -8px var(--p-glow), 0 0 60px -12px var(--p-glow);
}
/* anillo tipo Saturno */
.planet::after{
  content:''; position:absolute; left:-26%; right:-26%; top:50%; height:34px;
  transform:translateY(-50%) rotate(-20deg); border-radius:50%;
  border:2px solid var(--p-ring); opacity:.45; pointer-events:none;
}
.planet .num{ position:relative; z-index:1; font-family:var(--font-sans-bold); font-weight:800;
  font-size:30px; color:#fff; line-height:1; letter-spacing:-.03em; text-shadow:0 2px 10px rgba(0,0,0,.45); }
.planet .num.sm{ font-size:16px; font-weight:700; }
.stat-cell .plabel{ font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-muted); max-width:130px; }

.p-indigo{ --p-lite:#aab4ff; --p-core:#5b6ef0; --p-deep:#2c37a8; --p-ring:#aab4ff; --p-glow:rgba(91,110,240,.6); }
.p-violet{ --p-lite:#cbb0ff; --p-core:#8b5cf6; --p-deep:#532bb0; --p-ring:#cbb0ff; --p-glow:rgba(139,92,246,.6); }
.p-pink{   --p-lite:#ffb0e3; --p-core:#e056b0; --p-deep:#9c2c78; --p-ring:#ffb0e3; --p-glow:rgba(224,86,176,.55); }
.p-cyan{   --p-lite:#b0f0fa; --p-core:#45d4e8; --p-deep:#1d8294; --p-ring:#b0f0fa; --p-glow:rgba(69,212,232,.5); }

/* ════════ Pulido pro + animaciones (admin + público) · v2.3.1 ════════ */
@keyframes nbcFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes nbcPop{0%{transform:scale(.92);opacity:0}60%{transform:scale(1.02)}100%{transform:scale(1);opacity:1}}
.adm-main .card,.adm-main .stat{transition:transform .22s cubic-bezier(.22,.61,.36,1),box-shadow .26s,border-color .2s !important; animation:nbcFadeUp .45s cubic-bezier(.22,.61,.36,1) both;}
.adm-main .stat:hover,.adm-main .card:hover{transform:translateY(-3px);}
.adm-main .stat .value{animation:nbcPop .5s cubic-bezier(.34,1.56,.64,1) both; animation-delay:.1s;}
.adm-main .stat-grid .stat:nth-child(2){animation-delay:.06s} .adm-main .stat-grid .stat:nth-child(3){animation-delay:.12s} .adm-main .stat-grid .stat:nth-child(4){animation-delay:.18s} .adm-main .stat-grid .stat:nth-child(5){animation-delay:.24s}
.btn,.btn-primary,.btn-secondary{transition:transform .12s,box-shadow .22s,background-position .4s,background .15s,color .15s,border-color .15s !important;}
.btn:hover,.btn-primary:hover,.btn-secondary:hover{transform:translateY(-1px);}
.btn:active,.btn-primary:active,.btn-secondary:active{transform:translateY(1px);}
.adm-nav>a,.adm-nav .nav-group-toggle{transition:color .15s,background .15s,border-color .15s,transform .15s;}
.adm-nav>a:hover{transform:translateY(-1px);}
.tbl tbody tr{transition:background .12s,box-shadow .12s;}
.tbl tbody tr:hover{box-shadow:inset 3px 0 0 var(--accent);}
.theme-toggle{transition:all .18s, transform .16s !important;}
.theme-toggle:hover{transform:translateY(-1px) rotate(10deg);}
.adm-brand .logo{transition:transform .3s cubic-bezier(.34,1.56,.64,1), opacity .2s;}
.adm-brand:hover .logo{transform:scale(1.05);}
.planet{transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
.stat-cell:hover .planet{transform:scale(1.06) translateY(-2px);}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){ .adm-main .card,.adm-main .stat,.adm-main .stat .value{animation:none !important;} *{transition-duration:.001s !important;} }