body {
    font-family: 'Inter', sans-serif;
}

/* Clases personalizadas para las opciones de respuesta */
.opcion-base {
    width: 100%;
    padding: 1rem;
    border: 2px solid #e5e7eb; /* border-gray-200 */
    border-radius: 0.5rem; /* rounded-lg */
    margin-bottom: 0.75rem; /* mb-3 */
    transition: all 150ms ease-in-out;
}
.opcion-base:hover {
    background-color: #f3f4f6; /* hover:bg-gray-100 */
}
/* Estilos Modo Oscuro para opciones */
.dark .opcion-base {
    border-color: #4b5563; /* border-gray-600 */
    color: #f3f4f6; /* text-gray-100 */
}
.dark .opcion-base:hover {
    background-color: #374151; /* hover:bg-gray-700 */
}

.opcion-seleccionada {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: #3b82f6; /* ring-blue-500 */
}
.opcion-correcta {
    background-color: #d1fae5; /* bg-green-100 */
    border-color: #10b981; /* border-green-500 */
    color: #065f46; /* text-green-900 */
}
.dark .opcion-correcta {
    background-color: #064e3b; /* bg-green-900 */
    border-color: #059669; /* border-green-600 */
    color: #d1fae5; /* text-green-100 */
}

.opcion-incorrecta {
    background-color: #fee2e2; /* bg-red-100 */
    border-color: #ef4444; /* border-red-500 */
    color: #991b1b; /* text-red-900 */
}
.dark .opcion-incorrecta {
    background-color: #7f1d1d; /* bg-red-900 */
    border-color: #dc2626; /* border-red-600 */
    color: #fee2e2; /* text-red-100 */
}

/* Evitar que se pueda hacer clic en las opciones después de responder */
.opciones-bloqueadas .opcion-base {
    pointer-events: none;
}

/* Estilos para la letra y el texto dentro de la opción */
.opcion-letra {
    font-weight: 700; /* font-bold */
    color: #6b7280; /* text-gray-500 */
}
.dark .opcion-letra {
    color: #9ca3af; /* text-gray-400 */
}

.opcion-texto {
    text-align: left;
}

/* Nueva clase para botones de modo seleccionados */
.btn-mode-selected {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 2px var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + 2px) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: #f59e0b; /* ring-yellow-400 */
    --tw-ring-offset-width: 2px;
    transform: scale(1.05);
}