/* ==========================================
   MODO CELULAR (11/10/2026): painel para ler na Visão Geral, barra de baixo com 5 botões + "Mais" e consertos das
   telas no celular. Quase tudo aqui só vale com html.modo-celular (js/modo-celular.js liga no <head>): o computador
   continua igual.
   ========================================== */
.painel-celular { display: none; }
html.modo-celular .painel-celular:not([hidden]) { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 16px; }

/* Visão Geral no celular: o painel faz o papel dos 4 cartões e do Pix ao vivo; a tabela completa, os gráficos e o
   Radar ficam fechados até o dono tocar em "Ver gráficos…" (eram 9 mil pixels de rolagem) */
html.modo-celular #tab-visao-geral .metrics-banner-grid,
html.modo-celular #tab-visao-geral #pixAoVivo { display: none !important; }
html.modo-celular:not(.vg-detalhes) #tab-visao-geral .gerentes-card,
html.modo-celular:not(.vg-detalhes) #tab-visao-geral .charts-grid-container,
html.modo-celular:not(.vg-detalhes) #tab-visao-geral #radarDono { display: none !important; }

/* Filtro de mês numa linha só, de arrastar para o lado (eram 3 linhas de botões) */
html.modo-celular .visao-filtro-bar { flex-direction: column; align-items: stretch; gap: 6px; }
html.modo-celular #visaoFiltroMeses { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; max-width: 100%; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
html.modo-celular #visaoFiltroMeses::-webkit-scrollbar { display: none; }
html.modo-celular #visaoFiltroMeses .mes-chip { flex: 0 0 auto; min-height: 38px; }

