/* Dark Mode Styles */

body.dark-mode {
    --primary: #0d1117;
    --primary-light: #161b22;
    --accent: #ff6b8a;
    --accent-light: #ff8fa3;
    --accent-dark: #e94560;
    --gold: #ffd700;
    --gold-light: #ffe44d;
    --gold-dark: #d4a520;
    --surface: #0d1117;
    --surface-alt: #161b22;
    --surface-dark: #1f2937;
    --text-primary: #f0f6fc;
    --text-secondary: #8b949e;
    --text-muted: #6e7681;
    --border: #30363d;
    --border-light: #21262d;
    --success: #3fb950;
    --warning: #f0883e;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.6);
}

/* Header Dark Mode */
body.dark-mode .atlas-head {
    background: rgba(13, 17, 23, 0.95);
    border-bottom-color: var(--border);
}

body.dark-mode .brand-mark {
    color: var(--text-primary);
}

/* Theme Toggle Dark Mode */
body.dark-mode .theme-toggle {
    background: var(--surface-alt);
    border-color: var(--border);
}

body.dark-mode .theme-toggle:hover {
    background: var(--surface-dark);
    border-color: var(--accent);
}

body.dark-mode .theme-toggle svg {
    color: var(--text-secondary);
}

body.dark-mode .theme-toggle .icon-sun {
    display: none;
}

body.dark-mode .theme-toggle .icon-moon {
    display: block;
}

/* Hero Dark Mode */
body.dark-mode .hero-zone {
    background: linear-gradient(180deg, var(--surface-alt) 0%, var(--surface) 100%);
}

body.dark-mode .hero-tag {
    background: rgba(63, 185, 80, 0.15);
}

body.dark-mode .hero-note {
    background: rgba(233, 69, 96, 0.15);
}

/* Cards Dark Mode */
body.dark-mode .hero-card {
    background: var(--surface-alt);
    border-color: var(--border);
}

body.dark-mode .hero-card-top {
    background: linear-gradient(135deg, #1f2937 0%, #161b22 100%);
}

body.dark-mode .brand-hero {
    background: var(--surface-dark);
}

body.dark-mode .bonus-slider-container {
    background: var(--surface);
    border-color: var(--border);
}

body.dark-mode .bonus-slide {
    background: var(--surface-alt);
}

body.dark-mode .hero-metricas > div {
    background: var(--surface);
}

/* Gradient Cards Dark Mode */
body.dark-mode .gradient-card {
    background: linear-gradient(145deg, var(--surface-alt) 0%, var(--surface) 100%);
    border-color: var(--border);
}

body.dark-mode .atlas-card:hover,
body.dark-mode .atlas-tile:hover,
body.dark-mode .trust-card:hover,
body.dark-mode .preguntas-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* Card Icons Dark Mode */
body.dark-mode .card-icon {
    background: rgba(255, 107, 138, 0.15);
}

body.dark-mode .trust-icon {
    background: linear-gradient(135deg, rgba(255, 107, 138, 0.15), rgba(255, 107, 138, 0.08));
}

/* Chips Dark Mode */
body.dark-mode .chip {
    background: var(--surface-alt);
    border-color: var(--border);
    color: var(--text-primary);
}

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

body.dark-mode .chip[data-tooltip]::after {
    background: #1f2937;
}

/* Callout Dark Mode */
body.dark-mode .callout-band {
    background: #1f2937;
}

/* Calculator Dark Mode */
body.dark-mode .calculator-card {
    box-shadow: var(--shadow-lg);
}

body.dark-mode .calculator-header {
    border-bottom-color: var(--border);
}

body.dark-mode .calculator-field input {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text-primary);
}

body.dark-mode .calculator-field input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(255, 107, 138, 0.2);
}

body.dark-mode .calculator-field input::placeholder {
    color: var(--text-muted);
}

body.dark-mode .calculator-results {
    background: linear-gradient(135deg, #1f2937 0%, #161b22 100%);
}

body.dark-mode .calculator-disclaimer {
    background: rgba(240, 136, 62, 0.15);
}

/* Slider Controls Dark Mode */
body.dark-mode .slider-btn {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text-secondary);
}

body.dark-mode .slider-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

body.dark-mode .dot {
    background: var(--border);
}

body.dark-mode .dot.active {
    background: var(--accent);
}

/* Buttons Dark Mode */
body.dark-mode .action-soft {
    background: var(--surface-alt);
    border-color: var(--border);
    color: var(--text-primary);
}

body.dark-mode .action-soft:hover {
    background: var(--surface-dark);
    color: var(--accent);
}

/* Action Strip Dark Mode */
body.dark-mode .action-strip {
    background: linear-gradient(135deg, #1f2937 0%, #161b22 100%);
}

/* Quick Nav Dark Mode */
body.dark-mode .quick-nav {
    background: var(--surface-alt);
    border-color: var(--border);
}

body.dark-mode .quick-nav a {
    color: var(--text-secondary);
}

body.dark-mode .quick-nav a:hover {
    background: var(--surface-dark);
    color: var(--accent);
}

/* Footer Dark Mode */
body.dark-mode .atlas-footer {
    background: #0a0c10;
}

body.dark-mode .disclaimer-box {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .logo-coljuegos {
    background: #1f2937;
}

/* Steps Card Dark Mode */
body.dark-mode .steps-card ol li {
    color: var(--text-secondary);
}

/* Section Alt Dark Mode */
body.dark-mode .section-alt {
    background: var(--surface-alt);
}

/* Section Icon Dark Mode */
body.dark-mode .section-icon {
    background: rgba(255, 107, 138, 0.15);
}

/* List Card Dark Mode */
body.dark-mode .list-card {
    background: linear-gradient(145deg, var(--surface-alt) 0%, var(--surface) 100%);
}

/* Bonus Slider Dark Mode */
body.dark-mode .bonus-slider-container {
    background: linear-gradient(135deg, #2d2a1a 0%, #3d3520 100%);
    border-color: var(--gold-dark);
}

body.dark-mode .bonus-slide {
    background: linear-gradient(135deg, var(--surface-alt) 0%, var(--surface) 100%);
    border-color: rgba(240, 192, 64, 0.2);
}

body.dark-mode .bonus-slider-header {
    color: var(--gold);
}

/* Payment Grid Dark Mode */
body.dark-mode .payment-card {
    background: linear-gradient(145deg, var(--surface-alt) 0%, var(--surface) 100%);
}

body.dark-mode .payment-icon {
    background: linear-gradient(135deg, rgba(255, 107, 138, 0.15), rgba(255, 215, 0, 0.1));
}

body.dark-mode .payment-note {
    background: rgba(63, 185, 80, 0.15);
}

/* Chip Tooltips Dark Mode */
body.dark-mode .chip-tooltip::after {
    background: #2d3748;
}

body.dark-mode .chip-tooltip::before {
    border-top-color: #2d3748;
}

/* Transition for smooth theme change */
body,
.atlas-head,
.atlas-footer,
.atlas-section,
.atlas-tile,
.gradient-card,
.action-strip,
.section-head,
.mobile-nav {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Exclude animations from theme transition */
.anim-float,
.anim-pulse-btn,
.gift-icon,
.bonus-track {
    transition: transform 0.4s ease, box-shadow 0.3s ease;
}