/* Cartões de navegação entre ferramentas (abaixo do cabeçalho): ícone, nome e descrição. */
/* Filtro por categoria acima dos cartões ("Todas", "Otimizar", "Editar"...). */
.tools-filter { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding-top: 48px; animation: tools-enter 200ms ease-out; }
.tools-filter button {
  padding: 7px 16px; border-radius: 999px; border: 1px solid var(--border); background: transparent;
  color: var(--muted); font: 600 .8rem var(--font-head); cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.tools-filter button:hover { color: var(--text); border-color: var(--border-hover); }
.tools-filter button.active { background: var(--text); border-color: var(--text); color: var(--bg); }
.tools-filter button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* O filtro só esconde: os links continuam no HTML para o Google. */
.tools-nav:not([data-filter="todas"]) a:not(.match) { display: none; }

.tools-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; padding-top: 16px; animation: tools-enter 200ms ease-out; }
/* Treze cartões de PDF: linhas equilibradas em telas largas. */
.tools-nav-pdf { max-width: 1120px; }
.tools-nav a {
  display: flex; align-items: center; gap: 12px; flex: 0 1 auto; min-width: 0;
  padding: 10px 18px 10px 12px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted); text-decoration: none;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.tools-nav a:hover { border-color: var(--border-hover); transform: translateY(-1px); }
.tools-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tools-nav-icon { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; background: var(--surface2); color: var(--muted); transition: background 180ms ease, color 180ms ease; }
.tools-nav-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Ícones preenchidos (juntar/dividir) ocupam mais da caixa que os de traço. */
.tools-nav-icon svg:has(.fill) { width: 24px; height: 24px; }
.tools-nav-icon svg .fill { fill: currentColor; stroke: none; }
.tools-nav-icon svg .cut { stroke: var(--surface2); stroke-width: 1.6; }
.tools-nav a.active .tools-nav-icon svg .cut { stroke: var(--accent); }
.tools-nav-text { display: flex; flex-direction: column; min-width: 0; }
.tools-nav strong { font-family: var(--font-head); font-size: .85rem; font-weight: 600; line-height: 1.2; color: var(--text); white-space: nowrap; }
.tools-nav small { font-size: .72rem; line-height: 1.35; color: var(--muted); margin-top: 3px; white-space: nowrap; }
.tools-nav a:hover .tools-nav-icon { color: var(--text); }
.tools-nav a.active { border-color: var(--accent); background: var(--accent-dim); }
.tools-nav a.active .tools-nav-icon { background: var(--accent); color: #0c0c0d; }
.tools-nav a.active strong { color: var(--accent); }
html.light .tools-nav a.active { border-color: #3d7000; }
html.light .tools-nav a.active strong { color: #3d7000; }

@keyframes tools-enter { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

/* Celular: faixa com rolagem horizontal; o cartão ativo é centralizado pelo app.ts. */
@media (max-width: 768px) {
  .tools-filter { flex-wrap: nowrap; justify-content: flex-start; padding: 24px 16px 0; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .tools-filter::-webkit-scrollbar { display: none; }
  .tools-filter button { flex: 0 0 auto; }
  .tools-nav {
    flex-wrap: nowrap; justify-content: flex-start; gap: 8px; padding-top: 12px;
    width: 100%; padding-inline: 16px; overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: x proximity; scroll-padding-inline: 16px;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  }
  .tools-nav::-webkit-scrollbar { display: none; }
  .tools-nav a { flex: 0 0 auto; scroll-snap-align: center; padding: 8px 14px 8px 10px; border-radius: 12px; }
  .tools-nav a:hover { transform: none; }
  .tools-nav-icon { width: 32px; height: 32px; }
  .tools-nav strong { font-size: .8rem; }
  .tools-nav small { font-size: .75rem; }
}

@media (prefers-reduced-motion: reduce) { .tools-nav, .tools-filter { animation: none; } .tools-nav a, .tools-nav-icon { transition: none; } }