.pantalla-examen {
    padding: 28px 20px 36px;

    background-color:
        var(--color-fondo-secundario);
}

.cont-examen {
    width: min(
        100%,
        var(--ancho-contenido)
    );

    margin: 0 auto;
}

/* =========================
   Encabezado del examen
========================= */

.head-examen {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: start;
    padding: 18px 20px;

    border-radius:
        var(--radio-mediano);

    background-color: white;

    box-shadow:
        var(--sombra-suave);
}

.head-div-resp {
    width: fit-content;
    margin: 0 16px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 20px;
}

.head-div-tiemp {
    width: fit-content;
    margin: 0 0 0 0;
    padding: 0;
    display: flex;
}

.head-examen-item {
    display: flex;
    flex-direction: column;
    width: fit-content;
    text-align: center;
    background-color: transparent;
}

.head-examen-titulo,
.head-examen-valor {
    display: block;
    background-color: transparent;
}

.head-examen-titulo {
    margin-bottom: 5px;
    /*
    color:
        var(--color-texto-secundario);
*/
    font-size: 1rem;
    font-weight: 600;
}

.head-examen-valor {
    font-size: 1.5rem;
    font-weight: 600;
    font-variant-numeric:
        tabular-nums;
}

.c-verde {
    color: green;
}

.c-rojo {
    color: red;
}

.c-gris {
    color: #5b5b5b;;
}

.temporizador {
    font-size: 1.6rem;
    font-weight: 600;
    font-variant-numeric:
        tabular-nums;
}

/* =========================
   Mensaje de la respuesta
========================= */

.cont-estado-pregunta {
    height: 24px;
    padding: 0;
    display: grid;
    place-items: center;

    margin: 18px 0;
}

.txt-estado-pregunta {
    margin: 0;

    font-size: 1.3rem;
    font-weight: 700;

    text-align: center;
}

.txt-estado-pregunta.correcta {
    color:
        var(--color-correcto);
}

.txt-estado-pregunta.incorrecta {
    color:
        var(--color-incorrecto);
}

.txt-estado-pregunta.tiempo-agotado {
    color:
        var(--color-advertencia);
}

/* =========================
   Swiper
========================= */

.cont-preguntas {
    width: 100%;
}

/* =========================
   Tarjeta de pregunta
========================= */

.card-pregunta {
    padding: 20px;
    max-height: 550px;
    overflow-y:scroll;
    border: 1px solid
        var(--color-borde);

    border-radius:
        10px;

    background-color: #fff;

    box-shadow:
        var(--sombra-suave);
}

/* Personalizar el scrollbar */
 .card-pregunta::-webkit-scrollbar {
    width: 5px; /* Ancho del scroll */
  }

  .card-pregunta::-webkit-scrollbar-thumb {
    background-color: #090136; /* Color del pulgar (la parte que se arrastra) */
    border-radius: 10px; /* Bordes redondeados */
  }

  .card-pregunta::-webkit-scrollbar-track {
    background-color: #e0e0e0; /* Color de fondo del área del scroll */
    border-radius: 10px;
  }

.card-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.tag-pregunta,
.tag-materia {
    display: inline-flex;
    align-items: center;

    min-height: 34px;

    padding: 8px 14px;

    border-radius: 999px;

    color: #ffffff;

    font-size: .95rem;
    font-weight: 600;
}

.tag-pregunta {
    background-color: #535353;
}

.tag-materia {
    background-color:
        var(--color-primario);
}

.materia-matematicas {
    background-color: #de8a03;
    color: #fff;
}

.materia-espanol {
    background-color: #bfbc03;
    color: #fff;
}

.materia-fisica {
    background-color: #1c028b;
    color: #fff;
}

.materia-quimica {
    background-color: #e01a00;
    color: #fff;
}

.materia-historia-universal {
    background-color: #833001;
    color: #fff;
}

.materia-historia-de-mexico {
    background-color: #015c0d;
    color: #fff;
}

.materia-biologia {
    background-color: #4dc000;
    color: #fff;
}

.materia-literatura {
    background-color: #3175c4;
    color: #fff;
}

.materia-filosofia {
    background-color: #5300a1;
    color: #fff;
}

/* =========================
   Contenido de la pregunta
========================= */

.cont-contenido-pregunta {
    margin-top: 20px;
}

