/* En un nuevo archivo css/exam.css (y añádelo al index.html) */
.materias-list { padding-left: 1rem; }
.tema-item { margin-bottom: 0.75rem; }
.tema-header, .subtema-item { display: flex; align-items: center; gap: 0.5rem; }
.tema-label, .subtema-label { cursor: pointer; }
.subtemas-container { padding-left: 2rem; border-left: 1px solid var(--bg-card); margin-left: 10px; }

/* Estilo moderno para checkboxes */
input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--bg-main);
    margin: 0;
    font: inherit;
    color: var(--text-secondary);
    width: 1.15em;
    height: 1.15em;
    border: 0.1em solid var(--bg-card);
    border-radius: 0.25em;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
    cursor: pointer;
}
input[type="checkbox"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--primary-accent);
    transform-origin: bottom left;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
input[type="checkbox"]:checked::before {
    transform: scale(1);
}
/* En exam.css */
.opciones-container { display: flex; flex-direction: column; gap: 1rem; }
.opcion-item { display: block; } /* Para que ocupe todo el ancho */
.opcion-item input[type="radio"] { display: none; } /* Ocultamos el radio button real */
.opcion-item label {
    display: flex;
    align-items: center;
    padding: 1rem;
    background-color: var(--bg-card);
    border-radius: var(--border-radius);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}
.opcion-item label:hover {
    background-color: #4B5563; /* Un gris un poco más claro */
}
/* Estilo para cuando el radio button está seleccionado */
.opcion-item input[type="radio"]:checked + label {
    border-color: var(--primary-accent);
    background-color: rgba(139, 92, 246, 0.1);
}