/* ---------- Botões ---------- */

.botao {
  display: inline-flex;
  height: var(--altura-controle-media);
  align-items: center;
  justify-content: center;
  gap: var(--espaco-3);
  padding: 0 var(--espaco-6);
  border: 1px solid transparent;
  border-radius: var(--raio-controle);
  font-size: var(--texto-13);
  font-weight: var(--peso-semi);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--transicao-rapida),
    border-color var(--transicao-rapida),
    color var(--transicao-rapida);
}

.botao:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.botao--padrao {
  height: var(--altura-controle);
  padding: 0 var(--espaco-7);
  font-size: var(--texto-14);
}

.botao--pequena {
  height: var(--altura-controle-pequena);
  padding: 0 var(--espaco-4);
  font-size: var(--texto-12);
}

.botao--primario {
  background: var(--marca);
  box-shadow: var(--marca-sombra);
  color: var(--superficie);
}

.botao--primario:not(:disabled):hover {
  background: var(--marca-escura);
}

.botao--secundario {
  border-color: var(--borda-controle);
  background: var(--superficie);
  box-shadow: var(--sombra-controle);
  color: var(--texto-medio);
}

.botao--secundario:not(:disabled):hover {
  border-color: var(--borda-forte);
  background: var(--superficie-sutil);
  color: var(--texto);
}

.botao--sucesso {
  border-color: var(--sucesso-borda);
  background: var(--sucesso-suave);
  color: var(--sucesso-texto);
}

.botao--sucesso:not(:disabled):hover {
  background: var(--sucesso-suave-hover);
}

.botao--destrutivo {
  border-color: var(--erro-borda-botao);
  background: var(--superficie);
  box-shadow: var(--sombra-controle);
  color: var(--erro);
}

.botao--destrutivo:not(:disabled):hover {
  background: var(--erro-suave);
}

.botao--discreto {
  background: transparent;
  color: var(--marca-texto);
}

.botao--discreto:not(:disabled):hover {
  background: var(--marca-suave);
}

/* ---------- Campos ---------- */

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
}

.campo__rotulo {
  color: var(--texto-medio);
  font-size: var(--texto-13);
  font-weight: var(--peso-medio);
}

.campo__controle {
  width: 100%;
  height: var(--altura-controle);
  padding: 0 var(--espaco-5);
  border: 1px solid var(--borda-controle);
  border-radius: var(--raio-controle);
  background: var(--superficie);
  box-shadow: var(--sombra-controle);
  color: var(--texto);
  font-size: var(--texto-14);
  outline: none;
  transition:
    border-color var(--transicao-rapida),
    box-shadow var(--transicao-rapida);
}

.campo__controle--mono {
  font-family: var(--fonte-mono);
}

.campo__controle::placeholder {
  color: var(--texto-suave);
}

.campo__controle:hover:not(:disabled) {
  border-color: var(--borda-forte);
}

.campo__controle:focus {
  border-color: var(--marca);
  box-shadow: var(--anel-foco);
}

.campo__controle:disabled {
  background: var(--superficie-neutra);
  box-shadow: none;
  color: var(--neutro-texto);
  cursor: not-allowed;
}

select.campo__controle {
  padding-right: var(--espaco-13);
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-position: right var(--espaco-4) center;
  background-repeat: no-repeat;
  cursor: pointer;
  font-weight: var(--peso-medio);
}

.campo__ajuda {
  color: var(--texto-secundario);
  font-size: var(--texto-12);
}

/* ---------- Faixa de filtros ---------- */

.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-3);
}

.filtros .campo__controle,
.pagina__filtros .campo__controle {
  width: auto;
  height: var(--altura-controle-media);
  font-size: var(--texto-13);
}

.campo-busca {
  display: flex;
  width: 280px;
  max-width: 100%;
  height: var(--altura-controle-media);
  align-items: center;
  padding: 0 var(--espaco-5);
  border: 1px solid var(--borda-controle);
  border-radius: var(--raio-controle);
  background: var(--superficie);
  box-shadow: var(--sombra-controle);
  color: var(--texto-secundario);
  gap: var(--espaco-3);
}

