/* base.css - casca do TemJus (PUB-CASCA-133, 29/09/2026).
Origem: PUB-DESIGN-132, mockups/base.css, adaptada ao HTML real de templates/base.html.
Depende só de tokens.css, carregado antes. Vem DEPOIS de style.css: onde as duas desenham a
mesma coisa, esta ganha; o que ela não toca continua como está.
Regras globais só para a tipografia base, as cores da casca, o foco visível e os links.
Nenhuma regra global para table, button, input ou cartões: cada tela passa ao sistema novo na
própria sessão (PUB-DESIGN-132, 4_proposta.md, seção 5), e o style= das telas de hoje continua
valendo. A única regra de célula é o tamanho da letra (td a 15 px, corpo da proposta).
Classes novas, prontas para as sessões das telas: selos de estado (.selo-prazo, .selo-urgente,
.selo-atencao, .selo-ok, .selo-neutro, .selo-historico, .selo-ia, .selo-tipo), etiqueta de prazo
(.etiqueta-prazo) e avisos (.aviso-neutro, .aviso-prazo, .aviso-urgente, .aviso-atencao,
.aviso-ok, .aviso-ia), sempre com ícone e texto. Os nomes curtos da proposta (.selo, .aviso,
.avisos, .prazo, .topo, .conteudo, .marca) já existem em templates de hoje e por isso não são
usados aqui: cada variante é completa sozinha.
Ícones: sprite /static/img/icones.svg (35 símbolos), . */
/* ---------- Tipografia base, fundo e texto ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
font-family: var(--fonte-base);
font-size: var(--texto-base);
line-height: var(--entrelinha-base);
color: var(--cor-texto);
background: var(--cor-fundo);
font-variant-numeric: tabular-nums;
}
td { font-size: var(--texto-base); } /* style.css:101 fixava 14px */
th { font-size: var(--texto-sm); } /* 13px, rótulo de coluna (igual a hoje) */
code, kbd, samp, pre { font-family: var(--fonte-mono); }
/* ---------- Links ---------- */
/* :where() deixa a especificidade igual à de `a`: .btn, .nav-item e o style= das telas continuam ganhando. */
a { color: var(--cor-acao); text-underline-offset: 2px; }
a:where(:hover) { color: var(--cor-acao-hover); }
/* ---------- Foco visível em tudo que é interativo (WCAG 2.4.7) ---------- */
/* !important porque style.css (.form-group input, .form-input) e o style= de telas tiram o outline. */
:focus-visible { outline: 2px solid var(--cor-foco) !important; outline-offset: 2px !important; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0 !important; }
#conteudo:focus, #conteudo:focus-visible { outline: none !important; } /* alvo do "pular para o conteúdo" */
/* ---------- Ícones e utilidades da casca ---------- */
svg.i { width: var(--icone); height: var(--icone); flex: 0 0 auto; vertical-align: -0.2em; }
svg.i-sm { width: var(--icone-sm); height: var(--icone-sm); flex: 0 0 auto; vertical-align: -0.15em; }
.visualmente-oculto {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular-conteudo {
position: absolute; left: var(--esp-2); top: -200px; z-index: 1000;
padding: var(--esp-2) var(--esp-3); background: var(--cor-superficie); color: var(--cor-acao);
border: 2px solid var(--cor-foco); border-radius: var(--raio-md); font-weight: var(--peso-forte);
}
.pular-conteudo:focus { top: var(--esp-2); }
/* ---------- Barra lateral clara (estrutura e comportamento no celular: style.css) ---------- */
.sidebar { background: var(--cor-nav-fundo); color: var(--cor-nav-texto); border-right: 1px solid var(--cor-nav-borda); }
.sidebar-header {
display: flex; align-items: center; gap: var(--esp-2);
padding: var(--esp-4) var(--esp-4) var(--esp-3); border-bottom: 1px solid var(--cor-nav-borda);
}
.sidebar-header h2 { color: var(--cor-nav-texto); font-size: var(--texto-lg); font-weight: var(--peso-forte); line-height: var(--entrelinha-apertada); }
.sidebar-marca {
flex: 0 0 auto; width: 28px; height: 28px; border-radius: 7px; display: inline-grid; place-items: center;
background: var(--cor-nav-marca); color: #ffffff; font-size: 13px; font-weight: 700; letter-spacing: .5px;
}
.sidebar-nav { padding: var(--esp-2); }
.sidebar .nav-item {
display: flex; align-items: center; gap: var(--esp-3); min-height: var(--controle-alt);
padding: var(--esp-1) var(--esp-3); border-radius: var(--raio-md);
color: var(--cor-nav-texto); font-size: var(--texto-base); line-height: var(--entrelinha-apertada);
text-decoration: none; transition: background var(--transicao);
}
.sidebar .nav-item:hover { background: var(--cor-nav-hover-fundo); color: var(--cor-nav-texto); }
.sidebar .nav-item.active, .sidebar .nav-item[aria-current="page"] {
background: var(--cor-nav-ativo-fundo); color: var(--cor-nav-ativo-texto); font-weight: var(--peso-forte);
}
.sidebar .nav-item.nav-sub { min-height: 32px; padding-left: calc(var(--esp-3) + var(--icone) + var(--esp-3)); }
/* PUB-FUSAO-201: item subordinado a outro do mesmo grupo (Intimacoes sob Distribuicao), um recuo a mais. */
.sidebar .nav-item.nav-sub.nav-sub-2 { padding-left: calc(var(--esp-3) + var(--icone) + var(--esp-3) + var(--esp-4)); }
.sidebar .nav-item > svg.i { color: var(--cor-nav-texto-2); }
.sidebar .nav-item.active > svg.i, .sidebar .nav-item[aria-current="page"] > svg.i { color: inherit; }
.nav-icone-vazio { flex: 0 0 auto; width: var(--icone); }
.nav-rotulo { min-width: 0; }
.sidebar .nav-group > summary { list-style: none; cursor: pointer; }
.sidebar .nav-group > summary::-webkit-details-marker { display: none; }
.sidebar .nav-group.contem-ativo > summary { font-weight: var(--peso-forte); }
.nav-seta { margin-left: auto; color: var(--cor-nav-texto-2); transform: rotate(-90deg); transition: transform var(--transicao); }
.nav-group[open] > summary .nav-seta { transform: none; }
.sidebar-footer { padding: var(--esp-3) var(--esp-4); border-top: 1px solid var(--cor-nav-borda); font-size: var(--texto-sm); }
.sidebar .user-info strong { color: var(--cor-nav-texto); font-size: var(--texto-base); }
.sidebar-footer .meu-perfil { display: block; margin-top: var(--esp-1); font-size: var(--texto-sm); }
/* "Sair" (PUB-ESCURO-141): o .btn-outline do style.css pinta texto e borda com as cores antigas e
sumiria na barra escura; aqui ele passa às cores da barra, nos dois temas (no claro, quase iguais às
de antes: texto #2b2925 no lugar de #334155, borda #e3e0d8 no lugar de #e2e8f0). */
.sidebar-footer .btn-outline { color: var(--cor-nav-texto); background: transparent; border-color: var(--cor-nav-borda); }
.sidebar-footer .btn-outline:hover { color: var(--cor-nav-texto); background: var(--cor-nav-hover-fundo); }
/* Selo do perfil (PUB-ESCURO-141): os .badge-{perfil} do style.css são pares claros fixos (o de advogado
dava 3,00:1) e acendiam na barra escura; na casca ele passa às cores da barra, nos dois temas. */
.sidebar-footer .user-info .badge { color: var(--cor-nav-texto); background: var(--cor-nav-hover-fundo); }
/* ---------- Cabeçalho da casca: título da tela, busca geral, densidade, sino ---------- */
.topbar {
display: flex; align-items: center; gap: var(--esp-3); min-height: var(--altura-topo);
padding: var(--esp-2) var(--esp-6); background: var(--cor-superficie);
border-bottom: 1px solid var(--cor-borda); box-shadow: none;
}
.topbar h1 {
min-width: 0; margin: 0; font-size: var(--texto-xl); font-weight: var(--peso-forte);
line-height: var(--entrelinha-apertada); color: var(--cor-texto);
}
.topbar .menu-toggle { color: var(--cor-texto); line-height: 0; }
.busca-geral { position: relative; margin-left: auto; }
.busca-geral > svg.i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--cor-texto-2); pointer-events: none; }
.busca-geral input {
width: 300px; max-width: 45vw; min-height: var(--controle-alt); padding: 0 var(--esp-3) 0 34px;
font: inherit; font-size: var(--texto-base); color: var(--cor-texto); background: var(--cor-superficie);
border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-md);
}
.busca-geral input::placeholder { color: var(--cor-texto-3); }
.casca-suspenso {
position: absolute; right: 0; top: calc(100% + 4px); max-width: 90vw; overflow: auto;
background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-lg); box-shadow: var(--sombra-2);
}
.busca-geral .casca-suspenso { width: 420px; max-height: 420px; z-index: 950; }
.sino-alertas .casca-suspenso { width: 320px; max-width: 80vw; z-index: 900; }
.casca-suspenso-rodape { display: block; padding: var(--esp-3); text-align: center; font-size: var(--texto-sm); border-top: 1px solid var(--cor-borda); }
.busca-grupo { padding: var(--esp-1) var(--esp-3); font-size: var(--texto-sm); font-weight: var(--peso-forte); color: var(--cor-texto-2); background: var(--cor-superficie-2); }
.busca-item { display: block; padding: var(--esp-2) var(--esp-3); border-bottom: 1px solid var(--cor-borda); font-size: var(--texto-sm); color: var(--cor-texto); text-decoration: none; }
.busca-item:hover { background: var(--cor-acao-fundo); color: var(--cor-texto); }
.busca-item strong { display: block; font-weight: var(--peso-forte); }
.busca-item span { font-size: var(--texto-xs); color: var(--cor-texto-2); }
.busca-nota { padding: var(--esp-3); font-size: var(--texto-sm); color: var(--cor-texto-2); }
.btn-icone {
position: relative; width: var(--controle-alt); height: var(--controle-alt); display: inline-grid; place-items: center;
padding: 0; border: 0; border-radius: var(--raio-md); background: transparent; color: var(--cor-texto); cursor: pointer;
}
.btn-icone:hover { background: var(--cor-superficie-2); }
.sino-badge {
position: absolute; top: 1px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px;
border-radius: var(--raio-pill); background: var(--cor-urgente); color: var(--cor-acao-texto); /* branco no claro, escuro no escuro */
font-size: var(--texto-xs); font-weight: var(--peso-forte); line-height: 18px; text-align: center;
}
/* C8 (pacote pub_tela, 11/2026): o numero da fila "A conferir" ao lado do item Publicacoes do menu e no resumo
do grupo. O par de tokens do .sino-badge, medido nos dois temas; nasce escondido e o script de base.html so
o mostra com numero maior que zero. */
.nav-contador {
display: inline-block; flex: 0 0 auto; margin-left: auto; min-width: 20px; height: 18px; padding: 0 6px;
border-radius: var(--raio-pill); background: var(--cor-urgente); color: var(--cor-acao-texto);
font-size: var(--texto-xs); font-weight: var(--peso-forte); line-height: 18px; text-align: center;
}
.nav-contador[hidden] { display: none; }
.nav-contador:not([hidden]) + .nav-seta { margin-left: 0; }
.btn-densidade {
display: inline-flex; align-items: center; gap: var(--esp-1); min-height: var(--controle-alt-sm); padding: 0 var(--esp-2);
font: inherit; font-size: var(--texto-sm); color: var(--cor-texto); background: var(--cor-superficie);
border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-md); cursor: pointer; white-space: nowrap;
}
.btn-densidade:hover { background: var(--cor-superficie-2); }
.btn-densidade[aria-pressed="true"] { background: var(--cor-acao-fundo); border-color: var(--cor-acao); color: var(--cor-acao); font-weight: var(--peso-forte); }
/* ---------- Tema (PUB-ESCURO-141): botão "Escuro", o mesmo desenho do de densidade ---------- */
.btn-tema {
display: inline-flex; align-items: center; gap: var(--esp-1); min-height: var(--controle-alt-sm); padding: 0 var(--esp-2);
font: inherit; font-size: var(--texto-sm); color: var(--cor-texto); background: var(--cor-superficie);
border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-md); cursor: pointer; white-space: nowrap;
}
.btn-tema:hover { background: var(--cor-superficie-2); }
.btn-tema[aria-pressed="true"] { background: var(--cor-acao-fundo); border-color: var(--cor-acao); color: var(--cor-acao); font-weight: var(--peso-forte); }
/* ---------- Atalhos de teclado (PUB-ATALHOS-140): botão, ajuda (tecla ?) e linha ativa ---------- */
/* O botão tem o desenho do de densidade; a ajuda é um