/* =============================================================================
   REGULARIZEI · PEÇAS DE MECANISMO
   Desenhos que mostram o que o produto faz, em vez de mostrar a tela inteira
   onde ele faz. Cada peça é um recorte: dois ou três lotes, uma conversa, um
   formulário. Nunca o sistema inteiro.

   Regra de ouro: a peça é legível parada. A animação acrescenta, nunca
   sustenta. Sem JavaScript, sem GSAP ou com movimento reduzido, o desenho
   aparece no estado final e a legenda continua explicando.

   Carregado só nas páginas que têm peça, pelo gerador.
   ============================================================================= */

:root {
  /* Paleta do desenho, a mesma da demonstração de vetorização em
     assets/js/ortho-scene.js. Os dois desenhos mostram o mesmo território, e
     não podia haver dois territórios de cores diferentes no mesmo site.

     Embaixo a imagem aérea, em tons de terra e vegetação. Em cima, em
     #2aa3ff, o que a plataforma desenha sobre ela. O contraste entre os dois
     é o argumento visual da página inteira. */
  --peca-solo: #77855c;
  --peca-solo-2: #93885e;
  --peca-solo-3: #a68d63;
  --peca-rua: #b4a284;
  --peca-rua-borda: rgb(84 74 52 / 0.55);
  --peca-telhado: #b8794f;
  --peca-telhado-2: #a06b4b;
  --peca-telhado-3: #918982;
  --peca-telhado-4: #c2996a;
  --peca-telhado-5: #7d766e;
  --peca-mata: #41552f;
  --peca-lote: #2aa3ff;
  --peca-lote-fill: rgb(42 163 255 / 0.17);
  /* O gesto que você acabou de fazer em campo: o corte, o ponto do lote novo.
     Branco para não competir com o azul do que já está desenhado. */
  --peca-acao: #ffffff;
  --peca-alerta: #ffb454;
  --peca-ok: #15803d;
}

/* ============================================================
   Moldura comum
   ============================================================ */
/* A largura de cada peça é a da caixa da seção (ver `.bloco-prosa` em
   site.css): a prosa fica estreita para ser lida, a peça usa a caixa inteira,
   e as duas começam na mesma margem esquerda. A classe --larga continua
   existindo para não quebrar quem já a usa. */
.peca,
.peca--larga {
  margin: 2.5rem 0 0;
}

/* ============================================================
   Peça em duas colunas
   Os cartões à esquerda comandam o desenho à direita. Cada cartão
   é a aba da sua cena, o que apaga a repetição que existia entre
   aba, cartão e legenda.
   ============================================================ */
/* A coluna única tem `minmax(0, 1fr)` de propósito. Sem isso a coluna implícita
   é `auto`, que se dimensiona pelo conteúdo, e o desenho esticava a peça para
   600px dentro de uma tela de 365: /campo era a única página do site que rolava
   de lado no celular. */
.peca-dupla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}
@media (min-width: 1024px) {
  .peca-dupla {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 1.75rem;
    align-items: start;
  }
}

.peca-dupla__lista {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.peca-dupla__figura {
  margin: 0;
}
/* O desenho acompanha a leitura dos cartões em tela alta. */
@media (min-width: 1024px) {
  .peca-dupla__figura {
    position: sticky;
    top: 5.5rem;
  }
}

/* O cartão como acionador: mesmo desenho do cartão de leitura, mais o estado
   de selecionado e o alvo de toque. */
.qa-item--botao {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.qa-item--botao .q,
.qa-item--botao .a {
  display: block;
}
.qa-item--botao[aria-selected='true'] {
  border-color: var(--brand-500);
  background: var(--brand-50);
  box-shadow: var(--shadow-md);
}
.qa-item--botao[aria-selected='true'] .q::before {
  box-shadow: 0 0 0 4px rgb(43 131 215 / 0.18);
}
/* Fechado, o cartão mostra só a pergunta em telas grandes: quatro respostas
   abertas de uma vez fariam a coluna crescer além do desenho. No celular
   todas ficam abertas, porque lá a lista é o conteúdo. */
@media (min-width: 1024px) {
  .qa-item--botao .a {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 260ms var(--ease), opacity 200ms var(--ease), margin-top 260ms var(--ease);
  }
  .qa-item--botao[aria-selected='true'] .a {
    max-height: 12rem;
    opacity: 1;
  }
}

.peca__palco {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

/* O desenho do território ocupa a mesma proporção da demonstração de
   vetorização, 16 por 10. */
.peca__desenho {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  background: var(--peca-solo);
}

/* A cena do lote é mostrada num recorte mais baixo que o desenho inteiro. */
.peca__desenho--cena {
  aspect-ratio: 720 / 340;
}

.peca figcaption {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-3);
}

/* Rótulo dentro do desenho: quadra e lote, percentual, medida.
   Sem `fill` aqui de propósito: em SVG a regra de CSS vence o atributo de
   apresentação, e um fill nesta classe apagaria a cor que cada texto pede. */
.peca-rotulo {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Nota dentro do desenho, sobre a imagem aérea: branca, como todo texto que
   cai sobre o território. */
.peca-nota {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  fill: #fff;
  paint-order: stroke;
  stroke: rgb(10 22 32 / 0.45);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* ============================================================
   Peça de abas: o mesmo lote, quatro problemas
   ============================================================ */
/* Na largura da coluna as quatro abas não cabem em uma linha. Quebrar é
   melhor que esconder atrás de rolagem, que ninguém percebe. No celular volta
   a ser rolagem, porque duas linhas de aba comeriam a tela. */
.peca-abas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
  padding-bottom: 0.25rem;
}
/* No celular as abas quebram em vez de rolar. A rolagem era da época em que a
   peça dos quatro erros também usava abas e as quatro precisavam caber numa
   linha; hoje ela usa cartões, e a única barra que restou tem duas abas. Com
   rolagem, a segunda ficava vinte e cinco pixels para fora: pouco para alguém
   desconfiar que dá para arrastar, e o bastante para escondê-la. */
@media (max-width: 640px) {
  .peca-abas {
    flex-wrap: wrap;
  }
}
.peca-abas::-webkit-scrollbar {
  display: none;
}

/* Medida apertada de propósito, para caberem lado a lado na largura da coluna.
   A altura mínima de 48px, que é o alvo de toque, não entra nessa conta. */
.peca-aba {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0.6rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.peca-aba:hover {
  border-color: var(--brand-400);
  color: var(--brand-700);
}
.peca-aba[aria-selected='true'] {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
  font-weight: 600;
}
.peca-aba__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  flex: none;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--ink-3);
  font-size: 0.6875rem;
  font-weight: 700;
}
.peca-aba[aria-selected='true'] .peca-aba__num {
  background: rgb(255 255 255 / 0.22);
  color: #fff;
}

/* As cenas ocupam o mesmo lugar: a saída de uma não pode empurrar a página. */
.peca-cenas {
  position: relative;
}
.peca-cena[hidden] {
  display: none;
}

/* Legenda da cena, no mesmo pill branco que a demonstração de vetorização usa
   sobre o ortomosaico. */
.peca-cena__legenda {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 2rem);
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.7rem 1.1rem;
  border-radius: 14px;
  background: rgb(255 255 255 / 0.94);
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgb(10 22 32 / 0.25);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-2);
}
.peca-cena__legenda b {
  color: var(--ink);
}
.peca-cena__legenda i {
  color: var(--brand-600);
  font-size: 1rem;
  line-height: 1.2;
  flex: none;
}

@media (max-width: 640px) {
  .peca-cena__legenda {
    position: static;
    border-radius: 0;
    border-width: 1px 0 0;
    box-shadow: none;
    backdrop-filter: none;
  }

  /* Numa tela de 390 pontos, o desenho de 720 unidades encolhe os rótulos
     para menos de seis pixels. Em vez de deixar o texto ilegível ou cortar
     metade da cena, o palco ganha rolagem própria e o desenho mantém uma
     largura mínima. A página continua sem rolagem horizontal. */
  .peca__palco {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  .peca-cenas .peca__desenho,
  .peca__palco > .peca__desenho {
    min-width: 600px;
  }
  .peca-cena__legenda {
    position: sticky;
    left: 0;
    max-width: 100vw;
  }
}

/* ============================================================
   Peça da visita: o que acontece na porta, e o que isso vira
   ============================================================ */
.peca-visita {
  display: grid;
  gap: 1px;
  background: var(--line);
}
@media (min-width: 900px) {
  .peca-visita {
    grid-template-columns: 1fr 1fr;
  }
}
.peca-visita__fluxo,
.peca-visita__mapa {
  background: var(--surface);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}
/* A coluna da esquerda tem três passos e a da direita cinco barras. Centrar
   o conteúdo evita que a mais curta termine no meio da caixa. */
.peca-visita__fluxo {
  justify-content: center;
}
.peca-visita__mapa {
  background: var(--surface-2);
  justify-content: center;
  gap: 0.875rem;
}

.peca-passos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.peca-passo {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 0.875rem 0;
  position: relative;
}
/* O fio que liga um passo ao seguinte: a visita é uma sequência, não uma
   lista de opções soltas. */
.peca-passo:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 1.09rem;
  top: 3rem;
  bottom: -0.25rem;
  width: 2px;
  background: var(--line);
}
.peca-passo__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: 0.75rem;
  font-size: 1rem;
  z-index: 1;
}
.chip-neutro {
  background: var(--surface-3);
  color: var(--ink-3);
}
/* A cor do ícone é escrita aqui, e não com `--peca-acao`. Aquela variável é
   #ffffff, feita para o traço do gesto sobre a imagem aérea, que é escura.
   Sobre este fundo claro o ícone ficava branco no branco e sumia: estava assim
   no passo do calendário da peça da visita, em /campo. */
.chip-acao {
  background: #cffafe;
  color: #0e7490;
}
.chip-ok {
  background: #dcfce7;
  color: var(--peca-ok);
}
.peca-passo__rotulo {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.15rem;
}
.peca-passo__valor {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}

.peca-barra {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 0.75rem;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.peca-barra__nome {
  grid-column: 1;
}
.peca-barra__num {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-weight: 700;
  color: var(--ink);
}
.peca-barra__trilho {
  grid-column: 1;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.peca-barra__fita {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--brand-500);
}

/* ============================================================
   Peça de conversa: a central de atendimento em foco
   ============================================================ */
.peca-conversa {
  display: grid;
  gap: 1px;
  background: var(--line);
}
@media (min-width: 900px) {
  .peca-conversa {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

/* Altura fixa e rolagem própria, como uma janela de conversa de verdade. É
   também o que impede a peça de crescer enquanto a animação corre: o
   indicador de digitação entra e sai dentro desta caixa, sem empurrar nada
   da página. */
.peca-conversa__fio {
  background: var(--surface-2);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  height: 24rem;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
}

@media (max-width: 899px) {
  .peca-conversa__fio {
    height: 20rem;
  }
}

.peca-balao {
  max-width: 84%;
  padding: 0.625rem 0.875rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  line-height: 1.45;
  box-shadow: var(--shadow-sm);
}
.peca-balao--morador {
  align-self: flex-start;
  background: #fff;
  color: var(--ink-2);
  border-bottom-left-radius: 0.25rem;
}
.peca-balao--sistema {
  align-self: flex-end;
  background: #dcf8c6;
  color: #14532d;
  border-bottom-right-radius: 0.25rem;
}
.peca-balao__hora {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.625rem;
  color: var(--ink-3);
  text-align: right;
}

.peca-digitando {
  align-self: flex-start;
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.75rem 0.875rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.peca-digitando span {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: #94a3b8;
}

/* Coluna da direita: o que o atendente vê ao lado da conversa.
   Centrada, porque o fio da conversa é mais alto que a mesa e o desencontro
   deixaria um vão embaixo. */
.peca-conversa__mesa {
  background: var(--surface);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.875rem;
}
.peca-ficha {
  border: 1px solid var(--line);
  border-radius: 0.875rem;
  padding: 0.875rem;
}
.peca-ficha__titulo {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.5rem;
}
.peca-ficha__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8125rem;
  padding: 0.25rem 0;
  color: var(--ink-2);
}
/* Valor não quebra no meio. Sem isso, na coluna estreita do celular o total da
   simulação partia entre o "R$" e o número, em duas linhas. */
.peca-ficha__linha b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* O boleto que sai pela própria conversa. */
.peca-anexo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.625rem;
  background: rgb(255 255 255 / 0.7);
  border: 1px solid rgb(20 83 45 / 0.18);
}
.peca-anexo i {
  font-size: 1.125rem;
  color: var(--peca-ok);
}
.peca-anexo__nome {
  display: flex;
  flex-direction: column;
  font-size: 0.75rem;
  line-height: 1.3;
}
.peca-anexo__nome b {
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

/* A conta da quitação, montada enquanto a conversa acontece. */
.peca-ficha--conta {
  border-color: var(--brand-200);
  background: var(--brand-50);
}
.peca-ficha__linha--total {
  margin-top: 0.35rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--brand-200);
  font-weight: 600;
}
.peca-ficha__linha--total b {
  font-size: 1rem;
  color: var(--brand-800);
}

/* Com o nome do elemento junto, para vencer `.peca-ficha__linha b`, que é
   mais específico que uma classe sozinha. */
.peca-valor--ok,
.peca-ficha__linha b.peca-valor--ok {
  color: var(--peca-ok);
}
/* O atraso é vermelho, não âmbar: é a situação que a conversa vem resolver,
   e precisa ser lida como problema já na primeira olhada. */
.peca-valor--atraso,
.peca-ficha__linha b.peca-valor--atraso {
  color: var(--danger);
}

.peca-confirma {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--peca-ok);
}

/* ============================================================
   Peça do formulário: a montagem do cadastro social
   Recorte da tela de formulários personalizados. O que interessa
   aqui é o gesto, arrastar um tipo de campo até o formulário, e
   não a tela inteira do administrador.
   ============================================================ */
.peca-form {
  position: relative;
  background: var(--surface);
  font-size: 0.8125rem;
}

.peca-form__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem 0.875rem;
  border-bottom: 1px solid var(--line);
}
.peca-form__app {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}
.peca-form__app-sub {
  font-size: 0.75rem;
  color: var(--ink-3);
  margin-top: 0.15rem;
}
.peca-form__botao {
  flex: none;
  padding: 0.5rem 0.875rem;
  border-radius: 0.5rem;
  background: var(--brand-600);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.peca-form__abas {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--line);
}
.peca-form__aba {
  padding: 0.35rem 0.875rem;
  border-radius: 0.375rem;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.peca-form__aba--ativa {
  background: var(--brand-500);
  color: #fff;
}
.peca-form__estado {
  margin-left: auto;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-size: 0.75rem;
  font-weight: 600;
}

.peca-form__corpo {
  display: grid;
  grid-template-columns: 13rem 1fr;
  min-height: 20rem;
}
@media (max-width: 767px) {
  .peca-form__corpo {
    grid-template-columns: 1fr;
  }
}

.peca-form__paleta {
  padding: 1rem;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.peca-form__paleta ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.peca-form__paleta-titulo {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.35rem;
}
.peca-form__tipo,
.peca-form__fantasma {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.7rem;
  border-radius: 0.5rem;
  background: var(--surface-3);
  color: var(--ink-2);
  font-weight: 500;
}
.peca-form__tipo-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  border-radius: 0.375rem;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--brand-600);
  font-size: 0.6875rem;
  font-weight: 700;
}

