/* Fixes para el modal de ficha verde */

/* Asegurar que el modal esté por encima de todos los menús */
.modal {
    z-index: 9999 !important;
}

.modal-backdrop {
    z-index: 9998 !important;
}

/* Ajustar el margin-top del modal para evitar que quede tapado por menús */
.modal.show .modal-dialog {
    transform: none !important;
    margin-top: 120px !important;
}

/* Ajustar para pantallas más pequeñas */
@media (max-width: 768px) {
    .modal.show .modal-dialog {
        margin-top: 80px !important;
    }
}

@media (max-width: 576px) {
    .modal.show .modal-dialog {
        margin-top: 60px !important;
    }
}

/* Desactivar animaciones SAL para contenido cargado via AJAX */
.course-info,
.course-info .card,
.course-info .card-body,
.cdx-sidebar,
.cdx-sidebar .card,
.cdx-sidebar .card-body {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
}

/* Asegurar que el contenido del modal sea visible inmediatamente */
#courseModalContent {
    opacity: 1 !important;
    transform: none !important;
}

#courseModalContent .card {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
}

/* Ajustar el tamaño del modal para contenido largo */
.modal-xl {
    max-width: 95% !important;
}

@media (min-width: 1200px) {
    .modal-xl {
        max-width: 1140px !important;
    }
}

/* Quitar scroll interno del modal */
.modal-body {
    overflow: visible !important;
    max-height: none !important;
}

/* Reducir padding de la sección dentro del modal */
#courseModalContent section {
    padding: 0 !important;
}

#courseModalContent .container {
    padding: 0 !important;
}

/* Quitar overlay de coursevideo-info */
.coursevideo-info {
    position: relative !important;
}

.coursevideo-info::before,
.coursevideo-info::after {
    display: none !important;
}

/* Mejorar la apariencia del modal */
.modal-content {
    border-radius: 10px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

.modal-header {
    border-bottom: 1px solid #dee2e6 !important;
    background-color: #f8f9fa !important;
    border-radius: 10px 10px 0 0 !important;
}

.modal-footer {
    border-top: 1px solid #dee2e6 !important;
    background-color: #f8f9fa !important;
    border-radius: 0 0 10px 10px !important;
}

/* Asegurar que los tabs funcionen correctamente SOLO dentro del modal */
#courseModal .nav-tabs .nav-link {
    border: 1px solid transparent !important;
    border-top-left-radius: 0.375rem !important;
    border-top-right-radius: 0.375rem !important;
}

#courseModal .nav-tabs .nav-link.active {
    color: #495057 !important;
    background-color: #fff !important;
    border-color: #dee2e6 #dee2e6 #fff !important;
}

/* Mejorar la apariencia de los botones SOLO dentro del modal */
#courseModal .btn-primary {
    background-color: #007bff !important;
    border-color: #007bff !important;
}

#courseModal .btn-primary:hover {
    background-color: #0056b3 !important;
    border-color: #0056b3 !important;
}

/* Asegurar que los botones fuera del modal mantengan el color verde original */
body:not(.modal-open) .btn-primary,
.btn-primary:not(#courseModal .btn-primary) {
    color: #ffffff !important;
    background-color: #004437 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 68, 55, 0.5) !important;
}

/* Restaurar estilos originales para botones fuera del modal */
.btn-primary:not(#courseModal .btn-primary) {
    color: #ffffff !important;
    background-color: #004437 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 68, 55, 0.5) !important;
}

/* Asegurar que los botones de newsletter y otros mantengan sus estilos originales */
.newsletter-form .btn,
.load-more-btn,
.course-grid .btn {
    color: #ffffff !important;
    background-color: #004437 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 68, 55, 0.5) !important;
}