/* Banco de Atividades e Ferramentas Educacionais — Juventude Privada
   Tudo escopado em #jp-banco para não vazar para o Webflow nem sofrer com o CSS dele.
   Paleta e tipografia lidas do site: Rubik, #273975, #F09900, #25BCCA. */

#jp-banco {
  --jp-navy:      #273975;
  --jp-navy-esc:  #1b2851;
  --jp-navy-luz:  #eef1f9;
  --jp-ambar:     #f09900;
  --jp-ambar-luz: #fff5e3;
  --jp-ciano:     #25bcca;
  --jp-ciano-luz: #e6f8fa;
  --jp-texto:     #333333;
  --jp-suave:     #5b6371;   /* 4,83 -> 6,0 de contraste no branco */
  --jp-linha:     #e3e6ef;
  --jp-fundo:     #ffffff;
  --jp-cinza:     #f7f8fb;
  --jp-r:         10px;
  --jp-sombra:    0 1px 2px rgba(39,57,117,.06), 0 8px 24px rgba(39,57,117,.07);

  font-family: Rubik, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--jp-texto);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;

  /* O componente traz o próprio respiro vertical. Assim ele pode ser solto
     direto no Body do Webflow, sem Section nem Container por fora, e não
     encosta no menu nem no rodapé. Não acrescentar padding no Webflow: dobra. */
  display: block;
  padding: 56px 0 80px;
}

@media (max-width: 700px) {
  #jp-banco { padding: 32px 0 56px; }
}

/* reset local, defensivo contra o CSS do Webflow */
#jp-banco *, #jp-banco *::before, #jp-banco *::after { box-sizing: border-box; }
#jp-banco h1, #jp-banco h2, #jp-banco h3, #jp-banco h4, #jp-banco p,
#jp-banco ul, #jp-banco ol, #jp-banco li, #jp-banco figure, #jp-banco dl,
#jp-banco dd { margin: 0; padding: 0; }
#jp-banco ul, #jp-banco ol { list-style: none; }
#jp-banco button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
#jp-banco a { color: var(--jp-navy); text-decoration: underline; text-underline-offset: 2px; }
#jp-banco img { max-width: 100%; height: auto; display: block; }

#jp-banco .jp-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
#jp-banco .jp-oculto { display: none !important; }
#jp-banco .jp-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ============================== tipografia ============================== */
#jp-banco h1, #jp-banco h2, #jp-banco h3, #jp-banco h4 {
  color: var(--jp-navy); font-weight: 500; line-height: 1.25;
}
#jp-banco h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); }
#jp-banco h2 { font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.8rem); }
#jp-banco h3 { font-size: 1.15rem; }
#jp-banco .jp-super {
  text-transform: uppercase; letter-spacing: .12em;
  font-size: .72rem; font-weight: 500; color: var(--jp-ambar);
}
#jp-banco .jp-lede { font-size: 1.06rem; color: var(--jp-suave); max-width: 62ch; }

/* ============================== hero =================================== */
#jp-banco .jp-hero { padding: 8px 0 4px; max-width: 46rem; }
#jp-banco .jp-hero h1 { margin: 8px 0 14px; letter-spacing: -.01em; }
#jp-banco .jp-hero-sub { font-size: clamp(1.05rem, .98rem + .5vw, 1.28rem); color: var(--jp-texto); line-height: 1.5; }
#jp-banco .jp-hero-frase {
  margin-top: 20px; padding-left: 16px; border-left: 3px solid var(--jp-ambar);
  font-size: 1.05rem; color: var(--jp-navy);
}

#jp-banco .jp-secao { margin: 48px 0 8px; }
#jp-banco .jp-secao > h2 { margin-bottom: 6px; }
#jp-banco .jp-secao > .jp-lede { margin-bottom: 20px; }

/* ============================== portas ================================= */
#jp-banco .jp-portas {
  display: grid; gap: 16px; margin: 36px 0 8px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
#jp-banco .jp-porta {
  text-align: left; border: 1px solid var(--jp-linha); border-radius: var(--jp-r);
  background: var(--jp-fundo); padding: 24px 22px; display: flex; flex-direction: column; gap: 6px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
