:root {
  --color1: #1d1d1b;
  --color2: #4e4e4e;
  --color3: #d1ccca;
  --color4: #fbdcd9;
  --color5: #ac988f;
  --color6: #e8dacf;
  --color7: #ffffff;

  --color8: #f6f6b3;
  --color9: #b08f43;

  --color10: #f1f1f3;
  --color11: #b4b6b9;

  --gradient-start: #e1ba70;
  --gradient-mid: #aa7648;
  --gradient-end: #a57c51;

  --hover-gradient-start: #f7d488;
  --hover-gradient-mid: #e1b35d;
  --hover-gradient-end: #d19c4b;

  --header-h: 80px;
}

* {
  box-sizing: border-box;
}

body {
  background: var(--color7);
  font-family: "Kalnia", serif;
}

#main{
  width: 100%;
  min-height: calc(100svh - var(--header-h)); /* área visible sin el header fijo */
  display: flex;
  align-items: center;         /* centro vertical */
  justify-content: center;     /* centro horizontal */
  padding: 32px 16px;          /* padding simétrico */
  background: #ffffff;
}

   .card{
        width:100%;
        max-width:600px;
        margin:0;  
    }

    .title{
      font-family: "Kalnia", serif;
      letter-spacing:0.18em;
      text-transform:uppercase;
      text-align:center;
      font-weight:600;
      font-size:24px;
      padding:0 16px;
    }

    #formUsuario{
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
      background: white;
      padding: 2.5rem;
      border-radius: 6px;
      width: 100%;          /* ocupa todo el ancho del .card */
      max-width: 100%;      /* evita que sea más grande que la card */
      text-align: left;
      position: relative;
      box-sizing: border-box;
    }

    #formUsuario input{
      width:100%;
      height:48px;
      border:1px solid black;
      outline:none;
      background:#fff;
      padding:0 16px;
      font-size:18px;
      letter-spacing:0.04em;
      color:var(--text);
      transition:border-color .2s ease, box-shadow .2s ease;
    }

    #formUsuario input::placeholder{
      color:#9c9c9c;
      letter-spacing:0.08em;
    }

    #formUsuario input:focus{
      border-color:#b0b0b0;
      box-shadow:0 0 0 3px rgba(0,0,0,.04);
    }

    .btn{
      width:100%;
      height:50px;
      border:none;
      cursor:pointer;
      border-radius:0;
      text-transform:uppercase;
      letter-spacing:.12em;
      font-size:18px;
      color:white;
      background:linear-gradient(90deg, #2C2C2C, #545454);
      transition:transform .06s ease, opacity .2s ease;
    }
    .btn:active{ transform:scale(0.996); }
    .btn:hover{ opacity:.94; }

    .helper{
      margin-top:14px;
      text-align:center;
      color:rgb(110, 110, 110);
      font-size:18px;
    }
    .helper a{
      color:#3b3b3b;
      text-decoration:none;
      border-bottom:1px solid transparent;
    }
    .helper a:hover{
      border-color:#3b3b3b;
    }

.password-container {
  position: relative;
  width: 100%;
}

.password-container input {
  width: 100%;
  height: 48px;
  padding-right: 44px; /* espacio para el botón/ícono */
}

.toggle-password {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
}

/* Íconos superpuestos con crossfade */
.icon-eye {
  position: absolute;
  width: 22px;
  height: 22px;
  opacity: 0;
  transition: opacity .18s ease; /* transición sutil */
  pointer-events: none;
}

/* estado por defecto: contraseña oculta → ojo abierto visible */
.eye-open { opacity: 0.8; }

/* al mostrar contraseña: cruzamos a ojo cerrado */
.password-container.password-visible .eye-open { opacity: 0; }
.password-container.password-visible .eye-closed { opacity: 0.9; }

    /* Responsivo pequeño */
    @media (max-width: 420px){
      .title{ font-size:20px; letter-spacing:.15em; }
    }