/* /recuperar/ — reaproveita o card estreito (.card.narrow), as abas do modal do site (.modal-tabs/.modal-tab)
   e os botões do design system. Aqui só o arranjo da página; cores só por token. */
.rec-card .btn.primary { width: 100%; justify-content: center; margin-top: 4px; }
.rec-tabs { flex-wrap: wrap; }
.rec-aba { margin-top: 4px; }
.rec-msg { margin: 12px 0 0; line-height: 1.5; }
.rec-msg:empty { display: none; }
.rec-rodape { margin: 16px 0 0; }

/* Checkbox "acesso da rede": em linha (o admin.css deixa input como bloco de largura total). */
.rec-check { display: flex; align-items: flex-start; gap: 8px; color: var(--tj-texto); }
.rec-check input { width: auto; margin: 2px 0 0; flex: none; }

/* Requisitos da senha: cada regra atendida ganha o ✓ verde. */
.rec-requisitos { list-style: none; padding: 0; margin: 0 0 14px; font-size: 13px; color: var(--tj-muted); }
.rec-requisitos li { position: relative; padding: 3px 0 3px 22px; }
.rec-requisitos li::before { content: "•"; position: absolute; left: 6px; top: 3px; color: var(--tj-muted); }
.rec-requisitos li.ok { color: var(--tj-ok); }
.rec-requisitos li.ok::before { content: "✓"; left: 2px; color: var(--tj-ok); font-weight: 900; }

@media (max-width: 520px) {
  .rec-card.narrow { margin: 20px auto; }
  .rec-tabs .modal-tab { padding: 8px 6px; font-size: 13px; }
}