/* Paleta institucional PUC-Campinas sobre Bootstrap 5, portada de
   jornada-universitaria-v3/assets/css/puc-theme.css pro plugin WordPress.
   Seletores de raiz (#app -> .bussola-app-shell, .toast -> .bussola-toast)
   renomeados pra não colidir com outros elementos de tema/plugins na página.
   Blocos marcados "adição" no final não existem na fonte original. */

:root{
  --puc-azul: #132764;
  /* Nome da variável ficou de antes (era dourado, #D4A23F) — troca de marca
     pro verde-limão abaixo, mas renomear a variável em todo o arquivo não
     valia o diff. */
  --puc-dourado: #E7EA21;
  --puc-dourado-hover: #cdd01d;
  --puc-cinza-claro: #F7FAFD;
  --puc-ink: #15221C;
  --puc-ink-soft: #4A564E;
  --puc-danger: #B5473F;
  --puc-line: rgba(0,51,131,0.14);
}

/* Poppins (Google Fonts), auto-hospedada em assets/fonts/ — mesma fonte já
   usada no PNG do "prêmio" (class-bussola-premio.php, via GD/TTF). Só 400 e
   700 são baixados; pesos intermediários (500/600) caem no 400 ou 700 mais
   próximo pelo algoritmo padrão de font-matching do navegador. Arquivos
   .woff2 gerados a partir dos .ttf com fonttools (subset Latin/Latin-Ext). */
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/Poppins-Regular.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap;
  src:url('assets/fonts/Poppins-Bold.woff2') format('woff2');
}

.bussola-app-shell{
  max-width:1180px; margin:0 auto; padding:40px 24px 120px;
  color: var(--puc-ink); font-family:'Poppins', ui-sans-serif, system-ui, -apple-system, sans-serif;
  background:#e5e8ed;
}
.form-check-label {
    color: var(--primary-blue);
    font-weight: 600;
    font-size: 0.85rem !important;
    margin-left: 0.5rem;
}

.bussola-app-shell .eyebrow{
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--puc-azul); font-weight:500; display:flex; align-items:center; gap:8px;
}
.bussola-app-shell .eyebrow::before{ content:""; width:16px; height:1px; background: var(--puc-dourado); }

/* transição fluida entre telas, direção controlada em bussola-test.js */
.bussola-app-shell .screen{ animation: bussolaScreenEnter .38s cubic-bezier(.22,.61,.36,1); }
.bussola-app-shell .screen.enter-back{ animation: bussolaScreenEnterBack .38s cubic-bezier(.22,.61,.36,1); }
.bussola-app-shell .screen.screen-leaving{ animation: bussolaScreenLeave .18s ease forwards; }
.bussola-app-shell .screen.screen-leaving.leave-back{ animation: bussolaScreenLeaveBack .18s ease forwards; }
@keyframes bussolaScreenEnter{ from{opacity:0; transform:translateX(20px);} to{opacity:1; transform:none;} }
@keyframes bussolaScreenEnterBack{ from{opacity:0; transform:translateX(-20px);} to{opacity:1; transform:none;} }
@keyframes bussolaScreenLeave{ to{opacity:0; transform:translateX(-20px);} }
@keyframes bussolaScreenLeaveBack{ to{opacity:0; transform:translateX(20px);} }
@media (prefers-reduced-motion: reduce){
  .bussola-app-shell .screen, .bussola-app-shell .screen.enter-back, .bussola-app-shell .screen.screen-leaving, .bussola-app-shell .screen.screen-leaving.leave-back{ animation:none; }
  /* base de .tiebreak-option agora começa em opacity:0 (ver bloco mais
     abaixo) até JS adicionar .tb-enter — sem isso, desligar só a
     animação aqui deixaria as opções invisíveis pra sempre em vez de só
     estáticas. */
  .bussola-app-shell .tiebreak-option{ animation:none; opacity:1; transform:none; }
}

/* Etapa X de Y fica ACIMA da barra, alinhada à direita (era abaixo,
   centralizada). Marcador quadrado na borda do preenchimento, em vez de
   gradiente azul->destaque na barra inteira. */
