/* =====================================================================
   Image Editor — estilos próprios da unidade.
   Tokens (cores, tipografia, .tofy-bar, .tofy-btn, .tofy-tag, dark mode)
   vêm de https://www.tofy.com.br/shared/brand.css
   ===================================================================== */

/* Sotaque próprio da unidade: o azul TOFY continua na barra da holding,
   mas a ferramenta usa um acento teal para se distinguir das demais. */
:root{
  --tofy-accent:#0E7C86;
  --tofy-accent-rgb:14,124,134;
  --tofy-accent-tint:rgba(14,124,134,.08);
  --tofy-accent-tint-2:rgba(14,124,134,.12);
  --tofy-accent-line:rgba(14,124,134,.40);
}
:root[data-theme="dark"]{
  --tofy-accent:#4FD1D9;
  --tofy-accent-rgb:79,209,217;
  --tofy-accent-tint:rgba(79,209,217,.10);
  --tofy-accent-tint-2:rgba(79,209,217,.16);
  --tofy-accent-line:rgba(79,209,217,.45);
}

/* ---------- Acesso rápido ---------- */
.pular{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--tofy-ink);color:var(--tofy-paper);
  padding:12px 18px;border-radius:0 0 var(--tofy-radius-sm) 0;font-size:14px;
}
.pular:focus{left:0;color:var(--tofy-paper)}

/* ---------- Cabeçalho da unidade ---------- */
.topo{
  position:sticky;top:0;z-index:50;
  background:var(--tofy-header-bg,rgba(255,255,255,.82));
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--tofy-line);
}
.topo .tofy-container{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px 24px;min-height:62px;flex-wrap:wrap;
}
.marca{display:inline-flex;align-items:baseline;gap:9px;font-weight:600;letter-spacing:-.02em;font-size:16px}
.marca__sufixo{
  font-family:var(--tofy-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tofy-muted);
}
.topo nav{display:flex;align-items:center;gap:18px;font-size:14px;min-width:0;flex-wrap:wrap}
/* padding vertical garante alvo de toque confortável no celular */
.topo nav a{color:var(--tofy-text-2);transition:color .2s;padding:6px 0;display:inline-block}
.topo nav a:hover{color:var(--tofy-ink)}
.topo nav .tofy-btn{padding:9px 18px;font-size:14px}
@media (max-width:640px){
  .topo{position:static}
  .topo .tofy-container{padding-top:12px;padding-bottom:12px}
  .topo nav{gap:14px;font-size:13.5px}
}

/* ---------- Capa ---------- */
.capa{padding:64px 0 40px;position:relative;overflow:hidden}
.capa__malha{
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--tofy-grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--tofy-grid) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(90% 78% at 50% 0%,#000 10%,transparent 72%);
  mask-image:radial-gradient(90% 78% at 50% 0%,#000 10%,transparent 72%);
}
.capa .tofy-container{position:relative;text-align:center}
.capa h1{
  font-size:clamp(2.1rem,5.2vw,3.4rem);line-height:1.03;letter-spacing:-.04em;
  font-weight:600;margin:16px auto 0;max-width:20ch;text-wrap:balance;
}
.capa__lede{
  margin:20px auto 0;color:var(--tofy-ink-soft);font-size:1.08rem;
  max-width:60ch;line-height:1.6;
}
.selo{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--tofy-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tofy-accent);border:1px solid var(--tofy-accent-line);background:var(--tofy-accent-tint);
  padding:5px 11px;border-radius:999px;
}
.selo::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--tofy-accent)}

/* ---------- Busca de ferramentas ---------- */
.busca{margin:34px auto 0;position:relative;max-width:620px}
.busca input{
  width:100%;padding:17px 22px 17px 52px;border-radius:999px;
  border:1px solid var(--tofy-line-strong);background:var(--tofy-surface);
  color:var(--tofy-ink);font-family:inherit;font-size:16.5px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:border-color .2s,box-shadow .2s;
}
.busca input:focus{outline:none;border-color:var(--tofy-accent);box-shadow:0 0 0 3px var(--tofy-accent-tint-2)}
.busca__icone{
  position:absolute;left:21px;top:50%;transform:translateY(-50%);
  color:var(--tofy-muted);pointer-events:none;width:18px;height:18px;
}

/* ---------- Atalhos de categoria ---------- */
.atalhos{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  margin:26px auto 0;padding:0;list-style:none;
}
.atalhos a{
  display:inline-block;padding:7px 15px;border-radius:999px;
  border:1px solid var(--tofy-line-strong);background:var(--tofy-surface);
  font-size:13.5px;color:var(--tofy-text-2);
  transition:border-color .2s,color .2s,background .2s;
}
.atalhos a:hover{border-color:var(--tofy-accent);color:var(--tofy-ink);background:var(--tofy-accent-tint)}

/* ---------- Categorias e cartões de ferramenta ---------- */
.categoria{padding:44px 0 0;scroll-margin-top:80px}
.categoria[hidden]{display:none}
.categoria__cabeca{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.categoria h2{font-size:1.25rem;font-weight:600;letter-spacing:-.02em;margin:0}
.categoria__conta{font-family:var(--tofy-mono);font-size:11px;color:var(--tofy-faint);letter-spacing:.08em}
.categoria__desc{margin:0 0 18px;font-size:.92rem;color:var(--tofy-muted);max-width:56ch}

.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px}

.ferramenta{
  display:flex;flex-direction:column;gap:8px;padding:20px;
  border:1px solid var(--tofy-line);border-radius:var(--tofy-radius);
  background:var(--tofy-surface);position:relative;
  transition:border-color .2s,transform .2s var(--tofy-ease),box-shadow .25s var(--tofy-ease);
}
/* Par explícito de [hidden]: display:flex é regra de autor e venceria o
   [hidden]{display:none} da folha do navegador, deixando a busca sem efeito. */
.ferramenta[hidden]{display:none}
a.ferramenta:hover{border-color:var(--tofy-accent);transform:translateY(-2px);box-shadow:var(--tofy-shadow)}
.ferramenta__icone{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:var(--tofy-accent-tint);color:var(--tofy-accent);margin-bottom:2px;
}
.ferramenta__icone svg{width:20px;height:20px}
.ferramenta h3{margin:0;font-size:1rem;font-weight:600;letter-spacing:-.015em}
.ferramenta p{margin:0;font-size:.88rem;color:var(--tofy-muted);line-height:1.55}
.ferramenta__marcador{
  margin-top:4px;align-self:flex-start;
  font-family:var(--tofy-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tofy-faint);border:1px dashed var(--tofy-line-strong);
  padding:3px 9px;border-radius:999px;
}
.ferramenta--breve{background:var(--tofy-surface-2)}
.ferramenta--breve .ferramenta__icone{background:var(--tofy-surface);color:var(--tofy-muted)}

