/*
 * Layout e componentes do app.
 *
 * Todo valor visual vem de `assets/tokens.css` — nada de cor, espaço, fonte,
 * raio, sombra ou duração escritos soltos aqui. As únicas exceções são
 * geometria de layout (largura de coluna, ponto de quebra) e espessura de
 * traço de 1px, que são medidas de estrutura, não decisões de design; estão
 * comentadas onde aparecem.
 *
 * A hierarquia vem de espaço e peso de fonte. Não empilhe caixa dentro de
 * caixa, não use sombra para separar o que espaçamento já separa, e mantenha
 * um único nível de profundidade.
 */

[hidden] {
  display: none !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte-interface);
  font-size: var(--t-corpo);
  line-height: var(--entrelinha-interface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: var(--raio-sm);
}

/* ---------------------------------------------------------------- *
 * Cabeçalho — fixo e translúcido, como o da Apple                   *
 * ---------------------------------------------------------------- */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: var(--camada-cabecalho);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-lg);
  flex-wrap: wrap;
  /* `env()` respeita o recorte da tela no iPhone; sem isto o cabeçalho fixo
   * fica por baixo da barra de status. */
  padding: max(var(--e-md), env(safe-area-inset-top)) max(var(--e-xl), env(safe-area-inset-right))
    var(--e-md) max(var(--e-xl), env(safe-area-inset-left));
  background: var(--vidro);
  backdrop-filter: var(--vidro-desfoque);
  -webkit-backdrop-filter: var(--vidro-desfoque);
  border-bottom: 1px solid var(--linha); /* hairline */
}

/*
 * A marca é o botão de início. Vira botão, e não link para "/", porque
 * recarregar a página apagaria as decisões e as notas do revisor.
 */
.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e-sm);
  min-height: var(--alvo-toque); /* alvo de toque, maior que o ícone */
  margin-left: calc(var(--e-sm) * -1); /* alinha o ícone à margem, não o padding */
  padding: var(--e-sm);
  border: none;
  border-radius: var(--raio-md);
  background: none;
  color: var(--tinta);
  cursor: pointer;
  transition: background var(--rapido) var(--suave);
}

.marca:hover {
  background: var(--fundo-realce);
}

.marca__icone {
  flex: none;
}

.marca__nome {
  font-family: var(--fonte-interface);
  font-size: var(--t-titulo);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-titulo);
}

.cabecalho__acoes {
  display: flex;
  align-items: center;
  gap: var(--e-sm);
  /* Depois de comparar são cinco controles: em 390px eles somam mais que a
   * tela. Sem quebrar linha, a própria página alargava para caber a faixa e
   * "Exportar…" — o botão que entrega o trabalho — ficava fora da área
   * visível, só alcançável rolando de lado. */
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}

/* ---------------------------------------------------------------- *
 * Botões — cápsula, sem sombra, sem borda quando são de ação        *
 * ---------------------------------------------------------------- */

.botao {
  padding: var(--e-sm) var(--e-lg);
  border: none;
  border-radius: var(--raio-pilula);
  background: transparent;
  color: var(--tinta);
  font-family: inherit;
  font-size: var(--t-apoio);
  font-weight: var(--peso-medio);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--rapido) var(--suave), color var(--rapido) var(--suave),
    opacity var(--rapido) var(--suave), transform var(--rapido) var(--suave);
}

.botao:active:not(:disabled) {
  transform: scale(0.97);
}

.botao:disabled {
  opacity: 0.35;
  cursor: default;
}

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

.botao--primario:hover:not(:disabled) {
  background: var(--acento-superficie-forte);
}

.botao--secundario {
  background: var(--fundo-realce);
  color: var(--tinta);
}

.botao--secundario:hover:not(:disabled) {
  background: var(--linha);
}

.botao--discreto {
  color: var(--acento);
}

.botao--discreto:hover:not(:disabled) {
  background: var(--fundo-realce);
}

.link {
  border: none;
  background: none;
  padding: 0;
  color: var(--acento);
  font-family: inherit;
  font-size: var(--t-apoio);
  cursor: pointer;
}

.link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------------------------------------------------------------- *
 * Exportação — a escolha do formato mora aqui, não escondida na aba *
 * ---------------------------------------------------------------- */

.exportacao {
  position: relative;
}

.exportacao__painel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--e-sm));
  z-index: var(--camada-flutuante);
  width: min(var(--painel-exportacao), calc(100vw - 2 * var(--painel-recuo)));
  /* Com seis saídas o painel passa da altura da janela em telas baixas. */
  max-height: var(--painel-altura-maxima);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--e-md);
  padding: var(--e-lg);
  border-radius: var(--raio-lg);
  background: var(--papel);
  box-shadow: var(--sombra);
  animation: surgir var(--entrada) var(--suave);
}

@keyframes surgir {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* ---------------------------------------------------------------- *
 * Formato do PDF: um card por formato                               *
 *                                                                   *
 * A tira de quatro rádios miúdos somava 482px num painel de 320 e    *
 * obrigava a escolher entre nomes crípticos ("Páginas opostas") e um *
 * parágrafo de dois mil caracteres entre a pessoa e o botão. O card  *
 * carrega o nome e UMA linha dizendo para que ele serve; a prosa vai *
 * para o revelador logo abaixo, para quem precisar dela.             *
 * ---------------------------------------------------------------- */

.formatos {
  display: flex;
  flex-direction: column;
  gap: var(--e-xs);
}

.formato {
  display: flex;
  flex-direction: column;
  gap: var(--vao-linha-dupla);
  width: 100%;
  padding: var(--e-sm) var(--e-md);
  border: none;
  border-radius: var(--raio-md);
  background: var(--fundo-realce);
  color: var(--tinta);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--rapido) var(--suave), color var(--rapido) var(--suave),
    transform var(--rapido) var(--suave);
}

.formato:hover:not(.formato--ativo) {
  background: var(--linha);
}

/* Resposta no apertar, não só no soltar — o mesmo gesto que `.botao` já tem. */
.formato:active {
  transform: scale(0.99);
}

.formato--ativo {
  background: var(--acento-superficie);
  color: var(--acento-tinta);
}

.formato__nome {
  font-size: var(--t-apoio);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-titulo);
}

.formato__linha {
  font-size: var(--t-etiqueta);
  line-height: var(--entrelinha-interface);
  color: var(--tinta-suave);
}

/* No card escolhido a segunda linha continua legível sobre o azul. */
.formato--ativo .formato__linha {
  color: var(--acento-tinta);
  opacity: 0.82;
}

/* ---------------------------------------------------------------- *
 * Reveladores — <details> nativo                                    *
 *                                                                   *
 * Nativo de propósito: o teclado, o leitor de tela e o Ctrl+F do     *
 * navegador já sabem lidar com ele, e nada aqui precisa espelhar     *
 * `aria-expanded` na mão.                                            *
 * ---------------------------------------------------------------- */

.revelar {
  border-top: 1px solid var(--linha); /* hairline */
  padding-top: var(--e-sm);
}

.revelar__titulo {
  display: flex;
  align-items: center;
  gap: var(--e-sm);
  /* O summary é um gatilho como qualquer outro, e se toca com o dedo. */
  min-height: var(--alvo-toque);
  font-size: var(--t-apoio);
  font-weight: var(--peso-medio);
  color: var(--tinta-suave);
  cursor: pointer;
  list-style: none;
}

.revelar__titulo::-webkit-details-marker {
  display: none;
}

/* Seta própria: a nativa varia entre navegadores e não acompanha a tipografia. */
.revelar__titulo::before {
  content: '';
  width: var(--seta-revelador);
  height: var(--seta-revelador);
  border-right: var(--traco-icone) solid currentColor;
  border-bottom: var(--traco-icone) solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--rapido) var(--suave);
}

.revelar[open] > .revelar__titulo::before {
  transform: rotate(45deg);
}

.revelar__titulo:hover {
  color: var(--tinta);
}

.revelar__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-md);
}

/*
 * O conteúdo cresce A PARTIR do summary que o abriu, e recolhe pelo mesmo
 * caminho: a origem da transformação fica ancorada no alto, que é onde está o
 * gatilho.
 */
/*
 * Os TRÊS reveladores animam pela mesma classe.
 *
 * A regra antiga mirava `.revelar__corpo` e `.exportacao__dica` — e o de
 * "Outros formatos" tinha por filho uma `.exportacao__lista`, então ele era o
 * único que abria com corte seco, sem que nada dissesse por quê. Três irmãos
 * com o mesmo papel se comportam igual; o invólucro comum é o que garante isso,
 * inclusive no ramo de movimento reduzido.
 */
.revelar[open] > .revelar__corpo {
  transform-origin: top center;
  animation: revelar var(--entrada) var(--suave);
}

@keyframes revelar {
  from {
    opacity: 0;
    transform: scaleY(0.96);
  }
}

/* ---------------------------------------------------------------- *
 * As outras saídas: a explicação é a segunda linha do próprio botão *
 * ---------------------------------------------------------------- */

.saida {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--vao-linha-dupla);
  width: 100%;
  padding: var(--e-sm) var(--e-md);
  border-radius: var(--raio-md);
  text-align: left;
  white-space: normal;
}

.saida__nome {
  font-size: var(--t-apoio);
  font-weight: var(--peso-medio);
}

.saida__linha {
  font-size: var(--t-etiqueta);
  line-height: var(--entrelinha-interface);
  color: var(--tinta-suave);
}

.exportacao__explicacao {
  font-size: var(--t-apoio);
  color: var(--tinta-suave);
}

/* Uma linha só, logo abaixo do seletor: diz o que o formato escolhido faz sem
   obrigar a abrir a ajuda. */
.exportacao__dica {
  margin-top: calc(-1 * var(--e-xs));
  font-size: var(--t-apoio);
  line-height: 1.45;
  color: var(--tinta-suave);
}

.exportacao__opcoes {
  display: flex;
  flex-direction: column;
  gap: var(--e-sm);
  padding-top: var(--e-md);
  border-top: 1px solid var(--linha); /* hairline */
}

.exportacao__acoes {
  display: flex;
  gap: var(--e-sm);
}

.exportacao__acoes .botao {
  flex: 1;
}

/*
 * Campo de senha: o rótulo em cima, o campo abaixo ocupando a linha inteira.
 *
 * A classe dupla não é enfeite. `.opcao` declara `align-items: center` e mora
 * MAIS ABAIXO neste mesmo arquivo, com a mesma especificidade — o `center`
 * vencia o `stretch` daqui e o `<input>` colapsava para 26×18px, ou seja, uma
 * senha de PDF que não dava para digitar nem para ler. Com `.opcao.opcao--senha`
 * a regra do caso particular ganha da regra geral onde quer que ela esteja.
 */
.opcao.opcao--senha {
  display: flex;
  flex-direction: column;
  gap: var(--e-xs);
  align-items: stretch;
}

.opcao__apoio {
  color: var(--tinta-fraca);
}

.campo {
  padding: var(--e-sm) var(--e-md);
  border: 1px solid var(--linha-forte); /* hairline */
  border-radius: var(--raio-md);
  background: var(--papel);
  color: var(--tinta);
  font-family: inherit;
  font-size: var(--t-apoio);
}

