/* ═══════════════════════════════════════════════════════════
   J.A.D.E — Base: reset, variables, body
   Cargado por TODAS las páginas
   ═══════════════════════════════════════════════════════════ */

/* ── Reset ───────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}

/* ── Selección de texto ──────────────────────────────────── */
::selection{background:#00A86B;color:#fff}
::-moz-selection{background:#00A86B;color:#fff}

/* ── Iconos SVG (sustituyen emojis; se dimensionan con el font-size del contenedor) ── */
.svgm{width:1em;height:1em;display:inline-block;vertical-align:-0.125em;flex-shrink:0}
.svgm-l{margin-right:0.4em}
.svgm-r{margin-left:0.4em}

/* ── CSS Variables ───────────────────────────────────────── */
:root{
  /* Colores jade (acento) */
  --jade:#00b894;
  --jade2:#00a381;
  --jade3:#007a60;
  --jade-light:rgba(0,184,148,0.08);
  --jade-glow:rgba(0,184,148,0.2);
  
  /* Modo claro - Paleta suave y elegante */
  --bg:#f7f9f8;
  --bg2:#eff3f1;
  --bg3:#e5eae8;
  --dark:#0d1f1a;
  --dark2:#152820;
  --text:#1f2e2a;
  --text2:#52685f;
  --text3:#75908a;
  --border:#dce5e2;
  --border2:#c8d5d0;
  --card:#ffffff;
  --danger:#e74c3c;
  --shadow:0 2px 12px rgba(0,40,30,0.06);
  --shadow2:0 8px 32px rgba(0,40,30,0.10);
  --nav-h:58px;
}
[data-theme="dark"]{
  --bg:#080c0b;
  --bg2:#0d1210;
  --bg3:#111917;
  --text:#deeae6;
  --text2:#7fb0a7;
  --text3:#55807a;
  --border:#192824;
  --border2:#1f3028;
  --card:#0d1210;
  --shadow:0 2px 12px rgba(0,0,0,0.35);
  --shadow2:0 8px 32px rgba(0,0,0,0.5);
  --jade-light:rgba(0,184,148,0.10);
}

/* ── Body ────────────────────────────────────────────────── */
body{
  background:var(--bg);
  background-image:radial-gradient(ellipse 1100px 520px at 50% -180px,rgba(0,184,148,0.055),transparent 70%);
  background-repeat:no-repeat;
  color:var(--text);
  font-family:'Inter',sans-serif;
  min-height:100vh;
  max-width:100vw;
  transition:background 0.3s,color 0.3s;
  overflow-x:hidden;
}
[data-theme="dark"] body{
  background-image:radial-gradient(ellipse 1100px 520px at 50% -180px,rgba(0,184,148,0.07),transparent 70%);
}

/* ── Focus visible (navegación con teclado) ──────────────── */
:focus-visible{outline:2px solid var(--jade);outline-offset:2px;border-radius:4px}

/* ── Scrollbar oculta (el scroll sigue funcionando) ─────── */
::-webkit-scrollbar{width:0;height:0;display:none}
*{scrollbar-width:none;-ms-overflow-style:none}

/* ── Animations ──────────────────────────────────────────── */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* ── Cambio de tema suave ────────────────────────────────── */
/* La clase se añade 400ms en toggleTheme() para que todos los
   colores transicionen a la vez en lugar de cambiar de golpe */
.theme-switching,.theme-switching *{
  transition:background-color 0.6s ease,background 0.6s ease,
    color 0.6s ease,border-color 0.6s ease,box-shadow 0.6s ease,fill 0.6s ease !important;
}

@keyframes themeSpin{
  from{transform:rotate(-180deg) scale(0.4)}
  to{transform:rotate(0) scale(1)}
}
.theme-spin{animation:themeSpin 0.45s cubic-bezier(0.2,0.7,0.3,1.2)}

@media (prefers-reduced-motion:reduce){
  .theme-switching,.theme-switching *{transition:none !important}
  .theme-spin{animation:none}
}