/* ==========================================
   1. COLORES PRINCIPALES DEL SISTEMA
   ========================================== */

:root {
    --azul: #f7a428;
    --naranja: #f5a623;
    --borde: #dce4ee;
    --texto: #172638;
}


/* ==========================================
   2. CONFIGURACIÓN GENERAL
   ========================================== */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #f4f7fb;
    color: var(--texto);
    font-family: Arial, Helvetica, sans-serif;
}


/* ==========================================
   3. ENCABEZADO
   ========================================== */

header {
    background: var(--azul);
    color: white;
    padding: 22px 0;
}

header h1 {
    margin: 0;
    font-size: 25px;
}

header p {
    margin: 7px 0 0;
    color: #dfebf8;
}


/* ==========================================
   4. CONTENEDOR PRINCIPAL
   ========================================== */

main,
header > div {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 22px;
}


/* ==========================================
   5. MENÚ DE NAVEGACIÓN
   ========================================== */

nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 24px 0;
}


/* ==========================================
   6. BOTONES
   ========================================== */

/* Botones principales */

a.btn,
button {
    display: inline-block;
    background: var(--azul);
    color: white;
    border: 0;
    border-radius: 7px;
    padding: 11px 17px;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
}

/* Botones secundarios */

a.btn.sec {
    background: #e8eff8;
    color: var(--azul);
}

/* Efecto al pasar el mouse */

button:hover,
a.btn:hover {
    filter: brightness(1.09);
}


/* ==========================================
   7. TARJETAS Y CONTENEDORES
   ========================================== */

.card {
    border: 1px solid var(--borde);
    background: white;
    padding: 22px;
    border-radius: 12px;
    margin: 20px 0;
    box-shadow: 0 2px 10px #153d6510;
}


/* ==========================================
   8. CUADRÍCULA DE TARJETAS
   ========================================== */

.grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(245px, 1fr)
    );
    gap: 16px;
}

.grid .card {
    margin: 0;
}


/* ==========================================
   9. TÍTULOS
   ========================================== */

h2 {
    margin-top: 0;
    font-size: 21px;
}

h3 {
    margin-top: 0;
}


/* ==========================================
   10. FORMULARIOS
   ========================================== */

/* Etiquetas */

label {
    display: block;
    font-weight: bold;
    margin: 14px 0 7px;
}

/* Campos de texto y listas */

input,
select {
    display: block;
    width: 100%;
    padding: 11px;
    border: 1px solid #bacbdb;
    border-radius: 7px;
    font-size: 15px;
}

/* Campo para subir archivos */

input[type=file] {
    background: white;
}


/* ==========================================
   11. TABLAS
   ========================================== */

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

/* Celdas y encabezados */

th,
td {
    text-align: left;
    border-bottom: 1px solid var(--borde);
    padding: 10px;
    vertical-align: top;
}

/* Encabezados de tabla */

th {
    background: #f1f5fa;
}


/* ==========================================
   12. MENSAJES Y ALERTAS
   ========================================== */

/* Alertas generales */

.alert {
    border-radius: 7px;
    padding: 13px 16px;
    background: #fff0df;
    color: #763e00;
    margin: 15px 0;
}

/* Mensajes de éxito */

.success {
    background: #e5f6eb;
    color: #216b3b;
}


/* ==========================================
   13. TEXTOS SECUNDARIOS
   ========================================== */

.muted {
    color: #62778d;
    font-size: 14px;
}


/* ==========================================
   14. NÚMEROS Y ESTADÍSTICAS
   ========================================== */

.num {
    font-size: 32px;
    font-weight: bold;
    color: var(--azul);
    margin: 10px 0;
}


/* ==========================================
   15. CONTENEDORES CON DESPLAZAMIENTO
   ========================================== */

.wrap {
    overflow-x: auto;
}


/* ==========================================
   16. PIE DE PÁGINA
   ========================================== */

