.nav-transition { transition: transform .35s ease, background .25s ease, box-shadow .25s ease, padding .2s ease; }
.nav-hidden    { transform: translateY(-100%); }
.nav-shadow    { box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.nav-compact   { padding-top: .6rem !important; padding-bottom: .6rem !important; }

:root{
  --brand-start:#ff5f6d;
  --brand-mid:#ff9966;
  --brand-end:#ffc371;

  /* LIGHT defaults */
  --bg-deep:#ffffff;
  --bg-deep-2:#f8fafc;       /* slate-50 */
  --ink:#0f172a;             /* slate-900 */
  --nav-bg: rgba(255,255,255,.78);
  --nav-border: rgba(2,6,23,.08);
  --card-bg: rgba(2,6,23,.04);
  --card-border: rgba(2,6,23,.10);
  --card-shadow: 0 18px 60px -30px rgba(2,6,23,.22);
}

/* DARK overrides */
html.dark{
  --bg-deep:#0f172a;         /* slate-900-ish */
  --bg-deep-2:#0b1220;
  --ink:#e2e8f0;             /* slate-200 */

  --nav-bg: rgba(2,6,23,.75);
  --nav-border: rgba(255,255,255,.08);

  --card-bg: rgba(15,23,42,.55);
  --card-border: rgba(255,255,255,.08);
  --card-shadow:
    0 30px 80px -10px rgba(0,0,0,.9),
    0 0 30px rgba(255,153,102,.22),
    0 0 80px rgba(255,195,113,.18);
}

/* ✅ BODY ahora respeta el tema */
body {
  background-color: var(--bg-deep);
  color: var(--ink);
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,153,102,.16) 0%, rgba(15,23,42,0) 60%),
    radial-gradient(circle at 80% 30%, rgba(255,95,109,.12) 0%, rgba(15,23,42,0) 60%),
    radial-gradient(circle at 50% 80%, rgba(255,195,113,.10) 0%, rgba(15,23,42,0) 60%);
  background-size: cover;
  background-repeat: no-repeat;
  color-scheme: light;
}
html.dark body{
  color-scheme: dark;
}

/* Gradientes ok en ambos */
.brand-gradient{
  background:linear-gradient(90deg,var(--brand-start),var(--brand-mid),var(--brand-end));
}
.text-gradient{
  background:linear-gradient(90deg,var(--brand-start),var(--brand-end));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ✅ nav solid ahora depende de variables */
.nav-solid{
  backdrop-filter: saturate(180%) blur(10px);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
}

/* ✅ glass-card ahora depende de variables */
.glass-card{
  background: var(--card-bg);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-radius: 1rem;
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

/* ✅ mini-pill para light/dark */
.mini-pill{
  background: rgba(2,6,23,.04);
  border: 1px solid rgba(2,6,23,.10);
  border-radius: 9999px;
  box-shadow: 0 10px 30px rgba(2,6,23,.12);
}
html.dark .mini-pill{
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 10px 30px rgba(0,0,0,.7);
}

/* Glow frame: mantenlo más sutil en light para que no cante */
.glow-frame{
  position:relative;
  border-radius:1rem;
  padding:2px;
  background:conic-gradient(from 0deg,
    rgba(255,95,109,.70),
    rgba(255,195,113,.70),
    rgba(255,153,102,.70),
    rgba(255,95,109,.70));
  box-shadow: 0 18px 60px -30px rgba(2,6,23,.25);
  animation: spinBorder 6s linear infinite;
}
html.dark .glow-frame{
  box-shadow:
    0 30px 80px -10px rgba(0,0,0,.9),
    0 0 30px rgba(255,153,102,.4),
    0 0 80px rgba(255,195,113,.25);
}
@keyframes spinBorder {
  0%{filter:hue-rotate(0deg);}
  100%{filter:hue-rotate(360deg);}
}

.glow-inner{
  border-radius:0.9rem;
  background-color: var(--bg-deep-2);
  background-image: radial-gradient(circle at 50% 0%, rgba(255,255,255,.10) 0%, rgba(15,23,42,0) 70%);
  min-height:14rem;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:2rem;
  color: var(--ink);
}
html.dark .glow-inner{
  background-color:#0f172a;
  color:#e2e8f0;
}

/* safe area */
.safe {
  padding-top: var(--safe-area-inset-top, env(safe-area-inset-top));
  padding-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom));
}