/*
 * dark-mode.css — Ampara PWA
 * Usa variables CSS definidas en base.css
 * Carga ÚLTIMO — sus !important tienen precedencia global
 */

/* === FONDOS Y BORDES GLOBALES === */

body.dark-mode .bg-white {
  background-color: var(--color-dark-bg) !important;
}

body.dark-mode .border-gray-200 {
  border-color: var(--color-dark-border);
}

body.dark-mode .border-b {
  border-color: var(--color-dark-border);
}

/* === TABS === */

body.dark-mode .tab {
  color: var(--color-dark-text-soft);
}

body.dark-mode .tab:hover {
  background-color: var(--color-dark-border);
}

body.dark-mode .tab.active {
  background-color: #2c5282;
  color: #ebf8ff;
  border-color: var(--color-primary);
}

/* === LISTAS === */

body.dark-mode .list-disc,
body.dark-mode .list-decimal {
  color: var(--color-dark-text-soft);
}

/* === TEXTOS GLOBALES === */

body.dark-mode .text-black,
body.dark-mode .text-gray-900 {
  color: var(--color-dark-text) !important;
}

body.dark-mode .text-gray-700 {
  color: var(--color-dark-text-sub) !important;
}

body.dark-mode .text-gray-600,
body.dark-mode .text-gray-800 {
  color: var(--color-dark-text-muted);
}

body.dark-mode .text-gray-500 {
  color: #9ca3af !important;
}

body.dark-mode .text-blue-700 {
  color: #63b3ed !important;
}

body.dark-mode .text-blue-600 {
  color: var(--color-primary) !important;
}

/* === HEADINGS === */

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: var(--color-dark-text);
}

body.dark-mode p,
body.dark-mode div,
body.dark-mode span,
body.dark-mode li {
  color: var(--color-dark-text-soft);
}

/* === DROPDOWN EMERGENCIAS === */

body.dark-mode #emergency-dropdown {
  background-color: var(--color-dark-bg);
  border: 1px solid var(--color-dark-border);
}

body.dark-mode #emergency-dropdown a {
  color: var(--color-dark-text-soft);
}

body.dark-mode #emergency-dropdown a:hover {
  background-color: var(--color-dark-border);
}

/* === LANGUAGE SELECTOR DARK MODE === */

body.dark-mode .language-selector {
  background-color: var(--color-dark-bg);
  color: var(--color-dark-text-soft);
  border-color: var(--color-dark-border);
}

body.dark-mode .language-selector:hover {
  background-color: var(--color-dark-border);
}

body.dark-mode .language-selector.active {
  background-color: var(--color-primary);
  color: #ffffff;
}

/* === GLASSMORPHISM GLOBAL === */

.section-card {
  background-color: var(--glass-light) !important;
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
}

body.dark-mode .section-card {
  background-color: var(--glass-dark) !important;
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
}

.info-box {
  background-color: rgba(239, 246, 255, 0.8) !important;
  backdrop-filter: var(--blur-glass-sm);
  -webkit-backdrop-filter: var(--blur-glass-sm);
}

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

.warning-box {
  background-color: rgba(254, 245, 231, 0.8) !important;
  backdrop-filter: var(--blur-glass-sm);
  -webkit-backdrop-filter: var(--blur-glass-sm);
}

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

.step-container {
  background-color: rgba(248, 250, 255, 0.8) !important;
  backdrop-filter: var(--blur-glass-sm);
  -webkit-backdrop-filter: var(--blur-glass-sm);
}

body.dark-mode .step-container {
  background-color: rgba(42, 52, 65, 0.8) !important;
  backdrop-filter: var(--blur-glass-sm);
  -webkit-backdrop-filter: var(--blur-glass-sm);
}