.campo-busca:focus-within {
  border-color: var(--marca);
  box-shadow: var(--anel-foco);
}

.campo-busca__entrada {
  min-width: 0;
  flex: 1;
  border: none;
  background: transparent;
  color: var(--texto);
  font-size: var(--texto-13);
  outline: none;
}

.campo-busca__entrada:focus-visible {
  box-shadow: none;
}

.contador-registros {
  margin-left: auto;
  color: var(--texto-secundario);
  font-size: var(--texto-13);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- Cartão ---------- */

.cartao {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--borda);
  border-radius: var(--raio-cartao);
  background: var(--superficie);
  box-shadow: var(--sombra-cartao);
}

.cartao__cabecalho {
  display: flex;
  min-height: 52px;
  align-items: center;
  padding: 0 var(--espaco-9);
  border-bottom: 1px solid var(--divisor-linha);
  gap: var(--espaco-4);
}

.cartao__acessorio {
  margin-left: auto;
  color: var(--texto-secundario);
  font-size: var(--texto-12);
}

.cartao__corpo {
  padding: var(--espaco-9);
}

/* ---------- Indicador ---------- */

.indicador {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--borda);
  border-radius: var(--raio-cartao);
  background: var(--superficie);
  box-shadow: var(--sombra-cartao);
}

.indicador__corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--espaco-8) var(--espaco-9) var(--espaco-7);
  gap: var(--espaco-3);
}

.indicador__icone {
  display: flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--borda);
  border-radius: var(--raio-icone);
  margin-bottom: var(--espaco-4);
  background: var(--superficie-sutil);
  color: var(--texto-medio);
}

.indicador__rotulo {
  color: var(--texto-secundario);
  font-size: var(--texto-13);
  font-weight: var(--peso-medio);
}

.indicador__valor {
  display: flex;
  align-items: baseline;
  gap: var(--espaco-2);
  font-size: var(--texto-28);
  font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}

.indicador__valor--atencao {
  color: var(--atencao);
}

.indicador__valor--erro {
  color: var(--erro);
}

.indicador__sufixo {
  color: var(--texto-secundario);
  font-size: var(--texto-16);
  font-weight: var(--peso-medio);
  letter-spacing: 0;
}

.indicador__rodape {
  display: flex;
  min-height: 38px;
  align-items: flex-start;
  padding: var(--espaco-3) var(--espaco-9);
  border-top: 1px solid var(--divisor-linha);
  background: var(--superficie-sutil);
  color: var(--texto-secundario);
  font-size: var(--texto-12);
  font-weight: var(--peso-medio);
  gap: var(--espaco-3);
  line-height: 1.35;
}

.indicador__ponto {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: var(--raio-pilula);
  margin-top: 5px;
  background: var(--ornamento);
}

.indicador__rodape--atencao {
  color: var(--atencao-texto);
  font-weight: var(--peso-semi);
}

.indicador__rodape--atencao .indicador__ponto {
  background: var(--atencao);
}

/* ---------- Tabela ---------- */

.tabela {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--borda);
  border-radius: var(--raio-cartao);
  background: var(--superficie);
  box-shadow: var(--sombra-cartao);
}

.tabela__rolagem {
  overflow: auto;
}

.tabela__grade {
  width: 100%;
  border-collapse: collapse;
}

.tabela__grade th,
.tabela__grade td {
  padding: 0 var(--espaco-3);
  text-align: left;
  white-space: nowrap;
}

.tabela__grade th:first-child,
.tabela__grade td:first-child {
  padding-left: var(--espaco-9);
}

.tabela__grade th:last-child,
.tabela__grade td:last-child {
  padding-right: var(--espaco-9);
}

