/* Tabs Container - Mantenemos el estilo base */
.nav-tabs {
    border-bottom: 2px solid var(--theme-border);
    margin-bottom: 1.5rem;
    display: flex;
    gap: 0.5rem;
}

/* Estilos base para todos los tabs */
.nav-tabs .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.75rem 1.25rem;
    font-weight: 500;
    transition: all 0.3s ease;
    margin-bottom: -2px;
    background: transparent;
    color: #6c757d;
}

/* Hover general para todos los tabs */
.nav-tabs .nav-link:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Estilos específicos para cada grado */
/* 1° Grado - Azul */
#grade1-tab.active {
    color: #0d6efd;
    border-bottom-color: #0d6efd;
    background-color: rgba(13, 110, 253, 0.1);
}

/* 2° Grado - Verde */
#grade2-tab.active {
    color: #198754;
    border-bottom-color: #198754;
    background-color: rgba(25, 135, 84, 0.1);
}

/* 3° Grado - Morado */
#grade3-tab.active {
    color: #6f42c1;
    border-bottom-color: #6f42c1;
    background-color: rgba(111, 66, 193, 0.1);
}

/* 4° Grado - Naranja */
#grade4-tab.active {
    color: #fd7e14;
    border-bottom-color: #fd7e14;
    background-color: rgba(253, 126, 20, 0.1);
}

/* 5° Grado - Rojo */
#grade5-tab.active {
    color: #dc3545;
    border-bottom-color: #dc3545;
    background-color: rgba(220, 53, 69, 0.1);
}

/* 6° Grado - Cyan */
#grade6-tab.active {
    color: #0dcaf0;
    border-bottom-color: #0dcaf0;
    background-color: rgba(13, 202, 240, 0.1);
}

/* Efectos hover específicos para cada grado */
#grade1-tab:hover { color: #0d6efd; }
#grade2-tab:hover { color: #198754; }
#grade3-tab:hover { color: #6f42c1; }
#grade4-tab:hover { color: #fd7e14; }
#grade5-tab:hover { color: #dc3545; }
#grade6-tab:hover { color: #0dcaf0; }

/* Aseguramos que el contenido del tab activo tenga un borde superior del mismo color */
.tab-content > .active {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 1.5rem;
}
/* 7° Grado - Azul */
#septimo-tab.active {
    color: #0d6efd;
    border-bottom-color: #0d6efd;
    background-color: rgba(13, 110, 253, 0.1);
}

/* 8° Grado - Verde */
#octavo-tab.active {
    color: #198754;
    border-bottom-color: #198754;
    background-color: rgba(25, 135, 84, 0.1);
}

/* 9° Grado - Morado */
#noveno-tab.active {
    color: #6f42c1;
    border-bottom-color: #6f42c1;
    background-color: rgba(111, 66, 193, 0.1);
}

/* Efectos hover específicos para cada grado */
#septimo-tab:hover { color: #0d6efd; }
#octavo-tab:hover { color: #198754; }
#noveno-tab:hover { color: #6f42c1; }