.bussola-app-shell .progress-top{ display:flex; justify-content:flex-end; margin-bottom:8px; }
.bussola-app-shell .progress-step{ font-size:12.5px; font-weight:600; color: var(--puc-ink); }
.bussola-app-shell .progress{ position:relative; height:14px; background:#dde1ea; overflow:visible; border-radius:0; }
.bussola-app-shell .progress-bar{ height:100%; background: var(--puc-azul); border-radius:0; }
/* Marcador com a MESMA altura da barra (não um ponto flutuante) — encaixado
   na borda do preenchimento, só deslocado na horizontal pra centralizar
   no ponto exato da porcentagem. */
.bussola-app-shell .progress-marker{
  position:absolute; top:0; height:100%; width:8px; background: var(--puc-dourado);
  transform:translateX(-50%);
}

/* Layout + espaçamento dos cards de experiência: CSS Grid puro (sem classes
   de grid do Bootstrap no HTML, ver includes/class-bussola-telas.php — elas
   competiam com isto: Bootstrap fixava width:33.3333% em cada card, e
   dentro de um grid isso virava 33% da própria coluna, não do total). 1
   coluna até 768px, 2 colunas a partir daí (2x2 pras 4 opções por tela
   desde a v1.0.8 — schema de área exclusiva, 1 opção por área). */
.bussola-app-shell .exp-grid{ display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 768px){
  .bussola-app-shell .exp-grid{ grid-template-columns: repeat(2, 1fr); }
}
/* Layout horizontal: bloco de ícone (azul sólido) à esquerda, texto no
   meio, radio à direita — troca do card vertical antigo (ícone+check no
   topo, texto embaixo). Ao selecionar, o texto + radio viram a cor de
   destaque (--puc-dourado, ver :root); o bloco do ícone continua azul. */
.bussola-app-shell .exp-card{
  text-align:left; background:#fff; border:1px solid var(--puc-line); min-height:112px;
  padding:0; display:flex; flex-direction:row; align-items:stretch; overflow:hidden;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow:0 1px 2px rgba(0,51,131,.04), 0 8px 24px rgba(0,51,131,.06);
}
.bussola-app-shell .exp-card:hover{ transform:translateY(-2px); border-color:rgba(0,51,131,.35); }
.bussola-app-shell .exp-card-icon{
  width:92px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background: var(--puc-azul); color:#fff;
}
.bussola-app-shell .exp-card-icon svg{ width:32px; height:32px; display:block; }
.bussola-app-shell .exp-card-body{
  flex:1; min-width:0; padding:20px 18px; display:flex; flex-direction:column;
  justify-content:center; gap:6px; background:#fff; transition:background .18s ease;
}
.bussola-app-shell .exp-card-label{ font-weight:700; font-size:15px; line-height:1.28; color: var(--puc-ink); }
.bussola-app-shell .exp-card-desc{ font-size:12.5px; line-height:1.4; color: var(--puc-ink-soft); }
.bussola-app-shell .exp-card-radio-wrap{
  width:48px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background: var(--puc-cinza-claro); transition:background .18s ease;
}
.bussola-app-shell .exp-card-radio{
  width:20px; height:20px; border-radius:50%; border:1.5px solid var(--puc-line);
  flex-shrink:0; display:flex; align-items:center; justify-content:center; background:#fff;
}
.bussola-app-shell .exp-card-radio-dot{
  width:10px; height:10px; border-radius:50%; background: var(--puc-azul);
  opacity:0; transform:scale(.4); transition:all .16s ease;
}
.bussola-app-shell .exp-card.selected .exp-card-body,
.bussola-app-shell .exp-card.selected .exp-card-radio-wrap{ background: var(--puc-dourado); }
.bussola-app-shell .exp-card.selected .exp-card-radio{ border-color: var(--puc-azul); }
.bussola-app-shell .exp-card.selected .exp-card-radio-dot{ opacity:1; transform:scale(1); }

/* Tela de tiebreaker: lista vertical num card só, centralizado e mais
   estreito que o resto do builder, em vez do grid de colunas — a
   quantidade de opções varia (2 a 6, conforme quantas áreas empataram),
   então empilhar se adapta a qualquer quantidade sem recalcular coluna. */
.bussola-app-shell .tiebreak-wrap{ display:flex; justify-content:center; margin-top:8px; }
.bussola-app-shell .tiebreak-card{
  width:100%; display:flex; flex-direction:column; gap:10px;
  background: rgba(231, 234, 33, .22); border:none;
  padding:14px; box-shadow:0 8px 24px rgba(0,51,131,.08);
}
/* 50% da tela, centralizada (25% de sobra de cada lado) só a partir de
   768px — em telas pequenas 50% ficaria estreito demais pro conteúdo dos
   cards, por isso 100% até o breakpoint, mesmo critério do resto do
   builder (ver .exp-grid). */
@media (min-width: 768px){
  .bussola-app-shell .tiebreak-card{ width:50%; }
}
/* Layout, cores e estado .selected do card em si vêm de .exp-card (ver
   acima) — o markup da tela de tiebreaker usa as duas classes juntas
   (class="exp-card tiebreak-option"), pra ficar visualmente igual aos
   cards do builder em vez de uma variante fina em linha. */

/* Entrada escalonada: cada opção aparece um pouco depois da anterior, em
   vez de tudo surgir de uma vez — reforça a sensação de "última pergunta".
   Estado inicial (opacity:0) fica parado até JS adicionar .tb-enter num
   requestAnimationFrame (wireEvents() em bussola-test.js) — mais robusto
   entre navegadores do que confiar que a animação dispara sozinha ao
   inserir via innerHTML. nth-child cobre até 6 opções (máximo possível,
   uma por área). */
.bussola-app-shell .tiebreak-option{ opacity:0; transform:translateY(14px); }
.bussola-app-shell .tiebreak-option.tb-enter{ animation: bussolaTiebreakIn .45s cubic-bezier(.22,.61,.36,1) both; }
.bussola-app-shell .tiebreak-option:nth-child(1).tb-enter{ animation-delay: .05s; }
.bussola-app-shell .tiebreak-option:nth-child(2).tb-enter{ animation-delay: .12s; }
.bussola-app-shell .tiebreak-option:nth-child(3).tb-enter{ animation-delay: .19s; }
.bussola-app-shell .tiebreak-option:nth-child(4).tb-enter{ animation-delay: .26s; }
.bussola-app-shell .tiebreak-option:nth-child(5).tb-enter{ animation-delay: .33s; }
.bussola-app-shell .tiebreak-option:nth-child(6).tb-enter{ animation-delay: .40s; }
@keyframes bussolaTiebreakIn{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }

.bussola-app-shell .builder-nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:28px; flex-wrap:wrap; }
.bussola-app-shell .builder-nav-count{ font-size:12px; color: var(--puc-ink-soft); }
.bussola-app-shell .builder-nav-count strong{ color: var(--puc-ink); font-weight:600; }
/* Mobile: Voltar/Próximo tinha o "N selecionadas" no meio deles no HTML
   (builder e tiebreaker reaproveitam o mesmo .builder-nav), então quando
   os 3 itens não cabem numa linha só, o flex-wrap empurrava só o botão
   Próximo pra linha de baixo sozinho, sobrando um layout desalinhado.
   Reordena via flex `order`: os dois botões ficam juntos, lado a lado
   (metade cada), e a contagem desce pra própria linha, centralizada. */
