/* --------------------------------------------------------------------------- Sistema visual do Clipping Jurídico. É o mesmo do app do Hub News — a casa tem um padrão de produto logado e não faz sentido cada sistema inventar o seu. Laranja #FF6F1A, Plus Jakarta Sans, cards de 16px, pill reservado a botão e chip, e a sombra como única forma de profundidade. A regra que mais importa é a do gradiente: ele aparece no MÁXIMO duas ou três vezes por tela — CTA primário, marcador da nav ativa e a barra de acento de um card em destaque. Nunca em texto, nunca em fundo de card. É essa economia que separa um produto de um "gradiente de IA". Duas coisas do Clipping sobrevivem à troca, e de propósito: * o amarelo marca-texto continua sendo o realce do termo casado dentro do ato (). É o gesto que dá nome ao produto. O que saiu foi o amarelo como cor de interface. * a serifa continua no corpo do ato. É documento oficial, e ler ementa de diário em sans é pior. --------------------------------------------------------------------------- */ :root { color-scheme: light; --papel:#FFFFFF; --fundo:#F7F6F8; --fundo-2:#F5F4F6; --tinta:#171618; --tinta-2:#6E6B76; --tinta-3:#6F6C77; --linha:#EAE7EE; --linha-forte:#DAD6E0; --marca:#FF6F1A; --marca-fraca:rgba(255,111,26,.12); /* Versão da marca para fundo COM TEXTO BRANCO: o laranja puro dá 2,8:1 e o WCAG AA pede 4,5:1. Mesma família, mais fechada (4,8:1); o laranja vivo continua valendo para ícone, barra e realce, onde não há texto por cima. */ --marca-ac:#C8480C; --grad-ac:linear-gradient(135deg,#C8480C 0%,#D6336C 50%,#8A4DFF 100%); /* Semânticas. Cor aqui significa alguma coisa; não é decoração. */ --ok:#047857; --ok-f:rgba(16,185,129,.15); --aten:#B45309; --aten-f:rgba(245,158,11,.15); --erro:#B91C1C; --erro-f:rgba(239,68,68,.15); --ia:#7C3AED; --ia-f:rgba(138,77,255,.15); --dado:#1D4ED8; --dado-f:rgba(77,168,255,.16); /* Tipos de termo monitorado — mantidos, porque o cliente já os associa. */ --cnpj:#0F766E; --cpf:#7C3AED; --texto:#1D4ED8; --cnpj-fraco:rgba(15,118,110,.12); --cpf-fraco:rgba(124,58,237,.12); --texto-fraco:rgba(29,78,216,.12); /* Marca-texto: só o realce do termo dentro do ato. */ --realce:#FFE066; --realce-forte:#B45309; --realce-fraco:#FFF8DB; --sobre-realce:#171618; --grad:linear-gradient(135deg,#FF6F1A 0%,#FF5B86 50%,#8A4DFF 100%); --grad-h:linear-gradient(90deg,#FF6F1A 0%,#FF5B86 50%,#8A4DFF 100%); --grad-soft:linear-gradient(135deg,rgba(255,111,26,.12),rgba(138,77,255,.12)); --r:16px; --r-p:12px; --sombra:0 2px 12px rgba(0,0,0,.06); --sombra-alta:0 6px 24px rgba(0,0,0,.10); --brilho:0 4px 18px rgba(255,111,26,.28); --t-micro:11px; --t-mini:13px; --t-corpo:14px; --t-leitura:15px; --t-titulo:18px; --t-tela:24px; --t-numero:30px; --ui:"Plus Jakarta Sans",-apple-system,"Segoe UI",Roboto,sans-serif; /* Source Serif 4 no lugar de Georgia. Georgia é fonte de sistema desenhada para tela de 1996 e aparece diferente em cada máquina — o mesmo ato tinha três aparências. A Source Serif tem eixo óptico (`opsz`), então o título de um ato e o corpo dele usam desenhos próprios em vez de um só esticado, que é o que dá ao texto de diário a aparência de documento e não de post. */ --serifa:"Source Serif 4",Georgia,"Iowan Old Style","Times New Roman",serif; --mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,monospace; /* Medida de leitura do corpo do ato. Linha de diário oficial passa fácil de 140 caracteres numa tela larga, e a partir de ~95 o olho perde a volta da linha. É o ajuste isolado que mais muda a sensação de "feito por gente". */ --medida:78ch; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --papel:#171419; --fundo:#0F0E11; --fundo-2:#262329; --tinta:#F5F4F6; --tinta-2:#9E9BA6; --tinta-3:#8B8894; --linha:#2D2A32; --linha-forte:#3D3945; --marca:#FF8A3D; --marca-fraca:rgba(255,138,61,.15); --ok:#34D399; --ok-f:rgba(16,185,129,.18); --aten:#FBBF24; --aten-f:rgba(245,158,11,.18); --erro:#F87171; --erro-f:rgba(239,68,68,.18); --ia:#C4B5FD; --ia-f:rgba(138,77,255,.20); --dado:#93C5FD; --dado-f:rgba(77,168,255,.20); --cnpj:#5EEAD4; --cpf:#C4B5FD; --texto:#93C5FD; --cnpj-fraco:rgba(94,234,212,.13); --cpf-fraco:rgba(196,181,253,.13); --texto-fraco:rgba(147,197,253,.13); --realce:#FFD43B; --realce-forte:#FBBF24; --realce-fraco:#2E2A17; --sombra:0 2px 12px rgba(0,0,0,.40); --sombra-alta:0 6px 24px rgba(0,0,0,.55); } } :root[data-theme="dark"] { color-scheme: dark; --papel:#171419; --fundo:#0F0E11; --fundo-2:#262329; --tinta:#F5F4F6; --tinta-2:#9E9BA6; --tinta-3:#7C7986; --linha:#2D2A32; --linha-forte:#3D3945; --marca:#FF8A3D; --marca-fraca:rgba(255,138,61,.15); --ok:#34D399; --ok-f:rgba(16,185,129,.18); --aten:#FBBF24; --aten-f:rgba(245,158,11,.18); --erro:#F87171; --erro-f:rgba(239,68,68,.18); --ia:#C4B5FD; --ia-f:rgba(138,77,255,.20); --dado:#93C5FD; --dado-f:rgba(77,168,255,.20); --cnpj:#5EEAD4; --cpf:#C4B5FD; --texto:#93C5FD; --cnpj-fraco:rgba(94,234,212,.13); --cpf-fraco:rgba(196,181,253,.13); --texto-fraco:rgba(147,197,253,.13); --realce:#FFD43B; --realce-forte:#FBBF24; --realce-fraco:#2E2A17; --sombra:0 2px 12px rgba(0,0,0,.40); --sombra-alta:0 6px 24px rgba(0,0,0,.55); } *,*::before,*::after { box-sizing:border-box; } html { -webkit-text-size-adjust:100%; } body { margin:0; background:var(--fundo); color:var(--tinta); font:var(--t-corpo)/1.55 var(--ui); -webkit-font-smoothing:antialiased; display:grid; grid-template-columns:236px 1fr; min-height:100vh; } :focus-visible { outline:none; box-shadow:0 0 0 2px var(--papel),0 0 0 4px var(--tinta); border-radius:6px; } /* Link "pular para o conteúdo": só aparece quando recebe o foco do teclado. Some enquanto a tela de login está aberta, porque o destino ainda está oculto. */ .pular { position:absolute; left:8px; top:-60px; z-index:100; background:var(--tinta); color:var(--papel); padding:10px 16px; border-radius:var(--r-p); font-weight:600; text-decoration:none; } .pular:focus { top:8px; } body:has(#principal.oculto) .pular { display:none; } [role="button"]:not(button) { cursor:pointer; } @media (prefers-reduced-motion: reduce) { *,*::before,*::after { transition:none !important; animation:none !important; } } /* ------------------------------------------------------------------ navegação */ .lateral { background:var(--papel); border-right:1px solid var(--linha); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; padding:16px 14px; /* A altura é fixa (100vh) mas o conteúdo (logo + busca + menu + rodapé) não era garantido a caber nela: com o menu de administrador (mais itens) ou uma janela baixa, o excesso vazava sem barra nenhuma -- ficava invisível, não rolável. `overflow:hidden` aqui e `overflow-y:auto` só no `.nav` abaixo faz logo e rodapé (usuário, tema, sair) sempre visíveis, e só o menu do meio ganha rolagem, e só quando realmente não cabe. */ overflow:hidden; } /* Empilhado, não lado a lado: o logotipo é 3,7:1 e, ao lado do nome do produto, sobrava largura para nenhum dos dois — "Clipping Jurídico" quebrava em duas linhas e a marca ficava espremida. */ .marca { display:flex; flex-direction:column; align-items:flex-start; gap:9px; padding:2px 8px 18px; } .marca .selo { display:block; height:34px; width:auto; } .marca a { display:block; border-radius:var(--r-p); } .marca a:focus-visible { outline:2px solid var(--marca); outline-offset:3px; } .marca > span { display:block; } /* O logotipo é escuro. No tema escuro, inverter a luminância e girar o matiz de volta preserva o laranja e o roxo dos pingos — só clarear apagaria a marca. */ :root[data-theme="dark"] .marca .selo { filter:invert(1) hue-rotate(180deg); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .marca .selo { filter:invert(1) hue-rotate(180deg); } } .marca b { font-size:var(--t-corpo); font-weight:700; letter-spacing:-.02em; display:block; line-height:1.2; } .marca small { display:block; font-size:var(--t-micro); color:var(--tinta-3); font-weight:500; } .nav { display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; margin:0 -6px; padding:2px 6px; } .nav a { position:relative; display:flex; align-items:center; gap:10px; padding:8px 10px 8px 12px; border-radius:var(--r-p); color:var(--tinta-2); text-decoration:none; font-size:var(--t-corpo); font-weight:500; transition:background .15s,color .15s; } .nav a:hover { background:var(--fundo-2); color:var(--tinta); } /* Gradiente aparição 1 de 3: o marcador da nav ativa. */ .nav a[aria-current="page"] { background:var(--grad-soft); color:var(--tinta); font-weight:600; } .nav a[aria-current="page"]::before { content:""; position:absolute; left:-2px; top:50%; transform:translateY(-50%); width:4px; height:16px; border-radius:999px; background:var(--grad); } .nav a[aria-current="page"] svg { color:var(--marca); } .nav a svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.6; flex:0 0 auto; } .nav-sec { font:600 var(--t-micro) var(--ui); text-transform:uppercase; letter-spacing:.06em; color:var(--tinta-3); padding:18px 12px 7px; } .lateral .rodape { margin-top:auto; padding:12px 10px 0; border-top:1px solid var(--linha); font-size:var(--t-mini); color:var(--tinta-3); display:flex; flex-direction:column; gap:8px; } .lateral .rodape b { display:block; color:var(--tinta); font-size:var(--t-mini); font-weight:600; } .lateral .rodape a { color:var(--tinta-2); text-decoration:none; } .lateral .rodape a:hover { color:var(--tinta); } /* "Ver como": faixa fixa no topo enquanto o administrador está na conta do cliente. */ .faixa-ver-como { position:fixed; top:0; left:0; right:0; z-index:80; display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; padding:6px 12px; background:var(--marca-ac); color:#fff; font:600 var(--t-mini) var(--ui); } .faixa-ver-como[hidden] { display:none; } .faixa-ver-como button { background:#fff; color:#111; border-color:transparent; padding:3px 12px; } body.com-faixa { padding-top:34px; } body.com-faixa .lateral { top:34px; height:calc(100vh - 34px); } body.com-faixa .barra-mob { top:34px; } /* ------------------------------------------- casca: marca, sino e recolher Mesmo padrão do PressHub. O menu NÃO rola: os itens encolhem até caber e, se a janela for baixa demais para isso, a barra deixa de ser fixa e a página passa a ter pelo menos a altura dela (ver o `max-height` abaixo). */ .marca { flex-direction:column; align-items:stretch; gap:2px; padding:2px 2px clamp(6px, 2vh - 6px, 14px); } .marca-topo { display:flex; align-items:center; gap:4px; flex-wrap:nowrap; } .marca-link { display:flex; align-items:center; gap:9px; flex:1 1 auto; min-width:0; text-decoration:none; color:var(--tinta); border-radius:var(--r-p); padding:2px 4px; } .marca-link:focus-visible { outline:2px solid var(--marca); outline-offset:2px; } .marca-link img { width:30px; height:30px; flex:0 0 auto; border-radius:8px; display:block; } .marca-link b { font-size:var(--t-corpo); font-weight:700; letter-spacing:-.02em; line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .marca small { padding-left:8px; } .botao-icone { all:unset; box-sizing:border-box; position:relative; cursor:pointer; width:30px; height:30px; border-radius:8px; display:grid; place-items:center; color:var(--tinta-2); flex:0 0 auto; } .botao-icone:hover { background:var(--fundo-2); color:var(--tinta); } .botao-icone:focus-visible { box-shadow:0 0 0 2px var(--marca); } .botao-icone svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; } .sino { position:relative; } .sino-ponto { position:absolute; top:-3px; right:-3px; min-width:17px; height:17px; padding:0 4px; border-radius:99px; background:var(--marca-ac); color:#fff; font:700 10px/17px var(--ui); text-align:center; } .sino-lista { position:fixed; z-index:90; width:min(340px, calc(100vw - 32px)); max-height:min(70vh, 460px); overflow:auto; background:var(--papel); border:1px solid var(--linha-forte); border-radius:12px; box-shadow:var(--sombra-alta); } .sino-topo { padding:12px 16px 8px; border-bottom:1px solid var(--linha); font-weight:700; } .sino-item { display:flex; flex-direction:column; gap:2px; padding:10px 16px; border-bottom:1px solid var(--linha); color:var(--tinta); text-decoration:none; } .sino-item:hover { background:var(--fundo-2); } .sino-item.novo { border-left:3px solid var(--marca); padding-left:13px; } .sino-item:last-child { border-bottom:0; } .sino-item small { color:var(--tinta-3); font-size:var(--t-micro); } /* O menu cabe sem rolar: cada item encolhe entre 22 e 38px. */ .lateral { padding-block:clamp(8px, 2vh - 4px, 16px); } .nav { overflow:hidden; gap:0; } .nav a { flex:1 1 24px; min-height:22px; max-height:38px; padding-block:0; line-height:1.15; } .nav-sec { flex:0 0 auto; padding-top:clamp(6px, 1.6vh - 4px, 16px); padding-bottom:3px; } .busca-lateral { flex:0 0 auto; margin-bottom:clamp(2px, 1vh - 2px, 10px); } .lateral .rodape { gap:6px; padding-top:8px; } .rodape-nome b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rodape-acoes { display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center; } .rodape-quebra { flex-basis:100%; height:0; } .btn-tour span { white-space:nowrap; } .lateral .rodape .btn-tour { color:var(--tinta-2); } .lateral .rodape .btn-tour:hover { color:var(--marca); } @media (max-height: 860px) { .nav a { font-size:var(--t-mini); } .nav a svg { width:16px; height:16px; } .marca small { display:none; } } @media (max-height: 760px) { .nav-sec { font-size:10px; padding-top:5px; padding-bottom:2px; } } /* Janela baixa demais até para o menu comprimido: a barra deixa de ser fixa e a página cresce com ela. Rolar o menu escondido dentro de si é o que se evita. */ @media (max-height: 640px) and (min-width: 901px) { .lateral { position:relative; height:auto; min-height:100vh; overflow:visible; } .nav { overflow:visible; flex:1 0 auto; } .nav a { flex:0 0 auto; min-height:28px; } } /* Menu recolhido: só ícones. A escolha fica neste navegador. */ body.recolhida { grid-template-columns:68px 1fr; } body.recolhida .lateral { padding-inline:10px; } body.recolhida .marca-link b, body.recolhida .marca small, body.recolhida .busca-lateral { display:none; } body.recolhida .marca-topo { flex-direction:column; align-items:center; gap:8px; } body.recolhida .marca-link { flex:0 0 auto; padding:0; } body.recolhida .nav a { justify-content:center; padding-inline:0; } body.recolhida .nav a span { display:none; } body.recolhida .nav a .cadeado { position:absolute; right:4px; top:4px; margin:0; width:10px; height:10px; } body.recolhida .nav a[aria-current="page"]::before { left:-6px; } body.recolhida .nav-sec { font-size:0; padding:6px 0 2px; border-top:1px solid var(--linha); margin-top:4px; } body.recolhida .rodape-nome { display:none; } body.recolhida .rodape-acoes { flex-direction:column; gap:8px; align-items:center; } body.recolhida .rodape-acoes .btn-tour span, body.recolhida .tema button:not([aria-pressed="true"]) { display:none; } @media (max-width: 900px) { body.recolhida { grid-template-columns:1fr; } .botao-icone.recolher { display:none; } } /* Alternador de tema: mesmo controle segmentado do hubnews. */ .tema { display:inline-flex; gap:2px; padding:2px; border:1px solid var(--linha); border-radius:var(--r-p); background:var(--papel); align-self:flex-start; } .tema button { all:unset; width:26px; height:26px; border-radius:9px; cursor:pointer; display:grid; place-items:center; color:var(--tinta-3); } .tema button:hover { background:var(--fundo-2); color:var(--tinta); } .tema button[aria-pressed="true"] { background:var(--marca-ac); color:#fff; } .tema svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.8; } /* Controle segmentado: opções mutuamente exclusivas coladas numa só barra. Usado onde a ordem importa (Abertos -> Cumpridos -> Descartados) ou onde são duas formas de ver a mesma coisa (Tabela | Board). */ .seg { display:inline-flex; border:1px solid var(--linha); border-radius:var(--r-p); background:var(--papel); padding:3px; gap:2px; max-width:100%; } .seg button { all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:calc(var(--r-p) - 3px); font:500 var(--t-mini) var(--ui); color:var(--tinta-2); white-space:nowrap; } .seg button:hover { background:var(--fundo-2); color:var(--tinta); } .seg button[aria-pressed="true"] { background:var(--marca-ac); color:#fff; } .seg button b { font-weight:700; font-variant-numeric:tabular-nums; opacity:.85; } .seg svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.8; flex:none; } .seg button:focus-visible { box-shadow:0 0 0 2px var(--papel),0 0 0 4px var(--tinta); } .barra-ferramentas { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:14px; } .barra-ferramentas .grupo { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .barra-ferramentas .rotulo { font:600 var(--t-micro) var(--ui); color:var(--tinta-3); text-transform:uppercase; letter-spacing:.06em; } /* ------------------------------------------------------------------ conteúdo */ /* Ocupa toda a largura que o menu deixa: as tabelas (Prazos, Recortes, Fontes) perdiam espaço de coluna num miolo fixo de 1120px, e o texto de leitura já tem a própria medida (--medida) onde importa. */ .conteudo { min-width:0; padding:24px clamp(18px, 2.4vw, 40px) 72px; max-width:none; } .expediente { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; padding-bottom:16px; margin-bottom:22px; border-bottom:1px solid var(--linha); } .expediente h1 { font:800 var(--t-tela)/1.15 var(--ui); margin:0; letter-spacing:-.025em; } .expediente .data { font-size:var(--t-mini); color:var(--tinta-2); } .expediente .num { margin-left:auto; font-size:var(--t-mini); color:var(--tinta-2); } .expediente .num b { color:var(--tinta); font-weight:700; } h2 { font:700 var(--t-titulo)/1.3 var(--ui); margin:0 0 12px; letter-spacing:-.015em; } .painel { background:var(--papel); border:1px solid var(--linha); border-radius:var(--r); padding:18px 20px; margin-bottom:16px; box-shadow:var(--sombra); } .muted { color:var(--tinta-2); } .mini { font-size:var(--t-mini); } /* ------------------------------------------------------------------ controles */ label { display:block; font:500 var(--t-mini) var(--ui); color:var(--tinta-2); margin-bottom:5px; } input,select,textarea { width:100%; padding:9px 12px; font:var(--t-corpo) var(--ui); color:var(--tinta); background:var(--papel); border:1px solid var(--linha-forte); border-radius:var(--r-p); } /* Radio entrou junto com as pastas. Sem ele aqui, o seletor herdava o `width:100%` dos campos de texto e empurrava o rótulo para fora. */ input[type=checkbox], input[type=radio] { width:auto; flex:0 0 auto; accent-color:var(--marca); } textarea { font:var(--t-mini)/1.5 var(--mono); resize:vertical; } input:focus,select:focus,textarea:focus { border-color:var(--marca); outline:none; box-shadow:0 0 0 2px rgba(255,111,26,.30); } /* Botão secundário é o padrão da tela; o primário é o gradiente, e ele é raro. */ button { font:600 var(--t-mini) var(--ui); padding:9px 18px; border-radius:999px; cursor:pointer; background:var(--papel); color:var(--tinta); border:1px solid var(--linha-forte); transition:background .15s,transform .15s,filter .15s; } button:hover { background:var(--fundo-2); } button:active { transform:translateY(0); } /* Gradiente aparição 2 de 3: o CTA primário — e a única sombra colorida do sistema. */ button.cta { border:none; color:#fff; background:var(--grad-ac); box-shadow:var(--brilho); font-weight:700; } button.cta:hover { transform:translateY(-1px); filter:brightness(1.03); background:var(--grad-ac); } /* Botão de escolha ativa (período, por exemplo): preenchido, para o estado ser visível de relance sem gastar o gradiente, que é reservado ao CTA. */ button.sel { background:var(--tinta); color:var(--papel); border-color:var(--tinta); } button.sel:hover { background:var(--tinta); opacity:.9; } button.ghost { background:transparent; color:var(--tinta-2); border-color:transparent; } button.ghost:hover { background:var(--fundo-2); color:var(--tinta); } button.mini-btn { padding:4px 9px; font-size:var(--t-mini); white-space:nowrap; } button.perigo { background:var(--papel); color:var(--erro); border-color:var(--linha-forte); } button.perigo:hover { background:var(--erro-f); } button:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; } /* Campo inerte precisa parecer inerte. Sem isto, o teto por período continuava com cara de editável no modo de créditos, e quem digitasse ali acharia que tinha configurado alguma coisa. */ input:disabled, select:disabled, textarea:disabled { opacity:.5; cursor:not-allowed; background:var(--fundo-2); } .linha { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; } /* Cabeçalho de um grupo de termos: nome, contagem e os botões de ação. Estava tudo em `style=` inline, com `flex-wrap:nowrap` — que no desktop mantém a linha inteira, e no telefone empurrava o último botão 12px para fora da tela. Em CSS, a regra do celular consegue soltar a quebra; inline ela não conseguia sem `!important`. */ .linha-grupo { display:flex; align-items:center; gap:12px; flex-wrap:nowrap; margin:16px 0 2px; } .linha-grupo > b { flex:0 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .linha-grupo > .quantos { flex:1 1 auto; min-width:60px; } .linha-grupo > button { flex:0 0 auto; } .linha > * { flex:1 1 150px; min-width:0; } .linha > .fix, .linha > .mini-btn { flex:0 0 auto; } .grade { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; } /* --------------------------------------------------------------------- busca */ .buscador { display:flex; gap:9px; margin-bottom:10px; } .buscador input { font-size:var(--t-leitura); padding:11px 15px; border-radius:999px; } .chips { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px; min-height:22px; } .chip { display:inline-flex; align-items:center; gap:5px; padding:3px 6px 3px 11px; background:var(--fundo-2); border:1px solid var(--linha); border-radius:999px; font:500 var(--t-mini) var(--ui); color:var(--tinta-2); } .chip button { all:unset; cursor:pointer; padding:0 4px; color:var(--tinta-3); font-size:var(--t-mini); } .chip button:hover { color:var(--erro); } /* Barra de filtros sempre visível: o que antes só existia dentro do diálogo. */ .filtros-barra { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; } .filtros-barra select, .filtros-barra input { width:auto; min-width:0; font-size:var(--t-mini); padding:7px 11px; border-radius:999px; } .filtros-barra .sep { width:1px; height:20px; background:var(--linha); } .cota { font-size:var(--t-micro); color:var(--tinta-3); white-space:nowrap; } .cota b { color:var(--tinta-2); font-weight:600; } .cota.baixa b { color:var(--aten); } .cota.zero b { color:var(--erro); } .mon-rapido { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0 0 12px; position:relative; } .mon-drop { position:relative; } .mon-drop > summary { cursor:pointer; list-style:none; font:600 var(--t-mini) var(--ui); padding:8px 16px; border-radius:999px; background:var(--papel); color:var(--tinta); border:1px solid var(--linha-forte); display:inline-flex; align-items:center; gap:6px; white-space:nowrap; } .mon-drop > summary::-webkit-details-marker { display:none; } .mon-drop > summary:hover { background:var(--fundo-2); } .mon-drop[open] > summary { border-color:var(--marca); color:var(--marca); } .mon-drop-painel { position:absolute; top:calc(100% + 6px); left:0; z-index:20; width:340px; max-width:min(340px,84vw); background:var(--papel); border:1px solid var(--linha); border-radius:var(--r); box-shadow:var(--sombra-alta); padding:12px; display:flex; flex-direction:column; gap:9px; } .mon-drop-painel input { font-size:var(--t-mini); } .mon-lista { list-style:none; margin:0; padding:0; max-height:300px; overflow:auto; } .mon-item { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:var(--t-mini); padding:5px; border-radius:8px; } .mon-item:hover { background:var(--fundo-2); } .mon-item input[type=checkbox] { flex:0 0 auto; } .mon-item-nome { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mon-item .qtd { font:600 var(--t-micro) var(--mono); color:var(--tinta-3); font-variant-numeric:tabular-nums; } /* --------------------------------------------------------------------- cards Um ato de diário oficial é um DOCUMENTO, e a lista é um sumário de documentos. A versão anterior o desenhava como cartão de rede social — canto de 16px, sombra, salto no hover, e a metadata toda em pílulas coloridas. É o que dava a aparência de painel genérico: muita forma competindo com o texto, que é a única coisa que o leitor veio ler. O que mudou, e por quê: * canto de 10px e fio de 1px em vez de sombra — a lista ganha um ritmo de documento empilhado em vez de cartão flutuando; * nada se move no hover; o realce é a borda e o fundo mudarem de tom, que já basta para dizer "clicável" sem pedir atenção; * a régua lateral laranja substitui a sombra como marca do ato que casou termo — é o sinal mais forte da lista e agora tem a cor só para si; * a metadata vira UMA linha de texto com separadores, não sete pílulas. Só a fonte continua sendo um selo, porque é o campo que se procura. -------------------------------------------------------------------------- */ .card { background:var(--papel); border:1px solid var(--linha); border-radius:10px; padding:16px 18px 17px; margin-bottom:10px; position:relative; transition:border-color .15s, background .15s; } .card:hover { border-color:var(--linha-forte); background:var(--fundo-2); } /* Ato que casou termo do cliente: régua lateral, o sinal mais forte da lista. Antes isso era só uma sombra igual à de todos os outros cartões. */ .card.is-mon { border-left:3px solid var(--marca); padding-left:16px; } .card.is-sel { border-color:var(--marca); box-shadow:inset 0 0 0 1px var(--marca); background:var(--marca-fraca); } .card h3 { font:600 var(--t-titulo)/1.32 var(--serifa); margin:0 0 6px; letter-spacing:-.008em; padding-right:30px; text-wrap:balance; } .card h3 a { color:var(--tinta); text-decoration:none; } .card h3 a:hover { text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; } .pick { position:absolute; top:15px; right:16px; } /* Uma linha só, com separadores, em vez de uma fileira de pílulas. Os números em tabular para as datas alinharem de um ato para o outro. */ .meta { display:flex; gap:7px; flex-wrap:wrap; align-items:baseline; font-size:var(--t-micro); color:var(--tinta-3); margin-bottom:8px; font-variant-numeric:tabular-nums; letter-spacing:.01em; } .meta > span + span::before, .meta > span + a::before { content:"·"; margin-right:7px; color:var(--linha-forte); } .meta a { color:var(--tinta-2); text-decoration:none; border-bottom:1px solid var(--linha-forte); } .meta a:hover { color:var(--marca); border-bottom-color:var(--marca); } .orgao { font:600 var(--t-micro)/1.4 var(--ui); color:var(--tinta-2); margin-bottom:8px; letter-spacing:.04em; text-transform:uppercase; } .trecho { font:var(--t-leitura)/1.62 var(--serifa); color:var(--tinta); max-width:var(--medida); } .tag { font:500 var(--t-micro) var(--ui); padding:2px 8px; border-radius:999px; background:var(--fundo-2); color:var(--tinta-2); border:1px solid var(--linha); text-decoration:none; } /* O selo da fonte deixa de ser um retângulo preto — chamava mais atenção que o título do ato. Vira etiqueta discreta, com a chave em caixa alta pequena. */ .tag.src { background:transparent; color:var(--tinta-2); border-color:var(--linha-forte); border-radius:4px; font:600 var(--t-micro) var(--ui); letter-spacing:.05em; text-transform:uppercase; padding:2px 7px; } .meta > .tag.src + span::before { content:none; } .tag.k-text { color:var(--texto); } .tag.k-cnpj { color:var(--cnpj); } .tag.k-cpf { color:var(--cpf); } /* Identificadores do ato, em linha própria abaixo do trecho. Número em monoespaçada tabular: é para conferir dígito a dígito e copiar, não para ler corrido. O rótulo fica pequeno e colado, como etiqueta de formulário. */ .docs { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; } .doc { font:var(--t-micro)/1 var(--mono); font-variant-numeric:tabular-nums; color:var(--tinta-2); background:var(--fundo-2); border:1px solid var(--linha); border-radius:4px; padding:4px 7px; display:inline-flex; gap:5px; align-items:center; } .doc b { font:700 9px var(--ui); letter-spacing:.07em; color:var(--tinta-3); } .doc.k-cnpj b { color:var(--cnpj); } .doc.k-cpf b { color:var(--cpf); } .doc.k-text b { color:var(--texto); } .mon { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:9px; } /* O nome do cliente, sem a palavra "Monitorado" na frente: quem está olhando já sabe que é monitoramento — é o produto inteiro. */ .mon-lbl { font:700 var(--t-micro) var(--ui); letter-spacing:.06em; text-transform:uppercase; color:var(--marca); padding:0; background:none; } .mon-lbl::after { content:""; display:inline-block; width:1px; height:11px; background:var(--linha-forte); margin:0 2px 0 8px; vertical-align:-2px; } .mon-lbl.men { background:transparent; color:var(--tinta-3); padding:3px 0; font-weight:500; } .mon-term { font:500 var(--t-micro) var(--ui); padding:2px 8px; border-radius:999px; background:var(--texto-fraco); color:var(--texto); } .mon-term.k-cnpj { background:var(--cnpj-fraco); color:var(--cnpj); } .mon-term.k-cpf { background:var(--cpf-fraco); color:var(--cpf); } /* O amarelo marca-texto vive só aqui: o termo casado dentro do ato. */ mark { background:var(--realce); color:var(--sobre-realce); padding:0 2px; border-radius:3px; } mark.k-text { background:transparent; color:var(--texto); font-weight:700; box-shadow:inset 0 -2px 0 var(--texto); } mark.k-cnpj { background:transparent; color:var(--cnpj); font-weight:700; box-shadow:inset 0 -2px 0 var(--cnpj); } mark.k-cpf { background:transparent; color:var(--cpf); font-weight:700; box-shadow:inset 0 -2px 0 var(--cpf); } .pager { display:flex; gap:10px; align-items:center; justify-content:center; padding:18px 0; } /* Botão de dois estados na barra de filtros. Não é `.ghost` porque não é um comando: é um filtro ligado/desligado, e precisa mostrar em qual dos dois está sem o usuário abrir nada. */ .chip-novos { font:600 var(--t-mini) var(--ui); padding:6px 13px; border-radius:999px; border:1px solid var(--linha-forte); background:var(--papel); color:var(--tinta-2); cursor:pointer; white-space:nowrap; transition:background .15s,color .15s,border-color .15s; } .chip-novos:hover { border-color:var(--marca); color:var(--marca); } .chip-novos.ligado { background:var(--marca-ac); border-color:var(--marca-ac); color:#fff; } .chip-novos.ligado::before { content:"✓ "; } .vazio { text-align:center; padding:52px 24px; color:var(--tinta-2); border:2px dashed var(--linha); border-radius:var(--r); background:var(--papel); } .vazio b { display:block; color:var(--tinta); font-size:var(--t-titulo); font-weight:700; margin-bottom:6px; } .skel { background:var(--papel); border:1px solid var(--linha); border-radius:var(--r); padding:16px 18px; margin-bottom:12px; } .skel div { height:9px; border-radius:999px; background:var(--fundo-2); margin-bottom:9px; } .skel div:nth-child(1) { width:32%; } .skel div:nth-child(2) { width:76%; height:13px; } .skel div:nth-child(3) { width:94%; } .skel div:nth-child(4) { width:60%; } /* ------------------------------------------------------------------- termos */ .termos { list-style:none; margin:10px 0 0; padding:0; max-height:340px; overflow:auto; } .termos li { display:flex; align-items:center; gap:8px; padding:8px 2px; border-bottom:1px solid var(--linha); font-size:var(--t-mini); } .termos li:last-child { border-bottom:none; } .termos li .t { flex:1; cursor:pointer; display:flex; align-items:center; gap:8px; min-width:0; } .termos li .t:hover { color:var(--marca); } .termos li .n { font:600 var(--t-micro) var(--mono); color:var(--tinta-3); font-variant-numeric:tabular-nums; } .termos li button { padding:4px 10px; font-size:var(--t-micro); } .dot { width:7px; height:7px; border-radius:50%; background:var(--texto); flex:0 0 auto; } .dot.k-cnpj { background:var(--cnpj); } .dot.k-cpf { background:var(--cpf); } /* ------------------------------------------------------------------- tabelas */ table.dados { width:100%; border-collapse:collapse; font-size:var(--t-mini); } table.dados th { text-align:left; font:600 var(--t-micro) var(--ui); text-transform:uppercase; letter-spacing:.05em; color:var(--tinta-3); padding:9px 12px 9px 0; border-bottom:1px solid var(--linha); } table.dados td { padding:10px 12px 10px 0; border-bottom:1px solid var(--linha); vertical-align:top; } table.dados tr:hover td { background:var(--fundo-2); } table.dados td.num { font:var(--t-mini) var(--mono); font-variant-numeric:tabular-nums; } /* Mesmo tratamento do título do card: o azul padrão do navegador destoaria da tabela, e a linha inteira já reage ao hover. */ table.dados a { color:var(--tinta); text-decoration:none; } table.dados a:hover { text-decoration:underline; text-underline-offset:3px; } table.ficha { width:100%; border-collapse:collapse; font-size:var(--t-mini); margin:14px 0; } table.ficha th { text-align:left; white-space:nowrap; width:1%; vertical-align:top; font:600 var(--t-micro) var(--ui); text-transform:uppercase; letter-spacing:.05em; color:var(--tinta-3); padding:6px 16px 6px 0; border-bottom:1px solid var(--linha); } table.ficha td { padding:6px 0; border-bottom:1px solid var(--linha); vertical-align:top; } .rolagem { overflow-x:auto; } .selo-status { font:600 var(--t-micro) var(--ui); padding:3px 10px; border-radius:999px; background:var(--fundo-2); color:var(--tinta-2); display:inline-flex; align-items:center; gap:6px; } .selo-status::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.85; } .selo-status.ok { color:var(--ok); background:var(--ok-f); } .selo-status.erro { color:var(--erro); background:var(--erro-f); } .selo-status.aviso { color:var(--aten); background:var(--aten-f); } .selo-status.neutro { color:var(--tinta-2); background:var(--fundo-2); } /* Confirmação passageira. Uma ação que dá certo em silêncio deixa a pessoa sem saber se deu — e uma que abre diálogo para dizer "pronto" cobra um clique por nada. */ /* ------------------------------------------------ oficina de heurística */ .of-texto { white-space:pre-wrap; font:12px/1.65 var(--mono); background:var(--fundo-2); border:1px solid var(--linha); border-radius:var(--r-p); padding:12px; max-height:460px; overflow:auto; } /* Cada marcador tem sua cor: com dois ou três regras na mesma página, saber QUAL bateu onde é metade do diagnóstico. */ .of-texto mark { padding:1px 0; border-radius:2px; } .of-texto mark.m0 { background:#ffd9a8; color:inherit; } .of-texto mark.m1 { background:#b8e6c4; color:inherit; } .of-texto mark.m2 { background:#cdd9ff; color:inherit; } /* Bateu mas não valeu (marcador restrito a outra seção): tracejado, não colorido — é um acerto inerte, e confundir com acerto ativo faz o admin mexer no regex quando o problema é a seção. */ .of-texto mark.inerte { background:none; outline:1px dashed var(--tinta-3); opacity:.75; } .of-corte { display:block; border-top:2px solid var(--marca); margin:6px 0; font:600 10px var(--ui); color:var(--marca); letter-spacing:.06em; } .of-barra { height:9px; border-radius:2px; background:var(--tinta-3); } .of-lista { display:flex; flex-direction:column; gap:8px; } .of-item { display:flex; gap:8px; align-items:flex-start; } .of-item input, .of-item select { font:12px var(--mono); } .of-cmp { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .of-cmp > div { background:var(--fundo-2); border-radius:var(--r-p); padding:12px; } @media (max-width:760px) { .of-cmp { grid-template-columns:1fr; } } /* ------------------------------------------------------- campo de etiquetas Vários valores num campo só. Digitados soltos, separados por vírgula, viram uma string que o usuário tem que reler para saber o que já pôs — e não há como tirar um do meio sem reeditar o texto inteiro. Como etiqueta, cada valor é uma coisa que se vê e se remove. */ .tags { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:6px 8px; border:1px solid var(--linha-forte); border-radius:var(--r-p); background:var(--papel); cursor:text; min-height:38px; } .tags:focus-within { border-color:var(--marca); } .tags .tag { display:inline-flex; align-items:center; gap:6px; background:var(--fundo-2); border-radius:99px; padding:3px 5px 3px 11px; font:500 var(--t-mini) var(--ui); max-width:100%; } .tags .tag span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tags .tag button { border:none; background:none; cursor:pointer; padding:0 4px; color:var(--tinta-2); font-size:15px; line-height:1; border-radius:99px; } .tags .tag button:hover { color:var(--erro); background:none; transform:none; box-shadow:none; } .tags input { border:none; padding:2px; flex:1 1 90px; min-width:90px; background:none; font:var(--t-corpo) var(--ui); } .tags input:focus { outline:none; } .recado { position:fixed; left:50%; bottom:26px; transform:translateX(-50%); background:var(--tinta); color:var(--papel); padding:11px 20px; border-radius:99px; font:600 var(--t-mini) var(--ui); z-index:60; box-shadow:0 8px 22px rgba(0,0,0,.22); animation:sobe .2s ease-out; } @keyframes sobe { from { opacity:0; transform:translate(-50%,10px); } } /* --------------------------------------------------- busca no sidebar */ .busca-lateral { position:relative; margin:0 12px 10px; } .busca-lateral svg { position:absolute; left:10px; top:50%; transform:translateY(-50%); width:15px; height:15px; fill:none; stroke:var(--tinta-3); stroke-width:2; stroke-linecap:round; pointer-events:none; } .busca-lateral input { width:100%; padding:8px 10px 8px 31px; border-radius:var(--r-p); border:1px solid var(--linha); background:var(--fundo-2); color:var(--tinta); font:400 var(--t-mini) var(--ui); } .busca-lateral input:focus { outline:none; border-color:var(--marca); background:var(--papel); } .busca-lateral input::-webkit-search-cancel-button { cursor:pointer; } /* A frase que diz o que a tela procura. Duas telas com a mesma caixa de busca e resultados diferentes precisam dizer a diferença onde ela é sentida. */ .escopo-busca { font-size:var(--t-mini); color:var(--tinta-2); background:var(--fundo-2); border-radius:var(--r-p); padding:9px 13px; margin-bottom:12px; } .escopo-busca a { color:var(--marca); } /* ------------------------------------------------- grade de coleta por dia */ .grade-coleta { width:100%; border-collapse:separate; border-spacing:2px; } .grade-coleta th { font:600 var(--t-micro) var(--ui); color:var(--tinta-2); text-align:left; padding:4px 6px; font-weight:600; } .grade-coleta td { padding:0; } .grade-coleta .dia { font:600 var(--t-mini) var(--ui); color:var(--tinta-2); white-space:nowrap; padding:4px 8px 4px 0; } .grade-coleta .dia small { font-weight:400; opacity:.7; margin-left:5px; } /* Nome da fonte fixo na rolagem horizontal — com até 90 colunas de dia, sem isto a pessoa perde de vista QUAL fonte está olhando ao rolar pra direita. */ .grade-coleta .fonte-fix { position:sticky; left:0; background:var(--papel); z-index:1; min-width:170px; max-width:260px; overflow:hidden; text-overflow:ellipsis; } /* A célula é um botão: clicar abre o detalhe daquele par fonte × dia. */ .cel { width:100%; border:1px solid transparent; border-radius:6px; cursor:pointer; padding:7px 8px; text-align:left; font:600 var(--t-micro) var(--ui); background:var(--fundo-2); color:var(--tinta-2); display:block; } .cel:hover { border-color:var(--tinta-3); } .cel b { display:block; font:700 var(--t-mini) var(--ui); } .cel.ok { background:var(--ok-f); color:var(--ok); } .cel.erro { background:var(--erro-f); color:var(--erro); } .cel.aviso { background:var(--aten-f); color:var(--aten); } /* Dia em que a fonte normalmente não publica: listrado, para o vazio dali não ser lido como falha. */ .cel.folga { background-image:repeating-linear-gradient(45deg, transparent 0 5px, rgba(127,127,127,.10) 5px 10px); } /* Ficou em aberto e saiu da janela do agendador: continua sendo o que foi, mas já não é uma pendência — não pode competir por atenção com o que ainda pode ser resolvido. */ .cel.esmaecida { opacity:.45; } /* ------------------------------------------------------------------- diálogos */ dialog { border:none; border-radius:var(--r); padding:0; max-width:min(820px,94vw); width:100%; background:var(--papel); color:var(--tinta); box-shadow:0 20px 25px -5px rgba(0,0,0,.15),0 8px 10px -6px rgba(0,0,0,.12); } dialog::backdrop { background:rgba(0,0,0,.40); } dialog .cab { display:flex; align-items:center; gap:10px; padding:16px 22px; border-bottom:1px solid var(--linha); } dialog .cab h2 { margin:0; flex:1; font-size:var(--t-titulo); } dialog .corpo { padding:18px 22px; max-height:70vh; overflow:auto; } dialog .pe { display:flex; gap:9px; align-items:center; padding:14px 22px; border-top:1px solid var(--linha); background:var(--fundo); } dialog .pe .esq { margin-right:auto; } dialog .pe { flex-wrap:wrap; } dialog .pe button { white-space:nowrap; } .fechar { all:unset; cursor:pointer; color:var(--tinta-3); width:32px; height:32px; border-radius:var(--r-p); display:grid; place-items:center; font-size:var(--t-titulo); } .fechar:hover { background:var(--fundo-2); color:var(--tinta); } /* O texto integral do ato em serifa, não em monoespaçada. Mono é para código; aplicada a um despacho de 40 linhas ela é mais lenta de ler e faz o documento oficial parecer log de sistema. `pre-wrap` continua, porque a quebra de linha da origem às vezes É a estrutura (tabela, lista de itens). */ pre.texto { white-space:pre-wrap; font:var(--t-leitura)/1.7 var(--serifa); color:var(--tinta); background:var(--fundo); padding:16px 18px; border-radius:var(--r-p); border:1px solid var(--linha); max-height:460px; overflow:auto; max-width:var(--medida); } .previa { background:var(--realce-fraco); border:1px solid var(--realce); border-radius:var(--r-p); padding:13px 15px; margin:14px 0; } .previa-lbl { font:700 var(--t-micro) var(--ui); text-transform:uppercase; letter-spacing:.07em; color:var(--realce-forte); display:block; margin-bottom:6px; } .previa div { font:var(--t-leitura)/1.65 var(--serifa); max-width:var(--medida); } /* ------------------------------------------------------------- bloqueio Quando um recurso não está no plano da conta. Antes isso era uma caixa `.vazio` — a MESMA que diz "nenhuma caixinha ainda". As duas mensagens são opostas ("crie a primeira" contra "isto não é seu") e vestiam a mesma roupa, então o cliente do plano Essencial lia "Nenhuma caixinha ainda" e ficava procurando o botão de criar. Este bloco é deliberadamente diferente de tudo: cadeado, tarja lateral na cor de atenção e o caminho para liberar. É a única superfície do sistema que diz "não", e tem que ser reconhecível como tal. */ .bloqueio { display:flex; gap:16px; align-items:flex-start; background:var(--papel); border:1px solid var(--linha-forte); border-left:4px solid var(--aten); border-radius:var(--r-p); padding:18px 20px; margin:12px 0; } .bloqueio-icone { flex:0 0 auto; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--aten-f); color:var(--aten); } .bloqueio-icone svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.9; } .bloqueio-corpo { min-width:0; } .bloqueio h3 { margin:0 0 4px; font:700 var(--t-titulo)/1.3 var(--ui); color:var(--tinta); } .bloqueio p { margin:0 0 4px; font-size:var(--t-mini); color:var(--tinta-2); max-width:62ch; } .bloqueio .plano { font:600 var(--t-micro) var(--ui); text-transform:uppercase; letter-spacing:.06em; color:var(--aten); } .bloqueio .acoes { margin-top:11px; display:flex; gap:8px; flex-wrap:wrap; } /* Cadeado pequeno, para o cartão de uma caixinha que o plano não inclui. */ .cx-card.travada { opacity:.72; } .cx-card .selo-travado { font:600 var(--t-micro) var(--ui); letter-spacing:.04em; color:var(--aten); background:var(--aten-f); border-radius:999px; padding:2px 9px; display:inline-flex; align-items:center; gap:5px; } details summary { cursor:pointer; font:600 var(--t-micro) var(--ui); text-transform:uppercase; letter-spacing:.06em; color:var(--tinta-3); padding:7px 0; } details summary:hover { color:var(--tinta-2); } /* ------------------------------------------------------------------- tour Véu escuro + recorte do alvo + balão. O recorte é feito com `box-shadow` gigante no próprio alvo, e não com um buraco no véu: assim o elemento continua clicável e continua sendo o elemento de verdade, não um desenho dele. */ .tour-veu { position:fixed; inset:0; background:rgba(15,14,17,.55); z-index:60; backdrop-filter:blur(1px); } .tour-alvo { position:relative; z-index:61; border-radius:8px; box-shadow:0 0 0 4px var(--marca), 0 0 0 9999px rgba(15,14,17,.55); } /* Acima da barra do celular (68) e da gaveta (70): no celular o passo do menu aponta para o botão da barra, e a sombra do alvo, pintada no contexto da barra, escureceria o balão se ele ficasse abaixo dela. */ .tour-balao { position:fixed; z-index:72; width:min(380px, calc(100vw - 24px)); background:var(--papel); border:1px solid var(--linha-forte); border-radius:var(--r); box-shadow:var(--sombra-alta); padding:18px 20px 14px; } .tour-balao.centro { top:50%; left:50%; transform:translate(-50%,-50%); width:min(460px,92vw); } .tour-balao h3 { margin:0 0 8px; font:700 var(--t-titulo)/1.3 var(--ui); } .tour-balao p { margin:0; font-size:var(--t-mini); line-height:1.6; color:var(--tinta-2); } .tour-conta { font:700 var(--t-micro) var(--ui); letter-spacing:.08em; text-transform:uppercase; color:var(--marca); margin-bottom:5px; } .tour-pe { display:flex; gap:8px; align-items:center; margin-top:16px; } .btn-tour { all:unset; cursor:pointer; display:flex; align-items:center; gap:7px; font:600 var(--t-mini) var(--ui); color:var(--tinta-2); padding:6px 0; } .btn-tour:hover { color:var(--marca); } .btn-tour svg { width:15px; height:15px; } /* ------------------------------------------------------------ saúde das fontes */ .saude-contagem { display:flex; gap:7px; flex-wrap:wrap; margin:12px 0 4px; } .saude-lista { margin-top:14px; border-top:1px solid var(--linha); } .saude-item { display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--linha); } .saude-item .saude-txt { flex:1; min-width:0; } .saude-item .chave { font:var(--t-micro) var(--mono); color:var(--tinta-3); background:var(--fundo-2); padding:1px 5px; border-radius:4px; } .conduta { margin:0; padding-left:20px; font-size:var(--t-mini); color:var(--tinta); } .conduta li { margin-bottom:6px; line-height:1.55; } /* --------------------------------------------------------------------- fontes */ .fonte { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--linha); font-size:var(--t-mini); } .fonte.sem-coletor { opacity:.5; } .fonte .nm { flex:1; min-width:0; } .fonte .nm small { display:block; color:var(--tinta-3); font-size:var(--t-micro); } /* Seletor de fontes do cliente, em árvore esfera > UF. Um nível pesa menos que o outro na hierarquia visual — "Federal" não pode parecer do mesmo peso que "SP" dentro de Municipal. */ .grupo-fonte-cliente { border-top:1px solid var(--linha); } .grupo-fonte-cliente[data-nivel="esfera"] > summary { font-size:var(--t-mini); letter-spacing:0; text-transform:none; } .grupo-fonte-cliente[data-nivel="uf"] { border-top:1px dashed var(--linha); } .grupo-fonte-cliente[data-nivel="uf"] > summary { padding-left:4px; } .grupo-fontes { font:600 var(--t-micro) var(--ui); text-transform:uppercase; letter-spacing:.06em; color:var(--tinta-3); margin:18px 0 4px; } .teste { font-size:var(--t-mini); padding:0 0 10px 28px; } .teste .amostra { background:var(--fundo); border-radius:var(--r-p); padding:11px 13px; margin-top:6px; } /* ------------------------------------------------------------------ barra sel */ .barra-sel { position:fixed; left:50%; transform:translateX(-50%); bottom:22px; z-index:40; display:flex; gap:8px; align-items:center; background:var(--tinta); color:var(--papel); padding:9px 10px 9px 18px; border-radius:999px; box-shadow:0 10px 30px rgba(0,0,0,.28); font-size:var(--t-mini); font-weight:600; } /* `display:flex` acima é regra de autor e vence a regra do navegador para [hidden] (que é do user-agent). Sem esta linha a barra ficava visível SEMPRE — na tela de login inclusive, oferecendo "Imprimir" sem nada selecionado. */ .barra-sel[hidden] { display:none; } .barra-sel button { background:transparent; color:var(--papel); border-color:rgba(255,255,255,.28); padding:6px 13px; font-size:var(--t-mini); } .barra-sel button:hover { background:rgba(255,255,255,.14); } .barra-sel button.zap { border-color:transparent; background:#25D366; color:#0b3d1f; } .barra-sel button.zap:hover { background:#2ee670; } /* --------------------------------------------------------------------- login */ .login-tela { grid-column:1/-1; display:grid; place-items:center; min-height:100vh; padding:24px; position:relative; overflow:hidden; background:var(--fundo); } /* Fundo: colunas de texto de diário oficial, em baixo contraste. Desenhado em CSS — nada de imagem de banco, que custa rede e envelhece mal. As duas faixas de gradiente são a aparição 3 de 3, e ficam bem apagadas. */ .login-tela::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(52% 44% at 88% -8%, rgba(255,111,26,.14), transparent 62%), radial-gradient(44% 40% at 4% 104%, rgba(138,77,255,.14), transparent 60%); } .login-tela::after { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5; /* Linhas de texto e colunas de um diário. A máscara tira o centro (onde fica o cartão) e as bordas, então a textura só insinua a página atrás — sem virar linha de televisão antiga. */ background: repeating-linear-gradient(to bottom, var(--tinta-3) 0 1px, transparent 1px 11px), repeating-linear-gradient(to right, transparent 0 212px, var(--linha-forte) 212px 213px); -webkit-mask-image:radial-gradient(62% 58% at 50% 48%, transparent 34%, #000 72%, transparent 96%); mask-image:radial-gradient(62% 58% at 50% 48%, transparent 34%, #000 72%, transparent 96%); opacity:.10; } .login-caixa { width:100%; max-width:392px; position:relative; z-index:1; } .login-caixa .marca { align-items:center; padding:0 0 20px; } .login-caixa .marca .selo { height:34px; } .login-caixa .painel { padding:28px 26px; border-radius:var(--r); } .login-caixa h1 { font:800 20px/1.2 var(--ui); letter-spacing:-.02em; margin:0 0 4px; } .login-caixa .sub { font-size:var(--t-mini); color:var(--tinta-2); margin:0 0 20px; } .login-caixa button.cta { width:100%; } .login-rodape { text-align:center; margin-top:16px; font-size:var(--t-mini); } .login-rodape a { color:var(--tinta-2); } .aviso { font-size:var(--t-mini); padding:10px 13px; border-radius:var(--r-p); margin-bottom:14px; display:flex; gap:8px; align-items:flex-start; } .aviso.erro { background:var(--erro-f); color:var(--erro); } .aviso.ok { background:var(--ok-f); color:var(--ok); } .aviso.info { background:var(--fundo-2); color:var(--tinta-2); } /* --------------------------------------------------------------------- hoje */ .placar { display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:14px; margin-bottom:18px; } .placar .n { background:var(--papel); border:1px solid var(--linha); border-radius:var(--r); padding:16px 18px; box-shadow:var(--sombra); text-align:left; display:block; width:100%; cursor:pointer; color:inherit; font:inherit; transition:box-shadow .2s,transform .2s; } .placar .n:hover { box-shadow:var(--sombra-alta); transform:translateY(-1px); background:var(--papel); } .placar .n:disabled { cursor:default; opacity:1; transform:none; box-shadow:var(--sombra); } .placar .n b { display:block; font:800 var(--t-numero)/1.05 var(--ui); letter-spacing:-.03em; margin-bottom:4px; font-variant-numeric:tabular-nums; } .placar .n span { display:block; font-size:var(--t-mini); color:var(--tinta-2); } /* Card em destaque: a barra de acento é a terceira e última aparição do gradiente. */ .placar .n.tem-novo { overflow:hidden; position:relative; } .placar .n.tem-novo::before { content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--grad-h); } .placar .n.tem-novo b { color:var(--marca); } .linha-termo { display:flex; align-items:center; gap:10px; padding:10px 2px; border-bottom:1px solid var(--linha); font-size:var(--t-mini); } .linha-termo:last-child { border-bottom:none; } .linha-termo .t { flex:1; min-width:0; display:flex; align-items:center; gap:8px; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .linha-termo .t:hover { color:var(--marca); } .linha-termo .qt { font-size:var(--t-micro); color:var(--tinta-2); white-space:nowrap; font-variant-numeric:tabular-nums; } .linha-termo .qt b { color:var(--tinta); font-weight:700; } .linha-termo .novo { font:700 var(--t-micro) var(--ui); background:var(--marca-fraca); color:var(--marca); padding:3px 9px; border-radius:999px; white-space:nowrap; border:none; } .linha-termo .novo:hover { background:var(--marca-ac); color:#fff; } .linha-termo .mudo { font-size:var(--t-micro); color:var(--tinta-3); white-space:nowrap; } /* Barras das fontes que mais renderam no período. */ .fonte-barra { display:grid; grid-template-columns:110px 1fr 52px; gap:12px; align-items:center; padding:7px 0; font-size:var(--t-mini); } .fonte-barra .trilho { height:7px; border-radius:999px; background:var(--fundo-2); overflow:hidden; } .fonte-barra .trilho span { display:block; height:100%; border-radius:999px; background:var(--marca); } .fonte-barra .v { text-align:right; font:700 var(--t-mini) var(--ui); color:var(--tinta); font-variant-numeric:tabular-nums; } .operacao { display:flex; gap:20px; flex-wrap:wrap; align-items:center; font-size:var(--t-mini); } .operacao > div { display:flex; align-items:center; gap:7px; } .operacao .rot { color:var(--tinta-3); font:600 var(--t-micro) var(--ui); text-transform:uppercase; letter-spacing:.06em; } .operacao .op-link { font-size:var(--t-mini); color:var(--tinta-2); text-decoration:none; border-bottom:1px solid var(--linha-forte); } .operacao .op-link:hover { color:var(--tinta); border-color:var(--tinta); } /* Segmento de período (24h / 7 dias). */ .periodo { display:inline-flex; padding:2px; border:1px solid var(--linha); border-radius:999px; background:var(--papel); } .periodo button { border:none; background:transparent; padding:6px 15px; border-radius:999px; font-size:var(--t-mini); color:var(--tinta-2); } .periodo button[aria-pressed="true"] { background:var(--tinta); color:var(--papel); } .periodo button:hover { background:var(--fundo-2); color:var(--tinta); } .periodo button[aria-pressed="true"]:hover { background:var(--tinta); color:var(--papel); } .ajuda-busca { margin:-2px 0 12px; } .ajuda-busca summary { color:var(--tinta-2); } .ajuda-busca .cx { background:var(--papel); border:1px solid var(--linha); border-radius:var(--r); padding:13px 15px; font-size:var(--t-mini); color:var(--tinta-2); } .ajuda-busca .cx p { margin:0 0 8px; } .ajuda-busca .cx p:last-child { margin-bottom:0; } code { font:500 var(--t-micro) var(--mono); background:var(--fundo-2); padding:2px 6px; border-radius:5px; color:var(--tinta); } .oculto { display:none !important; } /* Barra fixa e botão de filtros do celular. Ficam ANTES do `@media` que os liga: as duas regras têm a mesma especificidade, então a última do arquivo venceria — e foi o que aconteceu na primeira tentativa, com o `display:none` daqui apagando o `display:flex` de lá. Estilo que depende da ordem do arquivo é frágil; ordem explícita e comentada é o preço de não inflar seletor só para ganhar a disputa. */ /* Véu da gaveta: fora do `@media` de propósito. Sem `display:none` aqui ele virava, no desktop, um item vazio da grade do `body` e empurrava o menu lateral e o conteúdo para as células erradas. */ .veu-mob { display:none; } .barra-mob { display:none; position:fixed; top:0; left:0; right:0; z-index:68; height:56px; align-items:center; gap:10px; padding:0 12px; background:var(--papel); border-bottom:1px solid var(--linha); } .barra-mob .menu-btn, .barra-mob .tema-btn { all:unset; cursor:pointer; width:38px; height:38px; border-radius:10px; display:grid; place-items:center; color:var(--tinta-2); } .barra-mob .menu-btn:hover, .barra-mob .tema-btn:hover { background:var(--fundo-2); color:var(--tinta); } .barra-mob svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; } .barra-mob .titulo { flex:1; min-width:0; font:700 var(--t-corpo) var(--ui); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Botão que abre os filtros no celular; escondido no desktop, onde a barra de filtros já está sempre visível. */ .abre-filtros { display:none; align-items:center; gap:7px; margin-bottom:10px; font:600 var(--t-mini) var(--ui); color:var(--tinta-2); cursor:pointer; background:var(--papel); border:1px solid var(--linha-forte); border-radius:999px; padding:8px 14px; } .abre-filtros .conta { font:700 var(--t-micro) var(--ui); background:var(--marca-ac); color:#fff; border-radius:999px; padding:1px 7px; } /* ===================================================================== celular O menu horizontal rolável que existia aqui não funcionava, e o motivo é simples: com o logotipo ocupando metade da largura, sobravam ~180px para sete a quinze destinos, todos reduzidos a ícone sem rótulo e sem nenhuma indicação de que havia mais à direita. Quem entrava pelo celular não encontrava Pastas nem Assistente — eles estavam fora da tela. No lugar: uma barra fixa enxuta com o botão de menu, e uma GAVETA que desliza com o menu inteiro, rotulado. Mesmo HTML, outra apresentação — o `