/* ============================================
   TEMA OSCURO - Economía Doméstica
   Sistema de diseño con variables CSS
   ============================================ */

:root[data-theme="dark"] {
    /* Colores de fondo */
    --color-bg: #1C1C1E;
    --color-card: #2C2C2E;
    --color-input-bg: #3A3A3C;

    /* Colores de texto */
    --color-text-primary: #FFFFFF;
    --color-text-secondary: #EBEBF5;
    --color-text-tertiary: #8E8E93;

    /* Bordes */
    --color-border: rgba(255, 255, 255, 0.1);

    /* Colores primarios (mantener para contraste) */
    --color-primary: #0A84FF;
    --color-primary-hover: #409CFF;
    --color-primary-light: rgba(10, 132, 255, 0.2);

    /* Colores de estado */
    --color-success: #30D158;
    --color-success-light: rgba(48, 209, 88, 0.2);
    --color-purple: #BF5AF2;
    --color-purple-light: rgba(191, 90, 242, 0.2);

    /* Sombras (más sutiles en modo oscuro) */
    --shadow-card: 0 2px 20px rgba(0, 0, 0, 0.3);
    --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.4);
    --shadow-button: 0 4px 14px rgba(10, 132, 255, 0.3);
}

/* ============================================
   HEADER / TAB NAVIGATION EN MODO OSCURO
   ============================================ */

/* Header clásico en modo oscuro */
:root[data-theme="dark"] .header {
    background: rgba(28, 28, 30, 0.85);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Tab Navigation Bar en modo oscuro */
:root[data-theme="dark"] .tab-nav {
    background: rgba(28, 28, 30, 0.85);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Tab Navigation Bar en modo oscuro - móvil */
@media (max-width: 768px) {
    :root[data-theme="dark"] .tab-nav {
        background: rgba(28, 28, 30, 0.98);
    }
}

/* Logo en modo oscuro */
:root[data-theme="dark"] .tab-nav-logo {
    color: var(--color-text-primary);
}

/* Pills container en modo oscuro */
:root[data-theme="dark"] .tab-nav-pills {
    background: rgba(255, 255, 255, 0.08);
}

/* Scroll indicator gradient en modo oscuro */
:root[data-theme="dark"] .tab-nav-pills::after {
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.08));
}

/* Tab pills en modo oscuro */
:root[data-theme="dark"] .tab-pill {
    color: var(--color-text-secondary);
}

:root[data-theme="dark"] .tab-pill:hover {
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.05);
}

:root[data-theme="dark"] .tab-pill.active {
    background: var(--color-card);
    color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Language button en modo oscuro */
:root[data-theme="dark"] .language-btn {
    color: var(--color-text-secondary);
    border-color: rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] .language-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--color-text-primary);
}

