/* 1. ESTRUCTURA Y LAYOUT (Unificado) */
body {
    background-color: #f0f2f5;
    font-family: 'Segoe UI', Roboto, sans-serif;
    overflow: hidden;
    height: 100vh;
    margin: 0;
}

.main-wrapper {
    height: 100vh;
}

.sidebar,
.content-area {
    height: 100vh;
    overflow-y: auto;
    padding-bottom: 20px;
}

.sidebar {
    background: #fff;
    border-right: 1px solid #ddd;
}

.content-area {
    background-color: #f8f9fa;
}

/* 2. CONTENEDORES DRAG & DROP (Compactos) */
.drag-container {
    min-height: 40px;
    background-color: #fff;
    border: 1px dashed #cbd5e0;
    border-radius: 6px;
    padding: 4px;
    /* Reducido al mínimo */
    margin-bottom: 10px;
    transition: all 0.2s ease;
}

.drag-container:hover {
    border-color: #4a90e2;
    background-color: #f1f7ff;
}

/* 3. CARDS DE ITEMS (Ultrafinas) */
.item-card {
    cursor: grab;
    background: white;
    border: 1px solid #e2e8f0;
    margin-bottom: 3px;
    /* Espacio mínimo entre alumnos */
    padding: 2px 8px;
    /* Padding mínimo para altura finita */
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    font-size: 0.85rem;
    /* Fuente un poco más chica */
}

/* Identificadores laterales (Grosor reducido) */
.item-profe {
    border-left: 3px solid #198754;
    cursor: pointer;
}

.item-ayudante {
    border-left: 3px solid #ffc107;
}

.item-alumno {
    border-left: 3px solid #0d6efd;
}

/* Estados Activos */
.active-profe {
    background-color: #d1e7dd !important;
    border-left: 5px solid #198754 !important;
    font-weight: bold;
    transform: translateX(3px);
}

/* 4. COLORES POR EDAD (Compactos y Unificados) */
.edad-infantil {
    background-color: #fff9db !important;
    border-left-color: #ffc107 !important;
}

.edad-primaria {
    background-color: #e3f2fd !important;
    border-left-color: #2196f3 !important;
}

.edad-juvenil {
    background-color: #e8f5e9 !important;
    border-left-color: #4caf50 !important;
}

/* 5. BADGES Y TEXTO (Micro) */
.badge-temporada {
    font-size: 0.6rem;
    padding: 1px 5px;
    border-radius: 4px;
    color: #fff;
    font-weight: bold;
}

/* Escala de grises a colores para temporadas */
.temp-0,
.temp-1 {
    background-color: #94a3b8;
}

.temp-2 {
    background-color: #f59e0b;
    color: #000;
}

.temp-3 {
    background-color: #10b981;
}

.temp-4 {
    background-color: #06b6d4;
}

.temp-5 {
    background-color: #3b82f6;
}

.temp-6 {
    background-color: #8b5cf6;
}

/* 6. COMPONENTES DE UI */
.label-seccion {
    font-weight: 800;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    margin: 10px 0 5px 0;
}

.btn-group .btn {
    min-width: 42px;
    font-size: 0.75rem;
    transition: opacity 0.2s ease-in-out;
}

/* Scrollbar (Finito) */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 10px;
}

/* Si el item de sortable no tiene contenido visible, que no ocupe espacio */
[as-sortable-item]:empty,
[as-sortable-item]>div:empty {
    display: none !important;
}

/* Botones de días deshabilitados */
.btn-group .btn:disabled {
    background-color: #e9ecef !important;
    border-color: #dee2e6 !important;
    color: #adb5bd !important;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Áreas de soltado mini para los grupos */
.container-ayudantes-mini {
    min-height: 35px;
    background: #fffcf0;
}

.container-alumnos-mini {
    min-height: 80px;
}

/* Efecto al tener cambios sin guardar */
.hay-cambios {
    border: 2px solid #ffc107 !important;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255, 193, 7, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
    }
}


/* Forzar que el modal y su fondo estén por encima de todo */
.modal {
    z-index: 2000 !important;
}

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

/* Asegurar que el body no bloquee el scroll del modal */
body.modal-open {
    overflow: hidden;
}

/* 1. Forzar visibilidad cuando el modal está abierto */
.modal.show,
.modal.in {
    display: block !important;
    opacity: 1 !important;
    background: rgba(0, 0, 0, 0.5);
    /* Esto crea el fondo oscuro manualmente si falla */
}

/* 2. Asegurar que el diálogo interno tenga presencia */
.modal-dialog {
    z-index: 2100 !important;
    margin-top: 100px;
    /* Para que no quede pegado arriba */
}

/* 3. El fondo oscuro (backdrop) */
.modal-backdrop.show,
.modal-backdrop.in {
    opacity: 0.5 !important;
    display: block !important;
}

/* 4. Ajuste por si el modal quedó con altura 0 */
.modal-content {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    min-height: 200px;
    /* Forzamos un alto mínimo para verlo */
}