:root {
    --verde-whats: #25D366;
    --verde-escuro: #128C7E;
    --cinza-fundo: #F0F2F5;
    --cinza-card: #FFFFFF;
    --amarelo: #FFB020;
    --texto-sub: #6b7280;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }

  /* CORRIGIDO: protege contra overflow horizontal — qualquer elemento interno que
     estoure a largura da tela (ex: linha de botões sem flex-wrap) não vai mais
     empurrar a página inteira pro lado e cortar o conteúdo, como acontecia no card
     de profissional em telas de celular estreitas. */
  html, body {
    overflow-x: hidden;
    width: 100%;
  }

  body { background: var(--cinza-fundo); padding-bottom: 40px; max-width: 480px; margin: 0 auto; }

  /* Reforço específico pra celular deitado (landscape) — garante que tudo
     fique centralizado mesmo em telas mais largas de celular */
  @media (orientation: landscape) and (max-width: 900px) {
    body { max-width: 480px; margin: 0 auto; }
    header { max-width: 480px; margin: 0 auto; }
  }

  header {
    background: var(--verde-whats);
    color: white;
    padding: 16px 15px 12px;
    text-align: center;
  }
  header .logo { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.5px; }
  header p { font-size: 0.78rem; opacity: 0.95; margin-top: 2px; }

  .wrap { max-width: 480px; margin: 0 auto; padding: 0 15px; }

  .busca-container {
    background: var(--cinza-card);
    padding: 16px;
    margin-top: 14px;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    position: relative;
    z-index: 1;
  }
  .busca-row { display: flex; gap: 8px; margin-bottom: 12px; }
  .busca-container input {
    flex: 1;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.95rem;
  }
  .busca-container input:focus, .busca-container select:focus { outline: 2px solid var(--verde-whats); }
  .filtros { display: flex; gap: 8px; flex-wrap: wrap; }
  .filtros select, .filtros input {
    min-width: 90px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.85rem;
    background: white;
  }

  .btn-abrir-filtros {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 12px;
    padding: 11px;
    background: transparent;
    border: 1.5px solid var(--verde-escuro);
    color: var(--verde-escuro);
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
  }
  .btn-abrir-filtros:hover { background: rgba(18,140,126,0.08); }
  .btn-abrir-filtros.aberto { background: var(--verde-escuro); color: white; }
  .badge-filtros-ativos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 50px;
    background: #e05d5d;
    color: white;
    font-size: 0.7rem;
    font-weight: 800;
  }
  .filtros-avancados {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eee;
  }
  body.dark-mode .filtros-avancados { border-top-color: #333; }

  .btn-cadastro {
    display: block;
    width: 100%;
    background: var(--verde-whats);
    color: white;
    text-align: center;
    padding: 15px;
    margin: 18px 0;
    border-radius: 12px;
    border: none;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
  }

  .result-header {
    font-size: 0.95rem;
    color: #1c1c1c;
    margin: 4px 0 12px;
  }
  .result-header b { color: var(--verde-escuro); }

  .card-profissional {
    background: var(--cinza-card);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
  }
  .card-profissional > .badge-pendente { width: 100%; order: -1; }
  .card-profissional > .info { flex: 1 1 auto; min-width: 0; }
  .card-profissional img.avatar {
    width: 58px; height: 58px;
    border-radius: 50%;
    object-fit: cover;
    background: #eee;
    flex-shrink: 0;
  }
  .card-profissional .info { flex: 1; min-width: 0; }
  .card-profissional .info h3 { font-size: 1.02rem; color: #1c1c1c; }
  .card-profissional .info .categoria { color: var(--verde-escuro); font-size: 0.85rem; font-weight: 600; margin-top: 2px; }
  .card-profissional .info .local { color: var(--texto-sub); font-size: 0.8rem; margin-top: 2px; }
  .stars { color: var(--amarelo); font-size: 0.85rem; margin-top: 4px; }
  .stars .num { color: #444; font-weight: 600; margin-left: 3px; }
  .btn-zap {
    display: inline-block;
    background: var(--verde-whats);
    color: white;
    border: none;
    padding: 9px 12px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.8rem;
    margin-top: 8px;
    cursor: pointer;
    text-decoration: none;
  }

  .empty { text-align: center; padding: 40px 20px; color: var(--texto-sub); }
  .loading { text-align: center; padding: 30px; color: var(--texto-sub); font-size: 0.85rem; }

  .config-warning {
    background: #fff3cd;
    border: 1.5px solid #d97706;
    color: #7c4a03;
    font-size: 0.78rem;
    padding: 12px 14px;
    border-radius: 8px;
    margin: 15px 0;
    line-height: 1.5;
  }

  #cadastro-form {
    display: none;
    background: var(--cinza-card);
    border-radius: 14px;
    padding: 16px;
    margin: 18px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  }
  #cadastro-form.open { display: block; }
  #cadastro-form .field { margin-bottom: 10px; }
  #cadastro-form label { display: block; font-size: 0.78rem; font-weight: 600; color: #444; margin-bottom: 4px; }
  #cadastro-form input, #cadastro-form select {
    width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 0.9rem;
  }
  #cadastro-form .row2 { display: flex; gap: 8px; }
  #cadastro-form .row2 .field { flex: 1; }
  .form-actions { display: flex; gap: 10px; margin-top: 8px; align-items: center; }
  .btn-salvar { background: var(--verde-whats); color: white; border: none; padding: 10px 16px; border-radius: 8px; font-weight: 700; cursor: pointer; }
  .btn-cancelar { background: transparent; color: #555; border: 1.5px solid #ccc; padding: 10px 16px; border-radius: 8px; font-weight: 600; cursor: pointer; }
  .form-msg { font-size: 0.78rem; color: #a4402f; }

/* Autenticação */
.auth-box, .auth-box-logged {
  background: var(--cinza-card);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: -14px;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.auth-box-logged {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  flex-wrap: wrap;
  gap: 8px;
}
.auth-box-logged > div { display: flex; gap: 8px; }
.auth-row { display: flex; gap: 8px; margin-bottom: 8px; }
.auth-row input {
  flex: 1;
  padding: 9px 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 0.85rem;
}
.auth-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-auth {
  background: var(--verde-whats);
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
}
.btn-auth-outline {
  background: transparent;
  color: var(--verde-escuro);
  border: 1.5px solid var(--verde-escuro);
  padding: 7px 13px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
}
.auth-msg { font-size: 0.75rem; color: #a4402f; }

/* Ações do dono no card */
.owner-actions { display: flex; gap: 2px; flex-shrink: 0; }
.owner-actions .icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  padding: 2px 5px;
  border-radius: 4px;
  color: var(--verde-escuro);
}
.owner-actions .icon-btn:hover { background: var(--cinza-fundo); }

.forgot-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--verde-escuro);
  text-decoration: underline;
}

.card-pendente { opacity: 0.85; border: 1.5px dashed #d97706; }
.badge-pendente {
  background: #fff3cd;
  color: #7c4a03;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  margin-bottom: 6px;
  display: inline-block;
}

.link-pagar {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 12px 0 0;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--verde-whats);
  color: white;
  font-weight: 800;
  font-size: 0.95rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: none;
}
.link-pagar + .link-pagar { margin-top: 14px; }
.link-pagar:hover { filter: brightness(1.05); }

.contatos-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.btn-zap-extra { background: var(--verde-escuro); font-size: 0.75rem; padding: 8px 11px; }

.cep-msg { font-size: 0.75rem; color: var(--verde-escuro); margin-top: 4px; display: block; }

.contato-extra-linha { display: flex; gap: 6px; margin-bottom: 6px; }
.contato-extra-linha input { flex: 1; padding: 8px 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 0.85rem; }
.ce-remover {
  background: transparent;
  border: 1.5px solid var(--danger, #a4402f);
  color: var(--danger, #a4402f);
  border-radius: 6px;
  width: 34px;
  cursor: pointer;
  flex-shrink: 0;
}
.btn-add-contato {
  background: transparent;
  border: 1.5px dashed var(--verde-escuro);
  color: var(--verde-escuro);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
}

.foto-msg { font-size: 0.78rem; color: var(--verde-escuro); display: block; margin-top: 4px; }
.foto-preview { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; margin-top: 8px; border: 2px solid var(--verde-whats); }

.foto-ou { display: block; font-size: 0.75rem; color: #8a8270; margin: 8px 0 4px; text-transform: none; letter-spacing: normal; font-family: 'Segoe UI', sans-serif; }

.foto-botoes { display: flex; gap: 8px; }
.btn-foto-opcao {
  flex: 1;
  text-align: center;
  background: transparent;
  border: 1.5px dashed var(--verde-escuro);
  color: var(--verde-escuro);
  padding: 10px 8px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-foto-opcao:hover { background: var(--cinza-fundo); }

@media (max-width: 420px) {
  .filtros { flex-direction: column; }
  .filtros select, .filtros input { width: 100%; }
  .auth-row { flex-direction: column; }
  .auth-row input { width: 100%; }
  .row2 { flex-direction: column; }
  .foto-botoes { flex-direction: column; }
  .auth-actions { flex-wrap: wrap; }
}

.review-count { font-size: 0.72rem; color: #8a8270; }
.sem-avaliacao { font-size: 0.8rem; color: #8a8270; font-style: italic; }
.link-avaliar {
  background: none;
  border: none;
  color: var(--verde-escuro);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  margin-left: 6px;
  padding: 0;
}
.review-box {
  background: var(--cinza-fundo);
  border-radius: 10px;
  padding: 10px;
  margin-top: 8px;
}
.review-stars { font-size: 1.4rem; color: var(--amarelo); cursor: pointer; margin-bottom: 6px; }
.review-stars span { margin-right: 2px; }
.review-input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-bottom: 6px;
}
.review-actions { display: flex; align-items: center; gap: 10px; }
.review-msg { font-size: 0.75rem; color: var(--verde-escuro); }

.termos-check {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.75rem;
  color: #555;
  margin-bottom: 10px;
  cursor: pointer;
}
.termos-check input { margin-top: 2px; flex-shrink: 0; }
.termos-check span { line-height: 1.5; }
.termos-check a { color: var(--verde-escuro); font-weight: 600; }

.rodape-legal { text-align: center; font-size: 0.75rem; color: #8a8270; margin: 30px 0 10px; }
.rodape-legal a { color: #8a8270; margin: 0 6px; }

.link-cancelar {
  background: none;
  border: none;
  color: var(--danger, #a4402f);
  font-size: 0.72rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin-top: 4px;
  display: block;
}

.acoes-conta-owner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.acoes-conta-owner .link-cancelar {
  display: inline-block;
  margin-top: 4px;
}

.link-denunciar {
  background: none;
  border: none;
  color: #8a8270;
  font-size: 0.7rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin-top: 4px;
  display: block;
}
.denuncia-box {
  background: #fff3cd;
  border-radius: 10px;
  padding: 10px;
  margin-top: 8px;
}

.btn-auth-outline.ativo { background: var(--verde-escuro); color: white; }

/* CORRIGIDO: faltava flex-wrap aqui — era a causa direta do print enviado.
   Sem quebra de linha, os botões "Compartilhar / Denunciar / Reclamar-Sugerir"
   ficavam todos numa linha só, estourando a largura da tela no celular e
   empurrando a página inteira pro lado (overflow horizontal). */
.btn-opcoes-card {
  background: rgba(18,140,126,0.08);
  border: 1.5px solid var(--verde-escuro);
  color: var(--verde-escuro);
  padding: 7px 16px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 8px;
  display: inline-block;
}
.btn-opcoes-card:hover { background: rgba(18,140,126,0.16); }
body.dark-mode .btn-opcoes-card { background: rgba(37,211,102,0.12); border-color: #4fc3a1; color: #4fc3a1; }

.card-acoes-extra {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.link-compartilhar {
  background: none;
  border: none;
  color: var(--verde-escuro);
  font-size: 0.7rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.link-voltar-busca {
  background: var(--verde-escuro);
  color: white;
  border: none;
  padding: 4px 10px;
  border-radius: 50px;
  font-size: 0.72rem;
  cursor: pointer;
  margin-left: 8px;
}

.ja-avaliou { font-size: 0.72rem; color: #8a8270; font-style: italic; margin-left: 6px; }

.btn-baixar-app {
  display: block;
  text-align: center;
  background: var(--verde-escuro);
  color: white;
  padding: 12px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  margin: 12px 0;
}

.busca-com-icone { position: relative; flex: 1; }
.busca-com-icone .icone-lupa {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  cursor: pointer;
}
.busca-com-icone input { padding-left: 36px !important; width: 100%; box-sizing: border-box; }

.link-migrar {
  display: block;
  background: #fff3cd;
  color: #7c4a03;
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 8px;
  margin-top: 6px;
}

.link-ver-produtos {
  display: block;
  text-align: center;
  background: var(--verde-escuro);
  color: white;
  padding: 8px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  margin-top: 8px;
}

.menu-compartilhar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  background: #f8f8f8;
  border-radius: 8px;
  padding: 8px;
}
.opcao-rede {
  display: block;
  text-align: center;
  padding: 6px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  color: white;
}
.opcao-rede.whatsapp { background: #25D366; }
.opcao-rede.facebook { background: #1877F2; }
.opcao-rede.twitter { background: #000000; }
.opcao-rede.telegram { background: #229ED9; }
.opcao-rede.copiar { background: #666; }

.cupom-row { display: flex; gap: 6px; margin-top: 8px; }
.cupom-input {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #d97706;
  border-radius: 6px;
  font-size: 0.75rem;
}
.btn-cupom {
  background: #d97706;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}
.cupom-msg { display: block; font-size: 0.72rem; color: #7c4a03; margin-top: 4px; }

.destaque-vitrine {
  margin: 14px 0;
  background: linear-gradient(135deg, #128C7E, #075E54);
  border-radius: 14px;
  padding: 14px;
}
.destaque-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.destaque-header h2 { color: white; font-size: 1rem; font-weight: 800; }
.ver-vitrine-link { color: #d4f5e3; font-size: 0.75rem; font-weight: 700; text-decoration: underline; }
.destaque-linhas {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.destaque-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.destaque-carregando { color: white; font-size: 0.8rem; padding: 10px; }
.destaque-card {
  flex: 0 0 auto;
  width: 130px;
  background: white;
  border-radius: 10px;
  overflow: hidden;
}
.destaque-card img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #eee; }
.destaque-info { padding: 8px; }
.destaque-nome { font-size: 0.78rem; font-weight: 700; color: #1c1c1c; line-height: 1.25; }
.destaque-preco { font-size: 0.75rem; color: var(--verde-escuro); font-weight: 700; margin-top: 2px; }
.destaque-empresa { font-size: 0.66rem; color: #8a8270; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.destaque-btn {
  display: block;
  text-align: center;
  background: var(--verde-whats);
  color: white;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 5px;
  border-radius: 6px;
  margin-top: 6px;
  text-decoration: none;
}

.link-ver-denuncias {
  background: none;
  border: none;
  color: #a4402f;
  font-size: 0.72rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin-top: 4px;
  display: block;
}
.denuncias-recebidas-box {
  background: #fdf0ee;
  border-radius: 10px;
  padding: 8px;
  margin-top: 6px;
}
.denuncia-carregando { font-size: 0.75rem; color: #888; padding: 4px; }
.denuncia-item {
  background: white;
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 6px;
  font-size: 0.78rem;
}
.denuncia-item:last-child { margin-bottom: 0; }
.denuncia-motivo { font-weight: 700; color: #a4402f; }
.denuncia-descricao { color: #555; margin-top: 3px; }
.denuncia-data { color: #999; font-size: 0.68rem; margin-top: 3px; }

.stat-visualizacoes { font-size: 0.72rem; color: #666; margin-top: 4px; font-weight: 600; }

.link-denunciar-produto {
  background: none;
  border: none;
  color: #8a8270;
  font-size: 0.68rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin-top: 4px;
  display: block;
}

.link-mensagem {
  background: none;
  border: none;
  color: var(--verde-escuro);
  font-size: 0.72rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin-top: 4px;
  display: block;
}
.mensagem-box {
  background: #e8f4fd;
  border-radius: 10px;
  padding: 10px;
  margin-top: 8px;
}
.mensagens-recebidas-box {
  background: #e8f4fd;
  border-radius: 10px;
  padding: 8px;
  margin-top: 6px;
}

.icon-btn-favorito {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 2px 4px;
  flex-shrink: 0;
}
.btn-filtro-favoritos {
  width: 100%;
  margin-top: 10px;
  padding: 9px;
  background: transparent;
  border: 1.5px dashed #e05d5d;
  color: #c23a3a;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
}
.btn-filtro-favoritos.ativo { background: #e05d5d; color: white; border-style: solid; }

.aviso-espera {
  background: #e8f4fd;
  color: #0a4a6b;
  font-size: 0.72rem;
  padding: 8px 10px;
  border-radius: 8px;
  margin-top: 8px;
  line-height: 1.4;
}

.historico-busca {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 8px 0 4px;
}
.historico-label { font-size: 0.72rem; color: #888; margin-right: 2px; }
.chip-historico {
  background: white;
  border: 1px solid var(--line);
  color: var(--navy);
  padding: 4px 10px;
  border-radius: 50px;
  font-size: 0.72rem;
  cursor: pointer;
}
.chip-historico:hover { background: var(--paper); }
.chip-historico-limpar {
  background: none;
  border: none;
  color: #a4402f;
  font-size: 0.7rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 4px;
}

/* ---------- MODO ESCURO ---------- */
body.dark-mode {
  --cinza-fundo: #121212;
  --cinza-card: #1e1e1e;
  color: #e8e8e8;
}
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background: #2a2a2a;
  color: #e8e8e8;
  border-color: #444;
}
body.dark-mode .card-produto .nome,
body.dark-mode .destaque-nome,
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode .info h3,
body.dark-mode .nome-empresa {
  color: #f0f0f0;
}
body.dark-mode .categoria,
body.dark-mode .empresa,
body.dark-mode .local,
body.dark-mode .destaque-empresa,
body.dark-mode .medida-produto,
body.dark-mode .categoria-produto {
  color: #bbb;
}
body.dark-mode .vitrine-busca,
body.dark-mode .busca-container,
body.dark-mode #produto-form,
body.dark-mode #cadastro-form,
body.dark-mode .auth-box,
body.dark-mode .auth-box-logged,
body.dark-mode .card-pacote,
body.dark-mode .contato-card,
body.dark-mode .app-card {
  background: var(--cinza-card);
  color: #e8e8e8;
}
body.dark-mode .filtros select,
body.dark-mode .vitrine-filtros select,
body.dark-mode .destaque-scroll .destaque-card {
  background: #2a2a2a;
  color: #e8e8e8;
  border-color: #444;
}
body.dark-mode .btn-modo-escuro { background: #333; color: #f0d020; }

.btn-modo-escuro {
  background: rgba(255,255,255,0.25);
  border: 1.5px solid rgba(255,255,255,0.6);
  color: white;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  cursor: pointer;
  margin-left: 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
.btn-modo-escuro:hover { background: rgba(255,255,255,0.4); }

.btn-modo-escuro-solto {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px auto 0;
  background: white;
  border: 1.5px solid var(--line, #d8cdb6);
  color: #555;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.btn-modo-escuro-solto:hover { background: #f5f5f5; }
body.dark-mode .btn-modo-escuro-solto { background: #333; color: #f0d020; border-color: #555; }

.selo-verificado { font-size: 0.85rem; }
.selo-premium {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: linear-gradient(90deg, #d4af37, #f4d570, #d4af37);
  color: #4a3800;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 50px;
  vertical-align: middle;
  box-shadow: 0 1px 3px rgba(212,175,55,0.5);
}

.lista-avaliacoes {
  background: var(--cinza-fundo);
  border-radius: 10px;
  padding: 8px;
  margin-top: 6px;
}
.avaliacao-item {
  background: white;
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 6px;
  font-size: 0.8rem;
}
.avaliacao-item:last-child { margin-bottom: 0; }
.avaliacao-estrelas { color: var(--amarelo); font-size: 0.85rem; }
.avaliacao-comentario { color: #444; margin-top: 3px; }
.avaliacao-data { color: #999; font-size: 0.68rem; margin-top: 3px; }
.resposta-empresa {
  background: #e8f4fd;
  color: #0a4a6b;
  border-radius: 6px;
  padding: 6px 8px;
  margin-top: 6px;
  font-size: 0.75rem;
}
.responder-box { margin-top: 6px; }

.auth-box-discreto { margin: 14px 0; }
.auth-toggle-link {
  width: 100%;
  background: rgba(37,211,102,0.08);
  border: 1px solid rgba(37,211,102,0.3);
  color: var(--verde-escuro, #128C7E);
  padding: 9px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.auth-toggle-link:hover { background: rgba(37,211,102,0.14); }
#auth-form-fields { margin-top: 10px; padding: 12px; background: var(--cinza-card); border-radius: 10px; }

.banner-cadastro-rapido {
  display: block;
  text-align: center;
  background: linear-gradient(90deg, #128C7E, #25D366);
  color: white;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
}

.campo-com-limpar { position: relative; flex: 1 1 30%; min-width: 90px; }
.campo-com-limpar input, .campo-com-limpar select { padding-right: 28px !important; width: 100%; min-width: 0; box-sizing: border-box; }
.btn-limpar-campo {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: #ddd;
  color: #555;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.btn-limpar-campo:hover { background: #ccc; }
.busca-com-icone { position: relative; }
.btn-limpar-busca { right: 10px; }
.busca-com-icone input { padding-right: 30px; }

/* ---------- STORIES / NOVIDADES 24H ---------- */

.stories-linha {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 6px 4px 2px;
  margin-top: 4px;
}
.story-bolinha {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  flex-shrink: 0;
  width: 72px;
}
.story-bolinha img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid;
  border-image: linear-gradient(45deg, #e91e63, #ff9800, #ffc107) 1;
  padding: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.story-bolinha span {
  font-size: 0.68rem;
  font-weight: 600;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 62px;
}

.story-fotos-preview { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.story-foto-mini { position: relative; width: 60px; height: 60px; }
.story-foto-mini img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.story-foto-mini button {
  position: absolute; top: -6px; right: -6px;
  background: #a4402f; color: white; border: none; border-radius: 50%;
  width: 18px; height: 18px; font-size: 0.65rem; cursor: pointer; padding: 0;
}

.story-viewer {
  position: fixed; inset: 0; background: rgba(0,0,0,0.92);
  z-index: 999; display: flex; align-items: center; justify-content: center;
  padding: 10px; overflow-y: auto;
}
.story-viewer-conteudo {
  position: relative; width: 100%; max-width: 420px; max-height: 92vh;
  background: #111; border-radius: 14px;
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
}
.story-progresso { height: 3px; background: rgba(255,255,255,0.25); }
.story-progresso-barra { height: 100%; background: white; transition: width 0.3s linear; }
.story-empresa-nome { color: white; font-weight: 700; font-size: 0.85rem; padding: 10px 14px 4px; position: absolute; top: 6px; left: 8px; z-index: 2; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.story-fechar {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  background: rgba(0,0,0,0.4); color: white; border: none; border-radius: 50%;
  width: 28px; height: 28px; font-size: 0.9rem; cursor: pointer;
}
.story-foto-area { position: relative; width: 100%; max-height: 42vh; aspect-ratio: 9/13; background: #000; }
.story-foto { width: 100%; height: 100%; object-fit: contain; }
.story-tap-esquerda, .story-tap-direita { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 1; cursor: pointer; }
.story-tap-esquerda { left: 0; }
.story-tap-direita { right: 0; }
.story-texto {
  color: white; font-size: 0.85rem; padding: 30px 14px 12px; min-height: 20px;
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
  white-space: pre-line;
}
.story-acoes { display: flex; gap: 8px; padding: 10px 14px 16px; flex-wrap: wrap; flex-shrink: 0; }
.story-btn-comprar, .story-btn-produto {
  flex: 1; text-align: center; padding: 10px; border-radius: 8px;
  font-size: 0.8rem; font-weight: 700; text-decoration: none;
}
.story-btn-comprar { background: var(--verde-whats); color: white; }
.story-btn-produto { background: #6b46c1; color: white; }
.story-btn-compartilhar {
  flex-basis: 100%;
  text-align: center; padding: 10px; border-radius: 8px;
  font-size: 0.8rem; font-weight: 700; border: none; cursor: pointer;
  background: #444; color: white;
}
.story-acoes .menu-compartilhar {
  flex-basis: 100%;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(55px, 1fr));
  gap: 6px !important;
}
.story-acoes .menu-compartilhar .opcao-rede {
  padding: 8px 4px;
  font-size: 0.65rem;
}

/* ---------- VÍDEOS EM DESTAQUE (thumbnail + visualizador tela cheia) ---------- */
.video-thumb-card { position: relative; cursor: pointer; }
.video-thumb-card video { width: 100%; aspect-ratio: 1; object-fit: cover; background: #000; pointer-events: none; }
.video-thumb-play {
  position: absolute; top: 8px; right: 8px;
  background: rgba(0,0,0,0.55); color: white; border-radius: 50%;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
}

.video-viewer {
  position: fixed; inset: 0; background: rgba(0,0,0,0.95);
  z-index: 999; display: none; align-items: center; justify-content: center;
  padding: 10px;
}
.video-viewer.aberto { display: flex; }
.video-viewer-conteudo {
  position: relative; width: 100%; max-width: 460px; max-height: 94vh;
  background: #111; border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
}
.video-viewer-segmentos { display: flex; gap: 4px; padding: 8px 10px 0; }
.video-viewer-segmento { flex: 1; height: 3px; background: rgba(255,255,255,0.25); border-radius: 4px; }
.video-viewer-segmento.preenchido { background: white; }
.video-viewer-nome {
  color: white; font-weight: 700; font-size: 0.85rem; padding: 8px 14px 4px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.video-viewer-area { position: relative; width: 100%; background: #000; }
.video-viewer-area video { width: 100%; max-height: 60vh; display: block; background: #000; }
.video-viewer-seta {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.35); color: white; border: none; border-radius: 50%;
  width: 34px; height: 34px; font-size: 1.4rem; cursor: pointer; z-index: 2; line-height: 1;
}
.video-viewer-seta.esquerda { left: 8px; }
.video-viewer-seta.direita { right: 8px; }
.video-viewer-info { padding: 10px 14px 4px; }
.video-viewer-titulo { color: white; font-size: 0.9rem; font-weight: 600; }
.video-viewer-meta { color: #bbb; font-size: 0.72rem; margin-top: 3px; }

.minhas-novidades { margin-top: 8px; }
.minhas-novidades-label { font-size: 0.7rem; color: #888; margin-bottom: 4px; }
.minhas-novidades-lista { display: flex; gap: 6px; flex-wrap: wrap; }
.minha-novidade-item { position: relative; width: 46px; height: 46px; }
.minha-novidade-item img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 8px;
  border: 2px solid #e91e63;
}
.minha-novidade-btn-excluir {
  position: absolute; top: -6px; right: -6px;
  background: #a4402f; color: white; border: none; border-radius: 50%;
  width: 16px; height: 16px; font-size: 0.6rem; cursor: pointer; padding: 0; line-height: 1;
}
.minha-novidade-btn-compartilhar {
  position: absolute; bottom: -6px; right: -6px;
  background: #128C7E; color: white; border: none; border-radius: 50%;
  width: 16px; height: 16px; font-size: 0.55rem; cursor: pointer; padding: 0; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}

.story-textarea-bonito {
  width: 100%;
  border: 1.5px solid #e91e63;
  border-radius: 12px;
  padding: 12px;
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
  background: linear-gradient(180deg, #fff, #fff5f8);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.story-textarea-bonito:focus {
  outline: none;
  border-color: #ad1457;
  box-shadow: 0 0 0 3px rgba(233,30,99,0.15);
}
.story-textarea-bonito::placeholder { color: #b0879a; }

.story-add-circulo {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  border: 2px dashed rgba(255,255,255,0.8);
  color: white;
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.story-bolinha-add:hover .story-add-circulo { background: rgba(255,255,255,0.4); }

.acoes-empresa-coluna {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.acoes-empresa-coluna .link-ver-produtos,
.acoes-empresa-coluna .btn-zap {
  margin-top: 0 !important;
}

.btn-seguir {
  background: #6b46c1;
  color: white;
  border: none;
  padding: 4px 10px;
  border-radius: 50px;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
}
.btn-seguir.seguindo { background: #e0d6f5; color: #6b46c1; }

/* ---------- TELA DE BOAS-VINDAS (primeira visita) ---------- */
.welcome-gate {
  position: fixed; inset: 0; z-index: 1000;
  background: linear-gradient(160deg, #128C7E, #25D366);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; overflow-y: auto;
}
.welcome-gate-conteudo {
  width: 100%; max-width: 400px;
  background: white; border-radius: 16px; padding: 28px 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.welcome-logo { font-size: 2rem; font-weight: 800; color: var(--verde-escuro); text-align: center; }
.welcome-sub { font-size: 0.85rem; color: #666; text-align: center; margin-top: 4px; margin-bottom: 18px; }
.welcome-beneficios {
  background: #fff3cd; color: #7c4a03; font-size: 0.82rem;
  padding: 12px; border-radius: 10px; margin-bottom: 18px; line-height: 1.4;
}
.welcome-termos { font-size: 0.72rem; }
.welcome-btn-outline { border-color: var(--verde-escuro); color: var(--verde-escuro); }
.btn-pular-welcome {
  display: block; width: 100%; text-align: center; margin-top: 18px;
  background: none; border: none; color: #888; font-size: 0.82rem;
  text-decoration: underline; cursor: pointer; padding: 8px;
}
.btn-pular-welcome-grande {
  display: block; width: 100%; text-align: center;
  background: var(--verde-whats); color: white; border: none;
  padding: 14px; border-radius: 10px; font-size: 1rem; font-weight: 800;
  cursor: pointer; box-shadow: 0 3px 8px rgba(37,211,102,0.35);
}
.welcome-divisor { display: flex; align-items: center; gap: 10px; margin: 16px 0; }
.welcome-divisor::before, .welcome-divisor::after { content: ''; flex: 1; height: 1px; background: #ddd; }
.welcome-divisor span { font-size: 0.75rem; color: #999; white-space: nowrap; }

.btn-toggle-notificar {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 9px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid #ccc;
  background: #f2f2f2;
  color: #666;
}
.btn-toggle-notificar.ativado {
  background: #e8f9ee;
  border-color: var(--verde-whats);
  color: var(--verde-escuro);
}
.notificar-msg { display: block; font-size: 0.7rem; margin-top: 4px; text-align: center; }

.campo-com-olho { position: relative; flex: 1; }
.campo-com-olho input { width: 100%; padding-right: 34px !important; box-sizing: border-box; }
.btn-ver-senha {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 4px;
  line-height: 1;
}

/* Versão do botão de login/cadastro pensada pro cabeçalho verde */
.auth-box-discreto-header { max-width: 400px; margin: 10px auto 0; }
.auth-toggle-link-header {
  width: 100%;
  background: white;
  border: none;
  color: var(--verde-escuro);
  padding: 10px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.auth-toggle-link-header:hover { background: #f0f0f0; }
.auth-box-discreto-header #auth-form-fields {
  margin-top: 10px;
  padding: 14px;
  background: white;
  border-radius: 10px;
  text-align: left;
}

.auth-box-logged-header {
  max-width: 400px;
  margin: 10px auto 0;
  background: white;
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.auth-box-logged-header > span { font-size: 0.8rem; color: #333; text-align: center; }
.auth-box-logged-header > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.btn-auth-outline-header {
  background: none;
  border: 1.5px solid var(--verde-escuro);
  color: var(--verde-escuro);
  padding: 10px 16px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.btn-auth-outline-header:hover { background: rgba(18,140,126,0.08); }

.contagem-seguidores { font-size: 0.75rem; color: #6b46c1; font-weight: 700; margin-top: 2px; cursor: pointer; }
.contagem-seguidores .link-ver-lista { text-decoration: underline; font-weight: 600; }
.lista-seguidores {
  margin-top: 6px;
  background: #f8f6fc;
  border-radius: 8px;
  padding: 8px 10px;
  max-height: 160px;
  overflow-y: auto;
}
.lista-seguidores-item {
  font-size: 0.75rem;
  color: #444;
  padding: 4px 0;
  border-bottom: 1px solid #e8e0f5;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.lista-seguidores-item:last-child { border-bottom: none; }
.lista-seguidores-data { color: #999; font-size: 0.68rem; white-space: nowrap; }
.lista-seguidores-vazio { font-size: 0.75rem; color: #999; font-style: italic; }

.campo-com-prefixo { position: relative; }
.campo-com-prefixo .prefixo-rs {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  color: #444;
  font-size: 0.9rem;
  pointer-events: none;
}
.campo-com-prefixo input { padding-left: 34px !important; }

.painel-verificacao {
  background: #e3f2fd;
  border: 1.5px solid #90caf9;
  border-radius: 10px;
  padding: 12px;
  margin-top: 10px;
}
.painel-verificacao-titulo { font-weight: 700; color: #0d47a1; margin-bottom: 8px; font-size: 0.85rem; }
.verificacao-item { font-size: 0.78rem; color: #333; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.btn-verificacao-mini {
  background: #1565c0;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}
.verificacao-rodape { font-size: 0.7rem; color: #555; margin-top: 8px; font-style: italic; }

.contador-plataforma {
  text-align: center;
  font-size: 0.78rem;
  color: #666;
  padding: 6px 15px;
  font-weight: 600;
}

.empty-com-cta { padding: 40px 20px; }
.empty-icone { font-size: 2.5rem; margin-bottom: 8px; }
.empty-sugestao { font-size: 0.82rem; color: #999; margin-top: 4px; }
.btn-cadastro-empty {
  display: inline-block;
  margin-top: 14px;
  background: var(--verde-whats);
  color: white;
  padding: 10px 18px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
}

.horario-dias-check { display: flex; flex-wrap: wrap; gap: 8px; }
.horario-dias-check label { display: flex; align-items: center; gap: 3px; font-size: 0.78rem; cursor: pointer; }
.horario-dias-check input { width: 14px; height: 14px; cursor: pointer; }

.filtros-rapidos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip-filtro-rapido {
  background: white;
  border: 1.5px solid #ddd;
  color: #555;
  padding: 6px 12px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}
.chip-filtro-rapido.ativo { background: var(--verde-whats); border-color: var(--verde-whats); color: white; }

.distancia-km { font-size: 0.75rem; color: #0a4a6b; font-weight: 700; margin-top: 2px; }
.selo-horario { font-size: 0.72rem; font-weight: 700; margin-top: 2px; }
.selo-horario.aberto { color: #1a7a3c; }
.selo-horario.fechado { color: #a4402f; }

.selo-verificado-premium {
  display: inline-flex; align-items: center; gap: 2px;
  background: linear-gradient(90deg, #d4af37, #f4d570, #d4af37);
  color: #4a3800; font-size: 0.62rem; font-weight: 800;
  padding: 2px 8px; border-radius: 50px; vertical-align: middle;
  box-shadow: 0 1px 3px rgba(212,175,55,0.5);
}
.selo-ativo { font-size: 0.72rem; color: #1a7a3c; font-weight: 700; margin-top: 2px; }
.selo-sem-denuncia { font-size: 0.7rem; color: #1a7a3c; margin-top: 2px; }

.btn-orcamento { background: #0a4a6b; }
.orcamento-bloco {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.orcamento-bloco .btn-orcamento {
  align-self: flex-start;
  margin-top: 0;
}
.orcamento-opcoes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.orcamento-opcoes .btn-zap {
  margin-top: 0;
}

.selo-disponibilidade { font-size: 0.75rem; font-weight: 700; margin-top: 2px; }
.selo-disponibilidade.disponivel { color: #1a7a3c; }
.selo-disponibilidade.atendimento { color: #b8860b; }
.link-trocar-status { text-decoration: underline; font-weight: 600; }

.link-ver-feed {
  display: block;
  text-align: center;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: underline;
  padding: 4px 0 8px;
}

.selo-impulsionado {
  display: inline-block;
  background: linear-gradient(90deg, #1c1c1c, #444);
  color: #ffd700;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 50px;
  margin-top: 4px;
}

.btn-chat-flutuante {
  position: fixed;
  bottom: 24px;
  right: max(24px, calc(50vw - 240px + 24px));
  height: 52px;
  padding: 0 20px 0 16px;
  border-radius: 50px;
  background: #6b46c1;
  color: white;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 1.6rem;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(107,70,193,0.7);
  z-index: 99999;
  border: 3px solid white;
}
.btn-chat-flutuante-label {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.2px;
}

/* CORRIGIDO: ficava empilhado em cima do Papo (bottom: 88px com o mesmo
   "right" do Papo). Agora fica na mesma altura (bottom: 24px) e deslocado
   pra esquerda (right maior) pra sobrar espaço do Papo do lado direito. */
.btn-zeca-flutuante {
  position: fixed;
  bottom: 24px;
  right: max(190px, calc(50vw - 240px + 190px));
  height: 52px;
  padding: 0 20px 0 16px;
  border-radius: 50px;
  background: #f59e0b;
  color: white;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 1.6rem;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(245,158,11,0.7);
  z-index: 99999;
  border: 3px solid white;
  cursor: pointer;
}
.btn-zeca-flutuante-label {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.2px;
}

#painel-zeca {
  display: none;
  position: fixed;
  bottom: 24px;
  /* Centralizado de verdade, horizontalmente, em qualquer largura de tela
     (celular ou desktop) — "left:0; right:0; margin:auto" com largura fixa
     é a forma confiável de centralizar um elemento "position:fixed" sem
     depender de contar viewport na mão (a fórmula anterior, baseada em
     calc(50vw - ...), presumia uma largura de tela que nem sempre batia
     com a tela de verdade, deixando o painel torto/cortado em alguns
     aparelhos). */
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: min(360px, calc(100vw - 32px));
  height: min(520px, calc(100vh - 100px));
  background: white;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  z-index: 100000;
  flex-direction: column;
  overflow: hidden;
}
#painel-zeca .zeca-cabecalho {
  background: #f59e0b;
  color: white;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 800;
}
#painel-zeca .zeca-cabecalho small {
  display: block;
  font-weight: 400;
  font-size: 0.7rem;
  opacity: 0.9;
}
#painel-zeca .zeca-fechar {
  background: rgba(255,255,255,0.2);
  border: none;
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
}
#zeca-mensagens {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #f7f5f0;
}
.zeca-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.88rem;
  line-height: 1.4;
}
.zeca-msg-zeca {
  background: white;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.zeca-msg-pessoa {
  background: #f59e0b;
  color: white;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
#painel-zeca .zeca-rodape {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid #eee;
  background: white;
}
#zeca-input {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 10px 16px;
  font-size: 0.9rem;
  outline: none;
}
#zeca-enviar {
  background: #f59e0b;
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.zeca-mic-btn {
  background: #eee;
  color: #555;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.zeca-mic-btn.zeca-mic-ativo {
  background: #a4402f;
  color: white;
  animation: zeca-pulso 1s infinite;
}
@keyframes zeca-pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(164,64,47,0.5); }
  50% { box-shadow: 0 0 0 6px rgba(164,64,47,0); }
}

.zeca-link-pdf {
  align-self: flex-start;
  background: none;
  border: 1px solid #f59e0b;
  color: #f59e0b;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  cursor: pointer;
  margin: -6px 0 4px;
}

.zeca-resultados {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: flex-start;
  max-width: 85%;
}
.zeca-card-resultado {
  background: white;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.zeca-card-nome {
  font-weight: 700;
  font-size: 0.85rem;
  color: #1c1c1c;
}
.zeca-card-info {
  font-size: 0.75rem;
  color: #888;
  margin: 2px 0 8px;
}
.zeca-card-btn {
  display: inline-block;
  background: #25D366;
  color: white;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 20px;
  text-decoration: none;
}

#painel-zeca.zeca-arrastando {
  outline: 3px dashed #f59e0b;
  outline-offset: -6px;
}

/* Navegação entre os gerenciadores (Meu Lar / Meu Agro / Empresa /
   Financeiro) — cada um desses módulos só tinha um "← Voltar" pra
   index.html, então pra ir de um pro outro a pessoa precisava voltar
   pra home toda vez. Essa faixinha fica logo abaixo do topo colorido
   de cada página, com link pros outros 3 módulos (nunca pro próprio,
   pra não linkar a página em que já está). */
.gz-cross-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 15px;
  background: white;
  border-bottom: 1px solid #eee;
}
.gz-cross-nav a {
  font-size: 0.78rem;
  font-weight: 700;
  color: #555;
  background: #f7f5f0;
  border: 1px solid #e5e0d5;
  padding: 6px 12px;
  border-radius: 20px;
  text-decoration: none;
  white-space: nowrap;
}
.gz-cross-nav a:hover { border-color: #999; color: #222; }