/*
  As três páginas de busca (2026-11-11): /dashboard-notas-fiscais, /xml-nfe-para-excel e
  /cbs-ibs-na-nfe. Mesmo desenho da página de escritórios (contadores.html), num arquivo só porque
  as três usam as mesmas regras.
*/
.pb { max-width: 880px; margin: 0 auto; padding: 0 20px; }
.pb-sec { padding: clamp(40px, 5vw, 72px) 0 0; }
.pb-sec:last-of-type { padding-bottom: clamp(48px, 6vw, 88px); }
.pb-olho { font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.pb-tit { font-family: var(--fonte-display); font-size: clamp(30px, 4.4vw, 50px); line-height: 1.06; letter-spacing: -0.025em; font-weight: 700; margin: 0 0 18px; max-width: 22ch; }
.pb-tit--sec { font-size: clamp(24px, 3vw, 34px); max-width: 28ch; margin-bottom: 16px; }
.pb p, .pb li { font-size: 16px; line-height: 1.65; color: var(--text2); }
.pb-sub { font-size: 17px; max-width: 64ch; margin: 0 0 24px; }
.pb-acoes { display: flex; gap: 12px 18px; flex-wrap: wrap; align-items: center; }
.pb-acoes .btn { padding: 12px 22px; font-size: 15px; }
.pb-nota { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); }

.pb-passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: passo; }
.pb-passos li { counter-increment: passo; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 22px; font-size: 15px; }
.pb-passos li::before { content: counter(passo); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; margin-bottom: 12px; }
.pb-passos b { display: block; color: var(--text); font-size: 17px; margin-bottom: 4px; }

.pb-lista { margin: 0 0 16px; padding-left: 22px; }
.pb-lista li { margin: 0 0 6px; }
.pb-lista b { color: var(--text); }

.pb-print { margin: 24px 0 0; }
.pb-print a, .pb-print > img { display: block; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.pb-print picture, .pb-print img { display: block; width: 100%; height: auto; }
.pb-print figcaption { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.so-escuro { display: none !important; }
:root[data-tema="escuro"] .so-claro { display: none !important; }
:root[data-tema="escuro"] .so-escuro { display: block !important; }

.pb-faq details { border-top: 1px solid var(--border); padding: 16px 0; }
.pb-faq details:last-child { border-bottom: 1px solid var(--border); }
.pb-faq summary { cursor: pointer; font-weight: 600; font-size: 16px; color: var(--text); }
.pb-faq details p { margin: 10px 0 0; max-width: 72ch; }

.pb-final { text-align: center; }
.pb-final .pb-tit { margin-left: auto; margin-right: auto; }
.pb-final .pb-acoes { justify-content: center; }
.pb-final .pb-mais { margin: 22px 0 0; }

/* Os gráficos de exemplo da página do dashboard: as MESMAS regras `.mk-*` da demonstração da home
   (landing.html), copiadas porque cada página estática carrega o próprio CSS. Aqui a linha do mês
   aparece também no celular. */
.pb-grafico { margin: 24px 0 0; }
.pb-grafico figcaption { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.mk-cartao { border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; background: var(--surface); min-width: 0; }
.mk-2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; }
.pb-grafico .mk-ct { font-size: 13.5px; font-weight: 700; margin: 0 0 2px; color: var(--text); }
.pb-grafico .mk-cs { font-size: 12px; color: var(--muted); margin: 0 0 14px; }
.mk-rosca { display: flex; gap: 22px; align-items: center; }
.mk-rosca-anel { flex: none; width: 132px; height: 132px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: conic-gradient(var(--serie-1) 0 57.9%, var(--serie-2) 0 76.6%, var(--serie-3) 0 88.2%, var(--serie-4) 0 92.5%, var(--serie-5) 0 96.6%, var(--serie-resto) 0 100%); }
.mk-rosca-anel div { width: 84px; height: 84px; border-radius: 50%; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10.5px; color: var(--muted); }
.mk-rosca-anel b { font-family: var(--fonte-display); font-size: 13px; color: var(--text); }
.mk-leg { flex: 1; min-width: 0; display: grid; gap: 7px; }
.mk-leg div { display: flex; align-items: center; gap: 8px; font-size: 12px; border-bottom: 1px solid var(--border-soft); padding-bottom: 6px; }
.mk-leg i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.mk-leg span { flex: 1; color: var(--text2); }
.mk-leg b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
.mk-linha svg { width: 100%; height: auto; display: block; }
.mk-linha-leg { display: flex; gap: 16px; font-size: 11px; color: var(--muted); margin-top: 8px; }

@media (max-width: 760px) {
  .pb-passos, .mk-2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .mk-rosca { flex-direction: column; align-items: stretch; }
  .mk-rosca-anel { align-self: center; }
}