/* ═══════════════════════════════════════════════════════════════════
   PROPOZI — CAMADA MOBILE · SHELL
   ───────────────────────────────────────────────────────────────────
   DUAS COISAS ACONTECEM AQUI:

   1) A BARRA DE ABAS DE BAIXO VOLTA A EXISTIR.
      Ela já está pronta no HTML (<nav id="mobile-bottom-nav">, linha
      ~1879 do index.html) e já ligada no ui.js — clicar troca de seção
      e o item ativo sincroniza sozinho. Só que o styles.css a desligou
      ("DESATIVADA, substituída por header fixo", linha ~7132). Aqui ela
      é reativada só no celular, com o layout que faltava.

   2) O APP PARA DE ESTOURAR A LARGURA DA TELA.
      A causa do zoom out é a faixa de indicadores: cinco cartões num
      flex sem "min-width: 0", que cresce até ~690px numa tela de 393px
      e leva o resto do layout junto. Por isso o botão "Criar Proposta"
      aparece cortado.

   REGRA DE OURO: nada aqui vaza pro desktop. Tudo vive dentro do
   @media (max-width: 900px), fora a regra que esconde a barra no
   desktop. Apagou o arquivo, o app volta ao que era.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Altura da barra de abas. Mudou aqui, muda em todo lugar.
     ZERO desde 19/08/2026: a barra de abas saiu (ver abaixo). Todas as
     contas de espaçamento do celular usam esta variável, então zerar
     aqui já devolve o espaço em todos os lugares de uma vez. */
  --mob-tabbar-h: 0px;
  /* Respiro pro iPhone com a barrinha de gestos embaixo */
  --mob-safe-bottom: env(safe-area-inset-bottom, 0px);
}


/* ═══ BARRA DE ABAS APOSENTADA (19/08/2026) ═══════════════════════
   Ela existia porque o hambúrguer tinha sido escondido e não sobrava
   navegação nenhuma no celular. Com o hambúrguer de volta, virou
   duplicata: os mesmos cinco destinos, em dois lugares.

   PRA TRAZER DE VOLTA: apague este bloco e ponha --mob-tabbar-h: 64px
   lá em cima. O HTML dela continua no index.html, intacto.

   O `html` na frente não é enfeite: mais abaixo, dentro do @media, a
   barra é ligada com `nav#mobile-bottom-nav.mobile-bottom-nav {
   display: grid !important }`. Pra desligar por cima disso é preciso
   empatar o !important E ganhar em especificidade. */
html nav#mobile-bottom-nav.mobile-bottom-nav {
  display: none !important;
}


