/* ✅ Estilos Generales */
    body {
        font-family: 'OpenDyslexic', sans-serif;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        margin: 0;
        background-color: #f9f9f9;
    }

    /* ✅ Contenedor Principal del Quiz */
.quiz-container {
    max-width: 800px;
    margin: auto;
    padding: 20px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

    /* ✅ Títulos */
    h1 {
        margin-bottom: 10px;
        color: #333;
        font-size: 24px;
    }

    p {
        margin-bottom: 20px;
        color: #666;
        font-size: 16px;
    }

    /* ✅ Secciones Colapsables (Ejemplo y Explicación) */
    details {
        margin-bottom: 20px;
        background-color: #f1f1f1;
        padding: 15px;
        border-radius: 5px;
        border-left: 5px solid #007BFF;
        cursor: pointer;
    }

    /* ✅ Título de Secciones Colapsables */
    summary {
        font-weight: bold;
        font-size: 18px;
        cursor: pointer;
        padding: 8px;
       /* background: #007bff;*/
        color: white;
        border-radius: 5px;
        text-align: left;
    }

    /* ✅ Cambia de color al abrir la sección */
    details[open] summary {
        background: #0056b3;
    }

    /* ✅ Estilos para Preguntas */
    .question {
        margin-bottom: 25px;
        text-align: left;
    }

    /* ✅ Línea Separadora */
    hr {
        margin: 30px 0;
        border: none;
        height: 1px;
        background: #ddd;
    }

    /* ✅ Botón de Responder */
button {
    font-family: 'OpenDyslexic', sans-serif;
    background-color: #007bff;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s ease;
}
button:hover {
    background-color: #0056b3;
}


/* ================================ */
/* ✅ ESTILOS ESPECIALES PARA FRACCIONES */
/* ================================ */

/* ✅ Contenedor de Fracciones */
.fraction-container {
    display: inline-flex;
    align-items: center;
    font-size: 1.2rem;
}

/* ✅ Estilos Generales de Fracciones */
.fraction {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0 10px;
}

/* ✅ Línea de la Fracción */
.fraction .line {
    width: 60px;
    border-top: 3px solid black;
    margin: 4px 0;
}

/* ✅ Numerador y Denominador */
.fraction .numerador, 
.fraction .denominador {
    font-size: 1.5rem;
}

/* ✅ Entrada de Datos en Fracciones */
.fraction-input {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.fraction-input input {
    width: 3rem;
    height: 2rem;
    font-size: 1.2rem;
    text-align: center;
    border: 2px solid #007BFF;
    border-radius: 5px;
}

/* ✅ Fracción Mixta */
.mixed-fraction-container {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    gap: 10px;
}

/* ✅ Estilo para la parte entera en Fracciones Mixtas */
.whole-part {
    font-size: 1.5rem;
    font-weight: bold;
    margin-right: 10px;
}

/* ✅ Ajuste para Numerador y Denominador en Fracciones Mixtas */
.fraction .numerador {
    font-size: 2rem;
}

.fraction .denominador {
    font-size: 2rem;
}

.fraction .line {
    width: 80px;
    border-top: 4px solid black;
    margin: 5px auto;
}


    /* ================================ */
    /* ✅ ESTILOS PARA OPCIONES DE RESPUESTA */
    /* ================================ */

body {
    font-family: 'OpenDyslexic', sans-serif;
    background-color: #f5f7fa;
    color: #333;
    text-align: center;
    padding: 20px;
}




.header-container {
    display: flex;
    align-items: center;
    gap: 1rem; /* espacio entre botón y título */
    margin-bottom: 1.5rem;
}

.quiz-title {
    font-size: 28px;
    font-weight: bold;
    min-height: 50px;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}
h1, h2 {
    color: #004085;
}

button {
    background-color: #007bff;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s ease;
}

button:hover {
    background-color: #0056b3;
}

/* Contenedores de ejemplo y explicación */
details {
    background: #e9f2ff;
    border: 1px solid #007bff;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
}

details summary {
    font-weight: bold;
    cursor: pointer;
    color: #fff;
    background: #007bff;
    padding: 10px;
    border-radius: 5px;
}

details[open] summary {
    background: #0056b3;
}

/* Inputs */
input[type="text"] {
    width: 80%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center;
}



.question-container {
    width: 80%;
    margin: auto;
}

.question {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px; /* Espacio entre preguntas */
}

.answer-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Espacio entre la etiqueta y el input */
}

.answer-label {
    font-weight: bold;
    min-width: 90px; /* Asegura que la palabra "Respuesta:" esté alineada */
}

.answer-input {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%; /* Hace que el input se ajuste bien al espacio disponible */
    max-width: 200px; /* Evita que sea demasiado ancho */
}



/* ================================ */
/* ✅ ESTILOS PARA PREGUNTAS ALINEADAS A LA IZQUIERDA */
/* ================================ */

/* Contenedor Principal de la Pregunta */
.question-container {
    padding: 15px;
    margin-bottom: 20px;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: left; /* 🔹 Alineación a la izquierda */
}

/* Texto de la Pregunta */
.question-text {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    text-align: left; /* 🔹 Alineación a la izquierda */
}

/* Contenedor de la Respuesta */
.answer-wrapper {
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    text-align: left; /* 🔹 Alineación a la izquierda */
}

/* Línea Divisoria */
.divider {
    margin-top: 20px;
    border-top: 1px solid #ddd;
}


/* === Estilos para la página de resultados === */
.result-container {
    background-color: white;
    padding: 20px 40px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    width: 100%;
    text-align: center;
}

.score-text {
    font-size: 18px;
    font-weight: bold;
}

.correct {
    color: green;
}

.incorrect {
    color: red;
}



.results-list {
    padding: 0;
}

.result-item {
    margin-bottom: 20px; /* Espaciado entre respuestas */
}



/* === Listado de Quizzes === */
.quiz-group {
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
}

.quiz-group summary {
    font-size: 18px;
    font-weight: bold;
    padding: 8px;
    color: white;
    border-radius: 5px;
}

.quiz-card {
    border: 1px solid #ddd;
    padding: 15px;
    margin: 10px 0;
    border-radius: 8px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    text-align: left;
}

.quiz-name {
    text-decoration: none;
    color: #007bff;
    font-size: 18px;
    font-weight: bold;
}

.quiz-description {
    color: #666;
    font-size: 14px;
    margin-top: 5px;
}