/*Titulos*/
@import url('https://fonts.googleapis.com/css2?family=Bitcount+Grid+Single:wght@100..900&family=Permanent+Marker&display=swap');
/*Parrafos y titulos secundarios*/
@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400..700;1,400..700&family=Bitcount+Grid+Single:wght@100..900&family=Permanent+Marker&display=swap');
/*Botones y formularios*/
@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400..700;1,400..700&family=Bitcount+Grid+Single:wght@100..900&family=News+Cycle:wght@400;700&family=Permanent+Marker&display=swap');

/*-------------ESTILOS COMUNES---------------*/
/*-------------ESTILOS COMUNES---------------*/
:root{
    --color-fondo: linear-gradient(to bottom right, #000000, #2F0B4A);
    --color-secundario: #2F0B4A;
    --color-boton: #7943A4;
}

body {
    margin:0;
    padding:0;
    width: 100%;/*width: 1512px;*/
    background: var(--color-fondo);
    font-family: 'Archivo Narrow', sans-serif;
    background: linear-gradient(to bottom right, #000000, #2F0B4A);
    color: white;
    font-size:100%;
    display:grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh; /*PARA QUE EL FOOTER SE BAJE SI EL BODY NO OCUPA TODO EL ALTO VISIBLE*/
}

/* Header */
header {
    position: relative;
    width: 98.67%;/*1492*100/1512=98,67*/
    align-items: center;
    padding: 0.66%; /*10*100/1512=0,66*/
    background-color: rgb(10, 8, 82);
}
/*218.89 es lo que ocupa de ancho el h1*/
header{
    h1{
        position: absolute;
        top:50%;/*En el medio*/
        /*para que quede perfecto uso left 50% y transform translate -50% -50%
        que esto lo que hace es situar el punto central del h1 en el punto central de la pantalla*/
        left:50%;
        transform: translate(-50%, -50%);
        /*los 1512-20(paddig) = 1492/2=746
        pero como el h1 ocupa 218.89 de ancho realmente
        para que quede centrado le resto la mitad 109.44
        operacionalmente 746-109.44=636.55px*/ 
        text-align: center;
        margin: auto;
        font-family: "Bitcount Grid Single";
        font-size: 2em; 
    }
}
/*Menu de navegacion*/

/*Pie de pagina*/
footer{
    background-color: #000000;
    margin-top:1.32% ;/*20*100/1512=1.32%*/
    padding: 1.32%; /* 20*100/1512=1.32% */
    text-align: center;
    font-size: 1em; 
}

input[type="submit"]:hover {
    background-color: #ff85c1;
}

main{
    width:100%; /*1512px*/
}
h1{
    font-family: 'Bitcount Grid Single';
}
/*-------------------------------*/
#gestionAvatares nav{
    ul{
        list-style: none;
        display: flex; /*Aqui uso un flex para la organizacion del 
        los elementos del nav
        */
        padding: 0;
        margin: 0;
        li{
            /*he decido usar 250px si yo no usase el flex-grow y flex-shrink
            solo me cabería 6 elementos li en el nav 250*6=1500px uno mas y me pasaria*/
            flex-basis: 16.53%; 
            /*250*100/1512=16,53*/
            /*el flex basis es el width*/
            flex-grow: 1;
            flex-shrink: 1;
            a{
                font-family: 'News Cycle', sans-serif;
                background-color: rgb(10, 8, 82);
                /* ... propiedades existentes ... */
                display: block;
                text-decoration: none;
                text-align: center;
                color: white; 
                font-size: 1.5em;
                display: block;
                /*tenia problemas de como se veia el texto en los enlaces del nav al agrandar
                y busque como solucionarlo y vi que con el white-space nowrap puedo
                decirle que omita los saltos de linea y asi no se me lia*/
                white-space: nowrap;
                &:hover{ 
                    background-color: #3b5f77;
                    color: white;
                }
            }
        }
    }
}

/* PÁGINA INICIO SESIÓN ADMIN*/
#loginAdmin header {
    margin-bottom: 1.65%; /*25*100/1512=1.65*/
}

#loginAdmin header h1 {
    text-align: center;
    margin-bottom: 1.32%;/*20px;*/
    font-size:3em;/*sobre 32 px bases del h1*/
}
#loginAdmin main{
    margin: auto;
}
/*Formulario
Tenemos 1512px para usar decidimos que el formulario coger 440
440-40=400 usables
*/
#loginAdmin form {
    margin: 0 auto;
    width: 26.45%; /*400px. 400*100 / 1512px = 26,45%*/
    background-color: var(--color-secundario);
    padding: 5%; /* 20*100/400= 5 */
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4); /*SOMBREADO*/
    text-align: center;
}

