/* Converteme — estilos do site.
   Ideia visual: papel de repartição e carimbo roxo de cartório. A área de
   soltar arquivos é uma folha com linha de recorte; o selo "processado no
   seu aparelho" é um carimbo. Tinta azul de caneta para o texto. */

@font-face { font-family: "Atkinson"; src: url("../fontes/atkinson-hyperlegible-next-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("../fontes/atkinson-hyperlegible-next-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("../fontes/atkinson-hyperlegible-next-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url("../fontes/bricolage-grotesque-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
  --papel: #EEF2F1;
  --folha: #FFFFFF;
  --tinta: #18324F;
  --tinta-forte: #0E2238;
  --grafite: #56626D;
  --linha: #D3DBDF;
  --carimbo: #6A3FA0;
  --carimbo-fundo: #F1EBF9;
  --ok: #1E7A4E;
  --ok-fundo: #E6F4EC;
  --erro: #B3261E;
  --erro-fundo: #FBEAE8;
  --aviso: #8A5A00;
  --aviso-fundo: #FFF4DB;
  --sombra: 0 1px 0 rgba(24, 50, 79, .06), 0 8px 24px -12px rgba(24, 50, 79, .25);
  --raio: 10px;
  --raio-p: 6px;
  --largura: 1120px;
  --fonte: "Atkinson", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-titulo: "Bricolage", "Atkinson", system-ui, sans-serif;
  --gato-contorno: transparent;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #0F1B2A; --folha: #16263A; --tinta: #E4ECF4; --tinta-forte: #FFFFFF; --grafite: #A3B1BF; --linha: #2A3E55;
    --carimbo: #B79BEA; --carimbo-fundo: #2A2240; --ok: #6FD3A0; --ok-fundo: #133326; --erro: #FF9C93; --erro-fundo: #3A1A1A;
    --aviso: #F2C565; --aviso-fundo: #3A2E12; --gato-contorno: #4A6280; --sombra: 0 1px 0 rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papel: #0F1B2A; --folha: #16263A; --tinta: #E4ECF4; --tinta-forte: #FFFFFF; --grafite: #A3B1BF; --linha: #2A3E55;
  --carimbo: #B79BEA; --carimbo-fundo: #2A2240; --ok: #6FD3A0; --ok-fundo: #133326; --erro: #FF9C93; --erro-fundo: #3A1A1A;
  --aviso: #F2C565; --aviso-fundo: #3A2E12; --gato-contorno: #4A6280; --sombra: 0 1px 0 rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6); color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 1.0625rem/1.55 var(--fonte); min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
img, svg { display: block; max-width: 100%; }
a { color: var(--tinta); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--carimbo); }
:focus-visible { outline: 3px solid var(--carimbo); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--fonte-titulo); color: var(--tinta-forte); line-height: 1.12; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); font-weight: 720; }
h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); font-weight: 680; }
h3 { font-size: 1.15rem; font-weight: 650; }
p { margin: 0; }
.envolve { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: 8px; top: -60px; background: var(--folha); padding: 8px 12px; border-radius: var(--raio-p); z-index: 10; }
.pular:focus { top: 8px; }

/* ---------- topo ---------- */
.topo { background: var(--folha); border-bottom: 1px solid var(--linha); }
.topo .envolve { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta-forte); font: 720 1.35rem/1 var(--fonte-titulo); letter-spacing: -0.02em; }
.marca svg { width: 38px; height: 38px; flex: none; }
.marca:hover { color: var(--tinta-forte); }
.topo { position: relative; z-index: 20; }
.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.menu-botao, .tema-botao { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--linha); color: var(--tinta); border-radius: var(--raio-p); padding: 8px 12px; min-height: 40px; font: 700 .98rem var(--fonte); cursor: pointer; }
.menu-botao svg { width: 18px; height: 18px; transition: transform .15s; }
.menu-botao[aria-expanded="true"] { border-color: var(--tinta); }
.menu-botao[aria-expanded="true"] svg { transform: rotate(180deg); }
.menu-botao:hover, .tema-botao:hover { border-color: var(--tinta); color: var(--tinta-forte); }
.tema-botao { padding: 8px; width: 40px; justify-content: center; }
.tema-botao svg { width: 20px; height: 20px; display: none; }
.tema-botao[data-tema="auto"] .t-auto, .tema-botao[data-tema="light"] .t-claro, .tema-botao[data-tema="dark"] .t-escuro { display: block; }
/* menu com todas as ferramentas, em grupos */
.menu-ferramentas { position: absolute; left: 0; right: 0; top: 100%; background: var(--folha); border-bottom: 1px solid var(--linha); box-shadow: var(--sombra); max-height: calc(100dvh - 64px); overflow: auto; }
.menu-ferramentas .envolve { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px 24px; padding-block: 18px 22px; align-items: start; }
.menu-grupo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.menu-grupo-titulo { font-size: .9rem; font-weight: 700; color: var(--grafite); padding: 4px 8px; }
.menu-grupo a { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 8px; border-radius: var(--raio-p); }
.menu-grupo a .icone { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--papel); color: var(--tinta-forte); }
.menu-grupo a .icone svg { width: 18px; height: 18px; }
.menu-grupo a:hover, .menu-grupo a[aria-current="page"] { background: var(--papel); color: var(--tinta-forte); }
.menu-grupo a[aria-current="page"] { font-weight: 700; }
@media (max-width: 480px) { .marca { font-size: 1.15rem; } .marca svg { width: 32px; height: 32px; } }

