/* dicode.ai — CSS só da página Conferir código de arquivo (/conferir-codigo-de-arquivo).
   Tela: assets/js/ferramentas/telas/conferir-codigo-de-arquivo.js; opções:
   templates/ferramentas/conferir-codigo-de-arquivo.html. Só os tokens do design system, cantos
   retos, linhas de 1px, alvos de toque de 44px. O que muda entre dois códigos fica em laranja
   (por cima do laranja, só preto). */

.cc { display: grid; gap: 16px; min-width: 0; }
.cc .campo { max-width: 640px; margin: 0; }
.cc-esperado { width: 100%; min-height: 64px; font-family: var(--fonte-mono); font-size: 14px; line-height: 1.5; resize: vertical; }
.cc-estado { margin: 0; color: var(--cinza); }
.cc-estado[data-estado="tamanho"], .cc-estado[data-estado="invalido"] { color: var(--preto); }

/* Resultado */
.cc-resultado { display: grid; gap: 16px; min-width: 0; }
.cc-codigo { display: grid; gap: 6px; min-width: 0; padding: 12px 14px; border: 1px solid var(--preto); background: var(--branco); }
.cc-codigo[hidden] { display: none; }
.cc-codigo p { margin: 0; }
.cc-codigo--colado { border-color: var(--linha); }
.cc-codigo-valor { font-family: var(--fonte-mono); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; word-spacing: 2px; }
.cc-difere { background: var(--laranja); color: var(--preto); padding: 0 2px; }
.cc-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.cc-acoes .botao { min-height: 44px; }
.cc-copiado { color: var(--cinza); }
.cc-comparar { display: grid; gap: 6px; max-width: 640px; margin: 0; }
.cc-veredito { margin: 0; font-weight: 600; }
.cc-veredito[data-resultado="diferente"] { padding-left: 10px; border-left: 3px solid var(--laranja); }
.cc-veredito[data-resultado="igual"] { padding-left: 10px; border-left: 3px solid var(--preto); }
.cc-explica { margin: 0; font-size: 15px; line-height: 1.55; max-width: 72ch; }