/* =====================================================================
   resultado.css — a CARA do resultado do Vocacional (21/08/2026)

   Ronald: "o resultado do teste deve ser o mesmo se eu for pelo Card
   Vocacional ou pelo questionário church/corp."

   O `kai-resultado-270.js` é o renderizador ÚNICO do resultado, mas ele
   nasceu dentro do Posicionador e usava as classes utilitárias que aquela
   página tinha (Tailwind pelo CDN + os `lp-*` do <style> de lá). Fora dali,
   o mesmo HTML saía sem estilo nenhum — ou seja: o renderizador era único,
   e o resultado não era.

   Este arquivo é o que torna o renderizador PORTÁTIL: define, por conta
   própria, todas as classes que ele emite. Quem quiser mostrar o resultado
   carrega o JS e este CSS, e vê exatamente a mesma coisa.

   ⚠️ Tudo escopado em `.berg-resultado` — a classe que o próprio módulo
   põe no elemento onde desenha. Dois motivos:
     • não vazar utilitário genérico (`.p-4`, `.flex`) para a página que
       hospeda, que tem CSS próprio e não pediu nada disso;
     • ganhar do Tailwind no Posicionador por especificidade (0,2,0 contra
       0,1,0), de modo que os dois lugares fiquem iguais mesmo onde o CDN
       ainda está carregado.

   ⚠️ Mexeu aqui, conferiu NOS DOIS: /vocacional/ e /vocacional/posicionador/.
   ===================================================================== */

.berg-resultado {
  --lp-orange: #E8490F;
  --lp-dark: #1E2D40;
  --lp-light: #FDF0EB;
  --g50: #F9FAFB;  --g200: #E5E7EB; --g400: #9CA3AF;
  --g500: #6B7280; --g600: #4B5563; --g700: #374151;
  color: var(--lp-dark);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  text-align: left;
}

/* ---- layout ---- */
.berg-resultado .flex        { display: flex; }
.berg-resultado .grid        { display: grid; }
.berg-resultado .flex-wrap   { flex-wrap: wrap; }
.berg-resultado .flex-1      { flex: 1 1 0%; }
.berg-resultado .shrink-0    { flex-shrink: 0; }
.berg-resultado .items-center  { align-items: center; }
.berg-resultado .items-start   { align-items: flex-start; }
.berg-resultado .justify-between { justify-content: space-between; }
.berg-resultado .gap-1\.5    { gap: .375rem; }
.berg-resultado .gap-2       { gap: .5rem; }
.berg-resultado .gap-3       { gap: .75rem; }
.berg-resultado .overflow-hidden { overflow: hidden; }

/* ---- espaçamento ---- */
.berg-resultado .p-2\.5 { padding: .625rem; }
.berg-resultado .p-4    { padding: 1rem; }
.berg-resultado .px-2   { padding-left: .5rem;  padding-right: .5rem; }
.berg-resultado .px-3   { padding-left: .75rem; padding-right: .75rem; }
.berg-resultado .py-0\.5{ padding-top: .125rem; padding-bottom: .125rem; }
.berg-resultado .py-1   { padding-top: .25rem;  padding-bottom: .25rem; }
.berg-resultado .py-1\.5{ padding-top: .375rem; padding-bottom: .375rem; }
.berg-resultado .py-2   { padding-top: .5rem;   padding-bottom: .5rem; }
.berg-resultado .mb-1 { margin-bottom: .25rem; }
.berg-resultado .mb-2 { margin-bottom: .5rem; }
.berg-resultado .mb-3 { margin-bottom: .75rem; }
.berg-resultado .mb-4 { margin-bottom: 1rem; }
.berg-resultado .mb-8 { margin-bottom: 2rem; }
.berg-resultado .mt-0\.5 { margin-top: .125rem; }
.berg-resultado .mt-1 { margin-top: .25rem; }
.berg-resultado .mt-2 { margin-top: .5rem; }
.berg-resultado .mt-8 { margin-top: 2rem; }

/* ---- tamanhos ---- */
.berg-resultado .h-2     { height: .5rem; }
.berg-resultado .h-full  { height: 100%; }
.berg-resultado .w-8     { width: 2rem; }
.berg-resultado .w-40    { width: 10rem; }