#jp-banco .jp-porta:hover { border-color: var(--jp-navy); box-shadow: var(--jp-sombra); transform: translateY(-2px); }
#jp-banco .jp-porta[aria-pressed="true"] { border-color: var(--jp-navy); background: var(--jp-navy-luz); box-shadow: var(--jp-sombra); }
#jp-banco .jp-porta-ic { font-size: 1.6rem; line-height: 1; margin-bottom: 8px; }
#jp-banco .jp-porta-t { font-size: 1.14rem; font-weight: 500; color: var(--jp-navy); line-height: 1.3; }
#jp-banco .jp-porta-d { font-size: .9rem; color: var(--jp-suave); flex: 1; }
#jp-banco .jp-porta-n {
  font-size: .72rem; color: var(--jp-ambar); font-weight: 500; margin-top: 10px;
  text-transform: uppercase; letter-spacing: .07em;
}

/* ============================== coleções =============================== */
#jp-banco .jp-cols {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
}
#jp-banco .jp-col {
  text-align: left; border: 1px solid var(--jp-linha); border-radius: var(--jp-r);
  padding: 18px; display: flex; flex-direction: column; gap: 5px; background: var(--jp-fundo);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
#jp-banco .jp-col:hover { border-color: var(--jp-navy); box-shadow: var(--jp-sombra); transform: translateY(-2px); }
#jp-banco .jp-col[aria-pressed="true"] { border-color: var(--jp-ambar); background: var(--jp-ambar-luz); }
#jp-banco .jp-col-ic { font-size: 1.35rem; line-height: 1; margin-bottom: 4px; }
#jp-banco .jp-col-t { font-weight: 500; color: var(--jp-navy); font-size: 1.02rem; }
#jp-banco .jp-col-r { font-size: .86rem; color: var(--jp-suave); flex: 1; }
#jp-banco .jp-col-n {
  font-size: .72rem; font-weight: 500; color: var(--jp-ambar); margin-top: 8px;
  text-transform: uppercase; letter-spacing: .07em;
}
#jp-banco .jp-col[aria-pressed="true"] .jp-col-n { color: #8a5800; }

/* ============================== cenário ================================ */
#jp-banco .jp-cenario {
  background: var(--jp-navy); color: #fff; border-radius: var(--jp-r);
  padding: 26px 24px; margin: 26px 0;
}
#jp-banco .jp-cenario h2 { color: #fff; margin-bottom: 4px; }
#jp-banco .jp-cenario-sub { color: rgba(255,255,255,.72); font-size: .92rem; margin-bottom: 16px; }
/* linhas da busca: ícone, rótulo, controle. Lê como conversa. */
#jp-banco .jp-busca { display: grid; gap: 2px; }
#jp-banco .jp-busca-lin {
  display: grid; grid-template-columns: 30px 190px 1fr; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px; transition: background .12s;
}
#jp-banco .jp-busca-lin:hover { background: rgba(255,255,255,.06); }
#jp-banco .jp-busca-ic { font-size: 1.1rem; line-height: 1; }
#jp-banco .jp-busca-rot { color: rgba(255,255,255,.72); font-size: .95rem; }
#jp-banco .jp-slot { display: block; position: relative; max-width: 330px; }
#jp-banco .jp-slot select {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-weight: 500; font-size: 1.02rem;
  color: #fff; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2); border-radius: 7px; cursor: pointer;
  padding: 8px 34px 8px 13px; line-height: 1.4;
  width: 100%; max-width: 330px;
  transition: background .12s, border-color .12s;
}
#jp-banco .jp-slot select:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); }
#jp-banco .jp-slot select option { color: var(--jp-texto); background: #fff; }
#jp-banco .jp-slot select:focus-visible { outline: 3px solid var(--jp-ciano); outline-offset: 2px; }
#jp-banco .jp-slot::after {
  content: ""; position: absolute; right: 14px; top: 50%; pointer-events: none;
  width: 7px; height: 7px; border-right: 2px solid rgba(255,255,255,.7); border-bottom: 2px solid rgba(255,255,255,.7);
  transform: translateY(-70%) rotate(45deg);
}
#jp-banco .jp-cenario-acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 18px; }

/* ============================== botões ================================= */
#jp-banco .jp-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 6px; font-weight: 500; font-size: .95rem;
  text-decoration: none; border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s;
}
#jp-banco .jp-btn-p { background: var(--jp-ambar); color: var(--jp-navy); }
#jp-banco .jp-btn-p:hover { background: #d98a00; }
#jp-banco .jp-btn-s { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
#jp-banco .jp-btn-s:hover { border-color: #fff; background: rgba(255,255,255,.08); }
#jp-banco .jp-btn-o { background: transparent; color: var(--jp-navy); border-color: var(--jp-linha); }
#jp-banco .jp-btn-o:hover { border-color: var(--jp-navy); background: var(--jp-navy-luz); }
#jp-banco .jp-btn:focus-visible { outline: 3px solid var(--jp-ciano); outline-offset: 2px; }