.campo:focus-visible {
  border-color: var(--acento);
}

/* As saídas que não são PDF: empilhadas, cada uma com sua explicação curta. */
.exportacao__grupo {
  display: flex;
  flex-direction: column;
  gap: var(--e-sm);
  padding-top: var(--e-md);
  border-top: 1px solid var(--linha); /* hairline */
}

/*
 * As opções que só existem quando fazem diferença.
 *
 * Vivem no corpo do painel, acima do botão, e não dentro do revelador
 * "Opções": elas mudam o CONTEÚDO do arquivo, e um revelador fechado as
 * esconderia justamente de quem acabou de filtrar a lista. O bloco desaparece
 * inteiro quando nenhuma delas se aplica — que é o caso comum.
 */
.exportacao__condicionais {
  display: flex;
  flex-direction: column;
  gap: var(--e-xs);
  padding: 0 var(--e-md) var(--e-sm);
}

.exportacao__condicionais:not(:has(> .opcao:not([hidden]))) {
  display: none;
}

.exportacao__condicionais .opcao {
  min-height: var(--alvo-toque);
}

.exportacao__lista {
  display: flex;
  flex-direction: column;
  gap: var(--e-xs);
}

.exportacao__lista .botao {
  width: 100%;
  text-align: left;
  white-space: normal;
}

.exportacao__lista .exportacao__dica {
  margin: 0 0 var(--e-sm) 0;
  padding-inline: var(--e-md);
}

/*
 * A caixa que acompanha uma saída, e não o painel inteiro.
 *
 * Ela pertence ao botão de cima — é uma condição daquela exportação, não uma
 * preferência geral —, e por isso vive recuada sob ele, e não na lista das
 * opções do PDT. O recuo é o mesmo do texto do botão, para que as duas linhas
 * se leiam como uma coisa só; a altura mínima é a de alvo de toque, porque no
 * celular ela é o que se erra.
 */
.opcao--saida {
  min-height: var(--alvo-toque);
  padding-inline: var(--e-md);
  margin-block: calc(-1 * var(--e-xs)) var(--e-xs);
  align-items: center;
}

/* ---------------------------------------------------------------- *
 * Ajuda — toda a explicação do app cabe atrás de um "?"             *
 * ---------------------------------------------------------------- */

.ajuda {
  position: relative;
}

.ajuda__painel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--e-sm));
  z-index: var(--camada-flutuante);
  width: min(var(--painel-ajuda), calc(100vw - 2 * var(--painel-recuo)));
  max-height: 70dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--e-lg);
  padding: var(--e-lg);
  border-radius: var(--raio-lg);
  background: var(--papel);
  box-shadow: var(--sombra);
  animation: surgir var(--entrada) var(--suave);
}

.ajuda__bloco {
  display: flex;
  flex-direction: column;
  gap: var(--e-sm);
  font-size: var(--t-apoio);
  color: var(--tinta-suave);
  text-wrap: pretty;
}

.ajuda__bloco strong {
  color: var(--tinta);
  font-weight: var(--peso-medio);
}

.ajuda__marcacoes {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-sm) var(--e-md);
  align-items: baseline;
}

.ajuda__marcacoes dt {
  font-family: var(--fonte-documento);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- *
 * Exemplos — os seis casos prontos, um clique de distância          *
 * ---------------------------------------------------------------- */

.exemplos {
  position: relative;
}

.exemplos__painel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--e-sm));
  z-index: var(--camada-flutuante);
  width: min(var(--painel-exemplos), calc(100vw - 2 * var(--painel-recuo)));
  max-height: 70dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--e-md);
  padding: var(--e-lg);
  border-radius: var(--raio-lg);
  background: var(--papel);
  box-shadow: var(--sombra);
  animation: surgir var(--entrada) var(--suave);
}

.exemplos__lista {
  display: flex;
  flex-direction: column;
  gap: var(--e-xs);
  list-style: none;
}

.exemplos__item {
  display: flex;
  flex-direction: column;
  gap: var(--e-xs);
  width: 100%;
  padding: var(--e-sm) var(--e-md);
  border: none;
  border-radius: var(--raio-md);
  background: transparent;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--rapido) var(--suave);
}

.exemplos__item:hover,
.exemplos__item:focus-visible {
  background: var(--fundo-realce);
}

.exemplos__titulo {
  font-size: var(--t-apoio);
  font-weight: var(--peso-medio);
  color: var(--tinta);
}

.exemplos__porque {
  font-size: var(--t-etiqueta);
  color: var(--tinta-suave);
  text-wrap: pretty;
}

/* ---------------------------------------------------------------- *
 * Faixa de aviso                                                    *
 * ---------------------------------------------------------------- */

/*
 * O aviso FLUTUA sobre a comparação, em vez de empurrá-la.
 *
 * No fluxo, aparecer custava 55px de deslocamento em tudo o que estava abaixo:
 * a linha que se estava lendo pulava no exato momento em que o app queria a
 * atenção da pessoa. Sobreposto — e grudado logo abaixo do cabeçalho, como a
 * barra do par — ele aparece e some sem mexer no texto.
 */
.faixa-aviso {
  position: sticky;
  top: calc(var(--altura-cabecalho) + var(--e-sm));
  z-index: var(--camada-aviso);
  /* Altura zero no fluxo: o que empurrava era a caixa, não o texto. */
  height: 0;
  margin: 0 var(--e-xl);
  overflow: visible;
}

.faixa-aviso__corpo {
  display: block;
  padding: var(--e-md) var(--e-lg);
  border-radius: var(--raio-md);
  background: var(--supressao-fundo);
  color: var(--supressao-tinta);
  font-size: var(--t-apoio);
  box-shadow: var(--sombra);
  animation: surgir var(--entrada) var(--suave);
}

.faixa-aviso--info {
  background: var(--fundo-realce);
  color: var(--tinta-suave);
}

/* ---------------------------------------------------------------- *
 * Conteúdo                                                          *
 * ---------------------------------------------------------------- */

.conteudo {
  padding: var(--e-xl);
  display: flex;
  flex-direction: column;
  gap: var(--e-xl);
}

/* ---------------------------------------------------------------- *
 * Entrada: os dois documentos                                       *
 * ---------------------------------------------------------------- */

.entrada {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--e-xl);
  max-width: 1040px; /* medida de leitura da abertura */
  min-height: calc(100dvh - 200px); /* desconta cabeçalho e respiro */
  margin: 0 auto;
}

.entrada__abertura {
  max-width: 62ch;
}

.entrada__titulo {
  text-wrap: balance;
  font-size: var(--t-destaque);
  font-weight: var(--peso-forte);
  line-height: var(--entrelinha-destaque);
  letter-spacing: var(--letra-destaque);
}

.entrada__texto {
  text-wrap: pretty;
  margin-top: var(--e-md);
  font-size: var(--t-corpo);
  color: var(--tinta-suave);
}

.entrada__cartoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-lg);
}

.cartao-documento {
  display: flex;
  flex-direction: column;
  gap: var(--e-md);
  padding: var(--e-lg);
  border-radius: var(--raio-lg);
  background: var(--papel);
}

.cartao-documento__titulo {
  font-size: var(--t-apoio);
  font-weight: var(--peso-forte);
  color: var(--tinta-suave);
}

.cartao-documento__zona {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-xs);
  min-height: 168px; /* alvo de arrastar */
  padding: var(--e-lg);
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio-md);
  background: var(--fundo);
  cursor: pointer;
  text-align: center;
  transition: background var(--rapido) var(--suave), border-color var(--rapido) var(--suave),
    transform var(--rapido) var(--suave);
}

.cartao-documento__zona:hover,
.cartao-documento__zona--arrastando {
  border-color: var(--acento);
  background: var(--adicao-fundo);
}

.cartao-documento__zona--arrastando {
  transform: scale(1.01);
}

.cartao-documento__instrucao {
  font-size: var(--t-corpo);
  color: var(--tinta);
}

.cartao-documento__formatos {
  font-size: var(--t-apoio);
  color: var(--tinta-fraca);
}

.cartao-documento__textarea {
  width: 100%;
  min-height: 168px;
  padding: var(--e-md);
  border: 1px solid var(--linha);
  border-radius: var(--raio-md);
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte-documento);
  font-size: var(--t-apoio);
  line-height: var(--entrelinha-documento);
  resize: vertical;
}

.cartao-documento__info {
  display: flex;
  align-items: baseline;
  gap: var(--e-sm);
}

.cartao-documento__nome {
  font-weight: var(--peso-medio);
  overflow-wrap: anywhere;
}

.cartao-documento__paragrafos {
  font-size: var(--t-apoio);
  color: var(--tinta-fraca);
  white-space: nowrap;
}

.cartao-documento__rodape {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
}

/* ---------------------------------------------------------------- *
 * A demonstração de um clique                                       *
 *                                                                   *
 * Fica colada na abertura, e não perdida entre os modos: é a única   *
 * coisa da tela que mostra o produto FUNCIONANDO antes de pedir      *
 * arquivo nenhum. Um botão primário e uma linha dizendo o que vai    *
 * aparecer — nada mais, porque a promessa é a de um clique.          *
 * ---------------------------------------------------------------- */

.entrada__demo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-md);
  margin-top: var(--e-lg);
}

.entrada__demo-apoio {
  text-wrap: pretty;
  flex: 1 1 24ch;
  font-size: var(--t-apoio);
  color: var(--tinta-fraca);
}

/* ---------------------------------------------------------------- *
 * Comparações recentes                                              *
 *                                                                   *
 * Uma lista, e ao lado de cada linha o que a apaga. O que está       *
 * guardado se lê por extenso — os dois nomes, quando foi, quantos    *
 * pontos —, porque um histórico que esconde o que guardou é          *
 * exatamente o que este app promete não ser.                        *
 * ---------------------------------------------------------------- */

.historico {
  display: flex;
  flex-direction: column;
  gap: var(--e-md);
}

.historico__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-md);
}

.historico__titulo {
  font-size: var(--t-apoio);
  font-weight: var(--peso-forte);
  color: var(--tinta-suave);
}

.historico__lista {
  display: flex;
  flex-direction: column;
  gap: var(--e-xs);
  list-style: none;
}

.historico__item {
  display: flex;
  align-items: stretch;
  gap: var(--e-xs);
  border-radius: var(--raio-md);
  background: var(--papel);
}

.historico__abrir {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--vao-linha-dupla);
  justify-content: center;
  min-width: 0;
  min-height: var(--alvo-toque);
  padding: var(--e-sm) var(--e-md);
  border: none;
  border-radius: var(--raio-md);
  background: transparent;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--rapido) var(--suave);
}

.historico__abrir:hover,
.historico__abrir:focus-visible {
  background: var(--fundo-realce);
}

.historico__par {
  display: flex;
  align-items: baseline; /* a seta na linha do nome, e não no meio de duas */
  gap: var(--e-xs);
  min-width: 0;
  font-size: var(--t-apoio);
  font-weight: var(--peso-medio);
  color: var(--tinta);
}

