/* Tamaño base para escritorio (pantallas grandes) */
html {
    font-size: 14px; /* píxeles de 1em en desktop */
}

/* Tamaño base para dispositivos móviles (pantallas pequeñas) */
@media (max-width: 78px) {
    html {
        font-size: 20px; /* píxeles de 1em en móviles */
    }
}

/* Color de fondo */
body {
    background-color: #f5f5f5  !important; /* Color de fondo */
            font-family: Arial, sans-serif;
            text-align: center;
    justify-content: center; /* Para centrar el contenido verticalmente */
            font-size: 2.125rem; /* Aumenta el tamaño del texto */
}

p {
    margin-top: 4px;  /* Margen superior reducido */
    margin-bottom: 2px;  /* Margen inferior reducido */
}



.counter-container {
    display: flex;
    justify-content: center; /* Esto centra horizontalmente la fila */
    align-items: center;
    font-size: 1.2rem; /* Tamaño de fuente ajustado */
}


/* Estilo del counter */
.exercisetitle, .counter {
            text-align: center;
    font-size: 1.2rem;
    margin-right: 5px; /* Espacio entre los contadores */
    margin-top: 8px;
    color: #AAAAAA !important; /* Asegura que el color gris prevalezca */
    font-weight: normal; /* Asegura que el texto no esté en negrita */
}




/* Estilo de la primera frase */
.sentence1 {
    font-weight: normal; /* Asegura que no esté en negrita */
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: #000000; /* Primera frase en negro */
}

/* Estilo del separador */
.separator {
    font-size: 1rem;
    margin: 0.5rem 0;
    color: #AAAAAA;
    text-align: center;
}

/* Estilo de la segunda frase */
.sentence2 {
    font-weight: normal; /* Asegura que no esté en negrita */
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #1565C0; /* Segunda frase en azul */
}

/* Elemento en negrita */
.boldelement {
    font-weight: bold;
}

/* Elemento subrayado */
.underlinedelement {
    text-decoration: underline;
}

/* Elemento subrayado y en negrita */
.boldunderlinedelement {
    font-weight: bold;
    text-decoration: underline;
}

.hidden { 
display: none; 
} 


.button-6container {
    display: flex;
    justify-content: center; /* Para centrar horizontalmente */
    align-items: center; /* Para centrar verticalmente si es necesario */
    flex-direction: column; /* Opcional: coloca los botones en una columna */
    margin-top: 2rem; /* Ajusta el margen superior si es necesario */
}


/* Estilos para los botones independientes (answerbuttons) */

.answerbuttons {
    font-size: 1.5rem;
    margin: 0.2rem;
    padding: 0.2rem;
    cursor: pointer;
    min-width: 75px; /* Mantiene el tamaño mínimo actual */
    width: auto; /* Permite que el botón se expanda según el contenido */
    background-color: #B0B0B0; /* Color gris para los botones */
    color: #fff; /* Color del texto */
    border: none;
    border-radius: 5px;
    text-align: center; /* Asegura que el texto esté centrado */
    white-space: nowrap; /* Evita que el texto se divida en dos líneas */
    touch-action: manipulation; /* Previene algunos comportamientos no deseados en móviles */
}


/* Tamaño y color de la inputbox */
.inputbox {
    font-size: 2rem;
    color: #CCCCCC;
    text-align: center;
    width: 100%;
    max-width: 200px;
    padding: 10px;
    margin: 0 auto;
    display: block;
}

/* Estilos para los botones en la tabla de respuestas */

/* Botón de respuesta activo */
.answertable {
    padding: 0.3rem;
    font-size: 1rem; /* Tamaño del texto */
    background-color: #C0C0C0; /* Color gris */
    color: #fff; /* Color del texto */
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Botón de respuesta vacío (no interactivo) */
.answertableempty {
    background-color: #e9e9e9; /* Gris muy claro */
    color: #f0f0f0; /* Texto del mismo color para que sea invisible */
    cursor: not-allowed; /* Indica que el botón no es clicable */
    border: none; /* Elimina el borde del botón */
}

/* Botón de respuesta desactivado */
.answertable:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}



