/* Estilos de la caja principal del Quiz */
#quiz-container {
    max-width: 800px;
    margin: 0 auto;
}

/* Estilo para los botones de opciones */
.option-button {
    width: 100%;
    min-height: 80px;
    font-size: 1.4rem;
    font-weight: bold;
    color: white; /* Text blanco sobre fondo de color */
    border: none;
    transition: all 0.2s ease-in-out;
    display: flex; /* Centrar contenido */
    align-items: center;
    justify-content: center;
    /* Un toque de forma geométrica como Kahoot */
    clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%); 
    text-align: center; /* Asegurar que el texto esté centrado en varias líneas */
    padding: 10px;
}

/* Se definen los colores de Kahoot para los cuatro botones */
/* Fila 1 */
#option-0 { background-color: #e53935; } /* Rojo */
#option-1 { background-color: #1e88e5; } /* Azul */
/* Fila 2 */
#option-2 { background-color: #43a047; } /* Verde */
#option-3 { background-color: #ffb300; } /* Amarillo */

/* Efecto de hover */
.option-button:hover:not(:disabled) {
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    opacity: 0.9;
}

/* Opcional: Para mantener el énfasis en la correcta,
   puedes añadir una sombra a la correcta cuando está la incorrecta marcada. */
.option-button.correct {
    /* ... propiedades de borde ... */
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.8); /* Sombra verde */
}

/* Opcional: Asegurarse de que el color original de Kahoot prevalezca */
#option-0.correct { border-color: #4CAF50 !important; }
#option-1.correct { border-color: #4CAF50 !important; }
#option-2.correct { border-color: #4CAF50 !important; }
#option-3.correct { border-color: #4CAF50 !important; }

#option-0.incorrect { border-color: #F44336 !important; }
#option-1.incorrect { border-color: #F44336 !important; }
#option-2.incorrect { border-color: #F44336 !important; }
#option-3.incorrect { border-color: #F44336 !important; }