/* Folha só da página /whatsapp/. Fica fora do style.css pelo
   mesmo motivo da /scripts/: são classes que nenhuma outra página usa, e
   embutir custaria download na home. As variáveis (--bg, --ink, --accent,
   --line…) vêm do style.css, carregado antes; aqui não se redefine paleta
   nem tipografia. */

/* ---------- fundo da página ---------- */
/* Mesmas regras da .pg-scripts, com outro nome de classe. É repetição
   consciente: as duas folhas são independentes (uma página não carrega a
   folha da outra), e promover isso para o style.css obrigaria a subir o
   ?v= das 13 páginas do site por causa de dez linhas. Se um dia nascer uma
   terceira ferramenta, aí sim vale unificar. */
.pg-ferramenta{
  background:
    radial-gradient(900px 520px at 50% 0%, rgba(75,157,214,.09), transparent 68%),
    linear-gradient(180deg, #0c0c11 0%, #08080b 45%, #050505 100%);
  background-attachment:fixed;
  background-repeat:no-repeat;
}
.pg-ferramenta .proj-hero,
.pg-ferramenta .section,
.pg-ferramenta .footer{background:transparent}
.pg-ferramenta .noise{opacity:.045}
.pg-ferramenta .footer{border-top:1px solid var(--line)}

/* ---------- o gerador ---------- */
/* Duas colunas: à esquerda o que se preenche, à direita o que sai. Elas ficam
   lado a lado de propósito, porque a saída muda a cada tecla e ver o link
   nascer é o que explica a ferramenta sem texto de ajuda. */
.ger{
  display:grid;grid-template-columns:1fr minmax(320px,420px);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;
}
.ger__campos{background:var(--surface);padding:26px;display:flex;flex-direction:column;gap:22px}
.ger__saida{background:var(--surface-2);padding:26px;display:flex;flex-direction:column;gap:10px}

.ger__rotulo{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);font-weight:500;
}

/* o país ocupa uma faixa fixa e o número fica com o resto: em telas estreitas
   os dois viram linhas separadas, senão o campo do número fica ilegível */
.ger__linha{display:grid;grid-template-columns:minmax(180px,220px) minmax(0,1fr);gap:14px}
/* com "Outro país" escolhido entra um terceiro campo na mesma linha. A classe
   vem do JS em vez de :has() para o layout não depender do suporte do
   navegador a um seletor que ainda falha em versões antigas. */
.ger__linha.is-outro{grid-template-columns:minmax(150px,1fr) 120px minmax(0,1.6fr)}
.ger__campo{display:flex;flex-direction:column;gap:7px;min-width:0}
/* [hidden] sozinho perde para o display:flex acima, e o campo escondido
   continuaria na tela */
.ger__campo[hidden]{display:none}
.ger__campo label{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
}
.ger__campo input,
.ger__campo select,
.ger__campo textarea{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;color:var(--ink);font-family:var(--sans);font-size:1rem;
  transition:border-color .3s var(--ease);
}
.ger__campo textarea{resize:vertical;min-height:96px;line-height:1.55}
.ger__campo input::placeholder,
.ger__campo textarea::placeholder{color:rgba(255,255,255,.28)}
.ger__campo input:focus,
.ger__campo select:focus,
.ger__campo textarea:focus{outline:none;border-color:var(--accent)}
/* a seta nativa do select some no fundo escuro em alguns navegadores, então a
   seta é desenhada aqui e o controle perde a aparência de sistema */
.ger__campo select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23a8a8a8' stroke-width='1.8'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.ger__campo select option{background:var(--bg);color:var(--ink)}

/* o número em vermelho seria alarme demais para um campo que a pessoa ainda
   está digitando: o aviso é âmbar, e some sozinho quando o número fica válido */
.ger__alerta{
  display:flex;gap:8px;align-items:flex-start;
  background:rgba(232,180,74,.10);border:1px solid rgba(232,180,74,.35);
  border-radius:10px;padding:11px 14px;color:#e8b44a;
  font-size:.875rem;line-height:1.5;
}
.ger__alerta::before{content:"!";font-weight:700;flex:none;line-height:1.5}
.ger__alerta[hidden]{display:none}