.txt-pregunta {
    color:
        var(--color-texto-principal);

    font-size: 1.1rem;

    line-height: 1.25;
    font-weight: 500;
    white-space: pre-line;
}

.txt-pregunta p {
    margin: 0 0 1em;
}

.txt-pregunta p:last-child {
    margin-bottom: 0;
}

/* =========================
   Recursos
========================= */

.cont-recurso-pregunta {
    width: 100%;
    margin: 30px auto 0;
}

.recurso-pequeno {
    max-width: 200px;
}

.recurso-mediano {
    max-width: 400px;
}

.recurso-grande {
    max-width: 900px;
}

.cont-recurso-pregunta img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    
}

.recurso-provisional {
    min-height: 260px;
    display: grid;
    place-items: center;

    border: 1px dashed
        var(--color-borde);

    border-radius:
        var(--radio-pequeno);

    background-color: #f3f4f6;

    color:
        var(--color-texto-secundario);

    font-weight: 700;
}

/* =========================
   Opciones
========================= */

.cont-opciones {
    display: grid;

    gap: 14px;

    margin-top: 24px;
}

.opcion-pregunta {
    width: 100%;

    display: flex;
    
    align-items: center;

    gap: 12px;

    padding: 16px 18px;

    border: 1px solid
        var(--color-borde);

    border-radius:
        var(--radio-pequeno);

    background-color: #fff;

    color:
        var(--color-texto-principal);

    text-align: left;

    cursor: pointer;

    transition:
        border-color
        var(--transicion-rapida),
        background-color
        var(--transicion-rapida),
        transform
        var(--transicion-rapida);
}

.opcion-pregunta:hover:not(:disabled) {
    border-color:
        var(--color-primario);

    background-color: #f8f7ff;

    transform: translateY(-1px);
}

.opcion-pregunta:focus-visible {
    outline: 3px solid
        var(--color-primario);

    outline-offset: 3px;
}

.opcion-pregunta:disabled {
    cursor: default;
}

/* Letra A, B, C o D */

.opcion-letra {
    flex: 0 0 36px;

    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background-color: #afafaf;

    font-weight: 700;
}

/*
.opcion-contenido {
    flex: 1;
    width: 0;
    line-height: 1.2;
}
    */

    /*
.opcion-contenido img {
    width: 100%;
    height: auto;
    display: inline-block;
    margin: 0 0 0 0;
}
    */

/* Estados de respuesta */

.opcion-pregunta.es-correcta {
    border-color:
        var(--color-correcto);

    background-color: #e9f7ef;
}

.opcion-pregunta.es-correcta
.opcion-letra {
    color: #ffffff;

    background-color:
        var(--color-correcto);
}

.opcion-pregunta.es-incorrecta {
    border-color:
        var(--color-incorrecto);

    background-color: #fdecec;
}

.opcion-pregunta.es-incorrecta
.opcion-letra {
    color: #ffffff;

    background-color:
        var(--color-incorrecto);
}

.opcion-pregunta:disabled:not(
    .es-correcta,
    .es-incorrecta
) {
    opacity: 0.65;
}

/* =========================
   Acciones inferiores
========================= */

.foot-examen {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 16px;

    margin-top: 24px;
}

.btn-salir-examen,
.btn-siguiente-pregunta {
    min-width: 190px;

    padding: 14px 22px;

    border-radius:
        var(--radio-pequeno);

    color: #ffffff;

    font-weight: 500;

    cursor: pointer;

    transition:
        background-color
        var(--transicion-rapida),
        transform
        var(--transicion-rapida);
}

.btn-salir-examen {
    background-color:
        var(--color-peligro);
}

.btn-salir-examen:hover {
    background-color:
        var(--color-peligro-hover);

    transform: translateY(-1px);
}

.btn-siguiente-pregunta {
    background-color:
        #090136;
}

.btn-siguiente-pregunta:hover:not(:disabled) {
    background-color:
        #0f0833;

    transform: translateY(-1px);
}

.btn-siguiente-pregunta:disabled {
    opacity: 0.5;

    cursor: not-allowed;
}


.opcion-contenido {
    min-width: 0;
    font-size: 1.1rem;
}

.opcion-contenido-imagen {
    display: flex;
    align-items: center;
    justify-content: start;
    width: 100%;
}

.opcion-imagen {
    display: block;
    width: auto;
    width: 30%;
    max-width: 300px;
    max-height: 220px;
    object-fit: contain;
}

.imagen-pregunta {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}