/* ==========================================================================
   "Esqueci meu acesso" pelo CNPJ — só a FORMA da tela
   --------------------------------------------------------------------------
   POR QUÊ separado: a mesma tela abre no portal da Iconne (com styles.css e
   componentes.css) e no site da revenda (com revenda.css e o tema DELA). Este
   arquivo não traz cor de marca nenhuma: lê as variáveis da revenda quando
   existem (--rv-*) e as da Iconne quando não (--line, --ink-500…), e cai num
   cinza neutro sem nenhuma das duas. White-label é também não servir a marca
   da Iconne no domínio da revenda.
   Autor: Daniel Santos (Grupo Iconne) · Colaboração: Claude (assistente de IA)
   Versão: 1.0.0 · 2026-10-11
   ========================================================================== */

.recuperar [hidden] {
  display: none !important;
}

.recuperar form {
  display: grid;
  gap: 12px;
}

.recuperar label {
  display: grid;
  gap: 6px;
  font-weight: 600;
}

.recuperar input[type="text"],
.recuperar input[type="email"],
.recuperar input[type="tel"] {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--rv-borda, var(--line, #c9d0d9));
  border-radius: var(--rv-raio, var(--r-sm, 8px));
  background: var(--rv-superficie, var(--surface, #ffffff));
  color: inherit;
  font: inherit;
}

.recuperar__resultado {
  display: grid;
  gap: 10px;
}

.recuperar__resultado > p {
  margin: 0;
}

.recuperar__contatos {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.recuperar__contatos legend {
  margin-bottom: 6px;
  padding: 0;
  font-weight: 600;
}

.recuperar__contato {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--rv-borda, var(--line, #c9d0d9));
  border-radius: var(--rv-raio, var(--r-sm, 8px));
  font-weight: 400 !important;
  cursor: pointer;
}

/* O botão de rádio do jeito do navegador: o styles.css da Iconne dá a todo
   input a forma de campo de texto (largura, altura, borda, sombra no foco). */
.recuperar__contato input {
  width: auto;
  min-height: 0;
  margin: 3px 0 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  appearance: auto;
  flex: none;
}

.recuperar__contato:has(input:checked) {
  border-color: var(--rv-acao, var(--brand, #2f6fb0));
}

.recuperar__contato--indisponivel {
  opacity: 0.7;
  cursor: not-allowed;
}

/* A máscara em fonte de largura fixa: "•••" e as letras alinhadas leem melhor. */
.recuperar__mascara {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
  word-break: break-all;
}

.recuperar__motivo {
  display: block;
  margin-top: 2px;
  font-size: 0.85rem;
}

.recuperar__ajuda {
  font-size: 0.9rem;
}

.recuperar__aviso {
  margin: 0;
}

.recuperar__aviso:empty {
  display: none;
}

.recuperar__aviso--erro {
  color: #8a1c1c;
}

/* O logo da revenda tem fundo escuro opaco (revenda.css): fica numa faixa da
   cor escura do tema, no alto do cartão — e a faixa some sem logo. */
.recuperar__marca {
  display: grid;
  place-items: center;
  padding: 14px;
  border-radius: var(--rv-raio, 8px);
  background: var(--rv-escura, #2f3a48);
}

.recuperar__marca:has(img[hidden]) {
  display: none;
}

.recuperar__marca .rv-logo {
  margin: 0;
}