/* Colores específicos para plantilla Unicornios - Tonos Mágicos y Arcoíris */
:root {
    --color-primario: #ff69b4; /* Rosa vibrante mágico */
    --color-secundario: #9370db; /* Púrpura místico */
    --color-terciario: #ff1493; /* Rosa intenso */
    --color-acento: #fff0f9; /* Rosa muy claro */
    --color-texto: #8b1538; /* Rosa oscuro legible */
    
    /* RGB values for rgba usage */
    --color-primario-rgb: 255, 105, 180;
    --color-secundario-rgb: 147, 112, 219;
    
    /* Variables adicionales para el refactor */
    --color-fondo-principal: #fefcff; /* Fondo rosa muy suave */
    --color-sombra-principal: rgba(255, 105, 180, 0.15); /* Sombra rosa principal */
    --color-sombra-secundaria: rgba(255, 105, 180, 0.08); /* Sombra rosa secundaria */
    --color-hover-boton: #be185d; /* Rosa intenso para hover */
    --color-boton-transparente: rgba(255, 105, 180, 0.2); /* Botones semi-transparentes rosa */
    --color-sombra-media: rgba(255, 105, 180, 0.18); /* Sombra rosa media */
    --color-bg-gradiente-cuenta: linear-gradient(90deg, #fff0f9 0%, #fce7f3 100%); /* Gradiente rosa */
    --color-borde-bancario: #fce7f3; /* Borde rosa bancario */
    --color-cuenta-sombra: rgba(255, 105, 180, 0.25); /* Sombra rosa cuenta */
    
    /* Variables para formularios profesionales */
    --color-borde-formulario: #f3e8ff; /* Borde púrpura formulario */
    --color-texto-formulario: #8b1538; /* Texto rosa formulario */
    --color-hover-formulario: #fefcff; /* Hover rosa formulario */
    --color-flecha-select: #be185d; /* Flecha rosa select */
    --color-radio-si: #ff69b4; /* Radio rosa para sí */
    --color-radio-no: #fb7185; /* Radio coral para no */
    
    /* Variables para elementos especiales */
    
    /* Variables para countdown */
    /* Variables para elementos especiales */
    --color-wave: #ff69b4;
    --color-fondo-timeline: #fefcff;
    
    /* Variables para modales */
    --color-modal-imagen-fondo: linear-gradient(135deg, #fefcff 0%, #f3e8ff 100%); /* Gradiente rosa modal */
    
    /* Variable para indicadores de carrusel */
    --color-puntos-inactivos: rgba(var(--color-primario-rgb), 0.25); /* Puntos de carrusel no activos */
}