.peca-form__ia {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding: 0.6rem 0.7rem;
  border-radius: 0.5rem;
  border: 1px solid var(--brand-200);
  color: var(--brand-700);
  font-weight: 600;
}
.peca-form__ia i {
  font-size: 1rem;
}

.peca-form__tela {
  background: #eef4fd;
  padding: 1.25rem;
}
.peca-form__cartao {
  background: var(--surface);
  border-radius: 0.875rem;
  box-shadow: var(--shadow-sm);
  padding: 1.125rem 1.25rem 1.5rem;
  height: 100%;
}
.peca-form__cartao-titulo {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}
.peca-form__cartao-sub {
  font-size: 0.75rem;
  color: var(--ink-3);
  margin-top: 0.15rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--surface-3);
}

.peca-form__campos {
  display: grid;
  gap: 0.875rem 1.25rem;
  margin-top: 1rem;
}
@media (min-width: 640px) {
  .peca-form__campos {
    grid-template-columns: 1fr 1fr;
  }
}

.peca-form__campo {
  position: relative;
  padding: 0.5rem 0.6rem 0.4rem;
  border-radius: 0.5rem;
}
/* A folga à direita é o lugar da chave e da seta, que ficam por cima do campo
   e passariam por dentro do rótulo comprido. */
.peca-form__rotulo {
  display: block;
  padding-right: 2.4rem;
  color: var(--ink-3);
}
.peca-form__seta {
  position: absolute;
  right: 0.6rem;
  top: 0.5rem;
  color: var(--ink-3);
}
/* A chave do campo de sim ou não, desligada. */
.peca-form__chave {
  position: absolute;
  right: 0.6rem;
  top: 0.55rem;
  width: 1.85rem;
  height: 1.05rem;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--line);
}
.peca-form__chave::after {
  content: '';
  position: absolute;
  top: 0.1rem;
  left: 0.12rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.peca-form__linha {
  display: block;
  height: 1px;
  margin-top: 1.1rem;
  background: var(--line);
}
.peca-form__dica {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.6875rem;
  color: var(--ink-3);
}

/* O campo que acabou de pousar fica selecionado, como fica na tela. */
.peca-form__campo--novo {
  border: 1px solid var(--brand-500);
  background: var(--brand-50);
}

/* O bloco que viaja da paleta até o formulário. */
.peca-form__fantasma {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: var(--surface);
  box-shadow: 0 12px 28px -8px rgb(15 23 42 / 0.35);
  border: 1px solid var(--brand-300, #85baee);
  pointer-events: none;
  opacity: 0;
}

/* ============================================================
   Peça de nota: a avaliação em uma estrela
   ============================================================ */
.peca-csat {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.peca-csat__estrelas {
  display: inline-flex;
  gap: 0.25rem;
  font-size: 1.5rem;
  color: #e2e8f0;
}
.peca-csat__estrelas i.acesa {
  color: #f59e0b;
}
.peca-csat__nota {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.peca-csat__texto {
  font-size: 0.8125rem;
  color: var(--ink-3);
  line-height: 1.4;
}

/* ============================================================
   Peça dos documentos
   Croqui e memorial do mesmo lote, lado a lado. É o par que o
   topógrafo reconhece de imediato, e o que prova que os dois
   saem da mesma geometria.
   ============================================================ */
/* Os dois papéis largados um sobre o outro, como ficam na mesa. Lado a lado
   e em tamanho de leitura eles tomavam a seção inteira; empilhados, dizem a
   mesma coisa ocupando pouco mais que um documento. */
.peca-docs__baralho {
  display: grid;
  place-items: center;
  padding: 1.5rem 0.5rem 2rem;
  perspective: 1200px;
}

.peca-doc {
  /* As duas folhas dividem a mesma célula da grade. É o que permite
     sobrepor sem tirar nenhuma do fluxo, então a altura da peça continua
     sendo a altura de uma folha. */
  grid-area: 1 / 1;
  width: min(74%, 19rem);
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
}
.peca-doc img {
  display: block;
  width: 100%;
  height: auto;
}

.peca-doc--tras {
  transform: translate(16%, -3%) rotate(6deg);
  box-shadow: 0 14px 30px -14px rgb(15 23 42 / 0.45);
  z-index: 1;
}
.peca-doc--frente {
  transform: translate(-14%, 3%) rotate(-4deg);
  box-shadow: 0 22px 44px -18px rgb(15 23 42 / 0.5);
  z-index: 2;
}

/* No ponteiro o baralho se abre um pouco, o suficiente para o de trás
   aparecer inteiro. */
.peca-docs__baralho:hover .peca-doc--tras {
  transform: translate(21%, -5%) rotate(8deg);
}
.peca-docs__baralho:hover .peca-doc--frente {
  transform: translate(-19%, 4%) rotate(-6deg);
}

@media (prefers-reduced-motion: reduce) {
  .peca-doc {
    transition: none;
  }
}

/* ============================================================
   Espaço reservado para imagem que ainda vai chegar
   Não é peça: é um lugar marcado, visível só para quem edita o site.
   O gerador nunca deve publicar isso sem que alguém tenha visto.
   ============================================================ */
.peca-reservado {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: 2rem 1.5rem;
  border: 2px dashed var(--brand-200);
  border-radius: var(--radius-lg);
  background: repeating-linear-gradient(135deg, #f8fafc 0 12px, #f1f5f9 12px 24px);
  color: var(--ink-3);
}
.peca-reservado__rotulo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-700);
}
.peca-reservado__oque {
  max-width: 46ch;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.peca-reservado__medida {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Movimento reduzido: tudo no estado final, sem transição
   O JavaScript também confere isso e nem chega a montar a linha do
   tempo. Estas regras são a segunda rede, para quando o script não
   carregar.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .peca-cena * {
    animation: none !important;
    transition: none !important;
  }
}

/* === peças propostas por página, integradas em 11 de agosto de 2026 === */


/* ---------- /contratos ---------- */

/* =============================================================================
   PEÇAS DA PÁGINA /contratos
   Só o que ainda não existe em assets/css/pecas.css. As três peças reusam de
   lá: .peca, .peca--larga, .peca__palco, .peca-ficha e suas linhas, o total da
   ficha, .peca-ficha__titulo, .peca-confirma e .peca-valor--ok. Os tokens são
   os de assets/css/site.css.

   Para colar em pecas.css, na ordem das peças da página.
   ============================================================================= */

/* ============================================================
   Peça do modelo: um texto, os contratos de cada lote
   Duas colunas separadas por um fio, no mesmo desenho da peça
   da visita: à esquerda o que a empresa escreve uma vez, à
   direita o que o sistema entrega lote a lote.
   ============================================================ */
.peca-modelo {
  display: grid;
  gap: 1px;
  background: var(--line);
}
@media (min-width: 900px) {
  .peca-modelo {
    /* A folha pede um pouco mais de largura que as fichas: o texto do modelo
       precisa caber em três linhas, senão os campos marcados se espalham por
       seis e o olho perde a frase. */
    grid-template-columns: 1.08fr 0.92fr;
  }
}
.peca-modelo__modelo,
.peca-modelo__saida {
  background: var(--surface);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  justify-content: center;
}
/* A coluna da direita é o resultado, e fica no cinza claro que o site já usa
   para separar o que o sistema faz do que a pessoa faz. */
.peca-modelo__saida {
  background: var(--surface-2);
}

/* A folha do contrato. Papel branco sobre a caixa branca, separado só pela
   borda e pela sombra rasa: uma folha muito sombreada viraria cartão. */
.peca-folha {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  box-shadow: var(--shadow-sm);
  padding: 1.1rem 1.25rem 1.35rem;
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--ink-2);
}
.peca-folha__cabeca {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
  padding-bottom: 0.75rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--surface-3);
}
/* As linhas cinzas são o resto do contrato, que é igual para o núcleo inteiro
   e não precisa ser lido. Elas existem para que a folha pareça uma folha e
   para que os campos marcados sejam a única coisa que o olho procura. */
.peca-folha__linha {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-3);
  margin: 0.5rem 0;
}
.peca-folha__texto {
  margin: 0.9rem 0;
}

/* O campo que muda de morador para morador, marcado dentro do próprio texto.
   Traço pontilhado porque é um lugar reservado, e não uma palavra escrita. */
.peca-campo {
  display: inline-block;
  padding: 0.02rem 0.4rem;
  border-radius: 0.375rem;
  border: 1px dashed var(--brand-400);
  background: var(--brand-50);
  color: var(--brand-800);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.peca-modelo__resto {
  margin-top: 0.25rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--line);
  text-align: center;
  font-size: 0.75rem;
  color: var(--ink-3);
}

/* ============================================================
   Peça da simulação: a forma da parcela em cada sistema
   ============================================================ */
.peca-sim {
  display: grid;
  gap: 1px;
  background: var(--line);
}
@media (min-width: 900px) {
  .peca-sim {
    grid-template-columns: 0.82fr 1.18fr;
  }
}
.peca-sim__condicoes,
.peca-sim__grafico {
  background: var(--surface);
  padding: 1.5rem;
}
.peca-sim__condicoes {
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
}

/* As escolhas de sistema e de reajuste. Não são botões: é o desenho do que
   está escolhido no projeto. */
.peca-sim__escolhas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.peca-sim__grupo {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-right: 0.15rem;
}
.peca-opcao {
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-3);
  font-size: 0.75rem;
  font-weight: 600;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.peca-opcao--ativa {
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: #fff;
}

.peca-sim__colunas {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.5rem;
  /* A folga em cima é o lugar do valor da primeira parcela, que fica acima da
     barra mais alta. */
  margin-top: 2.25rem;
}
.peca-sim__coluna {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}
.peca-sim__trilho {
  display: flex;
  align-items: flex-end;
  height: 8.5rem;
  border-bottom: 1px solid var(--line);
}
.peca-sim__haste {
  position: relative;
  width: 100%;
  border-radius: 0.3rem 0.3rem 0 0;
  background: linear-gradient(180deg, var(--brand-500), var(--brand-700));
}
.peca-sim__valor {
  position: absolute;
  bottom: calc(100% + 0.35rem);
  white-space: nowrap;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* Os dois rótulos são presos às bordas do gráfico, e não ao centro da barra:
   centrados, o primeiro sairia pela esquerda da caixa em tela estreita. */
.peca-sim__valor--inicio {
  left: 0;
}
.peca-sim__valor--fim {
  right: 0;
}
.peca-sim__mes {
  text-align: center;
  font-size: 0.6875rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
/* Os dois rótulos de eixo numa linha só, um em cada ponta: o que corre na
   horizontal e o que a altura mede. */
.peca-sim__eixo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-top: 0.5rem;
  font-size: 0.6875rem;
  color: var(--ink-3);
}

/* ============================================================
   Peça da assinatura: o contrato no celular do morador
   ============================================================ */
.peca-assina {
  display: grid;
  gap: 1.5rem;
  padding: 1.75rem 1.5rem;
  background: var(--surface-2);
  align-items: center;
}
@media (min-width: 900px) {
  .peca-assina {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2.25rem;
    padding: 2rem;
  }
}

/* O aparelho é do morador, não da equipe: por isso ele é o objeto maior da
   peça, e o que acontece depois fica ao lado, menor. */
.peca-celular {
  width: min(100%, 17.5rem);
  margin: 0 auto;
  padding: 0.5rem;
  border-radius: 1.85rem;
  background: #0f172a;
  box-shadow: var(--shadow-md);
}
.peca-celular__tela {
  border-radius: 1.4rem;
  background: #fff;
  padding: 1rem 0.95rem 1.1rem;
}
.peca-celular__topo {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink);
}
.peca-celular__sub {
  margin-top: 0.1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--surface-3);
  font-size: 0.6875rem;
  color: var(--ink-3);
}
.peca-celular__corpo {
  padding: 0.75rem 0 0.25rem;
}