/* ============================== busca por texto ======================== */
#jp-banco .jp-busca-texto { position: relative; margin: 40px 0 14px; }
#jp-banco .jp-lupa { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: .95rem; pointer-events: none; }
#jp-banco .jp-input {
  width: 100%; font: inherit; font-size: 1rem; color: var(--jp-texto);
  padding: 14px 44px 14px 44px; border: 1px solid var(--jp-linha);
  border-radius: 8px; background: var(--jp-fundo); appearance: none; -webkit-appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
#jp-banco .jp-input::-webkit-search-decoration,
#jp-banco .jp-input::-webkit-search-cancel-button { -webkit-appearance: none; }
#jp-banco .jp-input:focus { outline: 0; border-color: var(--jp-navy); box-shadow: 0 0 0 3px rgba(39,57,117,.1); }
#jp-banco .jp-input::placeholder { color: #9aa1b2; }
#jp-banco .jp-input-x {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%; font-size: 1.1rem; color: var(--jp-suave);
  display: grid; place-items: center;
}
#jp-banco .jp-input-x:hover { background: var(--jp-cinza); color: var(--jp-navy); }

/* ============================== filtros ativos ========================= */
#jp-banco .jp-ativos {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 14px 16px; margin-bottom: 18px;
  background: var(--jp-navy-luz); border-radius: 8px;
}
#jp-banco .jp-ativos-t {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--jp-suave); font-weight: 500; margin-right: 2px;
}
#jp-banco .jp-ativo {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--jp-navy); color: #fff; border-radius: 999px;
  padding: 5px 12px; font-size: .84rem;
}
#jp-banco .jp-ativo span[aria-hidden] { font-size: 1rem; line-height: 1; opacity: .7; }
#jp-banco .jp-ativo:hover { background: var(--jp-navy-esc); }
#jp-banco .jp-ativo:hover span[aria-hidden] { opacity: 1; }

/* ============================== ordenar ================================ */
#jp-banco .jp-ordenar { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--jp-suave); }
#jp-banco .jp-ordenar select {
  font: inherit; font-size: .84rem; color: var(--jp-navy); font-weight: 500;
  border: 1px solid var(--jp-linha); border-radius: 6px; background: var(--jp-fundo);
  padding: 5px 10px; cursor: pointer;
}
#jp-banco .jp-ordenar select:hover { border-color: var(--jp-navy); }

/* ============================== filtros ================================ */
#jp-banco .jp-filtros { border: 1px solid var(--jp-linha); border-radius: var(--jp-r); margin-bottom: 18px; }
#jp-banco .jp-filtros-dica { font-size: .85rem; color: var(--jp-suave); padding: 16px 0 2px; max-width: 68ch; }
#jp-banco .jp-filtros-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 14px 18px; text-align: left;
}
#jp-banco .jp-filtros-cab span { font-weight: 500; color: var(--jp-navy); }
#jp-banco .jp-filtros-corpo { padding: 4px 18px 20px; border-top: 1px solid var(--jp-linha); }
#jp-banco .jp-grupo { padding: 16px 0 4px; border-bottom: 1px solid var(--jp-linha); }
#jp-banco .jp-grupo:last-child { border-bottom: 0; }
#jp-banco .jp-grupo-t {
  text-transform: uppercase; letter-spacing: .1em; font-size: .7rem;
  color: var(--jp-suave); font-weight: 500; margin-bottom: 10px;
}
#jp-banco .jp-grupo-t em {
  font-style: normal; text-transform: none; letter-spacing: 0;
  font-size: .78rem; color: #9aa1b2; margin-left: 8px;
}
#jp-banco .jp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#jp-banco .jp-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 8px 6px 14px; border-radius: 999px; border: 1px solid var(--jp-linha);
  font-size: .88rem; color: var(--jp-texto); background: var(--jp-fundo);
  transition: border-color .12s, background .12s, color .12s, opacity .12s;
}
#jp-banco .jp-chip:hover:not([disabled]) { border-color: var(--jp-navy); }
#jp-banco .jp-chip[aria-pressed="true"] { background: var(--jp-navy); border-color: var(--jp-navy); color: #fff; }
#jp-banco .jp-chip:focus-visible { outline: 3px solid var(--jp-ciano); outline-offset: 2px; }
#jp-banco .jp-chip-n {
  min-width: 22px; padding: 0 6px; border-radius: 999px; text-align: center;
  background: var(--jp-cinza); color: var(--jp-suave);
  font-size: .72rem; font-weight: 500; line-height: 1.7;
}
#jp-banco .jp-chip[aria-pressed="true"] .jp-chip-n { background: rgba(255,255,255,.22); color: #fff; }
/* opção que zeraria o resultado: some do caminho sem sumir da tela */
#jp-banco .jp-bncc-sel {
  font: inherit; font-size: .9rem; color: var(--jp-navy); font-weight: 500;
  border: 1px solid var(--jp-linha); border-radius: 6px; background: var(--jp-fundo);
  padding: 8px 12px; cursor: pointer; max-width: 100%;
}
#jp-banco .jp-bncc-sel:hover { border-color: var(--jp-navy); }
#jp-banco .jp-chip[data-zero] { opacity: .32; cursor: not-allowed; }
#jp-banco .jp-chip[data-zero] .jp-chip-n { background: transparent; }

