/* Juris — componentes (design_system.md §3). Sem dependência de runtime do Bootstrap; compatível com data-bs-theme. */ /* ---------- Shell (sidebar + topbar) ---------- */ .juris-shell { min-height: 100vh; display: grid; grid-template-columns: 240px 1fr; grid-template-rows: 56px 1fr; grid-template-areas: "side top" "side main"; } .juris-shell[data-colapsada="true"] { grid-template-columns: 64px 1fr; } .juris-sidebar { grid-area: side; background: var(--grad-marca); color: #eef2fb; padding: var(--sp-3) var(--sp-2); display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .juris-sidebar__marca { display: flex; align-items: center; gap: 8px; padding: 8px var(--sp-2) var(--sp-4); font-family: var(--font-serif); font-size: var(--fs-lg); color: #fff; } .juris-sidebar__marca .logo { width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--azul); font-size: 15px; } .juris-sidebar__item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r); color: #cdd7ee; text-decoration: none; font-weight: 500; white-space: nowrap; } .juris-sidebar__item:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; } .juris-sidebar__item[aria-current="page"] { background: rgba(59,130,246,.22); color: #fff; } .juris-sidebar__item .badge { margin-left: auto; background: var(--carimbo); color: #fff; border-radius: var(--r-pill); font-size: var(--fs-xs); padding: 1px 7px; } .juris-sidebar__sep { height: 1px; background: rgba(255,255,255,.12); margin: var(--sp-2) 8px; } .juris-shell[data-colapsada="true"] .juris-sidebar__item span.rot, .juris-shell[data-colapsada="true"] .juris-sidebar__marca .nome { display: none; } .juris-topbar { grid-area: top; display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-4); background: var(--bg-1); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; } .juris-topbar__busca { flex: 1; max-width: 520px; } .juris-topbar__acao { background: none; border: 1px solid transparent; border-radius: var(--r); padding: 6px 9px; cursor: pointer; color: var(--ink-1); } .juris-topbar__acao:hover { background: var(--bg-2); } .juris-main { grid-area: main; padding: var(--sp-6); max-width: 1440px; } @media (max-width: 991px) { .juris-shell { grid-template-columns: 1fr; grid-template-rows: 56px 1fr 60px; grid-template-areas: "top" "main" "nav"; } .juris-sidebar { position: fixed; left: 0; top: 0; z-index: 60; transform: translateX(-100%); width: 240px; transition: transform var(--transicao); } .juris-shell[data-aberta="true"] .juris-sidebar { transform: none; } .juris-main { padding: var(--sp-4); } .juris-navbottom { display: flex; } } .juris-navbottom { display: none; grid-area: nav; position: sticky; bottom: 0; background: var(--bg-1); border-top: 1px solid var(--line); justify-content: space-around; align-items: center; } .juris-navbottom a { color: var(--ink-1); padding: 8px; font-size: var(--fs-xs); text-align: center; text-decoration: none; } /* ---------- Botões ---------- */ .juris-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg-1); color: var(--ink-0); font-weight: 600; cursor: pointer; font-size: var(--fs-base); transition: background var(--transicao), border-color var(--transicao); text-decoration: none; } .juris-btn:hover { background: var(--bg-2); text-decoration: none; } .juris-btn--primary { background: var(--azul); border-color: var(--azul); color: #fff; } .juris-btn--primary:hover { background: var(--azul-hover); border-color: var(--azul-hover); } .juris-btn--secondary { background: var(--bg-2); } .juris-btn--ghost { background: transparent; border-color: transparent; } .juris-btn--danger { background: var(--carimbo); border-color: var(--carimbo); color: #fff; } .juris-btn--sinete { background: var(--sinete); border-color: var(--sinete); color: #201a06; } .juris-btn--sm { padding: 4px 9px; font-size: var(--fs-sm); } .juris-btn--bloco { width: 100%; justify-content: center; } .juris-btn[disabled] { opacity: .5; cursor: not-allowed; } /* Navegação sem destino (ApplicationHelper#link_navegacao): sai um , não um . A regra estava escondida dentro de `processos/index.html.erb`, escopada em `.proc-paginacao` — qualquer outra tela que usasse a classe ficava sem estilo. */ .juris-btn.is-desabilitado { opacity: .38; cursor: not-allowed; } /* ---------- Card ---------- */ .juris-card { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sombra); } [data-bs-theme="dark"] .juris-card { box-shadow: none; } .juris-card__head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-4) 0; } .juris-card__title { font-family: var(--font-serif); font-size: var(--fs-lg); margin: 0; } .juris-card__body { padding: var(--sp-4); } .juris-card--compact .juris-card__body { padding: var(--sp-3); } /* ---------- Pills ---------- */ .juris-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; background: var(--bg-2); color: var(--ink-1); border: 1px solid transparent; } .juris-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .juris-pill--azul { background: var(--azul-soft); color: var(--azul-ink); } .juris-pill--ok { background: var(--ok-soft); color: var(--ok); } .juris-pill--aviso { background: var(--aviso-soft); color: var(--aviso); } .juris-pill--carimbo { background: var(--carimbo-soft); color: var(--carimbo-ink); } .juris-pill--sinete { background: var(--sinete-soft); color: var(--sinete-ink); } .juris-pill--info { background: var(--info-soft); color: var(--info); } /* ---------- Número de processo / documento (mono) ---------- */ .juris-num, .juris-doc-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: .2px; } .juris-num--lg { font-size: var(--fs-lg); } .juris-copiar { background: none; border: 0; cursor: pointer; color: var(--ink-2); padding: 0 4px; } .juris-copiar:hover { color: var(--azul); } /* ---------- Faixa de prazo ---------- */ .juris-faixa { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--fs-sm); padding: 2px 8px; border-radius: var(--r-sm); color: #fff; } .juris-faixa--folga { background: var(--prazo-folga); } .juris-faixa--d5 { background: var(--prazo-d5); } .juris-faixa--d2 { background: var(--prazo-d2); } .juris-faixa--d1 { background: var(--prazo-d1); } .juris-faixa--hoje { background: var(--prazo-hoje); } .juris-faixa--perdido { background: var(--carimbo-ink); text-decoration: line-through; } .juris-faixa--sugerido { background: transparent; color: var(--ink-1); border: 1px dashed currentColor; } .juris-borda-prazo { border-left: 4px solid var(--prazo-folga); } .juris-borda-prazo.is-d1 { border-left-color: var(--prazo-d1); } .juris-borda-prazo.is-hoje { border-left-color: var(--prazo-hoje); } /* ---------- Tarja (canto diagonal) ---------- */ .juris-tarja { position: relative; overflow: hidden; } .juris-tarja::after { content: attr(data-tarja); position: absolute; top: 10px; right: -34px; transform: rotate(45deg); background: var(--carimbo); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .12em; padding: 3px 40px; } .juris-tarja--minuta::after { background: var(--sinete); color: #201a06; } /* ---------- Tabela densa ---------- */ .juris-tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .juris-tabela th { text-align: left; color: var(--ink-2); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; padding: 8px 10px; position: sticky; top: 56px; background: var(--bg-1); border-bottom: 1px solid var(--line); } .juris-tabela td { padding: 0 10px; height: 36px; border-bottom: 1px solid var(--line); vertical-align: middle; } .juris-tabela tr:nth-child(even) td { background: var(--bg-2); } .juris-tabela tr:hover td { background: var(--azul-soft); } .juris-tabela .col-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ---------- Linha do tempo ---------- */ .juris-linha { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); } .juris-linha__item { position: relative; padding: 6px 0 14px 18px; } .juris-linha__item::before { content: ""; position: absolute; left: -7px; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--azul); } .juris-linha__item.is-intimacao::before { background: var(--carimbo); } .juris-linha__mes { color: var(--ink-2); font-size: var(--fs-xs); text-transform: uppercase; margin: var(--sp-3) 0 var(--sp-1); } /* Nome cru do PJe na linha do tempo: pista, não título — uma linha, cortada, inteiro no `title`. Sem o corte, 70 caracteres de nome de arquivo empurram a data para fora. */ .linha-nome-pje { display: inline-block; max-width: 48ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } /* ---------- Citação ---------- */ .juris-cit { display: inline-flex; align-items: center; gap: 5px; background: var(--azul-soft); color: var(--azul-ink); border-radius: var(--r-sm); padding: 1px 7px; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; } .juris-sem-fonte { color: var(--ink-2); font-style: italic; } /* Chip de citação com fonte de OCR (frente E2). O azul da citação continua sendo o azul da citação — o que muda é o SUFIXO e a borda, para que os dois tipos de fonte não se confundam num varrimento rápido de chips. O caso duvidoso troca a cor inteira: ali a diferença precisa ser vista, não procurada. */ .juris-cit--ocr { box-shadow: inset 0 0 0 1px var(--info); } .juris-cit--ocr-alerta { background: var(--aviso-soft); color: var(--aviso); box-shadow: inset 0 0 0 1px var(--aviso); } .juris-cit__proc { font-size: 9px; letter-spacing: .04em; text-transform: uppercase; opacity: .9; border-left: 1px solid currentColor; padding-left: 5px; } /* O chip é um quando tem peça para abrir; o sublinhado do link estragaria a pastilha. Sem destino (citação antiga, sem o processo de origem) ele NÃO finge ser clicável: perde a mãozinha e desbota — a aparência tem de dizer a mesma coisa que o `title`. */ a.juris-cit, a.juris-cit:hover { text-decoration: none; color: var(--azul-ink); } a.juris-cit--ocr-alerta, a.juris-cit--ocr-alerta:hover { color: var(--aviso); } .juris-cit--sem-destino { cursor: default; opacity: .6; } /* ---------- Empty state ---------- */ .juris-vazio { text-align: center; padding: var(--sp-12) var(--sp-4); color: var(--ink-2); } .juris-vazio__icone { font-size: 34px; opacity: .5; } /* ---------- Stat ---------- */ .juris-stat { padding: var(--sp-3) var(--sp-4); } .juris-stat__num { font-family: var(--font-serif); font-size: var(--fs-2xl); font-weight: 700; line-height: 1; } .juris-stat__rotulo { color: var(--ink-2); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; } .juris-stat__delta { font-size: var(--fs-sm); } /* ---------- Coletor status ---------- */ .juris-coletor { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); } .juris-coletor .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-2); } .juris-coletor.is-online .dot { background: var(--ok); } .juris-coletor.is-offline .dot { background: var(--erro); } .juris-coletor.is-exec .dot { background: var(--azul); animation: pulso 1.2s infinite; } @keyframes pulso { 0%,100% { opacity: 1; } 50% { opacity: .3; } } /* ---------- Toast ---------- */ .juris-toast-area { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: flex; flex-direction: column; gap: 8px; } .juris-toast { background: var(--ink-0); color: var(--bg-1); padding: 10px 14px; border-radius: var(--r); box-shadow: var(--sombra); } .juris-toast--aviso { background: var(--aviso-soft); color: var(--aviso); } /* ---------- Side panel ---------- */ .juris-painel { position: fixed; right: 0; top: 0; height: 100vh; width: 480px; max-width: 92vw; background: var(--bg-1); border-left: 1px solid var(--line); box-shadow: var(--sombra); z-index: 70; padding: var(--sp-4); overflow-y: auto; } /* ---------- Alertas / banners ---------- */ .juris-banner { border-radius: var(--r); padding: 10px 14px; border: 1px solid var(--line); font-size: var(--fs-sm); } .juris-banner--aviso { background: var(--aviso-soft); color: var(--aviso); border-color: transparent; } .juris-banner--erro { background: var(--erro-soft); color: var(--erro); border-color: transparent; } .juris-banner--info { background: var(--info-soft); color: var(--info); border-color: transparent; } /* ---------- Procedência do texto (frente E2) ---------- "este texto não veio do PJe, foi lido por máquina". Sem cor literal: só tokens, que já têm par no tema escuro — por isso o selo não precisa de um segundo desenho lá. */ .juris-proc-selo { font-size: var(--fs-xs); white-space: nowrap; vertical-align: middle; } /* O ponto do selo de ALERTA pulsa uma vez ao entrar na tela. Não é enfeite: é o que separa, no canto do olho, a peça duvidosa da peça só digitalizada. `prefers-reduced- motion` desliga. */ .juris-pill--aviso.juris-proc-selo .dot { box-shadow: 0 0 0 0 currentColor; animation: juris-proc-bate 1.6s ease-out 2; } @keyframes juris-proc-bate { to { box-shadow: 0 0 0 6px transparent; } } @media (prefers-reduced-motion: reduce) { .juris-pill--aviso.juris-proc-selo .dot { animation: none; } } .juris-proc-banner > div, .juris-proc-resposta > div { margin-top: var(--sp-1); } .juris-proc-banner strong, .juris-proc-resposta strong { display: block; } .juris-proc-detalhe { margin-top: var(--sp-2); font-size: var(--fs-xs); } .juris-proc-detalhe summary { cursor: pointer; opacity: .85; } .juris-proc-detalhe dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--sp-3); margin: var(--sp-2) 0 0; } .juris-proc-detalhe dt { opacity: .8; } .juris-proc-detalhe dd { margin: 0; font-family: var(--font-mono); overflow-wrap: anywhere; } .juris-proc-detalhe--solto { color: var(--ink-2); } /* Marca na TRILHA dos autos e na linha do tempo: um sinal de uma letra, porque ali não cabe pill. Herda a cor do tom (aviso/info) por variável. */ .juris-proc-marca { font-weight: 600; color: var(--info); text-decoration: none; cursor: help; } .juris-proc-marca--alerta { color: var(--aviso); } /* ---------- Data de juntada da peça (Documento::DataJuntada) ---------- */ /* O `abbr` do navegador vem com sublinhado pontilhado e `title` em itálico; numa coluna de datas isso lê como erro de dado. Some o sublinhado, fica o cursor de ajuda — é o mesmo tratamento que `.juris-proc-marca` já dá à marca "OCR" da trilha. */ abbr[title] { text-decoration: none; cursor: help; } /* Data ESTIMADA em tom secundário: a coluna ORDENA a tabela e 78% das datas do acervo real são dedução da curva ID→data. Quem varre a coluna precisa ver, sem ler, onde a ordem repousa em palpite. Não é vermelho nem aviso: a estimativa não é defeito, é ressalva. */ .peca-data--estimada { color: var(--ink-2); } /* A legenda é bloco, não tooltip: quem precisa da ressalva é quem está lendo a coluna, e tooltip não existe no celular. Um item por linha — duas frases emendadas viram uma. */ .peca-legenda-datas__item { display: block; } /* ---------- Placeholder "em construção" ---------- */ .juris-construcao { text-align: center; padding: var(--sp-12) var(--sp-4); } .juris-construcao__icone { font-size: 42px; } /* ========== Auth (layout documento) ========== */ .juris-doc { min-height: 100vh; display: grid; place-items: center; background: var(--grad-marca); padding: var(--sp-4); } .juris-doc__wrap { width: 100%; max-width: 400px; } .juris-doc__brand { display: flex; align-items: center; justify-content: center; gap: 8px; color: #eef2fb; font-family: var(--font-serif); font-size: var(--fs-xl); margin-bottom: var(--sp-4); } .juris-doc__logo { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--azul); } .juris-doc__card { background: var(--bg-1); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--sombra); } .juris-doc__titulo { text-align: center; margin-bottom: 4px; } .juris-doc__sub { text-align: center; color: var(--ink-2); font-size: var(--fs-sm); margin-bottom: var(--sp-4); } .juris-doc__rodape { text-align: center; color: #b7c1d9; font-size: var(--fs-xs); margin-top: var(--sp-4); } .juris-doc__links { text-align: center; margin-top: var(--sp-4); font-size: var(--fs-sm); } .juris-form { display: flex; flex-direction: column; gap: var(--sp-3); } .juris-campo { display: flex; flex-direction: column; } .juris-campo--inline { flex-direction: row; align-items: center; gap: 8px; } .juris-campo--inline label { margin: 0; } .juris-alerta { border-radius: var(--r-sm); padding: 8px 12px; font-size: var(--fs-sm); margin-bottom: var(--sp-3); } .juris-alerta--ok { background: var(--ok-soft); color: var(--ok); } .juris-alerta--erro { background: var(--erro-soft); color: var(--erro); } /* ========== /dev/design ========== */ .dev-design { max-width: 1100px; } .dev-sec { margin-bottom: var(--sp-8); } .dev-sec > h2 { border-bottom: 1px solid var(--line); padding-bottom: var(--sp-2); } .dev-grid { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-start; } .dev-swatch { width: 108px; } .dev-swatch .chip { height: 44px; border-radius: var(--r-sm); border: 1px solid var(--line); } .dev-swatch code { font-size: var(--fs-xs); } .dev-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } .dev-tema { padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-0); } /* ---------- Troca de escritório (barra de cima) ---------- */ /* Só aparece com mais de um escritório — ver Juris::ShellComponent#trocar_escritorio?. */ .juris-troca-escritorio select { font: inherit; padding: 4px 8px; border-radius: var(--r); border: 1px solid var(--linha); background: var(--bg-1); color: var(--ink-0); max-width: 220px; } /* O botão existe para quem está sem JS; com JS o `onchange` já envia. */ .u-oculto-js { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* ---------- Radar › "Saiu" › dia da importação inicial ---------- */ /* A carga inicial do acervo é um dia só, com centenas de peças, e vem DOBRADA numa linha (ver app/views/radar/home/_feed.html.erb). A linha precisa ler como cabeçalho clicável, não como item de lista: daí a borda, o fundo e o cursor. O `list-style: none` + `::marker` vazio é o par que esconde o triângulo padrão no Chrome e no Safari; a seta é desenhada aqui para girar junto com o estado aberto. */ .juris-feed__carga { border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); padding: var(--sp-3); margin-bottom: var(--sp-4); } .juris-feed__carga-linha { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); cursor: pointer; list-style: none; } .juris-feed__carga-linha::-webkit-details-marker { display: none; } .juris-feed__carga-linha::marker { content: ""; } .juris-feed__carga-ver::before { content: "▸ "; } .juris-feed__carga[open] > .juris-feed__carga-linha .juris-feed__carga-ver::before { content: "▾ "; } /* Aberta, a carga não pode empurrar a coluna por 19 telas: ela rola DENTRO da própria caixa. É o que separa "nada foi escondido" de "a home virou despejo do PJe". */ .juris-feed__carga[open] > div { max-height: 60vh; overflow-y: auto; } /* ---------- Radar › "De olho" (bloco do topo) ---------- */ /* Mora aqui, e não num