/* AdiantaZap — ajustes de port (conteúdo dinâmico não previsto no mockup).
 * Carregado depois do CSS de página, antes do print.css.
 * Nada de cor/tamanho novo: usa os mesmos tokens. */

/* Barra fixa da landing (mobile): reserva espaço para o último conteúdo não
 * ficar atrás dela no iPhone (safe-area) nem no Android. */
@media (max-width: 767px) {
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* CTA grande sem .btn-block pode exceder a largura do celular (label longo + nowrap) */
@media (max-width: 640px) {
  .btn { max-width: 100%; }
  .btn-lg { white-space: normal; text-align: center; line-height: 1.25; }
}

/* Headline: quebra equilibrada em qualquer largura. `balance` distribui as
 * linhas (some a órfã "calote.") sem depender da medida da coluna; onde não
 * houver suporte, cai na quebra normal sem quebrar nada. O `max-width` é só
 * cinto de segurança para telas muito largas. */
h1, .h1, .h1-lp { text-wrap: balance; max-width: 21ch; }
@media (max-width: 640px) { h1, .h1, .h1-lp { max-width: none; } }

/* ==========================================================================
   Container único — cabeçalho e conteúdo com a MESMA largura e o MESMO gutter
   em todas as páginas. Antes cada tela tinha a sua (1120 / 1180 / 980 / 900 /
   820), então o logo pulava de x a cada navegação e o menu parecia solto.
   ========================================================================== */
:root {
  --container: 1180px;
  --gutter: 16px;      /* nada encostado na borda, inclusive em 320px */
  --header-h: 64px;    /* mobile: base; a barra do app usa 68px abaixo */
}
@media (max-width: 767px) {
  /* medido a 375px: com 64px o controle de 40px ficava a 12px do topo.
   * 68px dá os 14px mínimos que a qa-adiantazap exige. */
  :root { --header-h: 68px; }
}
@media (min-width: 768px)  { :root { --gutter: 24px; --header-h: 72px; } }
@media (min-width: 1280px) { :root { --gutter: 32px; } }
@media (min-width: 1600px) { :root { --container: 1280px; } }

/* landing */
.wrap,
.topbar > div,
main > .mx-auto,
.adm-top .inner, .hist-top .inner, .conta-top .inner, .pag-top .inner,
.adm-main, .hist-main, .conta-main, .pag-main {
  box-sizing: border-box;      /* max-width = caixa inteira, padding dentro */
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.wrap {
  max-width: var(--container);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* landing e app: nav e topbar. `h-full` (Tailwind) não foi compilado, então a
 * cadeia de height:100% colapsava e os controles colavam no topo da tela. Aqui a
 * própria barra vira flex e centraliza o conteúdo sem depender disso. */
.nav, .topbar { height: var(--header-h) !important; display: flex !important; align-items: center !important; }
.nav > div, .topbar > div { height: auto !important; }

/* âncora com barra fixa: sem isto o destino de um #link fica escondido sob a
 * topbar e o sintoma parece "conteúdo colado no topo". */
html { scroll-padding-top: var(--header-h); }
html, body { scroll-margin-top: 0; }
.topbar > div,
main > .mx-auto {
  max-width: var(--container) !important;
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
}

/* páginas internas: header e conteúdo na mesma régua
 * (as páginas internas trazem o CSS delas num <style> depois dos links, então
 * aqui é preciso !important para a régua única valer em todas) */
.adm-top, .hist-top, .conta-top, .pag-top { height: var(--header-h) !important; }
.adm-top .inner, .hist-top .inner, .conta-top .inner, .pag-top .inner {
  height: 100%;
  align-items: center;
  max-width: var(--container) !important;
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.adm-main, .hist-main, .conta-main, .pag-main {
  max-width: var(--container) !important;
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Topbar do app em tela estreita. Medido no domínio a 360px: com logo 24px,
 * "Minha conta", "Sair" e o botão "Novo orçamento" o grupo passava a borda e o
 * documento ia a 469px de scrollWidth (o dobro do viewport). Aqui: o "Sair"
 * fica só na /conta, o lockup desce a 20px e o botão vira só o "+".
 * Com isto: scrollWidth = clientWidth = 360. */
@media (max-width: 640px) {
  [data-historico-nav] { display: none !important; }
  [data-sair-nav] { display: none !important; }
  .brand-lockup { height: 20px; }
  #btnNovoLabel { display: none !important; }
  #btnNovo { padding-left: 14px; padding-right: 14px; }
}

/* Landing no celular: o .nav-cta vinha com display:none, o que deixava o
 * "Entrar"/"Minha conta"/"Sair" inalcançáveis no telefone. Mostra a área e
 * esconde só o CTA de compra, que já vive na barra fixa do rodapé. */
@media (max-width: 767px) {
  .nav-cta { display: flex !important; align-items: center; }
  .nav-cta .btn-primary { display: none !important; }
  .nav-cta .btn { padding-left: 10px; padding-right: 10px; }
}

/* Logotipo oficial (lockup completo) no nav, rodapé e topbar do app.
 * Proporção 6,161 (viewBox aparado): 28px de altura ≈ 173px de largura. */
.brand-lockup { height: 28px; width: auto; max-width: 100%; }
@media (max-width: 640px) {
  .brand-lockup { height: 24px; }
}

/* Marca d'água da proposta: o site é claro, então o lockup de texto escuro
 * (logo-claro.svg) vale na tela e no papel. */
/* Tipografia do DS: corpo em Poppins/Inter — a página extraída do mockup não fixa fonte. */
body { font-family: var(--font-sans); }

/* itens de grid/flex não devem estourar por conteúdo intrínseco (inputs, códigos longos,
 * link compartilhado) — evita scroll horizontal em 360px sem mexer no layout */
.grid > *,
[class*="grid-cols"] > * { min-width: 0; }

/* O link compartilhado é uma string longa sem espaços: sem isso ele define a
 * largura mínima do card e estoura o layout (inclusive no celular). */
#wppMsg,
#pvPixCode,
.pix-code { overflow-wrap: anywhere; word-break: break-word; }

aside,
aside > .card,
aside .card { min-width: 0; }

/* wizard: o painel ativo é controlado por classe, não por display inline */
.wizard-panel[hidden] { display: none; }

/* Impressão: o print.css esconde `.wizard-panel:not(.print-area)`; o card da
 * proposta está DENTRO do painel 5, então liberamos esse painel e escondemos
 * o resto dele (barra de ações), deixando só o documento no PDF. */
@media print {
  .wizard-panel[data-panel="5"] { display: block !important; }
  .wizard-panel[data-panel="5"] > .card:not(.print-area) { display: none !important; }
  .main-grid, .app-shell > div { max-width: none !important; }
}

/* alvo de toque mínimo em ícones/botões pequenos (mobile) */
@media (max-width: 640px) {
  .icon-btn { min-height: 44px; }
}

/* topbar: no celular sobra só o CTA principal (o “Novo orçamento” duplicava o Criar */
@media (max-width: 640px) {
  #btnReset { display: none; }
  .steps .step { min-height: 44px; }
}

/* barra de ações da proposta: no celular os botões ocupam a linha inteira */
@media (max-width: 640px) {
  [data-panel="5"] > .card .ml-auto { width: 100%; flex-wrap: wrap; }
  [data-panel="5"] > .card .btn { flex: 1 1 100%; }
}