/* ==========================================================================
   Recuperar contraseña · se carga después de estilos.css
   Misma marca que el login y crear cuenta (verde, esquinas redondeadas), pero
   en una sola tarjeta central: es un trámite corto de tres pasos y no necesita
   panel de marca.

   Qué paso se ve lo decide el atributo data-paso de .rec-caja (1 a 4).

   Índice: 1 Variables · 2 Página y tarjeta · 3 Cabecera · 4 Progreso
           5 Pasos y titular · 6 Campos · 7 Contraseña · 8 Código
           9 Avisos · 10 Botones y enlaces · 11 Adaptable
   ========================================================================== */


/* 1. Variables ------------------------------------------------------------- */

:root{
  --acento:#17B978;
  --acento-osc:#0f8f5c;
  --acento-bg:#e3f8ef;
  --negro:#0b1210;
  --rojo:#c62f3e;
  --rojo-bg:#fde8ea;
}

/* Los elementos con "hidden" no se ven aunque tengan su propio display */
[hidden]{display:none !important}


/* 2. Página y tarjeta ------------------------------------------------------- */

.rec-pagina{
  flex:1;
  display:grid;
  place-items:center;
  padding:32px 16px;
}

.rec-caja{
  display:grid;
  gap:24px;
  width:min(460px, 100%);
  padding:32px 36px 36px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:0 20px 50px rgba(11,18,16,.12);
}


/* 3. Cabecera: marca y enlace para volver ------------------------------------ */

.rec-cabecera{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.rec-marca{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:18px;
  font-weight:700;
}

.rec-volver{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:14px;
  font-weight:600;
  color:var(--muted);
  text-decoration:none;
}
.rec-volver svg{width:16px; height:16px}
.rec-volver:hover{color:var(--text)}
.rec-volver:focus-visible{outline:2px solid var(--acento); outline-offset:3px; border-radius:4px}


/* 4. Progreso: tres tramos que se rellenan según el paso ----------------------- */

.rec-progreso{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
}

.rec-progreso li{
  position:relative;
  padding-top:14px;
  font-size:12px;
  font-weight:600;
  text-align:center;
  color:var(--muted);
}
.rec-progreso li::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:6px;
  border-radius:999px;
  background:#e6eaf3;
}

/* Tramos hechos */
.rec-caja[data-paso="2"] .rec-progreso li:nth-child(1),
.rec-caja[data-paso="3"] .rec-progreso li:nth-child(-n+2),
.rec-caja[data-paso="4"] .rec-progreso li{color:var(--text)}
.rec-caja[data-paso="2"] .rec-progreso li:nth-child(1)::before,
.rec-caja[data-paso="3"] .rec-progreso li:nth-child(-n+2)::before,
.rec-caja[data-paso="4"] .rec-progreso li::before{background:var(--acento)}

/* Tramo en el que estás */
.rec-caja[data-paso="1"] .rec-progreso li:nth-child(1),
.rec-caja[data-paso="2"] .rec-progreso li:nth-child(2),
.rec-caja[data-paso="3"] .rec-progreso li:nth-child(3){color:var(--acento-osc); font-weight:700}
.rec-caja[data-paso="1"] .rec-progreso li:nth-child(1)::before,
.rec-caja[data-paso="2"] .rec-progreso li:nth-child(2)::before,
.rec-caja[data-paso="3"] .rec-progreso li:nth-child(3)::before{background:var(--acento-osc)}


/* 5. Pasos y titular ------------------------------------------------------------- */

/* Cada paso es un formulario (o el aviso final); solo se ve el que toca */
.paso{display:none}
.rec-caja[data-paso="1"] .paso[data-paso="1"],
.rec-caja[data-paso="2"] .paso[data-paso="2"],
.rec-caja[data-paso="3"] .paso[data-paso="3"],
.rec-caja[data-paso="4"] .paso[data-paso="4"]{
  display:grid;
  gap:20px;
}

.rec-titular{
  display:grid;
  gap:8px;
  justify-items:start;
}
.rec-titular h1{margin:6px 0 0; font-size:24px; line-height:1.25}
.rec-titular p{margin:0; font-size:14px; color:var(--muted)}
.rec-titular .rec-correo{color:var(--text); overflow-wrap:anywhere}

