/* ==========================================================================
   PPREV — tema compartilhado das Calculadoras (20/07/2026)

   Objetivo: dar às calculadoras a MESMA cara da plataforma de cursos
   (plataforma.pprev.com.br), agora que o login é único e a pessoa transita
   entre blog → cursos → calculadoras sem sentir que trocou de site.

   COMO FUNCIONA — e por que é seguro:
   cada página tem seu <style> embutido e já usa variáveis CSS
   (--azul-escuro, --laranja, ...). Este arquivo entra DEPOIS desse <style>
   e apenas (a) redefine as variáveis e (b) reestiliza classes de aparência.
   Nenhuma estrutura HTML e nenhum JS de cálculo é tocado.

   REGRA AO EDITAR: mexer só em cor, tipografia, raio e sombra. Espaçamento
   e layout ficam como estão — mudar isso reflui tabelas de resultado, que
   são a parte delicada destas telas.

   Backup do visual anterior: /home/pprev/backup_visual_calculadoras_*
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   1. Tokens da marca (iguais aos de web/src/app/globals.css na plataforma)
   -------------------------------------------------------------------------- */
:root {
  --aj-azul-noite:    #0E2038;
  --aj-azul-profundo: #1B3A6B;
  --aj-azul-eletrico: #2F6FBF;
  --aj-ciano-teal:    #4DB2EC;
  --aj-ciano:         #5FC0F0;
  --aj-cinza-claro:   #F2F4F7;
  --aj-cinza-prata:   #CBD5E1;
  --aj-grafite:       #111827;
  --aj-slate:         #475569;
  --aj-roxo-tech:     #29509F;

  --aj-gradient-primary: linear-gradient(135deg, #29509F 0%, #2F6FBF 55%, #4DB2EC 100%);
  --aj-gradient-dark:    linear-gradient(135deg, #0E2038 0%, #1B3A6B 60%, #12325C 100%);

  --aj-font-display: 'Sora', system-ui, sans-serif;
  --aj-font-body:    'Inter', system-ui, sans-serif;

  --aj-radius-sm: 10px;
  --aj-radius-md: 16px;
  --aj-radius-lg: 24px;
  --aj-shadow-soft: 0 18px 45px rgba(15, 23, 42, .14);
  --aj-shadow-card: 0 12px 30px rgba(15, 23, 42, .10);

  /* ---- Ponte com o vocabulário antigo das calculadoras ----
     É esta parte que muda a cara de TODAS as páginas de uma vez: elas já
     pintam tudo com estas variáveis. */
  --azul-escuro: var(--aj-azul-profundo);   /* era #2d3e8c */
  --azul-medio:  var(--aj-azul-eletrico);   /* era #4a8fc7 */
  --azul:        var(--aj-azul-eletrico);
  --azul-m:      var(--aj-azul-eletrico);
  --azul-claro:  var(--aj-ciano-teal);
  --laranja:     var(--aj-ciano-teal);      /* era #e8821a — a plataforma não tem laranja */
  --cinza-claro: var(--aj-cinza-claro);
  --cinza-bg:    var(--aj-cinza-claro);
  --cinza-borda: #E3E8EF;
  --borda:       #E3E8EF;
  --cinza:       var(--aj-slate);
  --cinza-text:  var(--aj-slate);
  --texto:       var(--aj-grafite);
  --branco:      #FFFFFF;
  /* Semânticos: continuam sendo cor de significado, não de marca. */
  --verde:       #0F9D6B;
  --vermelho:    #DC2626;
  --verm:        #DC2626;
  --amarelo:     #D97706;
  --roxo:        var(--aj-roxo-tech);
}

/* --------------------------------------------------------------------------
   2. Tipografia
   -------------------------------------------------------------------------- */
body {
  font-family: var(--aj-font-body);
  background: var(--aj-cinza-claro);
  color: var(--aj-grafite);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.hero h1, .secao-titulo, .calc-card-titulo, .logo {
  font-family: var(--aj-font-display);
  letter-spacing: -.01em;
}

/* --------------------------------------------------------------------------
   3. Cabeçalho — a barra escura da plataforma
   -------------------------------------------------------------------------- */
header {
  background: var(--aj-azul-noite) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
header .logo {
  font-family: var(--aj-font-display);
  font-weight: 800;
  letter-spacing: -.02em;
}
header .logo span { color: var(--aj-ciano-teal); }
header nav a {
  font-family: var(--aj-font-body);
  font-weight: 500;
  border-radius: 8px;
  padding: 6px 10px;
  transition: background .15s, color .15s;
}
header nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, .10);
}

/* Celular: o cabeçalho era uma linha só e os links subiam por cima do logo
   (defeito que já existia antes deste tema). Vira duas faixas empilhadas. */
@media (max-width: 640px) {
  header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px;
    padding: 12px 18px !important;
  }
  header nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 2px;
    width: 100%;
  }
  header nav a {
    margin-left: 0 !important;
    font-size: 13px;
  }
}