/* Os dois nomes QUEBRAM, como o nome no cartão do documento — e não cortam com
   reticências.

   A tentação era cortar: `white-space: nowrap` com `text-overflow: ellipsis`.
   Medido em 390px, isso levava a página inteira junto. Um nome que não quebra
   tem largura mínima igual ao próprio texto, e essa largura sobe pela árvore
   até a `.entrada`, que tem `margin: 0 auto` e por isso se dimensiona pelo
   conteúdo: dois nomes de contrato davam 483px de página numa tela de 390, com
   o app inteiro rolando de lado. Quebrando, a largura mínima vira uma letra, e
   o nome inteiro continua legível — que é melhor do que meio nome com
   reticências. O `title` do botão carrega os dois nomes de qualquer forma. */
.historico__par bdi {
  min-width: 0;
  overflow-wrap: anywhere;
}

.historico__seta {
  flex: none;
  color: var(--tinta-fraca);
}

.historico__meta {
  font-size: var(--t-etiqueta);
  color: var(--tinta-suave);
}

.historico__apagar {
  flex: none;
  width: var(--alvo-toque);
  min-height: var(--alvo-toque);
  border: none;
  border-radius: var(--raio-md);
  background: transparent;
  color: var(--tinta-fraca);
  font-family: inherit;
  font-size: var(--t-titulo);
  line-height: 1;
  cursor: pointer;
  transition: background var(--rapido) var(--suave), color var(--rapido) var(--suave);
}

.historico__apagar:hover,
.historico__apagar:focus-visible {
  background: var(--supressao-fundo);
  color: var(--supressao-tinta);
}

.historico__rodape {
  display: flex;
  flex-direction: column;
  gap: var(--e-xs);
}

/* Os dois controles da seção — "Limpar tudo" e o interruptor — são alvos de
   dedo como qualquer outro. Apagar histórico por toque errado é o tipo de
   engano que não tem desfazer. */
.historico__topo .link,
.historico__rodape .opcao {
  display: flex;
  align-items: center;
  min-height: var(--alvo-toque);
}

.historico__vazio,
.historico__nota,
.historico__desligado {
  text-wrap: pretty;
  font-size: var(--t-etiqueta);
  line-height: var(--entrelinha-interface);
  color: var(--tinta-fraca);
}

/* ---------------------------------------------------------------- *
 * Barra compacta: os dois documentos numa linha                     *
 * ---------------------------------------------------------------- */

/* ---------------------------------------------------------------- *
 * A barra do par — chips do original e do revisado                  *
 *                                                                   *
 * Gruda logo abaixo do cabeçalho e continua à mão depois de rolar    *
 * quarenta páginas: é ela que responde "quais dois arquivos são      *
 * estes?" e é por ela que se troca um lado sem desmontar a revisão.  *
 *                                                                   *
 * Mesmo material do cabeçalho — vidro translúcido, com o conteúdo    *
 * passando por baixo. Ela nunca fica EMPILHADA sobre o cabeçalho:    *
 * senta logo abaixo dele, e por isso não há duas camadas de vidro    *
 * uma sobre a outra.                                                 *
 * ---------------------------------------------------------------- */

.barra-par {
  position: sticky;
  /* Âncora do menu "⋯" em tela estreita. */

  /* Logo abaixo do cabeçalho grudado, e não por cima dele. */
  top: var(--altura-cabecalho);
  z-index: var(--camada-barra-par);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-lg);
  flex-wrap: wrap;
  padding: var(--e-sm) 0;
}

/*
 * O VIDRO da barra mora aqui, e não na `.barra-par` — e a razão é geometria,
 * não estilo.
 *
 * `backdrop-filter` faz do elemento BLOCO DE CONTENÇÃO de todo descendente
 * `position: fixed`. Com o filtro na própria barra, o painel "ajustes da
 * comparação" — que é `fixed` no celular justamente para se medir pela janela —
 * passava a se medir pela BARRA, de 60px de altura. Medido a 390×844 antes
 * desta rodada: `bottom: 20px` colava o painel a 160px do topo da janela, e os
 * 608px dele começavam em **y = -448** — 448px acima da borda de cima da tela,
 * inalcançáveis, com "Nova etiqueta" e "Criar" espremidos por baixo do
 * cabeçalho.
 *
 * Num pseudo-elemento o desfoque continua idêntico (mesma caixa, `inset: 0`),
 * mas quem o carrega é o `::before` — e pseudo-elemento não é ancestral de
 * ninguém. A barra volta a ser uma caixa comum, e `fixed` volta a querer dizer
 * "a janela".
 *
 * `z-index: -1` o põe atrás do conteúdo da barra e à frente da página que rola:
 * a `.barra-par` já abre contexto de empilhamento com o `--camada-barra-par`,
 * então o negativo não escapa dela.
 */
.barra-par::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--vidro);
  backdrop-filter: var(--vidro-desfoque);
  -webkit-backdrop-filter: var(--vidro-desfoque);
}

/*
 * Borda de rolagem, e não borda dura: a linha só aparece quando há conteúdo
 * passando por baixo, como o cabeçalho faz. O gradiente evita o corte seco de
 * uma segunda régua horizontal logo abaixo da do cabeçalho.
 */
.barra-par::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--fio-rolagem);
  background: linear-gradient(to bottom, var(--linha), transparent);
  pointer-events: none;
}

.barra-par__chips {
  display: flex;
  align-items: center;
  gap: var(--e-sm);
  min-width: 0;
  flex: 1 1 auto;
}

.barra-par__seta {
  color: var(--tinta-fraca);
  flex: 0 0 auto;
}

.barra-par__acoes {
  display: flex;
  align-items: center;
  gap: var(--e-lg);
  flex-wrap: wrap;
}

/* Em tela larga as ações cabem soltas: o "⋯" nem existe. */
.barra-par__mais {
  display: none;
  flex: 0 0 auto;
  place-items: center;
  width: var(--alvo-toque);
  height: var(--alvo-toque);
  border: none;
  border-radius: var(--raio-pilula);
  background: transparent;
  color: var(--tinta-suave);
  font-family: inherit;
  font-size: var(--t-titulo);
  line-height: 1;
  cursor: pointer;
}

.barra-par__mais:hover {
  background: var(--linha);
}

.chip {
  display: flex;
  align-items: center;
  gap: var(--e-sm);
  /* A barra inteira tem de responder ao dedo. */
  min-height: var(--alvo-toque);
  min-width: 0;
  flex: 1 1 0;
  padding: 0 var(--e-xs) 0 var(--e-md);
  border-radius: var(--raio-pilula);
  background: var(--fundo-realce);
  transition: background var(--rapido) var(--suave), box-shadow var(--rapido) var(--suave);
}

/* Soltar um arquivo em cima do chip troca aquele lado. */
.chip--recebendo {
  background: var(--adicao-fundo);
  box-shadow: inset 0 0 0 1px var(--adicao-borda); /* hairline */
}

.chip__papel {
  flex: 0 0 auto;
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-etiqueta);
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.chip__nome {
  min-width: 0;
  flex: 1 1 auto;
  font-size: var(--t-apoio);
  font-weight: var(--peso-medio);
  letter-spacing: var(--letra-etiqueta);
}

.chip__trocar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--alvo-toque);
  height: var(--alvo-toque);
  border: none;
  border-radius: var(--raio-pilula);
  background: transparent;
  color: var(--acento);
  font-family: inherit;
  font-size: var(--t-corpo);
  cursor: pointer;
  transition: background var(--rapido) var(--suave), transform var(--rapido) var(--suave);
}

.chip__trocar:hover {
  background: var(--linha);
}

/* Resposta no apertar, não só no soltar. */
.chip__trocar:active {
  transform: scale(0.92);
}

.documentos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-lg);
  flex-wrap: wrap;
}

.documentos__par {
  display: flex;
  align-items: center;
  gap: var(--e-md);
  min-width: 0;
  font-size: var(--t-corpo);
  font-weight: var(--peso-medio);
  letter-spacing: var(--letra-titulo);
}

.documentos__nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.documentos__seta {
  color: var(--tinta-fraca);
  font-weight: var(--peso-normal);
}

.documentos__acoes {
  display: flex;
  align-items: center;
  gap: var(--e-lg);
}

.ajustes {
  position: relative;
}

.ajustes__painel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--e-sm));
  z-index: var(--camada-flutuante);
  width: min(var(--painel-ajustes), calc(100vw - 2 * var(--painel-recuo)));
  display: flex;
  flex-direction: column;
  gap: var(--e-md);
  padding: var(--e-lg);
  border-radius: var(--raio-lg);
  background: var(--papel);
  box-shadow: var(--sombra);
  animation: surgir var(--entrada) var(--suave);
  /* O teto vale em QUALQUER largura, e não só no celular: este é o painel mais
     alto do app — opções, perfis, etiquetas e a ação de um clique — e numa
     janela de desktop baixa (um notebook com o navegador em meia tela) ele
     passava do rodapé do mesmo jeito. Aqui ele pende da barra do par, então o
     que sobra é a janela menos o cabeçalho e menos a barra. Quando não cabe,
     quem rola é o painel; a página nunca. */
  max-height: var(--painel-altura-maxima-sob-a-barra);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ---------------------------------------------------------------- *
 * Opções                                                            *
 * ---------------------------------------------------------------- */

.barra-opcoes {
  display: flex;
  flex-direction: column;
  gap: var(--e-sm);
}

.opcao {
  display: flex;
  align-items: center;
  gap: var(--e-sm);
  font-size: var(--t-apoio);
  color: var(--tinta-suave);
  cursor: pointer;
}

/*
 * A caixa de marcar — e SÓ ela.
 *
 * Sem o `[type='checkbox']` este 15×15 caía também sobre o campo de senha, que
 * mora numa `.opcao` (é uma opção da exportação como as outras): o `<input
 * type="password">` saía com 26px de largura, ou seja, uma senha de PDF que não
 * dá para digitar nem para conferir. Regra de caixa de marcar tem de dizer que
 * é de caixa de marcar.
 */
.opcao input[type='checkbox'] {
  accent-color: var(--acento);
  width: 15px; /* alvo de clique */
  height: 15px;
  cursor: pointer;
}

/*
 * A caixa que o formato escolhido não usa.
 *
 * Apagada, e não escondida: sumir faria a opção parecer inexistente para todos
 * os formatos, e quem a procurasse concluiria que o app a perdeu. A nota ao
 * lado diz por que ela não vale aqui.
 */
.opcao--desligada {
  opacity: 0.45;
  cursor: not-allowed;
}

.opcao--desligada input {
  cursor: not-allowed;
}

/* ---------------------------------------------------------------- *
 * Resumo — números grandes, sem caixa                               *
 * ---------------------------------------------------------------- */

/*
 * O cartão do resumo é um BOTÃO que filtra a lista.
 *
 * Ele já parecia clicável — "16 supressões" em vermelho, a mesma cor da pílula
 * "Supressões" logo abaixo — e não era. Sem caixa nem borda: o que diz que ele
 * responde é o cursor, o realce no hover e o foco visível, no mesmo nível de
 * profundidade do resto.
 */
.resumo-item--filtro {
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--raio-md);
  padding: var(--e-sm);
  margin: calc(-1 * var(--e-sm));
  transition: background var(--rapido) var(--suave), transform var(--rapido) var(--suave);
}