@media (max-width:600px){
  .bussola-app-shell .builder-nav .ghost-btn{ order:1; flex:1; }
  .bussola-app-shell .builder-nav .cta-btn{ order:2; flex:1; }
  .bussola-app-shell .builder-nav-count{ order:3; width:100%; text-align:center; }
}
/* Botões com seta numa caixinha de cor separada do texto (bussola_botao_texto_icone(),
   ver class-bussola-telas.php) — bloco dividido em duas metades com cores opostas,
   texto em maiúsculas. Cada botão define só as cores das duas metades; o resto
   (formato, tamanho) é compartilhado aqui. */
.bussola-app-shell .ghost-btn,
.bussola-app-shell .cta-btn,
.bussola-app-shell .primary-cta{
  display:inline-flex; align-items:stretch; padding:0; border:none; border-radius:0;
  overflow:hidden; font-weight:700; font-size:13.5px; text-transform:uppercase; letter-spacing:.04em;
}
.bussola-app-shell .ghost-btn .btn-icon, .bussola-app-shell .ghost-btn .btn-text,
.bussola-app-shell .cta-btn .btn-icon, .bussola-app-shell .cta-btn .btn-text,
.bussola-app-shell .primary-cta .btn-icon, .bussola-app-shell .primary-cta .btn-text{
  display:flex; align-items:center; padding:13px 18px; transition:background .18s ease;
}
.bussola-app-shell .btn-icon{ justify-content:center; font-size:16px; line-height:1; padding-left:16px; padding-right:16px; }
.bussola-app-shell .btn-text{ flex:1; justify-content:center; white-space:nowrap; }

