/* FORJADOS: estilos de referência das prévias.
   Cor, espaço, canto e medida vêm só de variáveis de tokens.json.
   A tipografia vem das classes de estilo geradas (titulo-4, corpo, rotulo...). */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--font-texto); font-size: 16px; line-height: 24px; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
img, svg { display: block; flex-shrink: 0; }
a { color: inherit; }
:focus-visible { outline: var(--foco-espessura) solid var(--foco); outline-offset: var(--foco-afastamento); }
.rotulo { text-transform: uppercase; }
.fj-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Palco das prévias: rótulos em caixa alta como na folha B2 */
.fj-palco { padding: var(--espaco-6); display: flex; flex-direction: column; gap: var(--espaco-6); }
.fj-grupo { display: flex; flex-direction: column; gap: var(--espaco-3); }
.fj-grupo > .rotulo { color: var(--texto-suave); }
.fj-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-2); }
.fj-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: var(--espaco-4); align-items: stretch; }
.fj-grade--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.fj-grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 680px) { .fj-grade--2-1, .fj-grade--2 { grid-template-columns: minmax(0, 1fr); } }

/* Cor de texto */
.fj-secundario { color: var(--texto-secundario); }
.fj-suave { color: var(--texto-suave); }
.fj-brasa { color: var(--brasa-texto); }
.fj-erro { color: var(--erro); }

/* Ícones (Lucide, traço 2px, cor do texto) */
.fj-icone { width: var(--icone); height: var(--icone); }
.fj-icone--grande { width: var(--icone-grande); height: var(--icone-grande); }

/* Link de texto */
.fj-link { color: var(--brasa-texto); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.fj-link:hover { color: var(--brasa-texto-hover); text-decoration-thickness: 2px; }

/* Botões */
.fj-botao { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--espaco-2); min-height: var(--alvo-minimo); padding: 0 var(--espaco-5); border: var(--linha) solid transparent; border-radius: var(--canto-2); background: transparent; color: var(--texto); cursor: pointer; text-decoration: none; white-space: nowrap; }
.fj-botao--primario { background: var(--acao); color: var(--acao-texto); }
.fj-botao--primario:hover { background: var(--acao-hover); }
.fj-botao--destaque { background: var(--brasa-acao); color: var(--brasa-acao-texto); }
.fj-botao--destaque:hover { background: var(--brasa-acao-hover); }
.fj-botao--secundario { border-color: var(--borda-controle); }
.fj-botao--secundario:hover { border-color: var(--texto); }
.fj-botao--sutil { padding: 0 var(--espaco-3); }
.fj-botao--sutil:hover { background: var(--superficie-alta); }
.fj-botao--sutil[aria-pressed="true"] .fj-icone--preenche { fill: currentColor; }
.fj-botao--pequeno { min-height: var(--alvo-compacto); padding: 0 var(--espaco-3); gap: 6px; }
.fj-botao--icone { width: var(--alvo-minimo); padding: 0; }
.fj-botao--icone.fj-botao--pequeno { width: var(--alvo-compacto); }
.fj-botao[aria-disabled="true"] { cursor: not-allowed; background: transparent; border-color: var(--borda); color: var(--texto-suave); }

/* Selos */
.fj-selo { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 var(--espaco-2); border: var(--linha) solid var(--borda-controle); border-radius: var(--canto-1); color: var(--texto); white-space: nowrap; }
.fj-selo .fj-icone { width: 16px; height: 16px; }
.fj-selo--cheio { background: var(--texto); border-color: var(--texto); color: var(--superficie); }
a.fj-selo { text-decoration: none; }
a.fj-selo:hover { border-color: var(--texto); }
.fj-ponto { width: 8px; height: 8px; border-radius: var(--canto-total); background: var(--brasa); }