/* ---------- carimbo (selo de privacidade) ---------- */
.carimbo { color: var(--carimbo); width: 168px; height: 168px; flex: none; transform: rotate(-9deg); opacity: .92; }
.carimbo text { font: 700 11.5px var(--fonte); letter-spacing: .12em; fill: currentColor; }
.carimbo .meio { font: 750 24px var(--fonte-titulo); letter-spacing: 0; }
.selo { display: inline-flex; align-items: center; gap: 8px; color: var(--carimbo); background: var(--carimbo-fundo); border-radius: 999px; padding: 6px 14px 6px 10px; font-size: .95rem; font-weight: 700; }
.selo svg { width: 18px; height: 18px; }

/* ---------- início ---------- */
.abertura { padding: 56px 0 40px; }
.abertura .envolve { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.abertura h1 { max-width: 14ch; }
.abertura p { margin-top: 18px; max-width: 54ch; font-size: 1.15rem; color: var(--grafite); }
.abertura p strong { color: var(--tinta); }
@media (max-width: 700px) { .abertura { padding: 32px 0 24px; } .abertura .envolve { grid-template-columns: 1fr; } .abertura .carimbo { width: 112px; height: 112px; justify-self: end; margin-top: -8px; order: -1; } }

.grupo { padding: 24px 0 8px; }
.grupo h2 { font-size: 1.05rem; font-family: var(--fonte); font-weight: 700; color: var(--grafite); margin-bottom: 12px; letter-spacing: 0; }
.lista-ferramentas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ferramenta { display: flex; gap: 14px; align-items: flex-start; text-decoration: none; background: var(--folha); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px; height: 100%; color: var(--tinta); transition: border-color .15s; }
.ferramenta:hover { border-color: var(--tinta); color: var(--tinta); }
.ferramenta .icone { width: 44px; height: 44px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--papel); color: var(--tinta-forte); }
.ferramenta .icone svg { width: 24px; height: 24px; }
.ferramenta h3 { margin-bottom: 4px; }
.ferramenta p { font-size: .97rem; color: var(--grafite); }
.ferramenta.destaque { border: 1.5px solid var(--carimbo); }
.ferramenta.destaque .icone { background: var(--carimbo-fundo); color: var(--carimbo); }

.porque { padding: 48px 0 56px; }
.porque .envolve > h2 { margin-bottom: 20px; }
.pontos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
.pontos h3 { margin-bottom: 6px; }
.pontos p { color: var(--grafite); }

/* ---------- página de ferramenta ---------- */
.cabeca { padding: 36px 0 20px; }
.cabeca h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.7rem); }
.cabeca p { margin-top: 10px; color: var(--grafite); max-width: 62ch; font-size: 1.1rem; }
.cabeca .selo { margin-top: 14px; }

.mesa { background: var(--folha); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); padding: 20px; }
.mesa[data-estado="vazio"] { padding: 12px; }

