/* --------------------------------------------------
   RESET BÁSICO
   -------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}

/* --------------------------------------------------
   ESTILOS GENERALES PARA PÁGINAS DE AUTENTICACIÓN
   -------------------------------------------------- */
body{
  font-family:Arial,sans-serif;
  margin:0;
  padding:20px;
  background:#1e1e1e;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  color:#fff;
}

/* --------------------------------------------------
   CONTENEDOR PRINCIPAL
   -------------------------------------------------- */
.container{
  max-width:400px;
  width:100%;
  padding:20px;
  background:#444;
  border-radius:8px;
  box-shadow:0 2px 4px rgba(0,0,0,.1);
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.hidden{display:none}

/* --------------------------------------------------
   TITULOS
   -------------------------------------------------- */
h2{color:#fff;margin-bottom:20px}

/* --------------------------------------------------
   FORMULARIO
   -------------------------------------------------- */
form{display:flex;flex-direction:column;gap:10px;align-items:center}

input[type="text"],
input[type="password"],
input[type="email"]{
  padding:10px;
  font-size:14px;
  border:1px solid #444;
  border-radius:4px;
  width:100%;
  background:#333;
  color:#fff;
}

/* --------------------------------------------------
   ERRORES
   -------------------------------------------------- */
.error,.msg-error{color:#ff4d4d;font-size:14px}
.msg-ok{color:#3dc86d;font-size:14px}

/* --------------------------------------------------
   BOTONES
   -------------------------------------------------- */
button,
.support-button,
.button1,.button2,.button3{
  padding:10px 20px;
  background:#ff5722;
  color:#fff;
  border:2px solid #ff5722;
  border-radius:4px;
  font-size:16px;
  cursor:pointer;
  transition:background .3s ease;
  width:100%;
  text-align:center;
  text-decoration:none;
}
button:hover,
.support-button:hover,
.button1:hover,.button2:hover,.button3:hover{background:#d84315}

/* --------------------------------------------------
   ENLACE OLVIDE CONTRASEÑA
   -------------------------------------------------- */
.forgot-link{margin-top:10px}
.forgot-link a{
  color:#00adb5;text-decoration:none;font-weight:bold;transition:color .3s ease
}
.forgot-link a:hover{color:#fff}

/* --------------------------------------------------
   LABELS
   -------------------------------------------------- */
label{color:#fff;text-align:left;width:100%;font-size:14px}

/* --------------------------------------------------
   ADVANCED FORM (LOGIN ESTILO TARJETA)
   -------------------------------------------------- */
.advanced-form{
  display:flex;flex-direction:column;gap:10px;
  padding:2em;background:#171717;border-radius:25px;
  transition:.4s ease-in-out;align-items:center;text-align:center
}
@media (hover:hover){
  .advanced-form:hover{transform:scale(1.05);border:1px solid #000}
}
#heading{margin:2em 0;color:#fff;font-size:1.2em;text-align:center}

/* Campo con icono */
.field{
  display:flex;align-items:center;gap:.5em;border-radius:25px;
  padding:.6em;background:#171717;width:100%;
  box-shadow:inset 2px 5px 10px #050505
}
.input-icon{width:1.3em;height:1.3em;fill:#fff}
.input-field{
  background:none;border:none;outline:none;width:100%;color:#d3d3d3
}

/* Botonera dentro del formulario */
.advanced-form .btn{width:100%;display:flex;flex-direction:column;gap:10px}
.button1,.button2,.button3{
  padding:.5em;background:#252525;color:#fff;border:none;border-radius:5px;transition:.4s
}
.button1:hover,.button2:hover,.button3:hover{background:#000}

/* --------------------------------------------------
   MEDIA QUERIES
   -------------------------------------------------- */

/* ------- Teléfonos (≤600 px) ------- */
@media (max-width:600px){
  .container{padding:10px}
  h2{font-size:1.5em}

  /* tamaño confortable inicial de campos y botones */
  input[type="text"],
  input[type="password"],
  input[type="email"],
  .input-field{
    font-size:1rem;           /* 16 px */
    line-height:1.4;
    padding:1rem;
  }
  button,
  .support-button,
  .button1,.button2,.button3{
    font-size:1rem;
    padding:12px;
  }

  /* Formularios de reset con ancho 95 % */
  .container.reset,
  .advanced-form.reset{
    width:95%;max-width:95%;
  }
  .container.reset input,
  .advanced-form.reset .input-field,
  .container.reset button,
  .advanced-form.reset .button1,
  .advanced-form.reset .button2{
    font-size:1rem;
    padding:1rem;
  }
}

/* ------- Tablets ------- */
@media (min-width:601px) and (max-width:992px){
  .container{padding:15px}
  h2{font-size:1.8em}
  button,
  .support-button,
  .button1,.button2,.button3{font-size:1.1em}
}

/* ------- Laptops y desktop ------- */
@media (min-width:993px){
  .container{padding:20px}
  h2{font-size:2em}
  button,
  .support-button,
  .button1,.button2,.button3{font-size:1.2em}
}

/* --------------------------------------------------
   AJUSTES EXTRA MÓVILES MUY PEQUEÑOS (≤480 px)
   -------------------------------------------------- */
@media (max-width:480px){
  body{padding:.75rem}

  h2{font-size:clamp(1rem,5vw,1.3rem)}
  #heading{font-size:clamp(1.05rem,5vw,1.35rem)}

  label{font-size:clamp(.9rem,4.2vw,1rem)}
  button,
  .support-button,
  .button1,.button2,.button3{font-size:clamp(.95rem,4.4vw,1.05rem)}

  @media (hover:none){.advanced-form:hover{transform:none;border:none}}
}