/* Documento estilos */


:root {

    /* paleta de colores */
    --color1: rgb(13, 13, 41);
    --color2: rgb(52, 81, 135);
    --color3: rgb(91, 160, 177);
    --color4: rgb(161, 236, 244);
    --color5: rgb(223, 232, 233);

    --color6: rgb(28, 28, 85); /* en seleccion de personaje */

    --colorboton: rgb(136, 31, 139);
    --botonhover: rgb(209, 135, 211);

    --anchoimagen: 460rem;

    --alto-anuncio: 140rem;

    --colortuto: rgba(52, 81, 135, 0.5);

}

body {

    /* sin espacio de margen (exterior del elemento) */
    margin: 0rem;

    /* alinea el texto */
    text-align: center;

    /* color fondo */
    background-color:var(--color1);

    /* letras */
    font-family: 'Lucida Console', monospace;
    color: var(--color4);

    /* padding-bottom: var(--alto-anuncio); */

}

h1 {

    text-align: center;
    margin: 0rem;
    font-size: 60rem;
    
}

p {

    text-align: center;
    margin: 0rem;
    font-size: 30rem;
    line-height: 1.25;
    
}

button {

    margin: 0rem;
    padding: 15rem;

    word-break: break-word;
    white-space: normal;

    background-color: var(--colorboton);
    color: var(--color5);
    border: none;
    border-radius: 15rem; /* esquinas redondeadas */
    font-size: 30rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

button:hover {

    background-color: var(--botonhover);
    color: var(--color1);
}

button:disabled {
    opacity: 0.5;
    background-color: #ccc;
    color: #666 !important;
    background: #ccc !important;
    cursor: default;
}



/* INICIO PANTALLA 0 */

#pantalla0 {

    padding-bottom: 60rem;
    height: 100vh;

}

/* INICIO BARRA NAVEGACION PANTALLA 0 */
nav {

    /* sin espacio entre elementos dentro de nav */
    font-size: 0rem;

    /* elementos en linea (flex) y ocupando el ancho total de la pantalla */
    display: flex;
    width: 100%;

}

#logo {

    /* flex indica lo que ocupa dentro del contenedor (en este caso el flex de nav, es mayor que uno porque debe ser mayor que los siguientes en el caso del logo) */
    flex: 1.7;

    font-size: 60rem;
    font-weight: bolder;
    
}

nav a {

    flex: 1;

    /* se convierte cada elemento a en un flex para poder alinearlo comodamente */
    display: flex;

    align-items: center;/* centra verticalmente */
    justify-content: center;/* centra horizontalmente */

    height: 100rem;/* altura de la barra de navegacion */

    /* estilo */
    border:1rem solid #000000;
    background-color: var(--color2);
    color: var(--color4);
    font-size: 30rem;
    text-decoration: none; /* sin subrayado */
    transition: background-color 0.3s;

}

/* al poner el raton encima (hover) */
nav a:hover {

    background-color: var(--color5);
    color: var(--color1);
    height: 110rem;

}
/* FIN BARRA NAVEGACION PANTALLA 0 */


/* titulo y boton en pantalla 0 */
#cuerpo {

    display: flex;
    justify-content: space-between;
    height: calc(100vh - 100rem);
    
}

#anunciovertical {

    margin: 30rem 30rem;
    padding: 40rem 60rem;
    justify-content: center;
    background-image: url(ad_placeholder.png);
    background-size: contain;
    

}

#mensajeinicial {

    display: flex;
    flex-direction: column;/* titulo y boton se disponen en vertical */
    align-items: center;/* centra verticalmente */
    justify-content: center;/* centra horizontalmente */

}

/* tamaño de letra mensaje inicial */
#mensajeinicial h1 {

    font-size: 100rem;

}

#tutorialjuego {

    margin-right: 10rem;
    margin-top: 100rem;
    font-size: 45rem;

}

#tuto {
    display: none;
    /* Sera display flex cuando se active */
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* Para salir por encima */
    position: fixed;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;


    background-color: var(--colortuto)


}

#cerrar {

    font-size: 30rem;
    color: white;
    cursor: pointer;
    background-color: red;
    width: 50vw;
}

#tuto img {
    width: 50vw;
    height: 75vh;
}



#comenzarjuego {

    margin-left: 10rem;
    margin-top: 100rem;
    font-size: 45rem;

}

/* FIN PANTALLA 0 */

/* INICIO PANTALLA 1 */

#pantalla1 {

    padding-bottom: 60rem;

}

#dificultad {

    margin-top: 80rem ;
    margin-bottom: 70rem;

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

}

#dificultad p {

    font-size: 55rem;

}

select {

    margin-left: 30rem;
    padding: 10rem;
    text-align: center;
    text-align-last: center;



    background-color: var(--color3);
    font-size: 30rem;
    font-weight: bold;
    border-radius: 10rem;
    color: black;

    appearance: none; /* quita la flechita */
    
}

select:hover {

background-color: var(--color2); 
color: var(--color5);  

}

select:focus {
    background-color: var(--color2);
    color: var(--color5);
    border-color: white;
    outline: none;
}

/* estilo de las opciones desplegadas */
select option {

    background-color: var(--color5);
    color: black;

}

main p {

    font-size: 40rem;

}

#botonesHistorias {

    margin-top: 80rem;
    margin-bottom: 90rem;

    display: flex;

    gap: 80rem;               
    justify-content: center;

}

#botonesHistorias button {

    max-width: 450rem;
    width: 100%;
    padding: 20rem;
    
    display: inline-block; /* ajusta la altura del boton si el texto es largo */

    background: radial-gradient(
        ellipse at center,
        #097eb0,  /* azul medio */
        #5b52db,  /* violeta azulado */
        #9c43e7  /* púrpura */
    );
    
    font-weight: bold;

}