/* ============================== resultados ============================= */
#jp-banco .jp-barra {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline;
  justify-content: space-between; margin-bottom: 16px;
}
#jp-banco .jp-conta { font-weight: 500; color: var(--jp-navy); }
#jp-banco .jp-conta em { font-style: normal; color: var(--jp-suave); font-weight: 400; }

#jp-banco .jp-grade {
  display: grid; gap: 18px; margin-bottom: 40px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
#jp-banco .jp-card {
  border: 1px solid var(--jp-linha); border-radius: var(--jp-r); background: var(--jp-fundo);
  padding: 20px; text-align: left; display: flex; flex-direction: column; gap: 10px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
#jp-banco .jp-card:hover { border-color: var(--jp-navy); box-shadow: var(--jp-sombra); transform: translateY(-2px); }
#jp-banco .jp-card:focus-visible { outline: 3px solid var(--jp-ciano); outline-offset: 2px; }
#jp-banco .jp-card-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .78rem; color: var(--jp-suave); }
#jp-banco .jp-card-t { font-size: 1.18rem; font-weight: 500; color: var(--jp-navy); line-height: 1.3; }

/* o insight é o que vende a atividade, então ele domina o card */
#jp-banco .jp-card-insight {
  position: relative; flex: 1; padding: 14px 14px 14px 40px; margin-top: 4px;
  background: var(--jp-navy-luz); border-radius: 8px;
  font-size: .93rem; color: var(--jp-navy); line-height: 1.5;
}
#jp-banco .jp-card-lamp { position: absolute; left: 13px; top: 12px; font-size: 1rem; }
#jp-banco .jp-card:hover .jp-card-insight { background: var(--jp-ambar-luz); }
#jp-banco .jp-card-pe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; }
#jp-banco .jp-bncc-selo {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 500;
  color: var(--jp-suave); white-space: nowrap;
}

/* ============================== acervo =================================
   Materiais que o projeto já publicou. Precisam ser reconhecíveis à
   distância, sem parecer menos importantes que as fichas.               */
#jp-banco .jp-acervo-tag {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 500;
  color: #0f6d77; background: var(--jp-ciano-luz);
  padding: 3px 10px; border-radius: 4px;
}
#jp-banco .jp-card:has(.jp-acervo-tag) { border-left: 3px solid var(--jp-ciano); }
#jp-banco .jp-card:has(.jp-acervo-tag) .jp-card-insight { background: var(--jp-ciano-luz); }
#jp-banco .jp-card:has(.jp-acervo-tag):hover .jp-card-insight { background: #d5f2f5; }

#jp-banco .jp-combinas { display: grid; gap: 10px; }
#jp-banco .jp-combina {
  width: 100%; text-align: left; display: grid; gap: 4px;
  border: 1px solid var(--jp-linha); border-left: 3px solid var(--jp-ambar);
  border-radius: 6px; padding: 14px 16px;
  transition: border-color .12s, background .12s;
}
#jp-banco .jp-combina:hover { border-color: var(--jp-navy); background: var(--jp-navy-luz); }
#jp-banco .jp-combina b { color: var(--jp-navy); font-weight: 500; }
#jp-banco .jp-combina span { font-size: .9rem; color: var(--jp-suave); }

#jp-banco .jp-acervo-nota {
  border-top: 1px solid var(--jp-linha); padding-top: 18px; margin-top: 10px;
  font-size: .86rem; color: var(--jp-suave); max-width: 72ch;
}

