/* =========================================================
   SILENCE DROP — RECUPERAR CONTRASEÑA
========================================================= */

:root {

  --bg:
    #050504;

  --panel:
    #0c0c0b;

  --panel-soft:
    #11110f;

  --text:
    #f5efe4;

  --muted:
    #837e75;

  --border:
    rgba(255, 255, 255, .11);

  --gold:
    #b9852f;

  --gold-light:
    #d8ad55;

  --error:
    #d96868;

  --success:
    #9abf86;

}


* {
  box-sizing: border-box;
}


html {
  min-height: 100%;
}


body {

  min-height: 100vh;

  margin: 0;

  background:
    radial-gradient(
      circle at 70% 30%,
      rgba(185, 133, 47, .07),
      transparent 34%
    ),
    #050504;

  color:
    var(--text);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

}


/* =========================================================
   PÁGINA
========================================================= */

.recovery-page {

  position: relative;

  min-height: 100vh;

  display: flex;

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

  padding:
    50px
    20px;

}


/* DETALLE DE FONDO */

.recovery-page::before {

  content: "";

  position: fixed;

  inset: 0;

  pointer-events: none;

  opacity: .4;

  background-image:
    linear-gradient(
      rgba(255,255,255,.015) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.015) 1px,
      transparent 1px
    );

  background-size:
    40px 40px;

}



/* =========================================================
   TARJETA
========================================================= */

.recovery-card {

  position: relative;

  z-index: 2;

  width:
    min(
      500px,
      100%
    );

  padding:
    42px;

  border:
    1px solid
    var(--border);

  background:
    linear-gradient(
      145deg,
      #10100e,
      #070706
    );

  box-shadow:
    0 35px 100px
    rgba(0, 0, 0, .55);

}


.recovery-card::before {

  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--gold-light),
      transparent
    );

}



/* =========================================================
   LOGO
========================================================= */

.recovery-logo {

  display:
    inline-flex;

  margin-bottom:
    38px;

}


.recovery-logo img {

  display:
    block;

  width:
    155px;

  height:
    auto;

  object-fit:
    contain;

}



/* =========================================================
   ENCABEZADO
========================================================= */

.recovery-heading {

  margin-bottom:
    28px;

}


.recovery-kicker {

  display:
    block;

  margin-bottom:
    10px;

  color:
    var(--gold-light);

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    4px;

}


.recovery-heading h1 {

  margin:
    0 0
    13px;

  color:
    var(--text);

  font-size:
    clamp(
      30px,
      6vw,
      42px
    );

  font-weight:
    900;

  line-height:
    .95;

  letter-spacing:
    -1.4px;

}


.recovery-heading p {

  max-width:
    390px;

  margin:
    0;

  color:
    var(--muted);

  font-size:
    12px;

  line-height:
    1.7;

}



/* =========================================================
   FORMULARIOS
========================================================= */

.recovery-form {

  display:
    none;

}


.recovery-form.active {

  display:
    block;

  animation:
    recoveryShow
    .3s ease;

}


@keyframes recoveryShow {

  from {

    opacity:
      0;

    transform:
      translateY(8px);

  }

  to {

    opacity:
      1;

    transform:
      translateY(0);

  }

}



/* =========================================================
   INPUT
========================================================= */

.form-field {

  margin-bottom:
    18px;

}


.form-field label {

  display:
    block;

  margin-bottom:
    8px;

  color:
    #aaa49b;

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    1.3px;

}


.form-field input {

  width:
    100%;

  height:
    52px;

  padding:
    0 15px;

  outline:
    0;

  border:
    1px solid
    var(--border);

  border-radius:
    0;

  background:
    #080807;

  color:
    var(--text);

  font-size:
    13px;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;

}


.form-field input::placeholder {

  color:
    #47443f;

}


.form-field input:focus {

  border-color:
    var(--gold);

  box-shadow:
    0 0 0 2px
    rgba(185, 133, 47, .08);

}



/* =========================================================
   CÓDIGO
========================================================= */

.verification-code {

  text-align:
    center;

  font-size:
    22px !important;

  font-weight:
    800;

  letter-spacing:
    9px;

}


.code-information {

  margin-bottom:
    22px;

  padding:
    13px 15px;

  border-left:
    2px solid
    var(--gold);

  background:
    rgba(185, 133, 47, .05);

}


.code-information span {

  display:
    block;

  margin-bottom:
    4px;

  color:
    #777;

  font-size:
    8px;

  letter-spacing:
    1.6px;

}


