.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  min-height: var(--altura-toque);
  padding: 0 var(--espaco-4);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-2);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-weight: 600;
  cursor: pointer;
}
.botao:hover { background: var(--cor-superficie-2); }
.botao:disabled { opacity: .55; cursor: not-allowed; }
.botao--principal { background: var(--cor-primaria); border-color: var(--cor-primaria); color: var(--cor-texto-botao); }
.botao--principal:hover { background: var(--cor-primaria-forte); border-color: var(--cor-primaria-forte); }
.botao--perigo { color: var(--cor-erro); border-color: var(--cor-erro); background: transparent; }
.botao--perigo:hover { background: var(--cor-erro-suave); }
.botao--largo { width: 100%; }
.botao--grande { min-height: 3.25rem; font-size: 1.0625rem; }
.botao--icone { padding: 0; width: var(--altura-toque); }
.botao svg { width: 1.125em; height: 1.125em; flex: none; }

.campo { display: grid; gap: var(--espaco-1); margin-bottom: var(--espaco-4); }
.campo > span { font-size: .875rem; font-weight: 600; color: var(--cor-texto-fraco); }
.campo input, .campo select, .campo textarea {
  min-height: var(--altura-toque);
  padding: var(--espaco-2) var(--espaco-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-2);
  background: var(--cor-superficie);
  width: 100%;
}
.campo textarea { min-height: 5rem; resize: vertical; }
.campo-erro { color: var(--cor-erro); font-size: .875rem; }
.campo-dica { color: var(--cor-texto-fraco); font-size: .8125rem; }

.cartao {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-3);
  box-shadow: var(--sombra-1);
  padding: var(--espaco-5);
}
.cartao + .cartao { margin-top: var(--espaco-4); }
.cartao-titulo { display: flex; align-items: center; gap: var(--espaco-2); margin-bottom: var(--espaco-4); }
.cartao-titulo svg { color: var(--cor-primaria); }

.metrica { display: grid; gap: var(--espaco-1); }
.metrica-rotulo { font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cor-texto-fraco); }
.metrica-valor { font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.abas { display: flex; gap: var(--espaco-1); border-bottom: 1px solid var(--cor-borda); overflow-x: auto; }
.abas a {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  padding: var(--espaco-3) var(--espaco-4);
  border-bottom: 2px solid transparent;
  color: var(--cor-texto-fraco);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.abas a:hover { color: var(--cor-texto); }
.abas a[aria-current="page"] { color: var(--cor-primaria); border-bottom-color: var(--cor-primaria); }

.tabela { width: 100%; border-collapse: collapse; }
.tabela th, .tabela td { padding: var(--espaco-3); border-bottom: 1px solid var(--cor-borda); text-align: left; }
.tabela th { font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cor-texto-fraco); font-weight: 600; }
.tabela td.valor, .tabela th.valor { text-align: right; font-variant-numeric: tabular-nums; }
.tabela tbody tr:hover { background: var(--cor-superficie-2); }
.tabela tfoot td { font-weight: 700; border-bottom: none; }
.rolagem { overflow-x: auto; }

.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  padding: .125rem var(--espaco-2);
  border-radius: var(--raio-cheio);
  font-size: .8125rem;
  font-weight: 600;
  background: var(--cor-superficie-2);
  color: var(--cor-texto-fraco);
}
.selo--aguardando { background: var(--cor-alerta-suave); color: var(--cor-alerta); }
.selo--oferecida { background: var(--cor-alerta-suave); color: var(--cor-alerta); }
.selo--em_andamento { background: var(--cor-primaria-suave); color: var(--cor-primaria-forte); }
.selo--entregue { background: var(--cor-sucesso-suave); color: var(--cor-sucesso); }
.selo--cancelada { background: var(--cor-erro-suave); color: var(--cor-erro); }

.aviso {
  display: flex;
  gap: var(--espaco-3);
  align-items: flex-start;
  padding: var(--espaco-3) var(--espaco-4);
  border-radius: var(--raio-2);
  border: 1px solid var(--cor-borda);
  background: var(--cor-superficie-2);
  margin-bottom: var(--espaco-4);
}
.aviso svg { flex: none; margin-top: .125rem; }
.aviso--erro { background: var(--cor-erro-suave); border-color: var(--cor-erro); color: var(--cor-erro); }
.aviso--ok { background: var(--cor-sucesso-suave); border-color: var(--cor-sucesso); color: var(--cor-sucesso); }
.aviso--atencao { background: var(--cor-alerta-suave); border-color: var(--cor-alerta); color: var(--cor-alerta); }

.vazio { text-align: center; padding: var(--espaco-7) var(--espaco-4); color: var(--cor-texto-fraco); }
.vazio svg { width: 2.5rem; height: 2.5rem; opacity: .5; margin: 0 auto var(--espaco-3); }

.carregando { display: grid; gap: var(--espaco-2); }
.carregando span { height: 1rem; border-radius: var(--raio-1); background: var(--cor-superficie-2); }
@media (prefers-reduced-motion: no-preference) {
  .carregando span { animation: pulsar 1.2s ease-in-out infinite; }
  @keyframes pulsar { 0%, 100% { opacity: 1 } 50% { opacity: .5 } }
}

/* Lista de sugestao dos campos de texto livre (cliente e vendedor) */
.sugestoes {
  position: relative;
}
.sugestoes-lista {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: var(--espaco-1);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-2);
  box-shadow: var(--sombra-2);
  max-height: 14rem;
  overflow-y: auto;
  padding: var(--espaco-1);
}
.sugestoes-lista button {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--espaco-2) var(--espaco-3);
  border: 0;
  border-radius: var(--raio-1);
  background: transparent;
  cursor: pointer;
}
.sugestoes-lista button:hover,
.sugestoes-lista button[aria-selected="true"] { background: var(--cor-primaria-suave); color: var(--cor-primaria-forte); }

/* Balcao: formulario de lancamento e, do lado, o que esta na rua. Em tela
   estreita o painel desce para baixo do formulario. */
.balcao { display: grid; gap: var(--espaco-4); align-items: start; }
@media (min-width: 62rem) {
  .balcao { grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); }
}