.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--alvo-toque);
  padding: var(--esp-12) var(--esp-24);
  font-family: var(--familia-ui);
  font-size: var(--fonte-13);
  font-weight: var(--peso-700);
  line-height: normal;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.botao--primario {
  background: var(--cor-acento);
  color: var(--cor-superficie);
}

.botao--primario:hover {
  background: var(--cor-acento-hover);
  color: var(--cor-superficie);
}

.botao--tinta {
  padding: var(--esp-10) var(--esp-18);
  font-size: var(--fonte-12-5);
  background: var(--cor-tinta);
  color: var(--cor-papel);
}

.botao--tinta:hover {
  background: var(--cor-tinta-hover);
  color: var(--cor-papel);
}

.botao--ghost {
  padding: var(--esp-10) var(--esp-18);
  font-size: var(--fonte-12-5);
  border: var(--borda-1) solid var(--cor-tinta);
  color: var(--cor-tinta);
}

.botao--ghost:hover {
  background: var(--cor-hover-ghost);
  color: var(--cor-tinta);
}

.botao--link {
  padding: 0;
  font-size: inherit;
  color: var(--cor-acento-texto);
  text-decoration: underline;
  text-underline-offset: var(--esp-3);
}

.botao--link:hover {
  color: var(--cor-tinta);
}

.botao--link-raso {
  text-underline-offset: auto;
}

.botao--header {
  flex: none;
  padding: var(--esp-10) var(--esp-18);
  font-size: var(--fonte-13-5);
  white-space: nowrap;
}

.botao--hero {
  padding: var(--esp-13) var(--esp-28);
  font-size: var(--fonte-14);
}

.botao--bloco {
  display: flex;
  width: 100%;
  padding: var(--esp-13) 0;
  font-size: var(--fonte-13-5);
}

.botao--compacto {
  padding: var(--esp-11) var(--esp-20);
  font-size: var(--fonte-12-5);
  white-space: nowrap;
}

.botao--medio {
  padding: var(--esp-11) var(--esp-20);
  font-size: var(--fonte-13);
}

.botao--curto {
  padding: var(--esp-9) var(--esp-16);
  font-size: var(--fonte-12-5);
}

.botao--mini {
  padding: var(--esp-8) var(--esp-14);
  font-size: var(--fonte-12);
  white-space: nowrap;
}

.botao--consulta {
  padding: var(--esp-12) var(--esp-22);
  font-size: var(--fonte-13);
}

.botao--alerta:hover,
.erro-caixa .botao--tinta:hover {
  background: var(--cor-erro);
  color: var(--cor-papel);
}

@media (min-width: 640px) {
  .botao {
    min-height: 0;
  }
}

.tag-tipo {
  flex: none;
  width: 54px;
  margin-top: var(--esp-4);
  font-family: var(--familia-mono);
  font-size: var(--fonte-10-5);
  font-weight: var(--peso-600);
  line-height: normal;
  letter-spacing: var(--entreletra-tag);
  text-transform: uppercase;
}

.tag-tipo--vaga {
  color: var(--cor-acento-texto);
}

.tag-tipo--freela {
  color: var(--cor-texto-3);
}

.tag-tipo--inline {
  display: inline-block;
  flex: 0 1 auto;
  width: auto;
  margin-top: 0;
}

.abas {
  display: flex;
  flex-wrap: wrap;
  border: var(--borda-1) solid var(--cor-borda-input);
}

.aba {
  display: flex;
  align-items: center;
  gap: var(--esp-7);
  min-height: var(--alvo-toque);
  padding: var(--esp-9) var(--esp-16);
  font-family: var(--familia-ui);
  font-size: var(--fonte-13);
  font-weight: var(--peso-700);
  line-height: normal;
  color: var(--cor-texto-2);
  background: var(--cor-superficie);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}

.aba:hover {
  color: var(--cor-texto-2);
}

.aba--ativa {
  background: var(--cor-tinta);
  color: var(--cor-papel);
}

.aba--ativa:hover {
  color: var(--cor-papel);
}

.aba__contagem {
  font-family: var(--familia-mono);
  font-size: var(--fonte-11);
}

@media (min-width: 640px) {
  .aba {
    min-height: 0;
  }
}

.toggle {
  display: flex;
  align-items: center;
  gap: var(--esp-8);
  min-height: var(--alvo-toque);
  font-family: var(--familia-ui);
  cursor: pointer;
  user-select: none;
}

