*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 16px;
}

body{

    background-color: WHITE;

    

    #iniciar{

        width: 100%;
        height: 1000px;
        display: flex;
        justify-content: center;
        align-items: center;
        

        & div{

            width: 60%;
            height: 500px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgb(62, 62, 62);
            flex-direction: column;

            & button{

                width: 250px;
                height: 50px;
                background-color: white;
                display: inline-flex;
                justify-content: center;
                align-items: center;
                /* margin: 10px 10px; */
                border-radius: 10px;
                color: white;
                font-weight: bold;
                border-color: transparent;
                background-color: #002954;
                margin: 10px 0px;
                font-size: 20px;
                cursor: pointer;

                & span{

                    color: white;
                    
                    padding-right: 10px;
                }

                
            }

            & p{

                width: 100%;
                height: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: white;
                font-size: 20px;
                margin-top: 50px;
                font-size: 20px;
            }

        }

        
    }

    #formularios {
  position: relative; /* Para posicionar los paneles absolutamente dentro de él */
  width: 100%;
  height: 400px; /* o ajusta según lo que necesites */
  margin-top: 0px;
  background-color: black;
}

/* Ambos paneles en la misma posición superpuesta */
#registroForm, #loginForm {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity 0.3s ease;
}

/* Opcional: para que uno esté oculto y no ocupe espacio */
#registroForm.hidden, #loginForm.hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

    #registroForm h2, #loginForm h2 {
    color: white;
    margin-bottom: 20px;
    }

    #registerForm2, #loginForm2 {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    }

    input {
    padding: 10px;
    border-radius: 5px;
    border: none;
    font-size: 16px;
    width: 100%;
    }

    button {
    width: 100%;
    height: 50px;
    background-color: #002954; /* azul */
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    margin-top: 10px;

    
    }

    

   
  

    



    button:hover {
    background-color:#002954;
    }
    /* Estilo para la cruz de cierre */
.close-cross {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 24px;
  color: white;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  z-index: 10; /* Para asegurarse que esté por encima */
}

/* Opcional: cambiar color al pasar el mouse */
.close-cross:hover {
  color: orange; /* rojo, por ejemplo */
}


/* Estilo para la flecha atrás */
.back-arrow {
  position: absolute;
  top: 15px;
  left: 15px;
  font-size: 24px;
  color: white; /* gris */
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  z-index: 10;
}

/* Opcional: cambiar color al pasar el mouse */
.back-arrow:hover {
  color: orange;
}

    
}
.panelPrincipal {
  position: relative;
  width: 100%;
  height: 550px;
  background-color: black;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  padding: 20px;
  flex-direction: column;
}





@media (max-width: 431px) and (orientation: portrait){

  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 16px;
}

.panelPrincipal {
  position: relative;
  width: 100%;
  height: 550px;
  background-color: black;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  padding: 20px;
  flex-direction: column;
}


body{

    background-color: WHITE;

    #iniciar{

        width: 100%;
        height: 600px;
        display: flex;
        justify-content: center;
        align-items: center;
        

        & div{

            width: 100%;
            height: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgb(62, 62, 62);
            flex-direction: column;

            & button{

                width: 350px;
                height: 50px;
                background-color: white;
                display: inline-flex;
                justify-content: center;
                align-items: center;
                /* margin: 10px 10px; */
                border-radius: 10px;
                color: white;
                font-weight: bold;
                border-color: transparent;
                background-color: #002954;
                margin: 10px 0px;
                font-size: 20px;
                cursor: pointer;

                & span{

                    color: white;
                    
                    padding-right: 10px;
                }

                
            }

            & p{

                width: 100%;
                height: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: white;
                font-size: 20px;
                margin-top: 50px;
                font-size: 20px;
            }

        }

        
    }

    #formularios {
  position: relative; /* Para posicionar los paneles absolutamente dentro de él */
  width: 100%;
  height: 400px; /* o ajusta según lo que necesites */
  margin-top: 20px;
}

