/* =============================================================================
   Escuela PIB 2 - Evaluaciones
   ============================================================================= */

.tarjeta--evaluacion,
.tarjeta--intento {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    padding: var(--espacio-4);
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.tarjeta--evaluacion:hover,
.tarjeta--intento:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.tarjeta--evaluacion .tarjeta__encabezado,
.tarjeta--intento .tarjeta__encabezado {
    display: flex;
    gap: var(--espacio-2);
    flex-wrap: wrap;
}
.tarjeta--evaluacion .tarjeta__titulo,
.tarjeta--intento .tarjeta__titulo {
    margin: 0;
    font-size: var(--tamano-texto-lg);
    color: var(--color-marron-profundo);
}
.tarjeta--evaluacion .tarjeta__titulo a,
.tarjeta--intento .tarjeta__titulo a {
    color: inherit;
    text-decoration: none;
}
.tarjeta--evaluacion .tarjeta__titulo a:hover,
.tarjeta--intento .tarjeta__titulo a:hover {
    text-decoration: underline;
}
.tarjeta--evaluacion .tarjeta__meta,
.tarjeta--intento .tarjeta__meta {
    margin: 0;
    color: var(--color-texto-secundario);
    font-size: var(--tamano-texto-sm);
}
.tarjeta--evaluacion .tarjeta__acciones,
.tarjeta--intento .tarjeta__acciones {
    display: flex;
    gap: var(--espacio-2);
    margin-top: auto;
    padding-top: var(--espacio-2);
    border-top: 1px solid var(--color-borde);
}

/* Resultado */
.tarjeta--resultado {
    margin-top: var(--espacio-4);
    border-left: 6px solid var(--color-oliva);
}
.tarjeta--aprobado { border-left-color: #2f7a3f; background: linear-gradient(0deg, var(--color-superficie) 0%, #e8f5e9 100%); }
.tarjeta--reprobado { border-left-color: #c0392b; background: linear-gradient(0deg, var(--color-superficie) 0%, #fce8e6 100%); }
.kpi-grupo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--espacio-3);
    margin-top: var(--espacio-3);
}
.kpi {
    background: var(--color-crema);
    border-radius: var(--radio-sm);
    padding: var(--espacio-2) var(--espacio-3);
    text-align: center;
}
.kpi__etiqueta {
    display: block;
    color: var(--color-texto-secundario);
    font-size: var(--tamano-texto-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.kpi__valor {
    display: block;
    font-size: var(--tamano-texto-xl);
    color: var(--color-marron-profundo);
    font-weight: 600;
}
.kpi-mini {
    background: var(--color-crema);
    border-radius: var(--radio-sm);
    padding: var(--espacio-2);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.kpi-mini__valor {
    font-size: var(--tamano-texto-xl);
    font-weight: 700;
    color: var(--color-cacao);
}
.kpi-mini__etiqueta {
    font-size: var(--tamano-texto-xs);
    color: var(--color-texto-secundario);
}

/* Banco de preguntas */
.seccion-encabezado {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin-bottom: var(--espacio-3);
    color: var(--color-marron-profundo);
}
.seccion-encabezado h2 {
    margin: 0;
    font-size: var(--tamano-texto-lg);
}
.seccion-encabezado .badge {
    background: var(--color-beige);
    color: var(--color-marron-profundo);
    border-radius: var(--radio-completo);
    padding: 0 10px;
    font-size: var(--tamano-texto-sm);
}
.lista-preguntas {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
}
.pregunta-item {
    display: flex;
    gap: var(--espacio-3);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    padding: var(--espacio-3);
    align-items: flex-start;
}
.pregunta-item__agarre {
    cursor: grab;
    color: var(--color-texto-secundario);
    padding: 4px;
    border-radius: var(--radio-sm);
}
.pregunta-item__agarre:hover {
    background: var(--color-beige);
    color: var(--color-cacao);
}
.pregunta-item__agarre:active { cursor: grabbing; }
.pregunta-item__cuerpo {
    flex: 1;
    min-width: 0;
}
.pregunta-item__encabezado {
    display: flex;
    gap: var(--espacio-2);
    align-items: center;
    margin-bottom: var(--espacio-1);
}
.pregunta-item__numero {
    font-weight: 600;
    color: var(--color-cacao);
}
.pregunta-item__puntaje {
    color: var(--color-texto-secundario);
    font-size: var(--tamano-texto-sm);
}
.pregunta-item__enunciado {
    margin: 0 0 var(--espacio-2);
    color: var(--color-texto);
}
.pregunta-item__opciones {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pregunta-item__opciones li {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--tamano-texto-sm);
    color: var(--color-texto-secundario);
}
.pregunta-item__opciones .opcion--correcta {
    color: #2f7a3f;
    font-weight: 500;
}
.pregunta-item__acciones {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
}
.badge--tipo {
    background: var(--color-beige);
    color: var(--color-cacao);
    font-size: var(--tamano-texto-xs);
    padding: 2px 8px;
    border-radius: var(--radio-completo);
}
.badge--exito { background: #c8e6c9; color: #1b5e20; }
.badge--peligro { background: #ffcdd2; color: #b71c1c; }

.opcion-fila {
    align-items: center;
    gap: var(--espacio-2);
}
.opcion-check {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Intento del alumno */
.evaluacion-intento {
    max-width: 800px;
}
.cronometro {
    display: flex;
    align-items: center;
    gap: var(--espacio-1);
    background: var(--color-cacao);
    color: #fff;
    padding: var(--espacio-2) var(--espacio-3);
    border-radius: var(--radio-md);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.cronometro--critico {
    background: #c0392b;
    animation: cronometro-pulse 1s ease-in-out infinite;
}
@keyframes cronometro-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
.preguntas-intento {
    list-style: none;
    padding: 0;
    margin: var(--espacio-4) 0;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-4);
}
.pregunta-intento {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    padding: var(--espacio-4);
}
.pregunta-intento--correcta { border-left: 4px solid #2f7a3f; }
.pregunta-intento--incorrecta { border-left: 4px solid #c0392b; }
.pregunta-intento--pendiente { border-left: 4px solid #f0ad4e; }
.pregunta-intento__encabezado {
    display: flex;
    gap: var(--espacio-2);
    align-items: center;
    margin-bottom: var(--espacio-2);
}
.pregunta-intento__numero {
    font-weight: 600;
    color: var(--color-cacao);
    font-size: var(--tamano-texto-lg);
}
.pregunta-intento__puntaje {
    margin-left: auto;
    color: var(--color-texto-secundario);
    font-size: var(--tamano-texto-sm);
}
.pregunta-intento__enunciado {
    margin-bottom: var(--espacio-3);
}
.pregunta-intento__tu-respuesta {
    background: var(--color-beige);
    padding: var(--espacio-2) var(--espacio-3);
    border-radius: var(--radio-sm);
    margin-top: var(--espacio-2);
}
.pregunta-intento__retro {
    background: var(--color-crema);
    padding: var(--espacio-2) var(--espacio-3);
    border-radius: var(--radio-sm);
    margin-top: var(--espacio-2);
    border-left: 3px solid var(--color-oliva);
}
.opciones-intento {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
}
.opciones-intento label {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    padding: var(--espacio-2) var(--espacio-3);
    background: var(--color-beige);
    border-radius: var(--radio-sm);
    cursor: pointer;
    transition: background 100ms ease;
}
.opciones-intento label:hover {
    background: var(--color-crema);
}
.opciones-intento input[type="radio"] {
    margin: 0;
}
.campo--texto { width: 100%; }
.formulario__acciones--sticky {
    position: sticky;
    bottom: 0;
    background: var(--color-superficie);
    padding: var(--espacio-3) 0;
    border-top: 1px solid var(--color-borde);
    margin-top: var(--espacio-4);
}
.lista-info {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
}
.lista-info li {
    padding: var(--espacio-1) 0;
    color: var(--color-texto);
}
.descripcion-evaluacion {
    padding: var(--espacio-3);
    border-left: 4px solid var(--color-oliva);
    margin-top: var(--espacio-3);
}

/* Responsive */
@media (max-width: 600px) {
    .kpi-grupo { grid-template-columns: 1fr 1fr; }
    .pregunta-item { flex-direction: column; }
    .pregunta-item__acciones { flex-direction: row; }
    .formulario__acciones--sticky { flex-direction: column; }
    .formulario__acciones--sticky .boton { width: 100%; }
}