/* Estado vazio da busca */
.vazio{
  margin:40px 0 0;padding:40px 24px;text-align:center;
  border:1px dashed var(--tofy-line-strong);border-radius:var(--tofy-radius);
  color:var(--tofy-muted);
}
.vazio[hidden]{display:none}
.vazio strong{color:var(--tofy-ink);font-weight:600}

/* ---------- Como funciona ---------- */
.comofunciona{padding:72px 0 0}
.comofunciona__grade{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1px;background:var(--tofy-line);border:1px solid var(--tofy-line);
  border-radius:var(--tofy-radius);overflow:hidden;margin-top:20px;
}
.passo{background:var(--tofy-surface);padding:26px}
.passo__num{
  font-family:var(--tofy-mono);font-size:11px;letter-spacing:.16em;
  color:var(--tofy-accent);margin:0 0 10px;
}
.passo h3{margin:0 0 8px;font-size:1rem;font-weight:600;letter-spacing:-.015em}
.passo p{margin:0;font-size:.9rem;color:var(--tofy-muted);line-height:1.6}

/* ---------- Rodapé ---------- */
.rodape{
  margin-top:84px;border-top:1px solid var(--tofy-line);
  background:var(--tofy-surface);padding:40px 0 28px;
}
.rodape__grade{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap}
.rodape p{margin:0;font-size:.9rem;color:var(--tofy-muted);max-width:46ch;line-height:1.6}
.rodape__links{display:flex;gap:18px;flex-wrap:wrap;margin-top:24px;font-size:.9rem}
.rodape__links a{color:var(--tofy-text-2);padding:6px 0;display:inline-block}
.rodape__links a:hover{color:var(--tofy-accent)}
.rodape__mono{
  font-family:var(--tofy-mono);font-size:11px;letter-spacing:.06em;
  color:var(--tofy-faint);margin-top:24px;padding-top:18px;
  border-top:1px solid var(--tofy-line-soft);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}

/* =====================================================================
   Páginas de ferramenta
   ===================================================================== */

.trilha{
  font-family:var(--tofy-mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tofy-faint);
  padding:26px 0 0;display:flex;gap:8px;flex-wrap:wrap;align-items:center;
}
/* padding vertical garante alvo de toque confortável no celular */
.trilha a{color:var(--tofy-muted);padding:8px 0;display:inline-block}
.trilha a:hover{color:var(--tofy-accent)}

.ferr-capa{padding:14px 0 34px;text-align:center;position:relative;overflow:hidden}
.ferr-capa .tofy-container{position:relative}
.ferr-capa h1{
  font-size:clamp(1.9rem,4.4vw,2.8rem);line-height:1.06;letter-spacing:-.035em;
  font-weight:600;margin:14px auto 0;max-width:18ch;text-wrap:balance;
}
.ferr-capa__lede{margin:16px auto 0;color:var(--tofy-ink-soft);font-size:1.04rem;max-width:56ch;line-height:1.6}

/* ---------- Zona de envio ---------- */
.zona{
  margin:30px auto 0;max-width:760px;
  border:2px dashed var(--tofy-line-strong);border-radius:var(--tofy-radius);
  background:var(--tofy-surface);padding:44px 24px;text-align:center;
  transition:border-color .2s,background .2s;
}
.zona.is-sobre{border-color:var(--tofy-accent);background:var(--tofy-accent-tint)}
.zona__icone{
  width:52px;height:52px;margin:0 auto 16px;border-radius:14px;display:grid;place-items:center;
  background:var(--tofy-accent-tint);color:var(--tofy-accent);
}
.zona__icone svg{width:26px;height:26px}
.zona__dica{margin:14px 0 0;font-size:.88rem;color:var(--tofy-muted)}
.zona input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.zona .tofy-btn{font-size:15px;padding:13px 26px}

