/* ====== Overrides finais ====== */

/* De-boxify (remove sombras e bordas duplicadas) */
.panel.card {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.q {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 18px !important;
}

@media (max-width: 640px) {
  .panel.card {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .q {
    margin-bottom: 16px !important;
  }
}

/* Ajustes de espaçamento na home */
#pg_home .q:first-of-type {
  margin-top: 30px !important;
}
@media (min-width: 901px) {
  #pg_home .q:first-of-type {
    margin-top: 40px !important;
  }
}
#child05_wrap {
  margin-top: 60px !important;
}
@media (max-width: 640px) {
  #child05_wrap {
    margin-top: 70px !important;
  }
}

/* Fundo radial no modo escuro */
body:not(.theme-light) {
  background-image: radial-gradient(
    circle at 50% 50%,
    rgba(0,160,255,.40) 0%,
    rgba(0,160,255,.30) 20%,
    rgba(0,160,255,.20) 40%,
    rgba(0,160,255,.10) 60%,
    rgba(0,160,255,.05) 80%,
    transparent 100%
  );
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

/* Recuo lateral em páginas (desktop) */
@media (min-width: 901px) {
  .wrap .panel.card.page {
    padding-left: 44px !important;
    padding-right: 44px !important;
  }
}

/* Wizard fixo e centralizado */
@media (min-width: 901px) {
  .wizardNav.panel {
    background: var(--panel) !important;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: min(1050px, 100vw - 48px);
    bottom: 76px;
    margin: 0;
    border-radius: 14px;
    z-index: 44;
    box-shadow: 0 10px 35px rgba(0,0,0,.24);
  }

  body.theme-light .wizardNav.panel {
    background: #ffffff !important;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -2px 8px rgba(0,0,0,.06);
  }

  /* Ajuste de padding inferior */
  .wrap {
    padding-bottom: 160px;
  }
}

/* Botões principais (Iniciar / Prosseguir) */
#startBtn,
#nextStep {
  background: var(--title) !important;
  color: #0b1222 !important;
  border: 1px solid rgba(0,0,0,.08);
}
#startBtn:hover,
#nextStep:hover {
  filter: brightness(1.05);
}

/* Botão Retornar */
#backStep {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
#backStep:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* Recursos bloqueados (perfil Rápida) */
.lockedFeature {
  filter: grayscale(.15);
  background: linear-gradient(0deg, rgba(255,0,0,.03), rgba(255,0,0,.03));
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 24px;
  position: relative;
}
.lockedNote {
  color: #A1FA4F;
  font-weight: 700;
  font-size: 12px;
  margin-top: 6px;
}
/* ===== Tarjeta "Recurso Premium" ===== */
.lockedPill {
  position: absolute;
  top: -25px;           /* sobe um pouco para ficar acima do texto */
  right: 12px;          /* alinha à direita */
  background: #fee2e2;
  color: #7f1d1d;
  border: 1px solid #fecaca;
  font-weight: 700;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(127,29,29,0.15);
  z-index: 10;          /* garante que fique visível acima do conteúdo */
}
.lockedFeature * {
  pointer-events: none;
}
.lockedFeature .lockedNote,
.lockedFeature .lockedPill {
  pointer-events: auto;
}
/* Espaço extra acima do footer SOMENTE no mobile, página 3 (Identificação) */
@media (max-width: 640px){
  #pg_who{
    padding-bottom: 70px !important; /* ajuste 140–180px conforme o respiro desejado */
  }
}

/* === Ajuste responsivo da tarjeta "Recurso Premium" Desktop === */

