/* ferramentas.css — camada de estilo das micro-ferramentas e das páginas novas.

   Este arquivo NÃO redefine nada de style.css. Ele só acrescenta componentes,
   sempre reaproveitando as variáveis que já existem (--marca, --papel, --tinta,
   --r, --s2 e companhia). Se um dia a paleta mudar lá, tudo aqui acompanha.

   Carregue sempre DEPOIS de style.css. */

/* ---------------------------------------------------------------
   Trilha de navegação (breadcrumbs)
   Aparece no resultado do Google e ajuda o visitante a se localizar.
   O marcador BreadcrumbList em JSON-LD vai no HTML de cada página.
   --------------------------------------------------------------- */
.trilha{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  font-size:13px; color:var(--tinta3);
  margin:0 0 22px; padding:0; list-style:none;
}
.trilha li{display:flex; align-items:center; gap:6px}
.trilha li+li::before{
  content:""; width:4px; height:4px; border-radius:50%;
  background:var(--linha2); flex:none;
}
.trilha a{color:var(--tinta2); text-decoration:none; border-bottom:1px solid transparent}
.trilha a:hover{color:var(--marca); border-bottom-color:var(--linha2)}
.trilha [aria-current]{color:var(--tinta3)}

/* ---------------------------------------------------------------
   Identidade por ferramenta

   Cada ferramenta ganha um tom próprio, para a pessoa reconhecer onde
   está sem precisar ler o título. A tentação seria usar cores fortes como
   fazem os utilitários de PDF, mas este site tem paleta editorial sóbria
   e cor saturada em área grande barateia o conjunto.

   Então os tons são abafados, dois deles já existiam no projeto, e a cor
   aparece só em detalhe: a régua fina no topo do cartão e o ícone. O resto
   da página segue no bordô da marca.
   --------------------------------------------------------------- */
