/* Visão do Campo — "Pedir ajuda" (suporte.js). Carregado no produto (/sistema/) e nas páginas públicas
   (/, termos, privacidade): por isso cada token tem o valor de reserva — a landing não define os de
   `estilo.css`. Material 3 sem enfeite: campo de 56, alvos de 48 no toque, botões em pílula, linha no lugar
   de sombra pesada. No celular o diálogo vira tela cheia (a folha); a partir de 600 px, um cartão central.
   Tudo mora sob `.sup-*`: nada aqui mexe em outra tela. */

.sup-fundo {
  --sup-papel: var(--papel, #F3F5F2); --sup-sup: var(--superficie, #FFFFFF); --sup-tinta: var(--tinta, #151A16);
  --sup-tinta-2: var(--tinta-2, #525A52); --sup-linha: var(--linha, #E3E7E1); --sup-contorno: #8A938A;
  --sup-verde: var(--verde, #1E6B45); --sup-verde-claro: var(--verde-claro, #E7F1EA); --sup-verde-escuro: #17593A;
  --sup-fogo: var(--fogo, #B3301C); --sup-fogo-claro: var(--fogo-claro, #FCEBE7); --sup-erro-texto: #7E1F10;
  --sup-ui: var(--ui, 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
  --sup-mono: var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  --sup-alvo: 40px;
  position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(14, 17, 15, 0.48); color: var(--sup-tinta);
  font: 400 16px/24px var(--sup-ui); -webkit-font-smoothing: antialiased;
}
@media (pointer: coarse), (max-width: 900px) { .sup-fundo { --sup-alvo: 48px; } }
html.sup-travado, html.sup-travado body { overflow: hidden; }
.sup-fundo *, .sup-fundo *::before, .sup-fundo *::after { box-sizing: border-box; }
.sup-fundo [hidden] { display: none !important; }

.sup-dialogo {
  width: 100%; max-width: 600px; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  display: flex; flex-direction: column; background: var(--sup-sup); border-radius: var(--r-m, 12px);
  border: 1px solid var(--sup-linha); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); overflow: hidden;
}
.sup-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 16px 8px 24px; flex-shrink: 0; }
.sup-titulo { margin: 0; font: 500 24px/32px var(--sup-ui); color: var(--sup-tinta); }
.sup-titulo:focus { outline: none; }
.sup-fechar {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex-shrink: 0;
  padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--sup-tinta-2); cursor: pointer;
}
.sup-fechar:hover { background: var(--sup-papel); color: var(--sup-tinta); }
.sup-corpo { padding: 0 24px 24px; overflow-y: auto; overscroll-behavior: contain; }

.sup-intro { margin: 0 0 16px; color: var(--sup-tinta-2); font-size: 14px; line-height: 20px; }
.sup-form { display: flex; flex-direction: column; gap: 16px; }
.sup-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sup-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sup-campo label { font: 500 14px/20px var(--sup-ui); color: var(--sup-tinta); }
.sup-obrig { color: var(--sup-fogo); }
.sup-campo input, .sup-campo select, .sup-campo textarea {
  width: 100%; min-height: 48px; padding: 0 16px; border: 1px solid var(--sup-contorno); border-radius: var(--r-s, 8px);   /* 48/16 como todo campo do produto (era 56) */
  background: var(--sup-sup); color: var(--sup-tinta); font: 400 16px/24px var(--sup-ui);
}
.sup-campo select { padding: 0 40px 0 12px; -webkit-appearance: none; appearance: none; cursor: pointer;   /* a mesma seta dos outros selects do produto */
  background-image: linear-gradient(45deg, transparent 50%, var(--sup-tinta-2, #4A524C) 50%), linear-gradient(135deg, var(--sup-tinta-2, #4A524C) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.sup-campo textarea { min-height: 144px; padding: 12px 16px; resize: vertical; }
.sup-campo input:focus, .sup-campo select:focus, .sup-campo textarea:focus {
  outline: none; border-color: var(--sup-verde); box-shadow: inset 0 0 0 1px var(--sup-verde);
}
.sup-campo [aria-invalid="true"] { border-color: var(--sup-fogo); box-shadow: inset 0 0 0 1px var(--sup-fogo); }
.sup-apoio, .sup-contador { margin: 0; font: 400 12px/16px var(--sup-ui); color: var(--sup-tinta-2); }
.sup-contador { text-align: right; font-family: var(--sup-mono); }
.sup-contador.perto { color: var(--sup-erro-texto); }
.sup-erro-campo { margin: 0; font: 500 12px/16px var(--sup-ui); color: var(--sup-erro-texto); }
.sup-isca { position: absolute !important; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.sup-nota { margin: 0; font: 400 14px/20px var(--sup-ui); color: var(--sup-tinta-2); }
.sup-nota a, .sup-meus a { color: var(--sup-verde); text-decoration: underline; text-underline-offset: 3px; }

.sup-alerta { padding: 12px 16px; border-radius: var(--r-s, 8px); background: var(--sup-sup, #fff); border: 1px solid var(--sup-contorno, #C8CFC6); color: var(--sup-tinta); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.sup-alerta-linha { display: flex; gap: 8px; align-items: flex-start; font: 500 14px/20px var(--sup-ui); }
.sup-alerta-linha svg { flex-shrink: 0; margin-top: 0; color: var(--erro, #B3261E); }   /* banner neutro: a cor de erro só no ícone */

.sup-acoes { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding-top: 8px; }
.sup-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--sup-alvo);
  min-width: 48px; padding: 0 24px; border-radius: var(--r-s, 8px); border: 1px solid transparent; cursor: pointer;
  font: 500 14px/20px var(--sup-ui); text-decoration: none;
}
.sup-botao-cheio { background: var(--sup-verde); color: #FFFFFF; }
.sup-botao-cheio:hover { background: var(--sup-verde-escuro); }
.sup-botao-cheio:disabled { background: var(--sup-linha); color: var(--sup-tinta-2); cursor: progress; }
.sup-botao-texto { background: transparent; color: var(--sup-verde); padding: 0 12px; }
.sup-botao-texto:hover { background: var(--sup-verde-claro); }
.sup-botao-contorno { background: var(--sup-sup); color: var(--sup-verde); border-color: var(--sup-contorno); }
.sup-fundo :focus-visible { outline: 3px solid var(--sup-verde); outline-offset: 2px; }

.sup-ok { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 16px 0 0; }
.sup-ok p { margin: 0; max-width: 44ch; }
.sup-ok-icone { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 999px; background: var(--sup-verde-claro); color: var(--sup-verde); }
.sup-ok-titulo { margin: 8px 0 0; font: 500 22px/28px var(--sup-ui); }
.sup-ok-titulo:focus { outline: none; }
.sup-protocolo b { font-family: var(--sup-mono); font-weight: 600; }
.sup-ok .sup-acoes { justify-content: center; width: 100%; }

.sup-meus-det { margin-top: 24px; border-top: 1px solid var(--sup-linha); padding-top: 8px; font-size: 14px; line-height: 20px; }
.sup-meus-det summary { min-height: var(--sup-alvo); display: flex; align-items: center; cursor: pointer; font-weight: 500; color: var(--sup-tinta); }
.sup-meus-det ul { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; color: var(--sup-tinta-2); }
.sup-mono { font-family: var(--sup-mono); }
.sup-status { font-weight: 600; }
.sup-status-resolvido { color: var(--sup-verde); }

/* o link "Pedir ajuda" e o rodapé "Precisa de ajuda? Abra um pedido. Entramos em contato." — usados fora do diálogo */
.sup-link { color: var(--verde, #1E6B45); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sup-link:hover { color: #17593A; }
.sup-rodape { margin: 0; font: 400 14px/20px var(--ui, 'IBM Plex Sans', Helvetica, sans-serif); color: var(--tinta-2, #525A52); }
.sup-link-forte { display: inline-flex; align-items: center; min-height: 40px; }

/* celular: tela cheia, como uma folha; o cabeçalho fica fixo e o corpo rola */
@media (max-width: 599px) {
  .sup-fundo { padding: 0; align-items: stretch; }
  .sup-dialogo { max-width: none; max-height: none; height: 100%; border-radius: 0; border: 0; box-shadow: none; }
  .sup-cabeca { padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--sup-linha); }
  .sup-titulo { font-size: 22px; line-height: 28px; }
  .sup-corpo { padding: 16px 16px 24px; }
  .sup-linha { grid-template-columns: 1fr; }
  .sup-acoes { position: sticky; bottom: -24px; background: var(--sup-sup); padding: 12px 0 16px; margin-bottom: -8px; }
  .sup-acoes .sup-botao { flex: 1 1 auto; }
}

/* a seção "Fale com a gente" da página pública (landing/index.html): o destino de /#fale-com-a-gente */
section.fale { padding: 48px 0; border-top: 1px solid #E3E7E1; }
section.fale h2 { margin: 0 0 8px; }
section.fale p { max-width: 60ch; }

/* Com sessão o diálogo abre antes de a conta responder: nome, e-mail e telefone ficam em forma de espera (o fundo
   pulsa, sem texto falso dentro) e uma linha diz o que se espera. O Enviar fica desligado até a conta chegar. */
.sup-espera { margin: 0; font: 400 14px/20px var(--sup-ui); color: var(--sup-tinta-2); }
.sup-campo input.sup-esperando { background: linear-gradient(90deg, #EEF1EC 0%, #F6F8F5 50%, #EEF1EC 100%); background-size: 200% 100%; animation: sup-pulso 1.4s ease-in-out infinite; color: transparent; cursor: progress; }
@keyframes sup-pulso { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .sup-campo input.sup-esperando { animation: none; } }