/* dicode.ai — CSS só da página Comparar PDF (/comparar-pdf).
   Tela: assets/js/ferramentas/telas/comparar-pdf.js; opções: templates/ferramentas/comparar-pdf.html.
   Tokens do design system, cantos retos, sem sombra nem gradiente, linhas de 1px, alvos de toque
   de 44px. Duas cores próprias, só desta página, porque comparar pede "entrou" e "saiu" à
   primeira vista: verde (incluído) e vermelho (tirado), sempre com uma marca que não depende da
   cor (sublinhado e riscado) e com texto escondido para leitor de tela. O laranja do site marca a
   diferença no desenho, tracejado. */

.cmp-ordem { display: grid; gap: 12px; justify-items: start; }
.cmp-ordem .opcoes-dica { max-width: 560px; }

/* Etiqueta "Versão antiga" / "Versão nova" embaixo do nome de cada arquivo */
.cmp-etiqueta { display: inline-block; margin-top: 4px; padding: 2px 8px; border: 1px solid var(--preto); }
.cmp-item--nova .cmp-etiqueta { background: var(--preto); color: var(--branco); }

/* Senha (só quando um dos PDFs pede): embaixo do arquivo, na lista */
.cmp-senha { display: grid; gap: 12px; margin-top: 12px; min-width: 0; }
.cmp-senha[hidden] { display: none; }
.cmp-senha-aviso { margin: 0; background: var(--branco); }
.cmp-senha .campo { max-width: 480px; }
.cmp-mostrar { min-height: 44px; }

/* ---------- Resultado ---------- */
.cmp {
  --cmp-incluido: #0B6B33;
  --cmp-incluido-fundo: #DDF2E4;
  --cmp-tirado: #B3111C;
  --cmp-tirado-fundo: #FCE3E1;
  display: grid;
  gap: 40px;
  min-width: 0;
}
.cmp-titulo { margin: 0; font-size: 22px; font-weight: 800; font-stretch: 112%; line-height: 1.2; }

/* Resumo em números */
.cmp-resumo { display: grid; gap: 12px; min-width: 0; }
.cmp-resumo-titulo { margin: 0; }
.cmp-numeros {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  border-top: 1px solid var(--preto);
  border-left: 1px solid var(--linha);
}
.cmp-numero { display: grid; gap: 4px; align-content: start; padding: 12px 14px; border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.cmp-numero dt { margin: 0; }
.cmp-numero dd { margin: 0; font-family: var(--fonte-mono); font-size: 24px; line-height: 1.2; }

/* Mudanças no texto */
.cmp-texto { display: grid; gap: 16px; min-width: 0; }
.cmp-legenda { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 15px; color: var(--cinza); }
/* Longhands: o Safari ignora a espessura dentro do atalho "text-decoration" (e perde a linha toda). */
.cmp-incluido, .cmp-tirado { color: var(--preto); padding: 0 2px; text-decoration-thickness: 2px; text-decoration-skip-ink: none; }
.cmp-incluido { background: var(--cmp-incluido-fundo); text-decoration-line: underline; text-decoration-color: var(--cmp-incluido); text-underline-offset: 3px; }
.cmp-tirado { background: var(--cmp-tirado-fundo); text-decoration-line: line-through; text-decoration-color: var(--cmp-tirado); }
.cmp-trechos { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--preto); }
.cmp-trecho { display: grid; gap: 6px; padding: 14px 0 16px; border-bottom: 1px solid var(--linha); scroll-margin: 96px 0 120px; }
.cmp-trecho:focus { outline: none; }
.cmp-trecho:focus-visible, .cmp-trecho--atual { border-left: 4px solid var(--laranja); padding-left: 14px; }
.cmp-trecho-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.cmp-ver { min-height: 44px; }
.cmp-trecho-texto { margin: 0; font-size: 16px; line-height: 1.7; overflow-wrap: anywhere; }
.cmp-contexto { color: var(--cinza); }
.cmp-mais { margin: 0; }

/* Anterior / Próxima mudança: presa no pé da tela enquanto a lista passa */
.cmp-nav {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--preto);
  background: var(--superficie);   /* a mesma cor da área da ferramenta */
}
.cmp-nav .botao { min-height: 44px; }
.cmp-nav-status { text-align: center; }

/* Páginas que mudaram */
.cmp-paginas { display: grid; gap: 16px; min-width: 0; }
.cmp-modo { gap: 6px; }
.cmp-marcas-legenda { margin: 0; }
.cmp-cartoes { margin: 0; padding: 0; list-style: none; display: grid; gap: 32px; }
.cmp-cartao { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--preto); min-width: 0; scroll-margin-top: 24px; }
.cmp-cartao:focus { outline: none; }
.cmp-cartao:focus-visible { outline: 2px solid var(--preto); outline-offset: 4px; }
.cmp-cartao-titulo { margin: 0; font-size: 17px; font-weight: 700; }
.cmp-cartao-info { margin: 0; }
.cmp-quadro { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; min-width: 0; max-width: 920px; }
.cmp-quadro--so { grid-template-columns: minmax(0, 520px); }
.cmp-fig { margin: 0; display: grid; gap: 6px; min-width: 0; }
.cmp-img { position: relative; width: 100%; border: 1px solid var(--linha); background: var(--branco); overflow: hidden; }
.cmp-img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.cmp-caixa { position: absolute; box-sizing: border-box; pointer-events: none; }
.cmp-caixa--desenho { border: 2px dashed var(--laranja); }
.cmp-caixa--incluido { border: 2px solid var(--cmp-incluido); background: rgba(11, 107, 51, .12); }
.cmp-caixa--tirado { border: 2px solid var(--cmp-tirado); background: rgba(179, 17, 28, .12); }
.cmp-mistura { display: none; align-items: center; gap: 12px; max-width: 520px; }
.cmp-mistura input { flex: 1; min-width: 0; min-height: 44px; accent-color: var(--preto); }

/* Uma por cima da outra: as duas figuras na mesma célula, a nova por cima, com a transparência do
   controle (--cmp-mistura); as marcas continuam fortes. */
.cmp-cartoes--cima .cmp-quadro:not(.cmp-quadro--so) { grid-template-columns: minmax(0, 520px); }
.cmp-cartoes--cima .cmp-quadro:not(.cmp-quadro--so) .cmp-fig { grid-area: 1 / 1; }
.cmp-cartoes--cima .cmp-quadro:not(.cmp-quadro--so) .cmp-fig figcaption { display: none; }
.cmp-cartoes--cima .cmp-quadro:not(.cmp-quadro--so) .cmp-fig--nova .cmp-img { background: transparent; }
.cmp-cartoes--cima .cmp-fig--nova img { opacity: var(--cmp-mistura, .5); }
.cmp-cartoes--cima .cmp-mistura { display: flex; }

@media (max-width: 640px) {
  .cmp-quadro { gap: 8px; }
  .cmp-titulo { font-size: 20px; }
  .cmp-nav { gap: 8px; }
  .cmp-nav .botao { padding-left: 12px; padding-right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .cmp-trecho { scroll-margin: 0; }
}