/*
 * EduTec Manager — CSS Datos Alumnos
 * Archivo: assets/css/c-datos-alumnos.css
 * Versión: 1.0.4
 */

/* Pestaña de peligro */
.etm-tab-danger { color: var(--etm-danger) !important; }
.etm-tab-danger.active { border-bottom-color: var(--etm-danger) !important; color: var(--etm-danger) !important; }

/* Buscador */
.etm-alumnos-buscador-wrap { position: relative; }

.etm-alumnos-sugerencias {
    position:      absolute;
    top:           100%;
    left:          0;
    right:         0;
    max-width:     480px;
    background:    #fff;
    border:        1px solid var(--etm-gray-200);
    border-radius: var(--etm-radius);
    box-shadow:    var(--etm-shadow-md);
    z-index:       1000;
    max-height:    260px;
    overflow-y:    auto;
}

.etm-sug-item {
    padding:    10px 14px;
    font-size:  13px;
    cursor:     pointer;
    border-bottom: 1px solid var(--etm-gray-100);
    transition: background .1s;
}

.etm-sug-item:last-child { border-bottom: none; }
.etm-sug-item:hover { background: var(--etm-blue-light); }
.etm-sug-empty { color: var(--etm-gray-400); cursor: default; }
.etm-sug-empty:hover { background: transparent; }

/* Panel alumno */
.etm-alumno-header {
    display:     flex;
    gap:         16px;
    align-items: flex-start;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--etm-gray-200);
}

.etm-alumno-foto-wrap {
    flex-shrink: 0;
}

.etm-alumno-foto {
    width:         90px;
    height:        110px;
    object-fit:    cover;
    border-radius: var(--etm-radius);
    border:        1px solid var(--etm-gray-200);
    background:    var(--etm-gray-100);
}

.etm-alumno-header-datos {
    flex: 1;
    min-width: 0;
}

.etm-wa-link {
    color:           #16a34a;
    text-decoration: none;
    margin-left:     6px;
    font-size:       13px;
}

.etm-wa-link:hover { text-decoration: underline; }

/* Contactos */
.etm-familia-datos {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.etm-contacto-row {
    display:     grid;
    grid-template-columns: 120px 1fr 1fr;
    gap:         8px;
    font-size:   13px;
    padding:     6px 8px;
    background:  var(--etm-gray-50);
    border-radius: var(--etm-radius);
    align-items: center;
}

.etm-contacto-label {
    font-weight: 600;
    color:       var(--etm-gray-600);
    font-size:   12px;
}

/* CSV informe */
.etm-csv-informe-lista {
    background:    var(--etm-warning-light);
    border:        1px solid #fde68a;
    border-radius: var(--etm-radius);
    padding:       12px 16px;
    font-size:     13px;
}

.etm-csv-informe-lista ul {
    margin:      6px 0 0;
    padding-left: 18px;
    color:       var(--etm-warning);
}

.etm-csv-informe-lista li { margin-bottom: 3px; }

/* Sugerencias con foto */
.etm-sug-item-alumno {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     8px 12px;
}

.etm-sug-foto {
    width:         36px;
    height:        44px;
    object-fit:    cover;
    border-radius: 4px;
    border:        1px solid var(--etm-gray-200);
    flex-shrink:   0;
    background:    var(--etm-gray-100);
}

.etm-sug-info {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    min-width:      0;
}

.etm-sug-nombre {
    font-size:   13px;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

.etm-sug-meta {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   11px;
}

.etm-sug-grupo {
    background:    var(--etm-blue-light);
    color:         var(--etm-blue);
    border-radius: 4px;
    padding:       1px 6px;
    font-weight:   600;
    font-size:     11px;
}

/* Sugerencias con foto */
.etm-sug-item-con-foto {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     8px 12px;
}

.etm-sug-foto {
    width:         38px;
    height:        46px;
    object-fit:    cover;
    border-radius: 4px;
    border:        1px solid var(--etm-gray-200);
    flex-shrink:   0;
    background:    var(--etm-gray-100);
}

.etm-sug-datos {
    flex:        1;
    min-width:   0;
    font-size:   13px;
    line-height: 1.4;
}