@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    border: none; /* Quitamos los bordes para poner el nuestro personalizado */
    outline: none; /* Quitamos los bordes que tiene el input cuando esta seleccionado */
    font-family: 'Inter', sans-serif;
}

:root {
    --blanco-fondo: #FFFFFF;    
    --gris-texto: #828282;
    --gris-acordeon: #e9e9e9;
    --azul-claro: #4285F4;
    --azul-corporativo: #242a46;
    --azul-i360: #1ca8c1;
    --rojo-claro-error: #f8d7da;
    --rojo-oscuro-error: #842029;
    --rojo-borde-error: #dc3545;
}

/* Estilos para el login */

.login {
    background-image: url("/assets/images/fondo_login.jpg"); 
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;

    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;
}

/* Margenes */

.space-top {
    margin-top: 5rem;
}

header,  
section {
    margin-left: 4rem;
    margin-right: 4rem;
}

/* Estilos por defecto */

h2 {
    font-size: 3rem;
    color: var(--azul-corporativo);
}

h4 {
    font-size: 2.25rem;
    color: var(--azul-corporativo);
}

p {
    font-size: 1.5rem;
    color: var(--gris-texto);
}

.space-top a {
    font-size: 1.25rem;
    color: var(--gris-texto);
}

.space-top a:hover {
    color: var(--azul-i360);
}

/* Estilos flex para los contenedores */

.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 2.5rem;

    width: 100%;

    margin-bottom: 5rem;
    margin-top: 5rem;

    cursor: pointer;
}

/* Le doy estilos a temas y test */

.flex-rectangle {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2.5rem;

    width: 100%;

    margin-bottom: 5rem;
    margin-top: 5rem;

    cursor: pointer;
}

#center-ayunt { justify-content: center; gap: 5rem;  } /* Alineado para ayuntamiento que tiene solo dos */

.ir-opo, 
.ir-teoria,
.ir-modo,
.ir-a-modo {
    aspect-ratio: 1 / 1;
    max-width: 550px;
    width: 100%;

    padding: 0.625rem;

    border: 0.125rem solid var(--gris-texto);

    text-align: center;

    transition: transform 0.3s ease;
}

.ir-tema,
.ir-test {
    max-width: 350px;
    width: 100%;

    padding: 0.625rem;
    border-radius: 0.625rem;

    border: 0.125rem solid var(--gris-texto);

    text-align: center;

    transition: transform 0.3s ease;
}

.ir-tema:hover,
.ir-test:hover {
    border: 0.125rem solid var(--azul-claro);
    box-shadow: 0 0 1.25rem var(--azul-claro);
    transform: scale(1.1);
}

.ir-opo:hover,
.ir-teoria:hover,
.ir-modo:hover,
.ir-a-modo:hover {
    border: 0.125rem solid var(--azul-claro);
    box-shadow: 0 0 1.25rem var(--azul-claro);
    transform: scale(1.1);
}

.ir-opo h2, .ir-teoria h2, .ir-modo h2, .ir-a-modo h2 { font-size: 2.125rem; }

.ir-opo img, .ir-teoria img, .ir-modo img, .ir-a-modo img { width: 12rem; filter: invert(74%) sepia(45%) saturate(1912%) hue-rotate(174deg) brightness(103%) contrast(101%);}

/* Estilos para las imagenes */
#estado img,
#ayuntamiento img,
#random img { margin-top: 1.25rem; }

#estado img,
#ayuntamiento img,
#random img { filter: invert(74%) sepia(45%) saturate(1912%) hue-rotate(174deg) brightness(103%) contrast(101%); }

#practica img, 
#examen img,
#random img { margin-top: 1.25rem; }

#practica img, 
#examen img,
#random img { filter: invert(74%) sepia(45%) saturate(1912%) hue-rotate(174deg) brightness(103%) contrast(101%); }

/* Estilos para centrar y margenes */
#practica, 
#examen,
#random { text-align: center; }

#test-opos h2,
#teoria h2,
#modo h2,
#temas h2,
#unit_select h2 { margin-top: 2.5rem; margin-bottom: 2.5rem; }

