/* CSS específico para solucionar problemas de visualización en móviles */
/* Compatible con Bootstrap 3.3.6 */

/* Asegurar que las tarjetas se muestren 1 por fila en dispositivos extra pequeños */
@media (max-width: 767px) {
    /* Reforzar el comportamiento de col-xs-12 para 1 tarjeta por fila */
    .col-xs-12 {
        width: 100% !important;
        float: left !important;
        position: relative !important;
        min-height: 1px !important;
        padding-right: 15px !important;
        padding-left: 15px !important;
        clear: both !important;
    }
    
    /* Asegurar que el contenedor de las tarjetas sea visible */
    .row .col-xs-12 {
        margin-bottom: 15px;
    }
    
    /* Asegurar que las imágenes se carguen correctamente */
    .program-card-image {
        width: 100% !important;
        height: 150px !important;
        object-fit: cover !important;
        display: block !important;
    }
    
    /* Corregir el comportamiento de las tarjetas compactas en móviles */
    .compact-card {
        margin-bottom: 15px !important;
        border: 1px solid rgba(0,0,0,0.125) !important;
        border-radius: 0.25rem !important;
        max-width: 100% !important;
    }
    
    /* Asegurar que el overlay de imagen funcione */
    .image-overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0,0,0,0.5) !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
    }
    
    .position-relative:hover .image-overlay {
        opacity: 1 !important;
    }
    
    /* Corregir padding y margin en móviles */
    .card-body {
        padding: 1rem !important;
    }
    
    /* Asegurar que el contenedor principal tenga el padding correcto */
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Corregir la altura del contenedor de imagen */
    .position-relative {
        position: relative !important;
        display: block !important;
    }
    
    /* Centrar las tarjetas cuando hay pocas */
    .justify-content-center {
        text-align: center;
    }
    
    .justify-content-center .col-xs-12 {
        display: block !important;
        float: none !important;
        margin: 0 auto 15px auto !important;
        max-width: 400px; /* Limitar el ancho máximo en móviles */
    }
}

/* Para tablets pequeños */
@media (min-width: 768px) and (max-width: 991px) {
    .col-sm-6 {
        width: 50% !important;
        float: left !important;
    }
}

/* Para tablets */
@media (min-width: 992px) and (max-width: 1199px) {
    .col-md-4 {
        width: 33.33333333% !important;
        float: left !important;
    }
}

/* Para escritorio */
@media (min-width: 1200px) {
    .col-lg-3 {
        width: 25% !important;
        float: left !important;
    }
}

/* Mejoras generales para todas las pantallas */
.program-card-image {
    transition: transform 0.3s ease;
}

.compact-card {
    transition: box-shadow 0.15s ease-in-out;
}

.compact-card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Asegurar que las tarjetas tengan altura consistente */
.card.h-100 {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.card-body {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}