/* Cartão */
.fj-cartao { position: relative; display: flex; flex-direction: column; gap: var(--espaco-3); padding: var(--espaco-5) var(--espaco-6); background: var(--superficie); border-radius: var(--canto-2); color: var(--texto); }
.fj-cartao__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espaco-2); }
.fj-cartao__link { text-decoration: none; }
.fj-cartao__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--canto-2); }
.fj-cartao__link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.fj-cartao__link:focus-visible { outline: none; }
.fj-cartao__link:focus-visible::after { outline: var(--foco-espessura) solid var(--foco); outline-offset: var(--foco-afastamento); }
.fj-cartao .fj-botao, .fj-cartao .fj-link { z-index: 1; }
.fj-cartao__rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espaco-2); margin-top: auto; padding-top: var(--espaco-1); }

/* Bloco de destaque: fundo destaque; o conteúdo vai num elemento data-theme="escuro" */
.fj-destaque { background: var(--destaque); border-radius: var(--canto-2); }
.fj-destaque__conteudo { display: flex; flex-direction: column; gap: var(--espaco-4); padding: var(--espaco-6); color: var(--texto); }

/* Metadados */
.fj-meta { display: flex; flex-wrap: wrap; gap: var(--espaco-1) var(--espaco-4); color: var(--texto-suave); }
.fj-meta__item { display: inline-flex; align-items: flex-start; gap: 6px; }
.fj-meta__item .fj-icone { width: 16px; height: 16px; margin-top: 2px; }

/* Progresso */
.fj-barra { height: var(--barra); background: var(--trilha); border-radius: var(--canto-0); overflow: hidden; }
.fj-barra__cheio { height: 100%; background: var(--brasa); }
.fj-etapas { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--espaco-1); }
.fj-etapas__item { height: var(--barra); background: var(--trilha); }
.fj-etapas__item--feita { background: var(--brasa); }
.fj-placar { display: flex; align-items: baseline; gap: var(--espaco-2); }
.fj-placar__de { color: var(--texto-suave); }

/* Encontro */
.fj-cartao--encontro { container-type: inline-size; }
.fj-encontro { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--espaco-2) var(--espaco-4); align-items: start; }
.fj-encontro__acoes { grid-column: 2; margin-top: var(--espaco-2); }
.fj-data { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 72px; height: 84px; border: var(--linha) solid var(--borda-controle); border-radius: var(--canto-2); background: var(--superficie-alta); }
.fj-data .rotulo { color: var(--texto-suave); }
.fj-encontro__corpo { display: flex; flex-direction: column; gap: var(--espaco-2); min-width: 0; }
@container (max-width: 400px) {
  .fj-encontro { grid-template-columns: minmax(0, 1fr); }
  .fj-data { flex-direction: row; width: auto; height: auto; min-height: 32px; padding: 0 var(--espaco-3); gap: var(--espaco-2); justify-self: start; }
  .fj-data .titulo-2 { font-size: 18px; line-height: 24px; }
  .fj-encontro__acoes { grid-column: 1; }
}