/* a folha com linha de recorte */
.soltar { position: relative; border: 2px dashed color-mix(in srgb, var(--tinta) 35%, transparent); border-radius: var(--raio); padding: 48px 20px; text-align: center; cursor: pointer; transition: background .15s, border-color .15s; }
.soltar::before { content: ""; position: absolute; left: -2px; top: 50%; width: 14px; height: 14px; transform: translate(-50%, -50%) rotate(-90deg); background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356626D' stroke-width='2'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M20 4 8.12 15.88M14.47 14.48 20 20M8.12 8.12 12 12'/%3E%3C/svg%3E"); }
.soltar:hover, .soltar.sobre { background: var(--carimbo-fundo); border-color: var(--carimbo); }
.soltar .grande { font: 700 1.3rem/1.2 var(--fonte-titulo); color: var(--tinta-forte); }
.soltar .peq { margin-top: 8px; color: var(--grafite); font-size: .98rem; }
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 1.05rem/1 var(--fonte); padding: 14px 22px; border-radius: var(--raio-p); border: 1.5px solid var(--tinta-forte); background: var(--tinta-forte); color: var(--papel); cursor: pointer; text-decoration: none; min-height: 48px; }
.botao:hover { background: var(--carimbo); border-color: var(--carimbo); color: #fff; }
.botao[disabled] { opacity: .45; cursor: not-allowed; background: var(--tinta-forte); border-color: var(--tinta-forte); }
.botao.secundario { background: transparent; color: var(--tinta); border-color: var(--linha); }
.botao.secundario:hover { border-color: var(--tinta); color: var(--tinta-forte); background: transparent; }
.botao.pequeno { padding: 8px 12px; font-size: .95rem; min-height: 36px; }
.botao svg { width: 18px; height: 18px; }
.soltar .botao { margin-top: 20px; }

.trabalho { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
.trabalho > * { min-width: 0; }
@media (max-width: 860px) { .trabalho { grid-template-columns: 1fr; } }
.painel { border-left: 1px solid var(--linha); padding-left: 20px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 860px) { .painel { border-left: 0; padding-left: 0; border-top: 1px solid var(--linha); padding-top: 16px; } }
.painel h2 { font-size: 1.1rem; }
.painel .acao { position: sticky; bottom: 0; background: var(--folha); padding: 10px 0 12px; margin-bottom: -12px; }
.painel .acao .botao { width: 100%; }
.barra-arquivos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.barra-arquivos .conta { color: var(--grafite); font-size: .97rem; }

/* opções */
.opcao { display: flex; flex-direction: column; gap: 8px; }
.opcao > .rotulo { font-weight: 700; }
.opcao .ajuda { color: var(--grafite); font-size: .92rem; }
.escolhas { display: flex; flex-direction: column; gap: 6px; }
.escolhas label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--linha); border-radius: var(--raio-p); cursor: pointer; }
.escolhas label:has(input:checked) { border-color: var(--carimbo); background: var(--carimbo-fundo); }
.escolhas input { margin-top: 4px; accent-color: var(--carimbo); }
.escolhas small { display: block; color: var(--grafite); font-size: .9rem; }
.campo { font: inherit; color: var(--tinta); background: var(--folha); border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 10px 12px; width: 100%; min-height: 44px; }
.campo:focus { border-color: var(--carimbo); outline: none; box-shadow: 0 0 0 3px var(--carimbo-fundo); }
.linha-campos { display: flex; gap: 8px; align-items: center; }
.linha-campos .campo { flex: 1; }
select.campo { appearance: auto; }
.marcar { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.marcar input { width: 18px; height: 18px; accent-color: var(--carimbo); }

/* lista de arquivos */
.arquivos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.arquivo { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--folha); }
.arquivo.arrastando { opacity: .4; }
.arquivo .alca { cursor: grab; color: var(--grafite); padding: 4px; touch-action: none; background: none; border: 0; }
.arquivo .alca svg { width: 18px; height: 18px; }
.arquivo .miniatura { width: 44px; height: 56px; flex: none; border: 1px solid var(--linha); border-radius: 3px; background: var(--papel); object-fit: contain; }
.arquivo .nome { flex: 1; min-width: 0; }
.arquivo .nome strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: .98rem; }
.arquivo .nome span { color: var(--grafite); font-size: .9rem; }
.botao-icone { background: none; border: 1px solid transparent; color: var(--grafite); border-radius: var(--raio-p); width: 36px; height: 36px; display: inline-grid; place-items: center; cursor: pointer; flex: none; }
.botao-icone:hover { border-color: var(--linha); color: var(--tinta-forte); }
.botao-icone svg { width: 18px; height: 18px; }