.code-information strong {

  color:
    #ddd6ca;

  font-size:
    11px;

}



/* =========================================================
   BOTÓN PRINCIPAL
========================================================= */

.recovery-button {

  position:
    relative;

  width:
    100%;

  height:
    52px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    0 17px;

  border:
    1px solid
    var(--gold);

  background:
    transparent;

  color:
    var(--text);

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    .4px;

  text-decoration:
    none;

  cursor:
    pointer;

  overflow:
    hidden;

  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease;

}


.recovery-button:hover {

  background:
    var(--gold);

  border-color:
    var(--gold-light);

  color:
    #050504;

}


.recovery-button:disabled {

  opacity:
    .45;

  cursor:
    not-allowed;

}



/* =========================================================
   ACCIONES SECUNDARIAS
========================================================= */

.recovery-secondary-actions {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;

  margin-top:
    18px;

}


.text-button {

  padding:
    0;

  border:
    0;

  background:
    transparent;

  color:
    #706b63;

  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    1px;

  cursor:
    pointer;

}


.text-button:hover {

  color:
    var(--gold-light);

}



/* =========================================================
   CONTRASEÑA
========================================================= */

.password-field {

  position:
    relative;

}


.password-field input {

  padding-right:
    65px;

}


.password-toggle {

  position:
    absolute;

  top:
    50%;

  right:
    14px;

  transform:
    translateY(-50%);

  border:
    0;

  background:
    transparent;

  color:
    #777;

  font-size:
    8px;

  font-weight:
    800;

  cursor:
    pointer;

}


.password-toggle:hover {

  color:
    var(--gold-light);

}



/* =========================================================
   REGLAS
========================================================= */

.password-rules {

  display:
    grid;

  gap:
    6px;

  margin:
    -3px 0
    20px;

  color:
    #68635b;

  font-size:
    9px;

}


.password-rules span.valid {

  color:
    var(--success);

}



/* =========================================================
   VERIFICADO
========================================================= */

.verified-badge {

  width:
    fit-content;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  margin-bottom:
    22px;

  padding:
    8px 11px;

  border:
    1px solid
    rgba(154, 191, 134, .2);

  color:
    #a4c694;

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    1px;

}



/* =========================================================
   MENSAJES
========================================================= */

.recovery-message {

  display:
    none;

  margin-bottom:
    18px;

  padding:
    11px 13px;

  font-size:
    10px;

  line-height:
    1.5;

}


.recovery-message.error {

  display:
    block;

  border:
    1px solid
    rgba(217, 104, 104, .25);

  background:
    rgba(217, 104, 104, .06);

  color:
    #df8d8d;

}


.recovery-message.success {

  display:
    block;

  border:
    1px solid
    rgba(154, 191, 134, .23);

  background:
    rgba(154, 191, 134, .05);

  color:
    #aacb99;

}



/* =========================================================
   ÉXITO FINAL
========================================================= */

.recovery-success {

  display:
    none;

  text-align:
    center;

}


.recovery-success.active {

  display:
    block;

  animation:
    recoveryShow
    .3s ease;

}


.success-icon {

  width:
    62px;

  height:
    62px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin:
    0 auto
    22px;

  border:
    1px solid
    var(--gold);

  border-radius:
    50%;

  color:
    var(--gold-light);

  font-size:
    25px;

}


.recovery-success h2 {

  margin:
    0 0
    12px;

  font-size:
    28px;

}


.recovery-success p {

  margin:
    0 0
    25px;

  color:
    var(--muted);

  font-size:
    12px;

  line-height:
    1.6;

}



/* =========================================================
   VOLVER
========================================================= */

.back-login {

  display:
    block;

  margin-top:
    26px;

  color:
    #5d5953;

  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    1.2px;

  text-align:
    center;

  transition:
    color .2s ease;

}


.back-login:hover {

  color:
    var(--gold-light);

}



/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 600px) {

  .recovery-page {

    align-items:
      flex-start;

    padding:
      20px 12px;

  }


  .recovery-card {

    min-height:
      calc(
        100dvh - 40px
      );

    padding:
      32px
      22px;

  }


  .recovery-logo {

    margin-bottom:
      45px;

  }


  .recovery-logo img {

    width:
      135px;

  }


  .recovery-heading h1 {

    font-size:
      34px;

  }


  .recovery-secondary-actions {

    flex-direction:
      column;

    align-items:
      flex-start;

  }

}