html, body {
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
    font-family: sans-serif;
    background-color: #dcc3ac;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: 100vh;
}

.header-container{
    display: flex;
    justify-content: flex-start;
}

.logo img{
    width: 250px;
    max-width: 100%;
    height: auto;
    margin: 20px 50px;
}

main{
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
}

.login-section{
    background-color: rgba(255, 247, 233, 0.814);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 20px;
    width: 350px;
    max-width: 90%;
    margin-bottom: 50px;
    text-align: left;
    box-sizing: border-box;
}

h1{ /*Bienvenido...*/
    text-align: center;
    color: #9b6a54;
    font-size: 20px;
}

h2{/*crear cuenta*/
    text-align: center;
    color: #595151eb;
    text-decoration: underline;
    font-size: 18px;
}

.login-formulario{
    display: flex;
    flex-direction: column;
}


label{
    display: inline-block;
    width: 200px;
    margin: 8px 0 4px 2px;
    color: #9b6a54;
    font-weight: bold;
    text-align: left;
}

input[type="text"], input[type="email"], input[type="password"]{
    width: 95%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 10px;
}

.contraseña-crear{
    margin-top: 5px !important;
}


.mail-recuperar{
    width: 95% !important;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus{
    outline: none;
}

/*disminuir el espacio entre contraseña label y el input*/
.pagina-restablecer-contraseña .login-formulario label[for="contraseña"],
.pagina-iniciar-sesion .login-formulario label[for="contraseña"] {
    margin-bottom: -10px !important;
}

button{
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    background-color: #9b6a54;
    color: white;
    padding: 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size:14px;
    margin: 10px 0px 10px 2px;
}

button:hover{
    background-color: #d5a28a;
}

a{
    color: #9b6a54;
    text-decoration: none;
    display: inline;
    margin-top: 0px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

a:hover{
    text-decoration: underline;
}

.invitado, .crear-cuenta{
    text-align: center;
    font-size: medium;
}

.error{
    text-align: center;
    color: red;
    font-size: 0.9em;
    margin-top: 10px;
    margin-bottom: 20px;
}

.login-formulario a.resaltado,
.crear-cuenta a.resaltado{
    display: inline-block;
    transition: transform 0.2s;
}

/*para crear una animacion y dar movimiento */
@keyframes pulso{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.15);
    }
    100%{
        transform: scale(1);
    }
}

.resaltado{
    font-weight: bold;
    text-decoration: underline;
    animation: pulso 1.5s 2;
}

footer{
    flex-shrink: 0;
  width: 100%;
  height: 60px;
  max-height: 80px;
  background-color: #dcc3ac;
  border-top: 2px solid #9b6a54;
  color: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  bottom: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

footer p{
    margin: 10px;
    font-size: 16px;

}

/*estilos para el mensaje una vez recuperada la contraseña*/
.mensaje{
    display: block;
    margin: 10px;
    padding: 10px 15px;
    white-space: normal;
    font-size: 1em;
    text-align: left;
      box-sizing: border-box;
}

.mensaje a {
    color: #9b6a54 !important; 
    text-decoration: underline !important;
    font-weight: bold !important;
    display: inline !important;
}

/*estilos icono ojo al lado de la contraseña*/

.password-container{
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.password-container input{
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 0;
    box-sizing: border-box;
}

.icono-ojo{
    cursor: pointer;
    font-size: 1.2em;
    color: #333;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

/*cuando pones una contraseña nueva, al restablecer, para volver a iniciar sesion, crear un boton*/
.btn-iniciar-sesion {
    display: inline-block;
    background-color: #9b6a54;
    color: white !important;
    padding: 8px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 10px;
    transition: background 0.2s;
}
.btn-iniciar-sesion:hover {
    background-color: #d5a28a;
    color: #fff !important;
}

/*tablet*/
@media (min-width: 768px) and (max-width: 1024px) {
  .header-container {
    justify-content: flex-start;
    margin-bottom: 0;
  }

  .logo {
    width: auto;
    max-width: none;
  }

  .logo img {
    width: 200px;
    margin-left: 24px;
    margin-top: 10px;
    margin-bottom: 0;
  }

  .login-section {
    width: 350px;
    max-width: 90vw;
    margin-top: 0;
    font-size: 1em;
    padding: 20px 30px;
    margin-bottom: 40px;

  }

  main {
  flex: 0 1 auto; /* Permite que main solo ocupe el espacio necesario */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start !important;
  padding-top: 0;
  padding-bottom: 0;
  min-height: 0; /* Permite que main se encoja */
}
    body {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      height: 100vh;
    }

}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    body {
    height: 100vh;
    display: flex;
    flex-direction: column;
  }

  main {
    flex: 0 1 auto; /* No crecer más de lo necesario, pero puede encogerse */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Apila contenido arriba para reducir hueco */
    padding-top: 30px;
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .login-section {
    margin-top: 50px;
    margin-bottom: 200px;
  }

  .logo img {
    margin-top: 16px;
    margin-bottom: 8px;
    margin-left: 10px;
    margin-right: 0;
    width: 200px;
  }
}

@media (max-width: 767px) {
  .header-container {
    justify-content: center;
  }
  .logo img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}