#jp-banco .jp-selos { display: flex; flex-wrap: wrap; gap: 6px; }
#jp-banco .jp-selo {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 500;
  padding: 3px 9px; border-radius: 4px; white-space: nowrap;
}
#jp-banco .jp-selo-pronta-amanha { background: var(--jp-ambar-luz); color: #8a5800; }
#jp-banco .jp-selo-sem-tela     { background: var(--jp-ciano-luz); color: #0f6d77; }
#jp-banco .jp-selo-testada      { background: var(--jp-navy-luz);  color: var(--jp-navy); }
#jp-banco .jp-selo-sensivel     { background: #fdecec;             color: #a02020; }

#jp-banco .jp-vazio {
  border: 1px dashed var(--jp-linha); border-radius: var(--jp-r);
  padding: 44px 24px; text-align: center; color: var(--jp-suave); margin-bottom: 40px;
}
#jp-banco .jp-vazio strong { display: block; color: var(--jp-navy); font-size: 1.2rem; margin-bottom: 10px; font-weight: 500; }
#jp-banco .jp-vazio p { max-width: 52ch; margin: 0 auto 4px; }
#jp-banco .jp-vazio b { color: var(--jp-navy); font-weight: 500; }
#jp-banco .jp-vazio-acoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 20px 0 18px; }
#jp-banco .jp-vazio-nota { font-size: .85rem; padding-top: 14px; border-top: 1px solid var(--jp-linha); max-width: 56ch; }

/* ============================== progressão =============================
   Conta uma história de crescimento, do broto à balança, em vez de
   apresentar uma tabela curricular.                                       */
#jp-banco .jp-prog { margin-bottom: 48px; }
#jp-banco .jp-legenda { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
#jp-banco .jp-leg {
  display: inline-flex; align-items: baseline; gap: 6px;
  border: 1px solid var(--jp-linha); border-radius: 999px; padding: 5px 14px; font-size: .82rem;
}
#jp-banco .jp-leg em { font-style: normal; color: var(--jp-suave); font-size: .74rem; }

#jp-banco .jp-eixos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
#jp-banco .jp-eixo { border: 1px solid var(--jp-linha); border-radius: var(--jp-r); padding: 22px 20px; }
#jp-banco .jp-eixo-nome { font-size: 1.1rem; margin-bottom: 4px; }
#jp-banco .jp-eixo-promessa { font-size: .86rem; color: var(--jp-suave); margin-bottom: 16px; }

#jp-banco .jp-passo { display: block; }
#jp-banco .jp-passo-b {
  display: grid; grid-template-columns: 26px 1fr; gap: 4px 10px; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: 7px; border: 1px solid transparent; background: var(--jp-cinza);
  transition: background .12s, border-color .12s;
}
#jp-banco .jp-passo-b:hover:not([data-vazio]) { background: var(--jp-navy-luz); border-color: var(--jp-navy); }
#jp-banco .jp-passo-ic { grid-row: span 2; font-size: 1.15rem; line-height: 1.2; }
#jp-banco .jp-passo-txt { font-size: .9rem; color: var(--jp-texto); line-height: 1.35; }
#jp-banco .jp-passo-n { font-size: .7rem; color: var(--jp-ambar); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
#jp-banco .jp-passo-b[data-vazio] { opacity: .5; cursor: default; background: transparent; border: 1px dashed var(--jp-linha); }
#jp-banco .jp-passo-b[data-vazio] .jp-passo-n { color: var(--jp-suave); }
#jp-banco .jp-seta { display: block; text-align: center; color: var(--jp-ciano); font-size: .8rem; line-height: 1.6; }
#jp-banco .jp-prog-nota { font-size: .86rem; color: var(--jp-suave); margin-top: 22px; max-width: 70ch; }

/* ============================== o que você recebe ====================== */
#jp-banco .jp-recebe { border-top: 1px solid var(--jp-linha); padding-top: 40px; }
#jp-banco .jp-checks {
  display: grid; gap: 10px 26px; margin-bottom: 22px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
#jp-banco .jp-checks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: .96rem; align-items: baseline; }
#jp-banco .jp-checks li span { color: var(--jp-ciano); font-weight: 500; }
#jp-banco .jp-recebe-nota {
  font-size: .9rem; color: var(--jp-suave); border-left: 3px solid var(--jp-ciano);
  padding-left: 14px; max-width: 72ch;
}

