/* ==========================================================
   EduTec Manager — Reportes de Conducta (Conducta)
   Archivo: assets/css/c-cd-reportes.css
   El bloque "Sugerencias" replica exactamente las clases de
   c-datos-alumnos.css (.etm-sug-*) para que el buscador se
   vea idéntico al de [etm_datos_alumnos].
   ========================================================== */

.etm-cd-reportes-wrap {
    width: 100% !important;
}

.etm-cdr-grupo-field {
    margin-bottom: 20px !important;
}

/* ----------------------------------------------------------
   Buscador con sugerencias (idéntico a [etm_datos_alumnos])
---------------------------------------------------------- */
.etm-alumnos-buscador-wrap {
    position: relative !important;
}

.etm-alumnos-sugerencias {
    position:      absolute !important;
    top:           100% !important;
    left:          0 !important;
    right:         auto !important;
    width:         100% !important;
    max-width:     1200px !important;
    background:    #fff !important;
    border:        1px solid var(--etm-gray-200, #e2e8f0) !important;
    border-radius: var(--etm-radius, 8px) !important;
    box-shadow:    0 8px 24px rgba(0,0,0,.12) !important;
    z-index:       1000 !important;
    max-height:    260px !important;
    overflow-y:    auto !important;
    margin-top:    4px !important;
}

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

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

.etm-sug-item-alumno {
    display:     flex !important;
    align-items: center !important;
    gap:         10px !important;
    padding:     8px 12px !important;
}

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

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

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

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

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

/* ----------------------------------------------------------
   Alumno seleccionado (idéntico a .etm-alumno-header de
   [etm_datos_alumnos])
---------------------------------------------------------- */
.etm-cd-reportes-wrap .etm-alumno-header {
    display:        none;
    gap:            16px !important;
    align-items:    flex-start !important;
    margin-top:     20px !important;
    margin-bottom:  16px !important;
    padding-bottom: 14px !important;
    border-bottom:  1px solid var(--etm-gray-200, #e2e8f0) !important;
}

.etm-cd-reportes-wrap .etm-alumno-header.etm-cdr-mostrar {
    display: flex !important;
}

.etm-cd-reportes-wrap .etm-alumno-foto-wrap {
    flex-shrink: 0 !important;
}

.etm-cd-reportes-wrap .etm-alumno-foto {
    width:         90px !important;
    height:        110px !important;
    object-fit:    cover !important;
    border-radius: var(--etm-radius, 8px) !important;
    border:        1px solid var(--etm-gray-200, #e2e8f0) !important;
    background:    var(--etm-gray-100, #f1f5f9) !important;
}

.etm-cdr-alumno-nombre {
    font-weight: 700 !important;
    font-size:   16px !important;
}

.etm-cdr-alumno-grupo {
    color:      var(--etm-gray-600, #475569) !important;
    font-size:  14px !important;
    margin-top: 4px !important;
}

/* ----------------------------------------------------------
   Sección de datos del reporte (causa + consecuencias)
---------------------------------------------------------- */
.etm-cdr-datos-reporte-section {
    margin-top: 24px !important;
    padding-top: 20px !important;
    border-top: 1px solid var(--etm-gray-200, #e2e8f0) !important;
}

.etm-cdr-required {
    color: var(--etm-danger, #dc2626) !important;
}

.etm-cdr-consecuencias-wrap {
    margin-top: 16px !important;
}

.etm-cdr-consecuencia-bloque {
    margin-top: 12px !important;
    padding: 12px !important;
    border: 1px solid var(--etm-gray-200, #e2e8f0) !important;
    border-radius: var(--etm-radius, 8px) !important;
}

.etm-cdr-check-label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

.etm-cdr-check-label input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
    accent-color: var(--etm-p-primario) !important;
}

.etm-cdr-dias-wrap {
    margin-top: 10px !important;
    padding-left: 26px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.etm-cdr-dias-wrap label {
    font-weight: 400 !important;
    white-space: nowrap !important;
}

.etm-cdr-dias-wrap input[type="number"] {
    width: 90px !important;
}

/* ----------------------------------------------------------
   Info del profesor
---------------------------------------------------------- */
.etm-cdr-profesor-info-section {
    margin-top: 20px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--etm-gray-200, #e2e8f0) !important;
    font-size: 14px !important;
    color: var(--etm-gray-600, #475569) !important;
}