.resumo-item--filtro:hover {
  background: var(--fundo-realce);
}

.resumo-item--filtro:active {
  transform: scale(0.98);
}

.faixa-resumo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-xl) var(--e-xxl);
  padding: var(--e-lg) var(--e-lg) var(--e-md);
}

.resumo-item__valor {
  font-size: var(--t-destaque);
  font-weight: var(--peso-forte);
  line-height: var(--entrelinha-destaque);
  letter-spacing: var(--letra-destaque);
  font-variant-numeric: tabular-nums;
}

.resumo-item__rotulo {
  margin-top: var(--e-xs);
  font-size: var(--t-apoio);
  color: var(--tinta-suave);
}

.resumo-item--adicao .resumo-item__valor {
  color: var(--adicao-tinta);
}
.resumo-item--supressao .resumo-item__valor {
  color: var(--supressao-tinta);
}
.resumo-item--movimentacao .resumo-item__valor {
  color: var(--movimentacao-tinta);
}
.resumo-item--mudanca .resumo-item__valor {
  color: var(--mudanca-tinta);
}

.resumo-item--formatacao .resumo-item__valor {
  color: var(--formatacao-tinta);
}

/*
 * A nota do alinhamento padrão: uma linha inteira, abaixo dos números.
 *
 * `flex-basis: 100%` a põe numa linha só dela, e não como mais uma coluna de
 * número: ela é uma frase, e espremida entre "12 supressões" e "94% de
 * semelhança" ela seria lida como rótulo de um número que não existe.
 */
/*
 * A frase do padrão do documento na linha do lote: bloco próprio, abaixo da
 * situação. Em linha com ela, a coluna "Situação" ficaria com o dobro da
 * largura das outras e a tabela deixaria de caber na tela.
 */
.lote__nota {
  display: block;
  margin-top: var(--e-xs);
  font-size: var(--t-apoio);
  color: var(--tinta-suave);
}

.faixa-resumo__nota {
  flex-basis: 100%;
  margin-top: var(--e-sm);
  font-size: var(--t-apoio);
  color: var(--tinta-suave);
}

/* ---------------------------------------------------------------- *
 * Abas — controle segmentado                                        *
 * ---------------------------------------------------------------- */

.abas {
  display: inline-flex;
  align-self: flex-start;
  gap: var(--trilho-abas); /* folga do trilho */
  padding: var(--trilho-abas);
  border-radius: var(--raio-md);
  background: var(--fundo-realce);
}

.aba {
  /* "Lado a lado" quebrava em "Lado / a / lado" numa tira de 390px: três linhas
     de uma etiqueta de duas palavras, e a tira inteira com 65px de altura. */
  white-space: nowrap;
  padding: var(--e-sm) var(--e-lg);
  border: none;
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--tinta-suave);
  font-family: inherit;
  font-size: var(--t-apoio);
  font-weight: var(--peso-medio);
  cursor: pointer;
  transition: background var(--rapido) var(--suave), color var(--rapido) var(--suave);
}

.aba:hover {
  color: var(--tinta);
}

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

/* Opção que este par não permite. Apagada, mas ainda legível: quem revisa
   precisa saber que o formato existe — o porquê de ele não valer aqui vem
   escrito logo abaixo, na dica, e não escondido num `title`. */
.aba:disabled {
  color: var(--tinta-fraca);
  cursor: not-allowed;
}

.aba:disabled:hover {
  color: var(--tinta-fraca);
}

/* ---------------------------------------------------------------- *
 * Resultado                                                         *
 * ---------------------------------------------------------------- */

.tela-resultado {
  display: flex;
  flex-direction: column;
  gap: var(--e-lg);
}

.area-resultado {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px; /* largura da faixa de alterações */
  gap: var(--e-lg);
  align-items: start;
}

.area-resultado__visualizacao {
  min-width: 0;
  border-radius: var(--raio-lg);
  background: var(--papel);
  overflow: hidden;
}

.area-resultado__painel {
  position: sticky;
  top: 84px; /* altura do cabeçalho fixo */
  max-height: calc(100dvh - 108px);
  border-radius: var(--raio-lg);
  background: var(--papel);
  overflow: hidden;
  display: flex;
}

/* ---------------------------------------------------------------- *
 * Visualização                                                      *
 * ---------------------------------------------------------------- */

.visualizacao {
  position: relative; /* âncora da régua de marcas */
  max-height: calc(100dvh - 108px);
  overflow-y: auto;
}

/*
 * A régua de marcas das abas Lado a lado e Redline.
 *
 * Encostada na borda direita da área de rolagem, grudada nela: o conteúdo rola
 * por baixo e o mapa fica. Mesmo desenho da faixa da aba Documento — mesmos
 * traços, mesmo agrupamento, mesmo alvo invisível —, porque é o mesmo módulo.
 */
.visualizacao__regua {
  position: sticky;
  top: 0;
  float: right;
  z-index: 1;
  width: var(--largura-regua);
  height: 100%;
  margin-left: calc(-1 * var(--largura-regua));
}

@media (max-width: 900px) {
  /*
   * No celular a régua sai.
   *
   * A área de leitura tem 350px de largura: 18px de régua são 5% do texto, e o
   * mapa disputaria espaço com a coisa que ele existe para ajudar a ler. A
   * barra fixa do rodapé já dá o andar-entre-pontos ali, com o contador
   * dizendo a posição.
   */
  .visualizacao__regua {
    display: none;
  }
}

.visualizacao__conteudo--lado-a-lado .par {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/*
 * Qual coluna é qual. As abas "Três painéis" e "Documento" já diziam; a aba
 * padrão não dizia, e é a que todo mundo abre primeiro.
 */
.visualizacao__rotulos {
  position: sticky;
  top: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Opaco, não translúcido: o texto do documento rola por baixo. */
  background: var(--fundo-realce);
  border-bottom: 1px solid var(--linha); /* hairline */
}

.visualizacao__rotulo {
  /* O mesmo recuo horizontal de `.par__celula`, para o rótulo cair em cima
     da primeira letra da coluna que ele nomeia. */
  padding: var(--e-sm) var(--e-lg);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-etiqueta);
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.par {
  border-bottom: 1px solid var(--linha);
  transition: background var(--padrao) var(--suave);
}

.par:last-child {
  border-bottom: none;
}

.par__celula {
  text-wrap: pretty;
  padding: var(--e-md) var(--e-lg);
  font-family: var(--fonte-documento);
  font-size: var(--t-documento);
  line-height: var(--entrelinha-documento);
  overflow-wrap: break-word;
}

.par__celula--esquerda {
  border-right: 1px solid var(--linha);
}

.par__celula--vazia {
  background: var(--fundo);
}

/* Barra de margem: diz onde houve alteração sem depender de ler a cor. */
.par--adicao .par__celula--direita {
  box-shadow: inset 3px 0 0 var(--adicao-tinta);
}
.par--supressao .par__celula--esquerda {
  box-shadow: inset 3px 0 0 var(--supressao-tinta);
}
.par--movimentacao .par__celula {
  box-shadow: inset 3px 0 0 var(--movimentacao-tinta);
}
.par--mudanca .par__celula {
  box-shadow: inset 3px 0 0 var(--mudanca-tinta);
}

.par--focado {
  background: var(--fundo-realce);
}

/*
 * No lado a lado o número não aparece no texto: a barra de margem já marca a
 * linha e a faixa da direita traz o número. Ele existe no DOM para o clique
 * casar os dois lados.
 */
.par__numero {
  display: none;
}

.redline__numero {
  display: inline-grid;
  place-items: center;
  min-width: 19px; /* caixa do número */
  height: 19px;
  margin-right: var(--e-sm);
  padding: 0 var(--e-xs);
  border-radius: var(--raio-sm);
  background: var(--mudanca-tinta);
  color: var(--papel);
  font-family: var(--fonte-interface);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

.redline__paragrafo--adicao .redline__numero {
  background: var(--adicao-tinta);
}
.redline__paragrafo--supressao .redline__numero {
  background: var(--supressao-tinta);
}
.redline__paragrafo--movimentacao .redline__numero {
  background: var(--movimentacao-tinta);
}

.visualizacao__conteudo--redline {
  padding: var(--e-xl);
  max-width: 78ch; /* medida de leitura */
  margin: 0 auto;
}

.redline__paragrafo {
  text-wrap: pretty;
  margin-bottom: var(--e-md);
  font-family: var(--fonte-documento);
  font-size: var(--t-documento);
  line-height: var(--entrelinha-documento);
  overflow-wrap: break-word;
  scroll-margin-top: var(--e-xl);
  transition: background var(--padrao) var(--suave);
}

.redline__paragrafo.par--focado {
  background: var(--fundo-realce);
  border-radius: var(--raio-sm);
}

/* ---------------------------------------------------------------- *
 * Telas estreitas                                                   *
 * ---------------------------------------------------------------- */

@media (max-width: 900px) {
  .conteudo {
    padding: var(--e-lg);
  }

  .entrada__cartoes,
  .area-resultado {
    grid-template-columns: 1fr;
  }

  .area-resultado__painel {
    position: static;
    max-height: none;
  }

  .visualizacao__conteudo--lado-a-lado .par {
    grid-template-columns: 1fr;
  }

  /*
   * Empilhadas, as duas colunas se leem como o mesmo documento repetido: uma
   * tira de duas colunas no topo deixa de dizer qual metade é qual. O rótulo
   * desce para dentro de cada célula — pelo atributo, e não por mais um nó no
   * DOM, porque um contrato longo tem milhares de células.
   */
  .visualizacao__rotulos {
    display: none;
  }

  .visualizacao__conteudo--lado-a-lado .par__celula::before {
    content: attr(data-rotulo);
    display: block;
    margin-bottom: var(--e-xs);
    font-family: var(--fonte-interface);
    font-size: var(--t-etiqueta);
    font-weight: var(--peso-forte);
    letter-spacing: var(--letra-etiqueta);
    text-transform: uppercase;
    color: var(--tinta-fraca);
  }

  .par__celula--esquerda {
    border-right: none;
    border-bottom: 1px solid var(--linha);
  }

  .faixa-resumo {
    gap: var(--e-lg) var(--e-xl);
  }
}

/*
 * Telas estreitas: os painéis param de pender do botão e viram folha presa ao
 * pé da janela.
 *
 * Pendurado num gatilho que não está colado na borda direita — "ajustes da
 * comparação", no meio da barra, ou "Ver exemplo" depois que o cabeçalho
 * quebra em duas linhas — o painel escorregava para fora da tela. E o que sai
 * da tela não é cortado por ninguém: continua recebendo toque, a ponto de um
 * toque no vazio acionar um item de menu invisível. Preso à janela, ele sempre
 * cabe, e a mão alcança o conteúdo sem esticar até o topo.
 */
/*
 * Telas estreitas: a barra inteira numa fileira só.
 *
 * Empilhar os chips e deixar as três ações soltas dava 189px de barra — com o
 * cabeçalho, 351px de cromo permanente numa tela de 844px, ou seja, 42% do
 * aparelho ocupado por moldura, com o texto do contrato aparecendo por trás do
 * vidro. Aqui os chips ficam lado a lado (o rótulo ORIGINAL/REVISADO sai — a
 * seta entre eles e o `aria-label` de cada botão já dizem quem é quem) e as
 * ações se recolhem atrás do "⋯".
 */
/*
 * Telas estreitas: o cabeçalho em DUAS fileiras, não três.
 *
 * Em 390px ele ocupava 163px — 19% do aparelho — só de moldura, com o texto do
 * contrato atravessando o vidro. A marca perde a palavra e fica o símbolo (o
 * botão continua sendo "voltar ao início", com o mesmo `aria-label`), e com ela
 * some a fileira inteira que ela ocupava sozinha.
 */
@media (max-width: 600px) {
  .cabecalho {
    gap: var(--e-sm);
    padding-top: max(var(--e-sm), env(safe-area-inset-top));
    padding-bottom: var(--e-sm);
  }

  .marca__nome {
    display: none;
  }

  /*
   * As ações passam a caber AO LADO da marca. Com a base automática, o bloco
   * inteiro (451px de botões) não cabia junto do símbolo e era jogado para uma
   * fileira própria — que então quebrava em mais duas. Com base zero ele
   * encolhe, senta ao lado e quebra por dentro: três fileiras viram duas.
   */
  .cabecalho__acoes {
    gap: var(--e-sm);
    flex: 1 1 0;
    min-width: 0;
    justify-content: flex-end;
  }

  /* Quatro abas não cabem em 350px: elas deslizam na horizontal em vez de
     quebrar a linha — e a tira volta a ter a altura de UMA etiqueta. */
  .tela-resultado .abas {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /*
     * A borda com excedente se dissolve, dizendo que há mais.
     * A quarta aba ficava 19% visível e essa sobra era a única pista de que a
     * tira deslizava — pista que some no instante em que a aba de fora fica
     * alinhada com a borda. A máscara é afordância de verdade: aparece só do
     * lado em que há o que alcançar, e se apaga ao chegar ao fim.
     */
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 var(--desvanecer-tira),
      #000 calc(100% - var(--desvanecer-tira)),
      transparent 100%
    );
  }

  /* No começo e no fim da rolagem não há nada a esconder daquele lado. */
  .tela-resultado .abas[data-excedente='fim'] {
    mask-image: linear-gradient(
      to right,
      #000 0,
      #000 calc(100% - var(--desvanecer-tira)),
      transparent 100%
    );
  }

  .tela-resultado .abas[data-excedente='inicio'] {
    mask-image: linear-gradient(to right, transparent 0, #000 var(--desvanecer-tira), #000 100%);
  }

  .tela-resultado .abas[data-excedente='nenhum'] {
    mask-image: none;
  }

  .tela-resultado .abas::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 600px) {
  .barra-par {
    position: sticky;
    gap: var(--e-sm);
    flex-wrap: nowrap;
  }

  .chip__papel {
    display: none;
  }

  .chip {
    padding-left: var(--e-sm);
  }

  /*
   * O corte come o COMEÇO do nome, não o fim.
   *
   * Cortando pelo fim, "contrato-anexo-v1.docx" e "contrato-anexo-v2.docx"
   * viram os dois "contrato-ane…" — dois chips com o mesmo texto, que é pior do
   * que nenhum texto. O que distingue duas versões mora no fim do nome, e é ele
   * que fica. `direction: rtl` põe o estouro no início da linha; o `<bdi>` do
   * conteúdo mantém a ordem lógica das letras. O nome inteiro segue no `title`.
   */
  .chip__nome {
    direction: rtl;
    text-align: right;
  }

  /* O ⇄ continua sendo alvo de dedo na altura; a largura cede para o nome. */
  .chip__trocar {
    width: var(--e-xl);
  }

  .barra-par__mais {
    display: grid;
  }

  .barra-par__acoes {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: var(--camada-flutuante);
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--e-md);
    padding: var(--e-lg);
    border-radius: var(--raio-lg);
    background: var(--papel);
    box-shadow: var(--sombra);
  }

  .barra-par[data-acoes='abertas'] .barra-par__acoes {
    display: flex;
    animation: surgir var(--entrada) var(--suave);
  }

  /*
   * Um menu feito PARA o dedo com itens de 15px de altura é uma contradição.
   * O alvo passa a ser a linha inteira — largura cheia e `--alvo-toque` de
   * altura —, e o `gap` some para não sobrar vão morto entre um item e o
   * seguinte: no vão, o toque não acerta nada e a pessoa conclui que o menu
   * travou.
   */
  .barra-par__acoes {
    gap: 0;
    padding: var(--e-sm) var(--e-md);
  }

  .barra-par__acoes > .link,
  .barra-par__acoes > .ajustes > .link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--alvo-toque);
  }

  .barra-par__acoes > .ajustes {
    width: 100%;
  }
}