#botonesHistorias button:hover {

    background: radial-gradient(
        ellipse at center,
        #9c43e7,  /* púrpura */
        #5b52db,  /* violeta azulado */
        #097eb0  /* azul medio */
    );
    color: var(--color1);

}

#escribeHistoria {

    margin-top: 50rem;
    margin-bottom: 70rem;

    display: flex;

    align-items: center;
    justify-content: center;

}

input {

    padding: 10rem;
    font-size: 25rem;
    border: 1rem solid black;
    border-radius: 5rem;
    width: 100%;
    max-width: 800rem;
    background-color: var(--color4);
    color: black;
    
}

input::placeholder {

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


    font-size: 25rem;
    color: black;
    opacity: 1; /* Evita que se vea muy tenue en algunos navegadores */

}

input:focus {
    border-color: white;
    outline: none;
}

input:disabled {
    opacity: 0.5;
    background-color: #ccc;
    color: #666;
    cursor: default;
}

#barradetextoboton {

    margin-left: 50rem;

    background: radial-gradient(
        ellipse at center,
        #097eb0,  /* azul medio */
        #5b52db,  /* violeta azulado */
        #9c43e7  /* púrpura */
    );
    
    font-weight: bold;

}

#barradetextoboton:hover {

    background: radial-gradient(
        ellipse at center,
        #9c43e7,  /* púrpura */
        #5b52db,  /* violeta azulado */
        #097eb0  /* azul medio */
    );
    color: var(--color1);

}

#contextodisplayP1 {

    padding: 0rem 90rem;

}

#cambiarPantalla2 {

    margin-top: 40rem;

}

/* FIN PANTALLA 1*/

/* INICIO PANTALLA 2*/

#pantalla2 {

    display: flex;

}

#contenedorPersonajes {

    margin-left: 50rem;
    margin-top: 50rem;
    margin-right: 50rem;
    padding-bottom: 60rem;

    width: var(--anchoimagen);

}

#contenedorPersonajes p {

    margin-bottom: 25rem;
    font-size: 40rem;

}

#contenedorImagenes img{

    width: var(--anchoimagen);

}

#contenedorImagenes .imagen {

    display: none;

}

#contenedorImagenes .imagen.visible {

    display: flex;
    
}

    #descripcionPersonajes p {

    margin-top: 30rem;
    margin-left: 10rem;
    font-size: 30rem;
    text-align: left;

}       

#descripcionPersonajes .descrp {

    display: none;

}

#descripcionPersonajes .descrp.visible {

    display: flex;
    
}        

#botonesPersonajes {

    margin-top: 20rem;

    display: flex;
    justify-content: center;
    gap: 50rem;

}

#botonesPersonajes button{

    max-width: 150rem;
    width: 100%;
    
}

#contenedorObjetivos {

    padding-right: 50rem;
    padding-top: 115rem;

    min-height: 100vh;
    width: 100vw;

    align-items: center;

    background-color: var(--color6);

}

#contenedorObjetivos p {

    margin-bottom: 50rem;
    padding: 0rem 50rem;

}

#objetivosDelPersonaje {

    padding: 60rem 80rem; 
    display: flex;

    gap: 60rem;

}

#objetivosDelPersonaje button {

    max-width: 450rem;
    width: 100%;


    background: radial-gradient(
        ellipse at center,
        #097eb0,  /* azul medio */
        #5b52db,  /* violeta azulado */
        #9c43e7  /* púrpura */
    );
    
    font-weight: bold;

}

#objetivosDelPersonaje button:hover {

    background: radial-gradient(
        ellipse at center,
        #9c43e7,  /* púrpura */
        #5b52db,  /* violeta azulado */
        #097eb0  /* azul medio */
    );
    color: var(--color1);

}

#cambiarPantalla3 {

    margin-bottom: 80rem;

}

/* FIN PAGINA 2 */

/* INICIO PAGINA 3 */

#pantalla3 {

    margin-top: 50rem;
    padding-bottom: 60rem;

}

#pantalla3 > * {

    padding: 30rem 90rem;
    white-space: pre-line;

}

#input-contenedor {

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50rem;

}

#entradatextstory {

    max-width: 1000rem;
    
}

#entradatextstory::placeholder {

    padding-left: 5rem;

}

#continuarlahistoria {

    background: radial-gradient(
        ellipse at center,
        #097eb0,  /* azul medio */
        #5b52db,  /* violeta azulado */
        #9c43e7  /* púrpura */
    );
    
    font-weight: bold;

}

#continuarlahistoria:hover {

    background: radial-gradient(
        ellipse at center,
        #9c43e7,  /* púrpura */
        #5b52db,  /* violeta azulado */
        #097eb0  /* azul medio */
    );
    color: var(--color1);

}

#situacion-actual {

    text-align: center;

}

#recordatorio {

    margin-top: 70rem;

    display: flex;
    flex-direction: column;
    gap: 40rem;

}

#recordatorio p {

    font-size: 25rem;

}

#replay {

    margin-top: 20rem;

    display: flex;
    justify-content: center;
    gap: 50rem;

}

/* FIN PAGINA 3 */

#generando {

    padding: 80rem 80rem;
    font-size: 40rem;
    color: var(--botonhover);

}

.generated {

	font-size:20rem;
	line-height:35rem;
	list-style-type:disc;
	color: var(--botonhover);

}

.answer {

	font-size:30rem;
	line-height:35rem;
	list-style-type:disc;
	color: var(--color3);

}

/* .anuncios {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #333;
    color: white;
    height: var(--alto-anuncio);
    text-align: center;
    background-image: url("logo.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
} */