.toggle__trilho {
  display: flex;
  justify-content: flex-start;
  flex: none;
  width: 34px;
  height: 18px;
  padding: var(--esp-2);
  background: var(--cor-borda-input);
}

.toggle__botao {
  width: 14px;
  height: 14px;
  background: var(--cor-superficie);
}

.toggle--ligado .toggle__trilho,
.toggle[aria-pressed="true"] .toggle__trilho {
  justify-content: flex-end;
  background: var(--cor-acento);
}

.toggle__label {
  font-size: var(--fonte-13);
  font-weight: var(--peso-600);
  color: var(--cor-texto-2);
}

@media (min-width: 640px) {
  .toggle {
    min-height: 0;
  }
}

.opcao {
  display: flex;
  align-items: center;
  gap: var(--esp-9);
  min-height: var(--alvo-toque);
  padding: var(--esp-7) 0;
  cursor: pointer;
  user-select: none;
}

.opcao:hover {
  color: var(--cor-hover-opcao);
}

.opcao__entrada {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.opcao__caixa {
  display: grid;
  place-items: center;
  flex: none;
  width: 15px;
  height: 15px;
  background: var(--cor-superficie);
  border: var(--borda-1-5) solid var(--cor-borda-check);
}

.opcao__caixa--marcada,
.opcao__entrada:checked + .opcao__caixa {
  background: var(--cor-tinta);
  border-color: var(--cor-tinta);
  color: var(--cor-superficie);
}

.opcao__entrada:focus-visible + .opcao__caixa {
  outline: var(--borda-2) solid var(--cor-tinta);
  outline-offset: var(--esp-2);
}

.opcao__nome {
  flex: 1;
  min-width: 0;
  font-size: var(--fonte-13-5);
}

.opcao__contagem {
  font-family: var(--familia-mono);
  font-size: var(--fonte-11-5);
  color: var(--cor-texto-3);
}

@media (min-width: 1000px) {
  .opcao {
    min-height: 0;
  }
}

.campo {
  width: 100%;
  margin-top: var(--esp-6);
  padding: var(--esp-10) var(--esp-13);
  font-family: var(--familia-ui);
  font-size: var(--fonte-13-5);
  line-height: normal;
  color: var(--cor-tinta);
  background: var(--cor-superficie);
  border: var(--borda-1) solid var(--cor-borda-input);
}

.campo--erro {
  border: var(--borda-2) solid var(--cor-erro);
}

.campo--grande {
  padding: var(--esp-11) var(--esp-13);
  font-size: var(--fonte-14);
}

.campo--area {
  min-height: 76px;
}

.campo--area-grande {
  min-height: 110px;
}

.campo--hero {
  flex: 1 1 100%;
  width: auto;
  min-width: 0;
  margin-top: 0;
  padding: var(--esp-13) var(--esp-16);
  font-size: var(--fonte-15);
  border-color: var(--cor-tinta);
}

.campo--busca {
  flex: 1 1 100%;
  width: auto;
  min-width: 0;
  margin-top: 0;
  padding: var(--esp-10) var(--esp-14);
}

.campo--protocolo {
  flex: 1 1 100%;
  width: auto;
  min-width: 0;
  margin-top: 0;
  padding: var(--esp-12) var(--esp-14);
  font-family: var(--familia-mono);
  font-size: var(--fonte-14);
  border-color: var(--cor-tinta);
}

@media (min-width: 640px) {
  .campo--hero {
    flex: 1 1 240px;
  }

  .campo--busca,
  .campo--protocolo {
    flex: 1 1 220px;
  }
}

.campo-grupo {
  min-width: 0;
}

.campo-grupo--largo {
  grid-column: 1 / -1;
}

.campo-grupo__label {
  display: block;
  font-size: var(--fonte-12-5);
  font-weight: var(--peso-600);
  color: var(--cor-texto-2);
}

.campo-erro {
  margin-top: var(--esp-4);
  font-size: var(--fonte-11-5);
  color: var(--cor-erro);
}

.campo-ajuda {
  margin-top: var(--esp-5);
  font-size: var(--fonte-12);
  color: var(--cor-texto-3);
}

.campo-contador {
  margin-top: var(--esp-4);
  text-align: right;
  font-family: var(--familia-mono);
  font-size: var(--fonte-11-5);
  color: var(--cor-texto-3);
}

.anexo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--esp-10);
  min-height: var(--alvo-toque);
  margin-top: var(--esp-6);
  padding: var(--esp-10) var(--esp-13);
  font-size: var(--fonte-13);
  background: var(--cor-superficie);
  border: var(--borda-1) solid var(--cor-borda-input);
  cursor: pointer;
}

