/* =========================================================
   THEME.CSS  (SOLO TOKENS + THEMES)
   - NO estilos de componentes (btn/card/table/input/wizard)
   - App-theme.css se encarga del look de componentes
   ========================================================= */

/* ===========================
   NÚCLEO (tokens comunes)
   =========================== */
:root{
  /* Marca */
  --brand:#60a5fa;
  --brand-ink:#0b1220;

  /* Texto */
  --txt:#1f2a37;
  --muted:#6b7280;
  --heading:#0f172a;

  /* Superficies */
  --bg:#f7fafc;
  --bg-tint:#eef5fb;
  --panel:#ffffff;
  --panel-2:#f4f7fb;
  --stroke:#e3e8f2;

  /* Tabla / hover (por si los usa app-theme.css) */
  --thead:#eef3fb;
  --hover:#f2f6fd;

  /* Acento y estados */
  --accent:#a7e3f3;
  --accent-ink:#083244;

  --ok:#bfeed6;
  --ok-ink:#06452a;

  --warn:#ffe7b8;
  --danger:#ffd1d1;

  color-scheme: light dark;
}

/* Base mínima (sin pisar componentes) */
body{
  color:var(--txt);
  background:var(--bg);
}

/* ===========================
   THEMES (1..8)
   =========================== */

