/* Tela Visitas (Módulo Vendas, etapa 8). Traduzido literalmente do
   protótipo do Claude Design ("CDC Vendas - Visitas (standalone).html")
   — todo valor de cor/px abaixo é copiado do markup do protótipo, não
   aproximado. CSS global (não .razor.css) e todo seletor prefixado por
   ".visitas-vendas" — ver .claude/rules/arquitetura.md. */

.visitas-vendas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  min-height: 0;
  position: relative;
}

/* --- Cabeçalho --- */

.visitas-vendas__cabecalho {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.visitas-vendas__titulo {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-ink-forte);
}

.visitas-vendas__subtitulo {
  font-size: 12px;
  color: var(--color-subtle);
  margin-top: 2px;
}

.visitas-vendas__btn-agendar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  background: var(--color-primary-strong);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--success-bg);
  cursor: pointer;
}

.visitas-vendas__btn-agendar:hover {
  background: var(--color-primary-strong);
}

/* --- Barra de foco/filtro --- */

.visitas-vendas__barra-filtros {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.visitas-vendas__spacer {
  flex: 1;
}

.visitas-vendas__label-tipo {
  font-size: 11px;
  color: var(--color-subtle);
  font-weight: 600;
}

.visitas-vendas__select-tipo {
  height: 30px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-ink);
  font-size: 11.5px;
  padding: 0 8px;
  outline: none;
}

.visitas-vendas__chip {
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-subtle);
  cursor: pointer;
}

.visitas-vendas__chip:hover {
  opacity: 0.85;
}

.visitas-vendas__chip--verde {
  border-color: var(--success-border);
  background: var(--success-bg);
  color: var(--color-focus);
}

.visitas-vendas__chip--ambar {
  border-color: var(--warning-border);
  background: var(--warning-bg);
  color: var(--warning-text);
}

.visitas-vendas__chip--azul {
  border-color: var(--info-border);
  background: var(--info-bg);
  color: var(--info-text);
}

/* --- Banner de dica de agrupamento por cidade --- */

.visitas-vendas__dica {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  border-radius: 10px;
  padding: 8px 12px;
}

.visitas-vendas__dica-texto {
  font-size: 11.5px;
  color: var(--success-text);
}

/* --- Erro geral da tela --- */

.visitas-vendas__erro {
  padding: 12px;
  background: var(--danger-bg);
  color: var(--danger-text);
  border-radius: 8px;
  border: 1px solid var(--danger-border);
}

/* --- Painel/listagem --- */

.visitas-vendas__painel {
  flex: 1;
  min-height: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.visitas-vendas__cabecalho-colunas {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--color-border);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-disabled);
}

.visitas-vendas__col-data {
  width: 62px;
  flex: none;
}

.visitas-vendas__col-cliente {
  flex: 1;
  min-width: 0;
}

.visitas-vendas__col-cidade {
  width: 132px;
  flex: none;
}

.visitas-vendas__col-vendedor {
  width: 96px;
  flex: none;
}

.visitas-vendas__col-tipo {
  width: 104px;
  flex: none;
}

.visitas-vendas__col-status {
  width: 100px;
  flex: none;
}

.visitas-vendas__col-acao {
  width: 126px;
  flex: none;
}

.visitas-vendas__corpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.visitas-vendas__grupo-cabecalho {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--color-surface-subtle);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
}

.visitas-vendas__grupo-titulo {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.visitas-vendas__grupo-contagem {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-subtle);
}

.visitas-vendas__linha {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-surface-subtle);
}

.visitas-vendas__linha-data {
  width: 62px;
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-ink);
}

.visitas-vendas__linha-cliente {
  flex: 1;
  min-width: 0;
}

.visitas-vendas__linha-cliente-nome {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-ink-forte);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visitas-vendas__linha-cliente-sub-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-top: 3px;
}

.visitas-vendas__badge-atrasada {
  flex: none;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  color: var(--warning-text);
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: 999px;
  padding: 1px 7px;
}