.tabela__grade thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  height: var(--altura-cabecalho-tabela);
  border-bottom: 1px solid var(--borda);
  background: var(--superficie-sutil);
  color: var(--texto-secundario);
  font-size: var(--texto-11);
  font-weight: var(--peso-semi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tabela__grade tbody tr {
  height: var(--altura-linha-tabela);
  border-bottom: 1px solid var(--divisor-linha);
  color: var(--texto-medio);
  font-size: var(--texto-13);
  transition: background var(--transicao-rapida);
}

.tabela__grade tbody tr:last-child {
  border-bottom: none;
}

.tabela__grade tbody tr:hover {
  background: var(--superficie-sutil);
}

.tabela__grade .direita {
  text-align: right;
}

.tabela__grade .forte {
  color: var(--texto);
  font-weight: var(--peso-medio);
}

.tabela__grade .quebra {
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tabela__acoes {
  display: inline-flex;
  justify-content: flex-end;
  gap: var(--espaco-2);
}

.tabela__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: var(--espaco-4) var(--espaco-9);
  border-top: 1px solid var(--borda);
  background: var(--superficie-sutil);
  color: var(--texto-secundario);
  font-size: var(--texto-12);
  gap: var(--espaco-5);
}

.tabela__aviso {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espaco-13) var(--espaco-7);
  color: var(--texto-secundario);
  font-size: var(--texto-13);
  gap: var(--espaco-3);
  text-align: center;
}

.tabela__aviso--carregando::before {
  width: 8px;
  height: 8px;
  border-radius: var(--raio-pilula);
  animation: pulso 1.2s ease-in-out infinite;
  background: var(--marca);
  content: '';
}

@keyframes pulso {
  0%,
  100% {
    opacity: 0.25;
  }

  50% {
    opacity: 1;
  }
}

/* ---------- Chips ---------- */

.chip {
  display: inline-flex;
  height: var(--altura-chip-tabela);
  align-items: center;
  gap: var(--espaco-2);
  padding: 0 var(--espaco-4);
  border: 1px solid transparent;
  border-radius: var(--raio-chip);
  font-size: var(--texto-12);
  font-weight: var(--peso-semi);
  white-space: nowrap;
}

.chip__ponto {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: var(--raio-pilula);
}

.chip--ativo {
  border-color: var(--sucesso-borda);
  background: var(--sucesso-suave);
  color: var(--sucesso-texto);
}

.chip--ativo .chip__ponto {
  background: var(--sucesso);
}

.chip--inativo {
  border-color: var(--neutro-borda);
  background: var(--neutro-suave);
  color: var(--neutro-texto);
}

.chip--inativo .chip__ponto {
  background: var(--neutro-ponto);
}

.chip--marca {
  border-color: var(--marca-borda);
  background: var(--marca-suave);
  color: var(--marca-texto);
}

.chip--marca .chip__ponto {
  background: var(--marca);
}

.chip--atencao {
  border-color: var(--atencao-borda);
  background: var(--atencao-suave);
  color: var(--atencao-texto);
}

.chip--atencao .chip__ponto {
  background: var(--atencao);
}

.chip--erro {
  border-color: var(--erro-borda);
  background: var(--erro-suave);
  color: var(--erro-texto);
}

.chip--erro .chip__ponto {
  background: var(--erro);
}

/* ---------- Avisos ---------- */

.aviso {
  display: none;
  padding: var(--espaco-5) var(--espaco-7);
  border: 1px solid var(--borda);
  border-radius: var(--raio-cartao);
  font-size: var(--texto-13);
  font-weight: var(--peso-medio);
  line-height: 1.5;
}

.aviso--visivel {
  display: block;
}

.aviso--ok {
  border-color: var(--sucesso-borda);
  background: var(--sucesso-suave);
  color: var(--sucesso-texto);
}

.aviso--atencao {
  border-color: var(--atencao-borda);
  background: var(--atencao-suave);
  color: var(--atencao-texto);
}

.aviso--erro {
  border-color: var(--erro-borda);
  background: var(--erro-suave);
  color: var(--erro-texto);
}

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

.estado-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--espaco-13) var(--espaco-11);
  gap: var(--espaco-3);
  text-align: center;
}