/* ============================== caixa da BNCC ========================== */
#jp-banco .jp-bncc-caixa { border: 1px solid var(--jp-linha); border-radius: var(--jp-r); margin: 36px 0 12px; }
#jp-banco .jp-bncc-caixa summary {
  padding: 16px 20px; cursor: pointer; font-weight: 500; color: var(--jp-navy); list-style: none;
}
#jp-banco .jp-bncc-caixa summary::-webkit-details-marker { display: none; }
#jp-banco .jp-bncc-caixa summary::after { content: " +"; color: var(--jp-ambar); }
#jp-banco .jp-bncc-caixa[open] summary::after { content: " \2212"; }
#jp-banco .jp-bncc-caixa-corpo { padding: 0 20px 20px; border-top: 1px solid var(--jp-linha); }
#jp-banco .jp-bncc-caixa-corpo p { margin-top: 14px; font-size: .93rem; max-width: 76ch; }

#jp-banco .jp-limpa-mini { font-size: .84rem; color: var(--jp-suave); text-decoration: underline; text-underline-offset: 3px; }
#jp-banco .jp-limpa-mini:hover { color: var(--jp-navy); }

/* ============================== ficha ================================== */
#jp-banco .jp-ficha { max-width: 820px; margin: 0 auto; }
#jp-banco .jp-voltar { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 20px; font-size: .92rem; color: var(--jp-navy); }
#jp-banco .jp-ficha-cab { border-bottom: 2px solid var(--jp-navy); padding-bottom: 22px; margin-bottom: 26px; }
#jp-banco .jp-ficha-n { font-size: .78rem; color: var(--jp-suave); letter-spacing: .08em; text-transform: uppercase; }
#jp-banco .jp-ficha-cab h1 { margin: 6px 0 10px; }

#jp-banco .jp-ficha-dados {
  display: grid; gap: 2px 22px; margin: 18px 0 4px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  font-size: .86rem;
}
#jp-banco .jp-dado { padding: 7px 0; border-top: 1px solid var(--jp-linha); }
#jp-banco .jp-dado dt { color: var(--jp-suave); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
#jp-banco .jp-dado dd { color: var(--jp-texto); }

#jp-banco .jp-bloco { margin-bottom: 26px; }
#jp-banco .jp-bloco-t {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 500; color: var(--jp-ambar);
}
#jp-banco .jp-bloco-t::after { content: ""; flex: 1; height: 1px; background: var(--jp-linha); }
#jp-banco .jp-bloco p { margin-bottom: 8px; }
#jp-banco .jp-destaque {
  background: var(--jp-navy-luz); border-left: 3px solid var(--jp-navy);
  border-radius: 0 6px 6px 0; padding: 16px 18px; font-size: 1.02rem;
}

#jp-banco .jp-roteiro { border-top: 1px solid var(--jp-linha); }
#jp-banco .jp-roteiro li { display: grid; gap: 4px 18px; grid-template-columns: 130px 1fr; padding: 11px 0; border-bottom: 1px solid var(--jp-linha); font-size: .95rem; }
#jp-banco .jp-roteiro b { color: var(--jp-navy); font-weight: 500; font-size: .86rem; }

#jp-banco .jp-abas { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--jp-linha); margin-bottom: 14px; }
#jp-banco .jp-aba { padding: 9px 16px; font-size: .92rem; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--jp-suave); }
#jp-banco .jp-aba[aria-selected="true"] { color: var(--jp-navy); border-bottom-color: var(--jp-ambar); font-weight: 500; }

#jp-banco .jp-lista li { position: relative; padding-left: 20px; margin-bottom: 7px; font-size: .95rem; }
#jp-banco .jp-lista li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--jp-ciano); }
#jp-banco .jp-lista-evitar li::before { background: #d05252; border-radius: 1px; }

#jp-banco .jp-aviso {
  border: 1px solid #f0d2d2; background: #fdf6f6; border-radius: 6px;
  padding: 14px 16px; font-size: .92rem; color: #7d2b2b; margin-bottom: 22px;
}
#jp-banco .jp-aviso b { color: #a02020; }
#jp-banco .jp-protecao { border: 1px solid var(--jp-ciano); background: var(--jp-ciano-luz); border-radius: 6px; padding: 14px 16px; font-size: .93rem; }

#jp-banco .jp-bncc { border: 1px solid var(--jp-linha); border-radius: 6px; padding: 14px 16px; font-size: .9rem; }
#jp-banco .jp-bncc-cod {
  display: inline-block; background: var(--jp-navy); color: #fff; font-weight: 500;
  padding: 2px 8px; border-radius: 4px; font-size: .78rem; margin-right: 8px; letter-spacing: .03em;
}
#jp-banco .jp-bncc-lin { margin-bottom: 10px; }
#jp-banco .jp-bncc-lin:last-child { margin-bottom: 0; }
/* A competência geral é a camada mais grossa e a que a coordenação lê primeiro,
   então ela vem antes do código e com peso visual menor que o do código. */