.anexo:hover {
  border-color: var(--cor-tinta);
}

.anexo__rotulo {
  min-width: 0;
  color: var(--cor-texto-3);
}

.anexo__acao {
  flex: none;
  font-size: var(--fonte-11-5);
  font-weight: var(--peso-700);
  color: var(--cor-acento-texto);
}

.segmentado {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--esp-6);
}

.segmentado__item {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-toque);
  padding: var(--esp-8) var(--esp-14);
  font-family: var(--familia-ui);
  font-size: var(--fonte-12-5);
  line-height: normal;
  color: var(--cor-tinta);
  text-decoration: none;
  border: var(--borda-1) solid var(--cor-borda-input);
  border-left: 0;
  cursor: pointer;
  user-select: none;
}

.segmentado__item:first-child {
  border-left: var(--borda-1) solid var(--cor-borda-input);
}

.segmentado__item:hover {
  border-color: var(--cor-tinta);
}

.segmentado__item--ativo {
  font-weight: var(--peso-600);
  color: var(--cor-papel);
  background: var(--cor-tinta);
  border-color: var(--cor-tinta);
}

.segmentado__item--ativo:hover {
  color: var(--cor-papel);
}

@media (min-width: 640px) {
  .segmentado__item {
    min-height: 0;
  }
}

.seletor-tipo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-10);
}

.seletor-tipo__opcao {
  min-width: 0;
  padding: var(--esp-15) var(--esp-17);
  color: var(--cor-tinta);
  text-align: left;
  text-decoration: none;
  background: var(--cor-superficie);
  border: var(--borda-1) solid var(--cor-borda-input);
  cursor: pointer;
}

.seletor-tipo__opcao--ativa {
  padding: var(--esp-14) var(--esp-16);
  border: var(--borda-2) solid var(--cor-tinta);
}

.seletor-tipo__titulo {
  font-size: var(--fonte-14);
  font-weight: var(--peso-800);
  color: var(--cor-tinta);
}

.seletor-tipo__texto {
  margin-top: var(--esp-4);
  font-size: var(--fonte-12-5);
  line-height: var(--entrelinha-1-5);
  color: var(--cor-texto-2);
}

@media (min-width: 640px) {
  .seletor-tipo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.chips {
  display: flex;
  gap: var(--esp-7);
  flex-wrap: wrap;
}

.chip {
  padding: var(--esp-4) var(--esp-9);
  font-family: var(--familia-mono);
  font-size: var(--fonte-11);
  color: var(--cor-tinta);
  background: var(--cor-superficie);
  border: var(--borda-1) solid var(--cor-borda-input);
}

.chip--escuro {
  color: var(--cor-papel);
  background: var(--cor-tinta);
  border-color: var(--cor-tinta);
}

.caixa-stack {
  display: flex;
  align-items: center;
  gap: var(--esp-7);
  flex-wrap: wrap;
  margin-top: var(--esp-6);
  padding: var(--esp-9) var(--esp-13);
  background: var(--cor-superficie);
  border: var(--borda-1) solid var(--cor-borda-input);
}

.caixa-stack__hint {
  font-size: var(--fonte-13);
  color: var(--cor-texto-2);
}

.ficha-coluna {
  width: 100%;
  min-width: 0;
}

.ficha {
  background: var(--cor-superficie);
  border: var(--borda-1) solid var(--cor-tinta);
}

.ficha__titulo {
  padding: var(--esp-10) var(--esp-14);
  font-size: var(--fonte-12-5);
  font-weight: var(--peso-700);
  color: var(--cor-tinta);
  border-bottom: var(--borda-1) solid var(--cor-tinta);
}

.ficha__linha {
  display: flex;
  justify-content: space-between;
  gap: var(--esp-12);
  padding: var(--esp-9) var(--esp-14);
  font-size: var(--fonte-13);
  border-bottom: var(--borda-1) solid var(--cor-hairline-ficha);
}

.ficha__chave {
  flex: none;
  color: var(--cor-texto-3);
}

.ficha__valor {
  min-width: 0;
  font-weight: var(--peso-700);
  text-align: right;
  overflow-wrap: anywhere;
  color: var(--cor-tinta);
}

.ficha__chips {
  display: flex;
  gap: var(--esp-7);
  flex-wrap: wrap;
  margin-top: var(--esp-12);
}

.ficha__nota {
  margin-top: var(--esp-14);
  padding-top: var(--esp-12);
  font-size: var(--fonte-12);
  line-height: var(--entrelinha-1-6);
  color: var(--cor-texto-3);
  border-top: var(--borda-1) solid var(--cor-hairline);
}

@media (min-width: 1000px) {
  .ficha-coluna {
    width: 280px;
    flex: none;
  }
}

.stats {
  display: flex;
  flex-wrap: wrap;
  background: var(--cor-superficie);
  border: var(--borda-1) solid var(--cor-hairline);
}

.stats__celula {
  flex: 1;
  min-width: 150px;
  padding: var(--esp-14) var(--esp-18);
  border-right: var(--borda-1) solid var(--cor-hairline);
}

.stats__numero {
  font-family: var(--familia-mono);
  font-size: var(--fonte-21);
  font-weight: var(--peso-600);
  color: var(--cor-tinta);
}

.stats__rotulo {
  margin-top: var(--esp-2);
  font-size: var(--fonte-12-5);
  color: var(--cor-texto-2);
}

.timeline {
  display: grid;
  margin-top: var(--esp-16);
}

.timeline__passo {
  display: flex;
  align-items: baseline;
  gap: var(--esp-12);
  flex-wrap: wrap;
  padding: var(--esp-8) 0;
}

.timeline__marca {
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--cor-tinta);
}