/* grade de páginas */
.paginas { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 14px; }
@media (max-width: 480px) { .paginas { grid-template-columns: repeat(2, 1fr); } }
.pagina { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px 8px; border: 1.5px solid var(--linha); border-radius: var(--raio-p); background: var(--folha); user-select: none; touch-action: manipulation; }
.pagina .folha-mini { width: 100%; aspect-ratio: 1 / 1.3; display: grid; place-items: center; overflow: hidden; }
.pagina canvas, .pagina img { max-width: 100%; max-height: 100%; box-shadow: 0 0 0 1px var(--linha); background: #fff; transition: transform .2s; }
.pagina .num { font-size: .88rem; color: var(--grafite); }
.pagina .acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; }
.pagina .acoes .botao-icone { width: 30px; height: 30px; }
.pagina .acoes .botao-icone svg { width: 16px; height: 16px; }
.pagina .linha-num { display: flex; align-items: center; justify-content: center; gap: 2px; width: 100%; min-width: 0; }
.pagina .linha-num .botao-icone { width: 28px; height: 28px; }
.pagina .linha-num .botao-icone svg { width: 16px; height: 16px; }
.pagina .num { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.pagina.selecionada { border-color: var(--carimbo); background: var(--carimbo-fundo); }
.pagina.selecionada .num { color: var(--carimbo); font-weight: 700; }
.pagina.excluida { opacity: .35; }
.pagina.excluida .folha-mini { filter: grayscale(1); }
.pagina.arrastando { opacity: .35; }
.pagina.alvo-antes { box-shadow: -4px 0 0 var(--carimbo); }
.pagina.alvo-depois { box-shadow: 4px 0 0 var(--carimbo); }
.pagina[draggable="true"] { cursor: grab; }
/* fica por cima da miniatura (que, girada, ganha camada própria) */
.pagina .marca-sel { position: absolute; top: 6px; right: 6px; z-index: 2; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--linha); background: var(--folha); box-shadow: 0 0 0 2px var(--folha); display: grid; place-items: center; }
.pagina.selecionada .marca-sel { background: var(--carimbo); border-color: var(--carimbo); color: #fff; }
.pagina .marca-sel svg { width: 14px; height: 14px; }

/* resultado e progresso */
.progresso { display: flex; flex-direction: column; gap: 10px; padding: 32px 8px; text-align: center; }
.progresso .barra { height: 8px; background: var(--papel); border-radius: 99px; overflow: hidden; max-width: 420px; width: 100%; margin: 0 auto; }
.progresso .barra span { display: block; height: 100%; width: 0; background: var(--carimbo); transition: width .2s; }
.progresso .barra.indefinida span { width: 30%; animation: vai 1.1s ease-in-out infinite; }
@keyframes vai { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.resultado { text-align: center; padding: 28px 8px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.resultado h2 { font-size: 1.6rem; }
.resultado .detalhe { color: var(--grafite); }
.resultado .botoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.resultado .lista-saida { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 520px; text-align: left; }
.resultado .lista-saida li { display: flex; justify-content: space-between; gap: 10px; align-items: center; border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 8px 12px; }
.resultado .lista-saida span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carimbado { color: var(--ok); width: 64px; height: 64px; }
.mensagem { border-radius: var(--raio-p); padding: 12px 14px; font-size: .97rem; text-align: left; }
.mensagem.erro { background: var(--erro-fundo); color: var(--erro); }
.mensagem.aviso { background: var(--aviso-fundo); color: var(--aviso); }
.mensagem.info { background: var(--carimbo-fundo); color: var(--tinta); }
.mensagem ul { margin: 6px 0 0; padding-left: 20px; }
.comparacao { display: flex; gap: 10px; align-items: baseline; font-size: 1.1rem; }
.comparacao .antes { text-decoration: line-through; color: var(--grafite); }
.comparacao .depois { font-weight: 700; color: var(--ok); }

/* conteúdo de ajuda (SEO) */
.ajuda-pagina { padding-top: 48px; padding-bottom: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 860px) { .ajuda-pagina { grid-template-columns: 1fr; gap: 28px; } }
.ajuda-pagina h2 { margin-bottom: 14px; }
.passos { margin: 0; padding-left: 0; list-style: none; counter-reset: passo; display: flex; flex-direction: column; gap: 14px; }
.passos li { counter-increment: passo; display: grid; grid-template-columns: 36px 1fr; gap: 10px; }
.passos li::before { content: counter(passo); width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--tinta); display: grid; place-items: center; font-weight: 700; font-size: .95rem; }
.perguntas details { border-bottom: 1px solid var(--linha); padding: 12px 0; }
.perguntas summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--grafite); }
.perguntas details[open] summary::after { content: "−"; }
.perguntas details p { margin-top: 8px; color: var(--grafite); }
.outras { padding-top: 24px; padding-bottom: 56px; }
.outras h2 { margin-bottom: 14px; }
.texto-longo { padding-top: 40px; padding-bottom: 64px; max-width: calc(72ch + 32px); }
.texto-longo h1 { margin-bottom: 18px; }
.texto-longo h2 { margin: 28px 0 10px; }
.texto-longo p, .texto-longo li { color: var(--tinta); margin-bottom: 10px; }