.peca-assina__campo {
  position: relative;
  margin-top: 0.5rem;
}
.peca-assina__traco {
  display: block;
  width: 100%;
  height: 4rem;
}
.peca-assina__linha {
  display: block;
  height: 1px;
  background: var(--line);
}
.peca-assina__rotulo {
  display: block;
  margin-top: 0.35rem;
  text-align: center;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* Dentro da tela do aparelho a confirmação é menor que na mesa do atendente. */
.peca-celular__tela .peca-confirma {
  margin-top: 0.9rem;
  font-size: 0.75rem;
}

.peca-assina__depois {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ---------- /cobranca ---------- */

/* =============================================================================
   PEÇAS DA PÁGINA /cobranca
   Só o que ainda não existe em assets/css/pecas.css. As duas peças reusam de
   lá: .peca, .peca--larga, .peca__palco, .peca-ficha e suas linhas, o total da
   ficha, .peca-ficha--conta, .peca-ficha__titulo, .peca-balao--sistema,
   .peca-balao__hora, .peca-anexo e .peca-valor--ok. Os tokens são os de
   assets/css/site.css.
   ============================================================================= */

/* ============================================================
   Peça da régua: o que sai, para quem, e quando pode sair
   Duas colunas separadas por um fio, no desenho que a peça da
   visita já usa: à esquerda o que a empresa escreveu, à
   direita a regra que ela definiu.
   ============================================================ */
.peca-regua {
  display: grid;
  gap: 1px;
  background: var(--line);
}
@media (min-width: 900px) {
  .peca-regua {
    grid-template-columns: 1fr 1fr;
  }
}
.peca-regua__mensagem,
.peca-regua__janela {
  background: var(--surface);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.875rem;
}
.peca-regua__janela {
  background: var(--surface-2);
}

/* O balão sozinho, sem a janela de conversa inteira: aqui a mensagem não é um
   diálogo, é um texto que a empresa escreveu e que vai sair mil vezes. O fundo
   cinza é o que faz o balão parecer WhatsApp sem precisar desenhar o aplicativo
   em volta. */
.peca-regua__fio {
  display: flex;
  flex-direction: column;
  padding: 0.9rem;
  border-radius: 0.875rem;
  background: var(--surface-2);
}

/* Quem já pagou sai da fila antes de a mensagem sair. */
.peca-regua__paga--fora {
  opacity: 0.55;
}
.peca-regua__paga--fora span {
  text-decoration: line-through;
}

/* ------------------------------------------------------------
   A semana, com a janela de envio pintada
   A coluna de cada dia vai das 6h às 22h, de cima para baixo,
   e a faixa azul é o intervalo em que a mensagem pode sair.
   Domingo fica vazio porque a empresa escolheu não mandar nada
   no domingo.
   ------------------------------------------------------------ */
.peca-semana {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.5rem;
  /* A folga em cima e embaixo é onde os rótulos de 6h e de 22h sobram meio
     caractere para fora do trilho. */
  padding: 0.5rem 0;
}
.peca-semana__horas {
  position: relative;
  height: 9rem;
}
.peca-semana__hora {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  font-size: 0.625rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.peca-semana__grade {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.3rem;
  height: 9rem;
}
.peca-semana__dia {
  position: relative;
  border-radius: 0.4rem;
  background: var(--surface-3);
}
.peca-semana__janela {
  position: absolute;
  left: 0;
  right: 0;
  border-radius: 0.35rem;
  background: var(--brand-500);
  /* A janela cresce de cima para baixo quando a animação toca, como quem
     arrasta o horário na tela. */
  transform-origin: 50% 0;
}
.peca-semana__nomes {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.3rem;
  margin-top: 0.35rem;
}
.peca-semana__nome {
  text-align: center;
  font-size: 0.625rem;
  color: var(--ink-3);
}

.peca-semana__ponto {
  position: absolute;
  left: 50%;
  width: 0.8rem;
  height: 0.8rem;
  margin: -0.4rem 0 0 -0.4rem;
  border-radius: 999px;
  z-index: 1;
}
/* O aviso que ainda não pode sair: vazado, como uma coisa pendente. */
.peca-semana__ponto--espera {
  background: var(--surface);
  border: 2px dashed var(--ink-3);
}
/* O aviso já enviado, no primeiro minuto em que podia. */
.peca-semana__ponto--sai {
  background: var(--brand-800);
  box-shadow: 0 0 0 4px rgb(25 118 210 / 0.2);
}

.peca-semana__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  font-size: 0.6875rem;
  color: var(--ink-3);
}
.peca-semana__legenda span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.peca-semana__bolinha {
  width: 0.65rem;
  height: 0.65rem;
  flex: none;
  border-radius: 999px;
}
.peca-semana__bolinha--espera {
  background: var(--surface);
  border: 2px dashed var(--ink-3);
}
.peca-semana__bolinha--sai {
  background: var(--brand-800);
}

/* As regras que a empresa escolheu, do lado da grade que as desenha. */
.peca-regua__regras {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.peca-regua__regras li {
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--brand-200);
  background: var(--brand-50);
  color: var(--brand-800);
  font-size: 0.6875rem;
  font-weight: 600;
}

/* ============================================================
   Peça da trava: pagar um boleto antigo cancela a negociação
   ============================================================ */
.peca-trava {
  display: grid;
  gap: 1px;
  background: var(--line);
}
@media (min-width: 900px) {
  .peca-trava {
    grid-template-columns: 1fr 1fr;
  }
}
.peca-trava__antigos,
.peca-trava__novo {
  background: var(--surface);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.875rem;
}
.peca-trava__novo {
  background: var(--surface-2);
}

.peca-boletos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* Mês à esquerda, valor no meio, selo empurrado para a direita. Em tela
   estreita o selo desce para a segunda linha em vez de espremer o valor. */
.peca-boleto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface);
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.peca-boleto__valor {
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.peca-boleto--pago {
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.peca-selo {
  margin-left: auto;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--ink-3);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.peca-selo--ok {
  background: #dcfce7;
  color: var(--peca-ok);
}

/* O carimbo cai sobre a negociação, torto, como carimbo cai. Fica no canto de
   baixo e não no meio: por cima dos valores ele esconderia a conta que o
   leitor precisa ver para entender o que foi cancelado. */
.peca-trava__quitacao {
  position: relative;
  padding-bottom: 2.75rem;
}
.peca-carimbo {
  position: absolute;
  right: 0.75rem;
  bottom: 0.65rem;
  transform: rotate(-7deg);
  padding: 0.25rem 0.6rem;
  border: 2px solid var(--danger);
  border-radius: 0.4rem;
  background: rgb(255 255 255 / 0.85);
  color: var(--danger);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- /atendimento ---------- */

/* =============================================================================
   PROPOSTA · PEÇA DE /atendimento
   Só o que não existe em `assets/css/pecas.css`. Reusa `.peca`,
   `.peca__palco`, `.peca-ficha__titulo`, `.tabular` e os tokens de `site.css`.

   Para colar no fim de `pecas.css`, antes da seção de movimento reduzido.
   ============================================================================= */

/* ============================================================
   Compartilhado
   ATENÇÃO a quem for costurar: este bloco é o mesmo proposto em
   `equipe.css`, mais duas variações que só a fila usa. Se as duas
   propostas entrarem, cole `.peca-avatar` e `.peca-etiqueta` uma
   vez só e mantenha daqui apenas `--novo`, `--time` e `--alta`.
   ============================================================ */
.peca-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  border-radius: 999px;
  background: var(--brand-100);
  color: var(--brand-800);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
}
/* Quem atende, cheio. Na mesma linha da fila há duas pessoas, o morador e o
   atendente, e sem essa diferença o leitor não sabe qual das duas está
   atendendo a outra. */
.peca-avatar--time {
  background: var(--brand-600);
  color: #fff;
}
/* O contato que ainda não é morador cadastrado: não há nome de onde tirar
   duas letras. */
.peca-avatar--novo {
  background: var(--surface-3);
  color: var(--ink-3);
  font-size: 0.75rem;
}

.peca-etiqueta {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--ink-3);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* A prioridade não é um problema, é uma ordem de atendimento. Âmbar, e não
   vermelho, que na casa é a cor do atraso. */
.peca-etiqueta--alta {
  background: #fef3c7;
  color: #92400e;
}

/* ============================================================
   A fila do número
   ============================================================ */
.peca-fila {
  background: var(--surface);
  padding: 1.125rem 1.25rem 1.25rem;
}

.peca-fila__topo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--line);
}
/* O título da ficha traz margem embaixo, que aqui atrapalha: a linha do topo
   é toda no mesmo eixo. */
.peca-fila__topo .peca-ficha__titulo {
  margin-bottom: 0;
}
.peca-fila__numero {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 0.75rem;
  font-weight: 600;
}
.peca-fila__numero i {
  color: #25d366;
  font-size: 0.9rem;
}
.peca-fila__conta {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--ink-3);
}
.peca-fila__conta b {
  margin-right: 0.25rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
}

.peca-fila__lista {
  list-style: none;
  margin: 0.875rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.peca-fila__linha {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid var(--line);
  background: var(--surface);
}
/* No celular a linha vira duas: quem falou em cima, etiquetas e responsável
   embaixo, alinhados com o texto. */
@media (max-width: 700px) {
  .peca-fila__linha {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .peca-fila__marcas,
  .peca-fila__dono {
    grid-column: 2;
  }
}

.peca-fila__assunto b {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink);
}
.peca-fila__previa {
  display: block;
  font-size: 0.75rem;
  color: var(--ink-3);
  /* Uma linha só. A prévia diz do que se trata, não conta a conversa. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.peca-fila__marcas {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.peca-fila__dono {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 5.5rem;
  font-size: 0.75rem;
  color: var(--ink-2);
}

/* A conversa que chegou e ainda não é de ninguém. Âmbar tracejado: é o que
   pede alguém, e continua pedindo até alguém pegar. */
.peca-fila__linha--livre {
  border-color: #fcd34d;
  background: #fffdf5;
}
.peca-fila__dono--vazio {
  padding: 0.2rem 0.55rem;
  border: 1px dashed #fbbf24;
  border-radius: 999px;
  background: #fffbeb;
  color: #92400e;
  font-weight: 600;
}

/* ---------- /equipe ---------- */

/* =============================================================================
   PROPOSTA · PEÇAS DE /equipe
   Só o que não existe em `assets/css/pecas.css`. Tudo o que já existe é
   reusado: `.peca`, `.peca__palco`, `.peca-ficha__titulo`, `.peca-ficha__linha`,
   `.peca-balao`, `.peca-balao__hora`, `.peca-anexo`, `.peca-passo`,
   `.peca-passos`, `.chip-ok`, `.chip-neutro`, e os tokens de `site.css`.

   Para colar no fim de `pecas.css`, antes da seção de movimento reduzido.
   Nada aqui anima sozinho: quem move é o `equipe.js`, e o desenho parado já
   é o resultado.
   ============================================================================= */

/* ============================================================
   Compartilhado pelas peças novas
   ATENÇÃO a quem for costurar: este bloco também está proposto
   em `atendimento.css`, porque as duas páginas precisam dele.
   Cole uma vez só.
   ============================================================ */

/* A pessoa da equipe em duas letras. Foto de gente não existe no site, e a
   inicial num círculo é o que a própria plataforma mostra. */
.peca-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  border-radius: 999px;
  background: var(--brand-100);
  color: var(--brand-800);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
}

/* Etiqueta pequena: categoria da tarefa, marcação do motivo, assunto da
   conversa. Sempre curta, sempre uma palavra ou duas. */
.peca-etiqueta {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--ink-3);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.peca-etiqueta--categoria {
  background: var(--brand-50);
  color: var(--brand-700);
}
/* Os mesmos verdes e vermelhos que o resto das peças usa para sucesso e
   problema, para o leitor não ter de aprender uma segunda convenção. */
.peca-etiqueta--ok {
  background: #dcfce7;
  color: #15803d;
}
.peca-etiqueta--falha {
  background: #ffe4e6;
  color: #be123c;
}
.peca-etiqueta--neutro {
  background: var(--surface-3);
  color: var(--ink-3);
}

/* ============================================================
   A moldura das três peças: o que entra, a seta, o que sai
   A página inteira fala de uma coisa que vira outra sem ninguém
   redigitar no meio. Repetir a moldura faz a segunda e a terceira
   peça serem lidas mais rápido que a primeira.
   ============================================================ */
.peca-fluxo {
  position: relative;
  display: grid;
  background: var(--surface);
}
@media (min-width: 900px) {
  .peca-fluxo {
    grid-template-columns: minmax(0, 0.92fr) 3rem minmax(0, 1.08fr);
  }
}

/* O lado de onde a coisa vem fica no cinza, o lado que o sistema entrega fica
   no branco. É a leitura da peça antes de qualquer rótulo. */
.peca-fluxo__entra {
  background: var(--surface-2);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
}
.peca-fluxo__sai {
  background: var(--surface);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.peca-liga {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
}
.peca-liga svg {
  width: 2.5rem;
  height: 1.5rem;
  overflow: visible;
}
@media (min-width: 900px) {
  .peca-liga {
    border-right: 1px solid var(--line);
  }
}
/* Empilhado, a seta desce em vez de apontar para a direita. */
@media (max-width: 899px) {
  .peca-liga {
    padding: 0.4rem 0 0.7rem;
    border-bottom: 1px solid var(--line);
  }
  .peca-liga svg {
    transform: rotate(90deg);
  }
  .peca-fluxo__entra,
  .peca-fluxo__sai {
    padding: 1.125rem;
  }
}

/* ============================================================
   Peça 1: a tarefa nasce do lote e vira conversa
   ============================================================ */
.peca-origens {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.peca-origem {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.75rem;
  border: 1px solid var(--line);
  background: var(--surface);
}
/* A origem desta tarefa. As outras duas continuam à vista porque a frase da
   seção é que a tarefa nasce de qualquer uma delas. */
.peca-origem--escolhida {
  border-color: var(--brand-500);
  box-shadow: var(--shadow-sm);
}
.peca-origem__marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.1rem;
  flex: none;
  overflow: hidden;
  border-radius: 0.5rem;
  background: var(--surface-3);
  color: var(--brand-600);
  font-size: 1.05rem;
}
.peca-origem__mapa {
  display: block;
  width: 100%;
  height: 100%;
}
.peca-origem__nome {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
}
.peca-origem__det {
  display: block;
  font-size: 0.6875rem;
  color: var(--ink-3);
}

.peca-tarefa__cabeca {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}
.peca-tarefa__titulo {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
}
/* Quatro campos em duas colunas: em uma coluna só, a ficha ficava mais alta
   que a conversa que vem abaixo dela, que é o que interessa na peça. */
.peca-tarefa__dados {
  display: grid;
  gap: 0 1.25rem;
}
@media (min-width: 560px) {
  .peca-tarefa__dados {
    grid-template-columns: 1fr 1fr;
  }
}

/* A localização e o telefone aparecem como as duas ações que a tarefa
   oferece. Endereço escrito não mostra que dali se chega ao mapa, e número de
   telefone inventado é número de alguém. */
.peca-tarefa__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.peca-tarefa__acao {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--brand-700);
  font-size: 0.75rem;
  font-weight: 600;
}

.peca-tarefa__fio {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.25rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--line);
}