/* Desactiva el estado hover después de que se hace clic en el botón */
.answerbuttons:focus {
    background-color: #B0B0B0; /* Cambiar este color si es necesario */
    outline: none; /* Opcional: Elimina el borde de enfoque */
}


@media (any-pointer: fine) {
    background-color: #1976D2; /* Color azul al pasar el ratón por encima */
}

/* Desactivar hover en dispositivos con pantalla táctil */
@media (hover: none) {
    .answerbuttons:hover,
    .answerbuttons:active,
    .answerbuttons:focus {
        background-color: #B0B0B0; /* Color del botón original */
        color: #fff; /* Color del texto */
    }
}




/* Estilos para botones correctos e incorrectos */
.answerbuttons.correct {
    background-color: green; /* Color verde para respuestas correctas */
}

.answerbuttons.incorrect {
    background-color: red; /* Color rojo para respuestas incorrectas */
}

/* Estilo para los selectores de entrada (inputselector) */

.inputselector {
    width: 100px;
    height: 50px;
    background-color: #f4f4f4; /* Fondo del selector */
    color: #000; /* Color del texto */
    border: 1px solid #ccc; /* Borde del selector */
    outline: none;
    font-size: 1.5em;
    padding-left: 0; /* Asegura que no haya padding lateral que desalinie el texto */
    padding-right: 0; /* Asegura que no haya padding lateral que desalinie el texto */
    padding-top: 0;
    padding-bottom: 0;
    text-align: center; /* Alineación del texto */
    line-height: 50px; /* Asegura que el texto esté centrado verticalmente */
    -webkit-appearance: none;
    appearance: none;
    position: relative;
}

/* Estilo para el selector cuando está enfocado */
.inputselector:focus {
    border-color: #1565C0; /* Color del borde cuando se enfoca */
}


/* Alineación de los selectores */
.align-right {
    text-align: right;
}

.align-center {
    text-align: center;
}

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


/* Estilo para el pie de página (footer) */
.footer {
    position: fixed;
    bottom: -0.1rem;
    left: 50%;
    transform: translateX(-50%);
    margin: 0rem;
    padding: 0; /* Puedes ajustar este valor según sea necesario */
    color: #AAAAAA; /* Color gris para el texto */
    font-size: 1rem;
    text-align: center;
}

/* Estilo para los enlaces en el pie de página */
.footer a {
    color: inherit; /* Hereda el color del texto */
    text-decoration: none; /* Elimina el subrayado de los enlaces */
}

.correct-background {
    background-color: #e3F2FD !important;
}

.incorrect-background {
    background-color: #ffc4cb !important;
}


/* Centered lo he añadido yo, a ver si funciona */
.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/* Contenedor a pie de página */
.bottom-container {
    position: fixed;
    bottom: 0rem;
    left: 0;
    width: 100%;
    padding: 0.6rem 0rem;
    background-color: #FFF; /* Fondo semitransparente para visibilidad */
    display: flex;
    justify-content: space-around; /* Distribuye el espacio horizontalmente */
}




/* Número de ejercicio */
.ariketazenbakia {
            font-size: 3rem; /* Tamaño del texto */
            color: #AAA; /* Color del texto */
    margin-top: 0; /* Ni idea de qué hace esto por más que pruebo */
    clear: both; /* Asegura que el elemento comience después de cualquier elemento flotante */
font-weight: bold;
    transition: background-color 0.2s ease; /* Suaviza la transición de color */
font-family: 'Arial Black', 'Impact', 'Geneva', sans-serif;



        }

.menunavegacion  {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    padding: 0.5rem 1rem; /* O el valor que prefieras */
    border: none;
    border-radius: 0.2rem;
    font-size: 2rem;
    color: #fff;
    margin: 0rem 0rem;
    transition: background-color 0.1s ease;
    text-decoration: none;
background-color: rgba(204, 204, 204);
}

.menunavegacion:hover {
    background-color: #777; /* Nuevo color de fondo al pasar el ratón */
}