/* espaço reservado para anúncio (fica vazio até o AdSense ser aprovado) */
.espaco-anuncio:empty { display: none; }
.espaco-anuncio { margin: 24px 0; min-height: 90px; }

/* ---------- rodapé ---------- */
.rodape { border-top: 1px solid var(--linha); background: var(--folha); padding: 28px 0; font-size: .95rem; color: var(--grafite); }
.rodape .envolve { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.rodape a { color: var(--grafite); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- lupa (visualizador) ---------- */
html.visor-aberto { overflow: hidden; }
.visor { width: min(1000px, calc(100vw - 32px)); height: min(920px, calc(100dvh - 32px)); max-width: none; max-height: none; padding: 0; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--folha); color: var(--tinta); box-shadow: var(--sombra); }
.visor[open] { display: grid; grid-template-rows: auto 1fr auto; }
.visor::backdrop { background: rgba(14, 34, 56, .62); }
.visor-topo, .visor-rodape { display: flex; align-items: center; gap: 8px; padding: 8px 12px; min-width: 0; }
.visor-topo { border-bottom: 1px solid var(--linha); justify-content: space-between; }
.visor-rodape { border-top: 1px solid var(--linha); justify-content: center; }
.visor-titulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; }
.visor-controles { display: flex; align-items: center; gap: 2px; flex: none; }
.visor-zoom { min-width: 3.4em; text-align: center; font-variant-numeric: tabular-nums; color: var(--grafite); font-size: .92rem; }
.visor-contador { min-width: 0; text-align: center; color: var(--grafite); font-size: .95rem; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visor-folha { overflow: auto; background: var(--papel); padding: 16px; display: grid; place-items: start center; outline: none; overscroll-behavior: contain; }
.visor-pagina { display: block; max-width: none; background: #fff; box-shadow: 0 0 0 1px var(--linha), var(--sombra); }
.visor-carregando { color: var(--grafite); align-self: center; padding: 40px 0; }
.visor .botao-icone[disabled] { opacity: .35; cursor: default; }
@media (max-width: 600px) {
  .visor { width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
  .visor-folha { padding: 8px; }
}

/* resultado: ver, baixar e download automático */
.resultado .lista-saida .acoes-saida { display: flex; align-items: center; gap: 4px; flex: none; }
.aviso-download { color: var(--grafite); font-size: .95rem; min-height: 1.2em; }
.aviso-download:empty { display: none; }
.marcar.pequeno { font-size: .93rem; color: var(--grafite); }
.marcar.pequeno input { width: 16px; height: 16px; }
/* página não marcada: círculo vazio (o ✓ só aparece quando marcada) */
.pagina:not(.selecionada) .marca-sel svg { visibility: hidden; }

/* ---------- recortar imagem ---------- */
.recorte-palco { position: relative; margin: 0 auto; overflow: hidden; border-radius: 4px; background: repeating-conic-gradient(var(--linha) 0 25%, var(--folha) 0 50%) 0 0 / 16px 16px; user-select: none; -webkit-user-select: none; }
.recorte-imagem { display: block; }
.recorte-quadro { position: absolute; box-shadow: 0 0 0 9999px rgba(14, 34, 56, .55); outline: 2px solid #fff; cursor: move; touch-action: none;
  background-image: linear-gradient(to right, transparent calc(33.33% - .5px), rgba(255,255,255,.55) calc(33.33% - .5px), rgba(255,255,255,.55) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255,255,255,.55) calc(66.66% - .5px), rgba(255,255,255,.55) calc(66.66% + .5px), transparent calc(66.66% + .5px)),
                    linear-gradient(to bottom, transparent calc(33.33% - .5px), rgba(255,255,255,.55) calc(33.33% - .5px), rgba(255,255,255,.55) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255,255,255,.55) calc(66.66% - .5px), rgba(255,255,255,.55) calc(66.66% + .5px), transparent calc(66.66% + .5px)); }
.recorte-quadro:focus-visible { outline: 3px solid var(--carimbo); outline-offset: 0; }
.alca-recorte { position: absolute; width: 22px; height: 22px; border: 3px solid #fff; touch-action: none; }
.alca-recorte.nw { left: -4px; top: -4px; border-right: 0; border-bottom: 0; cursor: nwse-resize; }
.alca-recorte.ne { right: -4px; top: -4px; border-left: 0; border-bottom: 0; cursor: nesw-resize; }
.alca-recorte.sw { left: -4px; bottom: -4px; border-right: 0; border-top: 0; cursor: nesw-resize; }
.alca-recorte.se { right: -4px; bottom: -4px; border-left: 0; border-top: 0; cursor: nwse-resize; }
/* área de toque maior que o desenho do canto */
.alca-recorte::after { content: ""; position: absolute; inset: -12px; }
.erro-texto { color: var(--erro); }

/* ---------- assinatura ---------- */
@font-face { font-family: "Great Vibes"; src: url("../fontes/assinatura/great-vibes-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Dancing Script"; src: url("../fontes/assinatura/dancing-script-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Sacramento"; src: url("../fontes/assinatura/sacramento-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Allura"; src: url("../fontes/assinatura/allura-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Caveat"; src: url("../fontes/assinatura/caveat-latin-400-normal.woff2") format("woff2"); font-display: swap; }
.ass-barra { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 10px; }
.ass-pagina { min-width: 9em; text-align: center; color: var(--grafite); font-variant-numeric: tabular-nums; }
.ass-folha { position: relative; width: 100%; margin: 0 auto; background: #fff; box-shadow: 0 0 0 1px var(--linha), var(--sombra); user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.ass-tela { display: block; width: 100%; height: 100%; }
.ass-camada { position: absolute; inset: 0; }
.ass-item { position: absolute; cursor: move; touch-action: none; outline: 1px dashed transparent; outline-offset: 2px; }
.ass-item:hover { outline-color: rgba(106, 63, 160, .6); }
.ass-item.selecionado { outline: 2px dashed var(--carimbo); }
.ass-item img { width: 100%; height: 100%; display: block; pointer-events: none; }
.ass-alca { position: absolute; right: -10px; bottom: -10px; width: 22px; height: 22px; border-radius: 50%; background: var(--carimbo); border: 3px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); cursor: nwse-resize; display: none; touch-action: none; }
.ass-item.selecionado .ass-alca { display: block; }
.ass-item-barra { position: absolute; right: 0; bottom: calc(100% + 8px); display: flex; align-items: center; gap: 6px; padding: 2px 4px 2px 10px; background: var(--folha); color: var(--tinta); border: 1px solid var(--linha); border-radius: var(--raio-p); box-shadow: var(--sombra); white-space: nowrap; cursor: default; z-index: 2; }
.ass-item-barra .marcar { gap: 6px; }
.ass-dica { margin-top: 10px; color: var(--grafite); font-size: .92rem; text-align: center; }
.ass-marcas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ass-marca { display: flex; align-items: center; border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 2px; min-width: 0; }
.ass-marca .botao-icone { width: 30px; height: 30px; }
.ass-marca-usar { flex: 1; min-width: 0; height: 52px; display: grid; place-items: center; padding: 4px; border: 0; border-radius: 4px; background: #fff; cursor: pointer; }
.ass-marca-usar:hover { box-shadow: inset 0 0 0 2px var(--carimbo); }
.ass-marca-usar img { max-height: 44px; max-width: 100%; object-fit: contain; }
.ass-criar { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cert-opcao { border-top: 1px solid var(--linha); padding-top: 14px; }
.cert-opcao > summary { cursor: pointer; }
.cert-opcao[open] > summary { margin-bottom: 8px; }
.cert-escolha, .cert-selo { display: flex; flex-direction: column; gap: 8px; }
.cert-escolha .ajuda, .cert-selo .ajuda { color: var(--grafite); font-size: .92rem; }
.cert-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: .93rem; color: var(--grafite); }
.cert-cartao { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1.5px solid var(--carimbo); border-radius: var(--raio-p); background: var(--carimbo-fundo); font-size: .95rem; margin-bottom: 8px; }
.cert-cartao-topo { display: flex; gap: 8px; align-items: center; color: var(--carimbo); }
.cert-cartao-topo svg { width: 20px; height: 20px; flex: none; }
.cert-cartao-topo strong { color: var(--tinta-forte); }
.cert-cartao .botao { align-self: flex-start; margin-top: 6px; }
.cert-arquivo { display: flex; gap: 12px; align-items: center; border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 14px; }
.cert-arquivo .icone { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--raio-p); background: var(--carimbo-fundo); color: var(--carimbo); flex: none; }
.cert-arquivo .icone svg { width: 22px; height: 22px; }
.cert-arquivo small { display: block; color: var(--grafite); }
.cert-resultado, .verif-lista { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 14px; text-align: left; }
.cert-situacao { display: inline-block; align-self: flex-start; padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: .95rem; }
.cert-situacao.ok { background: var(--ok-fundo); color: var(--ok); }
.cert-situacao.aviso { background: var(--aviso-fundo); color: var(--aviso); }
.cert-situacao.erro { background: var(--erro-fundo); color: var(--erro); }
.cert-ficha { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.cert-ficha dt { color: var(--grafite); }
.cert-ficha dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .cert-ficha { grid-template-columns: 1fr; gap: 0; } .cert-ficha dd { margin-bottom: 8px; } }
.verif-cartao { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; }
.verif-mais summary { cursor: pointer; color: var(--tinta); }
.verif-mais[open] summary { margin-bottom: 8px; }
.resultado .ajuda { color: var(--grafite); font-size: .92rem; }
/* janela de criar assinatura */
html:has(dialog.janela[open]) { overflow: hidden; }
.janela { width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--folha); color: var(--tinta); box-shadow: var(--sombra); }
.janela[open] { display: flex; flex-direction: column; }
.janela::backdrop { background: rgba(14, 34, 56, .62); }
.janela-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--linha); }
.janela-topo h2 { font-size: 1.15rem; }
.janela-corpo { padding: 16px 18px; overflow: auto; }
.janela-corpo > div { display: flex; flex-direction: column; gap: 10px; }
.janela-rodape { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 18px 14px; border-top: 1px solid var(--linha); }
.ass-pad-caixa { position: relative; height: 220px; border: 1px solid var(--linha); border-radius: var(--raio-p); background: #fff; overflow: hidden; }
.ass-pad { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.ass-pad-linha { position: absolute; left: 8%; right: 8%; bottom: 30%; border-bottom: 1.5px dashed #B8C2C8; pointer-events: none; }
.ass-pad-opcoes { flex-wrap: wrap; justify-content: space-between; }
.ass-espessura { display: flex; align-items: center; gap: 6px; color: var(--grafite); font-size: .93rem; }
.ass-espessura input { accent-color: var(--carimbo); width: 110px; }
.ass-cores { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.ass-cor { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: .93rem; }
.ass-cor input { position: absolute; opacity: 0; pointer-events: none; }
.ass-cor span { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 2px var(--folha), 0 0 0 3px var(--linha); }
.ass-cor:has(input:checked) span { box-shadow: 0 0 0 2px var(--folha), 0 0 0 4px var(--carimbo); }
.ass-cor:has(input:focus-visible) span { outline: 3px solid var(--carimbo); outline-offset: 4px; }
.ass-fontes { display: flex; flex-direction: column; gap: 6px; }
.ass-fonte { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border: 1px solid var(--linha); border-radius: var(--raio-p); background: #fff; color: #14161C; cursor: pointer; overflow: hidden; }
.ass-fonte:has(input:checked) { border-color: var(--carimbo); box-shadow: inset 0 0 0 1px var(--carimbo); }
.ass-fonte input { accent-color: var(--carimbo); flex: none; }
.ass-fonte span { font-size: 2rem; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ass-previa { min-height: 130px; display: grid; place-items: center; border: 1px solid var(--linha); border-radius: var(--raio-p); background: repeating-conic-gradient(#E3E8EA 0 25%, #fff 0 50%) 0 0 / 16px 16px; padding: 10px; }
.ass-previa-img { max-height: 220px; max-width: 100%; width: auto; height: auto; }
.ass-texto textarea { resize: vertical; min-height: 90px; }

/* ---------- 0.5.0: atalhos no topo, cores por grupo, edição ---------- */
.atalhos { display: flex; gap: 2px; margin-left: 28px; }
.atalhos a { padding: 8px 10px; border-radius: var(--raio-p); text-decoration: none; font-weight: 700; font-size: .95rem; color: var(--tinta); white-space: nowrap; }
.atalhos a:hover, .atalhos a[aria-current="page"] { background: var(--carimbo-fundo); color: var(--carimbo); }
@media (max-width: 980px) { .atalhos { display: none; } }
/* uma cor por grupo (só no ícone) */
.g-organizar { --gc: #B5501D; --gf: #FBE8DD; }
.g-otimizar { --gc: #2E7A35; --gf: #E3F1E2; }
.g-converter { --gc: #9A6300; --gf: #FAEFD6; }
.g-converter-de { --gc: #1D58A6; --gf: #E1EBF8; }
.g-editar { --gc: #963A82; --gf: #F5E4F1; }
.g-seguranca { --gc: #1B6B77; --gf: #DEEFF1; }
.g-assinatura { --gc: #6A3FA0; --gf: #EFE7FA; }
.g-imagens { --gc: #B03545; --gf: #F9E3E6; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .g-organizar { --gc: #FFB08A; --gf: #3A2216; } :root:not([data-theme="light"]) .g-otimizar { --gc: #8FD99A; --gf: #16301A; }
  :root:not([data-theme="light"]) .g-converter { --gc: #F2C565; --gf: #352912; } :root:not([data-theme="light"]) .g-converter-de { --gc: #92BBF2; --gf: #15283F; }
  :root:not([data-theme="light"]) .g-editar { --gc: #EAA2DB; --gf: #34182E; } :root:not([data-theme="light"]) .g-seguranca { --gc: #86D3DE; --gf: #11303A; }
  :root:not([data-theme="light"]) .g-assinatura { --gc: #C9B0F2; --gf: #2A2240; } :root:not([data-theme="light"]) .g-imagens { --gc: #FF9FAC; --gf: #3A1820; }
}
:root[data-theme="dark"] .g-organizar { --gc: #FFB08A; --gf: #3A2216; } :root[data-theme="dark"] .g-otimizar { --gc: #8FD99A; --gf: #16301A; }
:root[data-theme="dark"] .g-converter { --gc: #F2C565; --gf: #352912; } :root[data-theme="dark"] .g-converter-de { --gc: #92BBF2; --gf: #15283F; }
:root[data-theme="dark"] .g-editar { --gc: #EAA2DB; --gf: #34182E; } :root[data-theme="dark"] .g-seguranca { --gc: #86D3DE; --gf: #11303A; }
:root[data-theme="dark"] .g-assinatura { --gc: #C9B0F2; --gf: #2A2240; } :root[data-theme="dark"] .g-imagens { --gc: #FF9FAC; --gf: #3A1820; }
.menu-grupo a .icone[class*="g-"], .ferramenta .icone[class*="g-"] { background: var(--gf); color: var(--gc); }
.rodape-buscas { font-size: .92rem; }
.rodape-buscas a { color: var(--grafite); }
/* escolhas em linha (Texto | Imagem) */
.segmentado { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--linha); border-radius: var(--raio-p); overflow: hidden; align-self: flex-start; }
.segmentado label { position: relative; cursor: pointer; }
.segmentado input { position: absolute; opacity: 0; pointer-events: none; }
.segmentado span { display: block; padding: 7px 14px; font-weight: 700; font-size: .95rem; }
.segmentado label + label span { border-left: 1px solid var(--linha); }
.segmentado input:checked + span { background: var(--carimbo); color: #fff; }
.segmentado input:focus-visible + span { outline: 3px solid var(--carimbo); outline-offset: -3px; }
/* posição na página: miniatura com 6 ou 9 pontos */
.posicoes { display: grid; grid-template-columns: repeat(3, 34px); gap: 4px; padding: 6px; width: max-content; border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--papel); }
.posicoes label { position: relative; width: 34px; height: 28px; display: grid; place-items: center; cursor: pointer; border-radius: 4px; }
.posicoes input { position: absolute; opacity: 0; pointer-events: none; }
.posicoes span { width: 14px; height: 8px; border-radius: 2px; background: var(--linha); }
.posicoes label:hover span { background: var(--grafite); }
.posicoes input:checked + span { background: var(--carimbo); }
.posicoes input:focus-visible + span { outline: 3px solid var(--carimbo); outline-offset: 3px; }
.deslizar { width: 100%; accent-color: var(--carimbo); }
.previa-pagina { display: grid; place-items: center; min-height: 200px; }
.previa-pagina canvas { max-width: 100%; height: auto; box-shadow: 0 0 0 1px var(--linha), var(--sombra); background: #fff; }
/* remover páginas: marcada = vai sair */
.marcar-remove .pagina.selecionada .marca-sel { background: var(--erro); border-color: var(--erro); }
.marcar-remove .pagina.selecionada .folha-mini { opacity: .4; }
.marcar-remove .pagina.selecionada { outline: 2px solid var(--erro); }
/* recortar PDF: quadro com cantos */
.rpdf-folha { touch-action: none; overflow: hidden; }
.rpdf-quadro { position: absolute; outline: 2px solid var(--carimbo); box-shadow: 0 0 0 9999px rgba(14, 34, 56, .45); cursor: move; touch-action: none; }
.rpdf-alca { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: var(--carimbo); border: 3px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.rpdf-alca.no { left: -11px; top: -11px; cursor: nwse-resize; } .rpdf-alca.ne { right: -11px; top: -11px; cursor: nesw-resize; }
.rpdf-alca.so { left: -11px; bottom: -11px; cursor: nesw-resize; } .rpdf-alca.se { right: -11px; bottom: -11px; cursor: nwse-resize; }