/* ============================================================
   theme.css — 3 temas seleccionables por el usuario
     data-theme="celeste" | "rojo" | "oscuro"
   La paleta funcional (éxito/advertencia/peligro) es FIJA.
   ============================================================ */

:root {
  /* -- Paleta funcional fija -- */
  --success:      #16a34a;  --success-soft: #dcfce7;
  --warning:      #d97706;  --warning-soft: #fef3c7;
  --danger:       #b91c1c;  --danger-soft:  #fee2e2;
  --info:         #0ea5e9;

  /* -- Radios / sombras / transición (look iOS) -- */
  --radius-xs: 8px; --radius-sm: 14px; --radius: 22px; --radius-lg: 28px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.05), 0 2px 8px rgba(15,23,42,.05);
  --shadow:    0 4px 24px rgba(15,23,42,.07), 0 12px 40px rgba(15,23,42,.06);
  --shadow-lg: 0 8px 40px rgba(15,23,42,.12), 0 20px 60px rgba(15,23,42,.10);
  --transition: 180ms cubic-bezier(.4,0,.2,1);
  --sidebar-w: 264px; --sidebar-w-collapsed: 84px; --gap: 18px;
  --font-sans: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ============================================================
   CELESTE (claro, degradado suave)  — DEFAULT
   ============================================================ */
:root,
[data-theme="celeste"] {
  --bg:            #faf9ff;
  --bg-gradient:   #faf9ff;
  --surface:       #ffffff;
  --surface-2:     #f8f8fc;
  --surface-hover: #f0f3fb;
  --text:          #1f2430;
  --text-muted:    #5f6778;
  --text-soft:     #9aa3b2;
  --border:        #ececf3;
  --border-soft:   #f0f1f6;

  --brand:          #2f80ff;
  --brand-strong:   #315fca;
  --brand-soft:     rgba(47,128,255,.10);
  --brand-contrast: #ffffff;
  --brand-gradient: linear-gradient(135deg, #5fa0ff 0%, #2f80ff 100%);

  /* Sidebar "azulito" tipo glass: degradado suave + brillos radiales */
  --sidebar-bg:
      radial-gradient(circle at 18% 14%, rgba(138,170,255,.20) 0%, transparent 28%),
      radial-gradient(circle at 80% 80%, rgba(78,120,255,.16) 0%, transparent 24%),
      linear-gradient(180deg, #eef3ff 0%, #dfe8ff 42%, #d4e0ff 100%);
  --sidebar-text:        #24364d;
  --sidebar-muted:       rgba(36,54,77,.55);
  --sidebar-hover:       rgba(255,255,255,.40);
  --sidebar-active-bg:   #faf9ff;
  --sidebar-active-text: #315fca;
  --sidebar-active-shadow: 0 8px 20px rgba(49,95,202,.12);
  --sidebar-border:      rgba(255,255,255,.48);
  --sidebar-shadow:      0 18px 40px rgba(120,138,190,.16), 0 6px 18px rgba(120,138,190,.08);
}

/* ============================================================
   ROJO (degradado cálido suave, misma filosofía glass que el azul)
   ============================================================ */
[data-theme="rojo"] {
  --bg:            #faf9ff;
  --bg-gradient:   #faf9ff;
  --surface:       #ffffff;
  --surface-2:     #fdf4f2;
  --surface-hover: #fceeeb;
  --text:          #2a1714;
  --text-muted:    #7a5a52;
  --text-soft:     #b79a92;
  --border:        #f3e2dd;
  --border-soft:   #f8ece9;

  --brand:          #e11d48;
  --brand-strong:   #b91c1c;
  --brand-soft:     rgba(225,29,72,.10);
  --brand-contrast: #ffffff;
  --brand-gradient: linear-gradient(135deg, #f97316 0%, #dc2626 100%);

  /* Sidebar "rojito" tipo glass: degradado cálido suave + brillos radiales */
  --sidebar-bg:
      radial-gradient(circle at 18% 14%, rgba(255,150,120,.24) 0%, transparent 28%),
      radial-gradient(circle at 80% 80%, rgba(244,63,94,.18) 0%, transparent 24%),
      linear-gradient(180deg, #ffeae4 0%, #ffd9d6 45%, #ffd0d6 100%);
  --sidebar-text:        #5a2420;
  --sidebar-muted:       rgba(90,36,32,.55);
  --sidebar-hover:       rgba(255,255,255,.42);
  --sidebar-active-bg:   #faf9ff;
  --sidebar-active-text: #b91c1c;
  --sidebar-active-shadow: 0 8px 20px rgba(185,28,28,.16);
  --sidebar-border:      rgba(255,255,255,.48);
  --sidebar-shadow:      0 18px 40px rgba(190,110,100,.18), 0 6px 18px rgba(190,110,100,.10);
}

/* ============================================================
   OSCURO
   ============================================================ */
[data-theme="oscuro"] {
  --bg:            #0b1220;
  --bg-gradient:   radial-gradient(1200px 600px at 80% -10%, #16223b 0%, #0b1220 60%);
  --surface:       #141d30;
  --surface-2:     #1c2942;
  --surface-hover: #243352;
  --text:          #e9eef8;
  --text-muted:    #9fb0c8;
  --text-soft:     #647088;
  --border:        #28344e;
  --border-soft:   #1e2940;

  --brand:          #5b8def;
  --brand-strong:   #93b4f8;
  --brand-soft:     #1e2f50;
  --brand-contrast: #ffffff;
  --brand-gradient: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);

  --sidebar-bg:          linear-gradient(180deg, #16213a 0%, #0f1830 100%);
  --sidebar-text:        #e9eef8;
  --sidebar-muted:       #8fa3c2;
  --sidebar-hover:       rgba(255,255,255,.06);
  --sidebar-active-bg:   #223150;
  --sidebar-active-text: #ffffff;
  --sidebar-active-shadow: 0 8px 20px rgba(0,0,0,.45);
  --sidebar-border:      rgba(255,255,255,.07);
  --sidebar-shadow:      0 10px 40px rgba(0,0,0,.45);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow:    0 4px 24px rgba(0,0,0,.4);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.5);
}