/* ═══════════════════════════════════════
   MPTC v5 · base.css
   Variables, reset, tipografía, temas
═══════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

:root{
  /* Paleta oscura */
  --bg:#0B1020;
  --surface:#141A2E;
  --surface-2:#1C2440;
  --surface-3:#252E50;
  --border:#2A3354;
  --border-2:#3A4470;

  --text:#F5F7FF;
  --text-2:#C4CCE5;
  --text-3:#8892B5;
  --text-4:#5A6388;

  --primary:#3B82F6;
  --primary-d:#2563EB;
  --primary-l:rgba(59,130,246,.14);

  --accent:#E51A2B;
  --accent-d:#B8101F;
  --accent-l:rgba(229,26,43,.14);

  --green:#22C55E;
  --green-l:rgba(34,197,94,.14);
  --red:#EF4444;
  --red-l:rgba(239,68,68,.14);
  --amber:#F59E0B;
  --amber-l:rgba(245,158,11,.14);
  --wa:#25D366;

  --brand-red:#E51A2B;
  --brand-blue:#1C28A8;

  --r-sm:10px;--r:14px;--r-lg:20px;--r-xl:28px;

  --glow-blue:0 0 0 1px rgba(59,130,246,.4),0 8px 28px rgba(59,130,246,.25);
  --glow-orange:0 0 0 1px rgba(229,26,43,.4),0 8px 28px rgba(229,26,43,.28);
  --shadow:0 6px 20px rgba(0,0,0,.35);
  --shadow-lg:0 16px 48px rgba(0,0,0,.45);

  font-family:'Manrope',system-ui,sans-serif;
  font-feature-settings:"ss01","cv11";
}

/* ─── LIGHT THEME ─── */
body.light{
  --bg:#F4F6FB;
  --surface:#FFFFFF;
  --surface-2:#F4F6FB;
  --surface-3:#E7ECF5;
  --border:#E1E6EF;
  --border-2:#C9D1DE;
  --text:#0B1020;
  --text-2:#2A3354;
  --text-3:#5A6388;
  --text-4:#8892B5;
  --primary-l:rgba(59,130,246,.10);
  --accent-l:rgba(229,26,43,.10);
  --green-l:rgba(34,197,94,.12);
  --red-l:rgba(239,68,68,.10);
  --amber-l:rgba(245,158,11,.14);
  --shadow:0 4px 14px rgba(15,23,42,.06);
  --shadow-lg:0 16px 40px rgba(15,23,42,.12);
}
body.light{
  background:
    radial-gradient(900px 600px at -10% -20%,rgba(59,130,246,.08),transparent 60%),
    radial-gradient(800px 600px at 110% 110%,rgba(229,26,43,.06),transparent 60%),
    var(--bg);
}

html,body{height:100%;overflow:hidden}
body{
  background:
    radial-gradient(900px 700px at -10% -20%,rgba(59,130,246,.12),transparent 60%),
    radial-gradient(800px 700px at 110% 110%,rgba(229,26,43,.10),transparent 60%),
    var(--bg);
  color:var(--text);
}