.visitas-vendas__linha-sub {
  min-width: 0;
  font-size: 10.5px;
  color: var(--color-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visitas-vendas__linha-cidade {
  width: 132px;
  flex: none;
  font-size: 11px;
  color: var(--color-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visitas-vendas__linha-vendedor {
  width: 96px;
  flex: none;
  font-size: 11px;
  color: var(--color-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visitas-vendas__linha-tipo {
  width: 104px;
  flex: none;
  font-size: 10.5px;
  color: var(--color-muted);
}

.visitas-vendas__linha-status {
  width: 100px;
  flex: none;
}

.visitas-vendas__badge-status {
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}

.visitas-vendas__linha-acao {
  width: 126px;
  flex: none;
  display: flex;
  justify-content: flex-end;
}

.visitas-vendas__btn-acao {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--color-focus);
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  border-radius: 8px;
  padding: 5px 9px;
  white-space: nowrap;
  cursor: pointer;
}

.visitas-vendas__btn-acao:hover {
  background: var(--success-bg);
}

/* --- Estado vazio --- */

.visitas-vendas__vazio {
  height: 100%;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--color-disabled);
}

.visitas-vendas__vazio-texto {
  font-size: 12.5px;
  color: var(--color-subtle);
}

.visitas-vendas__vazio-link {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-focus);
  cursor: pointer;
}

.visitas-vendas__vazio-link:hover {
  opacity: 0.85;
}

/* --- Banner de Desfazer --- */

.visitas-vendas__undo {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-subtle);
}

.visitas-vendas__undo-texto {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  color: var(--color-ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visitas-vendas__btn-desfazer {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--warning-text);
  border: 1px solid var(--warning-border);
  background: var(--warning-wash);
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
}

.visitas-vendas__btn-desfazer:hover {
  background: var(--warning-bg);
}

.visitas-vendas__btn-fechar-undo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  color: var(--color-subtle);
  cursor: pointer;
}

.visitas-vendas__btn-fechar-undo:hover {
  color: var(--color-ink);
}

/* --- Modais (Agendar / Concluir) --- */

.visitas-vendas__overlay {
  position: absolute;
  inset: 0;
  background: var(--color-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
}

.visitas-vendas__modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: var(--shadow-modal);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.visitas-vendas__modal--agendar {
  width: 440px;
}

.visitas-vendas__modal--concluir {
  width: 420px;
}

.visitas-vendas__modal-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.visitas-vendas__modal-titulo {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-ink-forte);
}

.visitas-vendas__modal-subtitulo {
  font-size: 11.5px;
  color: var(--color-subtle);
  margin-top: 2px;
}

.visitas-vendas__modal-fechar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: var(--color-subtle);
  cursor: pointer;
}

.visitas-vendas__modal-fechar:hover {
  color: var(--color-ink);
}

.visitas-vendas__campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.visitas-vendas__campo--busca-cliente {
  position: relative;
}

.visitas-vendas__rotulo {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-muted);
}

.visitas-vendas__rotulo-opcional {
  color: var(--color-disabled);
  font-weight: 500;
}

.visitas-vendas__input,
.visitas-vendas__textarea {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 9px;
  color: var(--color-ink);
  font-size: 12.5px;
  outline: none;
  box-sizing: border-box;
}

.visitas-vendas__input {
  height: 36px;
  padding: 0 11px;
  width: 100%;
}

.visitas-vendas__textarea {
  padding: 9px 11px;
  line-height: 1.45;
  resize: none;
  width: 100%;
}

.visitas-vendas__textarea--obs {
  height: 62px;
}

.visitas-vendas__textarea--desfecho {
  height: 84px;
}

.visitas-vendas__sugestoes {
  position: absolute;
  top: 64px;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--color-bg);
  border: 1px solid var(--color-border-soft);
  border-radius: 10px;
  max-height: 176px;
  overflow-y: auto;
  box-shadow: var(--shadow-popover);
}

.visitas-vendas__sugestao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  padding: 8px 11px;
  border-bottom: 1px solid var(--color-surface);
  cursor: pointer;
}

.visitas-vendas__sugestao:hover {
  background: var(--color-surface);
}

.visitas-vendas__sugestao-nome {
  font-size: 12px;
  color: var(--color-ink);
  font-weight: 600;
}

.visitas-vendas__sugestao-cidade {
  font-size: 10.5px;
  color: var(--color-subtle);
}

.visitas-vendas__sugestao-vazio {
  padding: 10px;
  font-size: 11.5px;
  color: var(--color-subtle);
}

.visitas-vendas__cliente-confirmado {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--color-focus);
  font-weight: 600;
}

.visitas-vendas__linha-campos {
  display: flex;
  gap: 12px;
}

.visitas-vendas__campo-data {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.visitas-vendas__campo-tipo {
  flex: 1.4;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.visitas-vendas__tipo-chips {
  display: flex;
  gap: 6px;
}

.visitas-vendas__erro-form {
  font-size: 11.5px;
  color: var(--danger-text);
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  border-radius: 9px;
  padding: 8px 11px;
}

.visitas-vendas__modal-rodape {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.visitas-vendas__modal-rodape--entre {
  justify-content: space-between;
}

.visitas-vendas__btn-cancelar {
  height: 36px;
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-muted);
  border-radius: 9px;
  cursor: pointer;
}

.visitas-vendas__btn-cancelar:hover {
  color: var(--color-ink);
}

.visitas-vendas__btn-confirmar {
  height: 36px;
  padding: 0 18px;
  background: var(--color-primary-strong);
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--success-bg);
  cursor: pointer;
}

.visitas-vendas__btn-confirmar:hover:not(:disabled) {
  background: var(--color-primary-strong);
}

.visitas-vendas__btn-confirmar:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.visitas-vendas__btn-concluir-sem {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-subtle);
  cursor: pointer;
}

.visitas-vendas__btn-concluir-sem:hover {
  color: var(--color-muted);
}