/*
 * Janela BAIXA — o celular deitado, e o navegador em meia altura no notebook.
 *
 * O critério aqui é a ALTURA, não a largura, e é por isso que este bloco existe
 * separado do de 640px de largura. Medido antes desta rodada num celular
 * deitado (844×390): o painel pendurado na barra nascia a y=194 num viewport de
 * 390 e terminava a 471 — 81px além do rodapé — e, pior, saía 129px pela
 * ESQUERDA, porque em tela larga ele se alinha pela direita de um gatilho que a
 * quebra de linha da barra tinha jogado para o começo da fileira.
 *
 * Ancorado no rodapé da janela ele deixa de depender de onde a barra parou. A
 * largura continua sendo a de sempre (`--painel-ajustes`, já limitada pela
 * janela na regra base): aqui a tela é larga, e esticar o painel de ponta a
 * ponta faria uma faixa de 800px com seis caixas de marcar dentro.
 */
@media (max-height: 640px) {
  .ajustes__painel {
    position: fixed;
    top: auto;
    bottom: var(--painel-recuo);
    left: auto;
    right: var(--painel-recuo);
    max-height: var(--painel-altura-maxima);
  }
}

@media (max-width: 640px) {
  /* Os três do cabeçalho passam a se medir pelo cabeçalho, não pelo botão.
   * Tirar `position: relative` destes invólucros faz o `.cabecalho` (que é
   * `sticky`, logo posicionado) virar a referência — e ele ocupa a largura da
   * janela inteira, então `left`/`right` bastam para o painel nunca vazar.
   * `position: fixed` não serve aqui: o `backdrop-filter` do cabeçalho o torna
   * bloco de contenção, e o painel "fixo" acabaria preso a ele do mesmo jeito,
   * só que com a geometria errada. */
  .exemplos,
  .ajuda,
  .exportacao {
    position: static;
  }

  .exportacao__painel,
  .ajuda__painel,
  .exemplos__painel {
    left: var(--painel-recuo);
    right: var(--painel-recuo);
    width: auto;
  }

  /* O `.ajustes__painel` não entra aqui: o teto dele vale em toda largura e já
     está na regra base. */
  .exportacao__painel,
  .ajuda__painel,
  .exemplos__painel {
    max-height: var(--painel-altura-maxima);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* O gatilho de ajustes fica no meio da barra: pender dali jogava metade do
   * painel para fora, e a metade invisível continuava recebendo toque.
   *
   * Ancorado no RODAPÉ da janela, e é escolha de polegar: este é o painel mais
   * alto do app, e num celular o que fica ao alcance do dedo é a metade de
   * baixo. Com `--painel-altura-maxima` o topo dele cai, no pior caso, a
   * exatamente um `--painel-recuo` abaixo do cabeçalho — nunca por baixo dele.
   * Isto só funciona porque a `.barra-par` deixou de carregar o
   * `backdrop-filter` (ver `.barra-par::before`): com o filtro ali, este
   * `fixed` se media pela barra, e o painel nascia a 448px acima da tela. */
  .ajustes__painel {
    position: fixed;
    top: auto;
    bottom: var(--painel-recuo);
    left: var(--painel-recuo);
    right: var(--painel-recuo);
    width: auto;
    max-height: var(--painel-altura-maxima);
  }
}

/* ---------------------------------------------------------------- *
 * Visão nativa — a página de verdade, com a marcação por cima        *
 * ---------------------------------------------------------------- */

.visao-nativa {
  display: grid;
  /* A faixa central é estreita de propósito: é um mapa, não uma coluna. */
  grid-template-columns: 1fr 18px 1fr;
  gap: var(--e-md);
  align-items: start;
  height: 74dvh;
}

.visao-nativa__coluna {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--raio-lg);
  background: var(--fundo-realce);
}

.visao-nativa__rotulo {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--e-sm) var(--e-md);
  /* Opaco, não translúcido: o conteúdo rola por baixo, e com vidro o texto da
     página aparecia atrás do rótulo, virando duas camadas ilegíveis. */
  background: var(--fundo-realce);
  border-bottom: 1px solid var(--linha); /* hairline */
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-etiqueta);
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.visao-nativa__paginas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-md);
  padding: var(--e-md);
}

/* Uma folha de papel: sombra rasa, um único nível de profundidade. */
.pagina-nativa {
  position: relative;
  flex: none;
  background: var(--papel);
  box-shadow: var(--sombra);
}

.pagina-nativa__marcacoes {
  position: absolute;
  inset: 0;
}

.marca-pagina {
  position: absolute;
  border-bottom: var(--traco-icone) solid currentColor; /* traço fino sob a palavra */
  border-radius: 2px;
  cursor: pointer;
  transition: background var(--rapido) var(--suave), box-shadow var(--rapido) var(--suave);
}

/* A cor nunca decide sozinha: a supressão vem riscada, como no resto do app. */
.marca-pagina--removido {
  text-decoration: line-through;
}

.marca-pagina--removido::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px solid currentColor;
}

.marca-pagina--ativa {
  box-shadow: 0 0 0 2px var(--acento);
}

/*
 * A marca de BLOCO: o parágrafo inteiro que mudou de lugar.
 *
 * Só borda esquerda, nenhum preenchimento — e é isso que a distingue de
 * `.marca-pagina--movido`. Com fundo, ela somaria alfa por baixo de cada
 * retângulo vermelho ou azul do mesmo parágrafo, e a cláusula deslocada E
 * reescrita ficaria com a cor errada exatamente onde importa entender.
 */
.marca-pagina--bloco {
  border-bottom: none;
  border-inline-start: var(--marca-bloco-fio) solid currentColor;
  border-radius: 0;
  background: none;
}

/* ---- O .docx desenhado, no lugar da página rasterizada ---- */

/*
 * A folha do `.docx`. Mesma linguagem da `.pagina-nativa` do PDF — papel,
 * sombra rasa, um nível só de profundidade —, porque para quem revisa é a
 * mesma coisa: o documento. A largura vem em pt do `w:pgSz` do arquivo, e é
 * ela que decide onde a linha quebra.
 */
.render-docx {
  width: 100%;
  /* Papel e tinta fixos, nunca os do tema — ver `--docx-papel` em tokens.css.
     A cor do texto vem inline do `w:color` do arquivo, e no tema escuro o
     preto do documento caía sobre folha escura: o contrato ficava invisível. */
  background: var(--docx-papel);
  box-shadow: var(--sombra);
  color: var(--docx-tinta);
  color-scheme: light;
  font-family: var(--docx-fonte-serif);
  line-height: var(--entrelinha-documento);
  /* A quebra dentro da palavra evita que um número de processo sem espaço
     estoure a folha e ponha barra de rolagem horizontal na coluna inteira. */
  overflow-wrap: break-word;
}