/* Footer en modo oscuro */
:root[data-theme="dark"] .footer {
    background: var(--color-card);
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* Dropdown de idioma en modo oscuro */
:root[data-theme="dark"] .language-dropdown {
    background: var(--color-card);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

:root[data-theme="dark"] .language-option {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .language-option:hover {
    background: var(--color-input-bg);
}

:root[data-theme="dark"] .language-option.active {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

:root[data-theme="dark"] .lang-code {
    color: var(--color-text-tertiary);
}

:root[data-theme="dark"] .language-option.active .lang-code {
    color: var(--color-primary);
}

/* Tabs container antiguos (por compatibilidad) */
:root[data-theme="dark"] .tabs-container {
    background: var(--color-card);
    border-color: rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] .tab-btn {
    color: var(--color-text-secondary);
}

:root[data-theme="dark"] .tab-btn:hover {
    background: var(--color-input-bg);
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .tab-btn.active {
    color: var(--color-primary);
}

/* ============================================
   CALCULADORA DE INTERÉS COMPUESTO - DARK MODE
   ============================================ */

/* Cards y contenedores */
:root[data-theme="dark"] .card {
    background: var(--color-card);
    box-shadow: var(--shadow-card);
}

:root[data-theme="dark"] .card-title {
    color: var(--color-text-primary);
}

/* Hero section */
:root[data-theme="dark"] .hero-title {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .hero-subtitle {
    color: var(--color-text-secondary);
}

/* Input labels y hints */
:root[data-theme="dark"] .input-label {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .input-hint {
    color: var(--color-text-tertiary);
}

/* Input fields */
:root[data-theme="dark"] .input-field {
    background: var(--color-input-bg);
    color: var(--color-text-primary);
    border-color: transparent;
}

:root[data-theme="dark"] .input-field:focus {
    background: var(--color-card);
    border-color: var(--color-primary);
}

:root[data-theme="dark"] .input-prefix,
:root[data-theme="dark"] .input-suffix {
    color: var(--color-text-secondary);
}

/* Range sliders en modo oscuro */
:root[data-theme="dark"] .range-slider {
    background: linear-gradient(to right, var(--color-primary) 0%, var(--color-input-bg) 0%);
}

:root[data-theme="dark"] .range-slider::-webkit-slider-thumb {
    background: var(--color-card);
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

:root[data-theme="dark"] .range-slider::-moz-range-thumb {
    background: var(--color-card);
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Select en modo oscuro */
:root[data-theme="dark"] .select-field {
    background: var(--color-input-bg);
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .select-field:focus {
    background: var(--color-card);
    border-color: var(--color-primary);
}

:root[data-theme="dark"] .select-field option {
    background: var(--color-card);
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .select-arrow {
    color: var(--color-text-secondary);
}

/* Result cards */
:root[data-theme="dark"] .result-card {
    background: var(--color-card);
    box-shadow: var(--shadow-card);
}

:root[data-theme="dark"] .result-label {
    color: var(--color-text-secondary);
}

:root[data-theme="dark"] .result-value {
    color: var(--color-text-primary);
}

/* Section titles */
:root[data-theme="dark"] .section-title {
    color: var(--color-text-primary);
}

/* Chart cards */
:root[data-theme="dark"] .chart-card {
    background: var(--color-card);
}

:root[data-theme="dark"] .chart-title {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .chart-subtitle {
    color: var(--color-text-tertiary);
}

/* Gradient text ajustado para modo oscuro */
:root[data-theme="dark"] .gradient-text {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-purple) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   CALCULADORA 50/30/20 - DARK MODE
   ============================================ */

/* Budget hero */
:root[data-theme="dark"] .budget-hero-title {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .budget-hero-subtitle {
    color: var(--color-text-secondary);
}

/* Budget cards */
:root[data-theme="dark"] .budget-card {
    background: var(--color-card);
}

:root[data-theme="dark"] .budget-card-header {
    border-bottom-color: var(--color-border);
}

:root[data-theme="dark"] .budget-card-title {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .budget-card-subtitle {
    color: var(--color-text-secondary);
}

/* Budget income section */
:root[data-theme="dark"] .budget-income-card {
    background: var(--color-card);
}

:root[data-theme="dark"] .budget-income-label {
    color: var(--color-text-secondary);
}

:root[data-theme="dark"] .budget-income-input {
    background: var(--color-input-bg);
    color: var(--color-text-primary);
    border-color: transparent;
}

:root[data-theme="dark"] .budget-income-input:focus {
    background: var(--color-card);
    border-color: var(--color-primary);
}

/* Budget toggle */
:root[data-theme="dark"] .budget-toggle {
    background: var(--color-input-bg);
}

:root[data-theme="dark"] .budget-toggle-btn {
    color: var(--color-text-secondary);
}

:root[data-theme="dark"] .budget-toggle-btn.active {
    background: var(--color-card);
    color: var(--color-text-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Budget categories */
:root[data-theme="dark"] .budget-category {
    background: var(--color-card);
}

:root[data-theme="dark"] .budget-category-title {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .budget-category-subtitle {
    color: var(--color-text-tertiary);
}

:root[data-theme="dark"] .budget-category-amount {
    color: var(--color-text-primary);
}

/* Budget items */
:root[data-theme="dark"] .budget-item {
    border-bottom-color: var(--color-border);
}

:root[data-theme="dark"] .budget-item-label {
    color: var(--color-text-secondary);
}

:root[data-theme="dark"] .budget-item-input {
    background: var(--color-input-bg);
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .budget-item-input:focus {
    background: var(--color-card);
    border-color: var(--color-primary);
}

/* Budget gauges */
:root[data-theme="dark"] .budget-gauge-label {
    color: var(--color-text-secondary);
}

:root[data-theme="dark"] .budget-gauge-value {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .budget-gauge-track {
    background: var(--color-input-bg);
}

/* Budget status badges */
:root[data-theme="dark"] .budget-status {
    color: var(--color-text-primary);
}

/* Budget summary */
:root[data-theme="dark"] .budget-summary-card {
    background: var(--color-card);
}

:root[data-theme="dark"] .budget-summary-label {
    color: var(--color-text-secondary);
}

:root[data-theme="dark"] .budget-summary-value {
    color: var(--color-text-primary);
}

/* Budget charts section */
:root[data-theme="dark"] .budget-charts-title {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .budget-chart-card {
    background: var(--color-card);
}

:root[data-theme="dark"] .budget-chart-title {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .budget-chart-subtitle {
    color: var(--color-text-tertiary);
}

/* Budget alert */
:root[data-theme="dark"] .budget-alert {
    background: rgba(255, 59, 48, 0.15);
    border-color: rgba(255, 59, 48, 0.3);
    color: #FF6961;
}

/* Budget status badges - colores más visibles en modo oscuro */
:root[data-theme="dark"] .status-badge.on-track {
    background: rgba(52, 199, 89, 0.2);
    color: #4ADE80;
}

:root[data-theme="dark"] .status-badge.over-budget {
    background: rgba(255, 59, 48, 0.2);
    color: #FF6B6B;
}

:root[data-theme="dark"] .status-badge.under-budget {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

/* Budget category recommended */
:root[data-theme="dark"] .category-recommended {
    background: rgba(255, 255, 255, 0.03);
}

:root[data-theme="dark"] .recommended-label {
    color: var(--color-text-tertiary);
}

:root[data-theme="dark"] .recommended-amount {
    color: var(--color-text-secondary);
}

/* Budget summary */
:root[data-theme="dark"] .summary-card {
    background: var(--color-card);
}

:root[data-theme="dark"] .summary-stat {
    border-color: var(--color-border);
}

:root[data-theme="dark"] .summary-stat-label {
    color: var(--color-text-secondary);
}

:root[data-theme="dark"] .summary-stat-value {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .summary-stat-value.negative {
    color: #FF6B6B;
}

:root[data-theme="dark"] .summary-stat-value.positive {
    color: #4ADE80;
}

/* Budget remaining amount */
:root[data-theme="dark"] .remaining-amount {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .remaining-amount.positive {
    color: #4ADE80;
}

:root[data-theme="dark"] .remaining-amount.negative {
    color: #FF6B6B;
}

/* Budget input fields específicos */
:root[data-theme="dark"] .budget-input {
    background: var(--color-input-bg);
    color: var(--color-text-primary);
    border-color: transparent;
}

:root[data-theme="dark"] .budget-input:focus {
    background: var(--color-card);
    border-color: var(--color-primary);
}

:root[data-theme="dark"] .budget-input-prefix {
    color: var(--color-text-secondary);
}

/* Budget category headers */
:root[data-theme="dark"] .category-header {
    background: var(--color-card);
}

:root[data-theme="dark"] .category-name {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .category-percentage {
    color: var(--color-text-tertiary);
}

:root[data-theme="dark"] .category-total {
    color: var(--color-text-primary);
}

/* Budget subcategory items */
:root[data-theme="dark"] .subcategory-item {
    border-color: var(--color-border);
}

:root[data-theme="dark"] .subcategory-name {
    color: var(--color-text-secondary);
}

/* Budget progress bars */
:root[data-theme="dark"] .progress-bar-track {
    background: var(--color-input-bg);
}

/* Reset button */
:root[data-theme="dark"] .reset-btn {
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}

:root[data-theme="dark"] .reset-btn:hover {
    background: var(--color-input-bg);
    color: var(--color-text-primary);
}

/* Noscript section */
:root[data-theme="dark"] .noscript-section code,
:root[data-theme="dark"] .noscript-section pre {
    background: var(--color-input-bg);
    color: var(--color-text-primary);
}

/* Print: siempre usar tema claro */
@media print {
    :root[data-theme="dark"] {
        --color-bg: #FFFFFF;
        --color-card: #FFFFFF;
        --color-text-primary: #1D1D1F;
        --color-text-secondary: #6E6E73;
        --color-text-tertiary: #86868B;
    }
}

/* ============================================
   BOTÓN TOGGLE DE TEMA
   ============================================ */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--color-text-secondary);
}

.theme-toggle:hover {
    background: var(--color-input-bg);
    border-color: var(--color-text-tertiary);
    color: var(--color-text-primary);
}

.theme-toggle svg {
    width: 20px;
    height: 20px;
    transition: transform var(--transition-base);
}

.theme-toggle:hover svg {
    transform: rotate(15deg);
}

/* Icono de sol (visible en modo claro - representa el modo actual) */
.theme-toggle .icon-sun {
    display: block;
}

/* Icono de luna (oculto en modo claro) */
.theme-toggle .icon-moon {
    display: none;
}

/* Invertir iconos en modo oscuro */
:root[data-theme="dark"] .theme-toggle .icon-sun {
    display: none;
}

/* Luna visible en modo oscuro - representa el modo actual */
:root[data-theme="dark"] .theme-toggle .icon-moon {
    display: block;
}

/* ============================================
   HEADER ACTIONS GROUP
   ============================================ */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .theme-toggle {
        width: 36px;
        height: 36px;
    }

    .theme-toggle svg {
        width: 18px;
        height: 18px;
    }
}

/* ============================================
   SHARE NOTIFICATION
   ============================================ */
.share-notification {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--color-card);
    color: var(--color-text-primary);
    padding: 12px 24px;
    border-radius: var(--radius-full);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    z-index: 10000;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
}

.share-notification.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

:root[data-theme="dark"] .share-notification {
    background: var(--color-input-bg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* ============================================
   SHARE BUTTON
   ============================================ */
.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.share-btn:hover {
    background: var(--color-input-bg);
    border-color: var(--color-text-tertiary);
    color: var(--color-text-primary);
}

.share-btn svg {
    width: 16px;
    height: 16px;
}

:root[data-theme="dark"] .share-btn:hover {
    background: var(--color-input-bg);
}

/* ============================================
   CALCULADORA DE HIPOTECA - DARK MODE
   ============================================ */

:root[data-theme="dark"] .mortgage-form-label {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .mortgage-form-sublabel {
    color: var(--color-text-tertiary);
}

:root[data-theme="dark"] .mortgage-form-input {
    background: var(--color-input-bg);
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .mortgage-form-input:focus {
    background: var(--color-card);
    border-color: var(--color-primary);
}

:root[data-theme="dark"] .mortgage-form-select {
    background: var(--color-input-bg);
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .mortgage-stat-card {
    background: var(--color-card);
}

:root[data-theme="dark"] .mortgage-stat-label {
    color: var(--color-text-secondary);
}

:root[data-theme="dark"] .mortgage-stat-value {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .mortgage-tabs {
    background: var(--color-input-bg);
}

:root[data-theme="dark"] .mortgage-tab-btn {
    color: var(--color-text-secondary);
}

:root[data-theme="dark"] .mortgage-tab-btn.active {
    background: var(--color-card);
    color: var(--color-primary);
}

:root[data-theme="dark"] .mortgage-table-card {
    background: var(--color-card);
}

:root[data-theme="dark"] .mortgage-amortization-table th {
    background: var(--color-input-bg);
    color: var(--color-text-secondary);
}

:root[data-theme="dark"] .mortgage-amortization-table td {
    color: var(--color-text-primary);
    border-color: var(--color-border);
}

:root[data-theme="dark"] .mortgage-amortization-table tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

:root[data-theme="dark"] .mortgage-chart-card {
    background: var(--color-card);
}

:root[data-theme="dark"] .mortgage-chart-title {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .mortgage-chart-subtitle {
    color: var(--color-text-tertiary);
}

/* Mortgage stress test */
:root[data-theme="dark"] .mortgage-stress-section {
    background: var(--color-card);
}

:root[data-theme="dark"] .mortgage-stress-title {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .mortgage-stress-card {
    background: var(--color-input-bg);
}

:root[data-theme="dark"] .mortgage-stress-rate {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .mortgage-stress-label {
    color: var(--color-text-tertiary);
}

:root[data-theme="dark"] .mortgage-stress-payment {
    color: var(--color-text-primary);
}

/* Mortgage amortization section */
:root[data-theme="dark"] .mortgage-amortization-section {
    background: var(--color-card);
}

:root[data-theme="dark"] .mortgage-amortization-title {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .mortgage-amortization-option {
    background: var(--color-input-bg);
}

:root[data-theme="dark"] .mortgage-amortization-option-title {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .mortgage-amortization-stat-label {
    color: var(--color-text-secondary);
}

:root[data-theme="dark"] .mortgage-amortization-stat-value {
    color: var(--color-text-primary);
}

/* Mortgage expenses section */
:root[data-theme="dark"] .mortgage-expenses-section {
    background: var(--color-card);
}

:root[data-theme="dark"] .mortgage-expenses-title {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .mortgage-expenses-filter label {
    color: var(--color-text-secondary);
}

:root[data-theme="dark"] .mortgage-expenses-filter select {
    background: var(--color-input-bg);
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .mortgage-expenses-summary {
    background: var(--color-input-bg);
}

:root[data-theme="dark"] .mortgage-expense-label {
    color: var(--color-text-secondary);
}

:root[data-theme="dark"] .mortgage-expense-value {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .mortgage-expenses-total {
    background: var(--color-card);
}

:root[data-theme="dark"] .mortgage-expenses-total-label {
    color: var(--color-text-secondary);
}

:root[data-theme="dark"] .mortgage-expenses-total-value {
    color: var(--color-text-primary);
}

/* ============================================
   CALCULADORA DE SUELDO - DARK MODE
   ============================================ */

/* Input panel y scrollbar */
:root[data-theme="dark"] .salary-input-panel::-webkit-scrollbar-track {
    background: var(--color-input-bg);
}

:root[data-theme="dark"] .salary-input-panel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

:root[data-theme="dark"] .salary-input-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Input cards */
:root[data-theme="dark"] .salary-input-card {
    background: var(--color-card);
    box-shadow: var(--shadow-card);
}

:root[data-theme="dark"] .salary-input-card-header {
    border-bottom-color: var(--color-border);
}

:root[data-theme="dark"] .salary-input-card-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

:root[data-theme="dark"] .salary-input-card-title {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .salary-input-card-title svg {
    color: var(--color-primary);
}

:root[data-theme="dark"] .salary-input-card-toggle {
    color: var(--color-text-tertiary);
}

/* Form labels */
:root[data-theme="dark"] .salary-form-label {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .salary-form-sublabel {
    color: var(--color-text-tertiary);
}

/* Form inputs */
:root[data-theme="dark"] .salary-form-input {
    background: var(--color-input-bg);
    color: var(--color-text-primary);
    border-color: transparent;
}

:root[data-theme="dark"] .salary-form-input:hover {
    background: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .salary-form-input:focus {
    background: var(--color-card);
    border-color: var(--color-primary);
}

:root[data-theme="dark"] .salary-form-input::placeholder {
    color: var(--color-text-tertiary);
}

/* Input prefix/suffix */
:root[data-theme="dark"] .salary-input-prefix,
:root[data-theme="dark"] .salary-input-suffix {
    color: var(--color-text-secondary);
}

/* Select */
:root[data-theme="dark"] .salary-form-select {
    background: var(--color-input-bg);
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .salary-form-select:hover {
    background: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .salary-form-select:focus {
    background: var(--color-card);
    border-color: var(--color-primary);
}

:root[data-theme="dark"] .salary-form-select option {
    background: var(--color-card);
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .salary-select-arrow {
    color: var(--color-text-tertiary);
}

/* Radio buttons */
:root[data-theme="dark"] .salary-radio-label {
    background: var(--color-input-bg);
    color: var(--color-text-secondary);
}

:root[data-theme="dark"] .salary-radio-label:hover {
    background: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .salary-radio-input:checked + .salary-radio-label {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Checkbox */
:root[data-theme="dark"] .salary-checkbox-label {
    color: var(--color-text-primary);
}

/* Slider */
:root[data-theme="dark"] .salary-form-slider {
    background: linear-gradient(to right, var(--color-primary) 0%, var(--color-input-bg) 0%);
}

:root[data-theme="dark"] .salary-form-slider::-webkit-slider-thumb {
    background: var(--color-card);
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

:root[data-theme="dark"] .salary-form-slider::-moz-range-thumb {
    background: var(--color-card);
    border-color: var(--color-primary);
}

/* Stat cards */
:root[data-theme="dark"] .salary-stat-card {
    background: var(--color-card);
    box-shadow: var(--shadow-card);
}

:root[data-theme="dark"] .salary-stat-icon {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

:root[data-theme="dark"] .salary-stat-label {
    color: var(--color-text-secondary);
}

:root[data-theme="dark"] .salary-stat-value {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .salary-stat-sublabel {
    color: var(--color-text-tertiary);
}

/* Breakdown card */
:root[data-theme="dark"] .salary-breakdown-card {
    background: var(--color-card);
    box-shadow: var(--shadow-card);
}

:root[data-theme="dark"] .salary-breakdown-header {
    border-bottom-color: var(--color-border);
}

:root[data-theme="dark"] .salary-breakdown-title {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .salary-breakdown-item {
    border-bottom-color: var(--color-border);
}

:root[data-theme="dark"] .salary-breakdown-label {
    color: var(--color-text-secondary);
}

:root[data-theme="dark"] .salary-breakdown-value {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .salary-breakdown-value.negative {
    color: #FF6B6B;
}

:root[data-theme="dark"] .salary-breakdown-value.positive {
    color: #4ADE80;
}

:root[data-theme="dark"] .salary-breakdown-total {
    background: rgba(255, 255, 255, 0.03);
}

:root[data-theme="dark"] .salary-breakdown-total .salary-breakdown-label,
:root[data-theme="dark"] .salary-breakdown-total .salary-breakdown-value {
    color: var(--color-text-primary);
}

/* Charts */
:root[data-theme="dark"] .salary-chart-card {
    background: var(--color-card);
    box-shadow: var(--shadow-card);
}

:root[data-theme="dark"] .salary-chart-title {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .salary-chart-subtitle {
    color: var(--color-text-tertiary);
}

/* Tooltips */
:root[data-theme="dark"] .salary-tooltip-content {
    background: var(--color-card);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Foral warning */
:root[data-theme="dark"] .salary-foral-warning {
    background: rgba(255, 149, 0, 0.15);
    border-color: rgba(255, 149, 0, 0.3);
}

:root[data-theme="dark"] .salary-foral-warning-text {
    color: var(--color-text-primary);
}

/* Disclaimer */
:root[data-theme="dark"] .salary-disclaimer {
    background: var(--color-card);
    border-color: var(--color-border);
}

:root[data-theme="dark"] .salary-disclaimer-text {
    color: var(--color-text-secondary);
}

/* Comparison card */
:root[data-theme="dark"] .salary-comparison-card {
    background: var(--color-card);
}

:root[data-theme="dark"] .salary-comparison-text {
    color: var(--color-text-secondary);
}

:root[data-theme="dark"] .salary-comparison-text strong {
    color: var(--color-text-primary);
}

/* Benefits section */
:root[data-theme="dark"] .salary-benefits-card {
    background: var(--color-card);
}

:root[data-theme="dark"] .salary-benefits-title {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .salary-benefit-item {
    border-bottom-color: var(--color-border);
}

:root[data-theme="dark"] .salary-benefit-label {
    color: var(--color-text-secondary);
}

:root[data-theme="dark"] .salary-benefit-value {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .salary-benefit-savings {
    color: #4ADE80;
}

/* Add buttons */
:root[data-theme="dark"] .salary-add-btn {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: transparent;
}

:root[data-theme="dark"] .salary-add-btn:hover {
    background: var(--color-primary-light);
}

/* Dependent items */
:root[data-theme="dark"] .salary-dependent-item {
    background: var(--color-input-bg);
}

:root[data-theme="dark"] .salary-dependent-name {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .salary-dependent-details {
    color: var(--color-text-secondary);
}

:root[data-theme="dark"] .salary-dependent-remove {
    color: var(--color-text-tertiary);
}

:root[data-theme="dark"] .salary-dependent-remove:hover {
    color: #FF6B6B;
    background: rgba(255, 59, 48, 0.1);
}

/* Salary CCAA comparison */
:root[data-theme="dark"] .salary-ccaa-toggle {
    background: var(--color-card);
    border-color: var(--color-border);
}

:root[data-theme="dark"] .salary-ccaa-toggle-text {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .salary-ccaa-table-wrapper {
    background: var(--color-card);
}

:root[data-theme="dark"] .salary-ccaa-table th {
    background: var(--color-input-bg);
    color: var(--color-text-secondary);
}

:root[data-theme="dark"] .salary-ccaa-table td {
    color: var(--color-text-primary);
    border-color: var(--color-border);
}

:root[data-theme="dark"] .salary-ccaa-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* CCAA comparison difference colors - dark mode */
:root[data-theme="dark"] .salary-ccaa-diff.positive {
    color: #4ADE80;
}

:root[data-theme="dark"] .salary-ccaa-diff.negative {
    color: #FF6B6B;
}

/* Salary increase section */
:root[data-theme="dark"] .salary-increase-section {
    background: var(--color-card);
}

:root[data-theme="dark"] .salary-increase-title {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .salary-increase-result-item {
    background: var(--color-input-bg);
}

:root[data-theme="dark"] .salary-increase-label {
    color: var(--color-text-secondary);
}

:root[data-theme="dark"] .salary-increase-value {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .salary-increase-sublabel {
    color: var(--color-text-tertiary);
}

:root[data-theme="dark"] .salary-increase-current-salary {
    color: var(--color-text-tertiary);
}

:root[data-theme="dark"] .salary-increase-result-item.info {
    border-color: var(--color-border);
}

/* Salary history section */
:root[data-theme="dark"] .salary-history-section {
    background: var(--color-card);
}

:root[data-theme="dark"] .salary-history-title {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .salary-history-item {
    background: var(--color-input-bg);
}

:root[data-theme="dark"] .salary-history-gross {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .salary-history-region {
    background: var(--color-card);
    color: var(--color-text-secondary);
}

:root[data-theme="dark"] .salary-history-date {
    color: var(--color-text-tertiary);
}

:root[data-theme="dark"] .salary-history-load-btn,
:root[data-theme="dark"] .salary-history-delete-btn {
    border-color: var(--color-border);
}

/* ============================================
   CALCULADORA DE JUBILACIÓN - DARK MODE
   ============================================ */

:root[data-theme="dark"] .retirement-input-card {
    background: var(--color-card);
}

:root[data-theme="dark"] .retirement-input-card-title {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .retirement-form-label {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .retirement-form-sublabel {
    color: var(--color-text-tertiary);
}

:root[data-theme="dark"] .retirement-form-input {
    background: var(--color-input-bg);
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .retirement-form-input:focus {
    background: var(--color-card);
    border-color: var(--color-primary);
}

:root[data-theme="dark"] .retirement-results-title {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .retirement-result-card {
    background: var(--color-card);
}

:root[data-theme="dark"] .retirement-result-label {
    color: var(--color-text-secondary);
}

:root[data-theme="dark"] .retirement-result-value {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .retirement-result-sublabel {
    color: var(--color-text-tertiary);
}

:root[data-theme="dark"] .retirement-gap-section {
    background: var(--color-card);
}

:root[data-theme="dark"] .retirement-gap-title {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .retirement-gap-bar-label {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .retirement-gap-bar-value {
    color: var(--color-text-secondary);
}

:root[data-theme="dark"] .retirement-gap-bar-track {
    background: var(--color-input-bg);
}

:root[data-theme="dark"] .retirement-recommendation {
    background: var(--color-primary-light);
}

:root[data-theme="dark"] .retirement-recommendation-text {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .retirement-chart-card {
    background: var(--color-card);
}

:root[data-theme="dark"] .retirement-chart-title {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .retirement-chart-subtitle {
    color: var(--color-text-tertiary);
}

:root[data-theme="dark"] .retirement-timeline {
    border-color: var(--color-border);
}

:root[data-theme="dark"] .retirement-timeline-label {
    color: var(--color-text-secondary);
}

/* ============================================
   ELEMENTOS GENERALES ADICIONALES - DARK MODE
   ============================================ */

/* Inputs con prefix/suffix en salary */
:root[data-theme="dark"] .salary-input-prefix,
:root[data-theme="dark"] .salary-input-suffix {
    color: var(--color-text-secondary);
}

/* Buttons secundarios */
:root[data-theme="dark"] .salary-action-btn {
    background: var(--color-card);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .salary-action-btn:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Add buttons */
:root[data-theme="dark"] .salary-add-btn {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

:root[data-theme="dark"] .salary-add-btn:hover {
    background: var(--color-primary-light);
}

/* Dependent items */
:root[data-theme="dark"] .salary-dependent-item {
    background: var(--color-input-bg);
}

:root[data-theme="dark"] .salary-dependent-name {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .salary-dependent-details {
    color: var(--color-text-secondary);
}

/* ============================================
   HOME PAGE - DARK MODE
   ============================================ */
:root[data-theme="dark"] .home-hero-badge {
    background: rgba(0, 113, 227, 0.2);
}

:root[data-theme="dark"] .home-tool-card {
    background: var(--color-card);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

:root[data-theme="dark"] .home-tool-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

:root[data-theme="dark"] .home-tool-feature {
    background: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .home-features-section {
    background: rgba(255, 255, 255, 0.0);
}

:root[data-theme="dark"] .home-feature-icon {
    background: var(--color-card);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

:root[data-theme="dark"] .home-cta-button {
    box-shadow: 0 4px 15px rgba(0, 113, 227, 0.4);
}

:root[data-theme="dark"] .home-cta-button:hover {
    box-shadow: 0 6px 25px rgba(0, 113, 227, 0.5);
}

/* ============================================
   COMPOUND INPUT PANEL - DARK MODE
   ============================================ */

/* Input panel y scrollbar */
:root[data-theme="dark"] .compound-input-panel::-webkit-scrollbar-track {
    background: var(--color-input-bg);
}

:root[data-theme="dark"] .compound-input-panel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

:root[data-theme="dark"] .compound-input-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Input cards */
:root[data-theme="dark"] .compound-input-card {
    background: var(--color-card);
    box-shadow: var(--shadow-card);
}

:root[data-theme="dark"] .compound-input-card-header {
    border-bottom-color: var(--color-border);
}

:root[data-theme="dark"] .compound-input-card-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

:root[data-theme="dark"] .compound-input-card-title {
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .compound-input-card-title svg {
    color: var(--color-primary);
}

:root[data-theme="dark"] .compound-input-card-toggle {
    color: var(--color-text-tertiary);
    background: var(--color-input-bg);
}

:root[data-theme="dark"] .compound-input-card-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Form labels */
:root[data-theme="dark"] .compound-form-label {
    color: var(--color-text-primary);
}

/* Form inputs */
:root[data-theme="dark"] .compound-form-input {
    background: var(--color-input-bg);
    color: var(--color-text-primary);
    border-color: transparent;
}

:root[data-theme="dark"] .compound-form-input:hover {
    background: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .compound-form-input:focus {
    background: var(--color-card);
    border-color: var(--color-primary);
}

:root[data-theme="dark"] .compound-form-input::placeholder {
    color: var(--color-text-tertiary);
}

/* Input prefix/suffix */
:root[data-theme="dark"] .compound-input-prefix,
:root[data-theme="dark"] .compound-input-suffix {
    color: var(--color-text-secondary);
}

/* Select */
:root[data-theme="dark"] .compound-form-select {
    background: var(--color-input-bg);
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .compound-form-select:hover {
    background: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .compound-form-select:focus {
    background: var(--color-card);
    border-color: var(--color-primary);
}

:root[data-theme="dark"] .compound-form-select option {
    background: var(--color-card);
    color: var(--color-text-primary);
}

:root[data-theme="dark"] .compound-select-arrow {
    color: var(--color-text-tertiary);
}

/* Slider */
:root[data-theme="dark"] .compound-form-slider {
    background: linear-gradient(to right, var(--color-primary) 0%, var(--color-input-bg) 0%);
}

:root[data-theme="dark"] .compound-form-slider::-webkit-slider-thumb {
    background: var(--color-card);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

:root[data-theme="dark"] .compound-form-slider::-moz-range-thumb {
    background: var(--color-card);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}