/*
 * EduTec Manager — CSS Planes de Estudio y Mapa Curricular
 * Archivo: assets/css/c-planes-estudio.css
 * Versión: 1.0.0
 */

/* ============================================================
   PESTAÑAS PRINCIPALES
============================================================ */
.etm-tabs {
    display:    flex;
    flex-wrap:  wrap;
    gap:        4px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--etm-gray-200);
    padding-bottom: 0;
}

.etm-tab {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       9px 16px;
    font-size:     13px;
    font-weight:   500;
    color:         var(--etm-gray-500);
    background:    transparent;
    border:        none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    cursor:        pointer;
    transition:    color .15s, border-color .15s;
}

.etm-tab:hover {
    color: var(--etm-gray-700);
    background:    #C7E6A8;
}

.etm-tab.active {
    color:        var(--etm-p-primario);
    border-bottom-color: var(--etm-p-primario);
     background:    #B6D498;
}


.etm-tab-content {
    display: none;
}

.etm-tab-content.active {
    display: block;
}

/* ============================================================
   SUB-PESTAÑAS
============================================================ */
.etm-subtabs {
    display:       flex;
    gap:           4px;
    margin-bottom: 16px;
    flex-wrap:     wrap;
}

.etm-subtab {
    padding:       6px 14px;
    font-size:     12px;
    font-weight:   500;
    color:         var(--etm-gray-600);
    background:    var(--etm-gray-100);
    border:        1px solid var(--etm-gray-200);
    border-radius: var(--etm-radius);
    cursor:        pointer;
    transition:    background .15s, color .15s;
}

.etm-subtab:hover {
    background: var(--etm-gray-200);
}

.etm-subtab.active {
    background:   var(--etm-p-primario);
    color:        #fff;
    border-color: var(--etm-p-primario);
}

.etm-subtab-content {
    display: none;
}

.etm-subtab-content.active {
    display: block;
}

/* ============================================================
   ACORDEÓN
============================================================ */
.etm-accordion {
    border:        1px solid var(--etm-gray-200);
    border-radius: var(--etm-radius);
    margin-bottom: 8px;
    overflow:      hidden;
}

.etm-accordion-header {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     12px 16px;
    background:  var(--etm-p-primario);
    color:       #fff;
    cursor:      pointer;
    font-size:   14px;
    font-weight: 500;
    user-select: none;
}

.etm-accordion-header .etm-acc-icon {
    transition: transform .2s;
    font-size:  12px;
}

.etm-accordion-header .etm-badge {
    background: rgba(255,255,255,.2);
    color:      #fff;
}

.etm-accordion-body {
    display:    none;
    padding:    16px;
    background: #fff;
}

/* ============================================================
   SUBMÓDULOS Y MATERIAS ÁREA — ITEMS DINÁMICOS
============================================================ */
.etm-submodulo-item {
    border:        1px solid var(--etm-gray-200);
    border-radius: var(--etm-radius);
    padding:       14px;
    margin-bottom: 10px;
    background:    var(--etm-gray-50);
}

.etm-submodulo-header {
    display:     flex;
    align-items: center;
    gap:         8px;
    margin-bottom: 4px;
    font-size:   13px;
}

/* ============================================================
   FORMATO CSV
============================================================ */
.etm-csv-format {
    background:    var(--etm-gray-50);
    border:        1px solid var(--etm-gray-200);
    border-radius: var(--etm-radius);
    padding:       14px 16px;
    font-size:     13px;
    margin-bottom: 4px;
}

.etm-csv-format code {
    display:    block;
    margin-top: 6px;
    font-size:  12px;
}

.etm-csv-ejemplo {
    margin-top: 10px;
}

.etm-csv-ejemplo span {
    font-size:   12px;
    color:       var(--etm-gray-500);
    display:     block;
    margin-bottom: 4px;
}

.etm-csv-ejemplo pre {
    background:    #fff;
    border:        1px solid var(--etm-gray-200);
    border-radius: 4px;
    padding:       8px 12px;
    font-size:     11px;
    margin:        0;
    overflow-x:    auto;
    color:         var(--etm-gray-700);
}

/* ============================================================
   MODAL
============================================================ */
.etm-modal-overlay {
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,.5);
    display:    flex;
    align-items: center;
    justify-content: center;
    z-index:    9999;
}

.etm-modal {
    background:    #fff;
    border-radius: var(--etm-radius-lg);
    padding:       24px;
    max-width:     520px;
    width:         90%;
    box-shadow:    var(--etm-shadow-md);
}

.etm-modal-header {
    margin-bottom: 14px;
}

.etm-modal-header h3 {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   16px;
    color:       var(--etm-gray-800);
    margin:      0;
}

.etm-modal-header h3 i {
    color: var(--etm-warning);
}

.etm-modal-body {
    margin-bottom: 18px;
    font-size:     14px;
    color:         var(--etm-gray-700);
    line-height:   1.6;
}

.etm-modal-footer {
    display:     flex;
    gap:         8px;
    justify-content: flex-end;
}

/* ============================================================
   GAP HELPER
============================================================ */
.etm-gap-8 { gap: 8px; }

/* ============================================================
   MAPA CURRICULAR
============================================================ */
.etm-mapa-header {
    margin-bottom: 16px;
}

.etm-mapa-header h3 {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   16px;
    color:       var(--etm-gray-800);
    margin:      0;
}

.etm-mapa-semestre .etm-mapa-accordion-header {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     12px 16px;
    background:  var(--etm-p-primario);
    color:       #fff;
    cursor:      pointer;
    font-size:   14px;
    font-weight: 600;
    user-select: none;
}

.etm-mapa-accordion-body {
    display:    none;
    background: #fff;
}

.etm-mapa-seccion {
    border-bottom: 1px solid var(--etm-gray-100);
    padding:       12px 16px;
}

.etm-mapa-seccion:last-child {
    border-bottom: none;
}

.etm-mapa-seccion-titulo {
    display:       flex;
    align-items:   center;
    gap:           6px;
    font-size:     13px;
    font-weight:   600;
    margin-bottom: 10px;
    padding:       6px 10px;
    border-radius: var(--etm-radius);
}

.etm-mapa-basicas-titulo {
    background: var(--etm-blue-light);
    color:      var(--etm-blue-dark);
}

.etm-mapa-area-titulo {
    background: var(--etm-teal-light);
    color:      var(--etm-teal);
}

.etm-mapa-modulo-titulo {
    background: var(--etm-warning-light);
    color:      var(--etm-warning);
}

.etm-mapa-tabla {
    font-size: 13px;
}

.etm-mapa-tabla code {
    font-size: 11px;
}