/*
 * header.css — Ampara PWA
 * Usa variables CSS definidas en base.css
 */

/* === DARK MODE TOGGLE === */

.dark-mode-toggle {
  cursor: pointer;
  padding: 8px;
  border-radius: var(--radius-full);
  transition: all var(--transition-normal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--color-primary);
  background-color: transparent;
  border: none;
}

.dark-mode-toggle:hover {
  background-color: rgba(66, 153, 225, 0.1);
}

body.dark-mode .dark-mode-toggle {
  color: #90cdf4;
}

body.dark-mode .dark-mode-toggle:hover {
  background-color: rgba(144, 205, 244, 0.1);
}

/* === HEADER TRANSPARENTE === */

header.bg-white {
  background-color: var(--glass-light-sm) !important;
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* === HEADER — MODO CLARO === */

header h1 {
  color: var(--color-primary-deep) !important;
  font-weight: 700;
}

header .language-selector {
  color: var(--color-primary-deep) !important;
  border-color: rgba(37, 99, 235, 0.5);
  font-weight: 600;
}

header .language-selector:hover {
  background-color: rgba(37, 99, 235, 0.15);
  color: var(--color-primary-deeper) !important;
}

header .language-selector.active {
  background-color: var(--color-primary-deep);
  color: #ffffff !important;
  border-color: var(--color-primary-deep);
}

header .dark-mode-toggle,
header #back-btn {
  color: var(--color-primary-deep) !important;
}

header .dark-mode-toggle:hover,
header #back-btn:hover {
  color: var(--color-primary-deeper) !important;
}

/* === HEADER — MODO OSCURO (neon) === */

body.dark-mode header.bg-white {
  background-color: var(--glass-dark-sm) !important;
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
}

body.dark-mode header h1 {
  color: var(--color-neon) !important;
  font-weight: 800;
  text-shadow:
    0 0 10px rgba(0, 255, 255, 0.8),
    0 0 20px rgba(0, 255, 255, 0.5),
    0 0 30px rgba(0, 255, 255, 0.3);
}

body.dark-mode header .language-selector {
  color: var(--color-neon) !important;
  border-color: rgba(0, 255, 255, 0.6);
  font-weight: 600;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.6);
}

body.dark-mode header .language-selector:hover {
  background-color: rgba(0, 255, 255, 0.15);
  color: var(--color-neon) !important;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
}

body.dark-mode header .language-selector.active {
  background-color: var(--color-neon);
  color: #000000 !important;
  border-color: var(--color-neon);
  box-shadow: var(--shadow-neon);
  font-weight: 700;
}

body.dark-mode header .dark-mode-toggle,
body.dark-mode header #back-btn {
  color: var(--color-neon) !important;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
}

body.dark-mode header .dark-mode-toggle:hover,
body.dark-mode header #back-btn:hover {
  color: var(--color-neon) !important;
  text-shadow:
    0 0 15px rgba(0, 255, 255, 1),
    0 0 25px rgba(0, 255, 255, 0.6);
}