/* =========================================================================
   simulador.cards.css — os cards de resultado do simulador (16/09/2026)

   POR QUE UM ARQUIVO SEPARADO. Estas regras nasceram dentro do style.simul.css
   e, publicadas, chegaram ao navegador do Felipe como uma CÓPIA ANTIGA do
   arquivo — o `.alerta-oferta` (que existe há semanas) estilizado, e o botão e
   o modal (novos) crus, sem cor e ocupando a tela inteira. Medi tudo por fora:
   a CDN diferencia o `?v=` (MISS na primeira, HIT na segunda), serve o
   conteúdo novo em qualquer versão, e um navegador limpo renderiza certo. Ou
   seja: algo entre o servidor e a tela dele — cache do Chrome ou um proxy que
   ignora a query — guardou o arquivo velho sob o endereço novo.

   Contra isso, trocar o `?v=` de novo não prova nada: se um proxy ignora a
   query, ignora a próxima também. Um NOME DE ARQUIVO que nunca existiu não tem
   cópia velha em lugar nenhum. É a única correção que vale nos dois casos.

   O que vive aqui só interessa ao simulador; os outros quatro pages que usam o
   style.simul.css não têm estes elementos. Custa uma requisição a mais (~2 KB).
   ========================================================================= */

/* ===== Botão que abre as observações (16/09/2026, pedido do Felipe) =====
   A caixa vermelha saiu do card e virou este botão, centralizado abaixo de
   GERAR PDF / VISUALIZAR. O card ficou limpo e os botões pararam de terminar
   em alturas diferentes de uma oferta para outra.

   O RISCO DESTA MUDANÇA, e o que o estilo aqui tenta compensar: um aviso que
   exige clique é um aviso que pode não ser lido — e o que está lá dentro muda
   decisão ("renda abaixo da mínima desta oferta", "linha indexada ao IPCA").
   Por isso ele NÃO é um link discreto: mantém a paleta vermelha do alerta, o
   mesmo ícone, e o rótulo diz quantas observações existem em vez de um "saiba
   mais" genérico. A ideia é que se leia como pendência, não como rodapé.

   A variante --nota é para a estimativa, que não é alerta: ali o cinza é o
   certo, porque gritar por uma nota de cálculo ensina a ignorar o vermelho. */
.oferta-avisos {
  display: flex;
  justify-content: center;
  margin-top: 2px;
}
.oferta-avisos__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  border: 1px solid #f3b6b2;
  border-radius: 8px;
  background: #fdecea;
  color: #a5251d;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  /* alvo de toque confortável no celular sem virar um bloco no desktop */
  min-height: 38px;
  padding: 4px 4px;
  text-align: left;
  cursor: pointer;
  /* [16/09/2026] A MESMA SOMBRA DOS BOTÕES DE AÇÃO (#contact .btn-get-started).
     O botão de avisos vive logo abaixo do GERAR PDF / VISUALIZAR; sem relevo,
     ele lia como etiqueta ao lado de dois botões com volume. Mesmos valores,
     inclusive no hover — se a sombra do site mudar, esta tem de acompanhar. */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.oferta-avisos__btn > i {
  font-size: 15px;
  color: #d93025;
  flex-shrink: 0;
}
.oferta-avisos__btn:hover,
.oferta-avisos__btn:focus-visible {
  background: #fbdcd8;
  border-color: #e39d97;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
}
.oferta-avisos__btn:focus-visible {
  outline: 2px solid #d93025;
  outline-offset: 2px;
}
.oferta-avisos__btn--nota {
  background: #f4f6f8;
  border-color: #dfe5ee;
  color: #5c6780;
  font-weight: 600;
}
.oferta-avisos__btn--nota > i { color: #8b97a8; }
.oferta-avisos__btn--nota:hover,
.oferta-avisos__btn--nota:focus-visible {
  background: #e9edf2;
  border-color: #cbd5e1;
}
.oferta-avisos__btn--nota:focus-visible { outline-color: #5c6780; }
@media (max-width: 767.98px) {
  /* no celular o alvo sobe para 44px, igual ao resto do simulador */
  .oferta-avisos__btn { min-height: 44px; }
}

/* ----- o modal das observações -----
   O `style.css` do site manda TODO modal ocupar a tela inteira
   (`.modal .modal-dialog { width:100%; max-width:none; height:100% }`), o que
   faz sentido para a tabela de 360 parcelas e nenhum para dois parágrafos:
   abria uma folha em branco do tamanho do monitor com três linhas no topo.
   As regras abaixo têm ID no seletor de propósito — é o que vence a do site
   sem precisar de `!important`. */
#avisosModal .modal-dialog {
  width: auto;
  max-width: 560px;
  height: auto;
  margin: 1.75rem auto;
}
#avisosModal .modal-content {
  height: auto;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
}
#avisosModal .modal-header { padding: 14px 18px; }
#avisosModal .modal-title { font-size: 16px; font-weight: 700; color: #13386B; }
#avisosModal .modal-body {
  padding: 16px 18px;
  /* uma oferta pode trazer vários avisos longos: o corpo rola, o modal não cresce */
  max-height: 70vh;
}
#avisosModal .modal-footer { padding: 12px 18px; }
@media (max-width: 575.98px) {
  #avisosModal .modal-dialog { margin: 1rem; }
}