/* ================================ ================================ ================================ ================================ ================================ ================================ ================================ ================================ Estos otros son los de la portada: /* 

body {
    background-color: #f5f5f5  !important; /* Color de fondo */
            font-family: Arial, sans-serif;
            text-align: center;
}

a {
    text-decoration: none; /* Elimina el subrayado */
    color: inherit; /* Usa el color del texto del elemento padre */
}

a:link, a:visited, a:active {
    text-decoration: none; /* Elimina el subrayado de todos los estados del enlace */
    color: inherit; /* Hace que el color del enlace sea igual al del texto circundante */
}

a:hover, a:focus, a:active {
    text-decoration: none; /* Asegura que el subrayado no aparezca al interactuar con el enlace */
    color: inherit; /* Mantiene el mismo color en los estados hover, focus y active */
}

        .linea-fina {
            border: none; /* Elimina el borde predeterminado */
            border-top: 1px solid #ccc; /* Línea horizontal de 1px de grosor */
            margin: 10px auto; /* Espaciado superior e inferior */
            width: 80%; /* Asegura que la línea ocupe el 100% del contenedor */;
        }
        .linea-gruesa {
            border: none; /* Elimina el borde predeterminado */
            border-top: 3px solid #ccc; /* Línea horizontal de 1px de grosor */
            margin: 10px auto; /* Espaciado superior e inferior */
            width: 90%; /* Asegura que la línea ocupe el 100% del contenedor */;
        }



    /* Estilo común para ambos botones de portada */
.boton, a.boton  {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 28px;
    border: none;
    border-radius: 5px;
    font-size: 20px;
    color: #fff;
    margin: 0;
    transition: background-color 0.1s ease;
    text-decoration: none;
    margin-top: 0;  /* Margen superior reducido */
    margin-bottom: 0;  /* Margen inferior reducido */
    padding: 4px 7px; /* Adjust padding to control size */
    line-height: normal; /* Ensure it's not too large */
}

    /* Característica diferenciadora para el botón impar */
    .botonimpar {
            display: inline-block;
        background-color: #ccc; 
    }

    /* Característica diferenciadora para el botón par */
    .botonpar {
            display: inline-block;
        background-color: #bbb;
    }

.botonimpar:hover {
    background-color: #388be9; /* Nuevo color de fondo al pasar el ratón */

}

.botonpar:hover {
    background-color: #5c9c7a; /* Nuevo color de fondo al pasar el ratón */
}



   .titulocapitulo {
            font-size: 28px; /* Tamaño del texto */
            color: #aaa; /* Color del texto */
    transition: background-color 0.2s ease; /* Suaviza la transición de color */
font-family: 'Impact', 'Arial Black', Geneva, sans-serif;
    margin-top: 30px
    clear: both; /* Asegura que el elemento comience después de cualquier elemento flotante */
font-weight: bold;
        }

.titulocapitulo:hover {
            color: #777; /* Color del texto al pasar el ratón por encima*/
}

   .letrafina {
    font-weight: 100; /* Muy fina */
    font-size: 16px;  /* Ajusta el tamaño según sea necesario */
    color: #AAA;      /* Asegura que el color sea visible */
    line-height: 0.5; /* Reducir el interlineado para juntar las líneas */
    margin-bottom: -1rem; /* Reduce el margen inferior para juntar las líneas */
}

.br-letrafina {
    display: block;
    margin-bottom: -0.9rem; /* Ajusta este valor según necesites */
    line-height: 0; /* Puedes ajustar también la altura de línea */
}


   .flecha {
    font-weight: 100;
    font-size: 2rem;  /* Ajusta el tamaño según sea necesario */
    color: #aaa;      /* Asegura que el color sea visible */
}




    /* atributos del botón 'información' (i) */
        .icono-info {
            font-size: 18px; /* Cambia este valor para ajustar el tamaño */
            color: #888; /* Opcional: Cambia el color del icono */
            vertical-align: middle; /* Alinea verticalmente al centro */
        }

        .icono-info:hover {
            color: #444; /* Cambia el color del icono */
           text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }