/* Padrão visual único da Kelus. As CORES vêm da paleta do cliente (assets/paleta.css: --marinho, --azul, --verde, --verde-az, --claro);
   fonte, formas, espaços e tabelas são iguais em todos os clientes. Tons de cinza derivados da cor do cliente (color-mix). Desenvolvido por Kelus Consultoria. */
@font-face { font-family: Signika; font-style: normal; font-weight: 300 700; font-display: swap; src: url("signika.ttf") format("truetype"); }
:root {
  --fundo: color-mix(in srgb, var(--marinho, #0B295E) 4%, #fff);
  --linha: color-mix(in srgb, var(--marinho, #0B295E) 16%, #fff);
  --linha-campo: color-mix(in srgb, var(--marinho, #0B295E) 30%, #fff);
  --zebra: color-mix(in srgb, var(--marinho, #0B295E) 3.5%, #fff);
  --total: color-mix(in srgb, var(--verde, #4F7FD9) 38%, #fff);
}
body { font-family: Signika, "Segoe UI", system-ui, Arial, sans-serif; font-size: 14.5px; line-height: 1.45; background: var(--fundo); }
h1, h2, h3 { font-weight: 600; }
h1 { font-size: 1.45rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1.05rem; }
.saudacao { font-size: 1.3rem; font-weight: 600; }

/* formas: cartões de 8 px e campos de 5 px, planos, borda fina, quase sem sombra; botões de ação em pílula */
.cartao, .cartao-menu, .acao-cx, .mais-cx, .card, .painel { border-radius: 8px; box-shadow: none; border: 1px solid var(--linha); }
.cartao-menu:hover, .acao-cx:hover, .mais-cx:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, .08); transform: none; }
/* botões de ação em pílula (decisão do Luis); cartões, campos e tabelas planos */
button, .botao, .pers, .bt, .botao-azul, .botao-branco { border-radius: 999px; font-weight: 600; letter-spacing: 0; }
input, select, textarea, .campo input, .campo select, .filtros input, .filtros select { border-radius: 5px; border-color: var(--linha-campo); font-family: inherit; }
input[type=file], input[type=password] { border-radius: 5px; border-color: var(--linha-campo); }
.msg, .aviso, .msg-info, .msg-ok, .msg-erro, .msg-aviso { border-radius: 6px; }

/* tabelas: cabeçalho forte na cor do cliente, linhas zebradas, total em destaque */
table { font-size: .93rem; }
th { background: var(--marinho, #0B295E); color: #fff; font-weight: 600; padding: 8px 10px; }
td { padding: 7px 10px; }
tbody tr:nth-child(even) td { background: var(--zebra); }
tr.total td, tfoot td { background: var(--total); font-weight: 600; }
.tabela { border: 1px solid var(--linha); border-radius: 8px; overflow: hidden auto; }

/* tema escuro: as listras e o total acompanham */
html[data-tema="escuro"] { --zebra: #1e242a; --total: color-mix(in srgb, var(--verde, #4F7FD9) 32%, #1c2127); --linha-campo: #4a5662; }
html[data-tema="escuro"] th { background: color-mix(in srgb, var(--marinho, #0B295E) 55%, #000); }

/* menu em quadradinhos: ícones planos */
.res-janela { border-radius: 8px; }
.tile .cartao-icone { border-radius: 18px; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.estrela { box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.cartao-icone { border-radius: 10px; }
.acao { font-weight: 500; }
.selo { border-radius: 999px; }   /* etiquetas de situação continuam em pílula */

/* janela de pergunta do sistema (kelusConfirma) */
.kdlg { border-radius: 8px; }
.kdlg-bt button { border-radius: 999px; }
.topo-app .tp-btn { border-radius: 6px; }
.topo-app .tp-menu { border-radius: 8px; }

/* tela inicial e Entrar ocupam a janela inteira (rodapé embaixo, faixa escura cresce); Login e Entrar em pílula larga */
body:has(main#conteudo > .hero-marca), body:has(.faixa-titulo) { min-height: 100vh; display: flex; flex-direction: column; }
main#conteudo:has(> .hero-marca) { flex: 1; display: flex; flex-direction: column; }
main#conteudo > .hero-marca { flex: 1; display: flex; align-items: center; }
main#conteudo > .hero-marca > .largura { width: 100%; }
body:has(.faixa-titulo) main { flex: 1; width: 100%; box-sizing: border-box; align-content: start; }
.topo .botao-azul, .topo-in nav a.cta, .cartao form:has(#senha) .acoes button { border-radius: 999px; padding: .8rem 2.1rem; font-size: 1.12rem; border: 2px solid transparent; }
/* Cadastrar (aviso da empresa) e Personalizar: pílula, mesmo tamanho, alinhados pela borda direita do cartão */
#aviso-empresa .botao, body .fav-cab .pers { border-radius: 999px; min-width: 132px; padding: .6rem 1.5rem; font-size: 1rem; text-align: center; justify-content: center; }
body .fav-cab .pers { right: 21px; }
@media (max-width: 640px) {
  #aviso-empresa { flex-wrap: wrap; } #aviso-empresa > div { flex: 1 1 180px; min-width: 0; } #aviso-empresa .botao { width: 100%; }
  .fav-cab { flex-direction: column; gap: 0; } body .fav-cab .pers { position: static; transform: none; margin-bottom: 8px; right: auto; }
}

/* ===== Acabamento vivo =====
   Só estilo. Cada cor tem 3 tons (claro, médio, escuro) para o gradiente e o brilho; o Básico usa dourado, turquesa, verde, violeta e coral.
   O cliente troca estas variáveis pelos tons da paleta do logo dele (ferramentas/gera_marca.py) e recebe o mesmo acabamento. */
:root {
  --ouro-1: #F4D983; --ouro-2: #CDA64B; --ouro-3: #8F6D21;
  --turq-1: #86E3F2; --turq-2: #34B8D0; --turq-3: #1A7A8F;
  --verde-1: #AEE894; --verde-2: #4DAA30; --verde-3: #2C6D1B;
  --viol-1: #D6C9FF; --viol-2: #AA94F5; --viol-3: #5E43B3;
  --coral-1: #FFBCA8; --coral-2: #F08060; --coral-3: #A94A2F;
  --verm-1: #F4A29C; --verm-2: #D6453D; --verm-3: #8E2021;
  --sobre-cor: #0B1F3A;
  --destaque-cartao: var(--ouro-2);
  --brilho: linear-gradient(135deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .14) 38%, rgba(255, 255, 255, 0) 62%);
}

/* quadradinhos e ícones: gradiente com brilho, borda clara e relevo */
.cartao-icone { color: var(--sobre-cor); border: 1px solid rgba(255, 255, 255, .6); transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 -8px 14px rgba(0, 0, 0, .10), 0 6px 14px rgba(11, 31, 58, .22); }
.cartao-icone svg { stroke-width: 2.1; }
.ic-a { background: var(--brilho), linear-gradient(135deg, var(--ouro-1), var(--ouro-2) 55%, var(--ouro-3)); }
.ic-b { background: var(--brilho), linear-gradient(135deg, var(--turq-1), var(--turq-2) 55%, var(--turq-3)); }
.ic-c { background: var(--brilho), linear-gradient(135deg, var(--verde-1), var(--verde-2) 55%, var(--verde-3)); }
.ic-d { background: var(--brilho), linear-gradient(135deg, var(--viol-1), var(--viol-2) 55%, var(--viol-3)); }
.ic-e { background: var(--brilho), linear-gradient(135deg, var(--coral-1), var(--coral-2) 55%, var(--coral-3)); }
.ic-x { background: var(--brilho), linear-gradient(135deg, var(--verm-1), var(--verm-2) 55%, var(--verm-3)); color: #fff; }
.tile .cartao-icone { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -10px 18px rgba(0, 0, 0, .12), 0 8px 18px rgba(11, 31, 58, .26); }
.tile:hover .cartao-icone, a.acao:hover .cartao-icone, .mais a:hover .cartao-icone { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -10px 18px rgba(0, 0, 0, .12), 0 12px 24px rgba(11, 31, 58, .34); }

/* cartões: fundo com leve degradê, sombra suave e fio de destaque no topo */
.cartao, .cartao-menu, .acao-cx, .mais-cx, .card { background-image: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--marinho, #0B295E) 3%, #fff) 100%);
  border-top: 3px solid var(--destaque-cartao); box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 6px 18px rgba(11, 31, 58, .08); }
a.acao, .mais a { background-image: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--marinho, #0B295E) 3%, #fff) 100%); box-shadow: 0 4px 12px rgba(11, 31, 58, .07); }
a.acao:hover, .mais a:hover { box-shadow: 0 10px 22px rgba(11, 31, 58, .16); transform: translateY(-2px); }

/* botões principais: gradiente na cor do cliente (--azul), brilho no alto e relevo. Só no conteúdo da página: o menu do usuário e as gavetas do topo não entram. */
body .botao-azul, body .principal, body #aviso-empresa .botao, main .acoes > button:not(.suave):not(.perigo), main button[type=submit]:not(.suave):not(.perigo):not(.mini) {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, color-mix(in srgb, var(--azul, #1E5EA8) 86%, #fff), var(--azul, #1E5EA8) 50%, color-mix(in srgb, var(--azul, #1E5EA8) 80%, #000));
  border-color: color-mix(in srgb, var(--azul, #1E5EA8) 70%, #000);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 5px 12px color-mix(in srgb, var(--azul, #1E5EA8) 38%, transparent); transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; }
body .botao-azul:hover, body .principal:hover, body #aviso-empresa .botao:hover, main .acoes > button:not(.suave):not(.perigo):hover, main button[type=submit]:not(.suave):not(.perigo):not(.mini):hover {
  filter: brightness(1.08); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 16px color-mix(in srgb, var(--azul, #1E5EA8) 45%, transparent); }
button.suave, .botao-branco { background-image: linear-gradient(180deg, #fff 0%, var(--claro, #E0E8F3) 100%); box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(11, 31, 58, .10); }
body button.perigo, body .botao.perigo { background-image: linear-gradient(135deg, var(--verm-2), var(--verm-3)); color: #fff; border-color: var(--verm-3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 4px 10px rgba(142, 32, 33, .30); }
body button.perigo:hover, body .botao.perigo:hover { background-image: linear-gradient(135deg, var(--verm-1), var(--verm-2)); }

/* botões de navegação ("← Voltar ao Menu" e "← Página anterior"): um só desenho em todas as telas, pílula clara com a seta e o texto em marinho */
body .tp-voltar { display: inline-block; background-color: #DCE4F3; background-image: linear-gradient(180deg, #fff 0%, #DCE4F3 100%); color: var(--marinho, #0B295E); font-family: inherit; font-size: inherit; font-weight: 600; line-height: 1.5;
  border: 1px solid #b9d0e3; border-radius: 999px; padding: 9px 16px; text-decoration: none; text-align: center; white-space: nowrap; cursor: pointer; box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(11, 31, 58, .12); }
body .tp-voltar:hover { background-image: linear-gradient(180deg, #fff 0%, #c5dcee 100%); }
body .tp-voltar:focus-visible { outline: 3px solid var(--verde, #4F7FD9); outline-offset: 2px; }

/* tabelas: cabeçalho com degradê; etiquetas de situação com relevo leve */
th { background-image: linear-gradient(180deg, color-mix(in srgb, var(--marinho, #0B295E) 86%, #fff) 0%, var(--marinho, #0B295E) 100%); }
.selo { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }

/* tema escuro: os cartões ficam chapados, mas o fio dourado e o brilho dos ícones continuam */
html[data-tema="escuro"] body .cartao, html[data-tema="escuro"] body .cartao-menu, html[data-tema="escuro"] body .acao-cx, html[data-tema="escuro"] body .mais-cx { background-image: none; border-top-color: var(--destaque-cartao); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
html[data-tema="escuro"] body a.acao, html[data-tema="escuro"] body .mais a { background-image: none; }
html[data-tema="escuro"] body button.suave, html[data-tema="escuro"] body .botao-branco, html[data-tema="escuro"] body button.perigo, html[data-tema="escuro"] body .botao.perigo { background-image: none; }
html[data-tema="escuro"] body .tp-voltar { background-image: none; background-color: var(--claro); color: var(--d-titulo); border-color: var(--d-campo-borda); }
html[data-tema="escuro"] body .tp-voltar:hover { background-color: var(--d-hover); }
html[data-tema="escuro"] body .cartao-icone { filter: none; }

#tabela-pessoas-painel th, #tabela-pessoas-painel td { padding: 8px 6px; }
#tabela-pessoas-painel .selo { white-space: nowrap; }
#barra-painel input[type=date] { width: auto; }

/* ===== Painel: cartões e gráficos (02/11/2026) =====
   Gráficos em HTML e CSS puros (lib/GraficoHtml.php). Ano atual = cor da marca; ano anterior = cinza (ênfase); situação = vermelho, amarelo, laranja e verde fixos do sistema.
   Barras de no máximo 24 px com 4 px arredondados na ponta; grade de 1 px; texto sempre em cor de texto, nunca na cor da série. */
.so-impressao { display: none; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0 0; }
.kpi { border: 1px solid var(--linha, #C6C9CC); border-radius: 8px; padding: 10px 12px; background: #fff; }
.kpi b { display: block; font-size: 1.6rem; line-height: 1.25; color: var(--marinho, #0B295E); }
.kpi span { display: block; font-size: .92rem; color: var(--cinza, #5A6572); }
.kpi small { display: block; margin-top: 2px; font-size: .85rem; color: var(--cinza, #5A6572); }
.kpi a.kpi-link { display: block; color: inherit; text-decoration: none; }
.kpi a.kpi-link:hover b { text-decoration: underline; }
.viz-secao { margin: 22px 0 8px; font-size: 1.1rem; color: var(--marinho, #0B295E); }
.viz-grade-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 14px; }
.viz-cartao { min-width: 0; }
.viz-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.viz-cab > div { flex: 1 1 220px; min-width: 0; }
.viz-cab > a { flex: 0 0 auto; }
.viz-cab h3 { margin: 0; font-size: 1.02rem; color: var(--marinho, #0B295E); }
.viz-achado { margin: 2px 0 8px; font-size: .92rem; color: var(--cinza, #5A6572); }
.viz { --viz-atual: var(--azul, #163F8C); --viz-anterior: #8A949E; --viz-grade: #E1E0D9; --viz-eixo: #C3C2B7; --viz-texto: #52514E; --viz-h: 180px;
  --viz-vermelho: #D03B3B; --viz-amarelo: #FAB219; --viz-laranja: #EC835A; --viz-verde: #0CA30C; }
html[data-tema="escuro"] .viz { --viz-atual: var(--d-link, #86B6EF); --viz-grade: #2C2C2A; --viz-eixo: #383835; --viz-texto: #C3C2B7; }
.viz-legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; list-style: none; margin: 0 0 8px; padding: 0; font-size: .85rem; color: var(--viz-texto); }
.viz-mk { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.viz-s0 { background: var(--viz-atual); }
.viz-s1 { background: var(--viz-anterior); }
.viz-vermelho { background: var(--viz-vermelho); }
.viz-amarelo { background: var(--viz-amarelo); }
.viz-laranja { background: var(--viz-laranja); }
.viz-verde { background: var(--viz-verde); }
.viz-plot { position: relative; padding: 18px 0 0 38px; }
.viz-eixo, .viz-grade { position: absolute; left: 0; right: 0; top: 18px; height: var(--viz-h); pointer-events: none; }
.viz-eixo span { position: absolute; left: 0; width: 32px; text-align: right; font-size: .75rem; line-height: 1; color: var(--viz-texto); transform: translateY(50%); }
.viz-grade i { position: absolute; left: 38px; right: 0; height: 1px; background: var(--viz-grade); }
.viz-cols { position: relative; display: grid; gap: 2px; }
.viz-cat { display: flex; flex-direction: column; min-width: 0; }
.viz-barras { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: var(--viz-h); border-bottom: 1px solid var(--viz-eixo); }
.viz-barra { position: relative; display: block; flex: 1 1 0; min-width: 3px; max-width: 24px; border-radius: 4px 4px 0 0; }
.viz-barra em { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: 2px; font-size: .75rem; font-style: normal; font-weight: 600; line-height: 1.2; white-space: nowrap; color: var(--viz-texto); }
.viz-c { display: none; }
.viz-rot { margin-top: 4px; text-align: center; font-size: .75rem; line-height: 1.2; color: var(--viz-texto); }
.viz-h .viz-linha { display: grid; grid-template-columns: minmax(70px, 28%) 1fr auto; align-items: center; gap: 10px; margin: 7px 0; }
.viz-nome { font-size: .9rem; overflow-wrap: anywhere; }
.viz-pilha { display: flex; height: 18px; }
.viz-seg { display: block; height: 100%; border-radius: 3px; margin-right: 2px; }
.viz-seg:last-child { margin-right: 0; }
.viz-trilho { height: 14px; border-radius: 4px; background: var(--viz-grade); }
.viz-barra-h { display: block; height: 100%; border-radius: 4px; }
.viz-total { min-width: 2.2em; text-align: right; font-size: .9rem; font-weight: 600; }
.viz-tabela > summary { min-height: 36px; display: flex; align-items: center; margin-top: 6px; font-size: .9rem; color: var(--azul, #163F8C); cursor: pointer; }
html[data-tema="escuro"] .kpi { background: var(--d-cartao, #1c2127); border-color: var(--d-campo-borda, #4a5662); }
html[data-tema="escuro"] .kpi b, html[data-tema="escuro"] .viz-cab h3, html[data-tema="escuro"] .viz-secao { color: var(--d-titulo, #fff); }
html[data-tema="escuro"] .viz-tabela > summary { color: var(--d-link, #86B6EF); }
@media (max-width: 640px) {
  .viz-plot { padding-left: 30px; }
  .viz-eixo span { width: 25px; }
  .viz-grade i { left: 30px; }
  .viz-cols { gap: 1px; }
  .viz-l { display: none; }
  .viz-c { display: inline; }
}
@media print {
  body:has(#painel-analise) * { visibility: hidden !important; }
  body:has(#painel-analise) #painel-analise, body:has(#painel-analise) #painel-analise * { visibility: visible !important; }
  #painel-analise { position: absolute; left: 0; top: 0; width: 100%; }
  #painel-analise .so-impressao { display: block !important; }
  #painel-analise .sem-impressao { display: none !important; }
  #painel-analise .viz-cartao, #painel-analise .kpi { break-inside: avoid; }
  #painel-analise .viz-grade-cartoes { grid-template-columns: 1fr 1fr; }
  #painel-analise * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ===== Celular (02/11/2026) =====
   Só vale em tela estreita; o computador não muda. Alvo de toque de 44 px, listas em cartões e barra de ações fixa no pé.
   Tabela com a classe "cartoes" vira uma pilha de cartões (o cabeçalho some; a célula com data-rot leva o próprio rótulo); com "compacta" só fica mais apertada. */
.so-celular { display: none; }
details.recolhe-celular > summary { display: none; }
@media (max-width: 640px) {
  .so-celular { display: flex; }
  details.recolhe-celular > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 16px; border: 1px solid var(--linha, #C6C9CC); border-radius: 999px; background: var(--claro, #DCE4F3); color: var(--marinho, #0B295E); font-weight: 600; cursor: pointer; list-style: none; }
  details.recolhe-celular > summary::-webkit-details-marker { display: none; }
  details.recolhe-celular > summary::after { content: '\25BE'; margin-left: 10px; }
  details.recolhe-celular[open] > summary::after { content: '\25B4'; }
  details.recolhe-celular[open] > summary { margin-bottom: 8px; }
  html[data-tema="escuro"] details.recolhe-celular > summary { background: var(--d-hover, #28313a); color: var(--d-titulo, #fff); border-color: var(--d-campo-borda, #4a5662); }
  .topo-app .tp-btn, .topo-app .tp-logo, body .tp-voltar { min-height: 44px; min-width: 44px; box-sizing: border-box; }
  .topo-app .tp-btn { justify-content: center; }
  main .botao, main button:not(.filtro-col), main select, main input[type=text], main input[type=search], main input[type=date], main input[type=number], main input[type=file], main textarea { min-height: 44px; }
  main input[type=checkbox] { width: 24px; height: 24px; }
  main a.selo { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; box-sizing: border-box; }
  #painel-numeros { grid-template-columns: 1fr 1fr; gap: 10px; }
  #painel-numeros > div { border: 1px solid var(--linha, #C6C9CC); border-radius: 12px; padding: 10px 12px; }
  #painel-numeros > #painel-sem-registro { grid-column: 1 / -1; }
  .abas-cor { gap: 8px; overflow-x: auto; flex-wrap: nowrap; padding: 6px 0 10px; margin: 6px 0 4px; }
  .abas-cor a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 2px solid transparent; font-weight: 600; text-decoration: none; white-space: nowrap; }
  .abas-cor a[aria-current="true"] { border-color: var(--marinho, #0B295E); }
  .tabela.cartoes { overflow: visible; }
  .tabela.cartoes table, .tabela.cartoes tbody { display: block; width: 100%; }
  .tabela.cartoes thead { display: none; }
  .tabela.cartoes tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; border: 1px solid var(--linha, #C6C9CC); border-radius: 12px; padding: 10px 12px; margin: 0 0 10px; }
  .tabela.cartoes td { display: block; border: 0; padding: 0; width: auto; }
  .tabela.cartoes tr, .tabela.cartoes td { background: transparent !important; }
  .tabela.cartoes td:first-child { flex: 1 1 100%; font-weight: 700; }
  .tabela.cartoes td.acoes-cel { flex: 1 1 100%; white-space: normal; display: flex; flex-wrap: wrap; gap: 8px; }
  .tabela.cartoes tr.mais-oculta { display: none; }
  .mais-celular { margin: 4px 0 10px; }
  .filtros-celular { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 10px; }
  .filtros-celular button { flex: 0 0 auto; }
  #quadro-sem td:nth-child(2), #quadro-sem td:nth-child(3) { display: none; }
  .tabela.cartoes td[data-rot]::before { content: attr(data-rot) ': '; font-weight: 600; color: var(--cinza, #5A6572); font-size: .85rem; }
  #tabela-pessoas-painel tr { display: grid; grid-template-columns: 36px 1fr auto; gap: 2px 10px; align-items: start; }
  #tabela-pessoas-painel td { grid-column: 2 / 4; font-size: .95rem; }
  #tabela-pessoas-painel td:nth-child(1) { grid-column: 1; grid-row: 1 / span 6; padding-top: 4px; font-weight: 400; }
  #tabela-pessoas-painel td:nth-child(2) { grid-column: 2 / 4; grid-row: 1; font-weight: 700; }
  #tabela-pessoas-painel td:nth-child(3) { grid-column: 2 / 4; grid-row: 2; text-align: left; }
  #tabela-pessoas-painel td:nth-child(4) { order: 1; }
  #tabela-pessoas-painel td:nth-child(5) { order: 2; }
  #tabela-pessoas-painel td:nth-child(8), #tabela-pessoas-painel td:nth-child(9), #tabela-pessoas-painel td:nth-child(10) { order: 3; }
  #tabela-pessoas-painel td:nth-child(6), #tabela-pessoas-painel td:nth-child(7) { display: none; }
  #tabela-pessoas-painel td[data-rot] { font-size: .85rem; color: var(--cinza, #5A6572); }
  .tabela.compacta table { font-size: .8rem; }
  .tabela.compacta th, .tabela.compacta td { padding: 6px 4px; }
  #barra-painel { position: sticky; bottom: 0; z-index: 20; flex-wrap: nowrap; overflow-x: auto; background: #fff; padding: 8px 0; border-top: 1px solid var(--linha, #C6C9CC); }
  #barra-painel > * { flex: 0 0 auto; }
  #barra-painel > button[value="montar_turma"] { order: 1; }
  #barra-painel > button[value="exportar_painel"] { order: 2; }
  #barra-painel > label { order: 3; margin: 0; align-self: center; }
  #barra-painel > input[type=date] { order: 4; width: auto; }
  #barra-painel > button[value="agendar_turma"] { order: 5; }
  #barra-painel > #painel-contagem { order: 6; align-self: center; white-space: nowrap; }
  html[data-tema="escuro"] #barra-painel { background: var(--d-cartao, #1c2127); }
}