/* ===========================
   Vocacional – Estilo unificado
   =========================== */

/* ---- Paleta (global) ---- */
:root{
  --bg:#0b1220;        /* fundo */
  --panel:#0f172a;     /* caixas */
  --text:#e8eefc;      /* texto principal */
  --muted:#9fb3c8;     /* texto secundário */
  --line:#1f2a44;      /* bordas */
  --accent:#4f46e5;    /* ação */
}

/* ---- Base ---- */
body{ background:var(--bg); color:var(--text); }

/* ---- Escopo guia/avaliação (inputs e boxes) ---- */
.guia-avaliacao h1,.guia-avaliacao h2,.guia-avaliacao legend{color:var(--text); margin:8px 0 12px;}
.guia-avaliacao .muted, .guia-avaliacao small{color:var(--muted);}
.guia-avaliacao label{color:var(--text);}
.guia-avaliacao .box{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px; margin:12px 0;}

.guia-avaliacao input[type="text"],
.guia-avaliacao textarea{
  width:100%; color:var(--text); background:#0b1324;
  border:1px solid var(--line); border-radius:10px; padding:10px 12px;
}
.guia-avaliacao textarea{min-height:96px; resize:vertical;}
.guia-avaliacao input[type="text"]:focus,
.guia-avaliacao textarea:focus{
  outline:0; border-color:var(--accent); box-shadow:0 0 0 3px rgba(79,70,229,.25);
}
.guia-avaliacao input[type="radio"],
.guia-avaliacao input[type="checkbox"]{ accent-color: var(--accent); }
.guia-avaliacao .radios{display:flex; gap:12px; align-items:center; margin:6px 0; color:var(--text);}

.guia-avaliacao .btn, .guia-avaliacao button{
  background:var(--accent); color:#fff; border:0; border-radius:12px;
  padding:10px 16px; cursor:pointer;
}
.guia-avaliacao button[disabled]{opacity:.6; cursor:not-allowed;}

/* ---- Hero compacto ---- */
.page-hero{ max-width:980px; margin:.25rem auto .6rem; padding:.25rem 0; }
.page-hero .title{ margin:.35rem 0 .55rem; font-size:clamp(1.25rem,2vw,1.6rem); line-height:1.2; }
.hero-bottom{ display:grid; grid-template-columns:1fr auto; align-items:center; }
.hero-nav{ justify-self:center; display:flex; gap:.5rem; }
.hero-greet{ justify-self:end; opacity:.9; font-size:.95rem; }

/* ---- Espaços menores no corpo ---- */
.vocacional .wrap{ margin-top:.5rem; }
.card-info.card-info--pastel{ padding:12px 14px; border-radius:12px; }
.progress{ margin:.6rem 0 .4rem 0; }
.progress-meta{ margin-top:.25rem; }

/* ---- Toolbar compacta ---- */
.quiz-toolbar{ margin:.8rem 0 0; }
.counter{ margin-bottom:.25rem; }

/* ---- Likert pílulas ---- */
.likert{ gap:.45rem; }
.likert .pill{ padding:7px 11px; }