/* O recado da equipe reaproveita o balão da conversa e troca só o que muda:
   ocupa a linha inteira, é branco com contorno em vez de verde de WhatsApp, e
   traz o nome de quem escreveu. É conversa interna, não conversa com o
   morador, e as duas não podem parecer a mesma coisa. */
.peca-balao--equipe {
  align-self: stretch;
  max-width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: none;
  color: var(--ink-2);
}
.peca-balao__autor {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink);
}
/* A hora existe no balão do morador como uma linha embaixo. Aqui ela vai para
   o fim da linha do autor, que é onde o olho já está. */
.peca-balao__autor .peca-balao__hora {
  margin: 0 0 0 auto;
  font-weight: 500;
}
/* O anexo nasceu na conversa com o morador, onde o verde é a cor do canal.
   Dentro da tarefa ele volta para o azul da interface. */
.peca-balao--equipe .peca-anexo {
  background: var(--surface-3);
  border-color: var(--line);
}
.peca-balao--equipe .peca-anexo i {
  color: var(--brand-600);
}

.peca-marcacao {
  padding: 0.05rem 0.35rem;
  border-radius: 0.35rem;
  background: var(--brand-50);
  color: var(--brand-700);
  font-weight: 700;
}

/* O colega foi avisado. Fica fora do balão porque não é fala de ninguém: é o
   sistema dizendo o que fez. */
.peca-aviso {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-left: 0.25rem;
  font-size: 0.75rem;
  color: var(--ink-3);
}
.peca-aviso i {
  color: var(--brand-500);
}

.peca-audio {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
  padding: 0.45rem 0.6rem;
  border-radius: 0.625rem;
  background: var(--surface-3);
}
.peca-audio > i {
  color: var(--brand-600);
  font-size: 1.1rem;
}
.peca-audio__onda {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  height: 1.25rem;
}
.peca-audio__onda span {
  display: block;
  width: 2px;
  border-radius: 999px;
  background: var(--brand-400);
}
.peca-audio__tempo {
  font-size: 0.6875rem;
  color: var(--ink-3);
}

/* As versões anteriores continuam ali, alinhadas embaixo do nome do arquivo. */
.peca-versoes {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  margin-top: 0.35rem;
  padding-left: 1.95rem;
  font-size: 0.6875rem;
  color: var(--ink-3);
}

/* ============================================================
   Peça 2: centenas de tarefas de uma vez
   ============================================================ */
.peca-selecao {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.peca-selecao__linha {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.peca-selecao__linha b {
  font-size: 0.75rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* Os que não couberam. Tracejado porque não é um lote, é o resto deles. */
.peca-selecao__linha--resto {
  display: block;
  text-align: center;
  border-style: dashed;
  background: transparent;
  color: var(--ink-3);
  font-size: 0.75rem;
}
.peca-caixa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  border-radius: 0.3rem;
  background: var(--brand-600);
  color: #fff;
  font-size: 0.7rem;
}

.peca-lote__conta {
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.peca-lote__conta b {
  margin-right: 0.35rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--brand-700);
}

/* O molde do título, com as partes na mesma ordem em que aparecem em cada
   tarefa criada logo abaixo. É o que faz a peça se explicar sem legenda. */
.peca-molde {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.peca-molde span {
  padding: 0.15rem 0.5rem;
  border-radius: 0.35rem;
  border: 1px dashed var(--brand-200);
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.peca-criadas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.peca-criada {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.625rem;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.peca-criada__titulo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.peca-criada__titulo b {
  padding: 0.05rem 0.3rem;
  border-radius: 0.3rem;
  background: var(--brand-50);
  color: var(--brand-800);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}
.peca-criada__dono {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: none;
  font-size: 0.75rem;
  color: var(--ink-3);
}

.peca-reparte {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  margin-top: 0.35rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}
.peca-reparte__pessoa {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--ink-3);
}
.peca-reparte__pessoa b {
  font-size: 0.8125rem;
  color: var(--ink);
}

/* ============================================================
   Peça 3: o motivo, e o que fica no contrato
   ============================================================ */
.peca-motivos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.peca-motivo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.7rem;
  border-radius: 0.625rem;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.peca-motivo--escolhido {
  border-color: var(--brand-500);
  background: var(--brand-50);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
  color: var(--ink);
}

/* A linha do tempo é a sequência de passos que já existe, com uma medida em
   pé ao lado marcando quanto tempo separa o primeiro registro do último. É a
   medida que faz os três anos serem vistos, e não lidos. */
.peca-tempo {
  position: relative;
  padding-left: 2.6rem;
}
.peca-tempo::before {
  content: '';
  position: absolute;
  left: 0.9rem;
  top: 1.5rem;
  bottom: 1.5rem;
  width: 2px;
  border-radius: 999px;
  background: var(--brand-200);
}
/* O fundo é o da coluna, e é ele que abre o vão na régua para o rótulo caber
   sem ficar por cima do traço. */
.peca-tempo__medida {
  position: absolute;
  /* Centrado no traço da régua, que está em 0,9rem. */
  left: 0.25rem;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  padding: 0.5rem 0.15rem;
  background: var(--surface);
  color: var(--brand-700);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.peca-tempo__extra {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.6875rem;
  color: var(--ink-3);
}

/* O registro que acabou de entrar. As margens negativas devolvem o conteúdo à
   mesma coluna dos outros, e o fio precisa da correção correspondente para
   continuar passando pelo meio dos ícones. */
.peca-passo--novo {
  margin: 0 -0.625rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  border-radius: 0.875rem;
  background: var(--brand-50);
}
.peca-passo--novo:not(:last-child)::before {
  left: 1.715rem;
}

/* O motivo escolhido atravessando a peça até a linha do tempo. Só o script o
   mostra: parado, ele não existe. */
.peca-desfecho__fantasma {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 0.6rem 0.7rem;
  border-radius: 0.625rem;
  border: 1px solid var(--brand-500);
  background: var(--surface);
  box-shadow: 0 12px 28px -8px rgb(15 23 42 / 0.35);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  pointer-events: none;
  opacity: 0;
}

/* ---------- /financeiro ---------- */

/* =============================================================================
   PROPOSTA · PEÇAS DE /financeiro
   Só o CSS novo. Tudo o que já existe em pecas.css é reusado como está:
   .peca, .peca--larga, .peca__palco, .peca-ficha__titulo, .peca-ficha__linha,
   .peca-valor--ok, .peca-valor--atraso, .tabular (site.css).

   Para colar em pecas.css depois da peça do formulário, mantendo a ordem em
   que as peças aparecem no site.
   ============================================================================= */

/* ============================================================
   Peça do split: a parcela do morador se dividindo
   Duas metades: à esquerda o que entra, à direita o que sai. O
   colchete da direita é o desenho da divisão, e é ele que diz
   que as quatro saídas nascem do mesmo pagamento.
   ============================================================ */
.peca-split {
  display: grid;
  gap: 1px;
  background: var(--line);
}
@media (min-width: 900px) {
  .peca-split {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  }
}

.peca-split__entrada,
.peca-split__saidas {
  background: var(--surface);
  padding: 1.5rem;
}
/* A coluna da esquerda tem um cartão só e a da direita quatro linhas. Centrar
   evita que o boleto termine no alto de uma caixa vazia. */
.peca-split__entrada {
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* O boleto pago: valor grande, porque é dele que tudo sai. */
.peca-split__boleto {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1rem 1.125rem;
  border-radius: 0.875rem;
  border: 1px solid var(--brand-200);
  background: var(--brand-50);
}
.peca-split__boleto-quem {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand-700);
}
.peca-split__boleto-valor {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
}
.peca-split__boleto-nota {
  font-size: 0.75rem;
  color: var(--ink-3);
}

/* O instante da divisão, entre o que entra e o que sai. */
.peca-split__momento {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.875rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--brand-700);
}
.peca-split__momento i {
  font-size: 0.875rem;
}

/* As três posições da divisão, com a combinada marcada. Não é botão: é o
   desenho de uma escolha que já foi feita na preparação do projeto. */
.peca-split__momentos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1.125rem;
}
.peca-split__opcao {
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 0.6875rem;
  font-weight: 600;
}
.peca-split__opcao--marcada {
  border-color: var(--brand-500);
  background: var(--brand-50);
  color: var(--brand-700);
}

/* O colchete. O tronco é um elemento próprio, e não a borda da lista, porque
   ele cresce de cima para baixo quando o script toca a divisão: borda não se
   anima, elemento se anima. Sem script ele já está inteiro. */
.peca-split__ramos {
  position: relative;
  padding-left: 1.125rem;
}
.peca-split__tronco {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--brand-200);
}
.peca-split__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.peca-split__saida {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.1rem 0.75rem;
  padding: 0.7rem 0;
}
.peca-split__saida + .peca-split__saida:not(.peca-split__saida--casa) {
  border-top: 1px solid var(--surface-3);
}
.peca-split__saida::before {
  content: '';
  position: absolute;
  left: -1.125rem;
  top: 1.35rem;
  width: 0.875rem;
  height: 2px;
  background: var(--brand-200);
}

.peca-split__quem {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.peca-split__nome {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}
.peca-split__pct {
  flex: none;
  padding: 0.1rem 0.4rem;
  border-radius: 0.375rem;
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 0.75rem;
  font-weight: 700;
}
.peca-split__valor {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}
/* A forma pela qual aquele parceiro recebe. É o que separa uma saída da
   outra, e é por isso que ela tem cor própria. */
.peca-split__forma {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--ink-3);
}
.peca-split__forma i {
  font-size: 0.8125rem;
  flex: none;
}
.peca-split__saida--agora .peca-split__forma,
.peca-split__saida--agora .peca-split__forma i {
  color: var(--brand-700);
}
/* O repasse agrupado não sai no ato, e o ramo dele é neutro: a diferença
   entre as duas formas precisa ser vista antes de ser lida. */
.peca-split__saida--agrupado .peca-split__forma i {
  color: var(--ink-2);
}
.peca-split__saida--agrupado::before {
  background: var(--line);
}
.peca-split__saida--reserva .peca-split__forma i {
  color: var(--peca-ok);
}
/* A última linha é o que sobra na conta do projeto, e por isso se lê como
   total: fundo próprio e nenhum ramo colorido. */
.peca-split__saida--casa {
  margin-top: 0.35rem;
  padding: 0.85rem 0.75rem;
  border-radius: 0.75rem;
  background: var(--surface-2);
}
.peca-split__saida--casa::before {
  top: 1.5rem;
  background: var(--line);
}

/* ============================================================
   Peça da conciliação: o extrato e a parcela
   Duas listas com o mesmo número de linhas, para o par ficar na
   mesma altura. A ponte é meia de cada lado, presa à própria
   linha: assim ela não depende de as duas colunas medirem igual.
   ============================================================ */
.peca-conc {
  display: grid;
  gap: 1px;
  background: var(--line);
}
@media (min-width: 900px) {
  .peca-conc {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }
}

.peca-conc__lado {
  background: var(--surface);
  padding: 1.25rem 1.375rem 1.5rem;
}
.peca-conc__lado--parcelas {
  background: var(--surface-2);
}

.peca-conc__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}
.peca-conc__linha {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 0.7rem 0.6rem;
  border-radius: 0.625rem;
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.peca-conc__linha + .peca-conc__linha {
  border-top: 1px solid var(--surface-3);
}
/* O par que se reconheceu. O mesmo realce dos dois lados é o que liga uma
   linha à outra sem precisar de fio atravessando a peça. */
.peca-conc__linha--par {
  background: var(--brand-50);
  box-shadow: inset 0 0 0 1px var(--brand-200);
}
/* A meia ponte, presa à linha realçada de cada lado. Some no celular, onde as
   duas colunas ficam empilhadas e a ponte apontaria para o nada.

   O `--ponte` é o que o script anima para a ponte se estender quando o par se
   reconhece. Sem script a propriedade não existe, o valor de reserva vale 1 e
   a ponte já está inteira, que é o resultado. */
@media (min-width: 900px) {
  .peca-conc__lado .peca-conc__linha--par::after {
    content: '';
    position: absolute;
    top: calc(50% - 1px);
    right: -1.375rem;
    width: 1.375rem;
    height: 2px;
    background: var(--brand-400);
    transform: scaleX(var(--ponte, 1));
    transform-origin: left center;
  }
  .peca-conc__lado--parcelas .peca-conc__linha--par::after {
    right: auto;
    left: -1.375rem;
    transform-origin: right center;
  }
}

.peca-conc__data {
  grid-column: 1;
  font-weight: 600;
  color: var(--ink-3);
}
.peca-conc__meio {
  grid-column: 2;
}
.peca-conc__valor {
  grid-column: 3;
  font-weight: 700;
  color: var(--ink);
}
.peca-conc__lote {
  grid-column: 1 / 3;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-weight: 600;
  color: var(--ink);
}
.peca-conc__mes {
  font-weight: 400;
  color: var(--ink-3);
}
/* A situação da parcela ocupa a linha de baixo inteira, porque o texto é o
   que mais cresce quando a peça encolhe. */
.peca-conc__selo {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--peca-ok);
}
.peca-conc__selo--ok i {
  font-size: 0.8125rem;
}
/* Enquanto a parcela ainda não foi paga, o mesmo lugar mostra o vencimento.
   É o que o script escreve ao recuar a peça. */
.peca-conc__selo--espera {
  color: var(--ink-3);
}
.peca-conc__selo--espera i {
  display: none;
}

/* A nota atravessa as duas colunas: ela é a consequência do par, não uma
   informação de um dos lados. */
.peca-conc__nota {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.375rem;
  background: var(--surface);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-2);
}
.peca-conc__nota i {
  font-size: 1rem;
  color: var(--brand-600);
}