.estado-vazio__icone {
  display: flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--borda);
  border-radius: var(--raio-cartao-grande);
  margin-bottom: var(--espaco-3);
  background: var(--superficie-sutil);
  color: var(--texto-secundario);
}

.estado-vazio__titulo {
  color: var(--texto);
  font-size: var(--texto-15);
  font-weight: var(--peso-semi);
}

.estado-vazio__detalhe {
  max-width: 52ch;
  color: var(--texto-secundario);
  font-size: var(--texto-13);
}

/* ---------- Painel lateral ---------- */

.painel-lateral {
  position: fixed;
  z-index: 10;
  display: flex;
  inset: 0;
  justify-content: flex-end;
}

.painel-lateral__veu {
  position: absolute;
  background: var(--veu);
  inset: 0;
}

.painel-lateral__caixa {
  position: relative;
  display: flex;
  width: 520px;
  max-width: 100%;
  flex-direction: column;
  margin: var(--respiro-moldura);
  overflow: hidden;
  border: 1px solid var(--borda);
  border-radius: var(--raio-folha);
  background: var(--superficie);
  box-shadow: var(--sombra-painel);
  animation: painel-entrada var(--transicao-media);
}

.painel-lateral__cabecalho {
  display: flex;
  align-items: flex-start;
  padding: var(--espaco-9) var(--espaco-11);
  border-bottom: 1px solid var(--borda);
  gap: var(--espaco-6);
}

.painel-lateral__titulo {
  font-size: var(--texto-18);
  font-weight: var(--peso-semi);
  letter-spacing: -0.01em;
}

.painel-lateral__subtitulo {
  margin-top: var(--espaco-2);
  color: var(--texto-secundario);
  font-size: var(--texto-13);
}

.painel-lateral__fechar {
  display: flex;
  width: 34px;
  height: 34px;
  flex: none;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--raio-controle);
  margin-left: auto;
  background: transparent;
  color: var(--texto-secundario);
  cursor: pointer;
}

.painel-lateral__fechar:hover {
  background: var(--superficie-neutra);
  color: var(--texto);
}

.painel-lateral__corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--espaco-11);
  overflow: auto;
  gap: var(--espaco-8);
}

.painel-lateral__rodape {
  display: flex;
  justify-content: flex-end;
  padding: var(--espaco-5) var(--espaco-11);
  border-top: 1px solid var(--borda);
  background: var(--superficie-sutil);
  gap: var(--espaco-4);
}

@keyframes painel-entrada {
  from {
    opacity: 0;
    transform: translateX(24px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ---------- Diálogo de confirmação ---------- */

dialog.dialogo {
  width: 460px;
  max-width: calc(100% - 32px);
  padding: 0;
  border: 1px solid var(--borda);
  border-radius: var(--raio-cartao-grande);
  background: var(--superficie);
  box-shadow: var(--sombra-cartao-flutuante);
  color: var(--texto);
}

dialog.dialogo::backdrop {
  background: var(--veu);
}

.dialogo__corpo {
  display: flex;
  flex-direction: column;
  padding: var(--espaco-11);
  gap: var(--espaco-6);
}

.dialogo__titulo {
  font-size: var(--texto-18);
  font-weight: var(--peso-semi);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.dialogo__texto {
  color: var(--texto-medio);
  font-size: var(--texto-14);
  line-height: 1.55;
}

.dialogo__alvo {
  display: flex;
  flex-direction: column;
  padding: var(--espaco-5) var(--espaco-6);
  border: 1px solid var(--borda);
  border-radius: var(--raio-controle);
  background: var(--superficie-sutil);
  gap: 3px;
}

.dialogo__alvo-nome {
  font-size: var(--texto-14);
  font-weight: var(--peso-semi);
}

.dialogo__alvo-id {
  color: var(--texto-secundario);
  font-size: var(--texto-12);
}

.dialogo__acoes {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--espaco-3);
  gap: var(--espaco-4);
}