/* Theme overrides preserve the original screenshots and metallic phone frame. */
html[data-theme="dark"] {
  color-scheme: dark;
  --azul-financiero: #79beff;
  --azul-oscuro: #d9ebff;
  --azul-claro: #173451;
  --fondo-gris-claro: #091321;
  --texto-principal: #edf4ff;
  --texto-secundario: #b8c7db;
  --texto-mutado: #9dafc7;
  --borde-suave: #2b405a;
  --borde-azul: rgba(121, 190, 255, 0.25);
  --verde-exito: #5ee1b1;
  --verde-exito-bg: #103c35;
  --gradiente-suave: linear-gradient(135deg, #132b45 0%, #091321 100%);
  --gradiente-card: linear-gradient(145deg, #14243a 0%, #101e30 100%);
  --gradiente-hero-glow: radial-gradient(circle, rgba(38, 125, 209, 0.2) 0%, transparent 70%);
  --sombra-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --sombra-md: 0 8px 24px -4px rgba(0, 0, 0, 0.3);
  --sombra-lg: 0 20px 40px -8px rgba(0, 0, 0, 0.4);
  --sombra-phone: 0 25px 60px -15px rgba(0, 0, 0, 0.55);
  --sombra-glow: 0 0 35px rgba(38, 125, 209, 0.25);
  --theme-surface: #101e30;
  --theme-surface-raised: #172940;
  --theme-action: #2065ad;
}

html[data-theme="dark"] ::selection {
  background: #2e6fa8;
  color: #fff;
}

html[data-theme="dark"] .phone-screen {
  aspect-ratio: 511 / 1015;
}

html[data-theme="dark"] .phone-screen-image-light {
  display: none;
}

html[data-theme="dark"] .phone-screen-image-dark {
  display: block;
}

html[data-theme="dark"] .top-bar {
  background: #102d50;
}

html[data-theme="dark"] .top-bar a,
html[data-theme="dark"] .store-btn-text small,
html[data-theme="dark"] .balance-card-header,
html[data-theme="dark"] .result-tag,
html[data-theme="dark"] .result-breakdown li span:first-child,
html[data-theme="dark"] .comparison-label,
html[data-theme="dark"] .security-item svg,
html[data-theme="dark"] .cta-box p,
html[data-theme="dark"] .social-link,
html[data-theme="dark"] .footer-links a:hover {
  color: #c6e3ff;
}

html[data-theme="dark"] .header {
  background: rgba(9, 19, 33, 0.92);
  border-bottom-color: var(--borde-suave);
}

html[data-theme="dark"] .header.scrolled {
  background: rgba(9, 19, 33, 0.97);
  box-shadow: var(--sombra-md);
}

html[data-theme="dark"] .nav-wrapper {
  background: rgba(23, 41, 64, 0.85);
  border-color: var(--borde-azul);
}

html[data-theme="dark"] .nav-link.active {
  background: #254563;
  box-shadow: var(--sombra-sm);
}

html[data-theme="dark"] .language-option:hover {
  background: #254563;
}

html[data-theme="dark"] .theme-toggle:hover {
  background: #254563;
  border-color: var(--azul-financiero);
}

html[data-theme="dark"] .language-option.active,
html[data-theme="dark"] .language-option[aria-pressed="true"] {
  background: var(--gradiente-primario);
}

html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-light {
  background: var(--theme-surface-raised);
  color: var(--azul-oscuro);
  border-color: var(--borde-suave);
}

html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-light:hover {
  background: #223d59;
  border-color: var(--azul-financiero);
  color: #fff;
}

html[data-theme="dark"] .hero {
  background: radial-gradient(ellipse 80% 60% at 50% -10%, #153455 0%, var(--fondo-gris-claro) 80%);
}

html[data-theme="dark"] .hero-glow-orb {
  background: var(--gradiente-hero-glow);
}

html[data-theme="dark"] .text-gradient {
  background-image: linear-gradient(120deg, #79beff 0%, #61e0ce 100%);
}

html[data-theme="dark"] .badge-pill,
html[data-theme="dark"] .nav-android-badge,
html[data-theme="dark"] .android-badge-highlight {
  background: var(--azul-claro);
  color: #c6e3ff;
  border-color: var(--borde-azul);
}

html[data-theme="dark"] .avatar {
  border-color: var(--theme-surface);
}

html[data-theme="dark"] .floating-widget,
html[data-theme="dark"] .simulator-card,
html[data-theme="dark"] .tab-content,
html[data-theme="dark"] .pricing-card,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .modal-box,
html[data-theme="dark"] .vault-goal-item {
  background: var(--theme-surface);
  border-color: var(--borde-suave);
}

html[data-theme="dark"] .partners-section,
html[data-theme="dark"] .features-section,
html[data-theme="dark"] .testimonials-section,
html[data-theme="dark"] .cta-section {
  background: #0c1727;
}

html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .testimonial-card,
html[data-theme="dark"] .category-spending-item,
html[data-theme="dark"] .tab-btn {
  background: var(--theme-surface);
  border-color: var(--borde-suave);
}

html[data-theme="dark"] .feature-card:hover,
html[data-theme="dark"] .testimonial-card:hover {
  background: var(--theme-surface-raised);
  border-color: var(--borde-azul);
}

/* Keep white labels readable on filled controls while accents stay luminous. */
html[data-theme="dark"] .tab-btn.active,
html[data-theme="dark"] .tab-btn:hover,
html[data-theme="dark"] .term-btn.active,
html[data-theme="dark"] .term-btn:hover,
html[data-theme="dark"] .feature-card:hover .feature-icon-box,
html[data-theme="dark"] .quick-action-item:hover .action-circle-icon,
html[data-theme="dark"] .faq-item.active .faq-icon,
html[data-theme="dark"] .widget-icon.primary,
html[data-theme="dark"] .popular-badge,
html[data-theme="dark"] .social-link:hover {
  background: var(--theme-action);
  color: #fff;
}

html[data-theme="dark"] .tab-btn.active,
html[data-theme="dark"] .tab-btn:hover,
html[data-theme="dark"] .term-btn.active,
html[data-theme="dark"] .term-btn:hover {
  border-color: var(--azul-financiero);
}

html[data-theme="dark"] .tab-btn:hover svg {
  color: #fff;
}

html[data-theme="dark"] .widget-icon.success {
  background: #137653;
}

html[data-theme="dark"] .pricing-card.popular,
html[data-theme="dark"] .faq-item.active {
  border-color: var(--azul-financiero);
}

html[data-theme="dark"] .security-strip {
  background: #102d50;
}

html[data-theme="dark"] input:checked + .slider-switch {
  background: var(--theme-action);
}

html[data-theme="dark"] .switch input:focus-visible + .slider-switch {
  outline: 3px solid var(--azul-financiero);
  outline-offset: 4px;
}

html[data-theme="dark"] .cta-box {
  background: linear-gradient(135deg, #103568 0%, #154d86 100%);
  box-shadow: inset 0 0 0 1px rgba(121, 190, 255, 0.2), var(--sombra-lg);
}

/* This summary inherits an inline light-blue variable in the original markup. */
html[data-theme="dark"] .cta-box > div:last-child {
  color: #c6e3ff !important;
}

html[data-theme="dark"] .footer {
  background: #060e1a;
  color: #aabbd1;
}

html[data-theme="dark"] .modal-overlay {
  background: rgba(2, 8, 18, 0.78);
}

html[data-theme="dark"] .form-control {
  background: #0b1727;
  color: var(--texto-principal);
  border-color: #3e5773;
}

html[data-theme="dark"] .form-control::placeholder {
  color: #93a8c0;
  opacity: 1;
}

html[data-theme="dark"] .form-control:focus {
  border-color: var(--azul-financiero);
  box-shadow: 0 0 0 3px rgba(121, 190, 255, 0.2);
}

html[data-theme="dark"] .toast-notice {
  background: #174e83;
  border: 1px solid var(--borde-azul);
}

@media (max-width: 1200px) {
  html[data-theme="dark"] .nav-wrapper {
    background: none;
  }

  html[data-theme="dark"] .nav-menu {
    background: rgba(16, 30, 48, 0.98);
    border-color: var(--borde-suave);
    box-shadow: var(--sombra-lg);
  }
}