:root{ --acento:var(--marca); }
body.f-acentos     { --acento:#B45309; }
body.f-sincronizar { --acento:#1E5F8C; }
body.f-conversor   { --acento:#0E9F6E; }
body.f-texto       { --acento:#6D4C7D; }
body.f-verificar   { --acento:#0F766E; }
body.f-textosrt    { --acento:#9A5B2E; }

.ferr{ border-top:3px solid var(--acento); }
.solta:hover{ border-color:var(--acento); }
.solta.sobre{ border-color:var(--acento); }

.ico.c-acentos     { background:rgba(180,83,9,.1);   color:#B45309; }
.ico.c-sincronizar { background:rgba(30,95,140,.1);  color:#1E5F8C; }
.ico.c-conversor   { background:rgba(14,159,110,.1); color:#0E9F6E; }
.ico.c-texto       { background:rgba(109,76,125,.1); color:#6D4C7D; }
.ico.c-verificar   { background:rgba(15,118,110,.1); color:#0F766E; }

/* ---------------------------------------------------------------
   Cabeçalho de página de ferramenta
   --------------------------------------------------------------- */
.ferr-topo{max-width:760px; margin:0 0 28px}
.ferr-topo h1{
  font-size:clamp(28px,4.4vw,40px); line-height:1.14; letter-spacing:-.022em;
  margin:0 0 14px; color:var(--tinta);
}
.ferr-topo .resumo{font-size:17px; line-height:1.62; color:var(--tinta2); margin:0}

/* Selo de privacidade. Repetido de propósito em toda ferramenta: é o
   argumento que nos diferencia e o visitante precisa vê-lo antes de
   decidir soltar um arquivo aqui. */
.selo-local{
  display:inline-flex; align-items:center; gap:9px;
  margin:18px 0 0; padding:8px 14px 8px 11px;
  background:rgba(14,159,110,.07);
  border:1px solid rgba(14,159,110,.22);
  border-radius:100px;
  font-size:13.5px; font-weight:500; color:#0B7C56;
}
.selo-local svg{width:15px; height:15px; flex:none}

/* ---------------------------------------------------------------
   Caixa da ferramenta
   --------------------------------------------------------------- */
.ferr{
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:var(--r);
  box-shadow:var(--s2);
  overflow:hidden;
  margin:0 0 44px;
}
.ferr-corpo{padding:clamp(18px,3.2vw,28px)}

/* Área de soltar arquivo. Focável por teclado: a caixa inteira recebe foco
   para quem navega sem mouse. */
.solta{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; text-align:center;
  min-height:186px; padding:30px 22px;
  background:var(--papel);
  border:1.5px dashed var(--linha2);
  border-radius:var(--r2);
  cursor:pointer;
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
}
.solta:hover{border-color:var(--marca); background:var(--papel2)}
.solta:focus-within{outline:2px solid var(--marca); outline-offset:3px}
.solta.sobre{
  border-color:var(--marca); background:rgba(117,20,80,.045);
  border-style:solid; transform:scale(1.004);
}
.solta input[type=file]{
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  inset:0;
  width:100%; height:100%;
  opacity:0; cursor:pointer;
}
.solta-icone{width:42px; height:42px; color:var(--marca); opacity:.85; pointer-events:none}
.solta-tit{font-size:16px; font-weight:600; color:var(--tinta); pointer-events:none}
.solta-sub{
  font-size:13.5px; color:var(--tinta3); pointer-events:none;
  max-width:36ch; line-height:1.5;
}
.solta-sub code{
  font-family:var(--m); font-size:12.5px;
  background:var(--papel2); padding:1px 5px; border-radius:5px;
}

/* ---------------------------------------------------------------
   Área de digitação, para as ferramentas cuja entrada é texto e não
   arquivo. Aceita também arquivo solto em cima dela.
   --------------------------------------------------------------- */
.escrita{
  width:100%; min-height:210px; resize:vertical;
  padding:16px 17px;
  font-family:var(--f); font-size:15px; line-height:1.62; color:var(--tinta);
  background:var(--papel);
  border:1.5px solid var(--linha2); border-radius:var(--r2);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.escrita::placeholder{color:var(--tinta3)}
.escrita:focus{
  outline:none; background:var(--branco);
  border-color:var(--acento);
  box-shadow:0 0 0 3px rgba(117,20,80,.09);
}
.escrita-rodape{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px; margin:9px 2px 0;
  font-size:12.5px; color:var(--tinta3);
}
.escrita-rodape .contador{font-family:var(--m); font-size:12px}

/* Arquivo carregado */
.arquivo-atual{
  display:none; align-items:center; gap:11px; flex-wrap:wrap;
  padding:13px 15px; margin:0 0 18px;
  background:var(--papel); border:1px solid var(--linha);
  border-radius:var(--r2); font-size:14px;
}
.arquivo-atual.visivel{display:flex}
.arquivo-atual svg{width:17px; height:17px; color:var(--marca); flex:none}
.arquivo-atual b{font-weight:600; color:var(--tinta); word-break:break-all}
.arquivo-atual .peso{color:var(--tinta3); font-size:13px; font-family:var(--m)}
.arquivo-atual button{
  margin-left:auto; background:none; border:none; cursor:pointer;
  color:var(--tinta3); font-size:13px; font-family:var(--f);
  padding:4px 8px; border-radius:6px; transition:.15s;
}
.arquivo-atual button:hover{color:var(--marca); background:var(--papel2)}

/* ---------------------------------------------------------------
   Controles
   --------------------------------------------------------------- */
/* O padrão minmax(min(X,100%),1fr) garante que a trilha nunca fique mais
   larga que o container, em nenhuma largura de tela. Sem o min(), uma tela
   estreita demais faria a trilha manter os X pixels e estourar para fora,
   criando rolagem horizontal. A primeira declaração é o caminho antigo,
   para navegador que não entenda min(). */
.ctrl{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));
  margin:22px 0 0;
}
.ctrl-campo{display:flex; flex-direction:column; gap:7px}
.ctrl-campo>span{
  font-size:13px; font-weight:600; color:var(--tinta);
  display:flex; align-items:baseline; gap:7px;
}
.ctrl-campo>span em{font-style:normal; font-weight:400; color:var(--tinta3); font-size:12px}
.ctrl-campo input[type=number],
.ctrl-campo input[type=text],
.ctrl-campo select{
  width:100%; padding:10px 12px;
  font-family:var(--f); font-size:14.5px; color:var(--tinta);
  background:var(--branco);
  border:1px solid var(--linha2); border-radius:var(--r3);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ctrl-campo input[type=number]{font-family:var(--m)}
.ctrl-campo input:focus, .ctrl-campo select:focus{
  outline:none; border-color:var(--marca);
  box-shadow:0 0 0 3px rgba(117,20,80,.1);
}
.ctrl-campo .apoio{font-size:12px; color:var(--tinta3); line-height:1.45}

/* Opções em pílula (radio acessível).

   O estilo mora no <span> e não no <label> de propósito. A forma natural
   seria .opcoes label:has(input:checked), mas :has() não existe em
   navegador Android antigo, e quando ele falha a pessoa deixa de enxergar
   qual opção está selecionada, o que quebra a ferramenta de verdade em vez
   de só deixá-la feia. O seletor de irmão adjacente abaixo funciona em
   qualquer navegador que exista. */
.opcoes{display:flex; flex-wrap:wrap; gap:8px}
.opcoes label{position:relative; display:inline-flex; cursor:pointer}
.opcoes input{position:absolute; opacity:0; width:0; height:0}
.opcoes label>span{
  display:inline-flex; align-items:center;
  min-height:40px; padding:8px 15px; border-radius:100px;
  background:var(--papel); border:1px solid var(--linha2);
  font-size:13.5px; font-weight:500; color:var(--tinta2);
  transition:background .15s ease, border-color .15s ease, color .15s ease;
  user-select:none;
}
.opcoes label:hover>span{border-color:var(--tinta3); color:var(--tinta)}
.opcoes input:focus-visible+span{outline:2px solid var(--marca); outline-offset:3px}
.opcoes input:checked+span{background:var(--marca); border-color:var(--marca); color:#fff}

.acoes{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin:24px 0 0; padding:20px 0 0; border-top:1px solid var(--linha);
}

/* ---------------------------------------------------------------
   Caixa de mensagem (aria-live no HTML)

   Chama-se .recado e não .estado de propósito: .estado já existe no
   style.css como componente da ferramenta principal, com um ::before
   que desenha uma bolinha e com regras responsivas que aplicam
   white-space:nowrap e max-width em vw. Reaproveitar o nome faria as
   mensagens aparecerem truncadas no celular.
   --------------------------------------------------------------- */
.recado{
  display:none; align-items:flex-start; gap:10px;
  margin:20px 0 0; padding:13px 15px;
  border-radius:var(--r2); font-size:14px; line-height:1.55;
}
.recado.visivel{display:flex}
.recado svg{width:17px; height:17px; flex:none; margin-top:1px}
.recado.ok{background:rgba(14,159,110,.07); border:1px solid rgba(14,159,110,.24); color:#0B7C56}
.recado.aviso{background:rgba(180,83,9,.07); border:1px solid rgba(180,83,9,.22); color:#8A4108}
.recado.erro{background:rgba(190,30,45,.06); border:1px solid rgba(190,30,45,.2); color:#A81B27}
.recado b{font-weight:600}

/* ---------------------------------------------------------------
   Resultado
   --------------------------------------------------------------- */
.resultado{display:none; margin:26px 0 0}
.resultado.visivel{display:block}
.resultado-tit{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px; margin:0 0 12px;
}
.resultado-tit h2{
  font-size:15px; font-weight:600; color:var(--tinta); margin:0; letter-spacing:-.01em;
}
.resultado-tit .contagem{font-size:13px; color:var(--tinta3); font-family:var(--m)}

.previa{
  max-height:330px; overflow:auto;
  background:var(--tinta); border-radius:var(--r2);
  padding:16px 18px;
  font-family:var(--m); font-size:12.5px; line-height:1.75;
  color:#D9D7DE; white-space:pre-wrap; word-break:break-word;
  -webkit-overflow-scrolling:touch;
}
.previa::-webkit-scrollbar{width:9px}
.previa::-webkit-scrollbar-thumb{background:#3A3A42; border-radius:6px}
.previa mark{background:rgba(14,159,110,.28); color:#7DF0C0; border-radius:3px; padding:0 2px}
.previa del{background:rgba(190,30,45,.2); color:#FF9BA4; text-decoration:none; border-radius:3px; padding:0 2px}

/* Antes e depois lado a lado */
.confronto{
  display:grid; gap:14px; margin:16px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  grid-template-columns:repeat(auto-fit,minmax(min(255px,100%),1fr));
}
.confronto>div{min-width:0}
.confronto h3{
  font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; color:var(--tinta3); margin:0 0 8px;
}
.confronto .previa{max-height:230px}

/* ---------------------------------------------------------------
   Lista de blocos de legenda
   --------------------------------------------------------------- */
.blocos{max-height:400px; overflow:auto; border:1px solid var(--linha); border-radius:var(--r2)}
.blocos table{width:100%; border-collapse:collapse; font-size:13.5px}
.blocos th{
  position:sticky; top:0; z-index:1;
  background:var(--papel2); text-align:left; font-weight:600;
  font-size:12px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--tinta2); padding:10px 13px; border-bottom:1px solid var(--linha);
}
.blocos td{padding:10px 13px; border-bottom:1px solid var(--linha); vertical-align:top}
.blocos tr:last-child td{border-bottom:none}
.blocos tr:hover td{background:var(--papel)}
.blocos .t{font-family:var(--m); font-size:12px; color:var(--tinta3); white-space:nowrap}
.blocos td[contenteditable]{outline:none; border-radius:5px}
.blocos td[contenteditable]:focus{
  background:rgba(117,20,80,.05); box-shadow:inset 0 0 0 1.5px var(--marca);
}

/* ---------------------------------------------------------------
   Figuras e diagramas (SVG embutido, sem requisição extra)
   --------------------------------------------------------------- */
.figura{margin:34px 0; padding:0}
.figura>div{
  background:var(--papel); border:1px solid var(--linha);
  border-radius:var(--r); padding:clamp(18px,3vw,30px); overflow:hidden;
}
.figura svg{display:block; width:100%; height:auto; max-width:100%}
.figura figcaption{
  margin:12px 2px 0; font-size:13.5px; line-height:1.6;
  color:var(--tinta3); text-align:left;
}
.figura figcaption b{color:var(--tinta2); font-weight:600}

/* ---------------------------------------------------------------
   Blocos de apoio no conteúdo
   --------------------------------------------------------------- */
.nota{
  margin:28px 0; padding:18px 20px;
  background:var(--papel); border-left:3px solid var(--marca);
  border-radius:0 var(--r2) var(--r2) 0;
  font-size:15px; line-height:1.66; color:var(--tinta2);
}
.nota b, .nota strong{color:var(--tinta); font-weight:600}
.nota p{margin:0}
.nota p+p{margin-top:11px}
.nota.atencao{border-left-color:var(--ambar); background:rgba(180,83,9,.045)}
.nota .rotulo{
  display:block; font-size:11.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--marca); margin:0 0 7px;
}
.nota.atencao .rotulo{color:var(--ambar)}

/* ---------------------------------------------------------------
   Grade de ferramentas (hub e blocos "veja também")
   --------------------------------------------------------------- */
.grade{
  display:grid; gap:14px; margin:26px 0 0;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  grid-template-columns:repeat(auto-fill,minmax(min(268px,100%),1fr));
}
.item{
  display:flex; flex-direction:column; gap:8px;
  padding:20px 21px; text-decoration:none;
  background:var(--branco); border:1px solid var(--linha);
  border-radius:var(--r2); box-shadow:var(--s1);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.item:hover{border-color:var(--linha2); box-shadow:var(--s2); transform:translateY(-2px)}
.item .ico{
  width:34px; height:34px; display:grid; place-items:center;
  border-radius:var(--r3); background:rgba(117,20,80,.08); color:var(--marca);
  margin:0 0 4px;
}
.item .ico svg{width:18px; height:18px}
.item h3{
  font-size:15.5px; font-weight:600; color:var(--tinta); margin:0;
  letter-spacing:-.012em; line-height:1.3;
}
.item p{font-size:13.5px; line-height:1.58; color:var(--tinta2); margin:0}
.item .marca-nova{
  align-self:flex-start; margin-top:2px;
  font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--verde); background:rgba(14,159,110,.1);
  padding:3px 8px; border-radius:100px;
}
.item.destaque{
  background:linear-gradient(160deg,var(--marca) 0%,var(--marca2) 100%);
  border-color:var(--marca2);
}
.item.destaque h3{color:#fff}
.item.destaque p{color:rgba(255,255,255,.82)}
.item.destaque .ico{background:rgba(255,255,255,.14); color:#fff}

/* ---------------------------------------------------------------
   Bloco de apoio

   Deliberadamente discreto. Pedido de doação agressivo em ferramenta
   gratuita afasta mais gente do que arrecada, e ainda contradiz a
   promessa de que não há pegadinha. Aqui ele é um convite lateral,
   sem sobreposição, sem cor de alerta e sem número sugerido.

   Nunca colocar no app.html: lá a experiência limpa é o produto.
   --------------------------------------------------------------- */
.apoio-caixa{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin:40px 0 0; padding:20px 22px;
  background:var(--papel);
  border:1px dashed var(--linha2);
  border-radius:var(--r2);
}
.apoio-caixa .apoio-icone{
  width:36px; height:36px; flex:none; display:grid; place-items:center;
  border-radius:50%; background:rgba(117,20,80,.07); color:var(--marca);
}
.apoio-caixa .apoio-icone svg{width:18px; height:18px}
.apoio-caixa .apoio-txt{flex:1 1 240px; min-width:0}
.apoio-caixa p{margin:0; font-size:14px; line-height:1.55; color:var(--tinta2)}
.apoio-caixa p b{color:var(--tinta); font-weight:600}
.apoio-caixa p + p{margin-top:4px; font-size:12.5px; color:var(--tinta3)}
.apoio-caixa .apoio-acoes{display:flex; gap:8px; flex-wrap:wrap}

@media (max-width:640px){
  .apoio-caixa{flex-direction:column; align-items:flex-start}
  .apoio-caixa .apoio-acoes{width:100%}
  .apoio-caixa .apoio-acoes .btn{flex:1 1 auto; justify-content:center}
}

/* ---------------------------------------------------------------
   Assinatura de autoria e conteúdo relacionado
   --------------------------------------------------------------- */
.assinatura{
  display:flex; align-items:center; gap:14px;
  margin:44px 0 0; padding:18px 20px;
  background:var(--papel); border:1px solid var(--linha); border-radius:var(--r2);
}
.assinatura .retrato{
  width:44px; height:44px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(160deg,var(--marca),var(--marca2));
  color:#fff; font-weight:700; font-size:17px; letter-spacing:-.02em;
}
.assinatura div{min-width:0}
.assinatura p{margin:0; font-size:13.5px; line-height:1.55; color:var(--tinta2)}
.assinatura p:first-child{font-size:14.5px; font-weight:600; color:var(--tinta)}
.assinatura a{color:var(--marca); text-decoration:none; border-bottom:1px solid rgba(117,20,80,.28)}
.assinatura a:hover{border-bottom-color:var(--marca)}

.mais{margin:44px 0 0; padding:28px 0 0; border-top:1px solid var(--linha)}
.mais h2{
  font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--tinta3); margin:0 0 16px;
}

/* ---------------------------------------------------------------
   Tabela comparativa
   --------------------------------------------------------------- */
.rolagem{overflow-x:auto; margin:28px 0; -webkit-overflow-scrolling:touch}
.rolagem table{margin:0; min-width:520px}
.sim{color:var(--verde); font-weight:600}
.nao{color:#A81B27; font-weight:600}
.talvez{color:var(--ambar); font-weight:600}

/* ---------------------------------------------------------------
   Ajustes finos
   --------------------------------------------------------------- */
.artigo .ferr{margin-left:0; margin-right:0}
.so-leitor{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------------------------------------------------------------
   Passagem de arquivo entre ferramentas

   A faixa que aparece quando a pessoa chega vinda de outra ferramenta.
   Fica acima da área de soltar arquivo, com destaque suficiente para ser
   notada e discreta o bastante para não parecer anúncio.
   --------------------------------------------------------------- */
.passagem{
  display:flex; align-items:center; gap:13px; flex-wrap:wrap;
  margin:0 0 18px; padding:15px 17px;
  background:linear-gradient(180deg, rgba(117,20,80,.055), rgba(117,20,80,.03));
  border:1px solid rgba(117,20,80,.2);
  border-radius:var(--r2);
}
.passagem>svg{width:19px; height:19px; color:var(--marca); flex:none}
.passagem>div{flex:1 1 200px; min-width:0}
.passagem p{margin:0; font-size:14px; line-height:1.5; color:var(--tinta)}
.passagem p b{font-weight:600; word-break:break-all}
.passagem p.fino{font-size:12.5px; color:var(--tinta3); margin-top:3px}
.passagem-acoes{display:flex; gap:8px; flex-wrap:wrap}

/* ---------------------------------------------------------------
   Continuar em outra ferramenta

   Aparece depois do processamento. É o que impede a ferramenta de ser um
   beco sem saída: a pessoa acabou de resolver um problema e quase sempre
   tem o próximo logo atrás.
   --------------------------------------------------------------- */
.continua{display:none; margin:26px 0 0; padding:22px 0 0; border-top:1px dashed var(--linha2)}
.continua.visivel{display:block}
.continua-tit{
  margin:0 0 13px; font-size:12.5px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--tinta3);
}
.continua-lista{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(178px,1fr));
  grid-template-columns:repeat(auto-fill,minmax(min(178px,100%),1fr));
}
.continua-item{
  display:flex; flex-direction:column; gap:3px; text-align:left;
  padding:13px 15px; cursor:pointer;
  background:var(--branco); border:1px solid var(--linha);
  border-radius:var(--r3); font-family:var(--f);
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
}
.continua-item:hover{
  border-color:var(--marca); background:rgba(117,20,80,.035);
  transform:translateY(-1px);
}
.continua-item:focus-visible{outline:2px solid var(--marca); outline-offset:2px}
.continua-item b{font-size:14px; font-weight:600; color:var(--tinta)}
.continua-item span{font-size:12.5px; color:var(--tinta3); line-height:1.45}

/* Link discreto para carregar o exemplo, dentro da área de soltar */
.linha-exemplo{
  display:flex; align-items:center; justify-content:center; gap:7px;
  margin:14px 0 0; font-size:13px; color:var(--tinta3);
}
.linha-exemplo button{
  background:none; border:none; padding:4px 2px; cursor:pointer;
  font-family:var(--f); font-size:13px; font-weight:500; color:var(--marca);
  border-bottom:1px solid rgba(117,20,80,.3);
}
.linha-exemplo button:hover{border-bottom-color:var(--marca)}
.linha-exemplo button:focus-visible{outline:2px solid var(--marca); outline-offset:3px; border-radius:3px}

/* ---------------------------------------------------------------
   Blindagem contra estouro horizontal

   Nome de arquivo comprido, URL sem espaço e trecho de legenda em caixa
   alta são as três coisas que mais empurram largura em tela estreita.
   Aqui garantimos que nada disso crie rolagem lateral.
   --------------------------------------------------------------- */
.ferr, .ferr-corpo, .ferr-topo, .resultado, .recado, .nota, .item, .assinatura{
  min-width:0;
  max-width:100%;
}
.recado, .nota, .item p, .assinatura p, .solta-sub, .ctrl-campo .apoio{
  overflow-wrap:break-word;
  word-wrap:break-word;
}
.figura svg, .ferr img, .ferr svg{max-width:100%; height:auto}
.previa{overflow-wrap:break-word}

/* ---------------------------------------------------------------
   Telas estreitas
   --------------------------------------------------------------- */
@media (max-width:640px){
  .ctrl{grid-template-columns:1fr}
  .confronto{grid-template-columns:1fr}
  .assinatura{flex-direction:column; align-items:flex-start}

  /* Botão de largura cheia é mais fácil de acertar com o polegar, e o
     seletor de formato precisa sair do canto para não ficar espremido. */
  .acoes{flex-direction:column; align-items:stretch}
  .acoes .btn{width:100%; justify-content:center}
  .acoes .ctrl-campo{max-width:100% !important; margin-left:0 !important}

  .ferr-corpo{padding:16px}
  .figura>div{padding:14px}
  .solta{min-height:158px; padding:24px 16px}
  .previa{font-size:12px; padding:13px 14px}
  .blocos th, .blocos td{padding:9px 10px}
  .trilha{font-size:12px}
  .resultado-tit{align-items:flex-start; flex-direction:column; gap:6px}
}

/* Alvos de toque: o mínimo confortável em tela sensível ao toque é
   próximo de 44 pixels. Em ponteiro grosso, garantimos isso. */
@media (pointer:coarse){
  .arquivo-atual button{min-height:40px; padding:8px 12px}
  .trilha a{padding:3px 0}
  .faq summary{min-height:44px; display:flex; align-items:center}
}

@media (prefers-reduced-motion:reduce){
  .solta, .item, .opcoes label>span{transition:none !important}
  .item:hover{transform:none}
  .solta.sobre{transform:none}
}

@media print{
  .ferr, .solta, .acoes, .trilha, .mais{display:none !important}
}