#jp-banco .jp-bncc-cg {
  display: inline-block; background: var(--jp-navy-luz); color: var(--jp-navy);
  padding: 2px 8px; border-radius: 4px; font-size: .8rem; margin: 2px 4px 2px 0;
}

/* marco legal */
#jp-banco .jp-legal { border: 1px solid var(--jp-linha); border-radius: 6px; padding: 14px 16px; font-size: .9rem; }
#jp-banco .jp-legal-lin { margin-bottom: 12px; }
#jp-banco .jp-legal-lin:last-child { margin-bottom: 0; }
#jp-banco .jp-legal-lei { color: var(--jp-navy); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--jp-linha); }
#jp-banco .jp-legal-lei:hover { border-bottom-color: var(--jp-navy); }

/* governança editorial. A ficha vencida se denuncia sozinha, em âmbar, porque
   quem abre a ficha para aplicar amanhã precisa ver isso sem procurar. */
#jp-banco .jp-gov {
  border: 1px solid var(--jp-linha); border-radius: 6px; padding: 14px 16px;
  font-size: .88rem; background: var(--jp-cinza);
}
#jp-banco .jp-gov-vencida { border-color: var(--jp-ambar); background: var(--jp-ambar-luz); }
#jp-banco .jp-gov-datas { margin-top: 6px; color: var(--jp-suave); }
#jp-banco .jp-gov-vencida .jp-gov-datas { color: var(--jp-texto); }

#jp-banco .jp-kit li { border: 1px solid var(--jp-linha); border-radius: 6px; padding: 12px 14px; margin-bottom: 8px; font-size: .92rem; }
#jp-banco .jp-kit b { color: var(--jp-navy); font-weight: 500; }
#jp-banco .jp-kit em { font-style: normal; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--jp-ambar); margin-left: 8px; }

#jp-banco .jp-imp { border: 1px solid var(--jp-linha); border-radius: 6px; margin-bottom: 10px; overflow: hidden; }
#jp-banco .jp-imp-cab { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 16px; text-align: left; font-size: .95rem; }
#jp-banco .jp-imp-cab b { color: var(--jp-navy); font-weight: 500; }
#jp-banco .jp-imp-corpo { padding: 0 16px 16px; border-top: 1px solid var(--jp-linha); }
#jp-banco .jp-imp-nota { font-size: .84rem; color: var(--jp-suave); padding: 12px 0 4px; }
#jp-banco .jp-imp pre {
  white-space: pre-wrap; font-family: inherit; font-size: .9rem;
  background: var(--jp-cinza); border-radius: 4px; padding: 14px; margin-top: 10px;
}
#jp-banco .jp-imp-tipo {
  font-style: normal; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--jp-ambar); margin-left: 8px;
}
#jp-banco .jp-imp-print-cab { display: none; }

/* ---- cartas de verdade, não lista numerada ---------------------------- */
#jp-banco .jp-cartas {
  display: grid; gap: 10px; margin-top: 12px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
#jp-banco .jp-carta {
  position: relative; border: 1px dashed var(--jp-navy); border-radius: 6px;
  padding: 16px 14px 14px 34px; background: var(--jp-fundo);
  font-size: .9rem; line-height: 1.45; min-height: 76px;
}
#jp-banco .jp-carta-n {
  position: absolute; left: 10px; top: 12px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--jp-navy-luz); color: var(--jp-navy);
  font-size: .66rem; font-weight: 500; display: grid; place-items: center;
}

#jp-banco .jp-imp-itens { counter-reset: jpi; margin-top: 10px; }
#jp-banco .jp-imp-itens li {
  counter-increment: jpi; position: relative; padding: 8px 0 8px 34px;
  border-bottom: 1px dashed var(--jp-linha); font-size: .92rem;
}
#jp-banco .jp-imp-itens li:last-child { border-bottom: 0; }
#jp-banco .jp-imp-itens li::before {
  content: counter(jpi); position: absolute; left: 0; top: 8px;
  width: 22px; height: 22px; border-radius: 4px; background: var(--jp-navy-luz);
  color: var(--jp-navy); font-size: .72rem; font-weight: 500;
  display: grid; place-items: center;
}

#jp-banco .jp-ficha-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 34px; }