/* Ambos paneles en la misma posición superpuesta */
#registroForm, #loginForm {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity 0.3s ease;
}

/* Opcional: para que uno esté oculto y no ocupe espacio */
#registroForm.hidden, #loginForm.hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

    #registroForm h2, #loginForm h2 {
    color: white;
    margin-bottom: 20px;
    }

    #registerForm2, #loginForm2 {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    }

    input {
    padding: 10px;
    border-radius: 5px;
    border: none;
    font-size: 16px;
    width: 100%;
    }

    button {
    width: 60%;
    height: 50px;
    background-color: #002954; /* azul */
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    margin-top: 10px;

    
    }

    

   
  

    



    button:hover {
    background-color:#002954;
    }
    /* Estilo para la cruz de cierre */
.close-cross {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 24px;
  color: white;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  z-index: 10; /* Para asegurarse que esté por encima */
}

/* Opcional: cambiar color al pasar el mouse */
.close-cross:hover {
  color: orange; /* rojo, por ejemplo */
}


/* Estilo para la flecha atrás */
.back-arrow {
  position: absolute;
  top: 15px;
  left: 15px;
  font-size: 24px;
  color: white; /* gris */
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  z-index: 10;
}

/* Opcional: cambiar color al pasar el mouse */
.back-arrow:hover {
  color: orange;
}

    
}
}


@media (min-width: 1180px) and (max-width: 1930px) {

  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 16px;
}

body{

    background-color: WHITE;

    

    #iniciar{

        width: 100%;
        height: 750px;
        display: flex;
        justify-content: center;
        align-items: center;
        

        & div{

            width: 60%;
            height: 500px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgb(62, 62, 62);
            flex-direction: column;

            & button{

                width: 250px;
                height: 50px;
                background-color: white;
                display: inline-flex;
                justify-content: center;
                align-items: center;
                /* margin: 10px 10px; */
                border-radius: 10px;
                color: white;
                font-weight: bold;
                border-color: transparent;
                background-color: #002954;
                margin: 10px 0px;
                font-size: 20px;
                cursor: pointer;

                & span{

                    color: white;
                    
                    padding-right: 10px;
                }

                
            }

            & p{

                width: 100%;
                height: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: white;
                font-size: 20px;
                margin-top: 50px;
                font-size: 20px;
            }

        }

        
    }

    #formularios {
  position: relative; /* Para posicionar los paneles absolutamente dentro de él */
  width: 100%;
  height: 400px; /* o ajusta según lo que necesites */
  margin-top: 0px;
  background-color: black;
}

/* Ambos paneles en la misma posición superpuesta */
#registroForm, #loginForm {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity 0.3s ease;
}

/* Opcional: para que uno esté oculto y no ocupe espacio */
#registroForm.hidden, #loginForm.hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

    #registroForm h2, #loginForm h2 {
    color: white;
    margin-bottom: 20px;
    }

    #registerForm2, #loginForm2 {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    }

    input {
    padding: 10px;
    border-radius: 5px;
    border: none;
    font-size: 16px;
    width: 100%;
    }

    button {
    width: 100%;
    height: 50px;
    background-color: #002954; /* azul */
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    margin-top: 10px;

    
    }

    

   
  

    



    button:hover {
    background-color:#002954;
    }
    /* Estilo para la cruz de cierre */
.close-cross {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 24px;
  color: white;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  z-index: 10; /* Para asegurarse que esté por encima */
}

/* Opcional: cambiar color al pasar el mouse */
.close-cross:hover {
  color: orange; /* rojo, por ejemplo */
}


/* Estilo para la flecha atrás */
.back-arrow {
  position: absolute;
  top: 15px;
  left: 15px;
  font-size: 24px;
  color: white; /* gris */
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  z-index: 10;
}

/* Opcional: cambiar color al pasar el mouse */
.back-arrow:hover {
  color: orange;
}

    
}
.panelPrincipal {
  position: relative;
  width: 100%;
  height: 550px;
  background-color: black;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  padding: 20px;
  flex-direction: column;
}

}