#registroSuperAdmin form{
    margin: 0 auto;
    width: 26.45%; /*400px. 400*100 / 1512px = 26,45%*/
    background-color: var(--color-secundario);
    padding: 5%; /* 20*100/400= 5 */
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4); /*SOMBREADO*/
    text-align: center;
}

#loginAdmin form h1 {
    color: white;
    margin-bottom: 12.5%; /*50*100/400=12,5 */
}

#imgenPregunta{
	text-align:center;
}

/*La imagen del logo hemos decido que cogeremos 150px de los 1512px usable. Es un tamaño visualmente decente ni muy grande ni pequeña*/
/* Imágenes */
#logo {
    width: 5.55%; /*83.92*100/1512=5,55*/
}

/* Etiquetas pertenecientes al formulario*/
#loginAdmin label {
    display: block;
    margin-bottom: 2.5%; /* 10*100/400= 2,5*/
    font-weight: bold;
}

#loginAdmin input {
    display: block;
    width: 80%; /*320*100/400(form) = 80*/
    margin:0 auto 7.5%; /*30*100/400 = 7.5*/
    padding: 2.5% 0; /*10*100/400=2.5*/
    border-radius: 15px;
    border: none;
    text-align: center;
    background-color: rgba(255,255,255,0.1);
    color: white;
}

/*submbit de enviar: este por defecto tiene la propiedad box-sizing:border-box por eso debemos usar el total
que es 320+25+25= 370*/
#loginAdmin input[type="submit"] {
    width: 80%;/*320*100/400= 80*/
    background-color: #FF69B4;
    color: #2F0B4A;
    border: none;
    border-radius: 15px;
    padding: 3% 0; /*12*100/400=3 | 25*100/400 = 6,25*/
    margin-top:12.5%; /*50px;*/
}



/* PÁGINA GESTIÓN DE AVATARES*/

#gestionAvatares body{
    grid-template-rows: auto auto auto auto;
}


#gestionAvatares main{
    width:100%; /*1512px*/
}

#gestionAvatares section{
    width:97.354%; /*1512-40(padding)=1472px. 1472*100 / 1512(ancho total del main)= 97.354%*/
    padding:1.32%; /*20px.  20*100 / 1512 (ancho total body)= 1.32%.  97.354%+1.32%+1.32%=100%*/
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr; /*5 columnas, una por tarjeta*/
    gap:1.32%;/*20px.  1512 px total. 20*100 / 1512 = 1.32%*/
}

#gestionAvatares article{
    background-color:#2F0B4A;
   /* width:18.45%; /*279px * 100/1512 = 18.45%      --> NO VA- PREGUNTAR A ISA*/
    border-radius: 10px;
    position:relative;
    text-align:center;
}

#gestionAvatares article .imgBasura{
    width:10.752%; /*30px.  30*100 / 279 (ancho article) = 10.752*/
    height:auto;
    margin:0 auto;
    position:absolute;
    top:1.792%; /*5PX.  5*100 / 279 = 1.792%*/
    left:3.58%; /*10PX. 10*100 / 279 = 3.58%*/
}

#gestionAvatares article .imgAvatar{
    width:35.842%; /*100px.  100*100 / 279 (ancho article) = 35.842*/
    height:auto;
    margin-top:7.168%; /*20px. 20*100 / 279 = 7.16%*/
}

#gestionAvatares form{
    width:33.068%; /*500px. 500*100/1512 = 33.068%*/
    margin:0 auto;
    text-align:center;
}

#gestionAvatares form input, #gestionAvatares form label{
    display:block;
    margin:0 auto;
    font-family: 'Bitcount Grid Single', sans-serif;
    margin-bottom: 4%;/*20px. 20*100/500 = 4%*/
}



/*--------------GESTION DE PREGUNTAS---------------*/
#modificarPreguntas body, #gestionPreguntas body{
    grid-template-rows: auto auto 1fr auto;
}
#modificarPreguntas h1, #gestionPreguntas h1{
    text-align:center;
}

#modificarPreguntas main, #gestionPreguntas main{
    width:97.35%; /*1512-40= 1472px.     1472*100/1512 = 97.35%*/
    padding:2.64% 0 0 2.64%; /*40*100 / 1512 = 2.64%;   97.35 + 2.64(padding derecho) = 100% ancho total*/
}

    /* FORMULARIO */
#modificarPreguntas form, #gestionPreguntas form {
    background-color: var(--color-secundario);
    width: 47.55%; /*700px * 100 /1472 (ancho usable main) = 47.55%  ANCCHO TOTAL FORM (en px) = 700+80 = 780*/
    padding:2.717%; /*40PX * 100 /1472 (ancho usable main) =2.717%*/
    border-radius: 15px;
    margin:0 auto;
    text-align:center;
    font-family: 'News Cycle', sans-serif;
}