/* Estilos formulario */
.forms-styles-login {
    background-color: var(--blanco-fondo);
    
    padding: 2.5rem;

    border: 0.125rem solid var(--gris-claro);
    border-radius: 0.625rem;
    box-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.2), /* la sombra superior 0 horizontal 4 hacia abajo 8 difuminado 0 hacia los lados y por ultimo el color */
                0 0.375rem 1.25rem 0 rgba(0, 0, 0, 0.19); /* la sombra inferior 0 horizontal 6 hacia abajo 20 difuminado 0 hacia los lados y el color */
    
    width: 100%;
    max-width: 500px;
    margin: 0 auto;

    & h2 { text-align: center; margin-bottom: 2.5rem; font-size: 1.875rem; }
}

.forms-styles {
    background-color: var(--blanco-fondo);
    
    padding: 2.5rem;

    border: 0.125rem solid var(--gris-acordeon);
    border-radius: 0.625rem;
    box-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.2), /* la sombra superior 0 horizontal 4 hacia abajo 8 difuminado 0 hacia los lados y por ultimo el color */
                0 0.375rem 1.25rem 0 rgba(0, 0, 0, 0.19); /* la sombra inferior 0 horizontal 6 hacia abajo 20 difuminado 0 hacia los lados y el color */
    
    width: 100%;
    max-width: 500px;
    margin: auto;
    margin-top: 3.75rem;

    & h2 { text-align: center; margin-bottom: 2.5rem; font-size: 1.875rem; }
}


.form-section {
    position: relative;
    text-align: center;
    margin-bottom: 2.5rem;

    & i {
        position: absolute;
        
        right: 0.625rem;
        top: 50%;
        
        color: var(--azul-corporativo);
        
        transform: translateY(-50%);
        cursor: pointer;
    }
}

.celdas {
    width: 100%;

    padding: 0.625rem 2.5rem 0.625rem 0.625rem;
    border-bottom: 0.125rem solid var(--gris-acordeon);
    
    font-size: 1rem;

    &:hover { border-bottom: 0.125rem solid var(--azul-claro); }

    &:focus { border-bottom: 0.125rem solid var(--azul-claro); }
}

.btn {
    text-align: center;

    & input { border-radius: 1.25rem; }

    & input:hover {
        background-color: var(--azul-claro);
        border: none; 
    
        color: var(--blanco-fondo);
    }
}

.error {
    background-color: var(--rojo-claro-error);
    color: var(--rojo-oscuro-error);

    border-left: 0.313rem solid var(--rojo-borde-error);
    border-bottom: 0.313rem solid var(--rojo-borde-error);
    
    text-align: center;
    
    padding: 0.625rem;
    border-radius: 0.625rem;
    margin-bottom: 1.25rem;

    font-size: 1.125rem;
}

.img-form {
    text-align: center;

    & img { width: 10rem;  margin-bottom: 2.5rem;} 
}

/* Estilos para el creador de test */
#crear_test h2 {
    text-align: center;
}

#crear_test div {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 1rem;

    border: 0.125rem solid var(--gris-texto);
    border-radius: 1.25rem;
    padding: 1.25rem;

    max-width: 820px;
    width: 100%;

    margin: 5rem auto;
}

#tema,
#letra {
    padding: 0.5rem;
    border-bottom: 0.125rem solid var(--gris-texto);
}

#tema:hover,
#letra:hover,
#tema:focus,
#letra:focus {
    color: var(--azul-claro);
    border-color: var(--azul-claro);
}

/* Creo las clases para la animación de aparecer */

.hidden {
    opacity: 0;
    transform: translateY(2.5rem);
}

.show {
    animation: fade 2s ease-in-out forwards;
}

@keyframes fade {
    0%   { 
        opacity: 0; 
        transform: translateY(2.5rem); /* Empezamos abajo */
    }
    100% { 
        opacity: 1; 
        transform: translateY(0);    /* Terminamos en su posición original */
    }
}

@media (max-width: 1366px) {
    .flex-container {
        justify-content: center;
    }
}

@media (max-width: 972px) {
    #crear_test div {
        max-width: 350px;
        flex-direction: column;
    }

    #crear_test div input {
        margin-right: 0;
        margin-bottom: 1rem;
    }
}