/* cadastro-auto.css — estilos dos componentes de cadastro-auto.js (autocompletar, dicas, chips).
   Usa as variáveis de cor de quem carrega (--marca, --bd, --suave...), com valores de reserva. */

.ac-host { position: relative; }
.ac-lista {
  position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 40;
  margin: 0; padding: 4px; list-style: none; max-height: 280px; overflow-y: auto;
  background: var(--card, #fff); border: 1px solid var(--bd, #e3e6ea); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(20, 40, 80, .16);
}
.ac-lista[hidden] { display: none; }
.ac-lista li { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: .9rem; }
.ac-lista li.ativo, .ac-lista li:hover { background: var(--marca-mc, #f9e8e8); }
.ac-rotulo { color: var(--texto, #2a2d31); }
.ac-detalhe { color: var(--suave, #6b7178); font-size: .76rem; }
/* dedo no lugar do mouse: linhas mais altas (alvo de toque ≥ 44px) */
@media (pointer: coarse) {
  .ac-lista li { padding: 12px 12px; }
  .dica-acao, .chip { padding-top: 8px; padding-bottom: 8px; }
}

.dica { margin-top: 5px; font-size: .8rem; color: var(--suave, #6b7178); line-height: 1.4; }
.dica[hidden] { display: none; }
.dica.ok { color: var(--verde, #168821); }
.dica.erro { color: var(--vermelho, #c62828); }
.dica.alerta { color: #a86b00; }
.dica-acao {
  margin-left: 4px; padding: 2px 10px; border: 1px solid currentColor; border-radius: 100px;
  background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer;
}
.sugestao-orgao { margin-top: 6px; font-size: .82rem; color: var(--suave, #6b7178); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sugestao-orgao[hidden] { display: none; }
.chip {
  padding: 3px 12px; border: 1px solid var(--marca, #ae1917); border-radius: 100px;
  background: #fff; color: var(--marca, #ae1917); font: inherit; font-weight: 700; cursor: pointer;
}
.chip:hover { background: var(--marca-mc, #f9e8e8); }