/* Colores específicos para plantilla Arcoíris de Alegría - Nubes Tiernas y Arcoíris Vibrante */
:root {
    --color-primario: #9B59B6;          /* Morado arcoíris vibrante */
    --color-secundario: #4ECDC4;        /* Azul cielo alegre */
    --color-terciario: #45B7D1;         /* Azul arcoíris */
    --color-acento: #FFF8F0;            /* Blanco nubes suave */
    --color-texto: #2C3E50;             /* Gris azulado para texto */
    
    /* RGB values for rgba usage */
    --color-primario-rgb: 155, 89, 182;
    --color-secundario-rgb: 78, 205, 196;
    
    /* Variables adicionales para el refactor - Tema arcoíris alegre */
    --color-fondo-principal: #F8FDFF; /* Fondo cielo muy suave */
    --color-sombra-principal: rgba(155, 89, 182, 0.15); /* Sombra morada principal */
    --color-sombra-secundaria: rgba(155, 89, 182, 0.08); /* Sombra morada secundaria */
    --color-hover-boton: #8E44AD; /* Morado oscuro para hover */
    --color-boton-transparente: rgba(155, 89, 182, 0.2); /* Botones semi-transparentes morados */
    --color-sombra-media: rgba(155, 89, 182, 0.18); /* Sombra morada media */
    --color-bg-gradiente-cuenta: linear-gradient(90deg, #FFF8F0 0%, #E3F2FD 100%); /* Gradiente nubes-cielo */
    --color-borde-bancario: #E3F2FD; /* Borde cielo bancario */
    --color-cuenta-sombra: rgba(155, 89, 182, 0.25); /* Sombra morada cuenta */
    
    /* Variables para formularios profesionales - Tema arcoíris alegre */
    --color-borde-formulario: #E3F2FD; /* Borde cielo formulario */
    --color-texto-formulario: #2C3E50; /* Texto gris azulado formulario */
    --color-hover-formulario: #F8FDFF; /* Hover cielo formulario */
    --color-flecha-select: #9B59B6; /* Flecha morada select */
    --color-radio-si: #4CAF50; /* Verde arcoíris para sí */
    --color-radio-no: #FF5722; /* Rojo cachetes para no */
    
    /* Variables para elementos especiales - Tema arcoíris alegre */
    --color-wave: #4ECDC4;
    --color-fondo-timeline: #F8FDFF;
    
    /* Variables para modales - Tema arcoíris alegre */
    --color-modal-imagen-fondo: linear-gradient(135deg, #F8FDFF 0%, #E3F2FD 100%); /* Gradiente cielo modal */
    
    /* Variable para indicadores de carrusel */
    --color-puntos-inactivos: rgba(var(--color-primario-rgb), 0.25); /* Puntos de carrusel no activos */
}