/* OJO: Si querías que el formulario y la etiqueta se vieran afectados JUNTOS, usa esto: */
#modificarPreguntas form, 
#gestionPreguntas form,
#modificarPreguntas label,
#gestionPreguntas label {
    display: block;
}

#modificarPreguntas label, #gestionPreguntas label{
    font-weight: bolder;
}
#modificarPreguntas input,
#modificarPreguntas textarea,
#gestionPreguntas input, 
#gestionPreguntas textarea {
    margin:2.85% auto; /*20px *100 / 700(ancho usable form) = 2.85*/
    width:42.857%; /*300px *100/700 = 42.857%*/
    padding:1.428% 2.85%; /*10*100 / 700= 2.03%*/ /*20*100 / 700 = 2.85*/
    border-radius:10px;
    color:white;

}

#modificarPreguntas form div, 
#gestionPreguntas form div {
    text-align: center;
    margin-bottom: 15px; 
}

#modificarPreguntas div > img, 
#gestionPreguntas div > img {
    width:35.71%; 
    height:auto;
    display: block; 
    margin-left: auto;
    margin-right: auto;
}



#modificarPreguntas textarea,
#gestionPreguntas textarea {
    padding:4.28% 2.85%; /*30px * 100 /700 = 4.28*/ 
}

#modificarPreguntas input[type="text"], 
#modificarPreguntas input[type="number"], 
#modificarPreguntas input[type="submit"], 
#modificarPreguntas textarea,
#gestionPreguntas input[type="text"], 
#gestionPreguntas input[type="number"], 
#gestionPreguntas input[type="submit"], 
#gestionPreguntas textarea {
    background:var(--color-fondo);
}

#modificarPreguntas #contenedorRespuestas,
#gestionPreguntas #contenedorRespuestas {
    width: 100%; /*100% del ancho usable formulario (700px)*/
    display:grid;
    grid-template-columns: 1fr 1fr;/*2 COLUMNAS. 700/2 = 350PX CADA COLUMNA*/
    gap:2.66%; /*20*100 / 750 = 2.66*/
}

#modificarPreguntas #contenedorRespuestas div,
#gestionPreguntas #contenedorRespuestas div {
    padding:7.14% 0; /*25px*100 /350(por columna) = 3.57%*/
    margin-bottom:5.714%; /*20px*100 /350 =5.714*/
}
#modificarPreguntas #contenedorRespuestas input[type="radio"],
#gestionPreguntas #contenedorRespuestas input[type="radio"] {
    width:3.82%; /* 13px * 100 / 340(width base de la caja contenedoira. La hemos visto por f12 ya que le ha dado el tamaño automático el display:grid)=3.82%*/ 
}
#modificarPreguntas #contenedorRespuestas input[type="radio"],
#modificarPreguntas #contenedorRespuestas label,
#gestionPreguntas #contenedorRespuestas input[type="radio"],
#gestionPreguntas #contenedorRespuestas label {
    display:inline;
    margin:0;
}

/*PONER COLOR A LAS RESPUESTAS*/
#modificarPreguntas #contenedorRespuestas > :nth-child(1),
#gestionPreguntas #contenedorRespuestas > :nth-child(1){
    background-color: orange;
}

/* Respuesta 2 */
#modificarPreguntas #contenedorRespuestas > :nth-child(2),
#gestionPreguntas #contenedorRespuestas > :nth-child(2){
    background-color: red;
}

/* Respuesta 3 */
#modificarPreguntas #contenedorRespuestas > :nth-child(3),
#gestionPreguntas #contenedorRespuestas > :nth-child(3){
    background-color: blue;
}

/* Respuesta 4 */
#modificarPreguntas #contenedorRespuestas > :nth-child(4),
#gestionPreguntas #contenedorRespuestas > :nth-child(4){
    background-color: green;
}

/* Estilo del botón submit (anteriormente: #gestionPreguntas input[type="submit"]) */
#modificarPreguntas input[type="submit"],
#gestionPreguntas input[type="submit"] {
    margin: 20px auto;
}


/* Ajustamos la distribución del grid para adaptarla al tamaño reducido de la pantalla de la tablet */
@media(max-width:820px){
    #gestionAvatares section{
        grid-template-columns: 1fr 1fr 1fr; /*3 column*/
    }

    #gestionPreguntas #contenedorRespuestas,
    #modificarPreguntas #contenedorRespuestas {
        grid-template-columns: 1fr;
    }
}

.error-msg {
    color: red;
    font-size: 0.9rem;
    margin-top: 3px;
}