/* Estilos específicos para la sección FP Dual Intensiva */
/* Los estilos base (cards, navbar, etc.) ya están en ../../css/styles.css */

/* Ajuste de altura específico para las gráficas de esta sección */
#chartCiclos,
#chartCentros,
#chartContratos,
#chartEvolucion {
    max-height: 300px;
}

/* Asegurar que las cards en la misma fila tengan la misma altura */
.row > [class*="col-"] > .card.h-100 {
    display: flex;
    flex-direction: column;
}

.row > [class*="col-"] > .card.h-100 > .card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Asegurar que el chart-container ocupe el espacio disponible */
.chart-container.flex-grow-1 {
    flex: 1;
    min-height: 300px;
}

/* Asegurar que la tabla también ocupe el espacio disponible */
.table-responsive.flex-grow-1 {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.table-responsive.flex-grow-1 > table {
    flex: 1;
}

/* Estilos específicos para la tabla de resumen */
#tablaResumen tbody tr:hover {
    background-color: var(--color-bg-light);
}

/* Estilos para el selector de curso académico */
#selectorCurso.curso-activo {
    background-color: #0d6efd !important;
    color: white !important;
}

#selectorCurso.curso-activo option {
    background-color: white !important;
    color: #212529 !important;
}

#selectorCurso option:checked {
    background-color: #0d6efd !important;
    color: white !important;
}

/* Estilos para el mapa de centros */
#mapaCentrosDI {
    z-index: 0;
}

.custom-marker {
    background: transparent;
    border: none;
}

/* Estilos para el botón de pantalla completa dentro del mapa */
.leaflet-control-fullscreen {
    border-radius: 4px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
}

.leaflet-control-fullscreen:hover {
    background-color: #f4f4f4;
}

/* Estilos para el modal de pantalla completa */
#modalMapaCompleto .modal-dialog {
    margin: 0;
    max-width: 100%;
}

#modalMapaCompleto .modal-content {
    border: none;
    border-radius: 0;
}

#modalMapaCompleto .modal-body {
    overflow: hidden;
}

/* Estilos para los popups del mapa - usar estilos generales */

/* Estilos para las pestañas - asegurar legibilidad en móviles */
.nav-tabs .nav-link {
    color: #495057 !important;
}

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

.nav-tabs .nav-link:hover {
    color: #0d6efd !important;
}

/* Responsive adjustments específicos */
@media (max-width: 768px) {
    #chartCiclos,
    #chartCentros,
    #chartContratos,
    #chartEvolucion {
        max-height: 250px;
    }
    
    .chart-container.flex-grow-1 {
        min-height: 250px;
    }
    
    #mapaCentrosDI {
        height: 600px !important;
    }
    
    /* Los estilos del popup ya están unificados arriba, no necesitan duplicarse aquí */
    
    /* Asegurar que el texto de las pestañas sea legible en móviles */
    .nav-tabs .nav-link {
        color: #495057 !important;
        font-weight: 400;
    }
    
    .nav-tabs .nav-link.active {
        color: #0d6efd !important;
        font-weight: 400;
    }
}