/* ============================================================
   Artmedica — Recuperación de contraseña

   Esta pantalla NO tiene estilos propios de armazón: carga
   login.css antes y hereda de ahí la retícula, el panel de
   marca, los campos y el botón. Es literalmente la misma
   puerta, así que tiene que verse como la misma puerta.

   Aquí abajo va solo lo que el ingreso no necesitaba:
   pantallas que se turnan, aviso en verde y la lista de
   requisitos de la contraseña.
   ============================================================ */

/* ---------- 1. Pantallas que se turnan ----------
   Las cuatro viven en el mismo documento y solo una está visible.
   Ocultarlas con [hidden] —y no quitándolas del DOM— mantiene el
   foco y los lectores de pantalla en un solo sitio conocido.
   La regla !important de login.css es la que las apaga de verdad. */
.pantalla {
  animation: aparecer 0.22s ease-out;
}

@keyframes aparecer {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 2. Aviso afirmativo ----------
   Mismo cuerpo que .alert (login.css), en verde. Se usa para
   "revisa tu correo" y "contraseña actualizada". */
.alert--ok {
  border-color: rgba(31, 157, 107, 0.3);
  background: rgba(31, 157, 107, 0.07);
  /* Verde oscurecido respecto de --success: sobre el fondo tenue
     de la propia alerta alcanza 5.4:1 y cumple WCAG 2.1 AA. */
  color: #12704b;
}

/* ---------- 3. Requisitos de la contraseña ----------
   Se marcan en vivo mientras se escribe. El estado NO se comunica
   solo por color: cambia también el símbolo, para quien no
   distingue verde de gris. */
.reglas {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  color: var(--ink-450);
}

.reglas li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}

.reglas li::before {
  content: "○";
  flex: none;
  width: 1em;
  text-align: center;
  font-size: 0.9em;
  color: var(--ink-300);
}

.reglas li[data-ok="si"] {
  color: #12704b;
}
.reglas li[data-ok="si"]::before {
  content: "✓";
  color: var(--success);
}

/* ---------- 4. Botón con forma de enlace ----------
   "Solicitar otro enlace" es una acción, no una navegación: tiene
   que ser <button> para el teclado y los lectores de pantalla,
   aunque se lea como enlace. */
.enlace {
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand-blue);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.enlace:hover { color: var(--brand-navy); }

/* ---------- 5. Botón que además es enlace ----------
   El <a class="btn"> de la pantalla final heredaría el subrayado
   que login.css pone a todos los enlaces. */
a.btn:hover { text-decoration: none; }

/* ---------- 6. Detalles de esta pantalla ---------- */
.panel__nota {
  margin: 18px 0 0;
  font-size: 0.875rem;
  color: var(--ink-450);
}

/* El correo al que se envió el enlace, repetido para que se pueda
   comprobar que no hubo una errata. */
.destino {
  font-weight: 600;
  color: var(--brand-navy);
  overflow-wrap: anywhere;
}