.render-docx__paragrafo,
.render-docx__tabela,
.render-docx__espaco {
  margin-block: var(--docx-vao-blocos);
  /* Um contrato de quarenta páginas são milhares de blocos. Sem isto o
     navegador diagrama todos antes de mostrar o primeiro, e a aba fica alguns
     segundos em branco depois do clique. */
  content-visibility: auto;
  contain-intrinsic-size: auto var(--docx-altura-estimada);
}

.render-docx__paragrafo {
  font-size: inherit;
  font-weight: inherit;
}

/* Título: a hierarquia sai de peso e espaço, como no resto do app. */
.render-docx h1.render-docx__paragrafo,
.render-docx h2.render-docx__paragrafo,
.render-docx h3.render-docx__paragrafo,
.render-docx h4.render-docx__paragrafo,
.render-docx h5.render-docx__paragrafo,
.render-docx h6.render-docx__paragrafo {
  margin-top: var(--e-md);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-titulo);
}

/* Linha de tabela que caiu para parágrafo solto (tabela aninhada). */
.render-docx__paragrafo--linha-de-tabela {
  padding-left: var(--docx-recuo-lista);
  color: var(--tinta-suave);
}

/*
 * De onde o parágrafo veio, quando não veio do corpo: cabeçalho, rodapé, nota,
 * comentário, caixa de texto. Fica pequeno e cinza porque é anotação nossa, não
 * texto do contrato — mas continua sendo parte do parágrafo comparado, e por
 * isso recebe marcação como qualquer outro trecho.
 */
.render-docx__rotulo-regiao {
  font-family: var(--fonte-interface);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-etiqueta);
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.render-docx__imagem {
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
}

.render-docx__imagem img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Imagem que não dá para desenhar (SVG, ou acima do teto de memória): o
   descritor que a comparação usa fica visível, para a troca de um logotipo
   aparecer na tela e não só na lista de alterações. */
.render-docx__imagem--ausente {
  padding: 0 var(--e-xs);
  border: var(--docx-tabela-linha);
  border-style: dashed;
  border-radius: var(--raio-sm);
  font-family: var(--fonte-interface);
  font-size: var(--t-apoio);
  color: var(--docx-tinta-fraca);
}

.render-docx__tabela {
  width: 100%;
  border-collapse: collapse;
}

.render-docx__tabela th,
.render-docx__tabela td {
  padding: var(--e-xs) var(--e-sm);
  border: var(--docx-tabela-linha);
  text-align: left;
  vertical-align: top;
}

.render-docx__tabela th {
  font-weight: var(--peso-forte);
}

/*
 * A marcação dentro do fluxo do texto.
 *
 * Não reaproveita `.marca-adicao` e companhia de propósito: aquelas têm padding
 * e uma regra de `margin-left` entre supressão e adição vizinhas, feitas para o
 * texto que o app redesenha. Aqui uma alteração pode chegar partida em vários
 * `<span>` — um por fronteira de negrito — e qualquer padding horizontal entre
 * eles abriria buracos no meio da palavra realçada, como se fossem marcações
 * diferentes. Daí: nenhum espaço lateral, e `box-decoration-break: clone` para
 * o realce continuar inteiro quando a marcação atravessa a quebra de linha.
 *
 * O risco e o sublinhado são aplicados inline pelo JS, junto com os do próprio
 * documento — `text-decoration` inline apagaria o daqui.
 */
.marca-fluxo {
  padding: 0;
  margin: 0;
  border-radius: var(--docx-raio-marca);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  text-decoration-thickness: var(--docx-traco-marca);
  text-underline-offset: var(--docx-recuo-sublinhado);
  transition: box-shadow var(--rapido) var(--suave);
}

/*
 * Cabeçalho, rodapé, notas e comentários como faixa, e não como linha de texto.
 *
 * Num papel timbrado o cabeçalho está no alto, uma vez, separado do corpo por
 * um fio. Desenhá-lo como parágrafo comum com "[CABEÇALHO]" na frente é o
 * contrário de "o documento como ele é" — e era o que a tela mostrava, três
 * vezes seguidas, porque o arquivo tem cabeçalho de primeira página, de página
 * par e de ímpar.
 */
.render-docx__regiao {
  margin-block: var(--e-md);
  padding: var(--e-sm) var(--e-md);
  /* Fundo e fio da família `--docx-`, e nunca os do tema: o texto por cima traz
     a cor inline do arquivo, e um fundo escuro deixava o cabeçalho preto
     invisível. Ver `--docx-fundo-regiao` em tokens.css. */
  border-left: var(--docx-fio-regiao) solid var(--docx-borda-regiao);
  background: var(--docx-fundo-regiao);
}

.render-docx__regiao-titulo {
  margin-bottom: var(--e-xs);
  font-family: var(--fonte-interface);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-medio);
  letter-spacing: var(--letra-etiqueta);
  text-transform: uppercase;
  color: var(--docx-tinta-fraca);
}

/* O rótulo que diz SÓ o nome da região é redundante com o título da faixa:
   continua no DOM, porque faz parte da string ancorada, e só some da vista.
   Quem decide é `prefixoRedundante`, em `regioes-do-documento.js` — a mesma
   função que o PDF chama —, e é ela que põe a classe abaixo. "[Nota de rodapé 2]" e
   "[Comentário de Ana]" não a recebem: sem o número não há como saber qual
   nota é qual, e a faixa não diz isso. */
.render-docx__paragrafo--em-faixa .render-docx__rotulo-regiao {
  display: none;
}

/*
 * O parágrafo aceso quando a alteração escolhida não tem trecho marcado.
 *
 * É o caso da alteração de formatação: o texto é idêntico dos dois lados, e o
 * que mudou foi o negrito, a fonte ou o alinhamento. Não há palavra para
 * realçar — então acende-se a cláusula inteira, de leve, para o clique na
 * lista ao menos levar a tela até onde a mudança está.
 */
.render-docx__paragrafo--ativo {
  background: var(--formatacao-fundo);
  box-shadow: 0 0 0 3px var(--formatacao-fundo);
  border-radius: var(--docx-raio-marca);
}

/*
 * O parágrafo que mudou de lugar: filete na margem, e nada no fundo dos spans.
 *
 * A marcação de bloco e a de caractere convivem na mesma cláusula — uma cláusula
 * pode ter mudado de lugar E ter sido reescrita. Por isso o filete e a lavagem
 * ficam no bloco, e o vermelho e o azul de cada palavra continuam por cima,
 * intactos. Se o bloco pintasse o fundo forte, a reescrita sumiria dentro dele.
 *
 * Filete por `border-inline-start`, e não por um `::before` na margem: o bloco
 * tem `content-visibility: auto`, que implica contenção de pintura, e tudo que
 * cai fora da caixa de padding simplesmente não é desenhado. O respiro entre o
 * filete e a primeira letra é somado ao recuo do arquivo, em JS.
 */
.render-docx__paragrafo--movido {
  border-inline-start: var(--marca-bloco-fio) solid var(--docx-movido-tinta);
  border-radius: var(--docx-raio-marca);
  background: var(--docx-movido-fundo);
  cursor: pointer;
}

.render-docx__paragrafo--movido-ativo {
  background: var(--docx-movido-fundo-ativo);
}

/* Mão só onde clicar leva a algum lugar: marcação sem ponto de alteração
   ligado não responde, e prometer o clique seria mentir sobre o cursor. */
.marca-fluxo[data-alteracao] {
  cursor: pointer;
}

.marca-fluxo--inserido {
  color: var(--adicao-tinta);
  background: color-mix(in srgb, var(--adicao-tinta) calc(var(--marca-fluxo-alfa) * 100%), transparent);
  text-decoration-color: var(--adicao-tinta);
}

.marca-fluxo--removido {
  color: var(--supressao-tinta);
  background: color-mix(in srgb, var(--supressao-tinta) calc(var(--marca-fluxo-alfa) * 100%), transparent);
  text-decoration-color: var(--supressao-tinta);
}

.marca-fluxo--movido {
  color: var(--movimentacao-tinta);
  background: color-mix(in srgb, var(--movimentacao-tinta) calc(var(--marca-fluxo-alfa) * 100%), transparent);
  text-decoration-color: var(--movimentacao-tinta);
}

.marca-fluxo--ativa {
  box-shadow: 0 0 0 2px var(--acento);
}

/* ---- A faixa central ---- */

.visao-nativa__faixa {
  position: relative;
  height: 100%;
  border-radius: var(--raio-pilula);
  background: var(--fundo-realce);
}

.faixa-marca {
  position: absolute;
  left: var(--fio-faixa-vao);
  right: var(--fio-faixa-vao);
  height: var(--fio-faixa);
  padding: 0;
  border: none;
  border-radius: var(--fio-faixa-vao);
  cursor: pointer;
  transform: translateY(-50%);
  transition: height var(--rapido) var(--suave), left var(--rapido) var(--suave);
}

/*
 * A área de CLIQUE é maior que o traço, e invisível.
 *
 * O traço tem 3px de altura: mirá-lo com o dedo é impossível, e com o mouse é
 * um exercício de pontaria. O pseudo-elemento estende o alvo para
 * `--alvo-toque` sem mudar nada do que se vê — e pode sobrepor os vizinhos,
 * porque errar o traço por um pixel e acertar o de cima é melhor do que não
 * acertar nada.
 */
.faixa-marca::after {
  content: '';
  position: absolute;
  left: calc(-1 * var(--e-sm));
  right: calc(-1 * var(--e-sm));
  top: 50%;
  height: var(--alvo-toque);
  transform: translateY(-50%);
}

/* Onde as alterações se concentram, o traço é mais forte. */
.faixa-marca--agrupada {
  height: var(--fio-faixa-grupo);
  opacity: 0.9;
}

.faixa-marca--adicao {
  background: var(--adicao-tinta);
}

.faixa-marca--supressao {
  background: var(--supressao-tinta);
}

.faixa-marca--movimentacao {
  background: var(--movimentacao-tinta);
}

.faixa-marca--mudanca {
  background: var(--mudanca-tinta);
}

.faixa-marca--formatacao {
  background: var(--formatacao-tinta);
}

.faixa-marca:hover,
.faixa-marca--ativa {
  left: 0;
  right: 0;
  height: 6px;
}

@media (max-width: 900px) {
  /* Em tela estreita as duas colunas não cabem lado a lado: viram uma embaixo
     da outra. A faixa sai — ela posiciona cada marca pela altura proporcional
     do documento, o que não se traduz para uma régua horizontal sem reescrever
     a lógica, e a lista de alterações já dá a mesma navegação. */
  .visao-nativa {
    grid-template-columns: 1fr;
    height: auto;
  }

  .visao-nativa__coluna {
    height: 60dvh;
  }

  .visao-nativa__faixa {
    display: none;
  }
}

/* ---------------------------------------------------------------- *
 * Três painéis — original, revisado e redline ao mesmo tempo         *
 * ---------------------------------------------------------------- */

