/* ========================================
   SECCIÓN HERO - IMAGEN DE FONDO
   ======================================== */

/* Contenedor principal con imagen de fondo */
.bg-hero-image {
    background-image: url("/static/NewAEPA/imagenes/AEPA-Mujeres.jpg");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: scroll;
    min-height: 100vh;
    color: white;
    display: flex;
    align-items: center;
    position: relative;
}

/* Overlay oscuro sobre la imagen */
.bg-hero-image::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

/* Contenido sobre el overlay */
.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* Estilos de texto con sombras */
.bg-hero-image h1,
.bg-hero-image p {
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

/* ========================================
   TARJETAS DEL DASHBOARD
   ======================================== */

/* Efectos hover en tarjetas del dashboard */
.dashboard-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* ========================================
   TARJETAS DE ESTADÍSTICAS
   ======================================== */

/* Números grandes en estadísticas */
.stats-card h3 {
    font-size: 2rem;
}

/* Texto descriptivo en estadísticas */
.stats-card p {
    font-size: 0.9rem;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablets y móviles grandes */
@media (max-width: 768px) {
    .bg-hero-image {
        min-height: 70vh;
        background-attachment: scroll;
    }
    
    .bg-hero-image h1 {
        font-size: 2rem !important;
        line-height: 1.2;
    }
    
    .bg-hero-image .lead {
        font-size: 1.1rem;
    }
    
    /* Botones del hero en columna */
    .hero-buttons {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    .hero-buttons .btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Ajustes de tarjetas */
    .card {
        margin-bottom: 1.5rem;
    }
    
    .card-body {
        padding: 1.5rem 1rem;
    }
    
    .card i {
        font-size: 2.5rem !important;
    }
}

/* Móviles pequeños */
@media (max-width: 576px) {
    .bg-hero-image {
        min-height: 60vh;
        padding: 2rem 0;
    }
    
    .bg-hero-image h1 {
        font-size: 1.75rem !important;
    }
    
    .container {
        padding: 0 1rem;
    }
}