/* Modo Claro - Paleta de Azules Celestes */
:root {
    --primary-color: #4A90E2;
    --secondary-color: #7FB3D5;
    --accent-color: #98bbd3;
    --background-color: #d3e2f0;
    --card-background: #f1f7ff;
    --text-color: #2C3E50;
    --text-secondary: #566573;
    --border-color: #D6EAF8;
    --success-color: #27AE60;
    --warning-color: #F39C12;
    --shadow: 0 4px 6px rgba(74, 144, 226, 0.1);
    --navbar-bg: #4e87c7;
    --image-card: #8FB3E3;
    --image-card-dark: #D9E1F1;
}

[data-theme="dark"] {
    --primary-color: #3a4b6b;
    --secondary-color: #16243b;
    --accent-color: #19345a;
    --background-color: #1E2E4F;
    --card-background: #161624;
    --text-color: #E8F4F8;
    --text-secondary: #e9cbcb;
    --border-color: #4a59b9;
    --success-color: #dcebe2;
    --warning-color: #FFA500;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    --navbar-bg: #192338;
    --image-card: #0C121D;
    --image-card-dark: #334663;
}

/* Forzar que Bootstrap use tu variable de tema */
:root {
    --bs-body-bg: var(--background-color);
    --bs-body-color: var(--text-color);
}

[data-theme="dark"] {
    --bs-body-bg: var(--background-color);
    --bs-body-color: var(--text-color);
}

[data-theme="dark"] {
    --primary-color:     #2563EB;
    --secondary-color:   #60A5FA;
    --accent-color:      #1A3154;
    --background-color:  #0D1B2E;
    --card-background:   #122540;
    --text-color:        #E8F0FE;
    --text-secondary:    #7BA7D4;
    --border-color:      rgba(96, 165, 250, 0.18);
    --success-color:     #34D399;
    --warning-color:     #FBBF24;
    --shadow:            0 4px 6px rgba(0, 0, 0, 0.5);
    --navbar-bg:         #192338;
    --image-card:        #0C1A2E;
    --image-card-dark:   #1A3154;
    --bs-body-bg:        var(--background-color);
    --bs-body-color:     var(--text-color);
}