/* ============================== rodapé ================================= */
#jp-banco .jp-rodape {
  border-top: 1px solid var(--jp-linha); padding-top: 22px; margin-top: 12px;
  font-size: .85rem; color: var(--jp-suave);
}
#jp-banco .jp-rodape p { margin-bottom: 8px; max-width: 78ch; }

/* ============================== responsivo ============================= */
@media (max-width: 700px) {
  #jp-banco .jp-cenario { padding: 20px 14px; }
  #jp-banco .jp-busca-lin { grid-template-columns: 26px 1fr; gap: 4px 8px; padding: 10px 6px; }
  #jp-banco .jp-busca-rot { font-size: .86rem; }
  #jp-banco .jp-slot { grid-column: 1 / -1; max-width: none; }
  #jp-banco .jp-roteiro li { grid-template-columns: 1fr; }
  #jp-banco .jp-ficha-dados { grid-template-columns: 1fr 1fr; }
  #jp-banco .jp-checks { grid-template-columns: 1fr; }
}

/* ============================== impressão ==============================
   O kit imprimível sai limpo: sem navegação, sem cores de fundo pesadas,
   cada material começando em página nova.                                */
@media print {
  #jp-banco { font-size: 11pt; color: #000; padding: 0; }
  #jp-banco .jp-nao-imprime,
  #jp-banco .jp-portas, #jp-banco .jp-cenario, #jp-banco .jp-filtros,
  #jp-banco .jp-grade, #jp-banco .jp-barra, #jp-banco .jp-prog,
  #jp-banco .jp-ficha-acoes, #jp-banco .jp-voltar, #jp-banco .jp-abas { display: none !important; }

  #jp-banco .jp-ficha { max-width: none; }
  #jp-banco h1 { font-size: 20pt; }
  #jp-banco .jp-bloco-t { color: #000; }
  #jp-banco .jp-destaque, #jp-banco .jp-protecao, #jp-banco .jp-aviso,
  #jp-banco .jp-bncc, #jp-banco .jp-legal,
  #jp-banco .jp-gov, #jp-banco .jp-gov-vencida { background: none; border: 1px solid #999; color: #000; }
  #jp-banco .jp-bncc-cod { background: none; color: #000; border: 1px solid #000; }
  #jp-banco .jp-bncc-cg { background: none; color: #000; border: 1px solid #000; }
  #jp-banco .jp-gov-datas, #jp-banco .jp-legal-lei { color: #000; }

  /* na impressão, todo material do kit fica aberto */
  #jp-banco .jp-imp-corpo { display: block !important; }
  #jp-banco .jp-imp { border: 0; }
  #jp-banco .jp-imp-cab { padding-left: 0; }
  #jp-banco .jp-imp-tipo { display: none; }
  #jp-banco .jp-imp pre { background: none; border: 1px solid #999; }
  #jp-banco .jp-imp-material { page-break-before: always; break-before: page; }

  /* cada folha solta leva o nome da atividade no topo, senão o material
     impresso vira papel sem dono na mesa dos professores */
  #jp-banco .jp-imp-print-cab {
    display: block !important; font-size: 8pt; letter-spacing: .08em;
    text-transform: uppercase; color: #555; border-bottom: 1px solid #999;
    padding-bottom: 4pt; margin-bottom: 10pt;
  }

  /* as cartas saem duas por linha, com borda tracejada para recortar,
     e nenhuma parte no meio da página */
  #jp-banco .jp-cartas { grid-template-columns: 1fr 1fr; gap: 6pt; }
  #jp-banco .jp-carta {
    border: 1px dashed #444; min-height: 20mm; padding: 8pt 8pt 8pt 20pt;
    font-size: 10pt; page-break-inside: avoid; break-inside: avoid;
  }
  #jp-banco .jp-carta-n { background: none; border: 1px solid #777; color: #444; }
  #jp-banco .jp-imp-itens li, #jp-banco .jp-roteiro li,
  #jp-banco .jp-kit li, #jp-banco .jp-combina {
    page-break-inside: avoid; break-inside: avoid;
  }
  #jp-banco h1, #jp-banco h2, #jp-banco .jp-bloco-t { page-break-after: avoid; break-after: avoid; }
  #jp-banco .jp-versao-print { display: block !important; margin-bottom: 14px; }

  #jp-banco a[href]::after { content: ""; }
  #jp-banco .jp-print-rodape { display: block !important; margin-top: 20pt; padding-top: 8pt; border-top: 1px solid #999; font-size: 8pt; }
}
#jp-banco .jp-print-rodape { display: none; }
#jp-banco .jp-versao-print { display: none; }