/* --------------------------------------------------------------------------
   4. Hero — mesmo gradiente escuro da home dos cursos
   -------------------------------------------------------------------------- */
.hero {
  background: var(--aj-gradient-dark) !important;
  position: relative;
}
.hero h1 {
  font-weight: 800;
  letter-spacing: -.02em;
}
.hero p { color: rgba(255, 255, 255, .82); }

/* --------------------------------------------------------------------------
   5. Título de seção — o "risco" laranja vira o ciano da marca
   -------------------------------------------------------------------------- */
.secao-titulo {
  color: var(--aj-azul-noite);
  font-weight: 700;
  border-bottom: 2px solid var(--aj-cinza-prata) !important;
  position: relative;
}
/* Traço curto e ciano sob o título, no lugar da linha laranja cheia. */
.secao-titulo::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 64px;
  height: 3px;
  border-radius: 3px;
  background: var(--aj-gradient-primary);
}

/* --------------------------------------------------------------------------
   6. Cards — o elemento que o Lael pediu para preservar.
      Mesma estrutura e mesmos stickers; muda o acabamento.
   -------------------------------------------------------------------------- */
.calc-card,
.card,
.painel,
.box {
  border-radius: var(--aj-radius-md);
  border: 1px solid rgba(203, 213, 225, .55);
  box-shadow: var(--aj-shadow-card);
}
.calc-card:hover {
  box-shadow: var(--aj-shadow-soft);
  border-color: rgba(47, 111, 191, .35);
}
.calc-card-icone {
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .05);
}
.calc-card-titulo {
  color: var(--aj-azul-noite);
  font-weight: 700;
}
.calc-card-sub  { color: var(--aj-slate); }
.calc-card-desc { color: var(--aj-slate); line-height: 1.55; }
.calc-card-footer { border-top: 1px solid rgba(203, 213, 225, .5); }
.calc-card-link {
  color: var(--aj-azul-eletrico);
  font-weight: 600;
}
.calc-card-link:hover { color: var(--aj-ciano-teal); }

