/* ==========================================================================
   BeSales — módulo de Ferramentas para desenvolvedores
   (reaproveita os tokens/header/footer de legal.css)
   ========================================================================== */

/* ---------- Índice de ferramentas ---------- */
.tools{padding:44px 0 80px}
.tools .wrap{max-width:1080px}

/* Barra de atalho por categoria */
.tools-nav{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:44px}
.tools-nav a{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;padding:9px 15px;border-radius:100px;border:1px solid var(--line);color:var(--ink);background:var(--paper);transition:.15s}
.tools-nav a:hover{border-color:var(--violet-soft);color:var(--violet-deep);background:rgba(85,197,148,.06)}
.tools-nav a .ico{width:16px;height:16px;color:var(--violet-deep);display:inline-flex}
.tools-nav a .ico svg{width:16px;height:16px}
.tools-nav a em{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);background:var(--paper-2);border-radius:20px;padding:1px 7px}

/* Seções + listas de links */
.tools-section{margin-bottom:40px;scroll-margin-top:88px}
.tools-section-head{display:flex;align-items:center;gap:11px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.tools-section-head .cat-ico{width:22px;height:22px;color:var(--violet-deep);display:inline-flex;flex-shrink:0}
.tools-section-head .cat-ico svg{width:22px;height:22px}
.tools-section-title{font-size:19px;font-weight:600;color:var(--ink)}
.tools-section-head .count{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);background:var(--paper-2);border:1px solid var(--line);border-radius:20px;padding:2px 9px}
.tool-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1px 20px}
.tool-link{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;font-size:14.5px;color:var(--ink);transition:.13s}
.tool-link::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--violet-soft);flex-shrink:0;transition:.13s}
.tool-link:hover{background:var(--paper-2);color:var(--violet-deep)}
.tool-link:hover::before{background:var(--violet-deep);transform:scale(1.3)}

/* Cards antigos (mantidos para compatibilidade, não usados no índice) */
.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tool-card{display:flex;flex-direction:column;gap:12px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:.18s ease}
.tool-card:hover{transform:translateY(-3px);border-color:var(--violet-soft);box-shadow:0 24px 48px -28px rgba(6,41,37,.28)}
.tool-card .ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(85,197,148,.12);color:var(--violet-deep)}
.tool-card .ico svg{width:22px;height:22px}
.tool-card h3{font-size:18px;font-weight:600;color:var(--ink)}
.tool-card p{font-size:14px;color:var(--muted);flex:1}
.tool-card .go{font-size:13px;font-weight:600;color:var(--violet-deep);display:inline-flex;align-items:center;gap:6px}
.tool-card .go svg{width:14px;height:14px;transition:.16s}
.tool-card:hover .go svg{transform:translateX(3px)}

/* ---------- Área de uma ferramenta ---------- */
.tool{padding:56px 0 88px}
.tool .wrap{max-width:760px}
.tool-panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:0 20px 44px -32px rgba(6,41,37,.22)}
.tool-panel + .tool-panel{margin-top:20px}
.tool-panel h2{font-size:20px;font-weight:600;color:var(--ink);margin-bottom:6px}
.tool-panel .hint{font-size:14px;color:var(--muted);margin-bottom:20px}

/* Saída (resultado gerado) */
.result{display:flex;align-items:center;gap:12px;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.result output,.result .val{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:500;color:var(--ink);letter-spacing:.02em;flex:1;word-break:break-all}
.result .val.placeholder{color:var(--muted);font-weight:400}

/* Controles */
.controls{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px;align-items:center}
.field{width:100%;font-family:'JetBrains Mono',monospace;font-size:16px;color:var(--ink);background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:14px 16px;transition:.15s}
.field:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(85,197,148,.18)}
.switch{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);cursor:pointer;user-select:none}
.switch input{accent-color:var(--violet-deep);width:16px;height:16px}

/* Botão copiar (ícone) */
.btn-copy{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;padding:10px 14px;border-radius:8px;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;transition:.15s;flex-shrink:0}
.btn-copy:hover{border-color:var(--violet-soft);color:var(--violet-deep)}
.btn-copy svg{width:15px;height:15px}
.btn-copy.copied{border-color:var(--violet);color:var(--violet-deep);background:rgba(85,197,148,.1)}

