/* Colores específicos para plantilla Perritos Heroicos - Tonos Azules Rescate */
:root {
    --color-primario: #1e88e5; /* Azul heroico vibrante */
    --color-secundario: #ffd54f; /* Amarillo distintivo */
    --color-terciario: #64b5f6; /* Azul claro brillante */
    --color-acento: #e3f2fd; /* Azul muy suave */
    --color-texto: #0d47a1; /* Azul oscuro legible */
    
    /* RGB values for rgba usage */
    --color-primario-rgb: 30, 136, 229;
    --color-secundario-rgb: 255, 213, 79;
    
    /* Variables adicionales para el refactor */
    --color-fondo-principal: #e3f2fd; /* Fondo azul muy suave */
    --color-sombra-principal: rgba(30, 136, 229, 0.15); /* Sombra azul principal */
    --color-sombra-secundaria: rgba(30, 136, 229, 0.08); /* Sombra azul secundaria */
    --color-hover-boton: #1565c0; /* Azul más intenso para hover */
    --color-boton-transparente: rgba(30, 136, 229, 0.2); /* Botones semi-transparentes azul */
    --color-sombra-media: rgba(30, 136, 229, 0.18); /* Sombra azul media */
    --color-bg-gradiente-cuenta: linear-gradient(90deg, #e3f2fd 0%, #90caf9 100%); /* Gradiente azul */
    --color-borde-bancario: #64b5f6; /* Borde azul bancario */
    --color-cuenta-sombra: rgba(30, 136, 229, 0.25); /* Sombra azul cuenta */
    
    /* Variables para formularios profesionales */
    --color-borde-formulario: #64b5f6; /* Borde azul formulario */
    --color-texto-formulario: #0d47a1; /* Texto azul formulario */
    --color-hover-formulario: #e3f2fd; /* Hover azul formulario */
    --color-flecha-select: #1e88e5; /* Flecha azul select */
    --color-radio-si: #10b981; /* Radio verde para sí */
    --color-radio-no: #ef4444; /* Radio rojo para no */
    
    /* Variables para elementos especiales */
    
    /* Variables para countdown */
    /* Variables para elementos especiales */
    --color-wave: #1e88e5;
    --color-fondo-timeline: #e3f2fd;
    
    /* Variables para modales */
    --color-modal-imagen-fondo: linear-gradient(135deg, #e3f2fd 0%, #64b5f6 100%); /* Gradiente azul modal */
    
    /* Variable para indicadores de carrusel */
    --color-puntos-inactivos: rgba(var(--color-primario-rgb), 0.25); /* Puntos de carrusel no activos */
}