/* A casca: barra de cima (escudo, mês, Modo reunião), as abas em pílulas que rolam de lado no celular, e o miolo. */
html, body { background: var(--fundo); }
body { font-size: 16px; line-height: 1.45; }
h1, h2, h3 { letter-spacing: -.01em; }
.num { font-variant-numeric: tabular-nums; }

.topo { background: var(--superficie); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 5; }
.topo-in { max-width: var(--largura); margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 14px; }
.escudo { width: 38px; height: 42px; flex: none; object-fit: contain; }
.titulo { font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; min-width: 0; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.titulo small { display: block; font-weight: 500; font-size: .78rem; color: var(--texto-2); }
.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
/* o botão do Modo reunião nunca encolhe abaixo do toque (em 360 px ficava com 34 de largura) */
.topo-acoes .btn { flex: none; min-width: var(--toque); justify-content: center; }
.seletor-mes { min-height: var(--toque); padding: 0 34px 0 12px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--borda); font-weight: 700; font-size: .9rem; width: auto; }

.abas { background: var(--superficie); border-bottom: 1px solid var(--borda); }
.abas-in { max-width: var(--largura); margin: 0 auto; padding: 8px 12px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.abas-in::-webkit-scrollbar { display: none; }
.aba { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: var(--toque); padding: 0 14px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--texto-2); font: 700 1rem/1 var(--fonte); text-decoration: none; cursor: pointer; }
.aba svg { width: 20px; height: 20px; flex: none; }
.aba[aria-current="page"] { background: var(--marca-suave); color: var(--marca); border-color: var(--marca-borda); }
.aba .pend { background: var(--erro); color: var(--sobre-marca); font-size: .72rem; padding: 2px 7px; border-radius: 999px; font-weight: 800; }
.aba .pend.info { background: var(--info); }
.aba .pend.ok { background: var(--ok); }

.miolo { max-width: var(--largura); margin: 0 auto; padding: 18px 16px 60px; }
.aviso-topo { max-width: var(--largura); margin: 12px auto 0; padding: 0 16px; }

@media (max-width: 560px) {
  .titulo small { display: none; }
  .so-pc { display: none; }
  .topo-in { gap: 10px; }
  .seletor-mes { padding: 0 28px 0 10px; font-size: .85rem; }
}
/* em 360 px o nome cortava em "Frot…": o escudo da PKJ fica sozinho e o nome do sistema está no título da aba */
@media (max-width: 400px) {
  .titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}