.timeline__marca--pendente {
  background: none;
  border: var(--borda-1-5) solid var(--cor-borda-check);
}

.timeline__rotulo {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fonte-13-5);
  font-weight: var(--peso-700);
  color: var(--cor-tinta);
}

.timeline__rotulo--pendente {
  font-weight: var(--peso-400);
  color: var(--cor-texto-2);
}

.timeline__horario {
  font-size: var(--fonte-12);
  color: var(--cor-texto-3);
}

.selo {
  font-size: var(--fonte-11);
  font-weight: var(--peso-700);
  letter-spacing: var(--entreletra-selo);
  color: var(--cor-acento-texto);
}

.erro-caixa {
  margin-top: var(--esp-6);
  padding: var(--esp-20);
  border: var(--borda-2) solid var(--cor-erro);
}

.erro-caixa__titulo {
  font-size: var(--fonte-17);
  font-weight: var(--peso-800);
  color: var(--cor-erro);
}

.erro-caixa__texto {
  margin-top: var(--esp-6);
  font-size: var(--fonte-14);
  line-height: var(--entrelinha-1-6);
  color: var(--cor-corpo-longo);
}

.erro-caixa__ref {
  font-family: var(--familia-mono);
  font-size: var(--fonte-12);
  color: var(--cor-texto-3);
  white-space: nowrap;
}

.erro-caixa > .botao {
  margin-top: var(--esp-14);
}

@media (min-width: 640px) {
  .erro-caixa {
    padding: var(--esp-22) var(--esp-24);
  }
}

.skeleton__linha {
  padding: var(--esp-16) 0;
  border-bottom: var(--borda-1) solid var(--cor-hairline);
}

.skeleton__linha--ultima,
.skeleton__linha:last-child {
  border-bottom: 0;
}

.skeleton__tag {
  display: block;
  width: 52px;
  height: 10px;
  background: var(--cor-skeleton-1);
}

.skeleton__titulo {
  display: block;
  width: 46%;
  height: 15px;
  margin-top: var(--esp-9);
  background: var(--cor-skeleton-1);
}

.skeleton__meta {
  display: block;
  width: 64%;
  height: 11px;
  margin-top: var(--esp-8);
  background: var(--cor-skeleton-2);
}

.skeleton__linha:nth-child(2) .skeleton__titulo {
  width: 58%;
}

.skeleton__linha:nth-child(2) .skeleton__meta {
  width: 40%;
}

.skeleton__linha:nth-child(3) .skeleton__titulo {
  width: 38%;
}

.skeleton__linha:nth-child(3) .skeleton__meta {
  width: 55%;
}

.skeleton__linha:nth-child(4) .skeleton__titulo {
  width: 50%;
}

.skeleton__linha:nth-child(4) .skeleton__meta {
  width: 47%;
}