/* ═══════════════════════════════════════════════
   FORO / CREAR EVALUACIÓN — teacher
   ═══════════════════════════════════════════════ */

.selectAltura {
    display: block;
    height: 46px;
    width: 100%;
}

/* ── Tarjeta principal ── */
.foro-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    overflow: hidden;
    margin-bottom: 20px;
}

.foro-header {
    background: linear-gradient(135deg, #1976D2, #1565C0);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
}

.foro-header-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.foro-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.foro-header p {
    margin: 2px 0 0;
    font-size: 11px;
    opacity: .85;
}

.foro-body {
    padding: 24px 28px;
}

/* ── Etiquetas del form ── */
.foro-label {
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
    display: block;
    font-size: 13px;
}

.foro-input {
    height: 44px;
    border-radius: 8px;
    border: 1px solid #D1D5DB;
    font-size: 13px;
    width: 100%;
    padding: 0 12px;
    box-sizing: border-box;
    transition: border-color .2s;
}

.foro-input:focus {
    border-color: #1976D2;
    box-shadow: 0 0 0 3px rgba(25,118,210,.12);
    outline: none;
}

.foro-group {
    margin-bottom: 18px;
}

/* ── Botones tipo de pregunta ── */
.foro-tipos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

@media(max-width:600px) {
    .foro-tipos { grid-template-columns: 1fr; }
}

.foro-tipo-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 12px;
    border-radius: 12px;
    border: 2px solid #E8EDF5;
    background: #F8FBFF;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #374A6D;
    transition: all .2s;
    text-decoration: none;
}

.foro-tipo-btn i {
    font-size: 22px;
    color: #1976D2;
}

.foro-tipo-btn:hover {
    border-color: #1976D2;
    background: #EEF4FF;
    color: #1565C0;
    box-shadow: 0 4px 14px rgba(25,118,210,.12);
    text-decoration: none;
}

/* ── Acciones (Guardar / Visualizar) ── */
.foro-actions {
    display: flex;
    gap: 12px;
    padding-top: 4px;
    flex-wrap: wrap;
}

.foro-btn-save {
    background: #1976D2;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 22px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: opacity .2s;
}

.foro-btn-save:hover { opacity: .87; }

.foro-btn-view {
    background: #546E7A;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 22px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: opacity .2s;
}

.foro-btn-view:hover { opacity: .87; }


/* ═══════════════════════════════════════════════
   MODALES LMS
   ═══════════════════════════════════════════════ */

.lms-modal {
    border-radius: 14px;
    border: none;
    box-shadow: 0 10px 35px rgba(0,0,0,.15);
    overflow: hidden;
}