@media (max-width: 900px) {

  /* ═══ 1. O APP PRESO NA LARGURA DA TELA ══════════════════════════
     Depois de tirar a barra do fluxo, isto é o cinto de segurança:
     nada mais consegue empurrar a página pros lados. */

  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  #app,
  #main-screen,
  .content,
  .app-section {
    max-width: 100%;
    min-width: 0;
  }

  /* Em CSS Grid, todo filho tem largura mínima "automática": ele se
     recusa a encolher abaixo do próprio conteúdo e empurra o layout
     pra fora da tela. Zerar isso nos containers do app resolve. */
  .dashboard-wrap,
  .dashboard-row,
  .dashboard-row > *,
  .dashboard-maincol,
  .dashboard-list,
  .dashboard-list-shell,
  .dashboard-card,
  .dashboard-toolbar-top,
  .dashboard-kpis-grid,
  .proposal-v1-wrap,
  .proposal-v1-card,
  .proposal-v1-item,
  .proposal-v1-item > * {
    min-width: 0;
    max-width: 100%;
  }

  img,
  svg,
  video,
  table,
  pre {
    max-width: 100%;
  }

  /* Dígitos de largura fixa: os valores param de "dançar" quando
     mudam e ocupam menos espaço. */
  .dashboard-kpi-value,
  .dashboard-value,
  .proposal-v1-total-value {
    font-variant-numeric: tabular-nums;
  }


  /* ═══ 2. TOPBAR MAIS BAIXA ═══════════════════════════════════════
     O styles.css já sangra a topbar até as bordas da tela
     (margin: -16px -16px) e dá fundo sólido a ela. Aqui só encolhe a
     altura pra sobrar tela, e sobe o z-index acima dos filtros. */

  .topbar {
    padding: 11px 16px;
    margin-bottom: 12px;
    z-index: 40;
  }

  /* Os dois atalhos do topo (Dashboard / Nova Proposta) viraram abas
     lá embaixo — some com eles, são duplicata pura. */
  .topbar-quick-tabs {
    display: none !important;
  }

  /* O HAMBÚRGUER FICA. Ele estava escondido aqui junto com os atalhos,
     com o comentário de que "o menu lateral continua acessível pela aba
     Plano" — o que não é verdade: a aba Plano abre a seção de
     assinatura, não a gaveta. Sem o hambúrguer, sumiram do celular
     quatro coisas que só existem na gaveta: alternar tema claro/escuro,
     Tutorial, o e-mail da conta logada e o "Sair da conta".
     A barra de abas continua sendo a navegação; a gaveta é o acesso à
     conta. (O ui.js já força display: inline-flex no celular, então
     basta parar de escondê-lo.) */

  .topbar-title {
    font-size: 19px;
    line-height: 1.15;
  }


  /* ═══ 3. ESPAÇO PRA BARRA DE ABAS ════════════════════════════════
     Mantém os 16px laterais do styles.css (a topbar depende deles
     pra sangrar certinho) e só abre espaço embaixo. */

  .content {
    padding-bottom: calc(var(--mob-tabbar-h) + 26px + var(--mob-safe-bottom));
  }


  /* ═══ 4. BARRA DE ABAS INFERIOR ══════════════════════════════════
     Rodapé fixo no alcance do polegar: um toque pra trocar de seção,
     em vez de abrir o menu lateral e escolher.

     O !important e o ID são obrigatórios: o styles.css desliga essa
     barra em dois lugares com "display: none !important". */

  nav#mobile-bottom-nav.mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9990;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    align-items: stretch;
    height: calc(var(--mob-tabbar-h) + var(--mob-safe-bottom));
    padding-bottom: var(--mob-safe-bottom);
    background: var(--card, #111827);
    border-top: 1px solid var(--line);
    /* A 2ª sombra é um retângulo sólido pintado 400px PRA BAIXO da barra.
       Mesma função do ::after logo abaixo, só que desenhado na própria
       camada da barra: no Chrome/Safari do iPhone o pseudo-elemento nem
       sempre é repintado quando a barra de endereço se esconde, e aí o
       conteúdo da página aparece na faixa que sobra. A sombra vem junto
       com a barra, então as duas coisas se cobrem. */
    box-shadow:
      0 -8px 28px rgba(0, 0, 0, 0.26),
      0 200px 0 200px var(--card, #111827);
  }

  /* Rodapé "sem fundo falso".
     No celular, a barra de endereço do navegador se esconde quando
     você rola. Quando ela some, a tela cresce — mas o "bottom: 0" do
     CSS continua ancorado no tamanho de tela antigo. Resultado: sobra
     uma faixa embaixo da barra de abas por onde o conteúdo da página
     aparece, e a barra parece solta no meio da tela.

     Não existe jeito em CSS de fazer o "bottom: 0" acompanhar essa
     mudança. O que dá pra fazer é continuar o fundo da barra pra
     baixo: mesmo que sobre faixa, ela é da cor da barra, e o conjunto
     lê como um rodapé colado na borda. */
  nav#mobile-bottom-nav.mobile-bottom-nav::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 160px;
    background: var(--card, #111827);
    pointer-events: none;
  }

  /* "Nova Proposta" é a ação mais usada do app — vai pro centro, que
     é o ponto mais fácil de alcançar com o polegar. Só reordenação
     visual: o HTML continua igual. */
  .mbn-item[data-section="dashboard"]     { order: 1; }
  .mbn-item[data-section="cadastros"]     { order: 2; }
  .mbn-item[data-section="proposta"]      { order: 3; }
  .mbn-item[data-section="configuracoes"] { order: 4; }
  .mbn-item[data-section="assinatura"]    { order: 5; }

  .mbn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: none;
    background: transparent;
    color: var(--muted);
    padding: 0 2px;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease;
  }

  /* Mesmos ícones coloridos do menu do desktop: cada seção tem sua cor
     (azul, verde, laranja, roxo, rosa), vindas das classes .nav-icon-*
     do styles.css. Aqui só damos a eles o formato de pastilha que o
     menu lateral já usa — antes eles apareciam sem tamanho definido e
     viravam borrões coloridos parecendo emoji. */
  .mbn-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    color: #fff;
    flex-shrink: 0;
  }

  /* Aba inativa fica esmaecida; a atual, cheia. É o que diz onde você
     está sem precisar tirar a cor de ninguém. */
  .mbn-item {
    opacity: 0.5;
  }

  .mbn-item.active {
    opacity: 1;
  }

  .mbn-label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
  }

  .mbn-item.active .mbn-label {
    color: #7c4af8;
  }

  /* Aba do meio: maior e elevada, porque é a ação principal do app.
     A cor continua sendo a verde de "Nova Proposta" do menu do
     desktop — só o tamanho e a sombra mudam. */
  .mbn-item[data-section="proposta"] .mbn-icon {
    width: 46px;
    height: 46px;
    margin-top: -20px;
    border-radius: 15px;
    font-size: 17px;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.38);
  }

  .mbn-item[data-section="proposta"].active .mbn-icon {
    box-shadow: 0 8px 26px rgba(16, 185, 129, 0.55);
  }

  .mbn-item[data-section="proposta"] .mbn-label {
    margin-top: 1px;
  }

  /* Com o menu lateral aberto, a barra sai de cena pra não competir */
  body.mobile-menu-open .mobile-bottom-nav {
    transform: translateY(120%);
    transition: transform 0.2s ease;
  }


  /* ═══ 5. BOTÃO DO SUPORTE ════════════════════════════════════════
     Estava colado no rodapé, tapando conteúdo — e agora bateria na
     barra de abas. Sobe pra cima dela e diminui um pouco. */

  .support-chat-fab {
    width: 42px;
    height: 42px;
    font-size: 16px;
    right: 10px;
    top: auto !important;
    bottom: calc(var(--mob-tabbar-h) + var(--mob-safe-bottom) + 12px) !important;
    z-index: 9985;
  }

  .support-chat-panel {
    bottom: calc(var(--mob-tabbar-h) + var(--mob-safe-bottom) + 8px) !important;
    max-height: calc(100dvh - var(--mob-tabbar-h) - 90px);
  }


  /* ═══ 6. MENU LATERAL ════════════════════════════════════════════ */

  /* O rodapé da gaveta (tema, tutorial, e-mail, sair) é ancorado no fim
     dela, e o "Sair da conta" chegou a nascer ATRÁS da barra de abas —
     visível pro navegador, invisível pra você. A conta desconta a
     variável da barra (hoje zero) e continua certa se ela voltar.
     O overflow-y garante rolagem se a gaveta não couber na tela. */
  .sidebar {
    padding-bottom: calc(var(--mob-tabbar-h) + 20px + var(--mob-safe-bottom));
    overflow-y: auto;
  }


  /* ═══ 7. CAMPOS DE FORMULÁRIO ════════════════════════════════════
     Campo com fonte menor que 16px faz o iPhone dar zoom sozinho ao
     tocar — e aí você precisa dar zoom out na mão. 16px resolve. */

  .form-input,
  .form-textarea,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  select,
  textarea {
    font-size: 16px !important;
    min-height: 46px;
  }

  .form-textarea,
  textarea {
    min-height: 92px;
  }

  /* Alvo de toque: nada menor que 44px de altura */
  .btn,
  button.btn,
  .nav-btn {
    min-height: 44px;
  }


  /* ═══ 8. MODAIS ══════════════════════════════════════════════════ */

  .modal-card,
  .dashboard-whatsapp-modal__card {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
  }
}


/* Telas bem pequenas (iPhone SE e afins) */
@media (max-width: 360px) {
  .mbn-label {
    font-size: 8.5px;
  }

  .mbn-icon {
    font-size: 16px;
  }
}