/* Colores específicos para plantilla Balones Deportivos - Soccer, Basketball y Fútbol Americano */
:root {
    --color-primario: #2b7a0b; /* Verde césped soccer */
    --color-secundario: #ff6b35; /* Naranja basketball */
    --color-terciario: #8b4513; /* Marrón fútbol americano */
    --color-acento: #f0f4f8; /* Blanco grisáceo deportivo */
    --color-texto: #1a3a1a; /* Verde oscuro legible */

    /* RGB values for rgba usage */
    --color-primario-rgb: 43, 122, 11;
    --color-secundario-rgb: 255, 107, 53;

    /* Variables adicionales para el refactor */
    --color-fondo-principal: #f8faf8; /* Fondo blanco verdoso muy suave */
    --color-sombra-principal: rgba(43, 122, 11, 0.15); /* Sombra verde principal */
    --color-sombra-secundaria: rgba(43, 122, 11, 0.08); /* Sombra verde secundaria */
    --color-hover-boton: #1f5a08; /* Verde oscuro para hover */
    --color-boton-transparente: rgba(43, 122, 11, 0.2); /* Botones semi-transparentes verde */
    --color-sombra-media: rgba(43, 122, 11, 0.18); /* Sombra verde media */
    --color-bg-gradiente-cuenta: linear-gradient(90deg, #f0f4f8 0%, #e8f5e9 100%); /* Gradiente deportivo */
    --color-borde-bancario: #81c784; /* Borde verde deportivo bancario */
    --color-cuenta-sombra: rgba(43, 122, 11, 0.25); /* Sombra verde cuenta */

    /* Variables para formularios profesionales */
    --color-borde-formulario: #81c784; /* Borde verde deportivo formulario */
    --color-texto-formulario: #1a3a1a; /* Texto verde oscuro formulario */
    --color-hover-formulario: #f8faf8; /* Hover blanco verdoso formulario */
    --color-flecha-select: #2b7a0b; /* Flecha verde select */
    --color-radio-si: #2b7a0b; /* Radio verde para sí */
    --color-radio-no: #ff6b35; /* Radio naranja para no */

    /* Variables para elementos especiales */
    --color-wave: #ff6b35;
    --color-fondo-timeline: #f8faf8;

    /* Variables para modales */
    --color-modal-imagen-fondo: linear-gradient(135deg, #f8faf8 0%, #e8f5e9 100%); /* Gradiente deportivo modal */
    
    /* Variable para indicadores de carrusel */
    --color-puntos-inactivos: rgba(var(--color-primario-rgb), 0.25); /* Puntos de carrusel no activos */
}