.lms-header {
    background: linear-gradient(135deg, #1976D2, #1565C0);
    padding: 16px 24px;
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lms-header h4 {
    font-weight: 700;
    color: #fff;
    margin: 0;
    font-size: 15px;
    order: 1;
}

.lms-header .close {
    color: #fff;
    opacity: .85;
    font-size: 20px;
    order: 2;
}

.lms-header .close:hover { opacity: 1; }

.lms-body {
    padding: 28px 32px;
    background: #fff;
}

.lms-footer {
    padding: 14px 24px;
    border-top: 1px solid #E8EDF5;
    background: #F8FBFF;
}

/* ── Form groups ── */
.lms-group {
    margin-bottom: 20px;
}

.lms-group label {
    font-weight: 600;
    margin-bottom: 7px;
    display: block;
    color: #374151;
    font-size: 13px;
}

.lms-input {
    height: 44px;
    border-radius: 8px;
    border: 1px solid #D1D5DB;
    box-shadow: none;
    font-size: 13px;
}

.lms-input:focus {
    border-color: #1976D2;
    box-shadow: 0 0 0 3px rgba(25,118,210,.12);
}

/* ── File upload area ── */
.lms-file-area {
    border: 2px dashed #D1D5DB;
    border-radius: 10px;
    padding: 14px 16px;
    text-align: center;
    background: #FAFAFA;
    cursor: pointer;
    transition: all .2s;
    position: relative;
}

.lms-file-area:hover {
    border-color: #1976D2;
    background: #EEF4FF;
}

.lms-file-area input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.lms-file-icon { font-size: 22px; color: #90A4AE; margin-bottom: 4px; }
.lms-file-text { font-size: 12px; color: #78909C; }

.lms-preview {
    max-width: 160px;
    max-height: 140px;
    width: auto;
    height: auto;
    margin-top: 10px;
    border-radius: 8px;
    border: 1px solid #E0E0E0;
    object-fit: contain;
    display: block;
}

/* ── Radio Verdadero/Falso ── */
.lms-radio-group {
    display: flex;
    gap: 14px;
    margin-top: 8px;
}

.lms-radio-card {
    flex: 1;
    padding: 14px 18px;
    border: 2px solid #E8EDF5;
    border-radius: 10px;
    cursor: pointer;
    transition: all .2s;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    color: #374A6D;
    background: #F8FBFF;
    position: relative;
}

.lms-radio-card input { display: none; }

.lms-radio-card:hover {
    border-color: #1976D2;
    background: #EEF4FF;
}

.lms-radio-card:has(input:checked) {
    border-color: #1976D2;
    background: linear-gradient(135deg, #EEF4FF, #F4F8FF);
    box-shadow: 0 0 0 3px rgba(25,118,210,.18);
    color: #1565C0;
}

.lms-radio-card:has(input:checked)::after {
    content: "✓";
    position: absolute;
    top: 8px;
    right: 10px;
    width: 18px;
    height: 18px;
    background: #1976D2;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Grid opciones múltiple ── */
.lms-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}

@media(max-width:600px) {
    .lms-options-grid { grid-template-columns: 1fr; }
}

.lms-option-card {
    border: 2px solid #E8EDF5;
    border-radius: 12px;
    padding: 14px 16px;
    background: #F8FBFF;
    transition: .2s ease;
    position: relative;
}

.lms-option-card:hover {
    border-color: #1976D2;
    background: #EEF4FF;
}

/* Verde cuando esa opción es la respuesta correcta */
.lms-option-card:has(input[type="radio"]:checked) {
    border-color: #2E7D32;
    background: linear-gradient(135deg, #F1FFF3, #F0FDF4);
    box-shadow: 0 0 0 3px rgba(46,125,50,.15);
}

.lms-option-card:has(input[type="radio"]:checked)::after {
    content: "✓ Correcta";
    position: absolute;
    top: 10px;
    right: 12px;
    background: #2E7D32;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
}

.lms-option-header {
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #374A6D;
    cursor: pointer;
}

.lms-option-header input[type="radio"] {
    accent-color: #2E7D32;
    width: 16px;
    height: 16px;
}

/* ── Banco preguntas modal ── */
.modal-fullscreen-custom {
    width: 90%;
    max-width: 1200px;
    margin: 40px auto;
}

.modal-header-custom {
    background: linear-gradient(135deg, #1976D2, #1565C0);
    color: #fff;
    border-bottom: none;
}

.modal-body-custom {
    max-height: 75vh;
    overflow-y: auto;
    padding: 25px;
    background: #F4F6F9;
}

/* ── Banco preguntas cards ── */
.pregunta-card-admin {
    background: #fff;
    padding: 18px;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,.05);
    border-left: 4px solid #1976D2;
    transition: .2s;
    margin-bottom: 18px;
}

.pregunta-card-admin:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

.pregunta-titulo {
    font-size: 14px;
    color: #263238;
    font-weight: 600;
    line-height: 1.6;
}

.img-admin-principal {
    max-height: 180px;
    max-width: 100%;
    border-radius: 10px;
    border: 1px solid #E0E0E0;
    object-fit: contain;
}

.img-admin-opcion {
    max-height: 90px;
    border-radius: 8px;
    margin-top: 5px;
    object-fit: contain;
}

.opciones-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.opcion-admin {
    background: #F8FBFF;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    border: 1px solid #E8EDF5;
    color: #374151;
}

.respuesta-admin {
    background: #E8F5E9;
    color: #2E7D32;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.acciones-pregunta {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.pregunta-card-admin .badge {
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 20px;
}