/* Stickers de status — pílulas, como as etiquetas de categoria dos cursos */
.badge-status {
  border-radius: 999px;
  letter-spacing: .02em;
  padding: 4px 11px;
}
.badge-ativo  { background: #E6F7F0; color: #0B7A55; }
.badge-breve  { background: #FEF3E2; color: #B45309; }
.badge-futuro { background: #EEF2F7; color: var(--aj-slate); }

/* --------------------------------------------------------------------------
   7. Botões — o gradiente primário da plataforma
   -------------------------------------------------------------------------- */
button:not(.btn-secundario):not(.btn-link),
.btn,
.botao,
input[type="submit"] {
  font-family: var(--aj-font-body);
  font-weight: 600;
  border-radius: var(--aj-radius-sm);
  transition: filter .15s, box-shadow .15s, transform .1s;
}
button.btn-primario,
.btn-primario,
.btn-calcular,
button[type="submit"]:not(.btn-secundario) {
  background: var(--aj-gradient-primary);
  border: none;
  color: #fff;
  box-shadow: 0 8px 20px rgba(47, 111, 191, .28);
}
button.btn-primario:hover,
.btn-primario:hover,
.btn-calcular:hover,
button[type="submit"]:not(.btn-secundario):hover {
  filter: brightness(1.06);
  box-shadow: 0 10px 26px rgba(47, 111, 191, .34);
}
button:disabled { filter: grayscale(.4); opacity: .6; box-shadow: none; }

/* Numerador das etapas ("1", "2", "3" nos cabeçalhos de card) — era uma
   bolinha laranja em todas as calculadoras. */
.card-header .num,
.etapa-num,
.passo-num {
  background: var(--aj-azul-eletrico) !important;
  color: #fff;
}

/* Onde o laranja antigo era FUNDO com texto branco, o ciano não serve:
   texto branco sobre ciano claro fica ilegível. Nesses pontos usamos o
   gradiente/azul cheio — que é o destaque forte da plataforma. */
.plano-cta.destaque {
  background: var(--aj-gradient-primary) !important;
  color: #fff;
  box-shadow: 0 8px 20px rgba(47, 111, 191, .28);
}
.plano-cta.destaque:hover { filter: brightness(1.06); background: var(--aj-gradient-primary) !important; }
.plano-tag-destaque {
  background: var(--aj-azul-eletrico) !important;
  color: #fff;
}
.plano.destaque {
  border-color: var(--aj-azul-eletrico) !important;
  box-shadow: 0 10px 32px rgba(47, 111, 191, .18) !important;
}

/* --------------------------------------------------------------------------
   8. Formulários
   -------------------------------------------------------------------------- */
input, select, textarea {
  font-family: var(--aj-font-body);
  border-radius: var(--aj-radius-sm);
  border-color: var(--aj-cinza-prata);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--aj-azul-eletrico);
  box-shadow: 0 0 0 3px rgba(47, 111, 191, .15);
}
label { color: var(--aj-slate); font-weight: 500; }

/* --------------------------------------------------------------------------
   9. Tabelas de resultado — só cor de cabeçalho e zebra.
      NÃO mexer em padding/border-collapse: reflui número na tela.
   -------------------------------------------------------------------------- */
table th {
  background: var(--aj-cinza-claro);
  color: var(--aj-azul-noite);
  font-family: var(--aj-font-body);
  font-weight: 600;
}
table tbody tr:nth-child(even) { background: rgba(242, 244, 247, .55); }

/* --------------------------------------------------------------------------
   9.b Documento IMPRESSO pelo navegador (#area-impressao)

   Parte dos relatórios não vem do backend: a calculadora monta um HTML e
   chama window.print(). Esses saíam sem marca nenhuma, porque o CSS de
   impressão esconde o cabeçalho do site. O logo entra aqui.

   ⚠️ Tem que ser `content: url(...)`, e NÃO background-image: navegador não
   imprime imagem de fundo sem o usuário marcar "gráficos de plano de fundo"
   na caixa de impressão.
   -------------------------------------------------------------------------- */
/* Marca só do papel: invisível na tela, some do fluxo normal. */
.marca-impressao { display: none; }

@media print {
  /* `main > *` está oculto pela própria página; por isso o !important. */
  main > .marca-impressao,
  .marca-impressao {
    display: block !important;
    text-align: right;
    margin: 0 0 10px;
  }
  .marca-impressao img {
    width: 92px;                 /* ~2,4 cm impresso — discreto */
    height: auto;
  }
  /* O azul antigo ainda aparecia escrito à mão dentro do @media print. */
  #area-impressao h1 { color: var(--aj-azul-profundo) !important; }
  #area-impressao h2 {
    color: var(--aj-azul-profundo) !important;
    border-bottom-color: var(--aj-azul-profundo) !important;
  }
  #area-impressao th { background: var(--aj-cinza-claro) !important; }
}

/* --------------------------------------------------------------------------
   10. Rodapé
   -------------------------------------------------------------------------- */
footer {
  border-top: 1px solid var(--aj-cinza-prata);
  color: var(--aj-slate);
}
footer a { color: var(--aj-azul-eletrico); }

/* --------------------------------------------------------------------------
   11. Links gerais
   -------------------------------------------------------------------------- */
a { color: var(--aj-azul-eletrico); }