.rec-icono{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border-radius:16px;
  background:var(--acento-bg);
  color:var(--acento-osc);
}
.rec-icono svg{width:26px; height:26px}
.rec-icono-ok{background:var(--acento); color:var(--negro)}


/* 6. Campos ------------------------------------------------------------------------ */

/* Rótulo arriba, caja debajo y, si hace falta, ayuda o aviso */
.rec-campo{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:6px 0;
  align-items:center;
}

.rec-campo label{
  grid-column:1 / -1;
  font-size:13px;
  font-weight:600;
  color:var(--text);
}

.rec-campo input{
  grid-column:1 / -1;
  grid-row:2;
  padding:13px 14px;
  border:1.5px solid var(--line);
  border-radius:12px;
}
.rec-campo input:focus{
  outline:none;
  border-color:var(--acento);
  box-shadow:0 0 0 4px rgba(23,185,120,.18);
}
.rec-campo input.invalid{
  border-color:var(--rojo);
  background:#fff6f7;
}

.rec-campo .ayuda,
.rec-campo .msg-error{
  grid-column:1 / -1;
  margin:0;
  font-size:12px;
}
.rec-campo .ayuda{font-weight:400; color:var(--muted)}


/* 7. Contraseña: el botón "Mostrar" va dentro de la caja, a la derecha ----------------- */

.rec-campo input[type="password"],
.rec-campo input[data-visible]{padding-right:90px}

.rec-campo .mostrarcontrasenha{
  grid-column:2;
  grid-row:2;
  position:relative;
  z-index:1;
  height:34px;
  margin-right:8px;
  padding:0 12px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--acento-osc);
  font:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}
.rec-campo .mostrarcontrasenha:hover{background:var(--acento-bg)}


/* 8. Código de verificación: cifras grandes y espaciadas --------------------------------- */

.rec-campo .rec-codigo{
  padding:14px;
  font:700 28px/1.2 ui-monospace, "SFMono-Regular", Consolas, monospace;
  letter-spacing:.5em;
  text-align:center;
  text-indent:.5em;          /* compensa el espacio que deja el último carácter */
}
.rec-campo .rec-codigo::placeholder{color:#c4ccdb}


/* 9. Avisos -------------------------------------------------------------------------------- */

.error,
.exito{
  margin:0;
  padding:10px 14px;
  border-radius:10px;
  font-size:13px;
  font-weight:600;
}
.error{background:var(--rojo-bg); color:var(--rojo)}
.exito{background:var(--acento-bg); color:var(--acento-osc)}


/* 10. Botones y enlaces -------------------------------------------------------------------------- */

.rec-caja .btn{
  display:block;
  margin:0;
  padding:13px 16px;
  background:var(--acento);
  color:var(--negro);
  border:2px solid var(--acento);
  border-radius:12px;
  font-size:15px;
  text-align:center;
  text-decoration:none;
  transition:background .15s, border-color .15s, color .15s;
}
.rec-caja .btn:hover{
  background:var(--acento-osc);
  border-color:var(--acento-osc);
  color:#fff;
}
.rec-caja .btn:disabled{opacity:.55; cursor:not-allowed}

.rec-caja button:focus-visible,
.rec-caja .btn:focus-visible{outline:2px solid var(--acento-osc); outline-offset:2px}

/* Ayuda debajo del botón: reenviar el código o usar otro correo */
.rec-ayuda{display:grid; gap:6px; justify-items:center}
.rec-ayuda p{margin:0; font-size:14px; color:var(--muted); text-align:center}

.rec-enlace{
  padding:0;
  border:0;
  background:none;
  color:var(--acento-osc);
  font:inherit;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.rec-enlace:hover{color:var(--negro)}
.rec-enlace:disabled{color:var(--muted); text-decoration:none; cursor:not-allowed}

.rec-cuenta{font-variant-numeric:tabular-nums}


/* 11. Adaptable ------------------------------------------------------------------------------------ */

@media (max-width:480px){
  .rec-pagina{padding:16px 12px}
  .rec-caja{padding:24px 20px 28px; border-radius:20px}
  .rec-cabecera{flex-wrap:wrap}
  .rec-campo .rec-codigo{font-size:24px; letter-spacing:.4em; text-indent:.4em}
}