.tres-paineis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-md);
  height: 70dvh;
}

.tres-paineis__coluna {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--raio-lg);
  background: var(--papel);
}

.tres-paineis__rotulo {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--e-sm) var(--e-md);
  background: var(--fundo-realce);
  border-bottom: 1px solid var(--linha); /* hairline */
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-etiqueta);
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.tres-paineis__corpo {
  padding: var(--e-md);
  font-family: var(--fonte-documento);
  font-size: var(--t-documento);
  line-height: var(--entrelinha-documento);
}

.tres-paineis__paragrafo {
  padding: var(--e-xs) var(--e-sm);
  border-radius: var(--raio-sm);
  overflow-wrap: break-word;
  scroll-margin-top: var(--e-xl);
  transition: background var(--padrao) var(--suave);
}

.tres-paineis__paragrafo[data-alteracao] {
  cursor: pointer;
}

.tres-paineis__paragrafo--ativo {
  background: var(--fundo-realce);
}

@media (max-width: 900px) {
  /* Três colunas em 390px dariam 120px cada: ilegível. Viram uma embaixo da
     outra, e a rolagem travada continua valendo. */
  .tres-paineis {
    grid-template-columns: 1fr;
    height: auto;
  }

  .tres-paineis__coluna {
    height: 50dvh;
  }
}

/* ---------------------------------------------------------------- *
 * Pré-visualização ao vivo                                          *
 * ---------------------------------------------------------------- */

.ao-vivo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-md);
}

.ao-vivo[hidden] {
  display: none;
}

.ao-vivo__campo {
  display: flex;
  flex-direction: column;
  gap: var(--e-xs);
}

.ao-vivo__area {
  min-height: 140px;
  padding: var(--e-md);
  border: 1px solid var(--linha-forte); /* hairline */
  border-radius: var(--raio-md);
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-documento);
  font-size: var(--t-apoio);
  line-height: var(--entrelinha-documento);
  resize: vertical;
}

.ao-vivo__saida {
  grid-column: 1 / -1;
  min-height: 60px;
  padding: var(--e-md);
  border-radius: var(--raio-md);
  background: var(--fundo-realce);
  font-family: var(--fonte-documento);
  font-size: var(--t-apoio);
  line-height: var(--entrelinha-documento);
}

.ao-vivo__saida:empty::before {
  content: 'O redline aparece aqui conforme você digita.';
  color: var(--tinta-fraca);
  font-family: var(--fonte-interface);
}

@media (max-width: 640px) {
  .ao-vivo {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------- *
 * Os três modos alternativos da tela inicial                        *
 *                                                                   *
 * Eram três links soltos, cada um com uma margem própria por cima   *
 * do `gap` da coluna — daí os espaçamentos desiguais da tela. Aqui   *
 * quem espaça é a grade, e cada modo vira um cartão com o mesmo      *
 * peso dos dois cartões de documento logo abaixo: são alternativas   *
 * de mesmo nível, não letra miúda.                                  *
 * ---------------------------------------------------------------- */

.modos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-md);
}

.modo {
  display: flex;
  align-items: flex-start;
  gap: var(--e-md);
  /* Raio concêntrico: o do cartão menos o recuo dá o da pastilha do ícone
     (18 − 12 = 6). Iguais, o canto de dentro parece espremido. */
  padding: var(--e-md);
  border: 1px solid var(--linha); /* hairline: estrutura, não profundidade */
  border-radius: var(--raio-lg);
  background: var(--papel);
  color: var(--tinta);
  font-family: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color var(--rapido) var(--suave), box-shadow var(--rapido) var(--suave),
    transform var(--rapido) var(--suave);
}

.modo:hover {
  border-color: var(--linha-forte);
  box-shadow: var(--sombra);
}

.modo:active {
  transform: scale(0.97); /* o mesmo toque dos botões do app */
}

.modo__icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--raio-sm);
  background: var(--fundo-realce);
  color: var(--acento);
  transition: background var(--rapido) var(--suave);
}

.modo:hover .modo__icone {
  background: var(--adicao-fundo);
}

.modo__icone svg {
  width: 19px;
  height: 19px;
}

.modo__texto {
  display: flex;
  flex-direction: column;
  gap: var(--vao-linha-dupla);
  min-width: 0;
}

.modo__titulo {
  font-size: var(--t-apoio);
  font-weight: var(--peso-medio);
}

.modo__apoio {
  text-wrap: pretty;
  font-size: var(--t-etiqueta);
  line-height: var(--entrelinha-interface);
  color: var(--tinta-suave);
}

/* Aberto, o cartão vira o cabeçalho do painel que ele controla. */
.modo[aria-expanded='true'] {
  border-color: var(--acento);
}

.modo[aria-expanded='true'] .modo__icone {
  background: var(--acento-superficie);
  color: var(--acento-tinta);
}

@media (max-width: 900px) {
  .modos {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------- *
 * Linha do tempo — v1 → v2 → v3                                     *
 * ---------------------------------------------------------------- */

.linha-do-tempo {
  display: flex;
  flex-direction: column;
  gap: var(--e-xl);
  margin-top: var(--e-lg);
}

.rodada {
  display: flex;
  flex-direction: column;
  gap: var(--e-sm);
}

.rodada__titulo {
  display: flex;
  align-items: baseline;
  gap: var(--e-sm);
  font-size: var(--t-apoio);
  color: var(--tinta-suave);
}

.rodada__numero {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--raio-pilula);
  background: var(--tinta);
  color: var(--papel);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums;
}

.rodada__nomes {
  font-weight: var(--peso-medio);
  color: var(--tinta);
}

.rodada__tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-apoio);
}

.rodada__tabela th {
  padding: var(--e-xs) var(--e-sm);
  border-bottom: 1px solid var(--linha); /* hairline */
  text-align: left;
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-etiqueta);
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.rodada__tabela td {
  padding: var(--e-sm);
  border-bottom: 1px solid var(--linha); /* hairline */
  vertical-align: top;
  overflow-wrap: anywhere;
}

.rodada__tabela tr:last-child td {
  border-bottom: none;
}

.rodada__vazia {
  padding: var(--e-sm);
  font-size: var(--t-apoio);
  color: var(--tinta-fraca);
}

/* A mesma nota de `.faixa-resumo__nota`, sem o `flex-basis`: a `.rodada` é
 * uma coluna, não uma linha de números, então não há do que ela precisar
 * ocupar sozinha. */
.rodada__nota {
  font-size: var(--t-apoio);
  color: var(--tinta-suave);
}

.linha-do-tempo__acoes {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--e-lg);
}

/* A tabela tem seis colunas e não cabe em 390px: rola dentro de si, e nunca
   empurra a página inteira para o lado. */
.rodada__rolagem {
  overflow-x: auto;
}

/* ---------------------------------------------------------------- *
 * Perfis, etiquetas e lote                                          *
 * ---------------------------------------------------------------- */

.ajustes__grupo {
  display: flex;
  flex-direction: column;
  gap: var(--e-sm);
  padding-top: var(--e-md);
  border-top: 1px solid var(--linha); /* hairline */
}

.ajustes__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-xs);
}

.ajustes__botoes .botao {
  flex: 1 1 auto;
  padding: var(--e-xs) var(--e-md);
}

select.campo {
  width: 100%;
}

.lote__tabela {
  margin-top: var(--e-lg);
}

/* Os controles ficam acima do resumo: a pergunta "como casar" vem antes de
   olhar o resultado, e é para onde se volta quando o pareamento não fecha. */
.lote__controles {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--e-md);
  margin-bottom: var(--e-lg);
}

.lote__campo {
  display: flex;
  flex-direction: column;
  gap: var(--e-xs);
  min-width: 220px;
  font-size: var(--t-apoio);
  color: var(--tinta-suave);
}

.lote__aviso {
  flex: 1 1 100%;
  margin: 0;
  padding: var(--e-sm) var(--e-md);
  border-radius: var(--raio-md);
  background: var(--supressao-fundo);
  color: var(--supressao-tinta);
  font-size: var(--t-apoio);
}

.lote__situacao--erro {
  color: var(--supressao-tinta);
  font-weight: var(--peso-medio);
}

.lote__situacao--igual {
  color: var(--tinta-fraca);
}

/* ---- Etiquetas nos pontos de alteração ---- */

.alteracao__etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-xs);
  margin-top: var(--e-sm);
}

.etiqueta-marca {
  padding: 2px var(--e-sm);
  border: 1px solid var(--linha-forte); /* hairline */
  border-radius: var(--raio-pilula);
  background: transparent;
  color: var(--tinta-suave);
  font-family: inherit;
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-medio);
  cursor: pointer;
  transition: background var(--rapido) var(--suave), color var(--rapido) var(--suave),
    border-color var(--rapido) var(--suave);
}

.etiqueta-marca[aria-pressed='true'] {
  border-color: transparent;
  color: var(--papel);
}

.etiqueta-marca--adicao[aria-pressed='true'] { background: var(--adicao-tinta); }
.etiqueta-marca--supressao[aria-pressed='true'] { background: var(--supressao-tinta); }
.etiqueta-marca--movimentacao[aria-pressed='true'] { background: var(--movimentacao-tinta); }
.etiqueta-marca--mudanca[aria-pressed='true'] { background: var(--mudanca-tinta); }
.etiqueta-marca--formatacao[aria-pressed='true'] { background: var(--formatacao-tinta); }

/* ---- Gerenciar as etiquetas, no painel de ajustes ---- */

.etiquetas-lista {
  display: flex;
  flex-direction: column;
  gap: var(--e-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.etiquetas-lista__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-sm);
}

/* Aqui a pastilha é amostra, não botão: mostra a cor sem convidar ao clique. */
.etiquetas-lista__item .etiqueta-marca {
  cursor: default;
}

.etiquetas-lista__item .etiqueta-marca--adicao { color: var(--adicao-tinta); border-color: var(--adicao-borda); }
.etiquetas-lista__item .etiqueta-marca--supressao { color: var(--supressao-tinta); border-color: var(--supressao-borda); }
.etiquetas-lista__item .etiqueta-marca--movimentacao { color: var(--movimentacao-tinta); border-color: var(--movimentacao-borda); }
.etiquetas-lista__item .etiqueta-marca--mudanca { color: var(--mudanca-tinta); border-color: var(--mudanca-borda); }
.etiquetas-lista__item .etiqueta-marca--formatacao { color: var(--formatacao-tinta); border-color: var(--formatacao-borda); }

.etiquetas-lista__vazio {
  font-size: var(--t-apoio);
  color: var(--tinta-fraca);
}

/*
 * `minmax(0, 1fr)`, e não `1fr`.
 *
 * Uma faixa `1fr` tem piso automático: ela não encolhe abaixo do mínimo do
 * conteúdo, e o mínimo de um `<input type="text">` é a largura padrão que o
 * navegador dá a ele (~177px no Chromium). Nos 270px úteis do painel isso
 * somava 11px a mais do que cabia — medido a 390×844: `scrollWidth` 321 contra
 * `clientWidth` 310 —, e o "Criar" vazava para fora da borda direita com uma
 * barra de rolagem lateral por baixo da faixa "AO TERMINAR A COMPARAÇÃO".
 * Com o piso em 0 quem cede é o campo do nome, que é o único elástico dos três.
 */