footer {
    max-width: 1080px;
    margin: 40px auto;
    padding: 0 22px;
    color: #64738a;
    font-size: 13px;
}


/* ==========================================
   ENCABEZADO DEL SISTEMA
   ========================================== */

.cabecera {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* ==========================================
   LOGO DE LA UNIVERSIDAD
   ========================================== */

.cabecera-logo {
    width: 85px;
    height: 85px;
    background: white;
    border-radius: 8px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
    flex-shrink: 0;
}

/* Imagen del logo */

.cabecera-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==========================================
   TEXTO DEL ENCABEZADO
   ========================================== */

.cabecera-texto h1 {
    margin: 0;
    font-size: 25px;
    color: white;
}

.cabecera-texto p {
    margin: 7px 0 0;
    font-size: 14px;
    color: white;
}


@media (max-width: 600px) {

    .cabecera {
        gap: 12px;
    }

    .cabecera-logo {
        width: 65px;
        height: 65px;
    }

    .cabecera-texto h1 {
        font-size: 20px;
    }

    .cabecera-texto p {
        font-size: 12px;
    }
}

.cabecera { display:flex; align-items:center; gap:20px; }
.cabecera-logo { width:85px; height:85px; background:#fff; border-radius:8px; display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.cabecera-logo img { width:100%; height:100%; object-fit:contain; }
.cabecera-texto h1 { margin:0; font-size:25px; color:white; }
.cabecera-texto p { margin:7px 0 0; color:#dfebf8; font-size:14px; }
@media (max-width:600px) {
    .cabecera { gap:12px; }
    .cabecera-logo { width:65px; height:65px; }
    .cabecera-texto h1 { font-size:20px; }
    .cabecera-texto p { font-size:12px; }
}

/* ==========================================
   DETALLE DE EVALUACIONES
   ========================================== */

.detalle-evaluacion {
    width: 100%;
    min-width: 180px;
}

/* Botón para desplegar la evaluación */

.detalle-evaluacion summary {
    cursor: pointer;
    color: #173b64;
    font-weight: bold;
    padding: 8px;
}

.detalle-evaluacion summary:hover {
    color: #f5a623;
}


/* ==========================================
   CONTENIDO DE LA EVALUACIÓN
   ========================================== */

.contenido-evaluacion {
    margin-top: 15px;
    padding: 15px;
    background: #f8fafc;
    border: 1px solid #dce4ee;
    border-radius: 8px;
    min-width: 320px;
    max-width: 520px;
}

.contenido-evaluacion h3 {
    color: #173b64;
    font-size: 15px;
    margin-top: 20px;
    margin-bottom: 12px;
}

.contenido-evaluacion h3:first-child {
    margin-top: 0;
}


/* ==========================================
   TABLAS DE RESPUESTAS
   ========================================== */

.tabla-detalle {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.tabla-detalle th,
.tabla-detalle td {
    padding: 10px;
    border-bottom: 1px solid #dce4ee;
    text-align: left;
    overflow-wrap: anywhere;
}

.tabla-detalle th {
    background: #edf3f9;
    color: #173b64;
}


/* ==========================================
   COMENTARIOS
   ========================================== */

.comentario-evaluacion {
    background: white;
    padding: 12px;
    border: 1px solid #dce4ee;
    border-radius: 7px;
    font-size: 14px;
    overflow-wrap: anywhere;
}


/* ==========================================
   PROMEDIO FINAL
   ========================================== */

.promedio-evaluacion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    background: #e8eff8;
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px;
}

.promedio-evaluacion strong {
    color: #173b64;
}

.promedio-evaluacion span {
    color: #173b64;
    font-size: 24px;
    font-weight: bold;
}


@media (max-width: 600px) {

    .contenido-evaluacion {
        min-width: 280px;
        padding: 10px;
    }

    .tabla-detalle {
        font-size: 12px;
    }

}