.ger__contador{color:var(--muted);font-size:.8125rem;line-height:1.5}
.ger__contador.is-longo{color:#e8b44a}

.ger__modelos{display:flex;flex-direction:column;gap:10px}
.modelos{display:flex;flex-wrap:wrap;gap:8px}
.modelo{
  background:transparent;border:1px solid var(--line);border-radius:999px;
  padding:8px 14px;color:var(--muted);font-family:var(--sans);font-size:.8125rem;
  font-weight:500;cursor:pointer;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.modelo:hover{color:var(--ink);border-color:var(--line-2)}

/* ---------- prévia da conversa ---------- */
.previa{
  background:var(--bg);border:1px solid var(--line);border-radius:12px;
  padding:16px;margin-bottom:6px;
}
/* balão verde com o bico à direita: é a mensagem que o CLIENTE manda, e no
   WhatsApp a mensagem enviada fica desse lado. A cor é a do WhatsApp, que é
   marca de terceiro, não o azul de destaque do site. */
.previa__balao{
  position:relative;margin-left:auto;max-width:88%;
  background:#075e54;color:#f2f5f4;border-radius:12px 4px 12px 12px;
  padding:11px 14px;font-size:.9375rem;line-height:1.55;white-space:pre-wrap;
  word-break:break-word;
}
.previa__vazio{color:rgba(242,245,244,.55);font-style:italic}

/* ---------- link gerado ---------- */
.saida__link{
  background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:13px 14px;margin-bottom:4px;
}
.saida__link code{
  display:block;font-family:var(--mono);font-size:.8125rem;line-height:1.55;
  color:var(--ink);word-break:break-all;
}
.saida__link.is-vazio code{color:var(--muted)}

.saida__formato{display:flex;gap:6px;margin-bottom:6px}
.fmt{
  background:transparent;border:1px solid var(--line);border-radius:999px;
  padding:6px 12px;color:var(--muted);font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.06em;font-weight:600;cursor:pointer;
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}
.fmt:hover{color:var(--ink);border-color:var(--line-2)}
.fmt.is-on{background:var(--ink);border-color:var(--ink);color:var(--bg)}

.saida__acoes{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 6px}
.saida__acoes .btn{flex:1;justify-content:center;min-width:130px}
/* verde do WhatsApp no botão principal: aqui ele não é decoração, é a marca do
   destino do link. O hover continua indo para o azul de destaque do site. */
.btn--wa{background:#25d366;color:#06251a}
.btn--wa:hover{background:var(--accent);color:var(--accent-ink)}
.btn[disabled],
.btn[aria-disabled="true"]{opacity:.4;pointer-events:none}
.btn--wa.is-copiado{background:var(--accent);color:var(--accent-ink)}

/* ---------- código do botão ---------- */
.saida__codigo{border-top:1px solid var(--line);padding-top:14px;margin-top:4px}
.saida__codigo summary{
  cursor:pointer;color:var(--muted);font-size:.875rem;
  list-style:none;display:flex;align-items:center;gap:8px;
}
.saida__codigo summary::-webkit-details-marker{display:none}
.saida__codigo summary::before{
  content:"+";font-family:var(--mono);font-weight:600;color:var(--accent);
}
/* sinal de menos (U+2212), não meia-risca: o glifo aqui é operador de
   abre e fecha, e a regra "sem travessão" vale para o arquivo inteiro */
.saida__codigo[open] summary::before{content:"−"}
.saida__codigo summary:hover{color:var(--ink)}
.saida__codigo p{color:var(--muted);font-size:.8125rem;line-height:1.55;margin:10px 0}
.saida__codigo pre{
  background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:12px;overflow-x:auto;margin-bottom:10px;
}
.saida__codigo pre code{
  font-family:var(--mono);font-size:.75rem;line-height:1.6;color:#c9c9c9;
  white-space:pre;
}

.acao{
  display:inline-flex;align-items:center;gap:6px;background:transparent;
  border:1px solid var(--line);border-radius:999px;padding:6px 12px;
  color:var(--muted);font-family:var(--sans);font-size:.75rem;font-weight:600;
  cursor:pointer;white-space:nowrap;
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}
.acao:hover{color:var(--ink);border-color:var(--line-2)}
.acao[disabled]{opacity:.4;pointer-events:none}
.acao.is-copiado{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
.acao svg{flex:none}

.saida__nota{
  color:var(--muted);font-size:.75rem;line-height:1.55;
  border-top:1px solid var(--line);padding-top:12px;margin-top:auto;
}

.legal code{
  font-family:var(--mono);font-size:.875rem;color:var(--ink);
  background:var(--surface-2);border-radius:4px;padding:1px 5px;
}

/* ---------- aviso de cópia ---------- */
/* mesma peça da /scripts/, repetida aqui porque ela mora naquela folha e não
   no style.css */
.aviso-copia{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:var(--bg);border-radius:999px;padding:11px 20px;
  font-size:.875rem;font-weight:600;z-index:200;opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.aviso-copia.is-on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- responsivo ---------- */
@media (max-width:1024px){
  .ger{grid-template-columns:1fr}
  .saida__nota{margin-top:12px}
}
@media (max-width:600px){
  .ger__campos,.ger__saida{padding:20px}
  .ger__linha,.ger__linha.is-outro{grid-template-columns:1fr}
  .saida__acoes .btn{flex:1 1 100%}
}