.etiquetas-nova {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--e-xs);
}

/* Num painel estreito o nome ficaria com uns 100px — espaço para cinco letras.
 * O botão desce para a linha de baixo, em largura cheia, e o campo fica com a
 * primeira linha inteira. */
@media (max-width: 640px) {
  .etiquetas-nova {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .etiquetas-nova .botao {
    grid-column: 1 / -1;
  }
}

.ajustes__aviso {
  margin: 0;
  font-size: var(--t-apoio);
  color: var(--supressao-tinta);
}

.alteracao__etiquetas-resumo {
  margin-top: var(--e-xs);
  font-size: var(--t-etiqueta);
  color: var(--tinta-suave);
}

/* ---------------------------------------------------------------- *
 * Movimento reduzido                                                *
 *                                                                   *
 * Quem pede menos movimento não está pedindo NENHUM sinal: sem uma   *
 * transição, um card que acende e um revelador que abre passam a     *
 * acontecer sem aviso, e a pessoa perde o rastro do que mudou. Aqui  *
 * o deslocamento e a escala saem, e no lugar deles fica uma          *
 * dissolução curta — a duração vem dos tokens, como tudo o mais.     *
 *                                                                   *
 * `--rapido` e `--padrao` já viram 1ms na regra global de            *
 * `tokens.css`; `--entrada` não, e é justamente ele que dá tempo de  *
 * ver a troca acontecer.                                             *
 * ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .formato,
  .chip,
  .chip__trocar {
    transition: background var(--entrada) var(--suave), color var(--entrada) var(--suave);
  }

  .formato:active,
  .chip__trocar:active {
    transform: none;
  }

  .revelar[open] > .revelar__corpo {
    animation: dissolver var(--entrada) var(--suave);
  }

  .revelar__titulo::before {
    transition: none;
  }

  @keyframes dissolver {
    from {
      opacity: 0;
    }
  }
}

/* ---------------------------------------------------------------- *
 * Barra de navegação da revisão — só no celular                     *
 *                                                                   *
 * Em tela larga a lista de pontos fica AO LADO do documento e os     *
 * botões dela estão sempre à mão. No celular ela desce para depois   *
 * do documento inteiro, e andar de um ponto ao seguinte passou a     *
 * custar duas rolagens longas: descer até a lista, tocar "↓", subir  *
 * de volta para ler. Fixa no rodapé, ela devolve o par anterior/     *
 * próxima ao alcance do polegar sem tirar o texto da tela.           *
 * ---------------------------------------------------------------- */

.navegacao-revisao {
  display: none;
}

/*
 * A lista reserva embaixo o espaço da barra fixa.
 *
 * A barra flutua sobre o conteúdo — é o que a mantém à mão —, e por isso os
 * últimos 24px da lista ficavam por baixo dela: o último ponto do contrato, que
 * é justamente onde a revisão termina, não dava para ler nem tocar.
 */
@media (max-width: 900px) {
  .conteudo:has(.navegacao-revisao:not([hidden])) {
    padding-bottom: calc(var(--barra-revisao) + var(--e-xl));
  }
}

@media (max-width: 900px) {
  .navegacao-revisao {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: max(var(--e-md), env(safe-area-inset-bottom));
    z-index: var(--camada-navegacao-revisao);
    display: flex;
    align-items: center;
    gap: var(--e-xs);
    padding: var(--e-xs);
    border-radius: var(--raio-pilula);
    background: var(--vidro);
    backdrop-filter: var(--vidro-desfoque);
    -webkit-backdrop-filter: var(--vidro-desfoque);
    box-shadow: var(--sombra);
  }

  .navegacao-revisao[hidden] {
    display: none;
  }
}

.navegacao-revisao__botao,
.navegacao-revisao__contador {
  display: grid;
  place-items: center;
  min-width: var(--alvo-toque);
  height: var(--alvo-toque);
  border: none;
  border-radius: var(--raio-pilula);
  background: transparent;
  color: var(--tinta);
  font-family: inherit;
  font-size: var(--t-corpo);
  cursor: pointer;
  transition: background var(--rapido) var(--suave), transform var(--rapido) var(--suave);
}

.navegacao-revisao__contador {
  padding: 0 var(--e-md);
  font-size: var(--t-apoio);
  font-weight: var(--peso-medio);
  font-variant-numeric: tabular-nums;
  color: var(--acento);
}

.navegacao-revisao__botao:hover,
.navegacao-revisao__contador:hover {
  background: var(--fundo-realce);
}

.navegacao-revisao__botao:active,
.navegacao-revisao__contador:active {
  transform: scale(0.94);
}

@media (prefers-reduced-motion: reduce) {
  .navegacao-revisao__botao:active,
  .navegacao-revisao__contador:active {
    transform: none;
  }
}

/* ---------------------------------------------------------------- *
 * Copiar o trecho selecionado — só o que entrou, ou só o que saiu    *
 *                                                                   *
 * O redline mistura as duas versões de propósito. Para mandar uma    *
 * cláusula por e-mail, porém, é preciso separá-las de novo — e fazer *
 * isso à mão, apagando de um contrato o que saiu, é trabalho em que  *
 * se erra sem perceber.                                              *
 * ---------------------------------------------------------------- */

.copiar-selecao {
  position: absolute;
  z-index: var(--camada-flutuante);
  display: flex;
  gap: var(--e-xs);
  padding: var(--e-xs);
  border-radius: var(--raio-pilula);
  background: var(--papel);
  box-shadow: var(--sombra);
  /* Acima da seleção, com um respiro — em cima dela, a barrinha tampa o texto
     que a pessoa acabou de escolher. */
  transform: translateY(calc(-100% - var(--e-sm)));
  animation: surgir var(--entrada) var(--suave);
}

.copiar-selecao__botao {
  padding: var(--e-xs) var(--e-md);
  border: none;
  border-radius: var(--raio-pilula);
  background: transparent;
  color: var(--acento);
  font-family: inherit;
  font-size: var(--t-apoio);
  font-weight: var(--peso-medio);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--rapido) var(--suave);
}

.copiar-selecao__botao:hover {
  background: var(--fundo-realce);
}

@media (max-width: 900px) {
  /* No dedo, cada botão precisa do alvo inteiro. */
  .copiar-selecao__botao {
    min-height: var(--alvo-toque);
    display: grid;
    place-items: center;
  }
}

/* ---------------------------------------------------------------- *
 * Paleta de comandos — Ctrl+K / ⌘K                                  *
 *                                                                   *
 * O único diálogo do app que escurece o que está atrás. É o preço   *
 * de ser modal de verdade: ele toma o teclado inteiro, e a tela     *
 * precisa dizer isso antes que a primeira tecla seja digitada. O    *
 * escurecido é leve de propósito — a comparação continua legível    *
 * por baixo, porque é para ela que se volta.                        *
 * ---------------------------------------------------------------- */

/*
 * A porta da paleta no cabeçalho: fantasma, e alvo de dedo inteiro.
 *
 * Fantasma pelo mesmo motivo do botão da marca — ele está sempre lá, e uma
 * pastilha cheia ao lado de "Exportar…" disputaria o olhar com a ação que
 * entrega o trabalho. O alvo é `--alvo-toque` porque no celular ele é a ÚNICA
 * forma de abrir a paleta: não há Ctrl+K num aparelho sem teclado.
 */
.paleta__abrir {
  display: grid;
  place-items: center;
  min-width: var(--alvo-toque);
  min-height: var(--alvo-toque);
  border: none;
  border-radius: var(--raio-md);
  background: none;
  color: var(--tinta-suave);
  cursor: pointer;
  transition: background var(--rapido) var(--suave), color var(--rapido) var(--suave);
}

.paleta__abrir:hover {
  background: var(--fundo-realce);
  color: var(--tinta);
}

.paleta {
  position: fixed;
  inset: 0;
  z-index: var(--camada-flutuante);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: var(--paleta-topo) var(--painel-recuo) var(--painel-recuo);
  background: var(--sombreado);
  animation: surgir var(--entrada) var(--suave);
}

.paleta__caixa {
  display: flex;
  flex-direction: column;
  gap: var(--e-sm);
  width: min(var(--paleta-largura), 100%);
  max-height: 100%;
  padding: var(--e-md);
  border-radius: var(--raio-lg);
  background: var(--papel);
  box-shadow: var(--sombra);
}

/*
 * O campo é a interface inteira: nada de rótulo por cima, nada de botão de
 * busca ao lado. A borda sai quando o campo já é a única coisa em foco — o
 * que resta é o texto e o que se digita.
 */
.paleta__campo {
  width: 100%;
  /* No celular o campo é o primeiro alvo que o dedo procura — e ele nasceu com
     39px, que é o que o texto de 19px mais o respiro davam por acaso. */
  min-height: var(--alvo-toque);
  padding: var(--e-sm) var(--e-md);
  border: none;
  border-bottom: 1px solid var(--linha); /* hairline */
  border-radius: 0;
  background: none;
  color: var(--tinta);
  font-family: inherit;
  font-size: var(--t-titulo);
  letter-spacing: var(--letra-titulo);
}

.paleta__campo:focus {
  outline: none;
  border-bottom-color: var(--acento);
}

.paleta__campo::placeholder {
  color: var(--tinta-fraca);
  letter-spacing: normal;
  font-size: var(--t-corpo);
}

.paleta__lista {
  max-height: var(--paleta-lista-altura);
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}

.paleta__secao {
  padding: var(--e-md) var(--e-sm) var(--e-xs);
}

.paleta__opcao {
  display: flex;
  flex-direction: column;
  gap: var(--vao-linha-dupla);
  justify-content: center;
  min-height: var(--alvo-toque); /* alvo de dedo: a paleta também é do celular */
  padding: var(--e-sm) var(--e-md);
  border-radius: var(--raio-md);
  cursor: pointer;
}

/*
 * O realce da opção em jogo é FUNDO, e não sombra nem borda: é o mesmo
 * vocabulário do item aceso da lista de alterações. O foco fica no campo o
 * tempo todo, então este realce é a única pista visual de onde o Enter cai.
 */
.paleta__opcao--ativa {
  background: var(--fundo-realce);
}

.paleta__titulo {
  font-size: var(--t-corpo);
  color: var(--tinta);
}

.paleta__detalhe {
  font-size: var(--t-apoio);
  color: var(--tinta-fraca);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.paleta__vazio,
.paleta__excedente,
.paleta__rodape {
  padding: var(--e-sm) var(--e-md);
  font-size: var(--t-apoio);
  color: var(--tinta-fraca);
}

.paleta__rodape {
  border-top: 1px solid var(--linha); /* hairline */
  font-size: var(--t-etiqueta);
}

/* Num celular a paleta sobe até quase o topo: com os 12vh de recuo do desktop
   e o teclado aberto, sobrava uma faixa de quatro linhas para a lista. */
@media (max-width: 600px) {
  .paleta {
    padding: var(--e-sm);
  }

  /* O rodapé fala de teclas que este aparelho não tem. */
  .paleta__rodape {
    display: none;
  }
}