/* ---------- 1. O número grande ---------- */
.pc-hero {
  display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; font: inherit; cursor: pointer;
  padding: 18px 16px 16px; border-radius: 18px; border: 1px solid var(--border-highlight);
  background: linear-gradient(160deg, rgba(16, 185, 129, 0.16), rgba(16, 185, 129, 0.02) 60%), var(--bg-card);
  box-shadow: var(--shadow-card); color: var(--text-primary);
}
.pc-hero > span { display: block; }
.pc-ola { font-size: 0.82rem; color: var(--text-secondary); }
.pc-rotulo { margin-top: 6px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold-500); }
.pc-valor { font-family: var(--font-display); font-size: clamp(1.9rem, 9.5vw, 2.5rem); font-weight: 800; line-height: 1.1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.pc-barra { height: 8px; border-radius: 99px; background: rgba(148, 163, 184, 0.22); overflow: hidden; margin: 8px 0 4px; }
.pc-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--emerald-600), var(--emerald-400)); }
.pc-sub { font-size: 0.85rem; color: var(--text-secondary); }
.pc-sub b { color: var(--emerald-400); }
.pc-frase { margin-top: 6px; font-size: 0.92rem; line-height: 1.45; color: var(--text-primary); }
.pc-btn-principal { margin-top: 10px; min-height: 48px; border-radius: 12px; border: 0; background: var(--emerald-500); color: #052e1f; font: inherit; font-weight: 800; }

/* ---------- 2. Hoje e 7 dias lado a lado; a conferência na linha de baixo, inteira ---------- */
.pc-nw { white-space: nowrap; }
.pc-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pc-tile {
  display: flex; flex-direction: column; gap: 3px; min-height: 82px; padding: 11px 12px; border-radius: 14px; text-align: left;
  border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-primary); font: inherit; cursor: pointer;
}
.pc-tile-larga { grid-column: 1 / -1; min-height: 0; }
.pc-tile-rot { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.pc-tile strong { font-size: 1.05rem; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-tile small { font-size: 0.74rem; color: var(--text-secondary); line-height: 1.3; }
.pc-tile-ok strong { color: var(--emerald-400); }
.pc-tile-aviso strong { color: var(--gold-500); }
.pc-tile-alerta { border-color: rgba(244, 63, 94, 0.45); }
.pc-tile-alerta strong { color: var(--rose-500); }
.pc-sobe, .pc-desce { font-style: normal; font-weight: 800; }
.pc-sobe { color: var(--emerald-400); }
.pc-desce { color: var(--rose-500); }
@media (max-width: 340px) { .pc-tile strong { font-size: 0.92rem; } }

/* ---------- 3 a 5. Blocos: atenção, quem deve mais, últimos Pix ---------- */
.pc-bloco { padding: 14px; border-radius: 16px; border: 1px solid var(--border-color); background: var(--bg-card); box-shadow: var(--shadow-card); }
.pc-bloco h3 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 10px; font-family: var(--font-display); font-size: 1.02rem; color: var(--text-primary); }
.pc-bloco h3 small { font-family: var(--font-main); font-size: 0.74rem; font-weight: 500; color: var(--text-secondary); }
.pc-vazio { font-size: 0.86rem; color: var(--text-secondary); }

.pc-alerta {
  display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; padding: 10px 12px; font: inherit;
  border-radius: 12px; border: 1px solid var(--border-color); border-left-width: 4px; background: transparent; color: var(--text-primary);
}
.pc-alerta + .pc-alerta { margin-top: 8px; }
button.pc-alerta { cursor: pointer; }
.pc-alerta strong { font-size: 0.9rem; line-height: 1.3; }
.pc-alerta span { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.4; }
.pc-alerta-alto { border-left-color: var(--rose-500); background: rgba(244, 63, 94, 0.07); }
.pc-alerta-medio { border-left-color: var(--gold-500); background: rgba(245, 158, 11, 0.07); }
.pc-alerta-info { border-left-color: var(--blue-500); background: rgba(59, 130, 246, 0.06); }

.pc-ger {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 58px;
  padding: 10px 2px; border: 0; border-top: 1px solid var(--border-color); background: none; color: var(--text-primary);
  font: inherit; text-align: left; cursor: pointer;
}
.pc-gerentes h3 + .pc-ger { border-top: 0; }
.pc-ger-pos { font-size: 0.78rem; font-weight: 800; color: var(--text-muted); text-align: center; }
.pc-ger-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pc-ger-nome { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 700; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-ger-cod { font-size: 0.72rem; font-weight: 800; color: var(--text-muted); }
.pc-ponto { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.pc-st-ritmo .pc-ponto { background: var(--emerald-500); }
.pc-st-lento .pc-ponto { background: var(--gold-500); }
.pc-st-parado .pc-ponto { background: var(--rose-500); }
.pc-st-quitado .pc-ponto { background: transparent; border: 2px solid var(--emerald-500); }
.pc-ger-sub { font-size: 0.76rem; line-height: 1.3; color: var(--text-secondary); }
.pc-st-parado .pc-ger-sub { color: var(--rose-500); }
.pc-ger-barra { display: block; height: 4px; border-radius: 99px; background: rgba(148, 163, 184, 0.22); overflow: hidden; }
.pc-ger-barra i { display: block; height: 100%; border-radius: inherit; background: var(--emerald-500); }
.pc-ger-falta { display: flex; flex-direction: column; align-items: flex-end; font-weight: 800; font-size: 0.95rem; font-variant-numeric: tabular-nums; color: var(--gold-500); white-space: nowrap; }
.pc-ger-falta small { font-size: 0.68rem; font-weight: 600; color: var(--text-muted); }
.pc-mais {
  width: 100%; min-height: 44px; margin-top: 8px; border-radius: 12px; border: 1px dashed var(--border-highlight);
  background: none; color: var(--emerald-400); font: inherit; font-weight: 800; cursor: pointer;
}

/* Cada Pix em duas linhas: quem e quanto em cima, quando embaixo (o selo "AM · madrugada" cortava o nome) */
.pc-pix-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nome valor" "quando quando"; align-items: center; gap: 2px 10px; padding: 9px 0; border-top: 1px solid var(--border-color); font-size: 0.9rem; }
.pc-pix h3 + .pc-pix-linha { border-top: 0; }
.pc-pix-nome { grid-area: nome; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-pix-valor { grid-area: valor; color: var(--emerald-400); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-pix-quando { grid-area: quando; font-size: 0.78rem; color: var(--text-secondary); }

/* ---------- 6. Atalhos e "ver gráficos" ---------- */
.pc-acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pc-acoes button {
  display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 10px 12px; border-radius: 14px; text-align: left;
  border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-primary); font: inherit; font-weight: 700; font-size: 0.88rem; cursor: pointer;
}
.pc-acoes button span { font-size: 1.25rem; }
.pc-detalhes-btn {
  width: 100%; min-height: 48px; border-radius: 14px; border: 1px solid var(--border-color); background: rgba(148, 163, 184, 0.08);
  color: var(--text-primary); font: inherit; font-weight: 700; cursor: pointer;
}
.pc-hero:focus-visible, .pc-tile:focus-visible, .pc-ger:focus-visible, .pc-alerta:focus-visible, .pc-acoes button:focus-visible, .pc-mais:focus-visible, .pc-detalhes-btn:focus-visible { outline: 2px solid var(--emerald-400); outline-offset: 2px; }

/* Tema claro: os verdes e o dourado fortes demais no branco */
body.theme-light .pc-sub b, body.theme-light .pc-tile-ok strong, body.theme-light .pc-sobe, body.theme-light .pc-pix-valor, body.theme-light .pc-mais { color: #047857; }
body.theme-light .pc-rotulo, body.theme-light .pc-ger-falta, body.theme-light .pc-tile-aviso strong { color: #b45309; }
body.theme-light .pc-desce, body.theme-light .pc-tile-alerta strong, body.theme-light .pc-st-parado .pc-ger-sub { color: #be123c; }
body.theme-light .pc-hero { background: linear-gradient(160deg, rgba(16, 185, 129, 0.12), rgba(255, 255, 255, 0.9) 60%), #ffffff; }

/* ---------- Barra de baixo: 5 botões e o "Mais" ---------- */
html.modo-celular .desktop-nav-tabs { display: none; }
html.modo-celular .mobile-bottom-nav { display: flex; gap: 4px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
/* Espaço no fim da página para a barra de baixo e as bolinhas flutuantes (voz e chat) não cobrirem o último botão */
html.modo-celular .main-wrapper { margin-bottom: 10.5rem; }
html.modo-celular .mobile-bottom-nav > .mobile-tab-btn { flex: 1 1 0; min-width: 0; min-height: 54px; justify-content: center; padding: 6px 2px; font-size: 0.7rem; line-height: 1.15; text-align: center; }
html.modo-celular .mobile-bottom-nav > .mobile-tab-btn span.icon { font-size: 1.3rem; }
.mais-btn { font: inherit; }

.mais-celular { position: fixed; inset: 0; z-index: 1200; }
.mais-celular[hidden] { display: none; }
.mais-celular-fundo { position: absolute; inset: 0; background: rgba(2, 6, 23, 0.55); }
.mais-celular-folha {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 14px calc(16px + env(safe-area-inset-bottom));
  border-radius: 20px 20px 0 0; border-top: 1px solid var(--border-color); background: var(--bg-secondary);
  box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.35); animation: maisSobe 0.18s ease-out;
}
@keyframes maisSobe { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.mais-celular-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; color: var(--text-primary); }
.mais-celular-cab strong { font-family: var(--font-display); font-size: 1.05rem; }
.mais-celular-cab button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border-color); background: none; color: var(--text-primary); font-size: 1rem; cursor: pointer; }
.mais-celular-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mais-celular-grade .mobile-tab-btn {
  flex: none; min-height: 78px; justify-content: center; gap: 6px; padding: 8px 4px; border-radius: 14px;
  border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-primary); font-size: 0.82rem;
}
.mais-celular-grade .mobile-tab-btn.active { border-color: var(--emerald-500); color: var(--emerald-400); }
.mais-celular-grade .mobile-tab-btn span.icon { font-size: 1.55rem; }
@media (prefers-reduced-motion: reduce) { .mais-celular-folha { animation: none; } }

/* ---------- Consertos das outras telas no celular ---------- */
/* Cadastros: o valor do mês aparecia cortado ("Pago R$ 92.000,…"): agora o valor vai inteiro, na linha de baixo */
html.modo-celular .mq-linha { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }
html.modo-celular .mq-linha strong { display: block; }
/* Chefe: a % e a base da proposta saíam para fora do cartão */
html.modo-celular .ch-regra label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
html.modo-celular .ch-regra select { flex: 1 1 100%; width: 100%; max-width: 100%; }
/* Tabelas largas (catálogo, pagaram por ele…): rolam dentro do cartão, com a sombra mostrando que tem mais */
html.modo-celular .mc-tabela-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: linear-gradient(to left, rgba(148, 163, 184, 0.18), transparent 18px) right / 18px 100% no-repeat; }
/* Campos e botões com tamanho de dedo; letra de 16 px nos campos (o iPhone não dá zoom ao tocar) */
html.modo-celular input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html.modo-celular select, html.modo-celular textarea { font-size: 16px; }

/* ---------- 2ª rodada (11/10/2026, "refinar mais o modelo mobile") ---------- */
/* Texto e botões só do celular ou só do PC (o mesmo lugar diz "arraste" no PC e "tire a foto" no celular) */
.so-celular { display: none !important; }
html.modo-celular .so-celular { display: inline !important; }
html.modo-celular .so-pc { display: none !important; }
html.modo-celular .dropzone-actions-buttons .so-celular.btn-upload-camera { display: flex !important; }

/* Jogar comprovantes no celular: câmera e galeria grandes, sem o "arraste" do PC */
html.modo-celular .dropzone-box { padding: 18px 14px; }
html.modo-celular .dropzone-box .dropzone-icon { font-size: 2rem; }
html.modo-celular .dropzone-box h3 { font-size: 1.1rem; }
html.modo-celular .dropzone-actions-buttons { display: grid; grid-template-columns: 1fr; gap: 8px; width: 100%; }
html.modo-celular .dropzone-actions-buttons > button { width: 100%; min-height: 50px; justify-content: center; font-size: 1rem; }
.btn-upload-camera {
  align-items: center; gap: 8px; border: 0; border-radius: 12px; cursor: pointer; font: inherit; font-weight: 800;
  background: linear-gradient(135deg, var(--emerald-500), var(--emerald-600)); color: #04261a; box-shadow: 0 8px 18px -8px rgba(16, 185, 129, 0.6);
}
/* Informações do lote (opcionais): fechadas no celular, abrem pelo botão */
.lote-abrir-celular { display: none; }
html.modo-celular .lote-abrir-celular {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 0 14px;
  border-radius: 12px; border: 1px solid var(--border-color); background: none; color: var(--text-primary); font: inherit; font-weight: 700; cursor: pointer;
}
html.modo-celular .lote-abrir-celular small { color: var(--text-secondary); font-weight: 500; }
html.modo-celular .lote-abrir-celular::after { content: '▾'; color: var(--text-secondary); }
html.modo-celular .lote-panel-card.lote-aberto .lote-abrir-celular::after { content: '▴'; }
html.modo-celular .lote-panel-card:not(.lote-aberto) > *:not(.lote-abrir-celular) { display: none !important; }
html.modo-celular .lote-panel-card:not(.lote-aberto) { padding: 8px; }
html.modo-celular .lote-panel-card.lote-aberto .lote-abrir-celular { margin-bottom: 10px; }

/* No painel a barra "59% quitado · falta R$…" do topo repete o número grande: some só ali */
html.modo-celular.aba-painel .header-progress-bar { display: none; }

/* "7 dias": uma barrinha por dia (hoje na direita) */
.pc-dias { display: flex; align-items: flex-end; gap: 3px; height: 26px; margin-top: 4px; }
.pc-dias i { flex: 1 1 0; min-height: 2px; border-radius: 3px 3px 0 0; background: rgba(16, 185, 129, 0.35); }
.pc-dias i.pc-dia-hoje { background: var(--emerald-500); }
.pc-dias i.pc-dia-zero { background: rgba(148, 163, 184, 0.25); }

/* Instalar o app (aparece uma vez, até o dono instalar ou fechar) */
.pc-instalar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; border: 1px dashed var(--border-highlight); background: rgba(16, 185, 129, 0.06); }
.pc-instalar img { width: 40px; height: 40px; border-radius: 10px; }
.pc-instalar strong { display: block; font-size: 0.9rem; color: var(--text-primary); }
.pc-instalar span { display: block; font-size: 0.78rem; line-height: 1.35; color: var(--text-secondary); }
.pc-instalar-acoes { display: flex; flex-direction: column; gap: 6px; }
.pc-instalar button { min-height: 40px; padding: 0 12px; border-radius: 10px; border: 0; font: inherit; font-weight: 800; cursor: pointer; background: var(--emerald-500); color: #04261a; }
.pc-instalar button.pc-instalar-fechar { background: none; color: var(--text-secondary); font-weight: 600; min-height: 32px; }

/* ---------- Chat no celular (12/10/2026, prints do dono no iPhone) ---------- */
/* 🎤 e os botões da barra: o toque não pode virar seleção de texto nem o balão de copiar do iPhone */
html.modo-celular #pergMicrofone, html.modo-celular #btnIaChatEnviar, html.modo-celular .ia-chat-input button, html.modo-celular .perg-barra button, html.modo-celular .pc-acoes button, html.modo-celular .mobile-tab-btn {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
html.modo-celular #pergMicrofone { min-width: 44px; min-height: 44px; }
/* Tabela na resposta da IA: rola de lado com o dedo, a 1ª coluna fica parada, a sombra na borda diz que tem mais,
   e a letra menor cabe mais (no iPhone a barra de rolagem é invisível e a tabela parecia cortada) */
html.modo-celular .ia-tabela-wrap { -webkit-overflow-scrolling: touch; background: linear-gradient(to left, rgba(148, 163, 184, 0.28), transparent 26px) right / 26px 100% no-repeat; background-attachment: local; }
html.modo-celular .ia-tabela { font-size: 0.76rem; }
html.modo-celular .ia-tabela th, html.modo-celular .ia-tabela td { padding: 0.32rem 0.45rem; }
html.modo-celular .ia-tabela th:first-child, html.modo-celular .ia-tabela td:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg-secondary); box-shadow: 1px 0 0 var(--border-color); }
html.modo-celular .ia-msg-ia:has(.ia-tabela-wrap) .ia-msg-texto::after { content: '↔ arraste a tabela para o lado'; display: block; margin-top: 4px; font-size: 0.7rem; color: var(--text-muted); }

/* 📊 Resumos no celular: a fileira rola de lado, um tipo por "pílula" */
html.modo-celular .perg-resumos-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
html.modo-celular .perg-resumos-chips::-webkit-scrollbar { display: none; }
html.modo-celular .perg-resumo-chip { flex: 0 0 auto; min-height: 44px; }
html.modo-celular .perg-resumos-btn { min-height: 40px; }

/* 🧾 Planilha do velho no celular (12/10/2026): cada linha vira um cartãozinho (a tabela cortava o valor) */
html.modo-celular .ch-tabela-ctl thead { display: none; }
html.modo-celular .ch-tabela-ctl, html.modo-celular .ch-tabela-ctl tbody, html.modo-celular .ch-tabela-ctl tfoot { display: block; width: 100%; }
html.modo-celular .ch-tabela-ctl tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "quando valor" "desc ok" "origem ok"; gap: 0.1rem 0.6rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border-color); }
html.modo-celular .ch-tabela-ctl tbody td { display: block; padding: 0; border: 0; min-width: 0; }
html.modo-celular .ch-tabela-ctl tbody td:nth-child(1) { grid-area: quando; }
html.modo-celular .ch-tabela-ctl tbody td:nth-child(2) { grid-area: desc; }
html.modo-celular .ch-tabela-ctl tbody td:nth-child(3) { grid-area: origem; }
html.modo-celular .ch-tabela-ctl tbody td:nth-child(3) br { display: none; }
html.modo-celular .ch-tabela-ctl tbody td:nth-child(3) small { margin-left: 0.35rem; }
html.modo-celular .ch-tabela-ctl tbody td:nth-child(4) { grid-area: valor; text-align: right; white-space: nowrap; font-size: 1rem; }
html.modo-celular .ch-tabela-ctl tbody td:nth-child(5) { grid-area: ok; text-align: right; align-self: center; }
html.modo-celular .ch-tabela-ctl tfoot tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0 0.6rem; padding: 0.35rem 0; align-items: baseline; }
html.modo-celular .ch-tabela-ctl tfoot td { display: block; padding: 0; border: 0; min-width: 0; white-space: nowrap; }
html.modo-celular .ch-tabela-ctl tfoot td.mc-num { text-align: right; }
html.modo-celular .ch-tabela-ctl tfoot .ch-ctl-titulo-origem td { white-space: normal; }
html.modo-celular .ch-ctl-cab input { width: 100%; }
html.modo-celular .ch-ctl-caixa-form input { flex: 1 1 45%; }
html.modo-celular .ch-ctl-caixa-form input#chGastoDesc { flex: 1 1 100%; }

/* 🤖 chave liga/desliga da IA (12/10/2026): no celular fica à DIREITA da bolinha, não em cima (a bolinha cobria) */
html.modo-celular .voz-orbe-chaves { left: calc(max(1.25rem, env(safe-area-inset-left)) + 66px); bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + var(--voz-sobe, 0px) + 6px); flex-direction: column; align-items: flex-start; }

/* 📌 Pré-lançamentos no celular: o menu desce como uma folha, sem sair da tela (12/10/2026) */
html.modo-celular .pre-topo-menu { position: fixed; top: 64px; left: 8px; right: 8px; width: auto; max-height: 70vh; overflow: auto; }