:root {
  color-scheme: dark;
  --site-bg: #020b14;
  --site-bg-alt: #071e36;
  --site-text: #f8fafc;
  --site-text-soft: #94a3b8;
  --site-primary: #0ea5e9;
  --site-primary-2: #0056a3;
  --site-accent: #7dd3fc;
  --site-surface: rgba(8, 24, 43, 0.74);
  --site-surface-strong: rgba(8, 24, 43, 0.9);
  --site-border: rgba(255, 255, 255, 0.1);
  --site-border-strong: rgba(14, 165, 233, 0.34);
  --azul: #0ea5e9;
  --azul-oscuro: #071e36;
  --azul-medio: #0056a3;
  --celeste: #38bdf8;
  --negro: #0f172a;
  --fondo: #020b14;
  --texto: #f8fafc;
  --gris-claro: #071e36;
  --modern-bg: #020b14;
  --modern-bg-soft: #071e36;
  --modern-card: rgba(8, 24, 43, 0.74);
  --modern-card-soft: rgba(255, 255, 255, 0.045);
  --modern-blue: #0ea5e9;
  --modern-blue-deep: #0056a3;
  --modern-cyan: #7dd3fc;
  --modern-text: #f8fafc;
  --modern-muted: #94a3b8;
  --modern-border: rgba(255, 255, 255, 0.1);
}

.theme-toggle {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.65rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(125, 211, 252, 0.34);
  border-radius: 999px;
  background: rgba(8, 24, 43, 0.9);
  color: #e0f2fe;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.theme-toggle:hover {
  transform: translateY(-2px);
  background: rgba(14, 165, 233, 0.18);
  border-color: rgba(125, 211, 252, 0.65);
}

.theme-toggle:focus-visible {
  outline: 3px solid rgba(125, 211, 252, 0.75);
  outline-offset: 3px;
}

.theme-toggle-dot {
  width: 0.72rem;
  height: 0.72rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-shadow: inset 0.22rem 0 0 rgba(125, 211, 252, 0.8);
}

body {
  background-color: var(--modern-bg);
  background-image: radial-gradient(circle at 50% 0%, var(--modern-bg-soft) 0%, var(--modern-bg) 64%);
}

body::before {
  z-index: -1;
  opacity: 0.5;
  background-image: radial-gradient(rgba(14, 165, 233, 0.1) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, black, transparent 90%);
}

