/**
 * Modo Claro (Light Mode) - Tema alternativo
 * Sobrescribe variables CSS del :root cuando html.light-mode está activo
 */

html.light-mode {
  /* Fondos claros */
  --ge-bg-primary: #FFFFFF;
  --ge-bg-secondary: #F8F8FA;
  --ge-bg-elevated: #F0F0F5;
  --ge-bg-card: #FFFFFF;

  /* Gradiente (más suave en modo claro) */
  --ge-gradient-brand: linear-gradient(135deg, #D946EF 0%, #8B5CF6 50%, #0EA5E9 100%);

  /* Colores sólidos */
  --ge-magenta: #D946EF;
  --ge-violet: #8B5CF6;
  --ge-violet-light: #A78BFA;
  --ge-cyan: #0EA5E9;
  --ge-cyan-light: #06B6D4;
  --ge-blue: #3B82F6;

  /* Texto (invertido para modo claro) */
  --ge-text-primary: #0F172A;
  --ge-text-secondary: #64748B;
  --ge-text-muted: #94A3B8;
  --ge-text-inverse: #FFFFFF;

  /* UI */
  --ge-success: #16A34A;
  --ge-warning: #D97706;
  --ge-error: #DC2626;
  --ge-danger: #DC2626;
  --ge-border: rgba(15, 23, 42, 0.12);

  /* Alias legacy */
  --ge-navy: var(--ge-bg-primary);
  --ge-navy-light: var(--ge-bg-elevated);
  --ge-teal: var(--ge-cyan);
  --ge-teal-dark: #0891B2;
  --ge-teal-glow: rgba(6, 182, 212, 0.25);
  --ge-bg: var(--ge-bg-primary);
  --ge-text: var(--ge-text-primary);
}

/* Efectos visuales ajustados para modo claro */
html.light-mode .surface-card {
  background: linear-gradient(145deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.01) 100%);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

html.light-mode .ui-mesh-bg {
  background-color: var(--ge-bg-primary);
  background-image:
    radial-gradient(ellipse 55% 45% at 0% 0%, rgba(217, 70, 239, 0.08), transparent 65%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(14, 165, 233, 0.06), transparent 60%),
    linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
  background-size: auto, auto, 48px 48px, 48px 48px;
}

/* Sombras más suaves en modo claro */
html.light-mode {
  --ge-glow-magenta: 0 0 24px rgba(217, 70, 239, 0.2);
  --ge-glow-cyan: 0 0 24px rgba(14, 165, 233, 0.2);
  --ge-glow-brand: 0 0 32px rgba(139, 92, 246, 0.2);
  --ge-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  --ge-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* Cards en modo claro */
html.light-mode .card,
html.light-mode .admin-card,
html.light-mode section {
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Headers en modo claro */
html.light-mode .admin-header,
html.light-mode .app-header,
html.light-mode header {
  background: #F8F8FA;
  border-color: rgba(0, 0, 0, 0.08);
}

/* Sidebar en modo claro */
html.light-mode .admin-sidebar,
html.light-mode .sidebar,
html.light-mode aside {
  background: #F8F8FA;
  border-color: rgba(0, 0, 0, 0.08);
}

/* Links en modo claro */
html.light-mode a {
  color: #8B5CF6;
}

html.light-mode a:hover {
  color: #7C3AED;
}

/* Light mode button */
html.light-mode .theme-toggle-btn {
  background: rgba(139, 92, 246, 0.12);
  color: var(--ge-violet);
  border-color: rgba(139, 92, 246, 0.3);
}

html.light-mode .theme-toggle-btn:hover {
  background: rgba(139, 92, 246, 0.2);
  border-color: var(--ge-violet);
}

/* ── Logo en modo claro - Visible y elegante ── */
html.light-mode .auth-brand-logo,
html.light-mode img[alt="global efecty"] {
  filter: brightness(0) saturate(100%) invert(1) sepia(0.15) hue-rotate(240deg);
  opacity: 0.9;
}

/* Texto del logo */
html.light-mode .auth-brand span {
  color: #0F172A;
  font-weight: 600;
}