/* THEME 1 · Pastel Clínico Suave */
body.theme-1{
  --bg:#f6fbff; --bg-tint:#eef5fb;
  --panel:#ffffff; --panel-2:#f4f7fb; --stroke:#dfe7f1;
  --thead:#f0f6ff; --hover:#f3f8ff;
  --accent:#a7e3f3; --accent-ink:#083244;
  --brand:#2aa7c9; --brand-ink:#061b22;

  background:
    radial-gradient(1200px 600px at 20% -10%, var(--bg-tint), transparent 60%),
    radial-gradient(1200px 800px at 120% -10%, #f9fcff, transparent 50%),
    var(--bg);
}

/* THEME 2 · Pastel con color (sky+mint) */
body.theme-2{
  --bg:#f1f7ff; --bg-tint:#e7f0fb;
  --panel:#ffffff; --panel-2:#eef4fb; --stroke:#d4deee;
  --thead:#e9f2ff; --hover:#eef5ff;
  --accent:#9fd9ff; --accent-ink:#0c3152;
  --brand:#3b82f6; --brand-ink:#0b1220;

  background:
    radial-gradient(900px 520px at 10% -10%, #cfe6ff, transparent 55%),
    radial-gradient(700px 420px at 95% -10%, #e4e1ff, transparent 50%),
    radial-gradient(900px 520px at -10% 110%, #bff2d8, transparent 55%),
    var(--bg);
}

/* THEME 3 · Gris-Azul Profesional (sobrio) */
body.theme-3{
  --bg:#f4f7fb; --bg-tint:#e9f0f8;
  --panel:#ffffff; --panel-2:#f2f5f9; --stroke:#d8e1ee;
  --thead:#edf2f9; --hover:#eef3f9;
  --accent:#b6d7ff; --accent-ink:#0e2748;
  --brand:#475569; --brand-ink:#0b1220;

  background:
    linear-gradient(180deg, var(--bg-tint) 0%, var(--bg) 60%),
    var(--bg);
}

/* THEME 4 · SaaS Salud (aqua suave) */
body.theme-4{
  --bg:#f3f9ff; --bg-tint:#eaf3fe;
  --panel:#ffffff; --panel-2:#f5f8fe; --stroke:#d9e6f7;
  --thead:#eaf2ff; --hover:#eef4ff;
  --accent:#a8ecf1; --accent-ink:#06343d;

  --ok:#bfeedd; --ok-ink:#06452a;
  --warn:#ffe6c2; --danger:#ffd6da;

  --brand:#0891b2; --brand-ink:#061b22;

  background:
    radial-gradient(1100px 520px at 15% -10%, #e7f0ff, transparent 55%),
    radial-gradient(900px 420px at 110% -10%, #daf7ff, transparent 50%),
    radial-gradient(1200px 520px at -20% 120%, #eaf3fe, transparent 60%),
    var(--bg);
}

/* THEME 5 · Beige Clínico */
body.theme-5{
  --bg:#fbf9f5; --bg-tint:#f5efe6;
  --panel:#ffffff; --panel-2:#f7f2ea; --stroke:#e7ded1;
  --thead:#f2ebe2; --hover:#f6f1e9;
  --accent:#e8dac1; --accent-ink:#3a2f1f;

  --ok:#d6eedf; --ok-ink:#0b3f2c;
  --warn:#ffe2b8; --danger:#ffd8d3;

  --brand:#b86b2a; --brand-ink:#1b120a;

  background:
    radial-gradient(1100px 520px at 15% -10%, #f4ecde, transparent 55%),
    radial-gradient(900px 420px at 110% -10%, #f7efe5, transparent 50%),
    linear-gradient(180deg, var(--bg-tint) 0%, var(--bg) 70%);
}

/* THEME 6 · Lavanda Pastel */
body.theme-6{
  --bg:#f7f7ff; --bg-tint:#f0f0ff;
  --panel:#ffffff; --panel-2:#f4f3ff; --stroke:#e2def7;
  --thead:#ecebff; --hover:#f1f0ff;
  --accent:#d8d3ff; --accent-ink:#2c1e6f;

  --ok:#cfeee4; --ok-ink:#0d3d32;
  --warn:#ffe6bf; --danger:#ffd7e3;

  --brand:#7c3aed; --brand-ink:#12081f;

  background:
    radial-gradient(1000px 520px at 12% -10%, #ecebff, transparent 55%),
    radial-gradient(900px 520px at -15% 110%, #f5f2ff, transparent 60%),
    var(--bg);
}

/* THEME 7 · Aqua-Teal Pastel */
body.theme-7{
  --bg:#f3fbfb; --bg-tint:#e9f6f6;
  --panel:#ffffff; --panel-2:#eef7f8; --stroke:#d6ecee;
  --thead:#e8f3f5; --hover:#edf6f7;
  --accent:#bfeef1; --accent-ink:#0b3440;

  --ok:#bfe9d6; --ok-ink:#09422c;
  --warn:#ffe7c1; --danger:#ffd7d7;

  --brand:#0f766e; --brand-ink:#041a17;

  background:
    radial-gradient(900px 520px at 10% -10%, #d5f4f6, transparent 55%),
    radial-gradient(700px 420px at 95% -10%, #e6faf1, transparent 50%),
    var(--bg);
}

/* THEME 8 · Gris Arena */
body.theme-8{
  --bg:#f6f6f3; --bg-tint:#efefe9;
  --panel:#ffffff; --panel-2:#f3f2ee; --stroke:#e0ddd5;
  --thead:#eeede9; --hover:#f2f1ed;
  --accent:#ddd5c6; --accent-ink:#2e2a22;

  --ok:#d6eddc; --ok-ink:#0d3a2c;
  --warn:#ffe3bd; --danger:#ffd6cf;

  background:
    linear-gradient(180deg, var(--bg-tint) 0%, var(--bg) 70%),
    var(--bg);
}

/* ===========================
   THEME ABSOLLUTY · Dark Tech
   =========================== */
body.theme-absolluty{
  --bg:#020C2B;
  --bg-tint:#03144A;
  --panel:#06122e;
  --panel-2:#071a3d;
  --stroke:#0b2a5a;

  --txt:#EAF4FF;
  --muted:#8fa9c4;
  --heading:#ffffff;

  --brand:#00D4FF;
  --brand-ink:#001824;
  --accent:#00D4FF;
  --accent-ink:#001824;

  --ok:#22c55e;
  --ok-ink:#052e16;
  --warn:#facc15;
  --danger:#ef4444;

  background:
    radial-gradient(1200px 700px at 85% 20%, #062C78 0%, transparent 55%),
    radial-gradient(900px 600px at -10% 110%, #03144A 0%, transparent 60%),
    linear-gradient(180deg, #020C2B 0%, #020C2B 100%);
}

/* ===========================
   Fallback dark automático
   (solo si NO hay theme)
   =========================== */
@media (prefers-color-scheme: dark){
  body:not([class*="theme-"]){
    --txt:#EAF4FF;
    --muted:#94a3b8;
    --heading:#ffffff;

    --bg:#0b0f1a;
    --bg-tint:#0d1424;
    --panel:#0f172a;
    --panel-2:#0e1528;
    --stroke:#1e293b;

    --thead:#0c1324;
    --hover:#121a2a;

    --ok:#22c55e; --ok-ink:#052e16;
    --warn:#facc15;
    --danger:#ef4444;
  }
}