/* === Ajuste da tarjeta "Recurso Premium" apenas para DESKTOP === */
@media (min-width: 901px) {

  /* Padrão: perguntas comuns — aproxima mais do título e alinha à direita */
  .lockedFeature .lockedPill {
    position: absolute;
    top: -12px;             /* sobe um pouco, bem próximo do título */
    right: 550px;           /* ligeiramente afastado da borda */
    transform: none;
    z-index: 3;
  }

  /* Subbloco "Presença de CRIANÇAS pequenas" — acima do título, mais à direita */
  #child_presence_wrap .lockedPill,
  #child05_wrap .lockedPill {
    position: absolute;
    top: -20px;            /* acima do título */
    right: 580px;           /* encosta mais na lateral */
    transform: none;
  }
}
/* Tema claro: azul para perguntas, subperguntas e subtítulos */
body.theme-light .q h4,                  /* títulos das perguntas */
body.theme-light .subq,                  /* subperguntas */
body.theme-light [data-subtitle],        /* subtítulos marcados via data-attr */
body.theme-light .section-subtitle,      /* classe opcional de subtítulo */
body.theme-light .q .subtitle,
body.theme-light .q .muted.subtitle {
  color: #1d4ed8 !important; /* azul consistente com sua var --question no light */
}
/* Mobile: mover a .profileTag para o canto sup-dir ACIMA do título */
/* ===== Ajuste da .profileTag no MOBILE (colada à direita, acima do título) ===== */
@media (max-width: 640px){
  #blocks .panel.card > h2 {
    position: relative;
    padding-top: 28px !important;  /* espaço pro selo acima */
  }

  #blocks .panel.card > h2 .profileTag {
    position: absolute !important;
    top: -15px;          /* sobe acima do título */
    right: 0;            /* cola na borda direita */
    left: auto;
    margin: 0;
    transform: none;
    border-radius: 999px;
    z-index: 10;
  }
}

/* Tema claro: texto do selo em verde escuro */
body.theme-light .profileTag{
  color: #065f46 !important;             /* verde escuro */
  border-color: #e2e8f0;                 /* borda suave no light */
  background: rgba(16,185,129,.10);      /* leve toque esverdeado */
}

/* Só quando #blocks tiver a classe de risco */
/* Espaço extra nas páginas de RISCO para não colar no footer fixo */
body.is-risk .wrap{
  padding-bottom: 30px !important; /* desktop */
}

@media (max-width: 900px){
  body.is-risk .wrap{
    padding-bottom: 30px !important; /* mobile/tablet */
  }
}

/* Garantia extra no container dos blocos */
#blocks.is-risk{
  padding-bottom: 100px !important;
}

/* Último bloco visível também abre respiro */
#blocks.is-risk > .q:last-child,
#blocks.is-risk > *:last-child{
  margin-bottom: 180px !important;
}

@media (max-width: 900px){
  #blocks.is-risk{
    padding-bottom: 140px !important;
  }
  #blocks.is-risk > .q:last-child,
  #blocks.is-risk > *:last-child{
    margin-bottom: 200px !important;
  }
}
#riskSpacer{ height: 0; }
@media (max-width: 900px){
  body.is-risk #riskSpacer{ height: 180px; } /* ajuste fino aqui */
}
/* ===== Espaçamento entre TÍTULO DO BLOCO e o conteúdo abaixo ===== */

/* Aplica apenas ao título principal de cada bloco (não interfere nas perguntas) */
.panel.card.page > h2 {
  margin-bottom: 28px !important;   /* espaço entre o título e o conteúdo abaixo */
}

/* Ajustes finos por página específica */
#pg_identificacao.panel.card.page > h2,
#pg_historico.panel.card.page > h2,
#pg_agravantes.panel.card.page > h2,
.page[id^="pg_risco_"].panel.card.page > h2 {
  margin-bottom: 32px !important;   /* ligeiramente maior para blocos longos */
}

/* Mobile: ainda mais respiro para não “colar” com o primeiro elemento */
@media (max-width: 900px){
  .panel.card.page > h2 {
    margin-bottom: 36px !important;
  }
}
/* ===== Espaço extra no fim das páginas de risco (para não colar no footer) ===== */
#blocks.is-risk #riskSpacer{
  height: 10px;              /* desktop padrão */
}