/* ============================================================
   Peça dos dois fatores: a alteração parando para confirmar
   Recorte de tela pequeno. O pedido de identidade fica por cima
   da própria tela que ele está segurando, que é como ele aparece
   no produto.
   ============================================================ */
.peca-2f {
  position: relative;
  background: var(--surface);
  padding: 1.25rem 1.375rem 1.5rem;
}

/* A tela reserva embaixo o espaço da trava, que é posicionada no rodapé do
   recorte. Sem essa folga, o pedido de código cobriria o botão que acabou de
   ser acionado, e a ordem dos dois é o que a peça tem para contar. */
.peca-2f__tela {
  padding-bottom: 11.5rem;
}
@media (max-width: 640px) {
  .peca-2f__tela {
    padding-bottom: 0;
  }
}

.peca-2f__app {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.625rem;
}
.peca-2f__campos {
  border-top: 1px solid var(--surface-3);
  padding-top: 0.35rem;
}

.peca-2f__campo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.875rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.625rem;
  border: 1px solid var(--brand-500);
  background: var(--surface);
}
.peca-2f__rotulo {
  font-size: 0.8125rem;
  color: var(--ink-3);
}
.peca-2f__entrada {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}
.peca-2f__botao {
  display: inline-block;
  margin-top: 0.875rem;
  padding: 0.55rem 1rem;
  border-radius: 0.5rem;
  background: var(--brand-600);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* O pedido de código, ancorado no rodapé do recorte. Ele cobre o botão de
   propósito: nada foi gravado ainda. */
.peca-2f__trava {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  padding: 1rem 1.125rem 1.125rem;
  border-radius: 0.875rem;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 -10px 30px -12px rgb(15 23 42 / 0.35);
}
.peca-2f__trava-titulo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
}
.peca-2f__trava-titulo i {
  color: var(--brand-600);
}
.peca-2f__trava-texto {
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: var(--ink-3);
}
.peca-2f__digitos {
  display: flex;
  gap: 0.4rem;
  margin: 0.75rem 0 0.875rem;
}
.peca-2f__digito {
  width: 2rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.peca-2f__confirmar {
  display: inline-block;
  padding: 0.5rem 0.95rem;
  border-radius: 0.5rem;
  background: var(--brand-600);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Numa tela estreita a trava ocuparia quase o recorte inteiro. Ali ela volta
   ao fluxo, embaixo do botão, e a ordem continua sendo a mesma. */
@media (max-width: 640px) {
  .peca-2f__trava {
    position: static;
    margin-top: 1rem;
    box-shadow: var(--shadow-sm);
  }
}

/* ============================================================
   Movimento reduzido: as três peças param no resultado
   O script já confere isso e nem monta a linha do tempo. Estas
   regras são a segunda rede.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .peca-split *,
  .peca-conc *,
  .peca-2f * {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- /projeto-publico ---------- */

/* =============================================================================
   PROPOSTA · PEÇAS DE /projeto-publico
   Só o CSS novo. Reusa de pecas.css: .peca, .peca--larga, .peca__palco,
   .peca-ficha__titulo, .peca-ficha__linha, e as variáveis do território
   (--peca-solo, --peca-rua, --peca-telhado, --peca-mata, --peca-lote,
   --peca-alerta, --peca-ok). Reusa de site.css: .tabular e .sr-only.

   Para colar em pecas.css depois das peças de /financeiro.
   ============================================================================= */

/* ============================================================
   Peça do link: a empresa escolhe, a prefeitura enxerga
   À esquerda o que se marca, à direita o que aparece. As duas
   metades precisam ser lidas juntas, então nunca ficam longe
   uma da outra: no celular a escolha vem primeiro, porque é o
   gesto que explica a tela.
   ============================================================ */
.peca-link {
  display: grid;
  gap: 1px;
  background: var(--line);
}
@media (min-width: 900px) {
  .peca-link {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  }
}

.peca-link__escolha {
  background: var(--surface);
  padding: 1.25rem 1.375rem 1.5rem;
  display: flex;
  flex-direction: column;
}

.peca-link__chaves {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.peca-link__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--ink-2);
}

/* A chave. Não reusei a `.peca-form__chave` do formulário porque aquela é
   posicionada em cima do campo dela, e esta precisa estar no fluxo, à
   esquerda do rótulo. A bola é um elemento próprio, e não um pseudo, porque
   é ela que desliza quando o script desliga a chave. */
.peca-link__chave {
  position: relative;
  flex: none;
  width: 1.85rem;
  height: 1.05rem;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--line);
}
.peca-link__chave--ligada {
  background: var(--brand-500);
  border-color: var(--brand-500);
}
.peca-link__bola {
  position: absolute;
  top: 0.1rem;
  left: 0.12rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.peca-link__chave--ligada .peca-link__bola {
  left: auto;
  right: 0.12rem;
}
/* O rótulo da chave desligada fica mais claro: dá para ver de longe qual das
   sete não está no link. */
.peca-link__chave:not(.peca-link__chave--ligada) + .peca-link__rotulo {
  color: var(--ink-3);
}

.peca-link__regras {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--surface-3);
}
.peca-link__revogar {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  margin-top: 0.875rem;
  padding: 0.45rem 0.8rem;
  border-radius: 0.5rem;
  border: 1px solid var(--line);
  color: var(--danger);
  font-size: 0.75rem;
  font-weight: 600;
}

/* A tela da prefeitura. Fundo diferente do lado da escolha, porque é outro
   navegador, em outra mesa. */
.peca-link__tela {
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
}
.peca-link__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1.125rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.peca-link__endereco {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--ink-3);
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.peca-link__ao-vivo {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-size: 0.6875rem;
  font-weight: 700;
}
/* O ponto que pulsa ao lado de "lido na hora". Sem o script ele fica parado,
   e o rótulo continua dizendo a mesma coisa. */
.peca-link__ao-vivo::before {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: currentColor;
}