/* Badge de status (validador) */
.status{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;padding:12px 16px;border-radius:10px;margin-top:16px}
.status svg{width:18px;height:18px}
.status.ok{background:rgba(31,157,107,.12);color:var(--violet-deep)}
.status.err{background:rgba(200,52,52,.1);color:#c33}
.status.idle{background:var(--paper-2);color:var(--muted)}

/* Tabela de info (meu IP / navegador) */
.info-list{display:grid;grid-template-columns:auto 1fr;gap:0}
.info-list dt{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:12px 16px 12px 0;border-bottom:1px solid var(--line)}
.info-list dd{font-size:14px;color:var(--ink);padding:12px 0;border-bottom:1px solid var(--line);word-break:break-word}
.info-list dt:last-of-type,.info-list dd:last-of-type{border-bottom:0}

/* Aviso */
.tool .note{background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--violet);border-radius:12px;padding:16px 18px;margin-top:20px;font-size:13.5px;color:var(--muted)}
.tool .note b{color:var(--ink)}

/* Voltar */
.back{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted-light);margin-bottom:14px}
.back:hover{color:var(--violet-soft)}
.back svg{width:14px;height:14px}

/* ---------- Select de opções (geradores) ---------- */
.sel{display:inline-flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.sel span{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.sel select{font-family:'Inter',sans-serif;font-size:14px;color:var(--ink);background:var(--paper-2);border:1px solid var(--line);border-radius:8px;padding:9px 12px;cursor:pointer;transition:.15s}
.sel select:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(85,197,148,.18)}

/* ---------- Ferramentas de texto / encoders ---------- */
textarea.field{min-height:150px;resize:vertical;line-height:1.5}
textarea.ta-out{min-height:120px;resize:vertical;background:var(--paper-2);width:100%;font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-top:14px}
textarea.ta-out.is-error{color:#c33}
.field-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-top:14px}
.field-row .field{flex:1;min-width:180px}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-top:18px}
.stat{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:16px}
.stat b{display:block;font-family:'JetBrains Mono',monospace;font-size:26px;color:var(--violet-deep);font-weight:500}
.stat span{font-size:12px;color:var(--muted)}
.char-table-wrap{max-height:340px;overflow:auto;border:1px solid var(--line);border-radius:12px;margin-top:16px}
table.char-table{width:100%;border-collapse:collapse}
table.char-table th,table.char-table td{text-align:left;padding:8px 14px;font-size:13px;border-bottom:1px solid var(--line);font-family:'JetBrains Mono',monospace}
table.char-table th{background:var(--paper-2);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);position:sticky;top:0}
.sym-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px;margin-top:8px}
.sym{font-size:20px;padding:12px 0;background:var(--paper-2);border:1px solid var(--line);border-radius:10px;cursor:pointer;transition:.14s;color:var(--ink)}
.sym:hover{border-color:var(--violet-soft);background:rgba(85,197,148,.1)}
.sym.copied{background:var(--violet);color:#fff;border-color:var(--violet)}
.hash-list{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.hash-row{display:flex;align-items:center;gap:12px;background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.hash-row .algo{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--violet-deep);min-width:76px}
.hash-row .hval{flex:1;font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--ink);word-break:break-all}

/* ---------- Dados fictícios / calculadoras ---------- */
.result .val.multiline{white-space:pre-line;text-align:left;font-size:16px;line-height:1.7}
.calc-result{margin-top:18px;background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--violet);border-radius:12px;padding:16px 18px;font-family:'JetBrains Mono',monospace;font-size:18px;color:var(--ink);word-break:break-word}
#rec-list{margin-top:4px}
#area-inputs{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}

/* ---------- Bloco "Mais ferramentas" (cross-link) ---------- */
.related{border-top:1px solid var(--line);padding:44px 0 8px;background:var(--paper-2)}
.related .wrap{max-width:840px}
.related-group{margin-bottom:32px}
.related-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.related-title{font-size:16px;font-weight:600;color:var(--ink);margin-bottom:14px}
.related-head .related-title{margin-bottom:0}
.related-all{font-size:13px;font-weight:600;color:var(--violet-deep);white-space:nowrap}
.related-all:hover{color:var(--ink)}
.related .tool-links{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1px 20px}
.related .tool-link{font-size:14px}
.related .tools-nav{margin-bottom:0}
.related .tools-nav a{background:var(--paper)}

/* ---------- Bloco de anúncio (Google AdSense) ---------- */
.ad-wrap{padding:4px 0 56px}
.ad-wrap .wrap{max-width:760px}
.ad-label{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;text-align:center}
.ad-wrap ins.adsbygoogle{display:block;min-height:90px}

/* ---------- Responsivo ---------- */
@media(max-width:900px){.tools-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){
  .tools-grid{grid-template-columns:1fr}
  .tool-panel{padding:22px}
  .result output,.result .val{font-size:18px}
  .info-list{grid-template-columns:1fr;gap:0}
  .info-list dt{padding-bottom:2px;border-bottom:0}
  .info-list dd{padding-top:2px}
}