/* Voltar: seta em caixa lima, texto em caixa azul-marinho. */
.bussola-app-shell .ghost-btn .btn-icon{ background: var(--puc-dourado); color: var(--puc-azul); }
.bussola-app-shell .ghost-btn .btn-text{ background: var(--puc-azul); color:#fff; }

/* Próximo/Continuar/Baixar: seta em caixa azul, texto em caixa lima. */
.bussola-app-shell .cta-btn .btn-icon{ background: var(--puc-azul); color:#fff; }
.bussola-app-shell .cta-btn .btn-text{ background: var(--puc-dourado); color: var(--puc-ink); }
.bussola-app-shell .cta-btn:hover:not(:disabled) .btn-text{ background: var(--puc-dourado-hover); }
.bussola-app-shell .cta-btn:disabled{ opacity:.4; }

/* Confirmar (CTA principal, tela de resultado): seta em caixa lima, texto em caixa azul. */
.bussola-app-shell .primary-cta .btn-icon{ background: var(--puc-dourado); color: var(--puc-azul); }
.bussola-app-shell .primary-cta .btn-text{ background: var(--puc-azul); color:#fff; }
.bussola-app-shell .primary-cta:hover:not(:disabled) .btn-text{ background:#00266b; }
.bussola-app-shell .primary-cta:disabled{ opacity:.4; }

.bussola-app-shell .cta-hint{ font-size:11.5px; color: var(--puc-ink-soft); }

.bussola-app-shell .lead-wrap{ max-width:460px; margin:40px auto 0; background:#fff; border:1px solid var(--puc-line); padding:32px 28px; box-shadow:0 8px 24px rgba(0,51,131,.06); }
.bussola-app-shell .lead-wrap h2{ font-size:24px; margin:10px 0 8px; }
.bussola-app-shell .lead-wrap .sub{ font-size:13.5px; color: var(--puc-ink-soft); line-height:1.5; margin-bottom:22px; }
.bussola-app-shell .lead-note{ font-size:11px; color: var(--puc-ink-soft); margin-top:14px; line-height:1.5; }
.bussola-app-shell .back-link{ color: var(--puc-ink-soft); font-size:12.5px; text-decoration:none; padding:0; margin-bottom:18px; }
.bussola-app-shell .back-link:hover{ color: var(--puc-ink); }

/* Captura de lead: largura cheia (mesma da página), sem o card branco
   destacado — diferente de .lead-wrap (usada só na tela "enviado"). */
.bussola-app-shell .leadcapture-wrap{ max-width:none; }
.bussola-app-shell .leadcapture-wrap h2{ font-size:clamp(22px,3vw,28px); font-weight:700; margin:10px 0 8px; color: var(--puc-ink); }
.bussola-app-shell .leadcapture-wrap .sub{ font-size:14px; color: var(--puc-ink-soft); line-height:1.5; margin-bottom:28px; max-width:680px; }
.bussola-app-shell .lead-grid{ display:grid; grid-template-columns:1fr; gap:22px 32px; margin-bottom:26px; }
@media (min-width:560px){ .bussola-app-shell .lead-grid{ grid-template-columns:1fr 1fr; } }
.bussola-app-shell .lead-grid .field-full{ grid-column:1 / -1; }
/* No mobile (grid de 1 coluna) o input já ocupa a largura natural do
   campo, igual os outros — só no desktop (2 colunas) que "esticar" um
   campo curto (data) pela linha inteira fica exagerado, então limita a
   largura do input aí, sem mexer no wrapper (label continua alinhado
   com os outros campos). */
@media (min-width:560px){
  .bussola-app-shell .lead-grid .field-full .form-control{ max-width:220px; }
}
.bussola-app-shell .lead-grid .form-label{ font-weight:700; color: var(--puc-ink); font-size:14.5px; margin-bottom:8px; }
.bussola-app-shell .lead-grid .form-control{
  border:1px solid var(--puc-line); border-radius:0;
  background:#fff; padding:12px 14px; font-size:14.5px; color: var(--puc-ink);
}
.bussola-app-shell .lead-grid .form-control::placeholder{ color:#9aa2b1; }
.bussola-app-shell .lead-grid .form-control:focus{ border-color: var(--puc-azul); box-shadow:none; }
.bussola-app-shell .lead-grid .form-control.is-invalid{ border-color: var(--puc-danger); }

/* Checkbox de LGPD com aparência de radio circular (continua semanticamente
   um checkbox — só o visual muda, via appearance:none + ::after). */
.bussola-app-shell .lgpd-check .form-check-input{
  appearance:none; -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  border:1.5px solid var(--puc-line); background:#fff; position:relative; cursor:pointer;
}
.bussola-app-shell .lgpd-check .form-check-input:checked{ border-color: var(--puc-azul); border-width:2px; }
.bussola-app-shell .lgpd-check .form-check-input:checked::after{
  content:""; position:absolute; top:50%; left:50%; width:9px; height:9px; border-radius:50%;
  background: var(--puc-azul); transform:translate(-50%,-50%);
}

/* Título (eyebrow + h2) fora do card azul, posicionado antes dele — cores
   ajustadas pro fundo claro da página. A descrição da área ficou dentro do
   card (ver .results-hero p abaixo), por isso não tem <p> aqui. */
.bussola-app-shell .results-title{ margin-bottom:20px; }
.bussola-app-shell .results-title h2{ color: var(--puc-ink); font-size:clamp(26px,3.4vw,36px); font-weight:600; line-height:1.12; margin:12px 0 10px; }
.bussola-app-shell .results-title .area-name{ color: var(--puc-azul); }

/* Descrição da área: texto solto (preto, fora de card), logo abaixo do
   título — antes ficava dentro do card azul do radar. */
.bussola-app-shell .results-desc{ font-size:14.5px; line-height:1.6; color: var(--puc-ink-soft); margin-bottom:26px; }

/* Duas colunas a partir de 900px: cursos à esquerda (mais larga), radar +
   faixa "RESULTADO" + prêmio à direita. Empilhado (cursos primeiro) em
   telas menores. */
.bussola-app-shell .results-columns{ display:grid; grid-template-columns:1fr; gap:28px; margin-bottom:28px; align-items:start; }
@media (min-width:900px){
  .bussola-app-shell .results-columns{ grid-template-columns:1.35fr 1fr; }
}

/* min-width:0 é o fix real do slider quebrando (não o slick em si): item
   de CSS Grid tem min-width:auto por padrão, ou seja, o próprio conteúdo
   intrínseco pode forçar a coluna da grid a crescer além do 1.35fr
   pretendido. O .slick-slide (float:left, sem width ainda no instante em
   que o slick mede o container) fica "shrink-to-fit" nesse meio-tempo, e
   com texto de curso comprido sem quebrar linha, o conteúdo intrínseco
   somado passa de 17000px — o slick lê essa largura inflada como a
   largura "real" do container e trava esse valor em pixel no
   .slick-track/.slick-slide (dá pra ver isso no DOM renderizado: width:
   17118px). Sem isso, nenhum ajuste no slick.js resolve, porque a raiz do
   problema é a coluna da grid acima dele, não o slider. */
.bussola-app-shell .cursos-panel{ min-width:0; }
.bussola-app-shell .slick-slide { min-height: 500px; }
.bussola-app-shell .cursos-panel .rlabel{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--puc-dourado-hover); font-weight:600; margin-bottom:6px; }
.bussola-app-shell .cursos-panel h4{ font-size:19px; margin-bottom:4px; }
.bussola-app-shell .cursos-panel .sub{ font-size:12.5px; color: var(--puc-ink-soft); margin-bottom:18px; }
.bussola-app-shell .cursos-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (min-width:480px){ .bussola-app-shell .cursos-grid{ grid-template-columns:repeat(3,1fr); } }

/* Slider (slick.js) só entra quando a área tem mais de 9 cursos — os
   .curso-tile entram direto como filhos de .cursos-slider (sem grid
   manual), e o slick reorganiza em 3x3 sozinho via rows/slidesPerRow (ver
   wireEvents() em bussola-test.js), aplicando width:33.333%/display
   inline em cada .curso-tile. Bolinhas desenhadas via CSS (background numa
   caixa com border-radius), não o glifo de texto "•" padrão do
   slick-theme.css — esse glifo rende meio borrado/inconsistente de
   tamanho entre navegador/fonte. A ativa vira uma pílula alongada em vez
   de só mudar de cor, pra ficar óbvio qual página está aberta mesmo num
   relance.
   Setas (arrows:true, ver wireEvents()) ficam ao lado das bolinhas, não
   nas laterais do slide (posição padrão do slick, sobrepondo o conteúdo)
   — .cursos-slider vira flex-wrap: o .slick-list ocupa a linha inteira
   (order:1), e seta-esquerda/bolinhas/seta-direita formam a segunda linha,
   centralizada. */
.bussola-app-shell .cursos-slider{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; }
.bussola-app-shell .cursos-slider .slick-list{ order:1; width:100%; min-width:0; }
.bussola-app-shell .cursos-slider .slick-dots{ order:3; position:static; width:auto; margin-top:0; line-height:0; }
.bussola-app-shell .cursos-slider .slick-prev,
.bussola-app-shell .cursos-slider .slick-next{
  position:static; margin-top:18px; width:18px; height:18px; z-index:1;
}
.bussola-app-shell .cursos-slider .slick-prev{ order:2; margin-right:5px; }
.bussola-app-shell .cursos-slider .slick-next{ order:4; margin-left:5px; }
.bussola-app-shell .cursos-slider .slick-prev:before,
.bussola-app-shell .cursos-slider .slick-next:before{
  font-family:"Font Awesome 5 Free"; font-weight:900; font-size:14px;
  color: var(--puc-azul); opacity:1;
}
.bussola-app-shell .cursos-slider .slick-prev:before{ content:"\f060"; }
.bussola-app-shell .cursos-slider .slick-next:before{ content:"\f061"; }
.bussola-app-shell .cursos-slider .slick-prev:hover:before,
.bussola-app-shell .cursos-slider .slick-next:hover:before{ color: var(--puc-dourado-hover); }
.bussola-app-shell .cursos-slider .slick-prev.slick-disabled:before,
.bussola-app-shell .cursos-slider .slick-next.slick-disabled:before{ opacity:.25; }
.bussola-app-shell .cursos-slider .slick-dots li{ width:auto; height:auto; margin:0 5px; }
.bussola-app-shell .cursos-slider .slick-dots li button{ width:16px; height:16px; padding:0; }
.bussola-app-shell .cursos-slider .slick-dots li.slick-active button{ border:0 !important; background:transparent !important; }
.bussola-app-shell .cursos-slider .slick-dots li button:before{
  content:''; font-family:inherit; top:50%; left:50%; width:10px; height:10px;
  transform:translate(-50%,-50%); border-radius:50px;
  background: var(--puc-line); opacity:1; transition:width .18s ease, background .18s ease;
}
.bussola-app-shell .cursos-slider .slick-dots li button:hover:before{ background: var(--puc-azul); opacity:1; }
.bussola-app-shell .cursos-slider .slick-dots li.slick-active button:before{
  width:28px; background: var(--puc-azul);
}

/* Curso agora é um "tile" clicável (ícone genérico + nome), não mais uma
   linha com botão de favoritar separado — clicar no tile inteiro favorita,
   mesma linguagem de interação dos cards do builder (seleção = cor de
   destaque). Sem card branco por trás (fundo da própria página).
   O fundo/padding/centralização ficam em .curso-tile-inner, não no próprio
   .curso-tile: dentro do slider (slick.js), .curso-tile é quem recebe
   width/display inline do slick (rows/slidesPerRow) — se o mesmo elemento
   também carregasse display:flex + padding, brigaria com esse inline
   style. .curso-tile em si vira só a "célula" (largura/clique); só tem
   padding próprio dentro do slider, criando o respiro entre tiles sem
   depender de gap (que quebraria a conta de 33.333% do slick). */
.bussola-app-shell .curso-tile{ background:none; border:none; padding:0; cursor:default; }
.bussola-app-shell button.curso-tile{ cursor:pointer; }
.bussola-app-shell .cursos-slider .curso-tile{ padding:7px; box-sizing:border-box; vertical-align:top; }
.bussola-app-shell .curso-tile-inner{
  background: var(--puc-azul); padding:24px 12px; min-height:150px; height:100%; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px;
  transition:background .18s ease, transform .18s ease;
}
.bussola-app-shell button.curso-tile:hover .curso-tile-inner{ transform:translateY(-2px); }
.bussola-app-shell .curso-tile-icon{ color:#fff; font-size:44px; line-height:1; }
.bussola-app-shell .curso-tile-nome{ font-weight:700; font-size:12.5px; line-height:1.3; color: var(--puc-dourado); }
.bussola-app-shell .curso-tile.favoritado .curso-tile-inner{ transform: scale(0.95); background: var(--puc-dourado); }
.bussola-app-shell .curso-tile.favoritado .curso-tile-icon{ color: var(--puc-azul); }
.bussola-app-shell .curso-tile.favoritado .curso-tile-nome{ color: var(--puc-azul); }

/* Coluna direita: card azul com o radar, faixa "RESULTADO" colada embaixo
   (mesmo card), botão de prêmio abaixo, alinhado à direita. */
.bussola-app-shell .results-side{ display:flex; flex-direction:column; }
.bussola-app-shell .results-hero{ margin-top: 5.75rem; background: var(--puc-azul); padding:24px 20px 14px; display:flex; flex-direction:column; align-items:center; }
.bussola-app-shell .radar-mini{ width:100%; max-width:420px; }
.bussola-app-shell .radar-mini canvas{ max-width:100%; height:auto; }
.bussola-app-shell .resultado-banner{
  background: var(--puc-dourado); color: var(--puc-azul); text-align:center;
  font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:17px;
  padding:14px;
}
/* Escondido por enquanto (feature ainda não lançada) — JS continua
   gerando o prêmio e montando os links normalmente, só a exibição foi
   desativada. Remover a linha "display:none" quando for reativar. */
.bussola-app-shell .results-side .premio-wrap{ display:none; flex-direction:column; align-items:stretch; gap:12px; margin:18px 0 0; }
/* "Saiba mais" (bitly do curso favoritado) ao lado esquerdo de "Baixar meu
   prêmio" — só aparece se o curso tiver bitly (sempre tem, ver
   data/cursos.json, mas defensivo pro caso de dado futuro incompleto).
   Os dois dividem a linha em metades iguais (flex:1 em cada), em vez de
   cada um só do tamanho do próprio texto. */
.bussola-app-shell .premio-actions{ display:flex; flex-direction:row; gap:10px; }
.bussola-app-shell .premio-actions .btn{ flex:1; min-width:0; }
.bussola-app-shell .premio-btn, .bussola-app-shell .premio-saiba-mais{ text-decoration:none; }
/* Padroniza as duas cores com o mesmo par usado no "Saiba mais"
   (ghost-btn: ícone lima, texto azul-marinho) — antes "Baixar meu prêmio"
   usava o par oposto do .cta-btn padrão (ícone azul, texto lima), o que
   ficava com as cores invertidas entre os dois botões lado a lado. */
.bussola-app-shell .premio-btn .btn-icon{ background: var(--puc-dourado); color: var(--puc-azul); }
.bussola-app-shell .premio-btn .btn-text,
.bussola-app-shell .premio-btn:hover:not(:disabled) .btn-text{ background: var(--puc-azul); color:#fff; }
.bussola-app-shell .premio-btn:hover:not(:disabled) .btn-icon{ background: var(--puc-dourado-hover); }
/* Prévia reduzida do PNG do prêmio (gerado em tamanho final, 1080x1350 —
   só exibido menor aqui via width). Placeholder cinza + fade-in enquanto
   carrega, pra não parecer quebrado no meio segundo entre trocar de tela
   e o GD terminar de montar a imagem no servidor.
   escondida por enquanto (display:none) a pedido — JS continua gerando e
   trocando o src normalmente, só não fica visível ainda. Remover a linha
   "display:none" quando for reativar. */
.bussola-app-shell .premio-preview{
  display:none;
  width:130px; max-width:60%; aspect-ratio:1080/1350;
  background: var(--puc-cinza-claro); box-shadow:0 8px 24px rgba(0,51,131,.15);
  object-fit:cover; opacity:0; transition:opacity .35s ease;
}
.bussola-app-shell .premio-preview.carregada{ opacity:1; }

.bussola-app-shell .rcard{ background:#fff; border:1px solid var(--puc-line); padding:22px; box-shadow:0 8px 24px rgba(0,51,131,.06); }
.bussola-app-shell .rcard .rlabel{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--puc-dourado-hover); font-weight:600; margin-bottom:10px; }
.bussola-app-shell .rcard h4{ font-weight:600; font-size:17px; margin:0 0 12px; color: var(--puc-ink); }
.bussola-app-shell .rcard ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.bussola-app-shell .rcard li{ font-size:13.5px; line-height:1.4; color: var(--puc-ink-soft); padding-left:16px; position:relative; }
.bussola-app-shell .rcard li::before{ content:""; position:absolute; left:0; top:6px; width:6px; height:6px; border-radius:50%; background: var(--puc-azul); }
.bussola-app-shell .rcard .quote{ font-style:italic; font-size:13.5px; line-height:1.5; color: var(--puc-ink); display:block; margin-bottom:10px; }
.bussola-app-shell .rcard .quote .who{ display:block; margin-top:4px; font-style:normal; font-size:10.5px; color: var(--puc-ink-soft); }

.bussola-app-shell .results-footer{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; background:#fff; border:1px solid var(--puc-line); padding:24px 28px; margin-top:28px; }
.bussola-app-shell .results-footer .txt h4{ font-size:16px; margin-bottom:4px; }
.bussola-app-shell .results-footer .txt p{ font-size:13px; color: var(--puc-ink-soft); margin:0; }

.bussola-toast{ position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); background: var(--puc-azul); color:#fff; padding:14px 22px; font-size:13.5px; opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; z-index:9999; max-width:90vw; text-align:center; }
.bussola-toast.show{ opacity:1; transform:translate(-50%,0); }

/* Console de debug (?bussola_debug=1, só admin — ver is_debug_mode() no PHP).
   Não existe na fonte original nem foi pedido no design da Bússola em si —
   é uma ferramenta de QA, deliberadamente com cara de devtools, não com a
   identidade visual do resto da página. */
#bussola-debug-console{
  position:fixed; right:16px; bottom:16px; width:420px; max-width:calc(100vw - 32px);
  max-height:60vh; background:#1e1e1e; color:#d4d4d4; border-radius:8px;
  box-shadow:0 4px 24px rgba(0,0,0,.4); font-family:'IBM Plex Mono', Consolas, monospace;
  font-size:11.5px; z-index:99999; display:flex; flex-direction:column; overflow:hidden;
}
#bussola-debug-console-header{
  background:#111; color:#fff; padding:8px 12px; font-weight:600; display:flex;
  justify-content:space-between; align-items:center; cursor:default; flex-shrink:0;
}
#bussola-debug-console-toggle{
  background:none; border:1px solid #555; color:#fff; border-radius:4px; width:22px; height:20px;
  line-height:1; cursor:pointer; font-size:12px;
}
#bussola-debug-console-body{ padding:8px 12px; overflow-y:auto; }
#bussola-debug-console.collapsed #bussola-debug-console-body{ display:none; }
#bussola-debug-console.collapsed{ max-height:none; }
.bussola-debug-entry{ border-bottom:1px solid #333; padding:6px 0; }
.bussola-debug-entry:last-child{ border-bottom:none; }
.bussola-debug-entry-head{ color:#9cdcfe; margin-bottom:3px; }
.bussola-debug-entry pre{ margin:0; white-space:pre-wrap; word-break:break-word; color:#ce9178; }
@media (max-width:600px){
  #bussola-debug-console{ right:8px; bottom:8px; left:8px; width:auto; max-width:none; }
}

/* ---- Adições (não existem em puc-theme.css original) ---- */

/* Cabeçalho do builder (.hero/.hero-compact/.lede): usado em bussola_tela_builder()
   mas não tinha regra correspondente na fonte original — completado aqui. */
.bussola-app-shell .hero{ margin-bottom: 24px; }
.bussola-app-shell .hero-compact{ margin-bottom: 18px; }
.bussola-app-shell .hero h1{ font-size: clamp(22px, 3vw, 30px); font-weight:600; margin: 10px 0 8px; color: var(--puc-ink); }
.bussola-app-shell .lede{ font-size: 14px; color: var(--puc-ink-soft); line-height: 1.5; max-width: 620px; }

/* Checkbox de consentimento LGPD no formulário de lead (adição em relação à
   fonte original, ver includes/class-bussola-telas.php) */
.bussola-app-shell .lgpd-check{ display:flex; align-items:flex-start; gap:8px; font-size:12.5px; color: var(--puc-ink-soft); }
.bussola-app-shell .lgpd-check .form-check-input{ margin-top:3px; flex-shrink:0; }
.bussola-app-shell .lgpd-check .invalid-feedback{ margin-left: 24px; }

/* Botões de compartilhar na tela "enviado" (adição em relação à fonte original) */
.bussola-app-shell .share-buttons{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:22px; }