/*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';
}
/*-------------------------------*/


/* 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 */
}

/*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 1fr 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:4%; 
    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---------------*/
#gesgestionPreguntas body{
    grid-template-rows: auto auto 1fr auto;
}
#gestionPreguntas h1{
    text-align:center;
}

#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 */
#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;
}

#gestionPreguntas form, #gestionPreguntas label{
    display:block;
}

#gestionPreguntas label{
    font-weight: bolder;
}
#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;

}

#gestionPreguntas div>img{
    width:35.71%; /*250*100 / 700 = 35.71%*/
    height:auto;
}

#gestionPreguntas form input[type="number"]{
    width:14.28%; /*100px *100/700 =14.28%; */

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

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

#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*/
}

#gestionPreguntas #contenedorRespuestas div{
    border-radius:20px;
    padding:7.14% 0; /*25px*100 /350(por columna) = 3.57%*/
    margin-bottom:5.714%; /*20px*100 /350 =5.714*/
}
#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%*/ 
}
#gestionPreguntas #contenedorRespuestas input[type="radio"],
#gestionPreguntas #contenedorRespuestas label {
    display:inline;
    margin:0;
}

/*PONER COLOR A LAS RESPUESTAS*/
#gestionPreguntas #contenedorRespuestas > :nth-child(1){
    background-color:orange;
}
#gestionPreguntas #contenedorRespuestas > :nth-child(2){
    background-color:red;
}
#gestionPreguntas #contenedorRespuestas > :nth-child(3){
    background-color:blue;
}
#gestionPreguntas #contenedorRespuestas > :nth-child(4){
    background-color:green;
}

#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{
        grid-template-columns: 1fr;
    }
}

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