/* Estilo base para los botones de opción */
.quiz-option-btn {
    background-color: #F9FAFB; /* gray-50 */
    border: 1px solid #E5E7EB; /* gray-200 */
    color: #1F2937; /* gray-800 */
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

/* Estilo para tema oscuro */
.dark .quiz-option-btn {
    background-color: #374151; /* gray-700 */
    border-color: #4B5563; /* gray-600 */
    color: #F9FAFB; /* gray-50 */
}

/* Efecto hover cuando el botón no está deshabilitado */
.quiz-option-btn:not(:disabled):hover {
    background-color: #F3F4F6; /* gray-100 */
    border-color: #D1D5DB; /* gray-300 */
    transform: scale(1.02);
}

/* Efecto hover para tema oscuro */
.dark .quiz-option-btn:not(:disabled):hover {
    background-color: #4B5563; /* gray-600 */
    border-color: #6B7280; /* gray-500 */
}

/* Estado deshabilitado */
.quiz-option-btn:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

/* Estado correcto: verde */
.quiz-option-btn.correct {
    background-color: #10B981 !important; /* emerald-500 */
    border-color: #059669 !important; /* emerald-600 */
    color: white !important;
    transform: scale(1.05); /* Resalta la opción correcta */
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
}

/* Estado incorrecto: rojo */
.quiz-option-btn.incorrect {
    background-color: #EF4444 !important; /* red-500 */
    border-color: #DC2626 !important; /* red-600 */
    color: white !important;
    opacity: 0.8;
}