/* ==========================================================================
   CENTEOLT — SISTEMA DE DISEÑO Y TEMAS (DARK & LIGHT)
   Paleta: Verde Manzana, Negro Carbón y Blanco Puro
   ========================================================================== */

/* ── MODO CLARO (Default :root) ── */
:root {
  /* 🍏 Verde Manzana */
  --apple-green-50: #f7fee7;
  --apple-green-100: #ecfccb;
  --apple-green-200: #d9f99d;
  --apple-green-400: #a3e635;
  --apple-green-500: #84cc16; /* Color de acento primario */
  --apple-green-600: #65a30d;
  --apple-green-700: #4d7c0f;
  --apple-green-glow: rgba(132, 204, 22, 0.22);
  --apple-green-border: rgba(132, 204, 22, 0.35);

  /* Superficies y Fondos */
  --bg-body: #f8faf8;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #ffffff;
  --bg-surface-translucent: rgba(255, 255, 255, 0.88);
  --bg-card: #ffffff;
  --bg-input: #ffffff;
  --bg-nav: rgba(255, 255, 255, 0.94);
  --bg-footer: #0c120e;

  /* Bordes y Divisores */
  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-card: rgba(0, 0, 0, 0.06);
  --border-active: var(--apple-green-500);

  /* Tipografía */
  --text-primary: #0a0e0b;
  --text-secondary: #374151;
  --text-muted: #6b7280;
  --text-inverse: #ffffff;

  /* Sombras y Luces */
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.08);
  --shadow-apple: 0 8px 25px rgba(101, 163, 13, 0.25);

  /* Micro-animaciones */
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 9999px;
}

/* ── MODO OSCURO ([data-theme="dark"]) ── */
[data-theme="dark"] {
  /* 🍏 Verde Manzana Iluminado para Dark Mode */
  --apple-green-50: rgba(132, 204, 22, 0.1);
  --apple-green-100: rgba(132, 204, 22, 0.18);
  --apple-green-200: #a3e635;
  --apple-green-400: #bef264;
  --apple-green-500: #84cc16;
  --apple-green-600: #a3e635; /* Más brillante sobre fondo negro */
  --apple-green-700: #d9f99d;
  --apple-green-glow: rgba(163, 230, 53, 0.3);
  --apple-green-border: rgba(163, 230, 53, 0.4);

  /* Superficies y Fondos Negros Carbón */
  --bg-body: #080b08;
  --bg-surface: #101612;
  --bg-surface-elevated: #151d17;
  --bg-surface-translucent: rgba(16, 22, 18, 0.88);
  --bg-card: #121813;
  --bg-input: #0d120e;
  --bg-nav: rgba(10, 14, 11, 0.92);
  --bg-footer: #050705;

  /* Bordes y Divisores */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-card: rgba(255, 255, 255, 0.07);
  --border-active: var(--apple-green-400);

  /* Tipografía */
  --text-primary: #f8faf8;
  --text-secondary: #d1d5db;
  --text-muted: #9ca3af;
  --text-inverse: #0a0e0b;

  /* Sombras y Luces */
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 45px rgba(0, 0, 0, 0.6);
  --shadow-apple: 0 8px 30px rgba(132, 204, 22, 0.28);
}

/* ── Transición Global Suave de Tema ── */
html,
body {
  background-color: var(--bg-body);
  color: var(--text-primary);
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* ── Alternancia Dinámica de Logotipos según Tema ── */
.nav-logo-light,
.logo-light {
  display: block !important;
}
.nav-logo-dark,
.logo-dark {
  display: none !important;
}

[data-theme="dark"] .nav-logo-light,
[data-theme="dark"] .logo-light {
  display: none !important;
}
[data-theme="dark"] .nav-logo-dark,
[data-theme="dark"] .logo-dark {
  display: block !important;
}

/* ── Botón Toggle de Tema (Sun / Moon Switch) ── */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill);
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  cursor: pointer;
  outline: none;
  padding: 0;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  flex-shrink: 0;
}

.theme-toggle-btn:hover {
  border-color: var(--apple-green-500);
  color: var(--apple-green-500);
  box-shadow: 0 0 16px var(--apple-green-glow);
  transform: translateY(-2px) scale(1.05);
}

.theme-toggle-btn svg {
  width: 20px;
  height: 20px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.theme-toggle-btn .theme-icon-sun {
  color: #f59e0b; /* Cálido ámbar sol */
}

.theme-toggle-btn .theme-icon-moon {
  color: var(--apple-green-400); /* Verde manzana luna */
}

/* ── Botón Toggle Flotante (para pantallas de auth/login) ── */
.theme-toggle-floating {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
}