/* Colores específicos para plantilla Mundo Circense - Tonos Rojos */
:root {
    --color-primario: #ef4444; /* Rojo equilibrado - ni muy claro ni muy fuerte */
    --color-secundario: #dc2626; /* Rojo vibrante */
    --color-terciario: #fca5a5; /* Rojo claro */
    --color-acento: #fee2e2; /* Rojo muy claro */
    --color-texto: #7f1d1d; /* Rojo oscuro legible */
    
    /* RGB values for rgba usage */
    --color-primario-rgb: 239, 68, 68;
    --color-secundario-rgb: 220, 38, 38;
    
    /* Variables adicionales para el refactor */
    --color-fondo-principal: #fef2f2; /* Fondo rojo muy suave */
    --color-sombra-principal: rgba(239, 68, 68, 0.15); /* Sombra roja principal */
    --color-sombra-secundaria: rgba(239, 68, 68, 0.08); /* Sombra roja secundaria */
    --color-hover-boton: #dc2626; /* Rojo más intenso para hover */
    --color-boton-transparente: rgba(239, 68, 68, 0.2); /* Botones semi-transparentes rojo */
    --color-sombra-media: rgba(239, 68, 68, 0.18); /* Sombra roja media */
    --color-bg-gradiente-cuenta: linear-gradient(90deg, #fee2e2 0%, #fecaca 100%); /* Gradiente rojo */
    --color-borde-bancario: #fca5a5; /* Borde rojo bancario */
    --color-cuenta-sombra: rgba(239, 68, 68, 0.25); /* Sombra roja cuenta */
    
    /* Variables para formularios profesionales */
    --color-borde-formulario: #fca5a5; /* Borde rojo formulario */
    --color-texto-formulario: #7f1d1d; /* Texto rojo formulario */
    --color-hover-formulario: #fef2f2; /* Hover rojo formulario */
    --color-flecha-select: #ef4444; /* Flecha roja select */
    --color-radio-si: #10b981; /* Radio verde para sí */
    --color-radio-no: #dc2626; /* Radio rojo para no */
    
    /* Variables para elementos especiales */
    
    /* Variables para countdown */
    /* Variables para elementos especiales */
    --color-wave: #ef4444;
    --color-fondo-timeline: #fef2f2;
    
    /* Variables para modales */
    --color-modal-imagen-fondo: linear-gradient(135deg, #fef2f2 0%, #fca5a5 100%); /* Gradiente rojo modal */
    
    /* Variable para indicadores de carrusel */
    --color-puntos-inactivos: rgba(var(--color-primario-rgb), 0.25); /* Puntos de carrusel no activos */
}