@media (max-width: 640px){
  #blocks.is-risk #riskSpacer{
    height: 10px;            /* mais respiro no mobile */
  }
}
#blocks.is-risk{
  padding-bottom: 90px !important;
}
@media (max-width: 640px){
  #blocks.is-risk{
    padding-bottom: 30px !important;
  }
}
/* ===== DETECÇÃO — MOBILE LAYOUT ===== */
@media (max-width:640px){
  /* 1) Título centralizado */
  #detectWrap .detectHead h2{
    text-align:center;
    width:100%;
  }
  #detectWrap .detectHead{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
  }
  #detectWrap .perfilTag{
    margin: 2px 0 0 0;
  }

  /* 2) Boxes (cards) em coluna, um por linha, maiores */
  #detectWrap .detectGrid{
    display:flex;
    flex-direction:column;
    gap:14px; /* mais respiro */
  }
  #detectWrap .detectCard{
    width:100%;
    padding:16px;
    font-size:16px; /* maior */
  }
  #detectWrap .detectCard h3{
    font-size:17px;
    margin-bottom:8px;
    text-align:left;
  }

  /* 3) Ocultar data */
  #detectWrap #pillWhen{
    display:none !important;
  }

  /* 4) Nota “xx% das causas...” abaixo da classificação */
  /* Deixa o banner em coluna e a nota abaixo do score */
  #detectWrap .detectBanner{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  #detectWrap .detectBanner .bandLeft{
    order:1;
  }
  #detectWrap .detectBanner .bandRight{
    order:2;
    padding-top:0;
  }
  #detectWrap #detectBannerNote{
    margin-top:4px;
  }
}
@media (max-width:640px){
  /* Mais espaço antes do footer */
  #pg_hist{
    padding-bottom: 88px; /* não conflita com a barra fixa */
  }
  /* espaço entre “Precisou recorrer…” e o footer */
  #pg_hist #hist_hosp_wrap{
    margin-bottom: 18px;
  }
}
/* Oculta a 2ª coluna (Questões Respondidas) só no mobile */
@media (max-width: 640px){
  /* tabela nova */
  #newSummaryTable th:nth-child(2),
  #newSummaryTable td:nth-child(2){
    display: none;
  }
  /* compat: se ainda existir a antiga */
  #summaryTable th:nth-child(2),
  #summaryTable td:nth-child(2){
    display: none;
  }
}
/* SCORE GERAL — centralizado e sem a frase de percentual */
#scoreSummary .detectBanner{
  display:flex;
  justify-content:center;   /* centraliza o conjunto */
  align-items:center;
  gap:12px;
}
#scoreSummary .detectBanner .bandRight,
#scoreSummary #detectBannerNote{
  display:none !important;  /* some com o texto de percentual */
}
#scoreSummary .bandLeft{
  display:flex;
  align-items:center;
  gap:10px;
}
#scoreSummary .bandScore{
  display:flex;
  align-items:center;
  gap:8px;
}
#scoreSummary #detectScoreVal{
  font-weight:800;
  font-size:1.05rem;
}
#scoreSummary #detectScoreBadge{
  padding:4px 10px;
  border-radius:999px;
}
/* CARD/ESPAÇAMENTO DE CADA PERGUNTA (usa .q que já existe) */
.q{
  position: relative;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:16px 18px;
  margin:60px 0;                 /* espaço entre perguntas */
  box-shadow:0 2px 6px rgba(15,23,42,.05);
}

/* cartão base da pergunta (mantém o seu estilo) */
.q{
  position: relative;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:16px 18px;
  margin:40px 0;
  box-shadow:0 2px 6px rgba(15,23,42,.05);
}


/* Linha discreta no topo de cada pergunta para reforçar separação */
section[id^="bloco_"] .q::before{
  content:"";
  position:absolute;
  left:16px; right:16px; top:-30px;
  height:1px;
  background:linear-gradient(90deg, transparent, #e5e7eb, transparent);
  opacity:.9;
}

/* SEPARADOR visual entre o título e o corpo da pergunta */
.q > h4 + *{
  border-top:1px dashed #e5e7eb;
  margin-top:8px;
  padding-top:12px;
}