/**
 * Temas Adicionales para IluFuturo SaaS
 * Múltiples paletas de colores suaves para personalización
 */

/* ===== TEMA ILUSIONES CON FUTURO (PREDETERMINADO) ===== */
:root,
[data-theme="ilusiones"] {
    --theme-name: "Ilusiones con Futuro";
    /* Colores primarios inspirados en el logo */
    --bs-primary: #52b69a;
    /* Verde principal del logo */
    --bs-primary-rgb: 82, 182, 154;
    --bs-secondary: #184e77;
    /* Azul oscuro profesional */
    --bs-secondary-rgb: 24, 78, 119;

    /* Colores complementarios del branding */
    --color-green: #52b69a;
    /* Verde del logo */
    --color-green-rgb: 82, 182, 154;
    --color-pink: #e63946;
    /* Rosa/magenta del logo */
    --color-pink-rgb: 230, 57, 70;
    --color-turquoise: #34a0a4;
    /* Azul turquesa del logo */
    --color-turquoise-rgb: 52, 160, 164;
    --color-light-green: #76c893;
    /* Verde claro complementario */
    --color-light-green-rgb: 118, 200, 147;

    /* Estados actualizados con la paleta */
    --bs-success: #52b69a;
    /* Verde principal */
    --bs-success-rgb: 82, 182, 154;
    --bs-danger: #e63946;
    /* Rosa del logo */
    --bs-danger-rgb: 230, 57, 70;
    --bs-warning: #f77f00;
    /* Naranja complementario */
    --bs-warning-rgb: 247, 127, 0;
    --bs-info: #34a0a4;
    /* Turquesa del logo */
    --bs-info-rgb: 52, 160, 164;

    /* Colores de fondo y texto optimizados */
    --bs-body-bg: #f8fffe;
    /* Fondo muy suave verde */
    --bs-body-color: #2d3436;
    /* Texto principal oscuro */
    --bs-link-color: #52b69a;
    /* Enlaces en verde principal */
    --bs-link-hover-color: #40916c;
    /* Verde más oscuro al hover */
    --bs-border-color: #d1f2eb;
    /* Bordes suaves verdes */

    /* Grises actualizados */
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;

    /* Colores adicionales para cards y elementos especiales */
    --card-header-bg: linear-gradient(135deg, #52b69a, #34a0a4);
    --sidebar-bg: linear-gradient(180deg, #f8fffe, #e8f5f0);
    --header-gradient: linear-gradient(135deg, #52b69a, #e63946, #34a0a4);
}

/* ===== TEMA BASE ANTERIOR (Turquesa Médico) ===== */
[data-theme="turquoise"] {
    --theme-name: "Turquesa Médico";
    /* Colores primarios */
    --bs-primary: #26c6da;
    --bs-primary-rgb: 38, 198, 218;
    --bs-secondary: #4B515D;
    --bs-secondary-rgb: 75, 81, 93;
}

/* ===== TEMA LAVANDA SUAVE ===== */
[data-theme="lavender"] {
    --theme-name: "Lavanda Suave";
    /* Colores primarios suaves */
    --bs-primary: #8b7ec8;
    --bs-primary-rgb: 139, 126, 200;
    --bs-secondary: #6c757d;
    --bs-secondary-rgb: 108, 117, 125;

    /* Estados con tonos suaves */
    --bs-success: #52b788;
    --bs-success-rgb: 82, 183, 136;
    --bs-danger: #e07a5f;
    --bs-danger-rgb: 224, 122, 95;
    --bs-warning: #f4a261;
    --bs-warning-rgb: 244, 162, 97;
    --bs-info: #7209b7;
    --bs-info-rgb: 114, 9, 183;

    /* Colores de fondo y texto suaves */
    --bs-body-bg: #faf9ff;
    --bs-body-color: #4a4458;
    --bs-link-color: #8b7ec8;
    --bs-link-hover-color: #7b6cb8;
    --bs-border-color: #e6e3f0;
}

/* ===== TEMA VERDE MENTA ===== */
[data-theme="mint"] {
    --theme-name: "Verde Menta";
    /* Colores primarios frescos */
    --bs-primary: #7dd3c0;
    --bs-primary-rgb: 125, 211, 192;
    --bs-secondary: #5a6c57;
    --bs-secondary-rgb: 90, 108, 87;

    /* Estados naturales */
    --bs-success: #52b788;
    --bs-success-rgb: 82, 183, 136;
    --bs-danger: #e76f51;
    --bs-danger-rgb: 231, 111, 81;
    --bs-warning: #f4a261;
    --bs-warning-rgb: 244, 162, 97;
    --bs-info: #219ebc;
    --bs-info-rgb: 33, 158, 188;

    /* Fondo fresco */
    --bs-body-bg: #f8fffe;
    --bs-body-color: #2d4a3e;
    --bs-link-color: #7dd3c0;
    --bs-link-hover-color: #6bc4b0;
    --bs-border-color: #d8f3ed;
}

/* ===== TEMA CORAL SUAVE ===== */
[data-theme="coral"] {
    --theme-name: "Coral Suave";
    /* Colores cálidos suaves */
    --bs-primary: #ff9a8b;
    --bs-primary-rgb: 255, 154, 139;
    --bs-secondary: #6d4c41;
    --bs-secondary-rgb: 109, 76, 65;

    /* Estados cálidos */
    --bs-success: #81c784;
    --bs-success-rgb: 129, 199, 132;
    --bs-danger: #ef5350;
    --bs-danger-rgb: 239, 83, 80;
    --bs-warning: #ffcc02;
    --bs-warning-rgb: 255, 204, 2;
    --bs-info: #42a5f5;
    --bs-info-rgb: 66, 165, 245;

    /* Fondo cálido */
    --bs-body-bg: #fff8f6;
    --bs-body-color: #4e342e;
    --bs-link-color: #ff9a8b;
    --bs-link-hover-color: #ff8a7b;
    --bs-border-color: #f3e5f5;
}

/* ===== TEMA AZUL CIELO ===== */
[data-theme="sky"] {
    --theme-name: "Azul Cielo";
    /* Colores celestiales */
    --bs-primary: #87ceeb;
    --bs-primary-rgb: 135, 206, 235;
    --bs-secondary: #546e7a;
    --bs-secondary-rgb: 84, 110, 122;

    /* Estados serenos */
    --bs-success: #66bb6a;
    --bs-success-rgb: 102, 187, 106;
    --bs-danger: #ef5350;
    --bs-danger-rgb: 239, 83, 80;
    --bs-warning: #ffca28;
    --bs-warning-rgb: 255, 202, 40;
    --bs-info: #29b6f6;
    --bs-info-rgb: 41, 182, 246;

    /* Fondo celestial */
    --bs-body-bg: #f0f8ff;
    --bs-body-color: #37474f;
    --bs-link-color: #87ceeb;
    --bs-link-hover-color: #77bedb;
    --bs-border-color: #deeeff;
}

/* ===== TEMA ROSA POLVOSO ===== */
[data-theme="dusty-rose"] {
    --theme-name: "Rosa Polvoso";
    /* Colores vintage suaves */
    --bs-primary: #d4a4a4;
    --bs-primary-rgb: 212, 164, 164;
    --bs-secondary: #8e7066;
    --bs-secondary-rgb: 142, 112, 102;

    /* Estados vintage */
    --bs-success: #a4c4a4;
    --bs-success-rgb: 164, 196, 164;
    --bs-danger: #d4a4a4;
    --bs-danger-rgb: 212, 164, 164;
    --bs-warning: #e4d4a4;
    --bs-warning-rgb: 228, 212, 164;
    --bs-info: #a4b4d4;
    --bs-info-rgb: 164, 180, 212;

    /* Fondo vintage */
    --bs-body-bg: #faf8f6;
    --bs-body-color: #5d4e75;
    --bs-link-color: #d4a4a4;
    --bs-link-hover-color: #c49494;
    --bs-border-color: #ede8e4;
}

/* ===== TEMA OLIVA SUAVE ===== */
[data-theme="olive"] {
    --theme-name: "Oliva Suave";
    /* Colores tierra suaves */
    --bs-primary: #a4ac86;
    --bs-primary-rgb: 164, 172, 134;
    --bs-secondary: #6d7966;
    --bs-secondary-rgb: 109, 121, 102;

    /* Estados naturales */
    --bs-success: #8fbc8f;
    --bs-success-rgb: 143, 188, 143;
    --bs-danger: #cd853f;
    --bs-danger-rgb: 205, 133, 63;
    --bs-warning: #daa520;
    --bs-warning-rgb: 218, 165, 32;
    --bs-info: #708090;
    --bs-info-rgb: 112, 128, 144;

    /* Fondo tierra */
    --bs-body-bg: #f8f7f4;
    --bs-body-color: #3e4d3e;
    --bs-link-color: #a4ac86;
    --bs-link-hover-color: #949c76;
    --bs-border-color: #e8e6e0;
}

/* ===== TEMA PÚRPURA GRISÁCEO ===== */
[data-theme="mauve"] {
    --theme-name: "Púrpura Grisáceo";
    /* Colores sofisticados */
    --bs-primary: #b19cd9;
    --bs-primary-rgb: 177, 156, 217;
    --bs-secondary: #6d5d7a;
    --bs-secondary-rgb: 109, 93, 122;

    /* Estados sofisticados */
    --bs-success: #9ccc65;
    --bs-success-rgb: 156, 204, 101;
    --bs-danger: #ef5350;
    --bs-danger-rgb: 239, 83, 80;
    --bs-warning: #ffab40;
    --bs-warning-rgb: 255, 171, 64;
    --bs-info: #7e57c2;
    --bs-info-rgb: 126, 87, 194;

    /* Fondo sofisticado */
    --bs-body-bg: #faf9fc;
    --bs-body-color: #4a4458;
    --bs-link-color: #b19cd9;
    --bs-link-hover-color: #a18cc9;
    --bs-border-color: #ebe7f0;
}

/* ===== APLICACIÓN DE TEMAS ===== */

/* Gradientes específicos por tema */
/* Tema ILUSIONES CON FUTURO (predeterminado) */
:root .title-shadow,
[data-theme="ilusiones"] .title-shadow {
    background: linear-gradient(135deg, #52b69a, #34a0a4, #e63946) !important;
}

[data-theme="turquoise"] .title-shadow {
    background: linear-gradient(135deg, #26c6da, #00acc1) !important;
}

[data-theme="lavender"] .title-shadow {
    background: linear-gradient(135deg, #8b7ec8, #7b6cb8) !important;
}

[data-theme="mint"] .title-shadow {
    background: linear-gradient(135deg, #7dd3c0, #6bc4b0) !important;
}

[data-theme="coral"] .title-shadow {
    background: linear-gradient(135deg, #ff9a8b, #ff8a7b) !important;
}

[data-theme="sky"] .title-shadow {
    background: linear-gradient(135deg, #87ceeb, #77bedb) !important;
}

[data-theme="dusty-rose"] .title-shadow {
    background: linear-gradient(135deg, #d4a4a4, #c49494) !important;
}

[data-theme="olive"] .title-shadow {
    background: linear-gradient(135deg, #a4ac86, #949c76) !important;
}

[data-theme="mauve"] .title-shadow {
    background: linear-gradient(135deg, #b19cd9, #a18cc9) !important;
}

/* Sidebars específicos por tema */
/* Tema ILUSIONES CON FUTURO (predeterminado) */
:root .sidebar,
[data-theme="ilusiones"] .sidebar {
    background: linear-gradient(180deg, #f8fffe, #e8f5f0) !important;
    color: #2d3436 !important;
}

[data-theme="turquoise"] .sidebar {
    background: #4B515D !important;
}

[data-theme="lavender"] .sidebar {
    background: linear-gradient(180deg, #faf9ff, #f3f0ff) !important;
}

[data-theme="mint"] .sidebar {
    background: linear-gradient(180deg, #f8fffe, #f0fdf9) !important;
}

[data-theme="coral"] .sidebar {
    background: linear-gradient(180deg, #fff8f6, #ffede8) !important;
}

[data-theme="sky"] .sidebar {
    background: linear-gradient(180deg, #f0f8ff, #e6f3ff) !important;
}

[data-theme="dusty-rose"] .sidebar {
    background: linear-gradient(180deg, #faf8f6, #f5f1ed) !important;
}

[data-theme="olive"] .sidebar {
    background: linear-gradient(180deg, #f8f7f4, #f2f0ea) !important;
}

[data-theme="mauve"] .sidebar {
    background: linear-gradient(180deg, #faf9fc, #f3f0f8) !important;
}

/* Botones específicos por tema */
[data-theme] .btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-link-hover-color);
    --bs-btn-hover-border-color: var(--bs-link-hover-color);
}

/* Cards específicas por tema */
[data-theme] .card-header.bg-primary {
    background: linear-gradient(135deg, var(--bs-primary), var(--bs-link-hover-color)) !important;
}

/* Focus states específicos por tema */
[data-theme] .form-control:focus,
[data-theme] .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}