/* ---------- Lista de arquivos ---------- */
.arquivos{list-style:none;margin:22px auto 0;padding:0;max-width:760px;display:flex;flex-direction:column;gap:8px}
.arquivo{
  display:flex;align-items:center;gap:14px;padding:10px 12px;
  border:1px solid var(--tofy-line);border-radius:var(--tofy-radius-sm);
  background:var(--tofy-surface);text-align:left;
}
.arquivo__mini{
  width:44px;height:56px;flex:none;border-radius:6px;overflow:hidden;
  background:var(--tofy-surface-2);border:1px solid var(--tofy-line);
  display:grid;place-items:center;color:var(--tofy-faint);
}
.arquivo__mini img{width:100%;height:100%;object-fit:cover;display:block}
.arquivo__corpo{min-width:0;flex:1}
.arquivo__nome{
  margin:0;font-size:.92rem;font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.arquivo__meta{margin:3px 0 0;font-family:var(--tofy-mono);font-size:11px;color:var(--tofy-faint)}
.arquivo__acoes{display:flex;gap:4px;flex:none}
.arquivo__bt{
  width:34px;height:34px;display:grid;place-items:center;
  border:1px solid var(--tofy-line);border-radius:8px;background:transparent;
  color:var(--tofy-text-2);cursor:pointer;transition:border-color .2s,color .2s;
}
.arquivo__bt svg{width:16px;height:16px}
.arquivo__bt:hover:not(:disabled){border-color:var(--tofy-accent);color:var(--tofy-accent)}
.arquivo__bt:disabled{opacity:.3;cursor:default}
.arquivo__bt--sair:hover{border-color:#C0392B;color:#C0392B}

/* ---------- Opções ---------- */
.opcoes{
  margin:26px auto 0;max-width:760px;padding:22px;
  border:1px solid var(--tofy-line);border-radius:var(--tofy-radius);
  background:var(--tofy-surface-2);
}
.opcoes[hidden],.acoes[hidden],.resultado[hidden],.aviso[hidden]{display:none}
.opcoes__titulo{
  margin:0 0 16px;font-family:var(--tofy-mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tofy-muted);
}
.opcoes__grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.campo{display:flex;flex-direction:column;gap:7px}
.campo>span{font-size:.85rem;color:var(--tofy-text-2);font-weight:500}
.campo select{
  padding:10px 12px;border-radius:var(--tofy-radius-sm);
  border:1px solid var(--tofy-line-strong);background:var(--tofy-surface);
  color:var(--tofy-ink);font-family:inherit;font-size:.94rem;
}
.campo select:focus{outline:none;border-color:var(--tofy-accent);box-shadow:0 0 0 3px var(--tofy-accent-tint-2)}

/* Grupo de opcoes com titulo proprio: o fieldset zera a borda do
   navegador e a legend vira o mesmo rotulo mono das demais secoes. */
.opcoes__grupo{border:0;padding:0;margin:0 0 20px}
.opcoes__grupo legend{
  padding:0;margin:0 0 12px;font-family:var(--tofy-mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tofy-muted);
}
.opcoes__grade+.opcoes__grade{margin-top:18px}

/* Posicao na pagina: seis alvos que desenham um retangulo, para a escolha
   ser lida pelo formato e nao so pelo texto. */
.posicoes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.posicao{position:relative;display:block}
.posicao input{position:absolute;opacity:0;width:0;height:0}
.posicao span{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:52px;padding:8px 6px;cursor:pointer;
  border:1px solid var(--tofy-line-strong);border-radius:var(--tofy-radius-sm);
  background:var(--tofy-surface);color:var(--tofy-text-2);
  font-size:.8rem;line-height:1.25;
}
.posicao input:checked+span{
  border-color:var(--tofy-accent);background:var(--tofy-accent-tint);
  color:var(--tofy-accent);font-weight:600;
}
.posicao input:focus-visible+span{outline:none;box-shadow:0 0 0 3px var(--tofy-accent-tint-2)}
.posicao span:hover{border-color:var(--tofy-accent)}
.posicoes--dupla{grid-template-columns:repeat(2,1fr)}

/* Campo de arquivo dentro do painel de opcoes: o controle nativo nao
   aceita a mesma borda dos demais, entao so se acerta o espacamento. */
.campo input[type=file]{
  padding:9px 10px;border-radius:var(--tofy-radius-sm);
  border:1px dashed var(--tofy-line-strong);background:var(--tofy-surface);
  color:var(--tofy-text-2);font-family:inherit;font-size:.86rem;width:100%;
}
.campo input[type=file]::file-selector-button{
  margin-right:10px;padding:6px 12px;cursor:pointer;
  border:1px solid var(--tofy-line-strong);border-radius:999px;
  background:var(--tofy-surface-2);color:var(--tofy-ink);
  font-family:inherit;font-size:.84rem;
}
.opcoes__grade[hidden]{display:none}

/* Frase que descreve o resultado antes do clique. */
.opcoes__nota{
  margin:18px 0 0;padding-top:16px;border-top:1px solid var(--tofy-line);
  font-size:.88rem;color:var(--tofy-text-2);min-height:1.2em;
}
.opcoes__nota:empty{display:none}

/* ---------- Previa de texto ----------
   Caixa de leitura com rolagem propria: o texto extraido pode ser longo
   e nao pode empurrar a largura da pagina. */
.previa{margin:26px auto 0;max-width:760px}
.previa[hidden]{display:none}
.previa h2{margin:0 0 6px;font-size:1.05rem}
.previa__dica{margin:0 0 12px;font-size:.86rem;color:var(--tofy-text-2)}
.previa__caixa{
  margin:0;padding:18px;max-height:420px;overflow:auto;
  border:1px solid var(--tofy-line);border-radius:var(--tofy-radius);
  background:var(--tofy-surface-2);color:var(--tofy-ink);
  font-family:var(--tofy-mono);font-size:.82rem;line-height:1.65;
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.previa__caixa:focus-visible{outline:none;border-color:var(--tofy-accent);box-shadow:0 0 0 3px var(--tofy-accent-tint-2)}

/* ---------- Ação e resultado ---------- */
.acoes{margin:26px auto 0;max-width:760px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center}
.acoes .tofy-btn{font-size:15px;padding:14px 30px}
.acoes .tofy-btn[disabled]{opacity:.5;pointer-events:none}
.progresso{font-family:var(--tofy-mono);font-size:12px;color:var(--tofy-muted)}

.resultado{
  margin:26px auto 0;max-width:760px;padding:26px;text-align:center;
  border:1px solid var(--tofy-accent-line);border-radius:var(--tofy-radius);
  background:var(--tofy-accent-tint);
}
.resultado h2{margin:0 0 6px;font-size:1.15rem;font-weight:600;letter-spacing:-.02em}
.resultado p{margin:0 0 18px;font-size:.9rem;color:var(--tofy-ink-soft)}
.resultado__info{font-family:var(--tofy-mono);font-size:11px;color:var(--tofy-muted);margin-top:14px}
.resultado__acoes{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

.aviso{
  margin:18px auto 0;max-width:760px;padding:13px 16px;
  border:1px solid rgba(192,57,43,.35);background:rgba(192,57,43,.07);
  border-radius:var(--tofy-radius-sm);color:#A93226;font-size:.9rem;
}
:root[data-theme="dark"] .aviso,
:root:not([data-theme="light"]) .aviso{color:#F19181}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .aviso{color:#A93226}}

/* ---------- Privacidade e explicação ---------- */
.privacidade{
  margin:24px auto 0;max-width:760px;display:flex;gap:11px;align-items:flex-start;
  font-size:.86rem;color:var(--tofy-muted);line-height:1.6;
}
.privacidade svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--tofy-accent)}

.explica{padding:66px 0 0;max-width:760px;margin:0 auto}
.explica h2{font-size:1.2rem;font-weight:600;letter-spacing:-.02em;margin:0 0 14px}
.explica h3{font-size:1rem;font-weight:600;margin:24px 0 6px}
.explica p{margin:0;color:var(--tofy-ink-soft);font-size:.94rem;line-height:1.7}
/* Até aqui as páginas tinham um parágrafo por título, e `margin:0` bastava.
   Com prosa de verdade há parágrafos seguidos, e sem estas três linhas eles
   ficam colados num bloco só. O `+` só age onde o caso existe. */
.explica p + p{margin-top:13px}
.explica p + h2{margin-top:40px}
.explica p + h3{margin-top:26px}
.explica strong{color:var(--tofy-ink);font-weight:600}

/* ---------- Outras ferramentas ---------- */
.tambem{padding:66px 0 0}
.tambem h2{font-size:1.2rem;font-weight:600;letter-spacing:-.02em;margin:0 0 18px}

/* Ferramenta já em operação: o marcador deixa de ser tracejado. */
.ferramenta__marcador--ok{
  color:var(--tofy-accent);border-style:solid;border-color:var(--tofy-accent-line);
  background:var(--tofy-accent-tint);
}

/* Observações da conversão: o que ficou de fora precisa ser visível. */
.notas{
  list-style:none;margin:18px auto 0;padding:14px 18px;max-width:760px;
  border:1px solid var(--tofy-line);border-left:3px solid var(--tofy-accent);
  border-radius:var(--tofy-radius-sm);background:var(--tofy-surface-2);
  font-size:.88rem;color:var(--tofy-ink-soft);line-height:1.6;
}
.notas[hidden]{display:none}
.notas li+li{margin-top:7px}

/* ---------- Campos de texto e número nas opções ---------- */
.campo input[type=text],
.campo input[type=password],
.campo input[type=number]{
  padding:10px 12px;border-radius:var(--tofy-radius-sm);
  border:1px solid var(--tofy-line-strong);background:var(--tofy-surface);
  color:var(--tofy-ink);font-family:inherit;font-size:.94rem;width:100%;
}
.campo input:focus{outline:none;border-color:var(--tofy-accent);box-shadow:0 0 0 3px var(--tofy-accent-tint-2)}
.campo[hidden]{display:none}
.opcoes__conta{font-family:var(--tofy-mono);color:var(--tofy-faint);text-transform:none;letter-spacing:.04em}

/* ---------- Grade de páginas (organizar, converter em imagem) ---------- */
.paginas{
  list-style:none;margin:22px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:14px;
}
.pagina{
  position:relative;border:1px solid var(--tofy-line);border-radius:var(--tofy-radius-sm);
  background:var(--tofy-surface);padding:8px;display:flex;flex-direction:column;gap:8px;
  transition:border-color .2s,box-shadow .2s;
}
.pagina.is-fora{opacity:.4}
.pagina.is-fora .pagina__folha{filter:grayscale(1)}
.pagina__folha{
  position:relative;background:var(--tofy-surface-2);border:1px solid var(--tofy-line-soft);
  border-radius:4px;overflow:hidden;display:grid;place-items:center;min-height:120px;
}
.pagina__folha canvas,.pagina__folha img{
  max-width:100%;height:auto;display:block;
  transition:transform .25s var(--tofy-ease);
}
.pagina__num{
  font-family:var(--tofy-mono);font-size:10.5px;color:var(--tofy-faint);
  text-align:center;letter-spacing:.06em;
}
.pagina__acoes{display:flex;gap:4px;justify-content:center;flex-wrap:wrap}
.pagina__bt{
  width:30px;height:30px;display:grid;place-items:center;
  border:1px solid var(--tofy-line);border-radius:7px;background:transparent;
  color:var(--tofy-text-2);cursor:pointer;transition:border-color .2s,color .2s;
}
.pagina__bt svg{width:14px;height:14px}
.pagina__bt:hover:not(:disabled){border-color:var(--tofy-accent);color:var(--tofy-accent)}
.pagina__bt:disabled{opacity:.3;cursor:default}
.pagina__bt.is-ativo{border-color:var(--tofy-accent);color:var(--tofy-accent);background:var(--tofy-accent-tint)}

/* Barra de ações que valem para o documento inteiro */
.barra-paginas{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin:24px 0 0;padding:14px 16px;
  border:1px solid var(--tofy-line);border-radius:var(--tofy-radius-sm);
  background:var(--tofy-surface-2);
}
.barra-paginas[hidden]{display:none}
.barra-paginas__titulo{
  font-family:var(--tofy-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tofy-muted);margin:0 auto 0 0;
}
.barra-paginas .tofy-btn{font-size:13px;padding:8px 14px}
.pagina__bt--sair:hover:not(:disabled){border-color:#C0392B;color:#C0392B}
.pagina__vazia{width:100%;height:120px}

/* ---------- Editor de PDF ---------- */
.editor{margin:24px auto 0;max-width:920px}
.editor[hidden]{display:none}
.editor__barra{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  padding:12px 14px;margin-bottom:14px;
  border:1px solid var(--tofy-line);border-radius:var(--tofy-radius-sm);
  background:var(--tofy-surface-2);position:sticky;top:70px;z-index:20;
}
.editor__grupo{display:flex;gap:6px;align-items:center}
.editor__sep{width:1px;height:26px;background:var(--tofy-line);margin:0 4px}
.editor__bt{
  display:inline-flex;align-items:center;gap:7px;padding:8px 13px;
  border:1px solid var(--tofy-line);border-radius:8px;background:var(--tofy-surface);
  color:var(--tofy-text-2);font-family:inherit;font-size:13.5px;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s;
}
.editor__bt svg{width:15px;height:15px}
.editor__bt:hover{border-color:var(--tofy-accent);color:var(--tofy-accent)}
.editor__bt.is-ativo{
  border-color:var(--tofy-accent);color:var(--tofy-accent);background:var(--tofy-accent-tint);
}
.editor__bt:disabled{opacity:.4;cursor:default}
.editor__pag{font-family:var(--tofy-mono);font-size:12px;color:var(--tofy-muted);min-width:88px;text-align:center}
.editor__cor{
  width:34px;height:34px;padding:2px;border:1px solid var(--tofy-line);
  border-radius:8px;background:var(--tofy-surface);cursor:pointer;
}
.editor__num{
  width:62px;padding:8px;border:1px solid var(--tofy-line);border-radius:8px;
  background:var(--tofy-surface);color:var(--tofy-ink);font-family:inherit;font-size:13.5px;
}

.editor__palco{
  position:relative;margin:0 auto;width:fit-content;max-width:100%;
  box-shadow:var(--tofy-shadow);border:1px solid var(--tofy-line);background:#fff;
}
.editor__folha,.editor__rabisco,.editor__camada{display:block;max-width:100%}
.editor__rabisco,.editor__camada{position:absolute;inset:0}
.editor__rabisco{pointer-events:none}
.editor__camada{cursor:default}
.editor__camada[data-ferramenta="texto"]{cursor:text}
.editor__camada[data-ferramenta="traco"]{cursor:crosshair}

.item{position:absolute;transform:translate(-2px,-2px);cursor:move;touch-action:none}
.item.is-arrastando{opacity:.8}
.item__texto{
  outline:none;white-space:pre-wrap;line-height:1.25;padding:2px 3px;
  border:1px dashed transparent;min-width:24px;
}
.item.is-ativo .item__texto{border-color:var(--tofy-accent)}
.item--imagem img{width:100%;height:auto;display:block;border:1px dashed transparent}
.item--imagem.is-ativo img{border-color:var(--tofy-accent)}
.item__sair{
  position:absolute;top:-11px;right:-11px;width:22px;height:22px;
  border-radius:50%;border:1px solid var(--tofy-line-strong);
  background:var(--tofy-surface);color:var(--tofy-muted);
  font-size:15px;line-height:1;cursor:pointer;display:none;
  align-items:center;justify-content:center;padding:0;
}
.item.is-ativo .item__sair,.item:hover .item__sair{display:flex}
.item__sair:hover{border-color:#C0392B;color:#C0392B}

@media (max-width:640px){
  .editor__barra{position:static}
  .editor__bt{padding:8px 11px;font-size:13px}
}

/* Rótulo só para leitor de tela (o brand.css compartilhado não tem esta
   classe; fica aqui até que valha a pena promovê-la ao design system). */
.tofy-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- Escolha em três colunas com legenda ---------- */
.posicoes--tripla{grid-template-columns:repeat(3,1fr)}
.posicao span small{
  display:block;margin-top:3px;font-size:11.5px;line-height:1.35;
  color:var(--tofy-muted);font-weight:400;
}
.posicao input:checked+span small{color:var(--tofy-ink-soft)}
@media (max-width:520px){
  .posicoes--tripla{grid-template-columns:1fr}
}

/* ---------- Decisão página a página (remover em branco) ---------- */
.pagina__marca{
  width:100%;min-height:32px;padding:7px 10px;
  border:1px solid var(--tofy-line);border-radius:8px;background:transparent;
  color:var(--tofy-text-2);font-family:inherit;font-size:12.5px;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s;
}
.pagina__marca:hover{border-color:var(--tofy-accent);color:var(--tofy-accent)}
.pagina__marca:focus-visible{outline:none;box-shadow:0 0 0 3px var(--tofy-accent-tint-2)}
.pagina__marca.is-fora{border-color:#C0392B;color:#C0392B;background:rgba(192,57,43,.07)}

/* ---------- Medidas de recorte ---------- */
.medidas{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:14px}
.medidas[hidden]{display:none}
.recorte{
  margin:22px auto 0;max-width:420px;padding:14px;
  border:1px solid var(--tofy-line);border-radius:var(--tofy-radius-sm);
  background:var(--tofy-surface-2);
}
.recorte[hidden]{display:none}
.recorte__palco{position:relative;width:fit-content;margin:0 auto;line-height:0}
.recorte__palco canvas{display:block;max-width:100%;height:auto;border:1px solid var(--tofy-line-soft)}
.recorte__area{
  position:absolute;border:1.5px dashed var(--tofy-accent);
  background:var(--tofy-accent-tint-2);pointer-events:none;
}
.recorte__nota{
  margin:10px 0 0;text-align:center;font-family:var(--tofy-mono);
  font-size:11px;color:var(--tofy-faint);
}

/* Marcadores citados no texto de ajuda ({n}, {data}…) */
.opcoes__nota code{
  font-family:var(--tofy-mono);font-size:.86em;
  padding:1px 5px;border-radius:4px;background:var(--tofy-surface-2);
  border:1px solid var(--tofy-line-soft);color:var(--tofy-ink-soft);
}
.explica code{font-family:var(--tofy-mono);font-size:.88em;color:var(--tofy-ink)}

/* ---------- Caixa de redação (texto para PDF) ---------- */
.redacao{margin:22px auto 0;max-width:760px}
.redacao__cabeca{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:10px;
}
.redacao__rotulo{font-size:.85rem;color:var(--tofy-text-2);font-weight:500}
.redacao__acoes{display:flex;gap:8px;flex-wrap:wrap}
.redacao__acoes .tofy-btn{font-size:13px;padding:9px 15px}
.redacao input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.redacao textarea{
  width:100%;min-height:280px;resize:vertical;
  padding:16px 18px;border-radius:var(--tofy-radius-sm);
  border:1px solid var(--tofy-line-strong);background:var(--tofy-surface);
  color:var(--tofy-ink);font-family:inherit;font-size:.95rem;line-height:1.65;
}
.redacao textarea:focus{
  outline:none;border-color:var(--tofy-accent);box-shadow:0 0 0 3px var(--tofy-accent-tint-2);
}
.redacao__conta{
  margin:8px 0 0;text-align:right;
  font-family:var(--tofy-mono);font-size:11px;color:var(--tofy-faint);
}
.opcoes__grupo--solto{margin-top:20px;margin-bottom:0}
.notas code{
  font-family:var(--tofy-mono);font-size:.9em;padding:1px 5px;border-radius:4px;
  background:var(--tofy-surface);border:1px solid var(--tofy-line-soft);
}

/* ---------- Comparação de dois documentos ---------- */
.dupla{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:22px}
.dupla__lado{
  border:1px solid var(--tofy-line);border-radius:var(--tofy-radius-sm);
  background:var(--tofy-surface-2);padding:16px;text-align:center;
}
.dupla__lado.is-sobre{border-color:var(--tofy-accent);background:var(--tofy-accent-tint)}
.dupla__titulo{
  font-family:var(--tofy-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tofy-muted);margin:0 0 12px;
}
.dupla__lado input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.dupla__lado .tofy-btn{font-size:14px;padding:11px 20px}
.dupla__nome{
  margin:12px 0 0;font-size:.86rem;color:var(--tofy-ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dupla__nome:empty::before{content:"nenhum arquivo";color:var(--tofy-faint);font-style:italic}

.pagina.is-diferente{border-color:var(--tofy-accent);box-shadow:0 0 0 1px var(--tofy-accent-line)}
.pagina__selo{
  font-family:var(--tofy-mono);font-size:10px;letter-spacing:.06em;text-align:center;
  padding:4px 6px;border-radius:5px;text-transform:uppercase;
}
.pagina__selo--igual{color:var(--tofy-faint);background:var(--tofy-surface-2)}
.pagina__selo--diferente{color:var(--tofy-accent);background:var(--tofy-accent-tint)}
.pagina__selo--so{color:#A93226;background:rgba(192,57,43,.09)}
:root[data-theme="dark"] .pagina__selo--so{color:#F19181}

.resumo{
  display:flex;gap:20px;flex-wrap:wrap;justify-content:center;
  margin:22px auto 0;max-width:760px;padding:16px 18px;
  border:1px solid var(--tofy-line);border-radius:var(--tofy-radius-sm);
  background:var(--tofy-surface-2);
}
.resumo[hidden]{display:none}
.resumo__item{text-align:center;min-width:96px}
.resumo__num{display:block;font-size:1.5rem;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.resumo__rot{
  display:block;margin-top:2px;font-family:var(--tofy-mono);
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tofy-muted);
}
.resumo__item--diferente .resumo__num{color:var(--tofy-accent)}

/* ---------- Recado neutro (nao e erro) ----------
   O .aviso e vermelho de proposito: ele significa que algo deu errado.
   Uma ressalva que precisa ser lida antes de comecar nao e erro, e pintar
   de vermelho o que sempre aparece ensina o usuario a ignorar a cor. */
.aviso--info{
  border-color:var(--tofy-line-strong);background:var(--tofy-surface-2);
  color:var(--tofy-text-2);
}
:root[data-theme="dark"] .aviso--info,
:root:not([data-theme="light"]) .aviso--info{color:var(--tofy-text-2)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .aviso--info{color:var(--tofy-text-2)}}
.aviso--info strong{color:var(--tofy-ink)}

/* Acao dentro de um bloco de opcoes: nao e o botao principal da pagina. */
.acoes--compacta{margin-top:14px;justify-content:flex-start}
.acoes--compacta .tofy-btn{font-size:14px;padding:11px 22px}

/* ---------- Bloco de codigo / previa de texto ----------
   Texto largo rola dentro da propria caixa: a pagina nunca ganha rolagem
   horizontal por causa de uma linha comprida do documento do usuario. */
.codigo{
  margin:0;padding:16px 18px;max-height:26rem;overflow:auto;
  border:1px solid var(--tofy-line);border-radius:var(--tofy-radius-sm);
  background:var(--tofy-surface-2);color:var(--tofy-ink);
  font-family:var(--tofy-mono);font-size:12.5px;line-height:1.65;
  white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2;
}
.codigo:focus-visible{outline:none;border-color:var(--tofy-accent);box-shadow:0 0 0 3px var(--tofy-accent-tint-2)}

/* ---------- Tarjas (ocultar conteudo) ----------
   Na tela a tarja e semitransparente, para o usuario conferir o que esta
   cobrindo. No arquivo gerado ela e solida e opaca: o que fica embaixo
   nao chega a ser desenhado. */
.editor__camada--tarja{cursor:crosshair;touch-action:none}
.tarja{
  position:absolute;padding:0;
  border:2px solid var(--tofy-accent);border-radius:2px;
  background:rgba(0,0,0,.78);cursor:pointer;
}
.tarja:hover{background:rgba(0,0,0,.55);border-color:#C0392B}
.tarja:focus-visible{outline:none;box-shadow:0 0 0 3px var(--tofy-accent-tint-2)}
.tarja--nova{pointer-events:none;background:rgba(0,0,0,.45);border-style:dashed}

/* ---------- Lista de campos de formulario ---------- */
.campos{display:grid;gap:14px;margin:16px 0 4px}
.campos:empty{display:none}
.campo--marca{
  flex-direction:row;align-items:center;gap:11px;
  padding:11px 13px;border:1px solid var(--tofy-line);
  border-radius:var(--tofy-radius-sm);background:var(--tofy-surface);
  cursor:pointer;
}
/* No campo de marcar, o rotulo vem depois da caixa e ocupa o resto da
   linha — o contrario dos campos de texto, onde ele fica em cima. */
.campo--marca>span{order:2;flex:1;font-size:.94rem;color:var(--tofy-ink)}
.campo--marca input[type=checkbox]{
  order:1;width:20px;height:20px;flex:0 0 auto;accent-color:var(--tofy-accent);cursor:pointer;
}
.campo--marca:hover{border-color:var(--tofy-accent)}

/* ---------- Abas (escolha do jeito de fazer algo) ---------- */
.abas{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.aba{
  padding:8px 15px;border:1px solid var(--tofy-line);
  border-radius:999px;background:var(--tofy-surface);
  color:var(--tofy-muted);font:inherit;font-size:.94rem;cursor:pointer;
  transition:border-color .18s var(--tofy-ease,ease),color .18s var(--tofy-ease,ease);
}
.aba:hover{border-color:var(--tofy-accent);color:var(--tofy-ink)}
.aba.is-ativa{
  border-color:var(--tofy-accent);color:var(--tofy-accent);
  background:var(--tofy-accent-tint-1);font-weight:600;
}
.aba:focus-visible{outline:none;box-shadow:0 0 0 3px var(--tofy-accent-tint-2)}

/* ---------- Prancheta de assinatura ---------- */
.pad{display:grid;gap:14px}
/* O fundo e branco fixo, e nao um token: o que se desenha aqui vai para
   dentro do PDF, onde a folha e branca. Um pad escuro no modo noturno
   faria a pessoa assinar em cima de um fundo que nao existe no arquivo. */
.pad__tela{
  position:relative;background:#fff;
  border:1px solid var(--tofy-line);border-radius:var(--tofy-radius-sm);
  box-shadow:var(--tofy-shadow);overflow:hidden;
}
.pad__tela canvas{
  display:block;width:100%;height:auto;
  touch-action:none;cursor:crosshair;
}
/* Linha de apoio, como a do papel. Fica atras do traco e nao entra no
   recorte: e um elemento, nao pixel do canvas. */
.pad__linha{
  position:absolute;left:6%;right:6%;bottom:22%;margin:0;
  border-bottom:1px dashed var(--tofy-line-strong);pointer-events:none;
}
.pad__dica{margin:0;font-size:.92rem;color:var(--tofy-muted)}
.pad__acoes{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  padding-top:4px;border-top:1px solid var(--tofy-line);
}
.pad__acoes .campo--marca{margin-left:auto}
.campo--linha{flex-direction:row;align-items:center;gap:9px;margin:0}
.campo--linha>span{font-size:.9rem;color:var(--tofy-muted);white-space:nowrap}

/* ---------- Assinatura posicionada sobre a pagina ---------- */
.assina{
  position:absolute;display:block;height:auto;
  cursor:move;touch-action:none;
  border:1px dashed transparent;
}
.assina:hover,.assina:focus-visible{outline:none;border-color:var(--tofy-accent)}

/* A .previa__caixa nasceu para texto: rolagem propria e altura maxima.
   Quando o que ela mostra e um desenho, isso vira defeito — o QR sai
   cortado na tela pequena e a pessoa precisa rolar dentro da caixa para
   ver o codigo inteiro, que e justamente o que um leitor nao faz. */
.previa__caixa--imagem{
  max-height:none;overflow:visible;padding:14px;
  display:flex;align-items:center;justify-content:center;
}
.previa__caixa--imagem canvas{
  display:block;width:auto;height:auto;max-width:100%;
  image-rendering:pixelated;   /* modulo e quadrado: nada de borrar na reducao */
}

/* ---------- Previa de planilha ---------- */
/* Tabela larga precisa rolar dentro da propria caixa: a pagina inteira
   nunca rola de lado. */
.previa__caixa--rolar{overflow:auto;white-space:normal}
/* min-width max-content e o que faz a tabela manter a largura natural em
   vez de encolher as colunas ate caberem: sem isso a caixa nunca rola, as
   celulas espremem e a previa deixa de servir para conferir a extracao. */
.grade-previa{
  border-collapse:collapse;font-size:.8rem;font-family:var(--tofy-mono);
  min-width:max-content;
}
.grade-previa th,.grade-previa td{
  border:1px solid var(--tofy-line);padding:5px 9px;
  text-align:left;white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis;
}
.grade-previa th{background:var(--tofy-surface);font-weight:700}
.grade-previa tr:nth-child(even) td{background:var(--tofy-surface)}

/* ---------- Cabeca de secao com acoes a direita ---------- */
.opcoes__cabeca{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:12px;
}
.opcoes__cabeca .opcoes__titulo{margin:0}
/* Detalhe do item: o comeco do texto do capitulo cabe numa linha so e
   corta com reticencias — a lista precisa continuar varrivel de olho. */
.campo__detalhe{
  display:block;margin-top:3px;font-size:.85rem;color:var(--tofy-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---------- Continuar com o mesmo arquivo ----------
   Fica dentro do painel de resultado, abaixo do download e separado por
   um filete: baixar continua sendo a acao principal, encadear e o
   atalho de quem tem mais uma etapa pela frente. */
.continuar{
  margin-top:20px;padding-top:16px;
  border-top:1px solid var(--tofy-accent-line);
}
.continuar__titulo{
  margin:0 0 10px;font-size:.82rem;font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;color:var(--tofy-muted);
}
.continuar__acoes{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.continuar__bt{
  font:inherit;font-size:.88rem;cursor:pointer;
  /* 44px de altura: alvo de toque confortavel no celular, que e onde
     o encadeamento mais serve — quem esta no telefone nao quer passar
     pela pasta de downloads. */
  padding:11px 16px;min-height:44px;border-radius:999px;
  border:1px solid var(--tofy-accent-line);
  background:var(--tofy-paper);color:var(--tofy-ink);
}
.continuar__bt:hover{background:var(--tofy-accent-tint-2)}
.continuar__bt:focus-visible{outline:2px solid var(--tofy-accent);outline-offset:2px}
.continuar__bt[disabled]{opacity:.55;cursor:default}

/* ---------- Arquivo chegando de outra ferramenta ---------- */
.recebido{
  margin:0 auto 16px;max-width:760px;padding:11px 15px;
  border:1px solid var(--tofy-accent-line);background:var(--tofy-accent-tint);
  border-radius:var(--tofy-radius-sm);font-size:.88rem;color:var(--tofy-ink-soft);
}
.recebido strong{color:var(--tofy-ink)}

/* =====================================================================
   Específico do Image Editor
   ===================================================================== */

/* A miniatura da fila nasceu retangular no Docs Editor porque lá o item
   é sempre uma folha. Aqui é uma foto, que tanto pode ser deitada quanto
   em pé: quadrado é a única moldura que não mente sobre nenhuma das
   duas. */
.arquivo__mini{width:52px;height:52px}
.arquivo__mini img{object-fit:cover}

/* ---------- Painel de saída em lote ---------- */
.saida{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:8px;text-align:left}
.saida__item{
  display:flex;align-items:center;gap:12px;padding:10px 12px;
  border:1px solid var(--tofy-line);border-radius:var(--tofy-radius-sm);
  background:var(--tofy-surface);
}
.saida__corpo{min-width:0;flex:1}
.saida__nome{margin:0;font-size:.92rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saida__meta{
  margin:3px 0 0;font-family:var(--tofy-mono);font-size:11px;color:var(--tofy-faint);
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.saida__seta{opacity:.6}
.saida__novo{color:var(--tofy-ink-soft);font-weight:500}
.saida__nota{margin:5px 0 0;font-size:.8rem;color:var(--tofy-muted)}

/* O selo de economia é o que faz a ferramenta parecer competente. Ganho
   e perda têm cores diferentes porque conversão de formato às vezes
   engorda o arquivo, e esconder isso seria mentir por omissão. */
.saida__pct{
  flex:none;font-family:var(--tofy-mono);font-size:11.5px;font-weight:500;
  padding:5px 9px;border-radius:999px;
  border:1px solid var(--tofy-line);color:var(--tofy-muted);
}
.saida__pct--ganho{color:#0F7A4F;border-color:rgba(15,122,79,.35);background:rgba(15,122,79,.09)}
.saida__pct--perda{color:#A8531F;border-color:rgba(168,83,31,.35);background:rgba(168,83,31,.09)}
:root[data-theme="dark"] .saida__pct--ganho{color:#6FD3A3;border-color:rgba(111,211,163,.35);background:rgba(111,211,163,.12)}
:root[data-theme="dark"] .saida__pct--perda{color:#E8A46B;border-color:rgba(232,164,107,.35);background:rgba(232,164,107,.12)}

.saida__bt{flex:none;font-size:13px;padding:8px 16px}
.resultado__resumo{margin:0 0 18px;font-size:.9rem;color:var(--tofy-ink-soft)}
.resultado [data-baixar-zip][hidden]{display:none}

/* ---------- Prévia de imagem ----------
   Fundo xadrez: sem ele, PNG transparente sobre papel branco parece um
   PNG de fundo branco, e a pessoa só descobre a diferença depois de
   baixar. */
.previa--imagem .previa__caixa{
  max-height:none;padding:14px;display:grid;place-items:center;
  background-color:var(--tofy-surface-2);
  background-image:
    linear-gradient(45deg,var(--tofy-line) 25%,transparent 25%,transparent 75%,var(--tofy-line) 75%),
    linear-gradient(45deg,var(--tofy-line) 25%,transparent 25%,transparent 75%,var(--tofy-line) 75%);
  background-size:18px 18px;background-position:0 0,9px 9px;
}
.previa--imagem img,.previa--imagem canvas{max-width:100%;height:auto;display:block}

/* ---------- Aviso de formato não suportado ---------- */
.opcoes__nota--alerta{color:#A8531F}
:root[data-theme="dark"] .opcoes__nota--alerta{color:#E8A46B}

/* ---------- Controles de faixa e de cor ----------
   O Docs Editor nunca precisou deles: lá a escolha é sempre discreta
   (uma página, um intervalo). Aqui qualidade e opacidade são contínuas,
   e o valor escolhido aparece no proprio rotulo pelo <output>. */
.campo input[type=range]{
  width:100%;height:26px;margin:0;padding:0;background:transparent;
  accent-color:var(--tofy-accent);cursor:pointer;
}
.campo input[type=range]:focus-visible{outline:2px solid var(--tofy-accent);outline-offset:4px;border-radius:4px}
.campo output{font-family:var(--tofy-mono);font-size:.95em;color:var(--tofy-accent);font-weight:500}
.campo input[type=color]{
  width:100%;height:42px;padding:4px;cursor:pointer;
  border:1px solid var(--tofy-line-strong);border-radius:var(--tofy-radius-sm);
  background:var(--tofy-surface);
}
.campo--linha input[type=checkbox]{
  width:18px;height:18px;flex:none;accent-color:var(--tofy-accent);cursor:pointer;margin:0;
}
.campo--linha>span{white-space:normal}

/* ---------- Atalhos de valor (onda 1) ----------
   Fileira de botoes que so preenchem um campo numerico logo abaixo:
   limite do edital, largura do PNG, lado maior do lote. Nao sao radios
   de verdade porque o campo continua aceitando qualquer numero digitado
   — o botao e um atalho, nao a unica forma de escolher. Por isso
   aria-pressed, e nao role=radio. */
.presets{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.preset{
  padding:8px 14px;cursor:pointer;
  border:1px solid var(--tofy-line-strong);border-radius:var(--tofy-radius-sm);
  background:var(--tofy-surface);color:var(--tofy-text-2);
  font:inherit;font-size:.82rem;line-height:1.2;
}
.preset:hover{border-color:var(--tofy-accent);color:var(--tofy-accent)}
.preset:focus-visible{outline:none;box-shadow:0 0 0 3px var(--tofy-accent-tint-2)}
.preset[aria-pressed="true"]{
  border-color:var(--tofy-accent);background:var(--tofy-accent-tint);
  color:var(--tofy-accent);font-weight:600;
}
/* Quadradinho com rotulo em duas linhas. A `.posicao span` e flex em
   linha, entao sem isto o <small> ficaria ao LADO do titulo em vez de
   embaixo dele. */
.posicoes--descrita .posicao span{flex-direction:column;justify-content:center}

/* ---------- Previa ao vivo (onda 2) ----------
   O canvas mostra o efeito no ato, entao ele precisa de fundo xadrez (a
   imagem pode ter transparencia) e de teto de altura: sem o teto, uma
   foto em pe empurra os controles para fora da tela justamente quando a
   pessoa quer ver os dois ao mesmo tempo. */
.previa-viva{margin:22px auto 0;max-width:760px;text-align:center}
.previa-viva[hidden]{display:none}
.previa-viva__palco{
  display:inline-block;line-height:0;padding:8px;
  border:1px solid var(--tofy-line-soft);border-radius:var(--tofy-radius-sm);
  background-color:var(--tofy-surface);
  background-image:
    linear-gradient(45deg,var(--tofy-line-soft) 25%,transparent 25%),
    linear-gradient(-45deg,var(--tofy-line-soft) 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,var(--tofy-line-soft) 75%),
    linear-gradient(-45deg,transparent 75%,var(--tofy-line-soft) 75%);
  background-size:16px 16px;
  background-position:0 0,0 8px,8px -8px,-8px 0;
}
.previa-viva__palco canvas{
  display:block;max-width:100%;max-height:52vh;width:auto;height:auto;
}

/* Linha de ajuda embaixo de um controle. Nasce dentro do .campo, que e
   flex em coluna, entao nao precisa de display proprio. */
.campo__dica{font-size:.76rem;line-height:1.4;color:var(--tofy-muted)}

/* ---------- Marcacao de areas (desfocar rosto) ----------
   `touch-action: none` e o que faz o arrasto com o dedo virar tracado em
   vez de rolagem da pagina: sem isso, no celular a pessoa arrasta e a
   pagina sobe, e nenhuma area e marcada. */
.palco-marcacao{margin:22px auto 0;max-width:760px;text-align:center}
.palco-marcacao[hidden]{display:none}
.palco-marcacao__tela{
  cursor:crosshair;touch-action:none;
  display:block;max-width:100%;max-height:60vh;width:auto;height:auto;
}
.areas{list-style:none;margin:14px auto 12px;padding:0;max-width:520px;
  display:flex;flex-direction:column;gap:6px}
.area{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px;text-align:left;
  border:1px solid var(--tofy-line-soft);border-radius:var(--tofy-radius-sm);
  background:var(--tofy-surface);font-size:.86rem;color:var(--tofy-text-2);
}
.area__bt{padding:5px 12px;font-size:.78rem;flex:none}

/* ---------- Texto e ficha (onda 2) ----------
   Duas paginas fogem do padrao "entra arquivo, sai arquivo": a de Base64
   entrega texto e a de metadados entrega uma tabela. */
.caixa-texto{
  width:100%;padding:10px 12px;resize:vertical;
  border:1px solid var(--tofy-line-strong);border-radius:var(--tofy-radius-sm);
  background:var(--tofy-surface);color:var(--tofy-ink);
  font-family:var(--tofy-mono);font-size:.8rem;line-height:1.5;
  word-break:break-all;
}
.caixa-texto:focus-visible{outline:none;border-color:var(--tofy-accent);
  box-shadow:0 0 0 3px var(--tofy-accent-tint-2)}
.volta,.saida-texto{margin:22px auto 0;max-width:760px}
.volta[hidden],.saida-texto[hidden],.ficha[hidden]{display:none}
.saida-texto .presets{justify-content:center;margin-top:12px}

.ficha{margin:24px auto 0;max-width:760px}
.ficha h2{margin:0 0 12px;font-size:1.05rem}
/* Tabela larga rola dentro da propria caixa: o corpo da pagina nunca
   rola de lado. */
.ficha__rolagem{overflow-x:auto}
.ficha__tabela{width:100%;border-collapse:collapse;font-size:.88rem}
.ficha__tabela th,.ficha__tabela td{
  padding:9px 12px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--tofy-line-soft);
}
.ficha__tabela th{
  width:38%;font-weight:600;color:var(--tofy-text-2);white-space:nowrap;
}
.ficha__tabela td{color:var(--tofy-ink);font-family:var(--tofy-mono);word-break:break-word}
.ficha__tabela tr:last-child th,.ficha__tabela tr:last-child td{border-bottom:0}

/* Aviso que precisa ser lido, nao so notado: o de GPS. */
.aviso--forte{font-weight:500;line-height:1.55}
@media (max-width:520px){
  .ficha__tabela th{width:auto}
}

/* ---------- Mapa das ferramentas no rodapé (SEO + navegação) ---------- */
/* Cada página de ferramenta linkava só três irmãs. Aqui qualquer uma
   alcança as outras vinte e cinco em um clique — e o rastreador também. */
.mapa{
  display:grid;gap:26px 32px;margin-top:32px;padding-top:28px;
  border-top:1px solid var(--tofy-line-soft);
  grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
}
.rodape .mapa__titulo{
  margin:0 0 10px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tofy-faint);font-weight:600;
}
.rodape .mapa__titulo a{color:inherit;text-decoration:none}
.rodape .mapa__titulo a:hover{color:var(--tofy-accent)}
.mapa__coluna ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mapa__coluna li{font-size:.9rem;line-height:1.5}
.mapa__coluna a{color:var(--tofy-text-2);text-decoration:none;padding:4px 0;display:inline-block}
.mapa__coluna a:hover{color:var(--tofy-accent);text-decoration:underline}
/* A própria página não vira link: sai como texto, marcada para o leitor de tela. */
.mapa__coluna [aria-current="page"]{
  color:var(--tofy-ink);font-weight:600;padding:4px 0;display:inline-block;
}
@media (max-width:600px){
  .mapa{gap:22px 20px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
}

/* ---------- Passo a passo numerado (onda 3) ---------- */
/* As páginas antigas explicam em prosa. Onde a ordem importa de verdade —
   marcar, escolher, aplicar — a lista numerada lê melhor e é o formato que
   o Google entende como procedimento. */
.passos{
  list-style:none;counter-reset:passo;margin:0 0 4px;padding:0;
  display:grid;gap:10px;
}
.passos li{
  counter-increment:passo;position:relative;padding-left:34px;
  color:var(--tofy-ink-soft);font-size:.94rem;line-height:1.65;
}
.passos li::before{
  content:counter(passo);position:absolute;left:0;top:1px;
  width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--tofy-accent-tint);color:var(--tofy-accent);
  font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;
}

/* ---------- Paleta de cores (onda 3) ---------- */
.paleta{
  list-style:none;margin:18px 0 0;padding:0;
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
}
.paleta__item{display:grid;gap:5px}
/* A amostra é o botão: clicar na cor copia o hex. Não há alvo pequeno
   escondido num canto — o alvo é o quadrado inteiro. */
.paleta__amostra{
  appearance:none;border:1px solid var(--tofy-line);border-radius:var(--tofy-radius-sm);
  height:66px;cursor:pointer;font-family:var(--tofy-mono);font-size:12px;
  letter-spacing:.04em;font-weight:600;display:grid;place-items:center;
  transition:transform .12s var(--tofy-ease),box-shadow .12s var(--tofy-ease);
}
.paleta__amostra:hover{transform:translateY(-2px);box-shadow:var(--tofy-shadow)}
.paleta__amostra:focus-visible{outline:2px solid var(--tofy-accent);outline-offset:2px}
.paleta__meta{
  margin:0;font-size:11px;color:var(--tofy-muted);
  font-variant-numeric:tabular-nums;line-height:1.4;
}