/*
 * Estilo do componente-âncora (js/ui/painel-alteracoes.js).
 * Os padrões daqui — etiqueta em caixa alta pequena, pastilha de número,
 * item com barra colorida à esquerda, estado ativo por fundo e não por
 * sombra — são a referência visual para o resto da interface.
 */

.painel-alteracoes {
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  background: var(--papel);
}

.painel-alteracoes__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-md);
  padding: var(--e-lg) var(--e-lg) var(--e-md);
}

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

.painel-alteracoes__contagem {
  margin-top: var(--e-xs);
  font-size: var(--t-corpo);
  font-weight: var(--peso-medio);
  letter-spacing: var(--letra-titulo);
  color: var(--tinta);
}

.painel-alteracoes__navegacao {
  display: flex;
  gap: var(--e-xs);
}

.botao-icone {
  width: 30px; /* alvo de toque */
  height: 30px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: var(--raio-pilula);
  background: var(--fundo-realce);
  color: var(--tinta-suave);
  font-size: var(--t-apoio);
  cursor: pointer;
  transition: background var(--rapido) var(--suave), color var(--rapido) var(--suave);
}

.botao-icone:hover {
  background: var(--linha);
  color: var(--tinta);
}

.painel-alteracoes__filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-xs);
  padding: 0 var(--e-lg) var(--e-md);
}

/*
 * A pílula é ALVO DE TOQUE, e o texto dela é pequeno.
 *
 * Medido no celular: os quinze alvos dos três eixos tinham 21px de altura,
 * contra os 44 de `--alvo-toque`. É a mesma família do "⋯" da rodada 4 — um
 * controle que se lê bem e não se acerta com o polegar. A altura mínima vem do
 * token; o `padding` continua governando a largura, para que "Todos" não vire
 * um botão quadrado.
 */
.pilula {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-toque);
  padding: var(--e-xs) var(--e-md);
  border: none;
  border-radius: var(--raio-pilula);
  background: var(--fundo-realce);
  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);
}

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

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

/* ---------------------------------------------------------------- *
 * Os dois eixos que não cabiam na faixa                             *
 * ---------------------------------------------------------------- */

/*
 * Somados aos sete tipos, "onde" e "estado" dariam treze pílulas numa faixa que
 * no celular tem a largura da tela. Atrás do revelador elas continuam a um
 * clique, e a faixa de cima segue lendo-se como uma linha de opções — que é o
 * que ela é. O resumo ao lado do título existe para o caso fechado: filtro
 * ligado e escondido recorta a lista sem nada na tela dizendo por quê.
 */
.painel-alteracoes__mais {
  padding: 0 var(--e-lg) var(--e-md);
}

.painel-alteracoes__mais-titulo {
  display: flex;
  align-items: center;
  gap: var(--e-sm);
  min-height: var(--alvo-toque);
  color: var(--tinta-suave);
  font-size: var(--t-apoio);
  font-weight: var(--peso-medio);
  cursor: pointer;
  list-style: none;
}

.painel-alteracoes__mais-titulo::-webkit-details-marker {
  display: none;
}

/* A seta é a mesma dos outros reveladores do app, pelo mesmo token. */
.painel-alteracoes__mais-titulo::after {
  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);
}

.painel-alteracoes__mais[open] > .painel-alteracoes__mais-titulo::after {
  transform: rotate(-135deg);
}

.painel-alteracoes__mais-resumo {
  margin-left: auto;
  color: var(--tinta);
  font-weight: var(--peso-normal);
}

.painel-alteracoes__mais-corpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-sm);
  padding-top: var(--e-sm);
}

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

/*
 * Um degrau abaixo das pílulas de tipo — na LETRA, não no alvo.
 *
 * O eixo principal é o de tipo, e a hierarquia se lê pelo corpo do texto. A
 * área de toque é a mesma de `.pilula`: um alvo secundário não é um alvo menor,
 * é um alvo com menos peso visual.
 */
.pilula--miuda {
  padding: var(--e-xs) var(--e-sm);
  font-size: var(--t-etiqueta);
}

/* ---------------------------------------------------------------- *
 * O resumo por assunto — onde a outra parte mexeu                   *
 *                                                                   *
 * Uma linha de contagens, cada uma clicável, logo abaixo do total.  *
 * Sem caixa e sem borda: o que diz que respondem é o mesmo que no   *
 * cartão do resumo — cursor, realce no hover e foco visível. O peso *
 * está no número, e o rótulo é o apoio, como na faixa de cima.      *
 * ---------------------------------------------------------------- */

.painel-alteracoes__assuntos {
  display: flex;
  flex-direction: column;
  gap: var(--e-xs);
  padding: 0 var(--e-lg) var(--e-md);
}

.painel-alteracoes__assuntos-lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-xs);
}