/* =====================================================================
   [25/09/2026] A TELA DE RESULTADOS NO DESIGN SYSTEM
   O bundle do creditocasa-design-system traz todo o desenho dos cards
   (classes cc-*). O que fica aqui é só o que é do SITE e não do sistema:
   a largura do container e duas defesas contra o CSS antigo.
   ===================================================================== */

/* O sistema pede 1320px: "o site permite até 1800px, largo demais para
   comparar cards". Sem isto a grade abria 4 colunas num monitor grande e o
   olho perdia a comparação lado a lado. */
.cc-results {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--space-6, 24px) var(--space-8, 40px);
}

/* O site tem `body { text-shadow: 1px 1px 2px rgba(0,0,0,.2) }` — ele borra
   número e rótulo dentro dos cards. O bundle já anula nos componentes; isto
   cobre o que estiver dentro do bloco de resultados. */
.cc-results, .cc-results * { text-shadow: none; }

/* Taxa longa ("9,99 % a.a. + IPCA (equivale a 14,50 % a.a. ...)") estourava a
   caixa do hero e sumia na borda do card. Deixa quebrar. */
.cc-offer__stat-value, .cc-offer__stat-hint {
  overflow-wrap: anywhere;
  white-space: normal;
}

@media (max-width: 575.98px) {
  .cc-results { padding-left: var(--space-4, 16px); padding-right: var(--space-4, 16px); }
}

/* [25/09/2026] O modal de parcelas com o InstallmentTable dentro.
   O sistema pede 960px e tela cheia só no celular; o .modal-lg do bootstrap dá
   800px e deixava a tabela apertada, com o saldo devedor colado na borda. */
.modal-dialog.modal-tabela--ds {
  max-width: 960px;
  width: calc(100% - 32px);
}
.modal-dialog.modal-tabela--ds .modal-content {
  border: 0;
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
}
.modal-dialog.modal-tabela--ds .modal-body { padding: 0; }

@media (max-width: 575.98px) {
  .modal-dialog.modal-tabela--ds {
    max-width: 100%;
    width: 100%;
    margin: 0;
    min-height: 100%;
  }
  .modal-dialog.modal-tabela--ds .modal-content { min-height: 100vh; border-radius: 0; }
}

/* [25/09/2026] O bundle do design system define white-space:nowrap em
   .cc-offer__stat-value e .cc-offer__stat-hint, e ele é carregado DEPOIS deste
   arquivo — por isso a regra de antes não pegava. Com .cc-results na frente, a
   especificidade sobe e a linha de apoio pode quebrar.
   O valor do hero continua sem quebrar: ele agora é curto de propósito (a taxa
   contratada), e um número que quebra no meio é pior do que um que não cabe. */
.cc-results .cc-offer .cc-offer__stat-hint {
  white-space: normal;
  overflow-wrap: anywhere;
}
.cc-results .cc-offer .cc-offer__stat-value {
  overflow-wrap: anywhere;
}