/* ---- Resultados (barras) ---- */
.barras{ margin:1rem 0; display:grid; gap:.6rem; }
.linha .rotulo{ display:flex; justify-content:space-between; margin-bottom:.25rem; }
.linha .nota{ opacity:.85; font-weight:600; }
.linha .barra{ height:10px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden; }
.linha .fill{ height:100%; background:linear-gradient(90deg,#22c55e,#16a34a); transition:width .35s ease; }
.linha .meta{ font-size:.85rem; opacity:.75; margin-top:.15rem; }

/* ---- Header corporativo ---- */
.voc-app-header{
  position:sticky; top:0; z-index:40;
  background:rgba(10,12,22,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:.5rem 0 .6rem;
}
.vah-row{
  max-width:980px; margin:0 auto; padding:0 12px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
}
.vah-left{ justify-self:start; }
.vah-center{ justify-self:center; }
.vah-right{ justify-self:end; opacity:.9; font-size:.95rem; }

.voc-app-header .title{ margin:0; font-size:clamp(1.2rem,2.2vw,1.6rem); line-height:1.2; }
.brand{ height:120px; width:auto; opacity:.95; }  /* (única definição de .brand) */

.vah-actions{
  max-width:980px; margin:.35rem auto 0; padding:0 12px;
  display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap;
}

/* ---- Footer corporativo ---- */
.voc-footer{
  border-top:1px solid rgba(255,255,255,.06);
  margin-top:1.25rem; padding:.75rem 0;
  background:rgba(10,12,22,.85);
}
.vf-row{
  max-width:980px; margin:0 auto; padding:0 12px;
  display:flex; gap:.5rem; justify-content:space-between; align-items:center; flex-wrap:wrap;
}
.vf-right{ display:flex; gap:.5rem; align-items:center; }
.voc-footer a{ text-decoration:none; opacity:.9; }
.voc-footer a:hover{ text-decoration:underline; }

/* ---- Ações finais (linha de botões) ---- */
/* Mantém compatível com .quiz-buttons já usado no template; .actions-row é alias */
.quiz-buttons, .actions-row{
  display:flex; justify-content:center; align-items:center;
  gap:.5rem; flex-wrap:wrap; margin-top:1rem;
}
.quiz-buttons a, .quiz-buttons button,
.actions-row .btn{
  padding:.45rem .9rem; font-size:.95rem; line-height:1.1;
  border-radius:.75rem; white-space:nowrap;
}
.actions-row .btn.ok{ font-weight:600; }

/* Compactor leve nos cards/barras do resultado (tela) */
.resultados .card-quiz{ padding:.6rem .75rem; }
.resultados .bar{ height:8px; }

/* ---- Print: cabeçalho/rodapé específicos ---- */
.print-header{ margin-bottom:8mm; }
.print-header .ph-row{ display:grid; grid-template-columns:1fr 2fr 1fr; align-items:center; }
.ph-brand{ height:20mm; width:auto; }
.ph-center h1{ margin:0 0 2mm; font-size:16pt; }
.ph-meta{ font-size:10pt; opacity:.9; }
.ph-link{ font-size:9pt; opacity:.75; word-break:break-all; }

.print-footer{ margin-top:8mm; padding-top:3mm; border-top:1px solid #ddd; font-size:9pt; opacity:.85; }

/* ---- Helpers screen/print ---- */
@media screen { .print-only{ display:none !important; } }
@media print  { .screen-only{ display:none !important; } }

/* ---- Ajustes de impressão bonitos ---- */
@page { size:A4; margin:12mm; }
@media print {
  :root { color-scheme:light; }
  body { -webkit-print-color-adjust:exact; print-color-adjust:exact; }

  /* oculta navegação e UX */
  .voc-app-header, .voc-footer, .vah-actions, .note-ok,
  .toast-host, .quiz-toolbar, .btn, .btn-principal, .btn-secundario { display:none !important; }

  /* tira caixas/decor e economiza espaço */
  .wrap{ box-shadow:none !important; background:transparent !important; padding:0 !important; }
  .card-info, .card-quiz{ border:none !important; background:transparent !important; padding:0 !important; }

  /* evita quebras dentro dos blocos de resultado */
  .card-quiz, .linha, .barra{ break-inside:avoid; page-break-inside:avoid; }

  /* barras sólidas */
  .bar{ background:#e5e7eb !important; }
  .bar .fill, .fill{ background:#3b82f6 !important; }

  /* mostra apenas o Top 3 no PDF */
  .resultados .card-quiz:nth-child(n+4){ display:none !important; }

}

/* botões menores no header */
.voc-app-header .btn,
.voc-app-header .ghost,
.vah-actions .btn{
  padding: .30rem .60rem;   /* ↓ um pouco */
  font-size: .85rem;        /* ↓ um pouco */
  line-height: 1.1;
  border-radius: .60rem;
}


/* Limita a listagem ao Top-3 na tela (toggle via classe) */
.resultados.limit-top3 .card-quiz:nth-child(n+4){
  display:none !important;
}

/* --- container consistente (aplica no header, corpo e rodapé) --- */
.container{max-width:980px;margin:0 auto;padding:0 12px}

/* --- destaque do questionário (primeiro plano) --- */
.quiz-shell{
  margin:.75rem 0 1rem;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.quiz-body{padding:16px 16px 12px}
@media (min-width:900px){ .quiz-body{padding:18px 20px} }

/* --- instruções menores e mais leves --- */
.instructions{font-size:.95rem;line-height:1.55;opacity:.95}
.card-info.card-info--pastel{padding:12px 14px;border-radius:12px}

/* --- separador sutil do rodapé (linha fina) --- */
.voc-footer{border-top:1px solid rgba(255,255,255,.12);margin-top:1.2rem;padding-top:.8rem}

/* Layout geral do Vocacional */
.vocacional-wrap {
  max-width: 960px;
  margin: 0 auto 3rem;
  padding: 1.5rem 1.25rem 3rem;
}

.vocacional-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.25rem;
  align-items: center;
  margin-bottom: 1.5rem;
}

.vocacional-logo {
  width: 88px;
  height: auto;
  border-radius: 0.5rem;
}

.vocacional-title {
  margin: 0;
  font-size: 1.5rem;
}

.vocacional-subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  opacity: 0.85;
}

.vocacional-header-right {
  text-align: right;
}

.vocacional-user {
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.vocacional-nav {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.vocacional-main-card {
  background: rgba(15, 23, 42, 0.9);
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.4);
  padding: 1.5rem 1.4rem 1.4rem;
}


/* Instruções menores */
.instructions {
  font-size: 0.9rem;
  line-height: 1.45;
  max-width: 720px;
  margin: 0 auto 1.1rem;
  color: #cbd5f5;
}

.instructions li + li {
  margin-top: 0.15rem;
}

/* Quiz */
.quiz-shell {
  margin-top: 0.5rem;
}

.quiz-body {
  background: rgba(15, 23, 42, 0.95);
  border-radius: 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.5);
  padding: 1.1rem 1.1rem 0.9rem;
}

.vocacional-main-card #quiz-container {
  margin-bottom: 0.75rem;
  font-size: 0.98rem;
  line-height: 1.5;
  color: #e5e7eb;   /* garante que o texto da pergunta apareça */
}

.vocacional-main-card .progress {
  margin: 0.9rem 0 0.45rem;
  height: 0.45rem;
  background: #020617;
  border-radius: 999px;
  overflow: hidden;
}

.vocacional-main-card .progress .bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #22c55e, #3b82f6);
}

#progress-text {
  font-size: 0.85rem;
  opacity: 0.8;
}

/* Likert pills */
.likert {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  cursor: pointer;
  font-size: 0.85rem;
}

.pill input[type="radio"] {
  display: none;
}

.pill-num {
  font-weight: 600;
}

.pill-text {
  opacity: 0.9;
}

.pill.active {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(59, 130, 246, 0.95);
}

/* Aviso */
.warn-msg {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: #f97373;
}

/* Toolbar */
.quiz-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}

.quiz-toolbar-left {
  font-size: 0.88rem;
  opacity: 0.85;
}

.quiz-toolbar-right {
  display: flex;
  gap: 0.5rem;
}