.peca-link__conteudo {
  padding: 1rem 1.125rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.peca-link__mapa {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.625rem;
  overflow: hidden;
}

.peca-link__numeros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.peca-link__numero {
  flex: 1 1 5rem;
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.7rem;
  border-radius: 0.625rem;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.6875rem;
  color: var(--ink-3);
}
.peca-link__numero b {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}

/* A lista de moradores, que é onde a chave dos dados pessoais aparece. */
.peca-link__moradores {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 0.625rem;
  background: var(--surface);
  overflow: hidden;
}
.peca-link__morador {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.75rem;
  color: var(--ink-2);
}
.peca-link__morador + .peca-link__morador {
  border-top: 1px solid var(--surface-3);
}
.peca-link__morador--cabeca {
  background: var(--surface-2);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.peca-link__lote {
  font-weight: 600;
  color: var(--ink);
}
.peca-link__situacao {
  justify-self: start;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
}
/* As três situações usam as mesmas cores dos lotes na miniatura do mapa, e é
   isso que liga a lista ao desenho logo acima. */
.peca-link__situacao--feito {
  background: rgb(42 163 255 / 0.16);
  color: var(--brand-800);
}
.peca-link__situacao--anda {
  background: var(--surface-3);
  color: var(--ink-2);
}
.peca-link__situacao--espera {
  background: rgb(255 180 84 / 0.22);
  color: #92400e;
}

/* O nome do morador quando os dados pessoais não estão no link: uma tarja no
   lugar do texto. A largura vem do HTML, uma por linha, para a lista não
   parecer três tarjas iguais coladas. */
.peca-link__nome {
  min-width: 0;
  font-weight: 600;
  color: var(--ink);
}
.peca-link__nome--oculto {
  height: 0.7rem;
  border-radius: 999px;
  background: repeating-linear-gradient(
    135deg,
    var(--surface-3) 0 6px,
    #e9eef5 6px 12px
  );
}

/* ============================================================
   Peça da ficha: o que a visita levantou, assinado
   Uma folha sobre a mesa. Estreita de propósito: ela vai ao
   lado da prosa, e documento se lê em coluna, não em faixa.
   ============================================================ */
.peca-cadastro {
  background: var(--surface-2);
  padding: 1.5rem 1rem 1.75rem;
  display: flex;
  justify-content: center;
}
.peca-cadastro__folha {
  width: min(100%, 24rem);
  padding: 1.25rem 1.375rem 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 18px 40px -22px rgb(15 23 42 / 0.45);
}
.peca-cadastro__selo {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 0.375rem;
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.peca-cadastro__titulo {
  margin-top: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.peca-cadastro__sub {
  font-size: 0.75rem;
  color: var(--ink-3);
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--surface-3);
}
.peca-cadastro__secao {
  margin-top: 0.875rem;
}
/* O visto de cada dado conferido na visita. */
.peca-cadastro__conf {
  margin-left: 0.4rem;
  color: var(--peca-ok);
  font-size: 0.8125rem;
}

.peca-cadastro__assinatura {
  margin-top: 1.25rem;
  padding-top: 0.5rem;
}
.peca-cadastro__rubrica {
  display: block;
  width: min(100%, 13rem);
  height: auto;
  margin-bottom: 0.25rem;
}
.peca-cadastro__quem {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--ink-3);
  font-size: 0.6875rem;
  color: var(--ink-3);
}

/* ============================================================
   Movimento reduzido: as duas peças param no resultado
   O script já confere isso e nem monta a linha do tempo. Estas
   regras são a segunda rede.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .peca-link *,
  .peca-cadastro * {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- /ferramentas ---------- */

/* =============================================================================
   PEÇA DE /ferramentas
   Só o que não existe em pecas.css. A peça reusa `.peca`, `.peca__palco` e
   `.peca-ficha__titulo`, e as cores do território (`--peca-lote`,
   `--peca-lote-fill`) para o que a plataforma desenha.

   Para colar em assets/css/pecas.css, no fim, antes do bloco de movimento
   reduzido.
   ============================================================================= */

/* ============================================================
   Peça do conversor de DXF
   Três estações numa linha: o desenho como sai do CAD, a escolha
   do sistema de coordenadas, e o mesmo desenho em shapefile com
   os arquivos que ele sempre é.
   ============================================================ */
.peca-dxf {
  position: relative;
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--surface);
}
@media (min-width: 900px) {
  .peca-dxf {
    /* A estação do meio é mais estreita: ela é uma escolha, não um desenho. */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 0.86fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 1.25rem;
  }
}

.peca-dxf__estacao {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  min-width: 0;
}
.peca-dxf__estacao .peca-ficha__titulo {
  margin-bottom: 0;
}

/* A seta aponta para a direita quando as três estações estão lado a lado, e
   para baixo quando elas empilham. É a mesma seta girada. */
.peca-dxf__seta {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  font-size: 1.25rem;
}
@media (max-width: 899px) {
  .peca-dxf__seta {
    transform: rotate(90deg);
  }
}

/* O nome do arquivo que entra. */
.peca-dxf__arquivo {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border-radius: 0.5rem;
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.peca-dxf__arquivo i {
  color: var(--ink-3);
}

.peca-dxf__desenho {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  border: 1px solid var(--line);
}
/* O papel do CAD: branco e com a malha de fundo. */
.peca-dxf__desenho--cad {
  background: #fff;
}
/* O que a plataforma desenha fica sobre um fundo que puxa para o azul dela. */
.peca-dxf__desenho--shp {
  background: #f5fbff;
  border-color: var(--brand-200);
}

/* ============================================================
   A escolha do sistema de coordenadas
   ============================================================ */
.peca-dxf__lista {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.peca-dxf__opcao {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  width: 100%;
  min-height: 48px;
  padding: 0.55rem 0.75rem 0.55rem 2.1rem;
  border: 1px solid var(--line);
  border-radius: 0.625rem;
  background: var(--surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.peca-dxf__opcao:hover {
  border-color: var(--brand-400);
}
/* O anel da escolha, desenhado em CSS para não depender de ícone. */
.peca-dxf__opcao::before {
  content: '';
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--surface);
}
.peca-dxf__opcao[aria-checked='true'] {
  border-color: var(--brand-500);
  background: var(--brand-50);
}
.peca-dxf__opcao[aria-checked='true']::before {
  border-color: var(--brand-600);
  box-shadow: inset 0 0 0 3px var(--brand-600);
}

.peca-dxf__opcao-nome {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.peca-dxf__opcao-cod {
  font-size: 0.75rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.peca-dxf__opcao[aria-checked='true'] .peca-dxf__opcao-cod {
  color: var(--brand-700);
  font-weight: 700;
}

/* ============================================================
   Os arquivos que saem
   ============================================================ */
.peca-dxf__arquivos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.peca-dxf__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  border-radius: 0.5rem;
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* O .prj é o único que carrega a escolha, então é o único destacado. */
.peca-dxf__chip--prj {
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  color: var(--brand-800);
}
.peca-dxf__chip--prj b {
  padding: 0.1rem 0.35rem;
  border-radius: 0.3rem;
  background: var(--brand-600);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
}

/* O código que viaja da escolha até o .prj. Nasce invisível: quem o mostra é
   o script, e sem script o .prj já está marcado no HTML. */
.peca-dxf__voando {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 0.1rem 0.35rem;
  border-radius: 0.3rem;
  background: var(--brand-600);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 10px 24px -8px rgb(15 23 42 / 0.45);
  pointer-events: none;
  opacity: 0;
}

/* ---------- /resultados ---------- */

/* =============================================================================
   PEÇAS DE /resultados
   Só o que não existe em pecas.css. As duas peças reusam `.peca`,
   `.peca__palco`, `.peca-ficha__titulo`, `.peca-abas`, `.peca-aba`,
   `.peca-barra`, `.peca-barra__nome`, `.peca-barra__trilho` e
   `.peca-barra__num`.

   Para colar em assets/css/pecas.css, no fim, antes do bloco de movimento
   reduzido.
   ============================================================================= */

:root {
  /* Como um motivo de encerramento é contado. São três estados que o produto
     já tem, e a cor precisa dizer qual é qual antes de o leitor ler a chave:
     verde é o verde de `--peca-ok`, que a peça da conversa já usa para
     pagamento reconhecido. */
  --res-sucesso: var(--peca-ok);
  --res-neutro: #cbd5e1;
  --res-falha: #fb7185;

  /* O balanço da recuperação. O que voltou é azul, na escala da marca; o que
     foi concedido é o âmbar de `--cobrar`, o tom que a jornada já usa para
     cobrança; o líquido fecha em verde. */
  --res-quitacao: var(--brand-600);
  --res-refin: var(--brand-400);
  --res-desconto: #b45309;
  --res-juros: #d98324;
  --res-multa: #edb37a;
  --res-liquido: var(--peca-ok);
}

/* ============================================================
   Peça da taxa de sucesso
   Uma linha por área ou por pessoa. O comprimento da barra é o
   volume encerrado, a repartição dela é a proporção de sucesso,
   neutro e falha, e o número da direita é a taxa. Duas leituras
   na mesma linha, que é o argumento da seção.
   ============================================================ */
.peca-taxa {
  padding: 1.25rem 1.5rem 1.5rem;
}

.peca-taxa__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.peca-taxa__topo .peca-ficha__titulo {
  margin-bottom: 0;
}
/* As abas herdam o desenho de `.peca-abas`, mas aqui elas dividem a linha com
   o título e não podem empurrar o painel para baixo. */
.peca-taxa__abas {
  margin-bottom: 0;
  padding-bottom: 0;
}

.peca-taxa__chave {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0.875rem 0 1.125rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.75rem;
  color: var(--ink-3);
}
.peca-taxa__chave span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.peca-taxa__ponto {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 3px;
  flex: none;
}
.peca-taxa__ponto--sucesso {
  background: var(--res-sucesso);
}
.peca-taxa__ponto--neutro {
  background: var(--res-neutro);
}
.peca-taxa__ponto--falha {
  background: var(--res-falha);
}

.peca-taxa__painel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.peca-taxa__painel[hidden] {
  display: none;
}

/* Um pouco mais alto que a barra comum: são três pedaços, e no trilho de meio
   centímetro o menor deles sumia. */
.peca-taxa__trilho {
  height: 0.625rem;
}
.peca-taxa__fita {
  display: flex;
  height: 100%;
  border-radius: 999px;
  overflow: hidden;
}
.peca-taxa__parte {
  display: block;
  height: 100%;
}
.peca-taxa__parte--sucesso {
  background: var(--res-sucesso);
}
.peca-taxa__parte--neutro {
  background: var(--res-neutro);
}
.peca-taxa__parte--falha {
  background: var(--res-falha);
}

/* A taxa é o número que decide, então é ela que tem tamanho. O volume fica
   embaixo, no peso de nota. */
.peca-taxa__num {
  text-align: right;
  font-size: 1.25rem;
  line-height: 1.1;
}
.peca-taxa__num small {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--ink-3);
  white-space: nowrap;
}

/* ============================================================
   Peça da recuperação
   Duas metades: o balanço da campanha e a curva dos meses.
   ============================================================ */
.peca-recup {
  display: grid;
  gap: 1px;
  background: var(--line);
}
@media (min-width: 900px) {
  .peca-recup {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
}
.peca-recup__balanco,
.peca-recup__curva {
  background: var(--surface);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.peca-recup__balanco {
  gap: 1.25rem;
}
.peca-recup__curva {
  background: var(--surface-2);
}

/* Rótulo em cima, barra e valor na mesma linha, parcelas embaixo. As três
   barras dividem a mesma régua: é o que faz o que foi concedido aparecer como
   mordida na ponta do que voltou. */
.peca-recup__linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.35rem 0.875rem;
}
.peca-recup__rotulo {
  grid-column: 1 / -1;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.peca-recup__trilho {
  grid-column: 1;
  height: 1rem;
  border-radius: 999px;
  background: var(--surface-3);
}
.peca-recup__fita {
  display: flex;
  height: 100%;
  border-radius: 999px;
  overflow: hidden;
}
.peca-recup__parte {
  display: block;
  height: 100%;
}
.peca-recup__valor {
  grid-column: 2;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}
/* Os dois totais que fecham a conta ganham a cor da própria barra: o que foi
   concedido em âmbar, o que ficou em verde. */
.peca-recup__valor--concedido {
  color: var(--res-desconto);
}
.peca-recup__valor--liquido {
  color: var(--res-liquido);
}
.peca-recup__detalhe {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.875rem;
  font-size: 0.75rem;
  color: var(--ink-3);
}
.peca-recup__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.peca-recup__ponto {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  flex: none;
}

/* A cor de cada parcela, usada duas vezes: no pedaço da barra e no ponto que
   antecede o nome dela. */
.peca-recup__parte--voltou-a,
.peca-recup__ponto--voltou-a {
  background: var(--res-quitacao);
}
.peca-recup__parte--voltou-b,
.peca-recup__ponto--voltou-b {
  background: var(--res-refin);
}
.peca-recup__parte--concedido-a,
.peca-recup__ponto--concedido-a {
  background: var(--res-desconto);
}
.peca-recup__parte--concedido-b,
.peca-recup__ponto--concedido-b {
  background: var(--res-juros);
}
.peca-recup__parte--concedido-c,
.peca-recup__ponto--concedido-c {
  background: var(--res-multa);
}
.peca-recup__parte--liquido-a {
  background: var(--res-liquido);
}

/* A chave do gráfico: o que é barra e o que é linha. Sem ela, duas réguas no
   mesmo desenho viram adivinhação. */
.peca-recup__chave {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0.5rem 0 0.75rem;
  font-size: 0.75rem;
  color: var(--ink-3);
}
.peca-recup__chave span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.peca-recup__ponto-chave {
  flex: none;
}
.peca-recup__ponto-chave--valor {
  width: 0.75rem;
  height: 0.625rem;
  border-radius: 3px;
  background: var(--brand-200);
}
.peca-recup__ponto-chave--taxa {
  width: 0.875rem;
  height: 0.1875rem;
  border-radius: 999px;
  background: var(--danger);
}

.peca-res-grafico {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.peca-res-mes {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  fill: var(--ink-3);
}
.peca-res-fim {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.peca-res-fim--valor {
  fill: var(--brand-700);
}
.peca-res-fim--taxa {
  fill: var(--danger);
}

/* Na coluna estreita do celular o gráfico de oito meses fica com o mês
   ilegível. Ele ganha rolagem própria, como as cenas do território já fazem,
   e a página continua sem rolagem horizontal. */
@media (max-width: 640px) {
  .peca-recup__curva {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  .peca-res-grafico {
    min-width: 460px;
  }
}

/* ---------- /recursos ---------- */

/* =============================================================================
   REGULARIZEI · /recursos, estrutura de navegação
   Só o que não existe ainda. O cartão do índice, a etapa numerada e a coluna
   grudada de cada área continuam vindo de site.css.

   Três coisas aqui: o índice partido em duas, a virada no meio da lista, e o
   trilho que acompanha a leitura.
   ============================================================================= */

/* ============================================================
   Índice do alto, partido nas duas partes
   O rótulo usa `.etapa`, que já existe. Só a nota é nova.
   ============================================================ */
.indice-parte {
  margin-bottom: 0.75rem;
}
.indice-parte:not(:first-of-type) {
  margin-top: 0.5rem;
}
.indice-parte__nota {
  margin-top: -0.5rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: var(--ink-3);
}

/* ============================================================
   A virada, no meio dos treze blocos
   Entre a quinta e a sexta área a página muda de assunto, e hoje
   essa passagem é igual a todas as outras: mais uma linha cinza.
   ============================================================ */
.parte-virada {
  padding: 3.5rem 0 0.5rem;
}
/* Sem borda no primeiro: ele abre a lista, e ali já existe a separação da
   seção do índice. */
.parte-virada + section {
  border-top: 0;
}
.parte-virada__nota {
  font-size: 0.9375rem;
  color: var(--ink-3);
}

/* ============================================================
   O trilho de leitura
   Uma pastilha que fica à vista enquanto a lista dura, e some
   quando ela acaba. No computador ela para embaixo do topo; no
   celular flutua rente ao rodapé, que é onde o polegar alcança e
   onde não briga com o cabeçalho, que lá some ao descer.

   Nada de `position: fixed`: presa por `sticky` dentro da caixa
   das treze áreas, ela nasce e morre junto com a lista, sem
   nenhuma linha de script para isso.
   ============================================================ */
.trilho {
  position: sticky;
  /* Acima do botão de voltar ao topo, que mora a 1,5rem do rodapé e tem
     3rem de lado. */
  bottom: 4.75rem;
  z-index: 30;
  width: max-content;
  max-width: 100%;
  /* No celular a pastilha flutua sobre o texto, então não guarda lugar
     nenhum no fluxo. */
  margin: 0 auto -3rem;
}

@media (min-width: 1024px) {
  .trilho {
    top: calc(var(--header-h) - 0.75rem);
    bottom: auto;
    width: auto;
    margin: 0 0 0.75rem;
  }

  /* A âncora de uma área não pode parar embaixo da pastilha. O valor de
     site.css conta só o cabeçalho; aqui somam-se os 44px da pastilha e a
     folga. */
  .recursos-lista > section[id] {
    scroll-margin-top: calc(var(--header-h) + 3.75rem);
  }
}

.trilho__barra {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  height: 2.75rem;
  padding: 0 0.3rem 0 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgb(255 255 255 / 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-md);
}

.trilho__icone {
  flex: none;
  font-size: 1rem;
  line-height: 1;
  color: var(--brand-600);
}

/* O nome da área atual. Corta com reticências em vez de quebrar a pastilha:
   "Repasses e divisão do dinheiro" tem 30 caracteres e a tela do celular
   não tem. */
.trilho__nome {
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11rem;
}
@media (min-width: 1024px) {
  .trilho__nome {
    font-size: 0.875rem;
    max-width: 18rem;
  }
}

.trilho__conta {
  flex: none;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--ink-3);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* As treze marcas: onde a leitura está e quanto falta, sem contar nada.
   Só no computador: no celular a pastilha já vive apertada e o nome da área
   é o que importa lá. */
.trilho__marcas {
  display: none;
  list-style: none;
  margin: 0 0 0 0.25rem;
  padding: 0;
  align-items: center;
  gap: 3px;
}
@media (min-width: 1024px) {
  .trilho__marcas {
    display: flex;
  }
}

/* A separação entre as cinco etapas e as oito que atravessam o projeto. */
.trilho__marca--vira {
  margin-left: 0.5rem;
}

/* O traço visível tem 4px de altura, mas o alvo de clique tem 16px: o
   recheio dá a área e `background-clip: content-box` mantém a pintura só no
   traço. */
.trilho__marcas a {
  display: block;
  width: 12px;
  height: 16px;
  padding: 6px 0;
  border-radius: 999px;
  background: var(--line);
  background-clip: content-box;
  transition: background-color var(--dur) var(--ease), width var(--dur) var(--ease);
}
.trilho__marcas a:hover {
  background: var(--brand-400);
  background-clip: content-box;
}
/* Marcada pelo script quando a leitura chega naquela área. Sem script,
   nenhuma fica marcada, e a pastilha continua dizendo quantas áreas há. */
.trilho__marcas a[data-atual='sim'] {
  width: 22px;
  background: var(--brand-600);
  background-clip: content-box;
}

/* ------------------------------------------------------------
   O índice inteiro, a um toque
   `<details>` de propósito: abre, fecha, responde ao teclado e
   não depende de uma linha de script.
   ------------------------------------------------------------ */
.trilho__indice {
  position: relative;
  margin-left: auto;
}

.trilho__botao {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  height: 2.15rem;
  padding: 0 0.7rem;
  border-radius: 999px;
  background: var(--brand-600);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease);
}
.trilho__botao::-webkit-details-marker {
  display: none;
}
.trilho__botao:hover {
  background: var(--brand-700);
}
.trilho__seta {
  font-size: 0.6875rem;
  transition: transform var(--dur) var(--ease);
}
.trilho__indice[open] .trilho__seta {
  transform: rotate(180deg);
}

.trilho__painel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.6rem);
  z-index: 1;
  width: 22rem;
  max-width: calc(100vw - 1.5rem);
  max-height: min(60vh, 26rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.6rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
/* No celular a pastilha está embaixo, então o painel abre para cima. */
@media (max-width: 1023px) {
  .trilho__painel {
    top: auto;
    bottom: calc(100% + 0.6rem);
  }
}

.trilho__grupo {
  padding: 0.6rem 0.5rem 0.35rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.trilho__link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 44px;
  padding: 0.4rem 0.5rem;
  border-radius: 0.625rem;
  color: var(--ink-2);
  font-size: 0.875rem;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.trilho__link:hover {
  background: var(--surface-2);
  color: var(--brand-700);
}
.trilho__link i {
  flex: none;
  color: var(--brand-600);
}
.trilho__link-nome {
  min-width: 0;
  font-weight: 500;
}
.trilho__link-num {
  margin-left: auto;
  flex: none;
  font-size: 0.75rem;
  color: var(--ink-3);
}
/* A área em que a leitura está, marcada também dentro do painel: quem abre o
   índice no meio da página quer ver de onde está saindo. */
.trilho__link[aria-current='true'] {
  background: var(--brand-50);
  color: var(--brand-800);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .trilho__marcas a,
  .trilho__seta,
  .trilho__botao,
  .trilho__link {
    transition: none;
  }
}

/* Impressão: a pastilha é navegação, e navegação não se imprime. */
@media print {
  .trilho {
    display: none;
  }
}

/* ---------- /planos ---------- */

/* =============================================================================
   REGULARIZEI · /planos, as duas peças
   Só o que não existe ainda. A moldura (`.peca`, `.peca__palco`), a sequência
   de passos (`.peca-passo`, `.peca-passos`), o título de ficha
   (`.peca-ficha__titulo`) e os chips neutro e ok continuam vindo de pecas.css.
   ============================================================================= */

/* ============================================================
   Chip do passo do meio
   `.chip-acao`, de pecas.css, pinta o ícone com `--peca-acao`,
   que é branco, sobre um fundo #cffafe: o ícone some. Enquanto
   isso não for resolvido lá, o marco desta peça usa chip próprio.
   Ver a nota em planos.md.
   ============================================================ */
.chip-marco {
  background: var(--brand-50);
  color: var(--brand-700);
}

/* ============================================================
   Peça da adesão
   Esquerda: quando a cobrança nasce. Direita: o que o plano maior
   compra, que é prazo. As duas metades da mesma conta.
   ============================================================ */
.peca-adesao {
  display: grid;
  gap: 1px;
  background: var(--line);
}
@media (min-width: 900px) {
  .peca-adesao {
    grid-template-columns: 0.95fr 1.05fr;
  }
}

.peca-adesao__gatilho,
.peca-adesao__prazo {
  background: var(--surface);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.peca-adesao__prazo {
  background: var(--surface-2);
  gap: 0.5rem;
}

/* ------------------------------------------------------------
   As três barras
   Uma coluna de nome, o vão do eixo e o total. As três linhas e o
   eixo dividem o mesmo gabarito de colunas, senão as marcas de
   mês não caem em cima do fim das barras.
   ------------------------------------------------------------ */
.peca-adesao__linhas {
  --colunas: 5.75rem minmax(0, 1fr) 3.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.35rem;
}

.peca-adesao__linha,
.peca-adesao__eixo {
  display: grid;
  grid-template-columns: var(--colunas);
  gap: 0.5rem;
  align-items: center;
}

.peca-adesao__plano {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-2);
}

/* O vão é o eixo inteiro: os vinte meses do prazo mais longo. É contra ele
   que se lê o comprimento de cada barra. */
.peca-adesao__vao {
  position: relative;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}

/* A largura é o prazo, e só. Dez meses ocupa metade de vinte porque dez é
   metade de vinte: é a peça inteira em uma linha de CSS.
   As listras são as parcelas, uma divisória a cada 1/n da barra. */
.peca-adesao__fita {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--largura);
  display: flex;
  align-items: center;
  border-radius: 999px;
  background-color: var(--brand-600);
  background-image: repeating-linear-gradient(
    90deg,
    rgb(255 255 255 / 0.32) 0 1px,
    transparent 1px calc(100% / var(--parcelas))
  );
}

.peca-adesao__parcela {
  padding: 0 0.6rem;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.peca-adesao__total {
  text-align: right;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
}

.peca-adesao__eixo {
  margin-top: 0.15rem;
}
.peca-adesao__eixo-rotulo {
  text-align: right;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.peca-adesao__eixo-vao {
  position: relative;
  height: 0.9rem;
}
.peca-adesao__marca {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 0.625rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
/* A última cai no fim do vão: centrada, metade dela ficaria por cima da
   coluna do total. */
.peca-adesao__marca--fim {
  transform: translateX(-100%);
}

.peca-adesao__nota {
  margin-top: 0.9rem;
  font-size: 0.75rem;
  color: var(--ink-3);
}

/* No celular a barra ganha a linha inteira. Espremida em um terço da tela, a
   diferença entre dez e vinte meses vira dois centímetros contra quatro, e o
   rótulo da parcela não cabe. */
@media (max-width: 639px) {
  .peca-adesao__linha {
    grid-template-columns: 1fr auto;
    gap: 0.25rem 0.5rem;
  }
  .peca-adesao__vao {
    grid-column: 1 / -1;
    height: 1.6rem;
  }
  .peca-adesao__eixo {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .peca-adesao__eixo-rotulo {
    text-align: left;
  }
}

/* ============================================================
   Peça da conta
   Três parcelas somadas, e a terceira apagada porque só existe
   quando quem paga é o morador.
   ============================================================ */
.peca-conta {
  padding: 1.25rem;
  background: var(--surface);
}

.peca-conta__soma {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
@media (min-width: 768px) {
  .peca-conta__soma {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
  }
}

.peca-conta__parcela {
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: 0.875rem;
  background: var(--surface-2);
  transition: opacity 380ms var(--ease), background-color 380ms var(--ease);
}

/* A parcela que não existe em projeto público. É o estado final da peça: sem
   script, é assim que ela nasce, e a etiqueta explica. */
.peca-conta__parcela--fora {
  opacity: 0.55;
  background: transparent;
}

.peca-conta__mais {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink-3);
  transition: opacity 380ms var(--ease);
}

.peca-conta__etiqueta {
  display: inline-block;
  margin-bottom: 0.35rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--brand-200);
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: 0.625rem;
  font-weight: 700;
}
.peca-conta__rotulo {
  display: block;
  font-size: 0.75rem;
  color: var(--ink-3);
}
.peca-conta__valor {
  display: block;
  font-size: 1.125rem;
  color: var(--ink);
}
.peca-conta__nota {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--ink-3);
}

.peca-conta__rodape {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.peca-conta__rodape i {
  color: var(--brand-600);
}
.peca-conta__rodape b {
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .peca-conta__parcela,
  .peca-conta__mais {
    transition: none;
  }
}

/* ============================================================
   O corpo de uma tarefa
   Recorte da tela: a lista à esquerda, a conversa no meio, e à
   direita o que a tarefa carrega junto, que é o lote no mapa ou
   o documento em revisão.
   ============================================================ */
.tarefa {
  display: grid;
  gap: 1px;
  background: var(--line);
  font-size: 0.8125rem;
}
@media (min-width: 1024px) {
  .tarefa {
    grid-template-columns: 14rem minmax(0, 1fr) 15rem;
  }
}

/* ---------- a lista de tarefas ---------- */
.tarefa-lista {
  background: var(--surface);
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.tarefa-lista__busca {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  color: var(--ink-3);
  font-size: 0.75rem;
}
.tarefa-lista__item {
  padding: 0.6rem 0.7rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
}
.tarefa-lista__item--ativo {
  background: var(--brand-50);
  border-color: var(--brand-200);
}
.tarefa-lista__nome {
  margin-top: 0.35rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}
.tarefa-lista__det,
.tarefa-lista__pe {
  font-size: 0.75rem;
  color: var(--ink-3);
  margin-top: 0.15rem;
}
.tarefa-lista__pe {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.4rem;
}

/* ---------- os chips de controle ---------- */
.tarefa-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--line);
}
.tarefa-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}
.tarefa-chip--categoria {
  background: #fee2e2;
  border-color: #fecaca;
  color: #b91c1c;
}
.tarefa-chip--tecnico {
  background: #e0e7ff;
  border-color: #c7d2fe;
  color: #3730a3;
}
.tarefa-chip--social {
  background: #ffedd5;
  border-color: #fed7aa;
  color: #9a3412;
}
.tarefa-chip--azul {
  background: var(--brand-50);
  border-color: var(--brand-200);
  color: var(--brand-700);
}
.tarefa-chip--ok {
  background: #dcfce7;
  border-color: #bbf7d0;
  color: var(--peca-ok);
}
.tarefa-chip--acao {
  margin-left: auto;
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: #fff;
}

/* ---------- o centro, com a conversa ---------- */
.tarefa-centro {
  background: var(--surface);
  display: flex;
  flex-direction: column;
}
.tarefa-centro__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
}
.tarefa-centro__titulo {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
}
.tarefa-centro__acoes {
  display: flex;
  gap: 0.6rem;
  color: var(--ink-3);
}

.tarefa-canais {
  display: inline-flex;
  gap: 0.25rem;
  margin: 0.85rem 1rem 0;
  padding: 0.2rem;
  border-radius: 999px;
  background: var(--surface-3);
  align-self: flex-start;
}
.tarefa-canal {
  padding: 0.3rem 0.75rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-3);
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tarefa-canal[aria-selected='true'] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* O fundo da conversa é o da tela: uma superfície fria que separa o fio dos
   painéis brancos dos dois lados. */
.tarefa-falas {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem;
  min-height: 11rem;
  background: #eef2f6;
  margin: 0.85rem 0 0;
}
.tarefa-falas[hidden] {
  display: none;
}

.tarefa-balao {
  max-width: 84%;
  padding: 0.55rem 0.75rem;
  border-radius: 0.85rem;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  line-height: 1.45;
}
.tarefa-balao p {
  margin: 0.15rem 0 0;
  color: var(--ink-2);
}
.tarefa-balao__quem {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--ink);
}
.tarefa-balao__hora {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.625rem;
  color: var(--ink-3);
  text-align: right;
}
.tarefa-balao--outro {
  align-self: flex-start;
  border-bottom-left-radius: 0.25rem;
}
/* Roxo na conversa da equipe e verde no WhatsApp: a cor diz para quem a
   pessoa está escrevendo, antes de ela ler o rótulo da aba. */
.tarefa-balao--voce {
  align-self: flex-end;
  border-bottom-right-radius: 0.25rem;
  background: #ede9fe;
}
.tarefa-balao--voce .tarefa-balao__quem,
.tarefa-balao--voce p {
  color: #4c1d95;
}
.tarefa-balao--whats {
  align-self: flex-end;
  border-bottom-right-radius: 0.25rem;
  background: #dcf8c6;
}
.tarefa-balao--whats .tarefa-balao__quem,
.tarefa-balao--whats p {
  color: #14532d;
}
.tarefa-mencao {
  color: var(--brand-700);
  font-weight: 600;
}

.tarefa-campo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 0.75rem;
}
.tarefa-campo span {
  flex: 1;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.tarefa-campo i {
  font-size: 1rem;
  color: var(--brand-600);
}

/* ---------- a coluna do que a tarefa carrega ---------- */
.tarefa-mapa {
  background: var(--surface-2);
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.tarefa-mapa__desenho {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  border: 1px solid var(--line);
}
.tarefa-mapa__rua {
  font-family: inherit;
  font-size: 11px;
  fill: #fff;
  opacity: 0.9;
  paint-order: stroke;
  stroke: rgb(10 22 32 / 0.5);
  stroke-width: 3px;
}
.tarefa-mapa__quadra {
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  fill: #fff;
  paint-order: stroke;
  stroke: rgb(10 22 32 / 0.45);
  stroke-width: 4px;
}
.tarefa-mapa__pe {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--brand-700);
}

.tarefa-doc {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid var(--brand-200);
  background: var(--brand-50);
  color: var(--brand-800);
  font-size: 0.75rem;
  font-weight: 600;
}
.tarefa-versoes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.tarefa-versao {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.45rem;
  border-radius: 0.4rem;
  font-size: 0.6875rem;
  color: var(--ink-3);
}
.tarefa-versao__num {
  font-weight: 700;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.tarefa-versao__quem {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.tarefa-versao--nova {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: var(--peca-ok);
}
.tarefa-versao--nova .tarefa-versao__num {
  color: var(--peca-ok);
}

/* ============================================================
   Peça da conferência de documento por IA
   O aparelho à esquerda, a ficha à direita. A leitura começa na
   porta da casa e termina no sistema, e a peça é lida na mesma
   ordem em que a coisa acontece.

   Os documentos no visor são para reconhecer, não para ler: o que
   precisa ser legível é a ficha, que é onde está o resultado.
   ============================================================ */
.peca-docia {
  display: grid;
  gap: 1.5rem;
  padding: 1.75rem 1.5rem;
  background: var(--surface-2);
  align-items: center;
}
/* A coluna do aparelho tem medida declarada. Com `auto`, o `min(100%, ...)` da
   largura do celular resolvia contra uma coluna que ainda dependia dele, e o
   visor colapsava para um terço do tamanho. */
@media (min-width: 900px) {
  .peca-docia {
    grid-template-columns: 19.5rem minmax(0, 1fr);
    gap: 2.25rem;
    padding: 2rem;
  }
}

.docia-mao {
  display: flex;
  justify-content: center;
}

/* O aparelho é o da equipe em campo, e por isso é menor que o celular do
   morador da peça de assinatura: aqui ele é ferramenta, não é o assunto. */
.docia-celular {
  width: 100%;
  max-width: 19rem;
  padding: 0.55rem 0.55rem 0.35rem;
  border-radius: 1.6rem;
  background: #0f172a;
  box-shadow: var(--shadow-md);
}
.docia-celular__auto {
  display: block;
  width: 2.5rem;
  height: 0.2rem;
  margin: 0.1rem auto 0.45rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.22);
}
.docia-celular__pe {
  margin: 0.5rem 0 0.2rem;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 600;
  color: rgb(255 255 255 / 0.82);
}

/* O visor é escuro porque é câmera aberta, e não tela de aplicativo. */
.docia-visor {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 0.75rem;
  background: #1d2433;
}

.docia-papeis {
  position: absolute;
  inset: 0;
}

/* Os quatro cantos do enquadramento, desenhados com uma borda só e recortados
   por um degradê. Menos elementos que quatro cantos soltos, e some junto. */
.docia-guias {
  position: absolute;
  inset: 12%;
  border: 2px solid rgb(255 255 255 / 0.85);
  border-radius: 0.35rem;
  -webkit-mask-image: linear-gradient(to right, #000 0 18%, transparent 18% 82%, #000 82% 100%),
    linear-gradient(to bottom, #000 0 18%, transparent 18% 82%, #000 82% 100%);
  mask-image: linear-gradient(to right, #000 0 18%, transparent 18% 82%, #000 82% 100%),
    linear-gradient(to bottom, #000 0 18%, transparent 18% 82%, #000 82% 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  pointer-events: none;
}

/* A varredura nasce apagada: parada, ela seria um risco sem explicação no meio
   do documento. Só o script a acende, e só enquanto a leitura acontece. */
.docia-varredura {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2.5rem;
  opacity: 0;
  background: linear-gradient(to bottom, rgb(42 163 255 / 0) 0%, rgb(42 163 255 / 0.45) 65%, rgb(255 255 255 / 0.9) 100%);
  pointer-events: none;
}

/* ---------- os papéis ---------- */
.docia-doc {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 0.4rem 0.45rem;
  border-radius: 0.3rem;
  background: #f6f4ef;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.4);
  transform: translate(-50%, -50%);
}
.docia-doc__faixa {
  display: block;
  font-size: 0.4375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b5f4b;
}
.docia-doc__retrato {
  display: block;
  border-radius: 0.15rem;
  background: linear-gradient(160deg, #b9b1a4, #8b8377);
}
.docia-doc__nome {
  display: block;
  font-size: 0.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: #2f2a22;
}
.docia-doc__traco {
  display: block;
  height: 0.14rem;
  border-radius: 999px;
  background: #cdc5b6;
}
.docia-doc__traco--curto {
  width: 55%;
}

/* A identidade, deitada: o retrato à esquerda ocupa as três linhas de texto. */
.docia-doc--rg {
  width: 82%;
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  column-gap: 0.45rem;
  row-gap: 0.3rem;
  align-content: start;
  border-top: 0.22rem solid #4a6b7c;
}
.docia-doc--rg .docia-doc__faixa {
  grid-column: 1 / -1;
  margin-bottom: 0.15rem;
}
.docia-doc--rg .docia-doc__retrato {
  grid-row: 2 / span 3;
  height: 2.7rem;
}

/* O CPF é um cartão pequeno, e o número é a única coisa que se lê nele. */
.docia-doc--cpf {
  width: 66%;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem 0.55rem 0.6rem;
  border-top: 0.22rem solid #7c6a4a;
}
.docia-doc__numero {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: #2f2a22;
}

/* A certidão é folha em pé, e por isso transborda o visor. É assim que ela é
   fotografada: aproximada no trecho que interessa, não inteira sobre a mesa. */
.docia-doc--certidao {
  width: 60%;
  height: 106%;
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  padding: 0.85rem 0.55rem 0.6rem;
  text-align: center;
}
.docia-doc__regime {
  font-size: 0.4688rem;
  font-weight: 600;
  color: #4a4237;
}
.docia-doc__selo {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0 auto 0.15rem;
  border-radius: 50%;
  border: 1px solid #a9a08e;
  background: radial-gradient(circle at 50% 45%, #ded6c6 0 40%, #f6f4ef 42%);
}
.docia-doc--certidao .docia-doc__traco--curto {
  margin: 0 auto;
}

/* ---------- a ficha, onde o resultado fica ---------- */
.docia-ficha {
  padding: 1.25rem 1.25rem 1.1rem;
  border-radius: var(--radius-card);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.docia-ficha__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--surface-3);
}
.docia-ficha__origem {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--brand-700);
}

.docia-campos {
  margin: 0;
  display: grid;
  gap: 0.7rem;
  padding-top: 0.85rem;
}
@media (min-width: 560px) {
  .docia-campos {
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem 1.5rem;
  }
}
.docia-campo {
  min-width: 0;
}
.docia-campo__rotulo {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}
/* O selo fica debaixo do valor, e não ao lado dele. Ao lado, o campo do CPF e o
   do estado civil precisavam da linha inteira só por causa da pastilha, e a
   grade abria buraco em três das cinco linhas. */
.docia-campo__valor {
  margin: 0.1rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}

.docia-selo {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.12rem 0.45rem 0.12rem 0.3rem;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  white-space: nowrap;
}
.docia-selo--ok {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: var(--peca-ok);
}
.docia-selo--alerta {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #b45309;
}

/* O aviso fecha a ficha porque é o que a equipe faz depois de ler. */
.docia-aviso {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 1rem 0 0;
  padding: 0.7rem 0.85rem;
  border-radius: 0.6rem;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #7c2d12;
}
.docia-aviso i {
  margin-top: 0.15rem;
  color: #d97706;
}

/* ============================================================
   Peça do indicador que vira mapa
   O painel de um lado, o território do outro, e o ponteiro
   ligando os dois. Apontar um status apaga os demais lotes, e é
   aí que a taxa vira a região onde ela se concentra.

   O realce é CSS puro, comandado por um atributo no palco. Sem
   GSAP e sem cálculo: o script só troca o atributo, e quem
   navega por teclado recebe o mesmo efeito pelo foco.
   ============================================================ */
.peca-mapind {
  display: grid;
  gap: 1px;
  background: var(--line);
}
@media (min-width: 900px) {
  .peca-mapind {
    grid-template-columns: minmax(0, 1fr) 19rem;
  }
}

.mapind-mapa {
  position: relative;
  background: var(--peca-solo);
}
.mapind-desenho {
  display: block;
  width: 100%;
  height: auto;
  /* Em tela estreita o desenho fica mais alto e corta as bordas, em vez de
     encolher o núcleo inteiro: com 120 lotes espremidos em 330 pixels, o lote
     vira um risco e a mancha de cor deixa de ser legível. Quem corta é o
     `preserveAspectRatio` do SVG, que está no HTML da peça. */
  aspect-ratio: 5 / 4;
}
@media (min-width: 900px) {
  .mapind-desenho {
    aspect-ratio: 900 / 430;
  }
}

/* Um lote esmaecido continua no desenho: o que sai é a cor, não o lote. Assim a
   mancha do status apontado aparece contra o núcleo inteiro, e não contra um
   vazio. */
.mapind-lote {
  transition: opacity 260ms var(--ease);
}
.peca-mapind[data-realce] .mapind-lote {
  opacity: 0.14;
}
.peca-mapind[data-realce='n'] .mapind-lote[data-status='n'],
.peca-mapind[data-realce='a'] .mapind-lote[data-status='a'],
.peca-mapind[data-realce='p'] .mapind-lote[data-status='p'],
.peca-mapind[data-realce='c'] .mapind-lote[data-status='c'],
.peca-mapind[data-realce='i'] .mapind-lote[data-status='i'] {
  opacity: 1;
}

.mapind-quadra {
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  fill: #fff;
  paint-order: stroke;
  stroke: rgb(20 16 8 / 0.45);
  stroke-width: 4px;
  stroke-linejoin: round;
}

/* A dica é a legenda da interação, e fica. Some depois de lida, ela deixava no
   pé da coluna um buraco do tamanho dela. */
.mapind-pe {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: auto 0.4rem 0;
  padding-top: 0.9rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--ink-3);
}
.mapind-pe i {
  margin-top: 0.1rem;
  color: var(--brand-600);
}

.mapind-painel {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1.1rem 1rem 1.25rem;
  background: var(--surface);
}
.mapind-painel__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0.4rem 0.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--surface-3);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink);
}
.mapind-painel__total {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand-600);
}
.mapind-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mapind-item {
  display: block;
  width: 100%;
  padding: 0.45rem 0.4rem;
  border: 0;
  border-radius: 0.45rem;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 200ms var(--ease);
}
.mapind-item:hover,
.mapind-item:focus-visible,
.mapind-item[aria-pressed='true'] {
  background: var(--surface-3);
}
.mapind-item__topo {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.mapind-item__cor {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 0.2rem;
  flex: none;
}
.mapind-item__nome {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-2);
}
.mapind-item__num {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink);
}
.mapind-item__trilho {
  display: block;
  height: 0.3rem;
  margin-top: 0.35rem;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.mapind-item__fita {
  display: block;
  height: 100%;
  border-radius: 999px;
}

/* ============================================================
   Peça do simulador de viabilidade
   Vive dentro da faixa escura de /repasses, e por isso é um
   cartão claro: é a tela do sistema aparecendo sobre o fundo,
   do mesmo jeito que a demonstração da vetorização aparece.

   O que a peça mostra é a resposta: mexer na entrada muda o
   resultado. É isso que separa um simulador de um relatório.
   ============================================================ */
/* O nome é `peca-viab`, e não `peca-sim`: aquele já é da simulação de
   financiamento em /contratos, e tem `display: grid`. A colisão espremia a
   coluna do gráfico daqui para oito pixels. */
.peca-viab {
  margin: 0;
}

.sim {
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: 0 24px 50px rgb(2 8 20 / 0.45);
  overflow: hidden;
}

.sim__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--surface-3);
}
.sim__titulo {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink);
}
/* A marca existe para o leitor não confundir a simulação com um projeto em
   operação: aqui não há contrato, e é esse o ponto da ferramenta. */
.sim__marca {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: 0.625rem;
  font-weight: 700;
}

.sim__corpo {
  display: grid;
  gap: 1rem;
  padding: 1.1rem;
}
@media (min-width: 720px) {
  .sim__corpo {
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 1.5rem;
  }
}

.sim__entradas {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.sim-campo__rot {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ink-3);
}
.sim-campo__nota {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.75rem;
  color: var(--ink-2);
}

/* A entrada que se mexe. As outras estão ali para dizer que existem. */
.sim-campo--vivo {
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--surface-3);
}
.sim-campo__val {
  display: block;
  margin-top: 0.05rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--brand-700);
}
.sim-campo__trilho {
  position: relative;
  display: block;
  height: 0.3rem;
  margin-top: 0.5rem;
  border-radius: 999px;
  background: var(--surface-3);
}
.sim-campo__fita {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 78%;
  border-radius: 999px;
  background: var(--brand-500);
}
.sim-campo__cursor {
  position: absolute;
  top: 50%;
  left: 78%;
  width: 0.85rem;
  height: 0.85rem;
  margin: -0.425rem 0 0 -0.425rem;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--brand-600);
  box-shadow: 0 1px 4px rgb(15 23 42 / 0.25);
}

.sim__saida-rot {
  margin: 0 0 0.6rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ink-3);
}

.sim-barras {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  height: 8.5rem;
}
.sim-barra {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}
/* A pilha cresce de baixo para cima, e é a altura dela que a simulação muda. */
.sim-barra__pilha {
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
  border-radius: 0.25rem 0.25rem 0 0;
  overflow: hidden;
}
.sim-barra__parte {
  display: block;
  width: 100%;
}
.sim-barra__parte--parceiros {
  background: #94a3b8;
}
.sim-barra__parte--tributo {
  background: #cbd5e1;
}
.sim-barra__parte--fica {
  background: var(--brand-500);
}
.sim-barra__ano {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--ink-3);
  white-space: nowrap;
}

.sim-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.6875rem;
  color: var(--ink-2);
}
.sim-legenda li {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.sim-legenda__cor {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 0.15rem;
  flex: none;
}
.sim-legenda__cor--parceiros {
  background: #94a3b8;
}
.sim-legenda__cor--tributo {
  background: #cbd5e1;
}
.sim-legenda__cor--fica {
  background: var(--brand-500);
}

/* A legenda da peça é lida sobre o fundo escuro da faixa, e não sobre branco
   como as outras: por isso a cor é clara aqui. */
.sim__pe {
  margin-top: 0.8rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.6);
}