.topbar,
body > nav {
  background: rgba(8, 24, 43, 0.94) !important;
  border-bottom-color: rgba(14, 165, 233, 0.24);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.topbar .brand,
.topbar .brand span,
body > nav .nav-brand,
body > nav .nav-brand span {
  color: var(--modern-text);
}

.topbar .brand span,
body > nav .nav-brand span {
  color: var(--modern-cyan);
}

.top-links,
body > nav .nav-actions {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.topbar .top-link,
.topbar .top-button,
body > nav .nav-link {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #cbd5e1;
}

.topbar .top-link:hover,
.topbar .top-button:hover,
body > nav .nav-link:hover {
  background: rgba(14, 165, 233, 0.14);
  border-color: rgba(14, 165, 233, 0.42);
  color: var(--modern-text);
}

.topbar .top-link.primary,
body > nav .nav-link-primary {
  background: linear-gradient(135deg, var(--modern-blue) 0%, var(--modern-blue-deep) 100%);
  border-color: transparent;
  color: var(--modern-text);
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.2);
}

.topbar .top-link.primary:hover,
body > nav .nav-link-primary:hover {
  background: linear-gradient(135deg, #38bdf8 0%, var(--modern-blue-deep) 100%);
}

.hero,
.hero-cand,
.impulso,
.cta-final {
  background:
    radial-gradient(circle at 82% 18%, rgba(14, 165, 233, 0.16), transparent 25%),
    radial-gradient(circle at 14% 80%, rgba(0, 86, 163, 0.2), transparent 30%),
    linear-gradient(180deg, rgba(7, 30, 54, 0.86), rgba(2, 11, 20, 0.98)) !important;
}

.hero::after {
  background: var(--modern-bg) !important;
}

.hero h1 span,
.hero-cand h1 span,
.hero-badge,
.section-eyebrow,
.section-eyebrow::before {
  color: var(--modern-blue);
}

.hero-badge {
  background: rgba(14, 165, 233, 0.09);
  border-color: rgba(14, 165, 233, 0.28);
}

.btn.primary,
.top-link.primary,
.top-button.primary,
.nav-link-primary,
.nav-pill,
.hero-cta-primary,
.cta-btn-primary,
.result-link-primary {
  background: linear-gradient(135deg, var(--modern-blue) 0%, var(--modern-blue-deep) 100%) !important;
  border-color: transparent;
  color: var(--modern-text) !important;
}

.hero-cta-secondary,
.cta-btn-secondary,
.nav-pill-secondary {
  background: rgba(255, 255, 255, 0.045) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #cbd5e1 !important;
}

.hero-cta-secondary:hover,
.cta-btn-secondary:hover,
.nav-pill-secondary:hover {
  background: rgba(14, 165, 233, 0.14) !important;
  border-color: rgba(14, 165, 233, 0.42) !important;
  color: var(--modern-text) !important;
}

.topbar .auth-menu-button,
body > nav .nav-toggle {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(14, 165, 233, 0.32);
  color: var(--modern-text);
}

body > main,
body > .page {
  color: var(--modern-text);
}

body > main h1,
body > main h2,
body > main h3,
body > main h4,
body > .page h1,
body > .page h2,
body > .page h3,
body > .page h4,
.section-title {
  color: var(--modern-text);
}

.lead,
.section-intro,
.status,
.helper,
.disclaimer,
.modal-text,
.source-text,
.result-note,
.option-note,
.flow-step p,
.stat .label,
.page .lead,
.page .status {
  color: var(--modern-muted) !important;
}

.razon-titulo,
.valor-title,
.prop-content h3,
.accion-content h3,
.logro-card h3,
.summary-card h3,
.result-card h3,
.option-card h3,
.branch-card h3,
.tip-card h3,
.campus-card h3 {
  color: var(--modern-text) !important;
}

.razon-texto,
.prop-content p,
.cifra-label,
.logro-card p,
.summary-card p,
.result-card p,
.option-card p,
.branch-card p,
.tip-card p,
.campus-card p {
  color: var(--modern-muted) !important;
}

.panel-text,
.panel-card p,
.panel-card small,
.source-item,
.decision-item,
.noticia-excerpt,
.noticia-date,
.modal-meta {
  color: var(--modern-muted) !important;
}

.panel-title,
.decision-item strong,
.source-item strong,
.option-label,
.profile-label,
.noticia-title,
.modal-title {
  color: var(--modern-text) !important;
}

.modal-share-btn,
.modal-admin-btn {
  background: rgba(14, 165, 233, 0.12) !important;
  border-color: rgba(14, 165, 233, 0.38) !important;
  color: var(--modern-cyan) !important;
}

.modal-share-btn:hover,
.modal-admin-btn:hover {
  background: rgba(14, 165, 233, 0.22) !important;
  color: var(--modern-text) !important;
}

.card,
.summary-card,
.source-item,
.helper-card,
.result-card,
.option-card,
.flow-step,
.stat,
.search-card,
.modal-card,
.cifra-item,
.razon-card,
.propuesta-fila,
.branch-card,
.tip-card,
.campus-card,
.quiz-card,
.panel-card,
.decision-item,
.option-label,
.noticia-card {
  background: var(--modern-card);
  border-color: var(--modern-border);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.035);
}

.empty-state {
  background: var(--modern-card-soft);
  border-color: var(--modern-border);
  color: var(--modern-muted);
}

.card:hover,
.summary-card:hover,
.source-item:hover,
.helper-card:hover,
.result-card:hover,
.option-card:hover,
.flow-step:hover,
.stat:hover,
.search-card:hover,
.cifra-item:hover,
.razon-card:hover,
.propuesta-fila:hover,
.branch-card:hover,
.tip-card:hover,
.campus-card:hover,
.quiz-card:hover,
.panel-card:hover,
.decision-item:hover,
.option-label:hover,
.noticia-card:hover {
  border-color: rgba(14, 165, 233, 0.34);
  box-shadow: 0 26px 65px rgba(0, 86, 163, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.07);
}

input,
textarea,
select,
.field input,
.field textarea,
.search-input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--modern-text);
}

input::placeholder,
textarea::placeholder {
  color: rgba(148, 163, 184, 0.72);
}

footer {
  background: var(--modern-bg);
  border-top: 1px solid var(--modern-border);
}

@media (max-width: 720px) {
  .topbar,
  body > nav {
    padding-inline: 1rem;
  }

  .theme-toggle {
    right: 0.75rem;
    bottom: 0.75rem;
  }
}