/* ---- tipografia ---- */
.berg-resultado .text-\[11px\] { font-size: 11px; line-height: 1.4; }
.berg-resultado .text-xs { font-size: .75rem;  line-height: 1rem; }
.berg-resultado .text-sm { font-size: .875rem; line-height: 1.35rem; }
.berg-resultado .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.berg-resultado .font-medium   { font-weight: 500; }
.berg-resultado .font-semibold { font-weight: 600; }
.berg-resultado .font-bold     { font-weight: 700; }
.berg-resultado .font-display  { font-family: 'Fraunces', Georgia, serif; letter-spacing: -.02em; }
.berg-resultado .italic    { font-style: italic; }
.berg-resultado .underline { text-decoration: underline; }
.berg-resultado .uppercase   { text-transform: uppercase; }
.berg-resultado .normal-case { text-transform: none; }
.berg-resultado .tracking-wide   { letter-spacing: .025em; }
.berg-resultado .tracking-normal { letter-spacing: 0; }
.berg-resultado .text-right { text-align: right; }

/* ---- cores ---- */
.berg-resultado .text-lp-dark    { color: var(--lp-dark); }
.berg-resultado .text-lp-orange  { color: var(--lp-orange); }
.berg-resultado .text-gray-400   { color: var(--g400); }
.berg-resultado .text-gray-500   { color: var(--g500); }
.berg-resultado .text-gray-600   { color: var(--g600); }
.berg-resultado .text-gray-700   { color: var(--g700); }
.berg-resultado .text-amber-700  { color: #B45309; }
.berg-resultado .text-emerald-700{ color: #047857; }
.berg-resultado .text-blue-700   { color: #1D4ED8; }
.berg-resultado .text-red-600    { color: #DC2626; }
.berg-resultado .bg-gray-50   { background-color: var(--g50); }
.berg-resultado .bg-gray-200  { background-color: var(--g200); }
.berg-resultado .bg-lp-light  { background-color: var(--lp-light); }
.berg-resultado .bg-white     { background-color: #fff; }
.berg-resultado .bg-lp-orange { background-color: var(--lp-orange); color: #fff; }
/* as tarjas de afinidade do curso (Excelente / Bom / Esticada) */
.berg-resultado .bg-emerald-100 { background-color: #D1FAE5; }
.berg-resultado .bg-blue-100    { background-color: #DBEAFE; }
.berg-resultado .bg-gray-100    { background-color: #F3F4F6; }
.berg-resultado .text-emerald-800 { color: #065F46; }
.berg-resultado .text-blue-800    { color: #1E40AF; }
.berg-resultado .block { display: block; }

/* ---- bordas ---- */
.berg-resultado .border   { border: 1px solid var(--g200); }
.berg-resultado .border-2 { border: 2px solid var(--g200); }
.berg-resultado .border-t { border-top: 1px solid var(--g200); }
.berg-resultado .border-b { border-bottom: 1px solid var(--g200); }
.berg-resultado .border-dashed    { border-style: dashed; }
.berg-resultado .border-gray-200  { border-color: var(--g200); }
.berg-resultado .border-gray-300  { border-color: #D1D5DB; }
.berg-resultado .border-lp-orange { border-color: var(--lp-orange); }
.berg-resultado .rounded       { border-radius: .25rem; }
.berg-resultado .rounded-xl    { border-radius: .75rem; }
.berg-resultado .rounded-2xl   { border-radius: 1rem; }
.berg-resultado .rounded-full  { border-radius: 9999px; }

/* ---- controles ---- */
.berg-resultado .cursor-pointer { cursor: pointer; }
.berg-resultado .opacity-70     { opacity: .7; }
/* O Posicionador tinha o reset do Tailwind zerando borda e fundo de botão;
   fora dali o navegador desenha a caixinha cinza dele e o "Onde estudar perto
   de mim →", que é um link, virava um botão de formulário. Zerado aqui: as
   classes utilitárias acima é que devolvem borda e fundo a quem precisa. */
.berg-resultado button {
  font: inherit; color: inherit; cursor: pointer;
  background: transparent; border: 0; padding: 0; text-align: inherit;
}
.berg-resultado select {
  font: inherit; color: inherit; background: #fff;
  border: 1px solid var(--g200); border-radius: .375rem; padding: .25rem .5rem;
}
.berg-resultado .btn-orange {
  background: var(--lp-orange); color: #fff; font-weight: 700;
  border: 0; border-radius: 9999px; padding: .5rem 1.1rem; cursor: pointer;
}
.berg-resultado .btn-orange:hover { background: #D4400A; }
.berg-resultado details > summary { cursor: pointer; }