.painel-alteracoes__assunto {
  display: inline-flex;
  align-items: baseline;
  gap: var(--e-xs);
  min-height: var(--alvo-toque); /* alvo de dedo, como as pílulas */
  padding: var(--e-xs) var(--e-sm);
  border: none;
  border-radius: var(--raio-md);
  background: transparent;
  color: var(--tinta-suave);
  font-family: inherit;
  font-size: var(--t-apoio);
  cursor: pointer;
  transition: background var(--rapido) var(--suave), color var(--rapido) var(--suave);
}

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

.painel-alteracoes__assunto--ativo {
  background: var(--fundo-realce);
  color: var(--tinta);
}

.painel-alteracoes__assunto-valor {
  font-size: var(--t-corpo);
  font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}

/*
 * A ressalva sai impressa, e não escondida num `title`.
 *
 * A contagem senta ao lado de números contados um a um; sem esta linha ela é
 * lida com a mesma autoridade deles. É a única frase do painel que existe para
 * DESAUTORIZAR o que está logo acima, e por isso ela não pode depender de
 * alguém passar o mouse.
 */
.painel-alteracoes__assuntos-nota {
  font-size: var(--t-etiqueta);
  line-height: var(--entrelinha-interface);
  color: var(--tinta-fraca);
  text-wrap: pretty;
}

/* ---------------------------------------------------------------- *
 * Ações em lote e a barra de desfazer                               *
 * ---------------------------------------------------------------- */

.painel-alteracoes__lote {
  display: flex;
  flex-direction: column;
  gap: var(--e-sm);
  margin: 0 var(--e-lg) var(--e-md);
  padding: var(--e-md);
  border-radius: var(--raio-md);
  background: var(--fundo-realce);
}

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

.painel-alteracoes__lote-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-xs);
}

/* Sobre o fundo de realce, a pílula precisa do papel para se destacar. */
.painel-alteracoes__lote-botoes .pilula {
  background: var(--papel);
}

.painel-alteracoes__lote-botoes .pilula:disabled {
  opacity: 0.4;
  cursor: default;
}

.painel-alteracoes__lote-etiqueta {
  display: flex;
  flex-direction: column;
  gap: var(--vao-linha-dupla);
}

/* O seletor é um controle do lote como os botões ao lado, e escolher a
   etiqueta errada aplica a etiqueta errada em dezenas de pontos: ele precisa
   do mesmo alvo de dedo que eles. Nasceu com 35px. */
.painel-alteracoes__lote-etiqueta .campo {
  min-height: var(--alvo-toque);
}

/*
 * A barra de desfazer é DISCRETA e não desaparece sozinha.
 *
 * Um aviso que some em três segundos transforma "desfazer" em reflexo, e quem
 * acabou de aceitar trinta pontos precisa de tempo para ler o número antes de
 * decidir. Ela sai quando o lote é desfeito, quando outro lote entra no lugar
 * ou quando a comparação é refeita.
 */
.painel-alteracoes__desfazer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-sm);
  margin: 0 var(--e-lg) var(--e-md);
  padding: var(--e-sm) var(--e-md);
  border-radius: var(--raio-md);
  background: var(--fundo-realce);
  font-size: var(--t-apoio);
  color: var(--tinta-suave);
}

/*
 * "Desfazer" é o controle MAIS legível da barra, e não o menos.
 *
 * O `--acento` foi medido para o papel branco; sobre `--fundo-realce`, que é o
 * fundo desta barra, ele cai a 4,13:1 — abaixo de AA. E logo aqui: é a única
 * saída de quem acabou de aceitar trinta pontos por engano. O token
 * `--acento-sobre-realce` existe para este caso, com 4,86:1 medido.
 */
.painel-alteracoes__desfazer .link {
  min-height: var(--alvo-toque);
  color: var(--acento-sobre-realce);
  font-weight: var(--peso-medio);
}

.painel-alteracoes__lista {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--e-lg) var(--e-lg);
  list-style: none;
}

/*
 * Linha, não cartão.
 *
 * Cartão arredondado com barra de acento à esquerda é um padrão que se
 * reconhece de longe e não é o vocabulário da Apple, cujas listas são linhas
 * separadas por uma hairline. Aqui a cor vive na pastilha do número e na
 * etiqueta do tipo, que é onde ela carrega significado.
 */
.alteracao {
  display: flex;
  gap: var(--e-md);
  padding: var(--e-md) var(--e-sm);
  border-bottom: 1px solid var(--linha); /* hairline */
  border-radius: var(--raio-sm);
  cursor: pointer;
  transition: background var(--rapido) var(--suave);
}

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

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

.alteracao--ativa {
  background: var(--fundo-realce);
}

.alteracao__numero {
  flex: none;
  width: 22px; /* caixa do número */
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: var(--raio-sm);
  background: var(--mudanca-tinta);
  color: var(--papel);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums;
}