/* Prática semanal */
.fj-praticas { display: flex; flex-direction: column; container-type: inline-size; }
.fj-pratica { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--espaco-3) var(--espaco-6); padding: var(--espaco-4) 0; border-top: var(--linha) solid var(--borda); }
.fj-pratica:first-child { border-top: 0; padding-top: 0; }
.fj-pratica:last-child { padding-bottom: 0; }
@container (max-width: 560px) { .fj-pratica { grid-template-columns: minmax(0, 1fr); } }
.fj-pratica__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fj-semana { display: flex; gap: 6px; }
.fj-dia { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fj-dia .rotulo { color: var(--texto-suave); letter-spacing: 0.04em; }
.fj-dia__marca { display: grid; place-items: center; width: 32px; height: 32px; border: var(--linha) solid var(--borda-controle); border-radius: var(--canto-1); color: var(--superficie); }
.fj-dia__marca .fj-icone { width: 18px; height: 18px; stroke-width: 2.5; }
.fj-dia--feito .fj-dia__marca { background: var(--texto); border-color: var(--texto); }
.fj-dia--futuro .fj-dia__marca { border-style: dashed; }
.fj-dia--hoje .fj-dia__marca { outline: var(--foco-espessura) solid var(--brasa); outline-offset: 2px; }
.fj-dia--hoje .rotulo { color: var(--texto); }
@container (max-width: 270px) { .fj-semana { gap: 4px; } .fj-dia__marca { width: 28px; height: 28px; } }

/* Área de desenvolvimento */
.fj-area__icone { display: grid; place-items: center; width: var(--alvo-minimo); height: var(--alvo-minimo); border-radius: var(--canto-2); background: var(--fundo); color: var(--texto); }
.fj-area__etapa strong { font-weight: 600; }
.fj-area__etapa { display: flex; flex-direction: column; gap: var(--espaco-2); }

/* Publicação */
.fj-post__cabeca { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: var(--espaco-3); }
.fj-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--canto-total); background: var(--superficie-alta); border: var(--linha) solid var(--borda); color: var(--texto); text-decoration: none; }
a.fj-avatar { width: var(--alvo-minimo); height: var(--alvo-minimo); }
.fj-post__acoes { display: flex; flex-wrap: wrap; gap: var(--espaco-2); margin: 0 calc(var(--espaco-3) * -1); }
.fj-post__acoes .fj-botao { color: var(--texto-secundario); }
.fj-post__acoes .fj-botao[aria-pressed="true"] { color: var(--texto); }
.fj-post__texto { max-width: var(--medida-leitura); }

/* Navegação: barra superior (desktop) */
.fj-topo { display: flex; align-items: center; gap: var(--espaco-8); min-height: 64px; padding: 0 var(--espaco-6); background: var(--superficie); border-bottom: var(--linha) solid var(--borda); }
.fj-topo__logo { display: inline-flex; align-items: center; min-height: var(--alvo-minimo); }
.fj-topo__logo img { height: 28px; width: auto; }
.fj-topo__fim { display: flex; align-items: center; gap: var(--espaco-2); margin-left: auto; }
.fj-nav { display: flex; gap: var(--espaco-1); }
@media (max-width: 760px) { .fj-topo nav { display: none; } .fj-topo { gap: var(--espaco-4); padding: 0 var(--espaco-4); } }
@media (max-width: 360px) { .fj-topo { gap: var(--espaco-3); padding: 0 var(--espaco-3); } .fj-topo__fim { gap: 0; } }
.fj-nav__item { position: relative; display: inline-flex; align-items: center; min-height: var(--alvo-minimo); padding: 0 var(--espaco-3); color: var(--texto-secundario); text-decoration: none; }
.fj-nav__item:hover { color: var(--texto); }
.fj-nav__item[aria-current="page"] { color: var(--texto); font-weight: 600; }
.fj-nav__item[aria-current="page"]::after { content: ""; position: absolute; left: var(--espaco-3); right: var(--espaco-3); bottom: 0; height: var(--foco-espessura); background: var(--brasa); }

/* Navegação: barra inferior (celular) */
.fj-abas { display: flex; background: var(--superficie); border-top: var(--linha) solid var(--borda); }
.fj-abas__item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex: 1 1 auto; min-width: var(--alvo-minimo); min-height: 64px; padding: 0 var(--espaco-1); color: var(--texto-suave); text-decoration: none; }
.fj-abas__item[aria-current="page"] { color: var(--texto); }
.fj-abas__item[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: var(--foco-espessura); background: var(--brasa); }

/* Logo por tema: a versão clara some no tema escuro e vice-versa */
.fj-logo--escuro { display: none; }
[data-theme="escuro"] .fj-logo--claro { display: none; }
[data-theme="escuro"] .fj-logo--escuro { display: block; }

/* Movimento: só transições curtas de cor, desligadas quando a pessoa pede */
.fj-botao, .fj-nav__item, .fj-link { transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }