/* Tabela densa como superficie principal, uma cor de acento so, e cor apenas
   onde significa estado. A medida de qualidade e o analista ler 40 linhas sem
   rolar a tela. */

:root {
  --tinta: #17242c;
  --tinta-fraca: #5b6b75;
  --fundo: #f7f6f3;
  --papel: #ffffff;
  --linha: #d9d5cd;
  --acento: #25404f;
  --sem-evidencia: #b42318;
  --divergente: #b54708;
  --conferido: #067647;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 14px/1.5 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--tinta);
  background: var(--fundo);
}

/* Barra clara, e nao escura: o logotipo e azul-escuro sobre transparente, e
   sobre o azul-marinho do acento ele simplesmente nao se le. Marca legivel vale
   mais que barra colorida. */
header {
  background: var(--papel);
  color: var(--tinta);
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 22px;
  border-bottom: 1px solid var(--linha);
}
header a { color: var(--acento); }

.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marca img { height: 34px; width: auto; display: block; }
.marca strong {
  font-size: 15px; font-weight: 600; color: var(--tinta);
  border-left: 1px solid var(--linha); padding-left: 12px;
}

header nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
header nav a {
  padding: 5px 12px; text-decoration: none; font-size: 13px;
  border: 1px solid transparent;
}
header nav a:hover { border-color: var(--linha); background: var(--fundo); }
header nav a.atual {
  background: var(--acento); color: #fff; border-color: var(--acento);
}
header nav .onde { font-size: 13px; color: var(--tinta-fraca); padding: 5px 4px; }
header .quem { font-size: 13px; color: var(--tinta-fraca); white-space: nowrap; }

@media (max-width: 720px) {
  header { flex-wrap: wrap; gap: 10px; }
  .marca strong { display: none; }
}

main { padding: 20px; max-width: 1400px; }

h1 { font-size: 18px; margin: 0 0 16px; font-weight: 600; }

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--papel);
  border: 1px solid var(--linha);
}
th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tinta-fraca);
  font-weight: 600;
  padding: 8px 10px;
  border-bottom: 1px solid var(--linha);
}
td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--linha);
  vertical-align: top;
}
tr:last-child td { border-bottom: none; }

/* Dinheiro alinhado por digito: sem isto, conferir coluna de valor cansa. */
.valor { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.trecho {
  color: var(--tinta-fraca);
  font-size: 13px;
  max-width: 44ch;
}
.pagina { color: var(--tinta-fraca); font-size: 12px; white-space: nowrap; }

.estado { font-size: 12px; font-weight: 600; white-space: nowrap; }
.estado.sem_evidencia { color: var(--sem-evidencia); }
.estado.divergente    { color: var(--divergente); }
.estado.manual        { color: var(--tinta-fraca); }
.estado.conferido     { color: var(--conferido); }

form.caixa {
  background: var(--papel);
  border: 1px solid var(--linha);
  padding: 16px;
  margin-bottom: 20px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}
label { display: block; font-size: 12px; color: var(--tinta-fraca); margin-bottom: 3px; }
input, select {
  font: inherit;
  padding: 6px 8px;
  border: 1px solid var(--linha);
  background: var(--papel);
  color: var(--tinta);
}
button {
  font: inherit;
  font-weight: 600;
  padding: 7px 16px;
  border: none;
  background: var(--acento);
  color: #fff;
  cursor: pointer;
}
button:hover { background: #1b2f3b; }

.vazio {
  background: var(--papel);
  border: 1px dashed var(--linha);
  padding: 28px;
  color: var(--tinta-fraca);
}
.erro { color: var(--sem-evidencia); font-size: 13px; }

/* --- acrescentado pela tela de conferencia --- */
.topo { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
h1.secao { margin-top:28px; }
.nota { max-width:78ch; margin-top:6px; }

.irmas a {
  display:inline-block; min-width:22px; text-align:center; padding:2px 6px;
  border:1px solid var(--linha); background:var(--papel); margin-left:3px;
  text-decoration:none; color:var(--acento);
}
.irmas a.atual { background:var(--acento); color:#fff; border-color:var(--acento); }

.achados { margin:14px 0; }
.achado {
  margin:0 0 4px; padding:6px 10px; background:var(--papel);
  border:1px solid var(--linha); font-size:13px;
}
.achado .rotulo {
  display:inline-block; min-width:96px; font-weight:600; font-size:11px;
  text-transform:uppercase; letter-spacing:.04em;
}
.achado.sem_evidencia .rotulo { color:var(--sem-evidencia); }
.achado.divergente .rotulo    { color:var(--divergente); }
.achado.manual .rotulo        { color:var(--tinta-fraca); }
.achado.nota .rotulo          { color:var(--tinta-fraca); }
.achado em { color:var(--tinta-fraca); font-style:normal; display:block; margin-left:96px; }

.ok { color:var(--conferido); font-size:13px; font-weight:600; }
.erro { color:var(--sem-evidencia); font-size:13px; font-weight:600; }
.problemas { color:var(--sem-evidencia); font-size:13px; }

form.inline { display:flex; gap:4px; margin:0; padding:0; border:none; background:none; }
form.inline input { padding:2px 6px; font-size:13px; }
form.inline button { padding:2px 10px; font-size:12px; }

.estado.gerada { color:var(--conferido); }
.estado.em_conferencia { color:var(--tinta-fraca); }

ul.arquivos { list-style:none; padding:0; }
ul.arquivos li { padding:6px 0; border-bottom:1px solid var(--linha); }
code { background:var(--papel); border:1px solid var(--linha); padding:1px 4px; }

table.montar { margin-bottom:0; }
table.montar input[type=text], table.montar input:not([type]) { font-size:13px; padding:3px 6px; }
table.montar select { font-size:13px; padding:3px 4px; }

/* --- a matriz: o mesmo desenho do PDF e do CSV ---------------------------- */
/* Faixas nas linhas, planos nas colunas. A primeira coluna gruda na rolagem
   porque tabela de seis planos nao cabe na tela, e valor sem o rotulo da faixa
   ao lado e valor que ninguem confere. */
.rolagem { overflow-x: auto; border: 1px solid var(--linha); background: var(--papel); }
.matriz { margin: 0; border: 0; width: auto; min-width: 100%; }
.matriz th, .matriz td { padding: 4px 8px; }
.matriz thead th { vertical-align: bottom; text-transform: none; letter-spacing: 0; }
.matriz .canto, .matriz .faixa {
  position: sticky; left: 0; z-index: 1; background: var(--papel);
  text-align: left; white-space: nowrap; border-right: 1px solid var(--linha);
}
.matriz .faixa { font-weight: 400; color: var(--tinta); font-size: 13px; }
.matriz thead .canto { background: var(--fundo); }
.matriz thead input, .matriz thead select { width: 100%; min-width: 96px; font-size: 12px; }
.matriz tr.origem th { border-bottom: 2px solid var(--linha); font-weight: 400; }
.matriz .incluir { display: inline; font-size: 11px; color: var(--tinta-fraca); }
.matriz .trecho { display: block; font-size: 11px; margin-top: 2px; }

.matriz .cel {
  width: 78px; text-align: right; font-variant-numeric: tabular-nums;
  border: 1px solid transparent; background: transparent; padding: 1px 3px;
}
.matriz .cel:hover, .matriz .cel:focus { border-color: var(--linha); background: var(--fundo); }
.matriz .pag { font-size: 10px; color: var(--tinta-fraca); margin-left: 3px; }

/* Cor so onde significa estado - celula conferida fica sem marca nenhuma, que e
   o estado normal e nao merece tinta. */
.matriz td.sem_evidencia { box-shadow: inset 3px 0 0 var(--sem-evidencia); }
.matriz td.divergente    { box-shadow: inset 3px 0 0 var(--divergente); }
.matriz td.manual        { box-shadow: inset 3px 0 0 var(--tinta-fraca); }

.citado {
  display: inline-block; margin-right: 10px; padding: 1px 6px;
  background: var(--papel); border: 1px solid var(--linha); font-size: 12px;
}
button.secundario {
  background: var(--papel); color: var(--acento); border: 1px solid var(--linha);
  margin-top: 10px;
}

/* --- busca, selecao e exclusao ------------------------------------------- */
.busca { align-items: flex-end; }
.busca button { align-self: flex-end; }

th.marcar, td.marcar { width: 26px; padding-right: 0; text-align: center; }

.rodape-lista {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-top: 10px; flex-wrap: wrap;
}

/* Vermelho so no botao que apaga. Cor de perigo em qualquer outro lugar da tela
   gasta o sinal, e quando importar ninguem enxerga. */
button.perigo { background: var(--sem-evidencia); }
button.perigo:hover { filter: brightness(1.1); }

a.limpar {
  align-self: center; font-size: 13px; color: var(--tinta-fraca);
  text-decoration: underline;
}

/* --- andamento do processamento ------------------------------------------ */
.andamento {
  background: var(--papel); border: 1px solid var(--linha);
  padding: 12px 14px; margin: 12px 0;
}
.andamento .titulo { margin: 0 0 8px; font-weight: 600; font-size: 14px; }
.andamento .barra {
  height: 8px; background: var(--fundo); border: 1px solid var(--linha);
  overflow: hidden;
}
.andamento .preenche {
  height: 100%; width: 0; background: var(--acento);
  transition: width .25s linear;
}
/* Listrada quando ninguem contou nada ainda: o movimento diz 'estou vivo', e
   nao 'estou em 60%'. Percentual so aparece quando existe contagem por tras. */
.andamento .preenche.indefinida {
  transition: none;
  background: repeating-linear-gradient(
    -45deg, var(--acento) 0 10px, var(--tinta-fraca) 10px 20px);
  animation: anda 1s linear infinite;
}
@keyframes anda { from { background-position: 0 0; } to { background-position: 28px 0; } }
.andamento .pagina { margin: 6px 0 0; }

button:disabled { opacity: .55; cursor: not-allowed; }

.rodape-lista .acoes { display: flex; gap: 8px; align-items: center; }
.caminho { margin: 0 0 10px; font-size: 13px; }
.caminho a { color: var(--tinta-fraca); text-decoration: none; }
.caminho a:hover { color: var(--acento); text-decoration: underline; }

/* --- unir tabelas do mesmo guia num arquivo so --------------------------- */
.unir {
  background: var(--papel); border: 1px solid var(--linha);
  border-left: 3px solid var(--acento); padding: 12px 14px; margin: 12px 0;
}
.unir .titulo { margin: 0 0 8px; font-size: 13px; }
.unir .opcao { display: flex; gap: 8px; align-items: baseline; margin: 6px 0;
               font-size: 13px; color: var(--tinta); }
.unir .opcao .trecho { display: inline; }
.unir .pagina { margin: 10px 0 0; max-width: 78ch; }
.unir .sugerida {
  font-size: 11px; padding: 1px 6px; margin-left: 6px;
  background: var(--fundo); border: 1px solid var(--linha); color: var(--tinta-fraca);
}

/* --- reordenar as colunas antes de unir ---------------------------------- */
.ordenar { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; flex-wrap: wrap; }
.ordenar button {
  background: var(--papel); color: var(--acento); border: 1px solid var(--linha);
  padding: 6px 12px;
}
.ordenar button:hover { background: var(--fundo); }

th.mover, td.mover { width: 54px; white-space: nowrap; padding-right: 0; }
td.mover button {
  background: var(--papel); color: var(--tinta-fraca); border: 1px solid var(--linha);
  padding: 1px 6px; font-size: 13px; line-height: 1.4; margin: 0 1px;
}
td.mover button:hover { color: var(--acento); border-color: var(--acento); }

.unido {
  font-size: 11px; padding: 1px 6px; margin-left: 6px;
  background: var(--fundo); border: 1px solid var(--linha); color: var(--tinta-fraca);
}

/* --- a instancia de teste ------------------------------------------------ */
/* Listra no topo e borda na janela inteira: as duas telas ficam abertas lado a
   lado, e confundir qual e qual na hora de apagar alguma coisa sai caro. */
.fita-teste {
  margin: 0; padding: 5px 20px; text-align: center;
  background: var(--divergente); color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: .05em;
}
body.teste { box-shadow: inset 0 0 0 3px var(--divergente); min-height: 100vh; }

/* --- o que ja foi decidido antes, e o que quase nunca se mexe ------------- */
/* Campo que so repete o que a pessoa ja disse no upload vira texto: perguntar
   duas vezes gasta tempo e abre a porta para as duas respostas discordarem. */
.fixado {
  margin: 0; padding: 7px 9px; font-size: 14px;
  background: var(--fundo); border: 1px solid var(--linha);
}
details.avancado { margin-top: 10px; }
details.avancado > summary {
  cursor: pointer; font-size: 13px; color: var(--tinta-fraca);
  padding: 4px 0; width: max-content;
}
details.avancado > summary:hover { color: var(--acento); }
details.avancado .dentro {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start;
  background: var(--papel); border: 1px solid var(--linha);
  padding: 12px 14px; margin-top: 6px;
}
details.avancado .pagina { flex: 1 1 320px; margin: 0; }

/* --- prévia da tabela dentro do painel ------------------------------------
   Clicar no nome abre a tabela inteira na linha de baixo. É o que responde
   'estas duas viram um arquivo só?' sem sair da lista. */

button.abrir-previa {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  gap: 6px;
  align-items: baseline;
}
button.abrir-previa:hover { color: var(--acento); text-decoration: underline; }
button.abrir-previa:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* A seta é o único enfeite, e ela carrega informação: diz o que abre e o que
   já está aberto. Sem ela, nome clicável não parece clicável. */
.seta { color: var(--tinta-fraca); flex: 0 0 auto; }
.seta::before { content: "\25B8"; }                     /* ▸ */
button.abrir-previa[aria-expanded="true"] .seta::before { content: "\25BE"; }  /* ▾ */

tr.linha-previa > td { padding: 0; background: var(--fundo); }

.previa { padding: 10px 14px 14px; }
.previa-cabeca { margin: 0 0 8px; white-space: normal; }

/* Tabela larga rola dentro da própria caixa. A página nunca rola de lado: com
   scroll horizontal no corpo, a coluna de faixas some e a comparação acaba. */
.previa-rolagem { overflow-x: auto; }

.previa-tabela { background: var(--papel); border: 1px solid var(--linha); width: auto; }
.previa-tabela th, .previa-tabela td { padding: 4px 10px; font-size: 12px; }
.previa-tabela thead th { text-align: left; font-weight: 600; white-space: nowrap; }
.previa-tabela thead tr:first-child th { border-bottom: none; }
.previa-tabela th.faixa {
  text-align: left;
  font-weight: 400;
  color: var(--tinta-fraca);
  white-space: nowrap;
  position: sticky;
  left: 0;
  background: var(--papel);
}
.previa-tabela th.sem_evidencia { color: var(--sem-evidencia); }
.previa-tabela td.manual { color: var(--divergente); }

/* A escolha do que extrair: caixas empilhadas, nao um select. Sao coisas que se
   somam - o mesmo guia pode render valores e textos. */
.alvos { display: flex; flex-direction: column; gap: 4px; }
.alvo { display: flex; align-items: center; gap: 6px; font-size: 13px;
        color: var(--tinta); margin: 0; }
.alvo input { margin: 0; }
.alvo input:disabled + span, .alvo:has(input:disabled) { color: var(--tinta-fraca); }

/* --- conferência dos textos ------------------------------------------------
   O texto é longo; a tabela de valores é densa. São telas de forma diferente
   pela mesma razão: cada uma imita o que está no guia. */

.texto-bloco { background: var(--papel); border: 1px solid var(--linha);
               margin: 0 0 12px; width: 100%; table-layout: fixed; }
.texto-bloco td { vertical-align: top; padding: 6px 8px; }

.cel-texto textarea {
  width: 100%; border: 1px solid transparent; background: transparent;
  font: inherit; font-size: 13px; color: var(--tinta); resize: vertical;
  padding: 2px 4px;
}
.cel-texto textarea:hover  { border-color: var(--linha); }
.cel-texto textarea:focus  { border-color: var(--acento); background: var(--papel);
                             outline: none; }
.cel-texto .marca { display: block; margin-top: 2px; font-size: 11px;
                    white-space: normal; }

/* Cor só onde significa estado, e o estado aqui é um só: dá para provar que
   este texto está no guia? */
.cel-texto.nao_conferida       { background: #fdf2f1; }
.cel-texto.nao_conferida .marca{ color: var(--sem-evidencia); font-weight: 600; }
.cel-texto.ordem_incerta       { background: #fdf7ee; }
.cel-texto.ordem_incerta .marca{ color: var(--divergente); }
.cel-texto.sem_camada_de_texto { background: #fdf2f1; }
.cel-texto.manual .marca       { color: var(--divergente); }

/* A oferta de arrumar a lista, depois que o arquivo saiu. Discreta de
   propósito: é sugestão, não o próximo passo obrigatório. */
form.arrumar { margin-top: 18px; align-items: center; }
form.arrumar .titulo { font-size: 14px; font-weight: 600; }
form.arrumar button { background: var(--papel); color: var(--tinta);
                      border: 1px solid var(--linha); }
form.arrumar button:hover { border-color: var(--acento); color: var(--acento); }

/* Linha que a condensação tirou do arquivo. Fica apagada, e não escondida: o
   analista precisa ver o que saiu para poder discordar — e discordar é um
   clique na caixa. Esconder seria a mesma coisa que apagar, só que pior,
   porque pareceria que a linha nunca existiu. */
tr.fora td            { opacity: .5; }
tr.fora td.marcar     { opacity: 1; }

/* A prévia do que a regra acrescenta à Observação. Larga demais, ela empurrava
   as colunas de plano para fora da tela — e são elas que o analista precisa
   ver para conferir o atendimento de cada plano. Quebra em vez de esticar. */
.previa-tabela td .acrescimo {
  display: block;
  max-width: 18ch;      /* a largura do proprio campo de Observacao */
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.2;
  margin-top: 2px;
}

/* A tela de rede tem colunas demais para caber em 1400px: sao cinco fixas mais
   uma por plano, e o analista precisa **ver** o atendimento de cada plano para
   conferir. Aqui a largura da janela vale mais que a coluna de leitura
   confortavel, que e o que os 1400px protegem no resto do sistema. */
body.largura-cheia main { max-width: none; }

/* Acoes de linha na conferencia de textos.

   Historia curta: primeiro foram dois glifos cinza sem moldura, e ele disse
   que "os botoes nao estao na tela" - discreto demais e invisivel. Viraram
   botoes com rotulo escrito, e ai a coluna encheu: com quatro controles por
   linha, numa tabela de 250, o rotulo escrito e uma parede.

   O acordo e este: icone quadrado com moldura visivel, dica ao passar o mouse,
   e **a legenda acima da tabela**, escrita, dizendo o que cada um faz. Icone
   sozinho ninguem acha; icone com legenda se aprende uma vez. */
.texto-bloco td.acoes-linha {
  width: 58px; vertical-align: top; padding: 5px 6px;
}
.botoes-linha {
  display: grid; grid-template-columns: repeat(2, 22px); gap: 3px;
  align-items: center; justify-items: center;
}
.botoes-linha .sem-botao { width: 22px; height: 20px; }
button.icone {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; width: 22px; height: 20px;
  background: var(--papel); border: 1px solid var(--linha); cursor: pointer;
  color: var(--tinta-fraca); font-size: 12px; line-height: 1;
  padding: 0; border-radius: 3px; font-family: inherit;
}
button.icone:hover {
  color: var(--papel); background: var(--acento); border-color: var(--acento);
}
button.icone.remover:hover {
  background: var(--sem-evidencia); border-color: var(--sem-evidencia);
}
label.marca-linha {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 20px; cursor: pointer;
  border: 1px solid transparent; border-radius: 3px;
}
label.marca-linha:hover { border-color: var(--linha); background: var(--papel); }
label.marca-linha input { margin: 0; }

/* A legenda dos icones. Fica em linha, com o proprio icone ao lado do que ele
   faz, para nao virar um paragrafo que ninguem le. */
.legenda-acoes { display: flex; flex-wrap: wrap; gap: 4px 14px;
                 align-items: center; }
.legenda-acoes .verbete { display: inline-flex; align-items: center; gap: 5px; }
.icone-exemplo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 18px; border: 1px solid var(--linha); border-radius: 3px;
  background: var(--papel); font-size: 11px; color: var(--tinta-fraca);
}

/* Os dois de lote ficam na cabeca do quadro, ao alcance de quem esta olhando
   aquele quadro - e nao no rodape da tela, a vinte rolagens de distancia. */
.juntar-varias { display: flex; gap: 6px; margin: 0 0 4px 8px; flex-wrap: wrap; }
.juntar-varias button.icone { width: auto; height: auto; padding: 3px 7px;
                              font-size: 11px; }

/* Linha inteiramente vazia: existe no arquivo e quase nao se ve na tela. A
   marca e o que faz alguem reparar que ela esta la - e a decisao de tirar ou
   deixar e do analista, porque linha vazia as vezes separa paragrafo. */
tr.linha-vazia > td { background: #fdf6ec; }
tr.linha-vazia td.acoes-linha button.remover { color: var(--divergente);
                                               border-color: var(--divergente); }

/* Cabeca do bloco na conferencia de textos: o titulo que o guia deu ao quadro,
   e para onde ele vai na plataforma. Sem o titulo, "bloco 7 da pagina 12" nao
   diz a ninguem qual quadro e aquele. */
.cabeca-bloco {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 14px 0 2px;
}
.titulo-bloco { font-weight: 600; font-size: 13px; color: var(--tinta); }
.titulo-bloco .pagina { font-weight: 400; }
.manda-para { font-size: 11px; color: var(--tinta-fraca); }
.manda-para select {
  font: inherit; font-size: 11px; padding: 2px 4px; max-width: 24ch;
  border: 1px solid var(--linha); border-radius: 3px; background: var(--papel);
}
/* Bloco sem destino e o unico que pede acao, entao e o unico com cor. Se
   todos tivessem, nenhum teria. */
.cabeca-bloco.bloco-sem-destino { border-left: 3px solid var(--sem-evidencia);
                                  padding-left: 8px; }
.cabeca-bloco.bloco-sem-destino .manda-para strong { color: var(--sem-evidencia); }

/* Juntar varias linhas de uma vez. Fica na cabeca do quadro, que e o alcance
   de quem esta olhando aquele quadro - e nao no rodape da tela, a vinte
   rolagens de distancia. */
.juntar-varias { display: flex; gap: 6px; margin: 0 0 4px 8px; flex-wrap: wrap; }
.juntar-varias button.icone { width: auto; }
label.marca-linha {
  display: flex; align-items: center; gap: 3px; font-size: 10px;
  color: var(--tinta-fraca); cursor: pointer; padding-left: 2px;
}
label.marca-linha input { margin: 0; }

/* O titulo do quadro. Editavel porque vai para o arquivo: e ele que separa
   duas tabelas de mesma forma dentro da mesma secao ('PLANOS COM' e 'PLANOS
   SEM COPARTICIPACAO'). Sem moldura ate o foco, para nao virar mais uma caixa
   competindo com o texto. */
input.campo-titulo {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--tinta);
  border: 1px solid transparent; background: transparent; border-radius: 3px;
  padding: 2px 4px; width: 46ch; max-width: 60vw;
}
input.campo-titulo:hover { border-color: var(--linha); }
input.campo-titulo:focus { border-color: var(--acento); background: var(--papel);
                           outline: none; }
input.campo-titulo::placeholder { font-weight: 400; color: var(--tinta-fraca); }

/* Copiar para a plataforma.
   Era uma fila de botoes lado a lado, e ele nao conseguia dizer qual copiar
   primeiro: dois quadros do guia da Ampla tem o mesmo titulo, e a fila nao
   mostrava pagina nem posicao. Virou **roteiro**: lista vertical, numerada,
   com a pagina - o olho desce a lista e sabe onde parou. */
.copiar-plataforma .secao-copia { margin: 10px 0 0; }
.copiar-plataforma .nome-secao {
  font-size: 12px; font-weight: 600; color: var(--tinta-fraca);
  margin: 0 0 4px; padding-top: 8px; border-top: 1px solid var(--linha);
  text-transform: none; letter-spacing: 0;
}
.copiar-plataforma ol.roteiro { list-style: none; margin: 0; padding: 0; }
.copiar-plataforma ol.roteiro li { margin: 0 0 3px; }
.copiar-plataforma button.copiar {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  text-align: left; font: inherit; font-size: 12px; cursor: pointer;
  padding: 4px 8px; border-radius: 4px;
  background: var(--papel); border: 1px solid var(--linha); color: var(--tinta);
}
.copiar-plataforma button.copiar:hover { border-color: var(--acento); }
.copiar-plataforma .ordem {
  flex: none; width: 2.2ch; text-align: right; font-weight: 600;
  color: var(--tinta-fraca);
}
.copiar-plataforma .pag {
  flex: none; width: 8ch; font-size: 11px; color: var(--tinta-fraca);
}
.copiar-plataforma .titulo { flex: 1; }
/* A marca de copiado so aparece depois do clique, e **fica**: e ela que
   responde "onde eu parei?" num roteiro de 40 quadros. */
.copiar-plataforma .marca-copiado { display: none; flex: none; font-size: 11px; }
.copiar-plataforma button.copiado {
  border-color: var(--conferido); background: #f2f9f5;
}
.copiar-plataforma button.copiado .marca-copiado {
  display: inline; color: var(--conferido); font-weight: 600;
}
.copiar-plataforma button.falhou {
  border-color: var(--sem-evidencia); background: #fdf3f2;
}
#recado-copia { margin-top: 8px; }

/* O titulo do quadro. Editavel porque vai para o arquivo: e ele que separa
   duas tabelas de mesma forma dentro da mesma secao ('PLANOS COM' e 'PLANOS
   SEM COPARTICIPACAO'). Sem moldura ate o foco, para nao virar mais uma caixa
   competindo com o texto. */
input.campo-titulo {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--tinta);
  border: 1px solid transparent; background: transparent; border-radius: 3px;
  padding: 2px 4px; width: 46ch; max-width: 60vw;
}
input.campo-titulo:hover { border-color: var(--linha); }
input.campo-titulo:focus { border-color: var(--acento); background: var(--papel);
                           outline: none; }
input.campo-titulo::placeholder { font-weight: 400; color: var(--tinta-fraca); }

/* Copiar para a plataforma. Os botoes sao a acao principal da caixa, entao
   aqui eles tem rotulo escrito - ao contrario dos icones de linha, que se
   repetem 250 vezes e por isso encolheram. */
.copiar-plataforma .secao-copia {
  display: flex; align-items: baseline; gap: 10px; margin: 6px 0;
  padding-top: 6px; border-top: 1px solid var(--linha);
}
.copiar-plataforma .nome-secao {
  font-size: 11px; font-weight: 600; color: var(--tinta-fraca);
  width: 22ch; flex: none; text-transform: none;
}
.copiar-plataforma .botoes-copiar {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0;
}
.copiar-plataforma button.copiar.copiado {
  background: var(--conferido); border-color: var(--conferido);
  color: var(--papel);
}
.copiar-plataforma button.copiar {
  width: auto; height: auto; padding: 5px 10px; font-size: 12px;
  border-color: var(--acento); color: var(--acento);
}
.copiar-plataforma button.copiar:hover {
  background: var(--acento); color: var(--papel);
}
#recado-copia { margin-top: 6px; }

/* --- tela de entrada -------------------------------------------------------
   A única tela que alguém de fora alcança. Duas colunas em tela larga (marca e
   formulário à esquerda, o que o sistema faz à direita) e uma coluna no
   celular. Sem cartão flutuante nem gradiente: o resto do sistema é papel
   sobre fundo claro, e a porta de entrada tem de parecer a mesma casa. */
.portao {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  grid-template-areas: "marca recursos" "forma recursos";
  gap: 20px 40px;
  align-items: start;
  max-width: 860px;
  margin: 32px auto;
}
.portao-marca { grid-area: marca; }
.portao-marca img { height: 44px; width: auto; display: block; margin-bottom: 14px; }
.portao-marca h1 { margin: 0 0 8px; font-size: 20px; }
.portao-linha { margin: 0; color: #5b6a72; line-height: 1.5; }

.portao-forma {
  grid-area: forma;
  background: var(--papel);
  border: 1px solid var(--linha);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.portao-forma input { width: 100%; box-sizing: border-box; }
.portao-forma label { display: block; margin-bottom: 4px; }
.portao-forma button { width: 100%; }

.portao-recursos {
  grid-area: recursos;
  margin: 0;
  padding: 0 0 0 18px;
  line-height: 1.55;
  color: #3d4c55;
}
.portao-recursos li { margin-bottom: 10px; }
.portao-recursos li::marker { color: var(--acento); }
.portao-recursos strong { color: var(--tinta); }

@media (max-width: 720px) {
  .portao {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "marca" "forma" "recursos";
    margin: 20px auto;
  }
}