.alteracao--adicao .alteracao__numero {
  background: var(--adicao-tinta);
}
.alteracao--supressao .alteracao__numero {
  background: var(--supressao-tinta);
}
.alteracao--movimentacao .alteracao__numero {
  background: var(--movimentacao-tinta);
}
.alteracao--formatacao .alteracao__numero {
  background: var(--formatacao-tinta);
}

.alteracao__conteudo {
  min-width: 0;
  flex: 1;
}

.alteracao__tipo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-xs);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-etiqueta);
  text-transform: uppercase;
  color: var(--mudanca-tinta);
}

.alteracao--adicao .alteracao__tipo {
  color: var(--adicao-tinta);
}
.alteracao--supressao .alteracao__tipo {
  color: var(--supressao-tinta);
}
.alteracao--movimentacao .alteracao__tipo {
  color: var(--movimentacao-tinta);
}
.alteracao--formatacao .alteracao__tipo {
  color: var(--formatacao-tinta);
}

.alteracao__nota {
  padding: 1px var(--e-sm); /* pastilha rente ao texto */
  border-radius: var(--raio-pilula);
  background: var(--fundo-realce);
  color: var(--tinta-fraca);
  letter-spacing: normal;
  text-transform: none;
  font-weight: var(--peso-medio);
}

/*
 * De onde veio o ponto — "Cláusula 11.5".
 *
 * Discreta ao lado do tipo, e não competindo com ele: o tipo diz O QUE mudou e
 * já vem na cor da marcação; a referência diz ONDE, em tinta fraca. Sem caixa
 * alta nem espaçamento de etiqueta, senão o número da cláusula fica ilegível.
 */
.alteracao__referencia {
  margin-left: auto; /* encosta na direita: o tipo continua a âncora da linha */
  color: var(--tinta-fraca);
  font-weight: var(--peso-medio);
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.alteracao__resumo {
  margin-top: var(--e-xs);
  font-size: var(--t-apoio);
  color: var(--tinta-suave);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/*
 * O ponto aberto mostra o resumo inteiro.
 *
 * Fechado, o corte em três linhas é o que mantém a lista legível de relance.
 * Aberto, ele é o oposto do que o revisor pediu: ele clicou justamente para ler
 * o trecho, e uma cláusula longa terminava em reticências sem nenhuma saída.
 * Nos itens fechados o texto inteiro continua a um `title` de distância.
 */
.alteracao--ativa .alteracao__resumo {
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
}

/* ---------------------------------------------------------------- *
 * Decisão do revisor — sai impressa no PDF                          *
 * ---------------------------------------------------------------- */

/*
 * Os controles só aparecem no item aberto. Fechado, a alteração é uma linha de
 * leitura — que é o que ela é na maior parte do tempo.
 */
.alteracao__controles {
  display: none;
}

.alteracao--ativa .alteracao__controles {
  display: block;
}

.alteracao__decidido {
  margin-top: var(--e-xs);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-etiqueta);
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.alteracao--ativa .alteracao__decidido {
  display: none;
}

.alteracao__decidido--aceita {
  color: var(--movimentacao-tinta);
}
.alteracao__decidido--recusada {
  color: var(--supressao-tinta);
}
.alteracao__decidido--verificar {
  color: var(--adicao-tinta);
}

.alteracao__rotulo-nota {
  display: block;
  margin-top: var(--e-sm);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-medio);
  color: var(--tinta-fraca);
}

.alteracao__decisoes {
  display: flex;
  gap: var(--e-xs);
  margin-top: var(--e-md);
  padding: 2px; /* folga do trilho */
  border-radius: var(--raio-md);
  background: var(--fundo-realce);
}

.decisao {
  flex: 1;
  min-height: 24px; /* alvo de toque mínimo (WCAG 2.2) */
  padding: var(--e-sm);
  border: none;
  border-radius: var(--raio-sm);
  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);
}

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

.decisao--ativa {
  background: var(--papel);
}

.decisao--aceita.decisao--ativa {
  color: var(--movimentacao-tinta);
}
.decisao--recusada.decisao--ativa {
  color: var(--supressao-tinta);
}
.decisao--verificar.decisao--ativa {
  color: var(--adicao-tinta);
}

.alteracao__comentario {
  width: 100%;
  margin-top: var(--e-xs);
  padding: var(--e-sm);
  border: none;
  border-radius: var(--raio-sm);
  background: var(--fundo-realce);
  color: var(--tinta);
  font-family: inherit;
  font-size: var(--t-apoio);
  line-height: var(--entrelinha-interface);
  resize: vertical;
}

.alteracao__comentario:not(:placeholder-shown) {
  background: var(--adicao-fundo);
}

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

/* Ponto já decidido recua: o olho vai para o que ainda falta decidir. */
.alteracao--decidida .alteracao__resumo {
  color: var(--tinta-fraca);
}

.painel-alteracoes__vazio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-sm);
  padding: 0 var(--e-lg) var(--e-lg);
  font-size: var(--t-apoio);
  color: var(--tinta-fraca);
}