/* Estrutura dos simuladores de lote - FONTE UNICA para o Site e o Dashboard.
   Canonico em Shared/frontend/; espelhado em cada app pelo Sincronizar Assets.ps1.

   POR QUE ESTE ARQUIVO EXISTE. O mesmo cartao de opcao vivia em tres folhas
   independentes (setor-oeste.css, bela-vista-ii.css e dashboard.css) e as tres
   foram divergindo sem ninguem notar: em 06/09/2026 o site centralizava o texto
   do cartao e o dashboard alinhava a esquerda; a grade do dashboard era flex, e
   por isso o ultimo cartao da fila esticava ate a largura toda; e o valor podia
   quebrar entre o "R$" e o numero em duas das tres. Cada correcao daquele dia
   teve de ser escrita tres vezes.

   O QUE ENTRA AQUI: comportamento. Como o cartao se organiza por dentro, o que
   nunca pode quebrar, o que ocupa a fila inteira.

   O QUE NAO ENTRA: a pele - cor, fundo, borda, raio, sombra, fonte, transicao -
   que e legitimamente diferente (o site tem barra lateral verde-escura com
   laranja; o dashboard e claro). E tambem a ESTRATEGIA DE COLUNAS de cada grade,
   que depende da largura do painel onde ela vive e esta comentada em cada app.

   OS NOMES SAO TRES PORQUE OS APPS SAO DOIS: .pt e .spt no site (cartao do mapa
   e do "Simulador de parcelas"), .sim-opt no dashboard. Unificar os nomes exigiria
   reescrever os templates dos dois apps; o ganho seria de estetica do CSS, nao de
   comportamento, e o risco nao paga. */

/* ── Grade de opcoes ────────────────────────────────────────────────────────
   Grid e nao flex, de proposito: em flex o ultimo item da fila CRESCE para
   fechar a linha, e um cartao sozinho no fim aparece com a largura do painel
   inteiro, parecendo destaque. Em grid ele fica do tamanho da coluna.
   O numero de colunas fica em cada app: a barra lateral do mapa e o simulador
   de largura cheia nao tem a mesma medida. */
.pr-grid,
.sim-prazos,
.sim-grid {
  display: grid;
  gap: var(--sim-gap, 4px);
}

/* ── Cartao de opcao (entrada, prazo ou condicao) ───────────────────────── */
.pt,
.spt,
.sim-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* min-width:0 deixa a COLUNA mandar na largura. Sem isto, o conteudo do
     cartao vira o piso e a grade transborda o painel. */
  min-width: 0;
  gap: var(--sim-cartao-gap, 1px);
  padding: var(--sim-cartao-pad, 4px 8px);
  min-height: var(--sim-cartao-alt, 20px);
  cursor: pointer;
  user-select: none;
}

/* Cartao que atravessa a fila. Hoje e o Plano Construtor, cujo valor traz a
   composicao inteira ("R$ 17.000,00 + R$ 68.000,00", ~174px): sozinho numa
   coluna estreita ele quebraria a linha, e ao lado de um cartao curto ficaria
   orfao com um vao ao lado. */
.spt-linha-cheia,
.sim-opt-linha {
  grid-column: 1 / -1;
}

/* ── Valor em dinheiro e indivisivel ────────────────────────────────────────
   Nada de "R$" numa linha e "875,00" na seguinte: sao duas metades de um
   numero so, e lidas separadas nao querem dizer nada. Vale para todo elemento
   que contem SO o valor.

   Onde o valor vive dentro de uma FRASE ("10x de R$ 8.500,00") o caminho e outro:
   nowrap ali obrigaria o cartao a ser tao largo quanto a frase, e num painel
   estreito ele vazaria a caixa. Nesses casos quem protege o dinheiro e o proprio
   texto, com NBSP entre o "R$" e o numero (ver fmtR$nb no dashboard.js): a frase
   quebra entre as palavras e o numero nunca se parte. Por isso .sim-v NAO esta
   nesta lista. */
.pt .v,
.spt .v,
.parc-val,
.parc-ent,
.lc-ent-val,
.lc-val {
  white-space: nowrap;
}

/* ── Compartilhar simulacao: as duas opcoes ─────────────────────────────────
   O botao "Compartilhar simulação" abre, logo abaixo dele, "Esta condição" e
   "Todas as condições" (criados por share-sim.js, alternarOpcoesShare). Lado a
   lado e na largura do botao: abrir no proprio fluxo (e nao flutuando) evita
   que o menu saia da barra lateral do mapa ou da tela do celular. Os dois
   botoes levam a classe do botao de cada app (.btn-share-sim no site,
   .sim-share-btn no Dashboard), e com ela a pele dele. */
.share-sim-opcoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 6px 0 4px;
}
.share-sim-opcoes[hidden] {
  display: none;
}
.share-sim-opcoes > button {
  margin: 0;
}