/* ===================== TEMAS (Azul / Marrom / Modo Noite) ===================== Três paletas alternáveis em tempo real via atributo [data-theme] na (ver ToggleThemeMenu/SelectTheme em Home.razor + window.lexprTheme em lexpr.js). **Azul é o tema padrão** (sem atributo — cobre quem nunca abriu o seletor, e o script inline no do App.razor só adiciona o atributo quando o tema salvo é diferente do padrão). O padrão passou de Marrom para Azul em 25/08/2026, a pedido do usuário. A troca foi feita INVERTENDO as duas paletas de lugar — o azul foi para o :root sem atributo e o marrom ganhou o seu próprio [data-theme="marrom"] —, e não mudando só a chave no JS. O motivo é o flash: o CSS é aplicado antes de qualquer script rodar, então deixar o marrom no :root faria toda carga de página pintar marrom por um instante antes de virar azul. Com a inversão, quem não escolheu nada já recebe azul do próprio CSS. Cada tema define o MESMO conjunto de tokens (mesmos nomes de variável, valores diferentes) — nada no resto do arquivo depende de qual tema está ativo, só dessas variáveis. --primary-blue/--primary-blue-dark mantêm esse nome histórico (era só marrom antes) mas em cada tema carregam o claro/escuro daquela paleta (marrom, azul, ou o dourado-acobreado do Modo Noite) — variações claras/escuras da MESMA cor, não uma cor sólida substituindo tudo, conforme pedido: --primary-blue serve pra texto/ícone/traço sobre fundo (precisa contrastar com --background/--surface), --primary-blue-dark serve pra preencher botões/selos sólidos com --on-primary-text por cima (precisa contrastar com branco). */ :root { /* Tema claro (Azul/Marrom): força os controles nativos (input/select sem estilo próprio) a sempre renderizar claros — sem isso, esses campos herdam a aparência nativa escura do navegador quando o sistema operacional está em Dark Mode, ficando ilegíveis por baixo do texto claro. O Modo Noite abaixo inverte isso de propósito (color-scheme: dark), porque aí sim os controles nativos escuros são o efeito desejado. */ color-scheme: light; --primary-blue: #2F5FA8; --primary-blue-dark: #1E3F73; --secondary-green: #2E8B57; --accent-red: #C0392B; --background: #F1F6FC; --surface: #FFFFFF; --border: #CFE0F2; --text-primary: #16233A; --text-secondary: #4E6785; --text-muted: #8AA0BC; --selection: #E1EDFB; --on-primary-text: #FFFFFF; --toolbar-icon: #35608F; --folder-icon: #5A87BE; --success-green: #2E8B57; --topbar-bg: #F5F9FE; --paw-accent: #7FB3E8; --overlay-bg: #16233A; --pdf-bg: #4A4A4A; --shadow-tint: 15, 30, 55; --border-soft: #E6F0FA; /* ---------- Modernização (raios/sombras consistentes em vez de valores soltos) ---------- */ --radius-sm: 8px; --radius-md: 9px; --radius-lg: 12px; --shadow-xs: 0 1px 2px rgba(var(--shadow-tint), 0.05); --shadow-sm: 0 2px 8px rgba(var(--shadow-tint), 0.07); --shadow-md: 0 6px 20px rgba(var(--shadow-tint), 0.10); --font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --font-size-small: 12px; --font-size-normal: 13.5px; --font-size-medium: 15px; --font-size-large: 18px; --font-size-title: 20px; } /* ---------- Marrom: a paleta original do CHICO, agora uma escolha e não mais o padrão. Mesma estrutura clara do Azul, troca só o matiz de marca. ---------- */ :root[data-theme="marrom"] { --primary-blue: #6B4423; --primary-blue-dark: #4A2E16; --secondary-green: #2E8B57; --accent-red: #C0392B; --background: #FBF6EF; --surface: #FFFFFF; --border: #E6D9C8; --text-primary: #2E2016; --text-secondary: #74604C; --text-muted: #9C8874; --selection: #F3E6D6; --on-primary-text: #FFFFFF; --toolbar-icon: #7A5230; --folder-icon: #A47148; --success-green: #2E8B57; --topbar-bg: #FDF6EE; --paw-accent: #C89B6C; /* Fundo sólido pra chrome flutuante que precisa SEMPRE contrastar com texto claro por cima (barra de seleção de texto) — independente do tema, então não pode reaproveitar --text-primary (que no Modo Noite vira quase branco e "sumiria" com o próprio texto branco em cima). */ --overlay-bg: #2E2016; /* Fundo neutro atrás do leitor de PDF (pdf.js) — não é cor de marca, só o "tapete" cinza por trás das páginas; no Modo Noite fica mais escuro pra não destoar do resto. */ --pdf-bg: #4A4A4A; --shadow-tint: 43, 28, 15; /* Borda mais clara que --border, pra uso em áreas grandes (cards, painéis) onde uma borda no tom "cheio" pesaria demais — a ideia é diferença de fundo + fio quase imperceptível. */ --border-soft: #EFE6D9; } /* ---------- Modo Noite: fundo quase preto, cards em cinza bem escuro, texto branco/cinza claro — mesma estrutura de tokens, só invertendo a escala de luminância. Mantém o acento dourado-acobreado da marca (variação clara/escura da MESMA cor, não troca de matiz), só reajustado pra ler bem sobre fundo escuro em vez de sobre o creme claro original. */ :root[data-theme="noite"] { color-scheme: dark; --primary-blue: #D9A55C; --primary-blue-dark: #A66A2E; --secondary-green: #4CAF7D; --accent-red: #E0685A; --background: #121212; --surface: #1C1C1C; --border: #333333; --text-primary: #F2F2F2; --text-secondary: #B8B8B8; --text-muted: #808080; --selection: #2A2A2A; --on-primary-text: #FFFFFF; --toolbar-icon: #D9A55C; --folder-icon: #C99257; --success-green: #4CAF7D; --topbar-bg: #181818; --paw-accent: #D9A55C; --overlay-bg: #000000; --pdf-bg: #0D0D0D; --shadow-tint: 0, 0, 0; --border-soft: #2A2A2A; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; padding: 0; font-family: var(--font-family); background: var(--background); color: var(--text-primary); font-size: var(--font-size-normal); } .lexpr-icon { flex-shrink: 0; } button { font-family: var(--font-family); } .lexpr-app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; } /* ===================== BARRA SUPERIOR (marca + pesquisa) ===================== */ .lexpr-topbar { display: flex; align-items: center; background: var(--topbar-bg); border-bottom: 1px solid var(--border-soft); padding: 18px 24px; gap: 24px; flex-shrink: 0; } .lexpr-brand { display: flex; align-items: center; gap: 14px; color: var(--text-primary); white-space: nowrap; } .lexpr-brand-icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--primary-blue-dark); color: var(--on-primary-text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; box-shadow: var(--shadow-xs); } .lexpr-brand-text { display: flex; flex-direction: column; line-height: 1.2; } .lexpr-brand-title { font-size: 21px; font-weight: 700; letter-spacing: 0.01em; color: var(--primary-blue-dark); } .lexpr-brand-subtitle { font-size: 11px; color: var(--text-muted); max-width: 210px; line-height: 1.3; /* .lexpr-brand (pai) tem white-space:nowrap pro título "CHICO" não quebrar — sem isso aqui pra sobrescrever, o subtítulo mais longo ("Central Hipertextual...") ignorava o max-width (nowrap não permite quebra nenhuma) e ficava escondido atrás da barra de pesquisa. */ white-space: normal; } .lexpr-search-wrap { flex: 1; display: flex; align-items: stretch; gap: 12px; max-width: 860px; } .lexpr-search-box { flex: 1; display: flex; align-items: center; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 0 14px; gap: 10px; box-shadow: var(--shadow-xs); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .lexpr-search-box:focus-within { border-color: var(--paw-accent); box-shadow: var(--shadow-sm); } .lexpr-search-box input { flex: 1; min-width: 0; border: none; outline: none; padding: 11px 0; font-family: var(--font-family); font-size: var(--font-size-medium); background: transparent; /* Sem isso, esse campo (diferente de todo outro input do app) ficava sem "color" explícito — herdava a aparência nativa do navegador, que em Dark Mode do SO renderiza texto branco; como o fundo da caixa é claro (.lexpr-search-box usa --surface), o texto digitado ficava branco sobre fundo claro: invisível, mesmo a busca funcionando por baixo (autocomplete reagia normalmente). Ver aviso já existente no topo do arquivo (:root, color-scheme). */ color: var(--text-primary); } .lexpr-search-box input::placeholder { color: var(--text-muted); } .lexpr-search-box .lexpr-icon { color: var(--text-muted); } /* Dica visual de atalho (⌘K) — só decorativa, sem funcionalidade nova associada. */ .lexpr-search-kbd { display: flex; align-items: center; gap: 2px; flex-shrink: 0; padding: 3px 6px; border-radius: 5px; background: var(--background); border: 1px solid var(--border-soft); color: var(--text-muted); font-size: 11px; font-weight: 600; line-height: 1; } .lexpr-search-submit { background: transparent; border: none; cursor: pointer; color: var(--text-secondary); display: flex; align-items: center; padding: 4px; border-radius: 4px; } .lexpr-search-submit:hover { color: var(--primary-blue); } /* Autocomplete (sugestões ao vivo) da barra de pesquisa do topo — ver UpdateLiveSuggestions em Home.razor. O ancora precisa de position:relative pra a lista posicionar exatamente sob a caixa de busca (não sob a lexpr-search-wrap inteira, que também inclui o botão "Pesquisa avançada" ao lado). */ .lexpr-search-box-anchor { position: relative; flex: 1; min-width: 0; } .lexpr-live-suggestions { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 6px; z-index: 60; max-height: 360px; overflow-y: auto; } .lexpr-live-suggestion-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 6px; cursor: pointer; } .lexpr-live-suggestion-item:hover { background: var(--selection); } .lexpr-live-suggestion-item .lexpr-icon { color: var(--text-muted); margin-top: 2px; flex-shrink: 0; } /* flex:1 + min-width:0 é o que permite o texto ENCOLHER dentro do item flex (sem isso, o min-content width padrão de um item flex trava no tamanho da string inteira, e migalhas de pão longas — comuns nesta base — vazam pra fora da caixa em vez de truncar). */ .lexpr-live-suggestion-body { flex: 1; min-width: 0; } .lexpr-live-suggestion-title { font-size: var(--font-size-normal); font-weight: 600; color: var(--primary-blue); } /* Só o CAMINHO na árvore (lei > título > capítulo...) — 1 linha só agora que o trecho de verdade (.lexpr-live-suggestion-desc, abaixo) é quem carrega a informação principal de "onde bateu". */ .lexpr-live-suggestion-meta { font-size: 11px; color: var(--text-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* Trecho de dentro do artigo em torno do termo pesquisado, com a(s) palavra(s) rachurada(s) (ver .lexpr-search-term-match) — é o que permite ver, ainda na lista de sugestões, ONDE dentro do dispositivo o termo aparece, sem precisar abrir o documento primeiro. */ .lexpr-live-suggestion-desc { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .lexpr-live-suggestion-footer { padding: 8px 10px; margin-top: 2px; border-top: 1px solid var(--border-soft); font-size: 12px; font-weight: 600; color: var(--primary-blue); cursor: pointer; border-radius: 6px; } .lexpr-live-suggestion-footer:hover { background: var(--selection); } .lexpr-advanced-btn { display: flex; align-items: center; gap: 8px; background: var(--primary-blue-dark); color: var(--on-primary-text); border: none; border-radius: var(--radius-md); padding: 0 18px; height: 44px; font-size: var(--font-size-normal); font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.15s ease; } .lexpr-advanced-btn:hover { background: color-mix(in srgb, var(--primary-blue-dark) 82%, black); } .lexpr-topbar-right { margin-left: auto; display: flex; align-items: center; } .lexpr-icon-btn { display: flex; align-items: center; gap: 7px; background: transparent; border: none; color: var(--text-secondary); font-size: var(--font-size-normal); cursor: pointer; padding: 8px 12px; border-radius: var(--radius-sm); white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } .lexpr-icon-btn:hover { background: var(--selection); color: var(--primary-blue); } /* ===================== SEGUNDA BARRA (ações, suspensa) ===================== */ /* Na altura de repouso (mouse longe) só existe essa faixa — é ela que faz a área de leitura ganhar espaço, já que a barra de verdade some do fluxo normal (position:absolute). 16px (em vez dos 6px originais) dá uma área de "pegar o mouse" bem mais generosa — com 6px, qualquer tremor da mão tirava o mouse da faixa antes da barra terminar de descer, fechando na hora. */ .lexpr-toolbar-hover-zone { position: relative; height: 16px; flex-shrink: 0; z-index: 30; } /* Só uma tirinha fina (visual) dentro da faixa de 16px, avisando "tem uma barra escondida aqui" — sem isso ninguém acharia esse recurso sozinho. A área que reage ao mouse continua sendo a faixa inteira de 16px, não só essa linha. */ .lexpr-toolbar-hover-zone::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--border); opacity: 0.7; /* Mesmo atraso de 0.22s do .lexpr-toolbar (só na volta/reaparecimento) — sem isso, essa tirinha de dica reaparecia na hora (:hover é instantâneo por natureza), enquanto a barra de verdade ainda estava visível esperando o próprio atraso pra sumir — as duas ficavam visíveis juntas por ~0.4s, parecendo uma "linha estranha" flutuando em cima da barra. */ transition: opacity 0.18s ease 0.22s; } /* Com a barra revelada, essa linha fica "flutuando" por cima dela (some antes na pintura da página do que a barra, mesmo estando embaixo — a barra tem só border-bottom, não cobre esse pedaço). Como a barra já está bem visível nesse momento, a dica não faz mais falta. */ .lexpr-toolbar-hover-zone:hover::after { opacity: 0; /* Some junto com a barra aparecendo — instantâneo, sem o atraso de 0.22s (esse é só pra quando ela volta a aparecer, ver regra base acima). */ transition-delay: 0s; } .lexpr-toolbar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 12px; overflow-x: auto; box-shadow: 0 8px 20px rgba(30, 20, 12, 0.18); /* -100% só sobe a altura da própria barra — não é suficiente pra "escapar" da barra de marca/pesquisa logo acima, então a barra escondida ainda ficava sobreposta nela; o mouse em cima da barra de pesquisa contava como "descendente hover", abria a barra, o que tirava o mouse de cima dela, fechava de novo, e ficava piscando sem parar. +120px de folga garante que, escondida, ela fique inteiramente acima da barra de marca/pesquisa (~65px de altura). */ transform: translateY(calc(-100% - 120px)); /* O delay de 0.22s é só pra ESCONDER (essa é a regra "padrão", pra onde ela volta quando o :hover deixa de valer) — mostrar continua instantâneo, isso é sobrescrito na regra ":hover" logo abaixo com delay 0s. Sem esse atraso, a borda de baixo da barra revelada é uma linha exata: 1px acima do fim dela ainda conta como "em cima", 1px abaixo já não conta — qualquer tremor natural da mão bem nessa linha (ex.: descendo o mouse da barra pra clicar em algo logo abaixo) cruza esse limite várias vezes por segundo, abrindo e fechando sem parar (o bug reportado). Com o atraso, um cruzamento rápido e sem querer nem chega a iniciar a animação de esconder antes do mouse "voltar" — e mesmo que já tenha começado, value voltando pro estado :hover cancela a transição pendente (comportamento padrão do CSS), então visualmente nunca pisca. */ transition: transform 0.18s ease 0.22s; } /* "Ponte" invisível colada embaixo da barra revelada — reforça a folga do delay acima com uma folga geométrica também: mais 16px de área que ainda conta como "em cima da barra" antes da régua de abas de verdade começar. Como é um pseudo-elemento do próprio .lexpr-toolbar, continua sendo "descendente" pra fins de :hover — não muda nada visualmente (sem fundo, sem borda). */ .lexpr-toolbar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; } /* Passou o mouse em qualquer ponto da tirinha (ou já na própria barra, enquanto ela está descendo) — revela a barra por cima do conteúdo, sem empurrar nada. delay 0s aqui (contra o 0.22s da regra base, só pra esconder) garante que MOSTRAR continua instantâneo — o atraso é uma mão única, só quando a barra está indo embora. */ .lexpr-toolbar-hover-zone:hover .lexpr-toolbar { transform: translateY(0); transition-delay: 0s; } .lexpr-toolbar-btn { display: flex; align-items: center; gap: 7px; background: transparent; border: none; color: var(--toolbar-icon); font-size: var(--font-size-normal); cursor: pointer; padding: 10px 12px; white-space: nowrap; } .lexpr-toolbar-btn:hover { background: var(--background); } /* ===================== CORPO ===================== */ .lexpr-body { display: flex; flex: 1; min-height: 0; } /* ---------- PAINEL ESQUERDO: ÁRVORE ---------- */ .lexpr-tree-panel { width: 320px; min-width: 220px; max-width: 560px; background: var(--surface); display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; } /* Barra arrastável entre a árvore e a área de leitura (ver lexpr.js/lexprResizer) — troca o antigo "resize: horizontal" do painel (só funcionava puxando um cantinho de ~15px no canto inferior direito, fácil de não perceber) por uma faixa clicável na altura inteira. */ .lexpr-tree-resizer { width: 5px; flex-shrink: 0; cursor: col-resize; background: var(--border-soft); position: relative; } .lexpr-tree-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; left: -3px; right: -3px; } .lexpr-tree-resizer:hover, .lexpr-tree-resizer.dragging { background: var(--primary-blue); } .lexpr-tree-tabs { display: flex; gap: 4px; padding: 14px 16px 0; border-bottom: 1px solid var(--border-soft); flex-shrink: 0; } .lexpr-tree-tab { flex: 0 0 auto; background: transparent; border: none; padding: 8px 4px 12px; font-size: var(--font-size-normal); font-weight: 600; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; transition: color 0.12s ease; } .lexpr-tree-tab:hover { color: var(--text-primary); } .lexpr-tree-tab.active { color: var(--primary-blue); border-bottom-color: var(--primary-blue); } .lexpr-tree-filter { display: flex; align-items: center; gap: 8px; padding: 14px 16px; flex-shrink: 0; } .lexpr-tree-filter-box { flex: 1; display: flex; align-items: center; gap: 6px; background: var(--background); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 0 10px; color: var(--text-muted); } .lexpr-tree-filter-box input { flex: 1; min-width: 0; border: none; outline: none; padding: 8px 0; font-family: var(--font-family); font-size: var(--font-size-small); background: transparent; color: var(--text-primary); } .lexpr-tree-filter-icon-btn { background: var(--background); border: 1px solid var(--border-soft); border-radius: var(--radius-md); color: var(--text-secondary); cursor: pointer; padding: 8px; display: flex; } .lexpr-tree { flex: 1; overflow-y: auto; padding: 8px 12px 16px 12px; } .lexpr-tree-node-label { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--font-size-normal); color: var(--text-primary); transition: background 0.1s ease; } .lexpr-tree-node-label:hover { background: var(--background); } .lexpr-tree-node-label.selected { background: var(--selection); color: var(--primary-blue); font-weight: 600; } .lexpr-tree-caret { width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); flex-shrink: 0; transition: transform 0.12s ease; } .lexpr-tree-caret.expanded { transform: rotate(90deg); } .lexpr-tree-node-icon { color: var(--folder-icon); flex-shrink: 0; } .lexpr-tree-node-label.selected .lexpr-tree-node-icon { color: var(--primary-blue); } .lexpr-tree-node-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lexpr-tree-node-meta { font-size: 10.5px; color: var(--success-green); display: block; margin-top: 1px; } .lexpr-tree-children { margin-left: 18px; } .lexpr-tree-empty-folders { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 16px 24px; color: var(--text-muted); font-size: var(--font-size-small); text-align: center; } .lexpr-tree-empty-folders .lexpr-icon { color: var(--border); } .lexpr-tree-empty-folders-btn { display: flex; align-items: center; gap: 6px; margin-top: 6px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 8px 16px; font-size: var(--font-size-small); font-weight: 600; color: var(--primary-blue); cursor: pointer; box-shadow: var(--shadow-xs); transition: background 0.12s ease, border-color 0.12s ease; } .lexpr-tree-empty-folders-btn:hover { background: var(--selection); border-color: var(--paw-accent); } /* ---------- ÁREA PRINCIPAL ---------- */ .lexpr-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .lexpr-tabs { display: flex; align-items: flex-end; background: var(--background); border-bottom: 1px solid var(--border-soft); overflow-x: auto; overflow-y: hidden; flex-shrink: 0; gap: 2px; padding: 8px 12px 0; /* Com muitas abas a barra de rolagem nativa some no fim da própria caixa (embaixo do texto das abas) sem esse respiro — ficava encostada/por cima do conteúdo das abas. */ padding-bottom: 4px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .lexpr-tabs::-webkit-scrollbar { height: 6px; } .lexpr-tabs::-webkit-scrollbar-track { background: transparent; } .lexpr-tabs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } /* Abas com "cara de navegador moderno": cantos de cima arredondados, sem linha divisória grossa entre elas — só a diferença de fundo (ativa=branca, inativa=transparente) e uma linha fina embaixo já separam uma da outra. */ .lexpr-tab { display: flex; align-items: center; gap: 7px; padding: 9px 16px; font-size: var(--font-size-normal); color: var(--text-secondary); cursor: pointer; white-space: nowrap; background: transparent; border-radius: var(--radius-sm) var(--radius-sm) 0 0; transition: background 0.12s ease, color 0.12s ease; } .lexpr-tab:hover { background: color-mix(in srgb, var(--surface) 55%, transparent); color: var(--text-primary); } .lexpr-tab.active { background: var(--surface); color: var(--text-primary); font-weight: 600; box-shadow: inset 0 -2px 0 var(--primary-blue); } .lexpr-tab .lexpr-icon { color: inherit; opacity: 0.7; } .lexpr-tab-close { margin-left: 2px; color: var(--text-muted); background: transparent; border: none; cursor: pointer; padding: 2px; border-radius: 3px; display: flex; } .lexpr-tab-close:hover { color: var(--accent-red); background: var(--border-soft); } .lexpr-tab-add { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-bottom: 4px; border-radius: var(--radius-sm); background: transparent; border: none; color: var(--text-muted); cursor: pointer; flex-shrink: 0; transition: background 0.12s ease, color 0.12s ease; } .lexpr-tab-add:hover { color: var(--primary-blue); background: var(--surface); } /* Breadcrumb + ações do documento */ .lexpr-breadcrumb-bar { display: flex; align-items: center; background: var(--surface); border-bottom: 1px solid var(--border-soft); padding: 10px 24px; flex-shrink: 0; gap: 12px; } .lexpr-breadcrumb { flex: 1; font-size: var(--font-size-small); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 7px; letter-spacing: 0.01em; } .lexpr-breadcrumb .sep { color: var(--border); } .lexpr-doc-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .lexpr-doc-action-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--surface); border: 1px solid var(--border-soft); color: var(--text-secondary); cursor: pointer; padding: 0; border-radius: var(--radius-sm); transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease; } .lexpr-doc-action-btn:hover { background: var(--selection); border-color: var(--paw-accent); color: var(--primary-blue); } .lexpr-doc-action-btn.active { background: var(--primary-blue); border-color: var(--primary-blue); color: var(--on-primary-text); } .lexpr-doc-action-btn.active:hover { background: var(--primary-blue); color: var(--on-primary-text); } /* .lexpr-doc-action-btn é reaproveitada em vários lugares menores (remover favorito, ações de pasta, leitor de PDF) — o tamanho 36-40px do pedido é só pra barra de ferramentas do documento (breadcrumb), não pra esses outros usos, senão ficaria grande demais neles. */ .lexpr-doc-actions .lexpr-doc-action-btn { width: 38px; height: 38px; } .lexpr-doc-divider { width: 1px; height: 20px; background: var(--border-soft); margin: 0 4px; } /* Área de leitura — fundo geral levemente creme (--background), documento quase branco (--surface), sem grande bloco bege atrás do artigo (ver .lexpr-doc-article.highlighted mais abaixo, que antes preenchia isso de bege sólido). */ .lexpr-reading-area { flex: 1; background: var(--background); overflow-y: auto; padding: 36px 56px 48px; position: relative; /* ancora o position:absolute do .lexpr-compare-container (ver abaixo) */ } .lexpr-reading-content { /* Antes 860px fixo — sobrava bastante espaço em branco do lado direito em telas largas (usuário reportou). 1200px aproveita bem mais a largura disponível sem deixar a linha longa demais pra ler numa tela realmente enorme; margin:auto centraliza o que ainda sobrar, em vez de deixar tudo acumulado só de um lado. */ max-width: 1200px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 40px 64px; font-size: var(--font-size-medium); color: var(--text-primary); line-height: 1.85; white-space: pre-wrap; } /* Aba Comparar: dois documentos lado a lado, cada um rolando de forma independente. Usa position:absolute + inset:0 (em vez de height:100% + margin negativa pra cancelar o padding do pai) — height:100% resolve contra a caixa de CONTEÚDO do pai (já descontado o padding de 28px+56px), então o container ficava sistematicamente mais baixo/estreito do que devia, sobrando um vão vazio embaixo. position:absolute com inset:0 preenche a caixa de padding do ancestral posicionado mais próximo (.lexpr-reading-area, com position:relative) — do jeito certo, sem depender de compensar o padding manualmente. */ .lexpr-compare-container { display: flex; align-items: stretch; position: absolute; inset: 0; } /* Arrastável (ver lexpr.js/lexprCompareResizer) — mesmo padrão visual do .lexpr-tree-resizer: uma faixa fina de verdade (não só 1px, difícil de acertar o clique) com uma área de clique um pouco maior via ::after, e destaque na cor primária ao passar o mouse/arrastar. */ .lexpr-compare-divider { width: 5px; flex-shrink: 0; cursor: col-resize; background: var(--border); position: relative; } .lexpr-compare-divider::after { content: ""; position: absolute; top: 0; bottom: 0; left: -3px; right: -3px; } .lexpr-compare-divider:hover, .lexpr-compare-divider.dragging { background: var(--primary-blue); } .lexpr-compare-pane { flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; } .lexpr-compare-pane-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--background); flex-shrink: 0; /* flex-wrap: com a divisória arrastável (ver .lexpr-compare-divider), um dos lados pode ficar estreito o bastante pra "Escolher na árvore" + "Escolher PDF" + os 2 botões de fonte não caberem numa linha só — sem wrap, .lexpr-compare-pane-actions (que não encolhe abaixo do seu conteúdo) vazava pra fora do cabeçalho e invadia visualmente o painel do outro lado. Com wrap, as ações só descem pra uma segunda linha (cabeçalho cresce em altura, sem vazar). */ flex-wrap: wrap; } .lexpr-compare-pane-label { font-size: var(--font-size-small); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lexpr-compare-pane-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .lexpr-compare-choose-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--primary-blue); background: transparent; border: 1px solid var(--primary-blue); border-radius: 5px; padding: 4px 9px; cursor: pointer; white-space: nowrap; } .lexpr-compare-choose-btn:hover { background: color-mix(in srgb, var(--primary-blue) 10%, transparent); } .lexpr-compare-choose-btn.armed { background: var(--primary-blue); color: var(--on-primary-text); } .lexpr-compare-clear-btn { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: 4px; } .lexpr-compare-clear-btn:hover { background: var(--surface); color: var(--text-primary); } .lexpr-compare-pane-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 28px; } /* Dentro do Comparar cada painel já é a própria "página" (tem seu próprio fundo/padding) — sem o cartão branco/borda que .lexpr-reading-content ganhou pra área de leitura normal, senão duplicava padding e criava uma borda solta dentro de uma área que já é branca. */ .lexpr-compare-pane-body .lexpr-reading-content { max-width: none; border: none; border-radius: 0; padding: 0; background: transparent; } .lexpr-compare-empty { color: var(--text-muted); font-size: var(--font-size-small); text-align: center; padding: 40px 20px; } /* ===================== COMPARAR: POPOVER "ESCOLHER PDF" ===================== */ /* Mesmo botão/estilo de "Escolher na árvore" (.lexpr-compare-choose-btn), só que abre um popover em vez de armar o clique na árvore — lista os documentos externos já enviados antes e a opção de enviar um novo agora, pra comparar (ex.) um acórdão do STF com um dispositivo da legislação sem precisar abrir o PDF num leitor à parte primeiro. */ .lexpr-compare-pdf-picker { position: relative; display: inline-flex; } .lexpr-compare-pdf-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 110; width: 260px; max-height: 320px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 6px; } /* No lado direito o popover abriria pra fora da tela se ancorado à esquerda do botão — encosta pela direita em vez disso. */ .lexpr-compare-pdf-menu-right { left: auto; right: 0; } .lexpr-compare-pdf-menu-upload { display: flex; align-items: center; gap: 6px; padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--primary-blue); cursor: pointer; border-radius: var(--radius-sm); } .lexpr-compare-pdf-menu-upload:hover { background: var(--background); } .lexpr-compare-pdf-menu-divider { height: 1px; background: var(--border); margin: 6px 4px; } .lexpr-compare-pdf-menu-item { display: flex; align-items: center; gap: 6px; width: 100%; background: transparent; border: none; border-radius: var(--radius-sm); padding: 8px 10px; font-family: var(--font-family); font-size: 12px; color: var(--text-primary); text-align: left; cursor: pointer; } .lexpr-compare-pdf-menu-item:hover { background: var(--background); } .lexpr-compare-pdf-menu-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lexpr-compare-pdf-menu-empty { padding: 10px 8px; font-size: 12px; color: var(--text-muted); } /* Lado da comparação preenchido com um documento externo inteiro (em vez de um dispositivo da legislação ou um trecho de texto livre) — usa o MESMO leitor PDF.js do resto do app (ver .lexpr-pdf-container-outer/.lexpr-pdf-container acima), então precisa da mesma estrutura flex:1 + position:relative (o container de verdade é que fica position:absolute+inset:0 lá dentro — exigência do próprio PDFViewer do pdf.js), no lugar do padding/scroll de .lexpr-compare-pane-body (o PDF já rola e pagina sozinho). */ .lexpr-compare-pane-body-pdf { flex: 1; min-height: 0; position: relative; overflow: hidden; background: var(--pdf-bg); } /* Documento completo (rolagem contínua) */ .lexpr-doc-norma-title { font-size: 19px; font-weight: 700; color: var(--text-primary); margin: 0 0 4px 0; scroll-margin-top: 16px; } .lexpr-doc-norma-updated { font-size: var(--font-size-small); color: var(--success-green); margin-bottom: 28px; display: block; } .lexpr-doc-h2, .lexpr-doc-h3, .lexpr-doc-h4, .lexpr-doc-h5 { color: var(--primary-blue); font-weight: 700; scroll-margin-top: 16px; } .lexpr-doc-h2 { font-size: 17px; margin: 46px 0 8px 0; text-align: center; } .lexpr-doc-h3 { font-size: 15.5px; margin: 36px 0 8px 0; text-align: center; } .lexpr-doc-h4 { font-size: var(--font-size-medium); margin: 28px 0 6px 0; text-align: center; } .lexpr-doc-h5 { font-size: var(--font-size-normal); margin: 22px 0 6px 0; text-align: center; } .lexpr-doc-article-wrap { position: relative; scroll-margin-top: 16px; } .lexpr-doc-article-star { position: absolute; left: -26px; top: 8px; background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 3px; border-radius: 4px; opacity: 0; transition: opacity 0.1s ease; } .lexpr-doc-article-wrap:hover .lexpr-doc-article-star { opacity: 1; } .lexpr-doc-article-star:hover { color: #E0A100; background: var(--background); } /* Já favoritado: fica sempre visível (não só no hover) e com a cor de destaque, pra dar pra ver de relance quais artigos já foram favoritados. */ .lexpr-doc-article-star.favorited { opacity: 1; color: #E0A100; } .lexpr-doc-article-note-marker { position: absolute; left: -26px; top: 30px; background: transparent; border: none; color: var(--primary-blue); cursor: pointer; padding: 3px; border-radius: 4px; font-size: 13px; line-height: 1; } .lexpr-doc-article-note-marker:hover { background: var(--background); } /* Botão "explicar em linguagem leiga" — só aparece quando o artigo já tem uma explicação escrita (Node.PlainExplanation), não é clicável, só mostra um tooltip ao passar o mouse (ou focar via teclado) e some ao tirar o mouse de cima. Puramente CSS, sem JS. */ .lexpr-doc-article-explain { position: absolute; left: -27px; top: 51px; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: var(--primary-blue); background: color-mix(in srgb, var(--primary-blue) 12%, transparent); border: 1px solid color-mix(in srgb, var(--primary-blue) 30%, transparent); border-radius: 50%; cursor: help; outline: none; } .lexpr-doc-article-explain:hover, .lexpr-doc-article-explain:focus-visible { color: var(--on-primary-text); background: var(--primary-blue); border-color: var(--primary-blue); } .lexpr-doc-article-explain-tooltip { position: absolute; left: 26px; top: -6px; z-index: 20; width: 260px; background: var(--surface); color: var(--text-primary); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); padding: 10px 12px; font-size: 12.5px; line-height: 1.5; white-space: normal; opacity: 0; visibility: hidden; transform: translateY(2px); transition: opacity 0.12s ease, transform 0.12s ease; pointer-events: none; } .lexpr-doc-article-explain:hover .lexpr-doc-article-explain-tooltip, .lexpr-doc-article-explain:focus-visible .lexpr-doc-article-explain-tooltip { opacity: 1; visibility: visible; transform: translateY(0); } .lexpr-doc-mark { cursor: pointer; border-radius: 2px; padding: 1px 0; /* Fixo (não herda var(--text-primary)) pelo mesmo motivo do grifo de pesquisa: a cor de fundo vem de _highlightColors (sempre um pastel claro, escolhido pelo usuário, igual em qualquer tema) — no Modo Noite o texto normal vira quase branco e ficaria ilegível em cima desses fundos claros. */ color: #2B1B08; } .lexpr-doc-mark-note-icon { font-size: 11px; vertical-align: super; margin-left: 1px; } /* Grifo do termo pesquisado — some do jeito que a pessoa clicou num resultado de pesquisa (ver DocumentSectionView.HighlightSearchTerm), pra ela achar rápido onde bateu dentro de um artigo longo, sem precisar procurar com os olhos. Cor diferente dos grifos manuais (.lexpr-doc-mark, que podem usar qualquer uma das cores de anotação) pra não se confundir com uma anotação já existente; um flash breve de destaque chama atenção assim que a página rola até lá, sem ficar piscando pra sempre. */ .lexpr-search-highlight { background-color: #FFE066; /* Fixo (não var(--text-primary)) de propósito: o fundo continua amarelo vivo em qualquer tema, inclusive Modo Noite — texto claro por cima ficaria ilegível. */ color: #2B1B08; border-radius: 2px; padding: 1px 0; animation: lexpr-search-highlight-flash 1.6s ease-out 1; } @keyframes lexpr-search-highlight-flash { 0% { background-color: #FFA940; box-shadow: 0 0 0 3px rgba(255, 169, 64, 0.55); } 100% { background-color: #FFE066; box-shadow: 0 0 0 0 rgba(255, 169, 64, 0); } } /* Grifo "rachurado" (listrado, sem cor sólida) do termo pesquisado nas SUGESTÕES/RESULTADOS da pesquisa — ver SearchTermHighlighter — pra já dar pra ver de relance onde bateu, antes mesmo de abrir o documento. Listras diagonais em vez do amarelo cheio do .lexpr-search-highlight de propósito: esse aqui aparece em vários itens de lista ao mesmo tempo (não só um trecho dentro de um artigo), então uma cor sólida repetida a lista inteira pesaria demais na leitura; e sem animação, porque a lista já está parada na tela, não precisa chamar atenção pra rolagem nenhuma. */ .lexpr-search-term-match { /* vem do navegador com fundo amarelo sólido por padrão — sem zerar aqui, esse amarelo aparecia por trás dos vãos transparentes do gradiente abaixo e disfarçava a listra, virando um bloco quase sólido em vez do rachurado pretendido. */ background-color: transparent; background-image: repeating-linear-gradient( 45deg, rgba(255, 169, 64, 0.55) 0, rgba(255, 169, 64, 0.55) 3px, transparent 3px, transparent 6px ); border-radius: 2px; padding: 0 1px; /* Fixo, mesmo motivo do .lexpr-search-highlight acima — a listra é sempre no mesmo tom laranja/amarelo claro, em qualquer tema. */ color: #2B1B08; font-weight: 600; } .lexpr-doc-article { padding: 4px 14px; margin: 2px -14px; border-radius: var(--radius-sm); /* 1.6 ficava fino demais nas linhas quebradas dentro do MESMO parágrafo (ex.: o caput longo de um artigo, que quebra em várias linhas dentro de um único

— só o espaçamento ENTRE parágrafos vem do margin de .lexpr-doc-line, isso aqui é o espaço dentro de cada um). 1.85 casa com o valor já usado em .lexpr-reading-content, que este seletor mais específico estava sobrescrevendo pra baixo sem motivo — resultado inconsistente de artigo pra artigo, dependendo de quantas linhas cada um quebrava. */ line-height: 1.85; } /* Cada linha do corpo (caput, cada inciso, cada parágrafo) agora é o seu próprio

, não um único bloco de texto com quebras de linha cruas — era isso que deixava tudo grudado (só dependia de white-space:pre-wrap, sem nenhum respiro real entre uma linha e outra). */ .lexpr-doc-line { margin: 0 0 14px 0; } .lexpr-doc-line:last-child { margin-bottom: 0; } /* Antes um bloco bege sólido atrás do artigo inteiro — pesado demais numa leitura editorial. Agora só um fio marrom bem fino à esquerda, sem preencher o fundo. */ .lexpr-doc-article.highlighted { box-shadow: inset 2px 0 0 var(--primary-blue); } /* Tabelas dentro do corpo do artigo (prazos, alíquotas, faixas etc.) — extraídas com estrutura real pelo importador (tools/import_ricms.py via textutil) em vez de virarem texto corrido. white-space normal (não herda o pre-wrap do artigo) pra não preservar espaços/quebras indesejadas dentro de cada célula. */ .lexpr-doc-table { border-collapse: collapse; margin: 12px 0; font-size: var(--font-size-small); white-space: normal; max-width: 100%; } .lexpr-doc-table td { border: 1px solid var(--border); padding: 6px 10px; vertical-align: top; white-space: normal; } .lexpr-doc-table tr:first-child td { background: var(--background); font-weight: 600; } .lexpr-doc-table tr:nth-child(even):not(:first-child) td { background: color-mix(in srgb, var(--surface) 50%, var(--background) 50%); } /* Nota/observação de histórico legislativo (ex.: "Nova redação dada pelo art...", "Redação original que produziu efeitos...", "Revogado pelo art...", "CONVALIDAÇÃO...") — no RTF original vem como uma "caixa" de destaque editorial (tabela de 1 célula só, ver tools/import_ricms.py), não é texto normal do dispositivo. Fundo com tingimento visível (não só um fio na borda) pra ficar claro à primeira vista que é observação sobre o dispositivo, não a norma em si. */ .lexpr-doc-note { margin: 12px 0; padding: 10px 14px; border: 1px solid var(--border); border-left: 3px solid var(--primary-blue); border-radius: 4px; background: color-mix(in srgb, var(--primary-blue) 8%, var(--surface)); font-size: var(--font-size-small); font-style: italic; color: var(--text-secondary); white-space: normal; } .lexpr-doc-note p { margin: 0 0 8px 0; } .lexpr-doc-note p:last-child { margin-bottom: 0; } /* Variante pra notas de revogação ("Revogado o item... pelo art...") — vermelho em vez do marrom padrão, pra saltar aos olhos que aquele trecho não vale mais (ver DocumentSectionView.IsRevokedNote). */ .lexpr-doc-note.revoked { border-left-color: var(--accent-red); background: color-mix(in srgb, var(--accent-red) 10%, var(--surface)); color: var(--accent-red); } /* Nota de histórico que veio como parágrafo SOLTO no corpo (não de tabela 1×1 — ver ClassifyLines/DocumentSectionView) — mesmo visual de .lexpr-doc-note, só que aplicado a uma única linha já existente em vez de um bloco à parte. */ .lexpr-doc-line.lexpr-doc-history-line { padding: 8px 12px; border: 1px solid var(--border); border-left: 3px solid var(--primary-blue); border-radius: 4px; background: color-mix(in srgb, var(--primary-blue) 8%, var(--surface)); font-size: var(--font-size-small); font-style: italic; color: var(--text-secondary); } .lexpr-doc-line.lexpr-doc-history-line.revoked { border-left-color: var(--accent-red); background: color-mix(in srgb, var(--accent-red) 10%, var(--surface)); color: var(--accent-red); } /* Texto antigo citado por completo entre aspas logo após um anúncio "Redação original/anterior que produziu efeitos...:" — não é mais o texto em vigor, só consta pra referência histórica. Visual neutro/apagado (cinza tracejado), diferente do azul (observação ativa) e do vermelho (revogado): sinaliza "obsoleto", não "erro" nem "atenção". */ .lexpr-doc-line.lexpr-doc-history-quote { padding: 8px 12px; border: 1px solid var(--border); border-left: 3px dashed var(--text-muted); border-radius: 4px; background: color-mix(in srgb, var(--text-muted) 10%, var(--surface)); color: var(--text-muted); font-style: italic; } /* Hiperlinks pra outra legislação citada no texto (ver DocumentSectionView.Linkify) — externo abre em nova aba no site oficial (CONFAZ); interno abre/rola até o dispositivo dentro do próprio site (só quando ele já está no nosso banco). Sublinhado pontilhado (não sólido) pra não parecer um link de internet comum em cima de texto legal denso — mais discreto, mas ainda claramente clicável ao passar o mouse. */ .lexpr-doc-extlink, .lexpr-doc-intlink { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--primary-blue); cursor: pointer; } .lexpr-doc-extlink:hover, .lexpr-doc-intlink:hover { color: var(--primary-blue); border-bottom-style: solid; } /* Barra flutuante que aparece ao selecionar texto na área de leitura — favoritar, grifar com qualquer cor, ou anotar só o trecho selecionado. */ .lexpr-selection-toolbar { position: fixed; z-index: 100; display: flex; align-items: center; gap: 8px; /* var(--overlay-bg), não var(--text-primary): no Modo Noite o texto normal vira quase branco, então usar --text-primary aqui faria fundo e texto ficarem praticamente da mesma cor. --overlay-bg é sempre escuro o bastante pro texto claro por cima. */ background: var(--overlay-bg); color: var(--on-primary-text); border: none; border-radius: 8px; padding: 7px 10px; font-size: var(--font-size-small); box-shadow: 0 4px 12px rgba(0,0,0,0.25); white-space: nowrap; } .lexpr-selection-btn { background: transparent; border: none; color: var(--on-primary-text); cursor: pointer; display: flex; align-items: center; gap: 5px; padding: 4px 6px; border-radius: 5px; } .lexpr-selection-btn:hover { background: rgba(255,255,255,0.15); } .lexpr-selection-btn .lexpr-icon { color: #FFD24D; } .lexpr-selection-divider { width: 1px; height: 18px; background: rgba(255,255,255,0.25); } .lexpr-swatch-row { display: flex; align-items: center; gap: 5px; } .lexpr-swatch { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.4); cursor: pointer; padding: 0; } .lexpr-swatch:hover { border-color: white; transform: scale(1.1); } .lexpr-swatch-custom { width: 20px; height: 20px; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); } /* Popover pra ver/editar uma anotação já existente (clicou num trecho grifado) */ .lexpr-annotation-popover { position: fixed; z-index: 100; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); padding: 12px; width: 280px; } .lexpr-annotation-popover textarea { width: 100%; min-height: 70px; border: 1px solid var(--border); border-radius: 5px; padding: 7px; font-family: var(--font-family); font-size: var(--font-size-small); resize: vertical; margin: 8px 0; /* Sem background/color explícitos, este campo herda a aparência NATIVA do navegador — que com o SO em Dark Mode desenha fundo escuro e texto claro — mesmo com color-scheme:light forçado no :root. Mesmo problema e mesma solução do .lexpr-search-box input. */ background: var(--surface); color: var(--text-primary); } .lexpr-annotation-popover-actions { display: flex; justify-content: space-between; align-items: center; } .lexpr-annotation-popover-actions button { border: none; border-radius: 5px; padding: 6px 10px; font-size: var(--font-size-small); cursor: pointer; } .lexpr-btn-save { background: var(--primary-blue); color: white; } .lexpr-btn-save:hover { background: var(--primary-blue-dark); } .lexpr-btn-delete { background: transparent; color: var(--accent-red); } .lexpr-btn-delete:hover { background: color-mix(in srgb, var(--accent-red) 14%, var(--surface)); } /* Visão de Favoritos (duas camadas: raízes/leis -> itens favoritados) */ .lexpr-fav-view { max-width: 900px; } .lexpr-fav-header { font-size: var(--font-size-large); font-weight: 700; color: var(--text-primary); margin-bottom: 16px; } .lexpr-fav-roots { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; } .lexpr-fav-root-card { border: 1px solid var(--border); border-radius: 8px; padding: 20px 16px; cursor: pointer; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; } .lexpr-fav-root-card:hover { border-color: var(--primary-blue); background: var(--selection); } .lexpr-fav-root-icon { width: 44px; height: 44px; border-radius: 8px; background: var(--selection); color: var(--primary-blue); display: flex; align-items: center; justify-content: center; } .lexpr-fav-root-name { font-weight: 600; font-size: var(--font-size-normal); color: var(--text-primary); } .lexpr-fav-root-count { font-size: 11.5px; color: var(--text-secondary); } .lexpr-fav-back { display: flex; align-items: center; gap: 6px; background: transparent; border: none; color: var(--primary-blue); font-size: var(--font-size-small); cursor: pointer; padding: 4px 0; margin-bottom: 16px; } .lexpr-fav-back:hover { text-decoration: underline; } .lexpr-empty-state { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-muted); font-size: var(--font-size-medium); } /* ---------- PAINEL DIREITO: PESQUISA ---------- */ .lexpr-search-panel { width: 330px; min-width: 260px; background: var(--surface); border-left: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; } .lexpr-search-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: var(--font-size-medium); } .lexpr-search-panel-close { background: transparent; border: none; cursor: pointer; color: var(--text-secondary); display: flex; padding: 4px; border-radius: 4px; } .lexpr-search-panel-close:hover { background: var(--background); } .lexpr-search-panel-body { flex: 1; overflow-y: auto; padding: 14px 16px; } .lexpr-panel-tabs { display: flex; gap: 4px; background: var(--background); border-radius: 6px; padding: 3px; margin-bottom: 14px; } .lexpr-panel-tab { flex: 1; background: transparent; border: none; padding: 6px 4px; font-size: var(--font-size-small); border-radius: 5px; cursor: pointer; color: var(--text-secondary); } .lexpr-panel-tab.active { background: var(--surface); color: var(--primary-blue); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.08); } .lexpr-panel-label { font-size: var(--font-size-small); color: var(--text-secondary); margin-bottom: 6px; display: block; } .lexpr-panel-hint { font-size: 11.5px; color: var(--text-muted); margin: 0 0 10px; line-height: 1.4; } /* Aviso de que a pesquisa foi afrouxada pra conseguir responder (a expressão exata não existia em lugar nenhum). Fica junto dos resultados que ele explica — e é discreto de propósito: é uma explicação, não um erro. */ .lexpr-panel-relaxation-notice { font-size: 11.5px; color: var(--text-secondary); background: var(--background); border-left: 3px solid var(--border); border-radius: 0 5px 5px 0; padding: 7px 10px; margin: -2px 0 14px; line-height: 1.45; } .lexpr-panel-degraded-notice { font-size: 11.5px; color: var(--text-muted); background: var(--background); border: 1px dashed var(--border); border-radius: 5px; padding: 6px 9px; margin: -6px 0 14px; } .lexpr-panel-search-row { display: flex; gap: 8px; margin-bottom: 14px; } .lexpr-panel-search-row input { flex: 1; min-width: 0; background: var(--surface); color: var(--text-primary); border: 1px solid var(--border); border-radius: 5px; padding: 7px 10px; font-family: var(--font-family); font-size: var(--font-size-normal); outline: none; } .lexpr-panel-search-row input:focus { border-color: var(--primary-blue); } .lexpr-panel-search-row button { background: var(--primary-blue); color: white; border: none; border-radius: 5px; padding: 0 14px; font-size: var(--font-size-small); cursor: pointer; white-space: nowrap; } .lexpr-panel-search-row button:hover { background: var(--primary-blue-dark); } .lexpr-toggle-row { display: flex; align-items: center; gap: 8px; font-size: var(--font-size-small); color: var(--text-secondary); margin-bottom: 16px; } .lexpr-toggle { position: relative; width: 34px; height: 19px; border-radius: 10px; background: var(--border); border: none; cursor: pointer; flex-shrink: 0; transition: background 0.15s ease; } .lexpr-toggle.on { background: var(--primary-blue); } .lexpr-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: white; transition: left 0.15s ease; } .lexpr-toggle.on::after { left: 17px; } .lexpr-section-title { font-size: var(--font-size-small); font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; } .lexpr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; } .lexpr-chip { background: var(--background); border: 1px solid var(--border); border-radius: 14px; padding: 5px 11px; font-size: 11.5px; color: var(--text-secondary); cursor: pointer; } .lexpr-chip:hover { border-color: var(--primary-blue); color: var(--primary-blue); } .lexpr-results-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: var(--font-size-small); } .lexpr-results-header select { border: 1px solid var(--border); border-radius: 4px; font-size: 11.5px; padding: 3px 4px; color: var(--text-secondary); font-family: var(--font-family); /* Ver a nota em .lexpr-annotation-popover textarea: sem background explícito o controle nativo vem escuro quando o SO está em Dark Mode. */ background: var(--surface); } .lexpr-result-card { border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; margin-bottom: 10px; cursor: pointer; display: flex; gap: 10px; } .lexpr-result-card:hover { border-color: var(--primary-blue); background: var(--selection); } .lexpr-result-icon { color: var(--folder-icon); flex-shrink: 0; margin-top: 2px; } .lexpr-result-title { font-size: var(--font-size-normal); font-weight: 600; color: var(--primary-blue); margin-bottom: 3px; } .lexpr-result-meta { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; } .lexpr-result-desc { font-size: 11.5px; color: var(--text-secondary); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* Selo discreto da Pesquisa Avançada — resultado achado majoritariamente por proximidade de significado (embeddings), não por repetir as palavras digitadas. Nunca aparece na busca normal. */ .lexpr-result-semantic-badge { display: inline-block; font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: var(--primary-blue); background: color-mix(in srgb, var(--primary-blue) 12%, var(--surface)); border-radius: 8px; padding: 1px 7px; margin-left: 7px; vertical-align: middle; } /* Citação direta da legislação (item 44-46 do pedido) — cor verde (--secondary-green), distinta do azul "Encontrado por significado": citação direta é informação mais forte/confiável (vem do próprio registro oficial do STJ), não uma inferência do CHICO. */ .lexpr-result-citation-badge { display: inline-block; font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: var(--secondary-green); background: color-mix(in srgb, var(--secondary-green) 14%, var(--surface)); border-radius: 8px; padding: 1px 7px; margin-left: 7px; vertical-align: middle; } /* ===================== Selos multi-tribunal ===================== */ /* Com duas cortes na mesma lista de resultados, a sigla precisa ser identificável de relance — antes era só texto solto ("STJ · SEGUNDA TURMA"), o que bastava quando só existia um tribunal. Cinza neutro por padrão: a origem é um FATO do julgado, não um juízo de valor, e não deve competir visualmente com os selos que dizem algo sobre relevância. */ .lexpr-result-court { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--text-secondary); background: var(--selection); border: 1px solid var(--border); border-radius: 5px; padding: 0 5px; margin-right: 6px; vertical-align: middle; } /* As duas cortes recebem matizes distintos e sóbrios — só o suficiente pra diferenciar sem sugerir hierarquia entre elas na lista. */ .lexpr-result-court.lexpr-court-stf { color: var(--primary-blue); background: color-mix(in srgb, var(--primary-blue) 10%, var(--surface)); border-color: color-mix(in srgb, var(--primary-blue) 30%, var(--border)); } .lexpr-result-court.lexpr-court-stj { color: var(--secondary-green); background: color-mix(in srgb, var(--secondary-green) 10%, var(--surface)); border-color: color-mix(in srgb, var(--secondary-green) 30%, var(--border)); } /* Terceira corte da base (tribunal estadual). Matiz próprio pelo mesmo motivo das outras duas — com três origens na mesma lista, distinguir de relance passou a valer ainda mais. */ .lexpr-result-court.lexpr-court-tjpr { color: var(--folder-icon); background: color-mix(in srgb, var(--folder-icon) 12%, var(--surface)); border-color: color-mix(in srgb, var(--folder-icon) 32%, var(--border)); } /* Precedente vinculante — substitui o antigo selo fixo "PRECEDENTE QUALIFICADO", que era vocabulário do STJ aplicado a tudo. O texto agora vem do instituto real de cada corte (Tema Repetitivo N no STJ, Repercussão Geral/Súmula Vinculante no STF; ver BindingPrecedent.cs). Âmbar: informação forte sobre o PESO do julgado, distinta do verde de citação direta (que fala sobre a relação com a legislação) e do azul de busca semântica (que fala sobre COMO foi achado). */ .lexpr-result-binding-badge { display: inline-block; font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: #92600e; background: color-mix(in srgb, #d98c17 16%, var(--surface)); border-radius: 8px; padding: 1px 7px; margin-left: 7px; vertical-align: middle; } /* No tema escuro o âmbar fechado some no fundo — clareia o texto. O tema escuro deste projeto é :root[data-theme="noite"] (ver as variáveis no topo do arquivo), não "dark". */ :root[data-theme="noite"] .lexpr-result-binding-badge { color: #f0c069; background: color-mix(in srgb, #d98c17 22%, var(--surface)); } /* Link discreto (não é um botão de ação primária) — usado hoje só pra "Ver Temas Repetitivos e Controvérsias" dentro da aba de pesquisa de Jurisprudências (item 4/11 do pedido). */ .lexpr-link-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; margin: -6px 0 14px; font-size: 12px; color: var(--primary-blue); cursor: pointer; text-decoration: none; } .lexpr-link-btn:hover { text-decoration: underline; } /* Filtro de Situação da tela de Precedentes Qualificados. */ .lexpr-precedentes-filters { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 12.5px; color: var(--text-secondary); } .lexpr-precedentes-filters select { background: var(--surface); color: var(--text-primary); border: 1px solid var(--border); border-radius: 5px; padding: 4px 8px; font-size: 12.5px; } .lexpr-precedentes-pagination { display: flex; justify-content: center; gap: 10px; margin-top: 16px; } .lexpr-precedentes-pagination button:disabled { opacity: 0.4; cursor: default; } /* Card de RESULTADO ESTRUTURAL (índice semântico hierárquico, item 21 do pedido) — a própria região da legislação (Título/Capítulo/Seção/Subseção/Anexo), não um dispositivo específico. Fundo levemente destacado + borda tracejada pra diferenciar visualmente de um resultado normal sem parecer um erro/alerta. Só aparece na aba Avançada. */ .lexpr-result-card--structural { background: color-mix(in srgb, var(--primary-blue) 5%, var(--surface)); border-style: dashed; } .lexpr-result-card--structural:hover { background: color-mix(in srgb, var(--primary-blue) 10%, var(--surface)); } .lexpr-result-structural-badge { display: inline-block; font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: var(--primary-blue-dark); background: color-mix(in srgb, var(--primary-blue) 18%, var(--surface)); border-radius: 8px; padding: 1px 7px; margin-left: 7px; vertical-align: middle; } .lexpr-result-structural-cta { font-size: 11.5px; font-weight: 600; color: var(--primary-blue); } /* Detalhamento de score (lexical/semântico/final) por resultado — só aparece com ?debug=busca na URL, ferramenta interna de diagnóstico durante o desenvolvimento da busca híbrida. */ .lexpr-result-debug { font-size: 10px; font-family: ui-monospace, monospace; color: var(--text-muted); margin-top: 4px; } .lexpr-badge { display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 9px; margin-top: 5px; } .lexpr-badge.vigente { background: color-mix(in srgb, var(--success-green) 16%, var(--surface)); color: var(--success-green); } .lexpr-see-all { display: block; text-align: center; font-size: var(--font-size-small); color: var(--primary-blue); background: transparent; border: none; cursor: pointer; padding: 8px; width: 100%; } .lexpr-see-all:hover { text-decoration: underline; } /* ===================== BARRA DE STATUS ===================== */ .lexpr-statusbar { display: flex; align-items: center; gap: 20px; background: var(--surface); border-top: 1px solid var(--border-soft); padding: 6px 20px; font-size: 11px; color: var(--text-muted); flex-shrink: 0; } .lexpr-status-online { display: flex; align-items: center; gap: 5px; } .lexpr-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success-green); } .lexpr-statusbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; } .lexpr-zoom-btn { background: transparent; border: none; cursor: pointer; color: var(--text-secondary); display: flex; padding: 2px; } .lexpr-zoom-btn:hover { color: var(--primary-blue); } /* ===================== BANNER DE AVISO ===================== */ .lexpr-info-banner { background: var(--selection); color: var(--text-primary); padding: 8px 20px; font-size: var(--font-size-normal); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; } /* ===================== COMPARAR: TEXTO LIVRE (de PDF) ===================== */ .lexpr-compare-freetext { white-space: pre-wrap; font-size: var(--font-size-medium); line-height: 27px; color: var(--text-primary); } /* ===================== DOCUMENTOS (workspace de PDFs externos) ===================== */ .lexpr-docs-view { max-width: 900px; } .lexpr-docs-title { font-size: var(--font-size-title); font-weight: 700; color: var(--text-primary); margin: 0 0 4px 0; } .lexpr-docs-subtitle { color: var(--text-secondary); font-size: var(--font-size-normal); margin: 0 0 20px 0; } .lexpr-docs-dropzone { border: 2px dashed var(--border); border-radius: 10px; padding: 32px 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text-secondary); margin-bottom: 28px; transition: border-color 0.15s, background 0.15s; } .lexpr-docs-dropzone.dragover { border-color: var(--primary-blue); background: var(--selection); } .lexpr-docs-dropzone-text { font-size: var(--font-size-medium); color: var(--text-primary); font-weight: 600; margin-top: 6px; } .lexpr-docs-dropzone-or { font-size: 12px; color: var(--text-muted); } .lexpr-docs-browse-btn { background: var(--primary-blue); color: var(--on-primary-text); border: none; border-radius: 6px; padding: 8px 18px; font-size: var(--font-size-normal); cursor: pointer; margin-top: 4px; } .lexpr-docs-browse-btn:hover { background: var(--primary-blue-dark); } /* O em si fica invisível — só o label estilizado acima é clicável (o label "for" aponta pro id dele, então clicar no label já abre o seletor nativo do jeito certo). */ .lexpr-docs-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; } .lexpr-docs-section { margin-bottom: 32px; } .lexpr-fav-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .lexpr-fav-header-row .lexpr-fav-header { margin-bottom: 0; } .lexpr-docs-new-folder-btn { display: flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--border); border-radius: 6px; padding: 6px 12px; font-size: var(--font-size-small); color: var(--primary-blue); cursor: pointer; } .lexpr-docs-new-folder-btn:hover { background: var(--selection); } .lexpr-docs-folder-input-row { display: flex; gap: 8px; margin-bottom: 14px; } .lexpr-docs-folder-input-row input { flex: 1; border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; font-family: var(--font-family); font-size: var(--font-size-normal); /* Sem background/color explícitos, este campo herda a aparência NATIVA do navegador — que com o SO em Dark Mode desenha fundo escuro e texto claro — mesmo com color-scheme:light forçado no :root. Mesmo problema e mesma solução do .lexpr-search-box input. */ background: var(--surface); color: var(--text-primary); } .lexpr-docs-folder-input-row button { border: none; border-radius: 6px; padding: 7px 14px; font-size: var(--font-size-small); cursor: pointer; background: var(--primary-blue); color: var(--on-primary-text); } .lexpr-docs-folder-actions { display: flex; gap: 4px; position: absolute; top: 8px; right: 8px; } .lexpr-fav-root-card { position: relative; } .lexpr-docs-move-select { font-family: var(--font-family); font-size: 12px; color: var(--text-secondary); border: 1px solid var(--border); border-radius: 5px; padding: 4px 6px; background: var(--surface); max-width: 130px; } /* ===================== LEITOR DE PDF ===================== */ .lexpr-pdf-view { position: absolute; inset: 0; display: flex; flex-direction: column; } .lexpr-pdf-toolbar { display: flex; align-items: center; gap: 4px; padding: 8px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--surface); } .lexpr-pdf-page-indicator { display: flex; align-items: center; gap: 4px; font-size: var(--font-size-small); color: var(--text-secondary); margin: 0 6px; white-space: nowrap; } .lexpr-pdf-page-indicator input { width: 44px; text-align: center; border: 1px solid var(--border); border-radius: 4px; padding: 3px 4px; font-family: var(--font-family); font-size: var(--font-size-small); /* Sem isso, esse input herda a aparência nativa do navegador (que em Dark Mode do SO renderiza fundo escuro) mesmo com color-scheme:light forçado no :root — mesmo problema e mesma solução do .lexpr-search-box input acima. */ background: var(--surface); color: var(--text-primary); } .lexpr-pdf-find-bar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--border); background: var(--background); flex-shrink: 0; } .lexpr-pdf-find-bar input { flex: 1; max-width: 300px; border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; font-family: var(--font-family); font-size: var(--font-size-normal); /* Mesmo motivo do .lexpr-pdf-page-indicator input acima: força fundo/texto claros nos temas Marrom/Azul mesmo com o SO em Dark Mode. */ background: var(--surface); color: var(--text-primary); } .lexpr-pdf-find-bar-nav { display: flex; align-items: center; gap: 2px; } .lexpr-pdf-find-bar-nav button { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 4px; padding: 0; cursor: pointer; background: var(--surface); color: var(--text-secondary); } .lexpr-pdf-find-bar-nav button:hover:not(:disabled) { background: var(--selection); color: var(--text-primary); } .lexpr-pdf-find-bar-nav button:disabled { opacity: 0.4; cursor: default; } .lexpr-pdf-find-bar button { border: none; border-radius: 6px; padding: 6px 14px; font-size: var(--font-size-small); cursor: pointer; background: var(--primary-blue); color: var(--on-primary-text); } .lexpr-pdf-find-count { font-size: 12px; color: var(--text-secondary); } /* O PDF.js exige que o elemento "container" passado ao PDFViewer tenha position:absolute (não aceita relative nem qualquer outra coisa — checagem própria dele, ver wwwroot/lib/pdfjs/web/pdf_viewer.mjs). Por isso o wrapper externo é que fica na flexbox (flex:1 + position:relative, mesmo truque já usado em .lexpr-reading-area/.lexpr-compare- container), e o container de verdade é absolute+inset:0 dentro dele. */ .lexpr-pdf-container-outer { flex: 1; position: relative; overflow: hidden; background: var(--pdf-bg); } .lexpr-pdf-container { position: absolute; inset: 0; overflow: auto; } /* Estilo mínimo do texto/página do PDF.js pra combinar com o resto do app (as classes .page, .textLayer etc. vêm de wwwroot/lib/pdfjs/web/pdf_viewer.css, já carregado no App.razor). */ .lexpr-pdf-container .pdfViewer .page { margin: 12px auto; box-shadow: 0 2px 8px rgba(0,0,0,0.3); /* Sem isso, o grifo de busca (.textLayer) fica visivelmente deslocado (mais pra baixo/direita quanto mais longe do canto superior esquerdo) em relação à palavra de verdade no canvas. Causa: nosso reset global "* { box-sizing: border-box; }" (topo deste arquivo) força a página do pdf.js pra border-box, mas o pdf.js (pdf_viewer.css/pdf_viewer.mjs) foi desenhado assumindo content-box nela — o valor de width/height que ele calcula (via --scale-factor) e aplica IGUAL tanto na .page quanto na .textLayer é pensado como tamanho de CONTEÚDO, com a borda transparente de 9px (--page-border) somada por FORA. Em border-box, essa borda passa a ser descontada DE DENTRO do tamanho declarado — encolhendo a área de conteúdo real (onde o canvas se ajusta certinho via inset:0) em 18px (9px de cada lado), enquanto a .textLayer (que não tem borda própria) continua do tamanho cheio original. Resultado: a camada de texto fica 18px maior que o canvas por baixo, com o mesmo canto superior esquerdo — cada grifo desvia mais quanto mais longe estiver desse canto. Restaurar content-box só nesta página (não no resto do app) resolve sem precisar tocar no reset global. */ box-sizing: content-box; } /* ===================== HISTÓRICO ===================== */ .lexpr-history-view { max-width: 900px; } .lexpr-history-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .lexpr-history-toolbar input[type="text"] { flex: 1; min-width: 180px; border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; font-family: var(--font-family); font-size: var(--font-size-normal); /* Sem background/color explícitos, este campo herda a aparência NATIVA do navegador — que com o SO em Dark Mode desenha fundo escuro e texto claro — mesmo com color-scheme:light forçado no :root. Mesmo problema e mesma solução do .lexpr-search-box input. */ background: var(--surface); color: var(--text-primary); } .lexpr-history-toolbar select { border: 1px solid var(--border); border-radius: 6px; padding: 7px 8px; font-family: var(--font-family); font-size: var(--font-size-small); background: var(--surface); color: var(--text-primary); } .lexpr-history-clear-btn { border: 1px solid var(--border); border-radius: 6px; padding: 7px 12px; font-size: var(--font-size-small); color: var(--accent-red); background: transparent; cursor: pointer; white-space: nowrap; } .lexpr-history-clear-btn:hover { background: color-mix(in srgb, var(--accent-red) 14%, var(--surface)); } .lexpr-history-clear-confirm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--background); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin-bottom: 16px; font-size: var(--font-size-small); } .lexpr-history-clear-confirm button { border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; font-size: 12px; cursor: pointer; background: var(--surface); } .lexpr-history-clear-confirm button:hover { background: var(--selection); } /* ===================== TELA INICIAL (aba "Início") ===================== */ .lexpr-home-view { max-width: 980px; margin: 0 auto; padding: 12px 0 8px 0; } /* ---------- Topo: texto de boas-vindas à esquerda, mascote à direita ---------- */ .lexpr-home-hero { display: flex; align-items: center; gap: 32px; margin-bottom: 8px; } .lexpr-home-hero-text { flex: 1 1 55%; min-width: 0; } .lexpr-home-hero-image { flex: 1 1 45%; display: flex; justify-content: center; } .lexpr-home-hero-image img { max-width: 100%; height: auto; } .lexpr-home-icon { width: 64px; height: 64px; border-radius: 14px; background: var(--primary-blue-dark); color: var(--on-primary-text); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .lexpr-home-title { font-size: 26px; font-weight: 700; color: var(--text-primary); margin: 0 0 10px 0; } .lexpr-home-subtitle { font-size: var(--font-size-medium); color: var(--text-primary); line-height: 1.6; margin: 0 0 12px 0; } .lexpr-home-desc { font-size: var(--font-size-normal); color: var(--text-secondary); line-height: 1.6; margin: 0 0 32px 0; } .lexpr-home-section-title { font-size: var(--font-size-medium); font-weight: 700; color: var(--text-primary); margin-bottom: 14px; } .lexpr-home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-bottom: 22px; } .lexpr-home-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; padding: 18px 16px; background: var(--surface); } .lexpr-home-card-icon { color: var(--primary-blue-dark); margin-bottom: 12px; } .lexpr-home-card-title { font-weight: 700; font-size: var(--font-size-medium); color: var(--text-primary); margin-bottom: 6px; } .lexpr-home-card-desc { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; flex: 1; } .lexpr-home-card-link { display: flex; align-items: center; gap: 2px; color: var(--primary-blue); font-weight: 600; font-size: var(--font-size-small); margin-top: 12px; cursor: pointer; width: fit-content; } .lexpr-home-card-link:hover { text-decoration: underline; } /* ---------- Rodapé: "dados seguros" + "dica rápida" ---------- */ .lexpr-home-footer-row { display: flex; gap: 16px; margin-bottom: 8px; } .lexpr-home-footer-box { position: relative; flex: 1; background: var(--selection); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; } .lexpr-home-footer-box p { margin: 0; color: var(--text-secondary); font-size: 12.5px; line-height: 1.5; } .lexpr-home-footer-heading { display: flex; align-items: center; gap: 8px; color: var(--text-primary); font-weight: 700; font-size: var(--font-size-normal); margin-bottom: 6px; } .lexpr-home-footer-tip .lexpr-icon { position: absolute; right: 16px; bottom: 12px; color: var(--text-muted); } .lexpr-home-hint { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: var(--font-size-small); font-style: italic; } /* ===================== EASTER EGG: 5 cliques em "CHICO" ===================== */ /* Sem cursor:pointer de propósito — é um segredo, não deve parecer clicável. */ .lexpr-brand-title-clickable { user-select: none; } .lexpr-easter-overlay { position: fixed; inset: 0; background: rgba(30, 20, 12, 0.6); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 500; } .lexpr-easter-card { position: relative; width: 100%; max-width: 620px; max-height: 90vh; overflow-y: auto; background: var(--background); border: 1px solid var(--border); border-radius: 20px; padding: 44px 48px 34px; text-align: center; box-shadow: 0 24px 60px rgba(30, 20, 12, 0.35); } .lexpr-easter-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--surface); color: var(--text-secondary); box-shadow: 0 2px 8px rgba(30, 20, 12, 0.18); display: flex; align-items: center; justify-content: center; cursor: pointer; } .lexpr-easter-branch { position: absolute; top: 26px; width: 46px; height: 130px; color: var(--paw-accent); opacity: 0.55; /* É só decoração — sem isso, o ramo direito fica por cima do botão de fechar (que mora na mesma quina) e "rouba" o clique antes dele chegar no botão. */ pointer-events: none; } .lexpr-easter-branch-left { left: 14px; } .lexpr-easter-branch-right { right: 14px; transform: scaleX(-1); } .lexpr-easter-title { font-family: Georgia, "Times New Roman", serif; font-size: 25px; font-weight: 600; line-height: 1.35; color: var(--text-primary); margin: 4px 0 0 0; } .lexpr-easter-divider { width: 64px; height: 2px; background: var(--paw-accent); margin: 18px auto; } .lexpr-easter-subtitle { font-size: var(--font-size-medium); color: var(--text-primary); margin: 0 0 6px 0; } .lexpr-easter-tag { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--secondary-green); margin-bottom: 24px; } .lexpr-easter-photo-frame { border-radius: 14px; overflow: hidden; box-shadow: 0 10px 28px rgba(30, 20, 12, 0.25); margin-bottom: 20px; } .lexpr-easter-photo-frame img { display: block; width: 100%; height: auto; } .lexpr-easter-caption { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: var(--font-size-medium); color: var(--text-secondary); margin: 0; } /* ===================== CONFIGURAÇÕES: MENU "TEMA / COR DO SISTEMA" ===================== */ /* Camada transparente cobrindo a tela inteira, só pra fechar o menu num clique fora dele — mesmo truque de "clique fora fecha" que o resto do app não tinha ainda (os outros popovers só fecham pelo próprio botão/X). Fica ATRÁS do menu (z-index menor) e na FRENTE de tudo o resto, sem fundo nenhum (não escurece a tela, diferente do .lexpr-easter-overlay). */ .lexpr-theme-menu-backdrop { position: fixed; inset: 0; z-index: 105; background: transparent; border: none; cursor: default; padding: 0; } .lexpr-theme-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 110; width: 250px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 8px; } .lexpr-theme-menu-title { font-size: var(--font-size-small); font-weight: 600; color: var(--text-secondary); padding: 6px 8px 8px; } .lexpr-theme-option { display: flex; align-items: center; gap: 10px; width: 100%; background: transparent; border: none; border-radius: var(--radius-sm); padding: 9px 8px; font-family: var(--font-family); font-size: var(--font-size-normal); color: var(--text-primary); text-align: left; cursor: pointer; } .lexpr-theme-option:hover { background: var(--background); } .lexpr-theme-option.active { background: var(--selection); color: var(--primary-blue); font-weight: 600; } .lexpr-theme-swatch-group { display: flex; flex-shrink: 0; } /* As três bolinhas se sobrepõem um pouco (margin negativa), como uma amostra de paleta — mostra de relance que cada tema tem variações clara/média/escura da mesma cor, não uma cor só. */ .lexpr-theme-swatch { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--surface); box-shadow: 0 0 0 1px var(--border-soft); } .lexpr-theme-swatch + .lexpr-theme-swatch { margin-left: -6px; } .lexpr-theme-option-label { flex: 1; } .lexpr-theme-option .lexpr-icon { color: var(--primary-blue); flex-shrink: 0; } /* ===================== CENTRAL DE AJUDA ("Ajuda" na barra de ações) ===================== Modal grande sobre um véu escuro — mesma receita visual do easter egg (overlay fixo + card centralizado com raio/sombra grandes), só que maior e com corpo rolável em vez de texto curto. z-index acima do easter egg (500) e do menu de tema (105/110): é sempre a camada mais "por cima" quando aberta. */ .lexpr-help-overlay { position: fixed; inset: 0; background: rgba(30, 20, 12, 0.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 600; animation: lexpr-help-fade-in 0.15s ease-out; } @keyframes lexpr-help-fade-in { from { opacity: 0; } to { opacity: 1; } } .lexpr-help-modal { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 960px; max-height: 88vh; background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(var(--shadow-tint), 0.35); overflow: hidden; animation: lexpr-help-rise-in 0.18s ease-out; } @keyframes lexpr-help-rise-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .lexpr-help-close-x { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--surface); color: var(--text-secondary); box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1; } .lexpr-help-close-x:hover { color: var(--text-primary); } .lexpr-help-header { display: flex; align-items: center; gap: 18px; padding: 28px 64px 18px 28px; background: var(--topbar-bg); border-bottom: 1px solid var(--border-soft); flex-shrink: 0; } .lexpr-help-mascot { width: 56px; height: 56px; object-fit: contain; border-radius: 50%; background: var(--selection); padding: 6px; flex-shrink: 0; } .lexpr-help-header-text h2 { margin: 0 0 4px 0; font-size: 22px; font-weight: 700; color: var(--text-primary); } .lexpr-help-header-text p { margin: 0; font-size: var(--font-size-normal); color: var(--text-secondary); } .lexpr-help-searchbar { display: flex; align-items: center; gap: 8px; margin: 16px 28px; padding: 9px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-muted); flex-shrink: 0; } .lexpr-help-searchbar:focus-within { border-color: var(--primary-blue); } .lexpr-help-searchbar input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; font-family: var(--font-family); font-size: var(--font-size-normal); color: var(--text-primary); } .lexpr-help-search-clear { background: transparent; border: none; cursor: pointer; color: var(--text-muted); display: flex; padding: 2px; } .lexpr-help-search-clear:hover { color: var(--text-primary); } .lexpr-help-body { display: flex; flex: 1; min-height: 0; } .lexpr-help-index { width: 216px; flex-shrink: 0; overflow-y: auto; padding: 4px 12px 20px; border-right: 1px solid var(--border-soft); } .lexpr-help-index-group + .lexpr-help-index-group { margin-top: 14px; } .lexpr-help-index-title { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); padding: 8px 10px 4px; } .lexpr-help-index-item { display: flex; align-items: center; gap: 9px; width: 100%; background: transparent; border: none; border-radius: var(--radius-sm); padding: 7px 10px; font-family: var(--font-family); font-size: 12.5px; color: var(--text-secondary); text-align: left; cursor: pointer; } .lexpr-help-index-item:hover { background: var(--surface); color: var(--text-primary); } .lexpr-help-index-item .lexpr-icon { color: var(--toolbar-icon); flex-shrink: 0; } .lexpr-help-content { flex: 1; min-width: 0; overflow-y: auto; padding: 20px 28px 8px; } .lexpr-help-category + .lexpr-help-category { margin-top: 26px; } .lexpr-help-category-title { font-size: var(--font-size-medium); font-weight: 700; color: var(--text-primary); margin-bottom: 12px; } .lexpr-help-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; } .lexpr-help-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 14px 16px 16px; transition: box-shadow 0.15s ease, transform 0.15s ease; } .lexpr-help-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); } .lexpr-help-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .lexpr-help-card-icon { width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--selection); color: var(--primary-blue-dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .lexpr-help-card-step { font-size: 11px; font-weight: 700; letter-spacing: 0.03em; color: var(--text-muted); } .lexpr-help-card-title { font-weight: 700; font-size: var(--font-size-normal); color: var(--text-primary); margin-bottom: 5px; } .lexpr-help-card-desc { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; } .lexpr-help-card-swatches { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 12px; font-size: 11px; color: var(--text-secondary); } .lexpr-help-swatch-group { display: flex; } .lexpr-help-swatch { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--surface); box-shadow: 0 0 0 1px var(--border-soft); } .lexpr-help-swatch + .lexpr-help-swatch { margin-left: -5px; } .lexpr-help-swatch-group + span { margin-right: 8px; } .lexpr-help-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 60px 20px; color: var(--text-muted); font-size: var(--font-size-normal); text-align: center; } .lexpr-help-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 28px; border-top: 1px solid var(--border-soft); background: var(--topbar-bg); flex-shrink: 0; } .lexpr-help-footer-hint { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-secondary); } .lexpr-help-footer-hint .lexpr-icon { color: var(--paw-accent); flex-shrink: 0; } .lexpr-help-footer-btn { background: var(--primary-blue); color: var(--on-primary-text); border: none; border-radius: var(--radius-md); padding: 10px 20px; font-family: var(--font-family); font-size: var(--font-size-normal); font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; } .lexpr-help-footer-btn:hover { background: var(--primary-blue-dark); } @media (max-width: 760px) { .lexpr-help-index { display: none; } .lexpr-help-header { padding: 22px 56px 16px 20px; } .lexpr-help-searchbar { margin: 14px 20px; } .lexpr-help-content { padding: 16px 20px 8px; } .lexpr-help-footer { flex-direction: column; align-items: stretch; padding: 14px 20px; } .lexpr-help-footer-btn { width: 100%; } } /* ===================== BARRA DE ERRO PADRÃO DO BLAZOR ===================== #blazor-error-ui (ver MainLayout.razor) é o boilerplate padrão do template — o próprio Blazor só ALTERNA a visibilidade dele via JS (blazor.web.js remove/adiciona o atributo "hidden" a cada reconexão/erro de circuito); ele não vem com "display:none" próprio. Sem essa regra aqui, a barra "An unhandled error has occurred" fica visível permanentemente em QUALQUER carregamento da página, mesmo sem nenhum erro de verdade — o resto do app nunca definia esse estado inicial porque não usa o CSS padrão do template Blazor. */ #blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1000; background: lightyellow; color: #3a2a00; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); padding: 0.6rem 3rem 0.7rem 1.25rem; font-family: var(--font-family); } #blazor-error-ui[hidden] { display: none; } #blazor-error-ui .reload { color: inherit; text-decoration: underline; cursor: pointer; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } /* ===================== JURISPRUDÊNCIAS ===================== */ /* Painel lateral de jurisprudências relacionadas (item 21/35-37 do pedido) — reaproveita a estrutura de .lexpr-search-panel (largura/scroll/borda), só adiciona o que é específico daqui: o rótulo do dispositivo-alvo e o link "Ver todos os resultados". */ .lexpr-jurisprudencia-panel-target { font-size: 12px; font-weight: 600; color: var(--toolbar-icon); padding: 2px 0 12px; border-bottom: 1px solid var(--border); margin-bottom: 12px; } .lexpr-jurisprudencia-panel-see-all { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; background: transparent; border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 10px; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--primary-blue); cursor: pointer; } .lexpr-jurisprudencia-panel-see-all:hover { background: var(--background); } /* Aviso de ampliação hierárquica (item 41 do pedido: nunca ampliar silenciosamente) — discreto mas visível, cor de atenção suave (não erro/vermelho — ampliar não é uma falha do sistema). */ .lexpr-jurisprudencia-expansion-notice { display: flex; align-items: flex-start; gap: 8px; background: var(--selection); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 12px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.4; } .lexpr-jurisprudencia-expansion-notice svg { flex-shrink: 0; margin-top: 1px; } /* Indicação discreta de "dispositivo ativo" (item 29 do pedido: nunca borda forte/animação) — só um traço fino na margem esquerda + leve mudança de fundo, mesma linguagem visual do destaque de artigo (.lexpr-doc-article.highlighted), só mais sutil (é por LINHA, não pelo artigo inteiro). */ .lexpr-doc-line.lexpr-doc-line-active { border-left: 2px solid var(--primary-blue); padding-left: 8px; margin-left: -10px; background: var(--selection); border-radius: 0 4px 4px 0; } /* Menu "•••" (mais opções) — mesmo padrão visual do menu de tema (.lexpr-theme-menu), só mais estreito à direita do botão em vez de sob "Configurações". */ .lexpr-more-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 110; width: 260px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 6px; } .lexpr-more-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: transparent; border: none; border-radius: var(--radius-sm); padding: 8px; font-size: 12.5px; color: var(--text-primary); cursor: pointer; line-height: 1.35; } .lexpr-more-menu-item:hover:not(:disabled) { background: var(--background); } .lexpr-more-menu-item:disabled { color: var(--text-muted); cursor: default; } .lexpr-more-menu-item svg { flex-shrink: 0; } /* ===================== JURISPRUDÊNCIAS (julgado individual) ===================== */ /* A pesquisa livre reaproveita .lexpr-history-view/.lexpr-result-card (mesmo visual do painel de pesquisa da legislação) — só o julgado individual (aba própria, item 21/22 do pedido) precisa de estilo novo, parecido com a leitura de um dispositivo legal (mesma tipografia), mas com seções "EMENTA/TESE JURÍDICA/DECISÃO" tipo relatório em vez de dispositivo jurídico. */ .lexpr-julgado-view { max-width: 820px; } /* Correção C1: "Voltar aos resultados". Discreto e acima do cabeçalho oficial do julgado — é navegação do CHICO, não conteúdo do STJ, e nunca deve competir visualmente com o texto oficial (mesma separação de sempre entre o que é do tribunal e o que é do programa). */ .lexpr-julgado-back { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 10px 5px 7px; margin-bottom: 14px; font-size: 12px; font-weight: 600; color: var(--text-secondary); cursor: pointer; } .lexpr-julgado-back:hover { background: var(--background); color: var(--text-primary); } .lexpr-julgado-back svg { flex-shrink: 0; } .lexpr-julgado-header { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--toolbar-icon); margin-bottom: 6px; } .lexpr-julgado-title { font-size: 22px; margin: 0 0 10px; color: var(--text-primary); } .lexpr-julgado-meta { font-size: 13px; color: var(--text-secondary); margin-bottom: 20px; line-height: 1.6; } .lexpr-julgado-section-title { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--toolbar-icon); margin: 22px 0 8px; } /* white-space:pre-line preserva as quebras de linha reais do texto oficial do STJ (ementa/tese/ decisão vêm com \n entre "considerandos" numerados) sem precisar reprocessar o texto em C#. */ .lexpr-julgado-text { font-size: var(--font-size-normal); line-height: 1.75; color: var(--text-primary); white-space: pre-line; margin: 0; } .lexpr-julgado-tags { margin-top: 24px; padding: 10px 12px; background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12.5px; color: var(--text-secondary); } .lexpr-julgado-tags-label { font-weight: 600; color: var(--text-muted); margin-right: 6px; } .lexpr-julgado-source { margin-top: 16px; font-size: 11px; color: var(--text-muted); font-style: italic; } /* Correção C2: quando o trecho exibido no card de jurisprudência não veio da ementa (a correspondência estava na tese jurídica ou no tema), o campo de origem é rotulado — sem isso o usuário leria um texto que não bate com a ementa do julgado e não saberia de onde ele saiu. */ .lexpr-result-snippet-source { font-weight: 700; color: var(--text-secondary); margin-right: 4px; } /* ===================== C3: ranking visível de jurisprudência ===================== */ /* Número da posição no lugar do ícone da balança nos resultados de jurisprudência — a balança se repetia idêntica em todos os cards (nenhuma informação), enquanto a ordem de relevância, que já existia no cálculo, não aparecia em lugar nenhum. */ .lexpr-result-rank { flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--selection); border: 1px solid var(--border); color: var(--text-secondary); font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; } .lexpr-result-card:first-of-type .lexpr-result-rank { background: var(--primary-blue); border-color: var(--primary-blue); color: #fff; } .lexpr-result-relevance { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .lexpr-result-relevance-bar { flex: 0 0 90px; height: 4px; border-radius: 2px; background: var(--selection); overflow: hidden; } .lexpr-result-relevance-bar span { display: block; height: 100%; border-radius: 2px; background: var(--primary-blue); } .lexpr-result-relevance-label { font-size: 10.5px; color: var(--text-muted); } /* Link pro site do tribunal (ver CourtCaseLink.cs). Fica visualmente separado do conteúdo oficial de propósito: é endereço montado pelo CHICO, não campo publicado pelo STJ. */ .lexpr-julgado-external { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border); } .lexpr-julgado-external a { display: inline-flex; align-items: center; gap: 6px; color: var(--primary-blue); font-size: 13px; font-weight: 600; text-decoration: none; } .lexpr-julgado-external a:hover { text-decoration: underline; } .lexpr-julgado-external-hint { margin-top: 4px; font-size: 11px; color: var(--text-muted); } /* Versão compacta pros cards de resultado. */ .lexpr-result-external { display: inline-block; margin-top: 6px; color: var(--primary-blue); font-size: 11.5px; font-weight: 600; text-decoration: none; } .lexpr-result-external:hover { text-decoration: underline; } /* ===================================================================================== JURISPRUDÊNCIA — DOIS CAMINHOS: PESQUISAR E EXPLORAR Navegação por categorias (facetas) do acervo tributário. Tudo aqui usa as MESMAS variáveis de tema do resto do arquivo (nenhuma cor literal, nenhum raio/sombra fora dos tokens), pra os três temas — Marrom, Azul e Modo Noite — continuarem funcionando sem uma linha a mais. ===================================================================================== */ /* A aba de Jurisprudências herda .lexpr-history-view (max-width 900px), que é a largura certa pra uma lista única. No modo Explorar são DUAS colunas (categorias + resultados), e 900px espremeria as duas. */ .lexpr-jurisprudencia-wide { max-width: 1180px; /* Container query em vez de (só) media query: o que aperta as duas colunas aqui NÃO é a largura da janela — é a largura da área de leitura, que depende da árvore da legislação estar aberta, fechada ou redimensionada pelo usuário. Numa janela de 1024px com a árvore aberta sobra menos espaço que numa de 900px em Layout de leitura. A media query no fim do bloco continua existindo como rede pra navegador sem suporte a @container. */ container-type: inline-size; container-name: explorar; } /* ---------- Seletor de caminho (Pesquisar | Explorar) ---------- */ .lexpr-mode-switch { display: flex; gap: 8px; margin: 2px 0 16px; flex-wrap: wrap; } .lexpr-mode-btn { display: flex; align-items: center; gap: 9px; flex: 1 1 220px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); font-family: var(--font-family); text-align: left; cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease; } .lexpr-mode-btn:hover { border-color: var(--primary-blue); } .lexpr-mode-btn:focus-visible { outline: 2px solid var(--primary-blue); outline-offset: 2px; } .lexpr-mode-btn.active { border-color: var(--primary-blue); background: var(--selection); color: var(--primary-blue); } .lexpr-mode-btn .lexpr-icon { flex-shrink: 0; } .lexpr-mode-btn-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .lexpr-mode-btn-text strong { font-size: 13px; } .lexpr-mode-btn-text small { font-size: 11px; color: var(--text-muted); } .lexpr-mode-btn.active .lexpr-mode-btn-text small { color: var(--text-secondary); } /* ---------- Layout de duas colunas ---------- */ .lexpr-explorar { display: grid; grid-template-columns: minmax(220px, 285px) minmax(0, 1fr); gap: 22px; align-items: start; } .lexpr-explorar-facets { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface); padding: 6px 10px 10px; } .lexpr-explorar-results { min-width: 0; } /* ---------- Grupos de categoria (accordion) ---------- */ .lexpr-facet-scope-note { margin: 8px 2px 4px; padding: 7px 9px; background: var(--background); border: 1px dashed var(--border); border-radius: 5px; font-size: 10.5px; line-height: 1.4; color: var(--text-muted); } .lexpr-facet-group { border-bottom: 1px solid var(--border-soft); padding-bottom: 8px; margin-bottom: 4px; } .lexpr-facet-group:last-of-type { border-bottom: none; } .lexpr-facet-group-header { display: flex; align-items: center; gap: 7px; width: 100%; padding: 9px 2px; background: none; border: none; color: var(--text-primary); font-family: var(--font-family); font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: left; } .lexpr-facet-group-header:hover { color: var(--primary-blue); } .lexpr-facet-group-header:focus-visible { outline: 2px solid var(--primary-blue); outline-offset: 1px; border-radius: 4px; } .lexpr-facet-group-header .lexpr-icon { color: var(--text-muted); flex-shrink: 0; } .lexpr-facet-group-name { flex: 1; min-width: 0; } /* Quantos filtros desta categoria estão ativos — precisa ser visível com o grupo FECHADO, senão um filtro esquecido dentro de um accordion recolhido viraria resultado inexplicável. */ .lexpr-facet-group-badge { flex-shrink: 0; min-width: 17px; padding: 1px 5px; border-radius: 9px; background: var(--primary-blue-dark); color: var(--on-primary-text); font-size: 10px; font-weight: 700; text-align: center; } .lexpr-facet-group-hint { margin: -4px 0 7px 20px; font-size: 10.5px; color: var(--text-muted); line-height: 1.35; } .lexpr-facet-chips { display: flex; flex-direction: column; gap: 3px; margin-left: 20px; } /* A opção é um botão de linha inteira (nome à esquerda, contagem à direita) em vez de uma "pílula" solta: com 40+ categorias, alinhar as contagens numa coluna é o que permite comparar volumes de relance — que é justamente o que o item 10 do pedido quer entregar. */ .lexpr-facet-chip { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; width: 100%; padding: 5px 8px; background: none; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text-secondary); font-family: var(--font-family); font-size: 12px; cursor: pointer; text-align: left; } .lexpr-facet-chip:hover { background: var(--selection); color: var(--text-primary); } .lexpr-facet-chip:focus-visible { outline: 2px solid var(--primary-blue); outline-offset: 1px; } .lexpr-facet-chip.is-selected { background: var(--selection); border-color: var(--primary-blue); color: var(--primary-blue); font-weight: 600; } .lexpr-facet-chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lexpr-facet-chip-count { flex-shrink: 0; font-size: 10.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .lexpr-facet-chip.is-selected .lexpr-facet-chip-count { color: var(--primary-blue); } .lexpr-facet-more { margin: 6px 0 0 28px; font-size: 11.5px; } /* ---------- Coluna de resultados ---------- */ .lexpr-explorar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .lexpr-explorar-count { font-size: 13px; color: var(--text-secondary); } .lexpr-explorar-count strong { font-size: 17px; color: var(--text-primary); font-variant-numeric: tabular-nums; } .lexpr-explorar-count-note { display: block; font-size: 11px; color: var(--text-muted); } .lexpr-explorar-sort { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-muted); } .lexpr-explorar-sort select { background: var(--surface); color: var(--text-primary); border: 1px solid var(--border); border-radius: 5px; padding: 4px 8px; font-family: var(--font-family); font-size: 12px; } /* ---------- Filtros ativos ---------- */ .lexpr-explorar-active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; } .lexpr-explorar-active-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; background: var(--selection); border: 1px solid color-mix(in srgb, var(--primary-blue) 35%, var(--border)); border-radius: 999px; color: var(--primary-blue); font-family: var(--font-family); font-size: 11.5px; cursor: pointer; } .lexpr-explorar-active-chip:hover { background: color-mix(in srgb, var(--primary-blue) 14%, var(--surface)); } .lexpr-explorar-active-chip:focus-visible { outline: 2px solid var(--primary-blue); outline-offset: 2px; } .lexpr-explorar-active-dim { color: var(--text-muted); font-size: 10.5px; } .lexpr-explorar-active-x { font-size: 13px; line-height: 1; opacity: 0.7; } .lexpr-explorar-clear { margin: 0 0 0 4px; } .lexpr-explorar-page-info { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; } /* O estado vazio herda .lexpr-empty-state, que centraliza em 100% da altura — aqui a mensagem fica logo abaixo dos filtros, onde o usuário está olhando. */ .lexpr-explorar-empty { height: auto; display: block; padding: 26px 0; text-align: center; } .lexpr-explorar-empty p { margin: 0 0 6px; } /* Atalho pros resultados — só existe em tela estreita, onde a lista de categorias empurra os resultados pra fora da tela (ver a media query no fim). */ .lexpr-explorar-jump { display: none; } /* ---------- Tela estreita: uma coluna ---------- */ @container explorar (max-width: 780px) { .lexpr-explorar { grid-template-columns: minmax(0, 1fr); gap: 16px; } .lexpr-explorar-facets { max-height: 55vh; overflow-y: auto; position: relative; } .lexpr-explorar-jump { display: block; position: sticky; bottom: 0; width: 100%; margin-top: 8px; padding: 9px 12px; background: var(--primary-blue-dark); color: var(--on-primary-text); border: none; border-radius: var(--radius-sm); font-family: var(--font-family); font-size: 12.5px; font-weight: 600; cursor: pointer; } } @media (max-width: 900px) { .lexpr-explorar { grid-template-columns: minmax(0, 1fr); gap: 16px; } /* Com uma coluna só, a lista inteira de categorias abertas ficaria entre o usuário e os resultados. Limitar a altura mantém os dois alcançáveis, e o atalho abaixo resolve o resto. */ .lexpr-explorar-facets { max-height: 55vh; overflow-y: auto; position: relative; } .lexpr-explorar-jump { display: block; position: sticky; bottom: 0; width: 100%; margin-top: 8px; padding: 9px 12px; background: var(--primary-blue-dark); color: var(--on-primary-text); border: none; border-radius: var(--radius-sm); font-family: var(--font-family); font-size: 12.5px; font-weight: 600; cursor: pointer; } .lexpr-mode-btn { flex: 1 1 100%; } } /* ============================================================================ EXPLICAÇÃO DA RELEVÂNCIA (item 17 do pedido do módulo de precisão) ---------------------------------------------------------------------------- "Por que este resultado?" — cada linha é sustentada por algo que existe no julgado (uma categoria que ele recebeu, uma expressão do texto oficial, um vínculo publicado pela corte). Visual deliberadamente discreto: é apoio à decisão de abrir ou não o julgado, não pode competir com a ementa. ========================================================================== */ .lexpr-result-why { margin-top: 6px; padding: 6px 8px; border-left: 2px solid var(--border); background: var(--background); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .lexpr-result-why-label { display: block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 3px; } .lexpr-result-why ul { margin: 0; padding-left: 14px; list-style: disc; } .lexpr-result-why li { font-size: 11.5px; line-height: 1.45; color: var(--text-secondary); } /* Quantos julgados quase idênticos foram agrupados sob este (item 16) — a informação não some da tela, só sai do topo da lista. */ .lexpr-result-duplicates { color: var(--text-muted); font-style: italic; } /* Resumo da questão jurídica que o CHICO extraiu do dispositivo, no painel lateral ("Tributo: ICMS · Questão: Substituição tributária · Contexto: ..."). */ .lexpr-jurisprudencia-panel-summary { font-size: 11.5px; line-height: 1.45; color: var(--text-secondary); background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 10px; } /* "Outros N julgados foram examinados e descartados" — explica uma lista curta sem dar a impressão de que a base é pequena. */ .lexpr-panel-hint-aside { display: block; margin-top: 3px; color: var(--text-muted); font-style: italic; } /* Mensagens de "nada a mostrar" com uma primeira frase em destaque (o motivo) seguida da orientação. Sem isto o fica no meio da linha e a frase perde a hierarquia. */ /* .lexpr-empty-state é um flex container centralizado (usado como estado vazio de tela cheia), então um dentro dele vira ITEM de flex e fica lado a lado com o texto. Ocupar a linha inteira é o que faz a primeira frase — o MOTIVO de não haver resultado — ler como título. */ .lexpr-empty-state { flex-wrap: wrap; text-align: center; } .lexpr-empty-state strong { flex: 0 0 100%; margin-bottom: 4px; color: var(--text-primary); } /* ===================== EXPORTAR (modal do botão "Exportar" da barra de ações) ===================== Mesma receita visual da Central de Ajuda (véu escuro + card centralizado, raio/sombra grandes), em escala menor: aqui é uma decisão curta (o quê, em que formato, com o quê), não uma leitura. Todas as cores saem dos tokens de tema, então Marrom/Azul/Modo Noite funcionam sem nenhuma regra específica por tema. z-index no mesmo patamar da Ajuda — é sempre a camada de cima. */ .lexpr-export-overlay { position: fixed; inset: 0; background: rgba(30, 20, 12, 0.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 620; animation: lexpr-help-fade-in 0.15s ease-out; } .lexpr-export-modal { display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: 88vh; background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(var(--shadow-tint), 0.35); overflow: hidden; animation: lexpr-help-rise-in 0.18s ease-out; } .lexpr-export-header { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--border-soft); background: var(--surface); } .lexpr-export-header-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--selection); color: var(--primary-blue); flex-shrink: 0; } .lexpr-export-header h2 { margin: 0; font-size: var(--font-size-large); color: var(--text-primary); } .lexpr-export-header p { margin: 2px 0 0; font-size: var(--font-size-small); color: var(--text-secondary); } .lexpr-export-close { margin-left: auto; width: 28px; height: 28px; border: none; border-radius: 50%; background: transparent; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .lexpr-export-close:hover:not(:disabled) { background: var(--selection); color: var(--text-primary); } .lexpr-export-close:disabled { opacity: 0.4; cursor: default; } .lexpr-export-body { padding: 16px 20px 4px; overflow-y: auto; } .lexpr-export-section + .lexpr-export-section { margin-top: 18px; } .lexpr-export-section-title { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; } /* ---------- Recorte (rádio) ---------- */ .lexpr-export-options { display: flex; flex-direction: column; gap: 4px; } .lexpr-export-option { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; text-align: left; cursor: pointer; font-family: var(--font-family); transition: background 0.12s ease, border-color 0.12s ease; } .lexpr-export-option:hover:not(:disabled) { background: var(--surface); } .lexpr-export-option.selected { background: var(--surface); border-color: var(--primary-blue); } .lexpr-export-option:disabled { opacity: 0.55; cursor: default; } .lexpr-export-radio { width: 15px; height: 15px; margin-top: 2px; border-radius: 50%; border: 1.6px solid var(--border); background: var(--surface); flex-shrink: 0; position: relative; } .lexpr-export-option.selected .lexpr-export-radio { border-color: var(--primary-blue); } .lexpr-export-option.selected .lexpr-export-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--primary-blue); } .lexpr-export-option-text { display: flex; flex-direction: column; min-width: 0; } .lexpr-export-option-label { font-size: var(--font-size-normal); color: var(--text-primary); } .lexpr-export-option-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; } /* ---------- Formato ---------- */ .lexpr-export-formats { display: flex; gap: 10px; } .lexpr-export-format { flex: 1; display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; text-align: left; font-family: var(--font-family); color: var(--text-secondary); transition: border-color 0.12s ease, box-shadow 0.12s ease; } .lexpr-export-format:hover:not(:disabled) { border-color: var(--primary-blue); } .lexpr-export-format.selected { border-color: var(--primary-blue); box-shadow: inset 0 0 0 1px var(--primary-blue); color: var(--primary-blue); } .lexpr-export-format:disabled { opacity: 0.55; cursor: default; } .lexpr-export-format span { display: flex; flex-direction: column; min-width: 0; } .lexpr-export-format strong { font-size: var(--font-size-normal); color: var(--text-primary); } .lexpr-export-format.selected strong { color: var(--primary-blue); } .lexpr-export-format small { font-size: 11px; color: var(--text-muted); } /* ---------- Incluir (caixas de marcação) ---------- */ .lexpr-export-checks { display: flex; flex-direction: column; gap: 2px; } .lexpr-export-check { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 6px 10px; border: none; border-radius: var(--radius-sm); background: transparent; text-align: left; cursor: pointer; font-family: var(--font-family); } .lexpr-export-check:hover:not(:disabled) { background: var(--surface); } .lexpr-export-check:disabled { opacity: 0.55; cursor: default; } .lexpr-export-checkbox { width: 15px; height: 15px; margin-top: 2px; border-radius: 4px; border: 1.6px solid var(--border); background: var(--surface); flex-shrink: 0; position: relative; } .lexpr-export-check.checked .lexpr-export-checkbox { background: var(--primary-blue); border-color: var(--primary-blue); } .lexpr-export-check.checked .lexpr-export-checkbox::after { content: ""; position: absolute; left: 4px; top: 0.5px; width: 4px; height: 8px; border: solid var(--on-primary-text); border-width: 0 2px 2px 0; transform: rotate(45deg); } .lexpr-export-check-text { display: flex; flex-direction: column; min-width: 0; } .lexpr-export-check-label { font-size: var(--font-size-normal); color: var(--text-primary); } .lexpr-export-check-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; } .lexpr-export-privacy { display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 0; font-size: 11.5px; color: var(--text-muted); } .lexpr-export-privacy .lexpr-icon { flex-shrink: 0; margin-top: 1px; } /* ---------- Avisos e erro ---------- */ .lexpr-export-notice, .lexpr-export-error { display: flex; align-items: flex-start; gap: 7px; margin-top: 14px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: var(--font-size-small); line-height: 1.45; } .lexpr-export-notice { background: var(--surface); border: 1px dashed var(--border); color: var(--text-secondary); } .lexpr-export-error { background: color-mix(in srgb, var(--accent-red) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent-red) 35%, var(--surface)); color: var(--accent-red); } .lexpr-export-notice .lexpr-icon, .lexpr-export-error .lexpr-icon { flex-shrink: 0; margin-top: 1px; } .lexpr-export-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 20px; text-align: center; color: var(--text-muted); font-size: var(--font-size-small); } /* ---------- Rodapé ---------- */ .lexpr-export-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border-soft); background: var(--surface); } .lexpr-export-busy { display: flex; align-items: center; gap: 8px; margin-right: auto; font-size: var(--font-size-small); color: var(--text-secondary); } .lexpr-export-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--primary-blue); animation: lexpr-export-spin 0.7s linear infinite; } @keyframes lexpr-export-spin { to { transform: rotate(360deg); } } .lexpr-export-btn-secondary, .lexpr-export-btn-primary { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-sm); font-family: var(--font-family); font-size: var(--font-size-normal); cursor: pointer; border: 1px solid transparent; } .lexpr-export-btn-secondary { background: transparent; border-color: var(--border); color: var(--text-secondary); } .lexpr-export-btn-secondary:hover:not(:disabled) { background: var(--background); color: var(--text-primary); } .lexpr-export-btn-primary { background: var(--primary-blue-dark); color: var(--on-primary-text); } .lexpr-export-btn-primary:hover:not(:disabled) { background: var(--primary-blue); } .lexpr-export-btn-secondary:disabled, .lexpr-export-btn-primary:disabled { opacity: 0.5; cursor: default; } /* Telas estreitas: o modal ocupa a tela e os dois formatos empilham. */ @media (max-width: 620px) { .lexpr-export-overlay { padding: 0; align-items: stretch; } .lexpr-export-modal { max-width: none; max-height: 100vh; border-radius: 0; border: none; } .lexpr-export-formats { flex-direction: column; } .lexpr-export-footer { flex-wrap: wrap; } .lexpr-export-busy { width: 100%; margin: 0 0 6px; } } /* Movimento reduzido: sem giro do indicador de progresso (o texto já informa). */ @media (prefers-reduced-motion: reduce) { .lexpr-export-overlay, .lexpr-export-modal { animation: none; } .lexpr-export-spinner { animation: none; } } .lexpr-export-choose { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0 10px; padding: 6px 12px; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--primary-blue); font-family: var(--font-family); font-size: var(--font-size-small); cursor: pointer; } .lexpr-export-choose:hover:not(:disabled) { border-style: solid; border-color: var(--primary-blue); background: var(--surface); } .lexpr-export-choose:disabled { opacity: 0.5; cursor: default; } .lexpr-export-clear { display: inline-flex; align-items: center; gap: 5px; margin: 6px 0 0 10px; padding: 3px 0; border: none; background: transparent; color: var(--text-muted); font-family: var(--font-family); font-size: 11.5px; cursor: pointer; } .lexpr-export-clear:hover:not(:disabled) { color: var(--accent-red); } .lexpr-export-clear:disabled { opacity: 0.5; cursor: default; } /* ===================== SELETOR DE DISPOSITIVOS (Exportar › Escolher dispositivos) ============= Segundo modal, POR CIMA do Exportar (que continua aberto atrás, por isso o z-index maior). Duas colunas no desktop — navegar à esquerda, escolhido à direita — e, abaixo de 860px, as duas viram abas, porque árvore e lista lado a lado em tela estreita não sobra largura pra nenhuma das duas. Tudo em cima dos mesmos tokens de tema. */ .lexpr-picker-overlay { position: fixed; inset: 0; background: rgba(30, 20, 12, 0.5); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 640; animation: lexpr-help-fade-in 0.15s ease-out; } .lexpr-picker-modal { display: flex; flex-direction: column; width: 100%; max-width: 940px; height: min(86vh, 720px); background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(var(--shadow-tint), 0.38); overflow: hidden; animation: lexpr-help-rise-in 0.18s ease-out; } .lexpr-picker-header { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px 12px; border-bottom: 1px solid var(--border-soft); background: var(--surface); } .lexpr-picker-header h2 { margin: 0; font-size: var(--font-size-large); color: var(--text-primary); } .lexpr-picker-header p { margin: 2px 0 0; font-size: var(--font-size-small); color: var(--text-secondary); } .lexpr-picker-header .lexpr-export-close { margin-left: auto; } /* ---------- Busca rápida ---------- */ .lexpr-picker-search { padding: 14px 20px; border-bottom: 1px solid var(--border-soft); } .lexpr-picker-search-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; } .lexpr-picker-search-row { display: flex; gap: 8px; } .lexpr-picker-search-row input { flex: 1; min-width: 0; padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-primary); font-family: var(--font-family); font-size: var(--font-size-normal); } .lexpr-picker-search-row input:focus { outline: none; border-color: var(--primary-blue); } .lexpr-picker-search-row input::placeholder { color: var(--text-muted); } .lexpr-picker-add-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: none; border-radius: var(--radius-sm); background: var(--primary-blue-dark); color: var(--on-primary-text); font-family: var(--font-family); font-size: var(--font-size-normal); cursor: pointer; white-space: nowrap; } .lexpr-picker-add-btn:hover:not(:disabled) { background: var(--primary-blue); } .lexpr-picker-add-btn:disabled { opacity: 0.45; cursor: default; } .lexpr-picker-message { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; font-size: var(--font-size-small); color: var(--text-secondary); line-height: 1.45; } .lexpr-picker-message.error { color: var(--accent-red); } .lexpr-picker-message .lexpr-icon { flex-shrink: 0; margin-top: 1px; } .lexpr-picker-candidates { margin-top: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); max-height: 190px; overflow-y: auto; } .lexpr-picker-candidate { display: flex; flex-direction: column; gap: 1px; width: 100%; padding: 7px 11px; border: none; border-bottom: 1px solid var(--border-soft); background: transparent; text-align: left; cursor: pointer; font-family: var(--font-family); } .lexpr-picker-candidate:hover { background: var(--selection); } .lexpr-picker-candidate-title { font-size: var(--font-size-normal); color: var(--text-primary); } .lexpr-picker-candidate-trail { font-size: 11px; color: var(--text-muted); } .lexpr-picker-candidates-dismiss { width: 100%; padding: 6px; border: none; background: transparent; color: var(--text-muted); font-family: var(--font-family); font-size: 11.5px; cursor: pointer; } .lexpr-picker-candidates-dismiss:hover { color: var(--text-primary); } /* ---------- Abas (só em tela estreita) ---------- */ .lexpr-picker-tabs { display: none; } .lexpr-picker-tab { flex: 1; padding: 9px; border: none; border-bottom: 2px solid transparent; background: transparent; color: var(--text-secondary); font-family: var(--font-family); font-size: var(--font-size-normal); cursor: pointer; } .lexpr-picker-tab.active { color: var(--primary-blue); border-bottom-color: var(--primary-blue); } /* ---------- Corpo: duas colunas ---------- */ .lexpr-picker-body { flex: 1; display: grid; grid-template-columns: 1fr 320px; min-height: 0; } .lexpr-picker-pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; } .lexpr-picker-selected-pane { border-left: 1px solid var(--border-soft); background: var(--surface); } .lexpr-picker-pane-title { padding: 10px 16px 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .lexpr-picker-tree { flex: 1; overflow-y: auto; padding: 0 8px 12px; } .lexpr-picker-children { border-left: 1px solid var(--border-soft); margin-left: 12px; } .lexpr-picker-node-row { display: flex; align-items: center; gap: 2px; border-radius: var(--radius-sm); } .lexpr-picker-node-row:hover { background: var(--selection); } .lexpr-picker-node { flex: 1; display: flex; align-items: center; gap: 5px; min-width: 0; padding: 5px 6px; border: none; background: transparent; text-align: left; cursor: pointer; font-family: var(--font-family); font-size: var(--font-size-small); color: var(--text-primary); } .lexpr-picker-node:disabled { cursor: default; } .lexpr-picker-node.is-article { color: var(--text-secondary); } .lexpr-picker-node.is-provision { cursor: default; } .lexpr-picker-node-base { font-weight: 600; } .lexpr-picker-node-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lexpr-picker-caret { display: inline-flex; width: 12px; flex-shrink: 0; color: var(--text-muted); transition: transform 0.12s ease; } .lexpr-picker-caret.expanded { transform: rotate(90deg); } .lexpr-picker-provision-label { flex-shrink: 0; color: var(--primary-blue); font-variant-numeric: tabular-nums; } .lexpr-picker-provision-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: 11.5px; } .lexpr-picker-add { flex-shrink: 0; width: 24px; height: 24px; margin-right: 4px; border: none; border-radius: 5px; background: transparent; color: var(--primary-blue); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; } .lexpr-picker-node-row:hover .lexpr-picker-add { opacity: 1; } .lexpr-picker-add:hover:not(:disabled) { background: var(--primary-blue-dark); color: var(--on-primary-text); } .lexpr-picker-add.added { opacity: 1; color: var(--success-green); cursor: default; } /* ---------- Conteúdo selecionado ---------- */ .lexpr-picker-selected-list { flex: 1; overflow-y: auto; padding: 0 12px 8px; } .lexpr-picker-selected-group-title { margin: 10px 0 4px; font-size: 11.5px; font-weight: 700; color: var(--text-secondary); } .lexpr-picker-selected-item { display: flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; border-radius: var(--radius-sm); font-size: var(--font-size-small); color: var(--text-primary); } .lexpr-picker-selected-item:hover { background: var(--background); } .lexpr-picker-selected-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lexpr-picker-remove { flex-shrink: 0; width: 20px; height: 20px; border: none; border-radius: 4px; background: transparent; color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; } .lexpr-picker-remove:hover { background: color-mix(in srgb, var(--accent-red) 14%, transparent); color: var(--accent-red); } .lexpr-picker-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--border-soft); font-size: var(--font-size-small); color: var(--text-secondary); } .lexpr-picker-clear, .lexpr-picker-clear-yes, .lexpr-picker-clear-no { display: inline-flex; align-items: center; gap: 4px; border: none; background: transparent; font-family: var(--font-family); font-size: 11.5px; cursor: pointer; color: var(--text-muted); padding: 2px 4px; border-radius: 4px; } .lexpr-picker-clear:hover { color: var(--accent-red); } .lexpr-picker-clear-confirm { display: inline-flex; align-items: center; gap: 4px; color: var(--text-secondary); } .lexpr-picker-clear-yes { color: var(--accent-red); font-weight: 600; } .lexpr-picker-clear-no { color: var(--text-secondary); } .lexpr-picker-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 22px; text-align: center; color: var(--text-muted); font-size: var(--font-size-small); line-height: 1.5; } .lexpr-picker-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border-soft); background: var(--surface); } /* Tela estreita: uma coluna de cada vez, escolhida pelas abas. */ @media (max-width: 860px) { .lexpr-picker-overlay { padding: 0; } .lexpr-picker-modal { max-width: none; height: 100vh; border-radius: 0; border: none; } .lexpr-picker-tabs { display: flex; border-bottom: 1px solid var(--border-soft); background: var(--surface); } .lexpr-picker-body { grid-template-columns: 1fr; } .lexpr-picker-pane { display: none; } .lexpr-picker-pane.mobile-visible { display: flex; } .lexpr-picker-selected-pane { border-left: none; } /* Sem hover em tela de toque: o "+" precisa estar sempre visível. */ .lexpr-picker-add { opacity: 1; } .lexpr-picker-search-row { flex-wrap: wrap; } .lexpr-picker-add-btn { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .lexpr-picker-overlay, .lexpr-picker-modal { animation: none; } .lexpr-picker-caret { transition: none; } } .lexpr-picker-candidate.already { opacity: 0.6; cursor: default; } .lexpr-picker-candidate.already:hover { background: transparent; } .lexpr-picker-candidate-badge { margin-left: 6px; padding: 1px 6px; border-radius: 8px; background: var(--selection); color: var(--text-muted); font-size: 10px; vertical-align: middle; } /* ===================== EDITOR DE ANOTAÇÃO (NoteEditor.razor) ===================== Usado nos dois lugares em que se escreve uma anotação: a barra flutuante de seleção de texto (variante .compact) e o popover de uma anotação já existente. */ .lexpr-note-editor { width: 100%; } .lexpr-note-editor.compact { width: 230px; } .lexpr-note-editor textarea { width: 100%; min-height: 70px; border: 1px solid var(--border); border-radius: 5px; padding: 7px; font-family: var(--font-family); font-size: var(--font-size-small); resize: vertical; /* Sem background/color explícitos, o campo herda a aparência NATIVA do navegador — que com o SO em Dark Mode desenha fundo escuro e texto claro — mesmo com color-scheme:light forçado no :root. Mesmo problema e mesma solução do .lexpr-search-box input. */ background: var(--surface); color: var(--text-primary); } .lexpr-note-editor textarea:focus { outline: none; border-color: var(--primary-blue); } .lexpr-note-editor textarea::placeholder { color: var(--text-muted); } /* Na barra flutuante o fundo é escuro (--overlay-bg), então a borda some e o campo fica só com o contraste do próprio fundo claro. */ .lexpr-note-editor.compact textarea { min-height: 60px; border-color: transparent; } .lexpr-note-editor-actions { display: flex; align-items: center; gap: 6px; margin-top: 8px; } .lexpr-note-editor-spacer { flex: 1; } .lexpr-note-editor-cancel { border: none; border-radius: 5px; padding: 6px 10px; font-family: var(--font-family); font-size: var(--font-size-small); cursor: pointer; background: transparent; color: var(--text-secondary); } .lexpr-note-editor-cancel:hover { color: var(--text-primary); } /* Dentro da barra flutuante (fundo escuro), o "Cancelar" precisa de texto claro. */ .lexpr-note-editor.compact .lexpr-note-editor-cancel { color: var(--on-primary-text); opacity: 0.8; } .lexpr-note-editor.compact .lexpr-note-editor-cancel:hover { opacity: 1; color: var(--on-primary-text); } .lexpr-note-editor .lexpr-btn-save, .lexpr-note-editor .lexpr-btn-delete { border: none; border-radius: 5px; padding: 6px 10px; font-family: var(--font-family); font-size: var(--font-size-small); cursor: pointer; } /* ===== Lembrete de operadores de pesquisa (SearchOperatorsHint.razor) ===== Vive dentro da própria barra (topo) e ao lado do botão "Pesquisar" (painéis), porque é ali que a dúvida aparece — o cartão abre por cima do conteúdo (position:absolute) pra não empurrar nada da tela ao ser aberto. */ .lexpr-op-hint { position: relative; flex-shrink: 0; outline: none; } .lexpr-op-hint-btn { display: flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 5px; background: var(--background); border: 1px solid var(--border-soft); color: var(--text-muted); font-family: var(--font-family); font-size: 11px; font-weight: 600; line-height: 1; cursor: pointer; } .lexpr-op-hint-btn:hover, .lexpr-op-hint-btn.is-open { color: var(--primary-blue); border-color: var(--primary-blue); } .lexpr-op-hint-card { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; width: 340px; max-width: 80vw; padding: 12px 14px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); cursor: default; } .lexpr-op-hint-title { font-size: var(--font-size-small); font-weight: 700; color: var(--text-primary); margin-bottom: 8px; } .lexpr-op-hint-table { width: 100%; border-collapse: collapse; } .lexpr-op-hint-table td { padding: 4px 0; vertical-align: top; font-size: var(--font-size-small); color: var(--text-secondary); } .lexpr-op-hint-table td:first-child { padding-right: 10px; white-space: nowrap; } .lexpr-op-hint-table code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--text-primary); background: var(--background); border: 1px solid var(--border-soft); border-radius: 4px; padding: 1px 5px; } .lexpr-op-hint-alias { display: block; color: var(--text-muted); font-size: 11px; } .lexpr-op-hint-foot { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--border-soft); color: var(--text-muted); font-size: 11.5px; line-height: 1.4; } /* ===== Tabela de operadores dentro do card da Central de Ajuda ===== Mesma informação do lembrete das barras (.lexpr-op-hint-card), só que num card largo e sem pressa de espaço: aqui cabe a explicação inteira, com exemplos combinados. O card ocupa a LINHA inteira do grid de cards (os demais têm ~230px de largura): uma tabela de duas colunas espremida naquela largura quebra "também: NÃO, NOT, !" em quatro linhas e deixa de ser uma tabela de consulta rápida — vira um bloco de texto picado. */ .lexpr-help-card:has(.lexpr-help-operators) { grid-column: 1 / -1; } .lexpr-help-operators { width: 100%; border-collapse: collapse; margin-top: 10px; } .lexpr-help-operators td { padding: 5px 0; vertical-align: top; font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; border-top: 1px solid var(--border-soft); } .lexpr-help-operators tr:first-child td { border-top: none; } .lexpr-help-operators td:first-child { padding-right: 14px; white-space: nowrap; width: 1%; } .lexpr-help-operators code, .lexpr-help-operators-foot code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--text-primary); background: var(--background); border: 1px solid var(--border-soft); border-radius: 4px; padding: 1px 5px; } .lexpr-help-operators-alias { display: block; color: var(--text-muted); font-size: 11.5px; } .lexpr-help-operators-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-soft); color: var(--text-muted); font-size: 12px; line-height: 1.5; } .lexpr-help-operators-foot p { margin: 0 0 7px; } .lexpr-help-operators-foot p:last-child { margin-bottom: 0; } .lexpr-help-operators-foot strong { color: var(--text-secondary); } /* ===================================================================== ENTENDIMENTOS DA PGE Área própria, separada de Jurisprudência. Reaproveita quase tudo do que já existe (.lexpr-explorar, .lexpr-facet-*, .lexpr-result-*): o que está aqui é só o que a natureza do documento exige e nenhuma outra tela tem. O selo de TIPO usa uma cor própria, deliberadamente diferente da dos selos de tribunal (.lexpr-court-*): um Parecer da PGE nunca pode parecer visualmente um acórdão do STF. ===================================================================== */ .lexpr-pge-intro { margin: 0 0 14px; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); max-width: 62ch; } .lexpr-pge-type-badge { display: inline-block; padding: 1px 7px; margin-right: 7px; border: 1px solid var(--border); border-radius: 3px; background: var(--background); color: var(--text-secondary); font-size: 9.5px; font-weight: 700; letter-spacing: 0.4px; vertical-align: middle; } /* Aviso de situação — o mesmo vermelho contido em três tamanhos: selo na lista, faixa na página do documento, nota explicativa dentro da faixa. */ .lexpr-pge-status-badge { display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 3px; background: #fdeeee; border: 1px solid #e6bcbc; color: #8c2b2b; font-size: 10px; font-weight: 600; white-space: nowrap; } .lexpr-pge-status-warning { margin: 0 0 16px; padding: 11px 14px; border-left: 3px solid #b04141; border-radius: 4px; background: #fdeeee; color: #7d2727; font-size: 12.5px; line-height: 1.5; } .lexpr-pge-status-warning-note { margin-top: 4px; font-size: 11px; color: #8f4a4a; } .lexpr-pge-restricted { color: var(--text-muted); font-style: italic; } /* Ficha do documento.

e não tabela: são pares rótulo/valor, e cada par pode faltar — a fonte publica campos diferentes por tipo. */ .lexpr-pge-fields { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr); gap: 7px 18px; margin: 0 0 20px; font-size: 13px; line-height: 1.55; } .lexpr-pge-fields dt { color: var(--text-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; padding-top: 2px; } .lexpr-pge-fields dd { margin: 0; color: var(--text-primary); } .lexpr-pge-ementa { text-align: justify; } .lexpr-pge-section { margin: 0 0 20px; } .lexpr-pge-section h3 { margin: 0 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-secondary); } .lexpr-pge-relations { margin: 0; padding: 0; list-style: none; font-size: 12.5px; } .lexpr-pge-relations li { padding: 5px 0; border-bottom: 1px solid var(--border-soft); line-height: 1.5; } .lexpr-pge-relations li:last-child { border-bottom: none; } .lexpr-pge-relation-kind { display: inline-block; min-width: 168px; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; } .lexpr-pge-relation-note { color: var(--text-muted); font-size: 11px; margin-left: 6px; } .lexpr-pge-relation-evidence { margin: 3px 0 0 168px; color: var(--text-muted); font-size: 11.5px; font-style: italic; line-height: 1.45; } .lexpr-pge-references { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); } /* Inteiro teor: texto extraído de PDF, com quebras de linha do original preservadas — daí o pre-wrap, e a rolagem própria para um parecer de trinta páginas não empurrar o resto da tela. */ .lexpr-pge-fulltext { max-height: 520px; overflow-y: auto; padding: 14px 16px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface); font-size: 12.5px; line-height: 1.65; white-space: pre-wrap; text-align: justify; } .lexpr-pge-fulltext-note { margin: 0 0 6px; font-size: 11px; color: var(--text-muted); } .lexpr-pge-sources { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-soft); } /* O tema escuro do CHICO é uma PALETA ESCOLHIDA pelo usuário (:root[data-theme="noite"]), não o prefers-color-scheme do sistema — mesma observação que já vale para o selo de precedente vinculante. Usar a media query aqui deixaria o aviso vermelho-claro ilegível para quem escolheu Noite num sistema em modo claro, que é justamente o caso comum. */ :root[data-theme="noite"] .lexpr-pge-status-badge { background: #3a2020; border-color: #6b3a3a; color: #f0b8b8; } :root[data-theme="noite"] .lexpr-pge-status-warning { background: #3a2020; border-left-color: #a05252; color: #f0c4c4; } :root[data-theme="noite"] .lexpr-pge-status-warning-note { color: #d79a9a; } /* ============================================================================================= ÁREAS RESTRITAS — "Administração" e "Área do desenvolvedor" Mesmo vocabulário visual do resto do CHICO (item 26): as MESMAS variáveis de tema, os mesmos raios e as mesmas sombras. Nada aqui tem cara de terminal — o texto técnico bruto (saída de processo) fica em arquivo, servido à parte, e nunca é despejado na tela principal. Como as duas áreas usam as mesmas classes, o que separa uma da outra é a finalidade, não a aparência: quem sabe usar uma sabe usar a outra. ============================================================================================= */ .lexpr-area { min-height: 100vh; background: var(--background); color: var(--text-primary); display: flex; flex-direction: column; } .lexpr-area-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 22px; background: var(--topbar-bg); border-bottom: 1px solid var(--border); } .lexpr-area-topo-esq { display: flex; align-items: center; gap: 18px; min-width: 0; } .lexpr-area-topo-dir { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .lexpr-area-marca { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--primary-blue-dark); color: var(--on-primary-text); text-decoration: none; flex: 0 0 auto; } .lexpr-area-marca-nome { font-weight: 700; font-size: 11px; letter-spacing: 0.5px; } .lexpr-area-identificacao { min-width: 0; } .lexpr-area-identificacao h1 { margin: 0; font-size: 19px; font-weight: 650; color: var(--text-primary); line-height: 1.2; } .lexpr-area-identificacao p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-secondary); } .lexpr-area-conta { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; padding-right: 6px; } .lexpr-area-conta-nome { font-size: 13px; font-weight: 600; } .lexpr-area-conta-perfil { font-size: 11px; color: var(--text-muted); } /* ---------- abas ---------- */ .lexpr-area-abas { display: flex; gap: 4px; overflow-x: auto; padding: 0 18px; background: var(--surface); border-bottom: 1px solid var(--border); } .lexpr-area-aba { border: none; background: transparent; color: var(--text-secondary); padding: 11px 14px; font-size: 13.5px; font-family: inherit; cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; } .lexpr-area-aba:hover { color: var(--primary-blue); } .lexpr-area-aba.ativa { color: var(--primary-blue); font-weight: 640; border-bottom-color: var(--primary-blue); } .lexpr-area-aba-contador { display: inline-block; margin-left: 6px; min-width: 18px; padding: 1px 6px; border-radius: 9px; background: var(--primary-blue-dark); color: var(--on-primary-text); font-size: 11px; font-weight: 600; } /* ---------- conteúdo ---------- */ .lexpr-area-conteudo { flex: 1; padding: 20px; max-width: 1500px; width: 100%; margin: 0 auto; } .lexpr-area-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; align-items: start; } .lexpr-area-cartao { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 1px 3px rgba(var(--shadow-tint), 0.07); margin-bottom: 16px; overflow: hidden; } .lexpr-area-cartao.largo { grid-column: 1 / -1; } .lexpr-area-cartao-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 14px 16px 10px; border-bottom: 1px solid var(--border-soft); } .lexpr-area-cartao-topo h2 { margin: 0; font-size: 15px; font-weight: 650; } .lexpr-area-cartao-descricao { margin: 5px 0 0; font-size: 12.5px; color: var(--text-secondary); max-width: 78ch; line-height: 1.45; } .lexpr-area-cartao-acoes { display: flex; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; } .lexpr-area-cartao-corpo { padding: 14px 16px 16px; } .lexpr-area-subtitulo { margin: 18px 0 6px; font-size: 13.5px; font-weight: 640; } /* ---------- botões ---------- */ .lexpr-area-btn { border: 1px solid var(--border); background: var(--surface); color: var(--text-primary); border-radius: var(--radius-sm); padding: 7px 13px; font-size: 13px; font-family: inherit; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: background 0.12s, border-color 0.12s; } .lexpr-area-btn:hover:not(:disabled) { background: var(--selection); border-color: var(--primary-blue); } .lexpr-area-btn:disabled { opacity: 0.5; cursor: not-allowed; } .lexpr-area-btn-primario { background: var(--primary-blue-dark); border-color: var(--primary-blue-dark); color: var(--on-primary-text); font-weight: 600; } .lexpr-area-btn-primario:hover:not(:disabled) { background: var(--primary-blue); border-color: var(--primary-blue); color: var(--on-primary-text); } .lexpr-area-btn-remover { color: var(--accent-red); } .lexpr-area-btn-remover:hover { background: color-mix(in srgb, var(--accent-red) 12%, var(--surface)); border-color: var(--accent-red); } .lexpr-area-botoes { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; } /* ---------- semáforos e selos ---------- */ .lexpr-area-semaforo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; } .lexpr-area-semaforo-ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--text-muted); flex: 0 0 auto; } .lexpr-area-semaforo.ok .lexpr-area-semaforo-ponto { background: var(--success-green); } .lexpr-area-semaforo.ok .lexpr-area-semaforo-texto { color: var(--success-green); } .lexpr-area-semaforo.atencao .lexpr-area-semaforo-ponto { background: #C98A16; } .lexpr-area-semaforo.atencao .lexpr-area-semaforo-texto { color: #C98A16; } .lexpr-area-semaforo.falha .lexpr-area-semaforo-ponto { background: var(--accent-red); } .lexpr-area-semaforo.falha .lexpr-area-semaforo-texto { color: var(--accent-red); } .lexpr-area-semaforo.neutro .lexpr-area-semaforo-texto { color: var(--text-muted); } .lexpr-area-selo { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11.5px; font-weight: 600; background: var(--selection); color: var(--primary-blue); white-space: nowrap; } .lexpr-area-selo.destaque { background: color-mix(in srgb, var(--success-green) 16%, var(--surface)); color: var(--success-green); } .lexpr-area-selo.alerta { background: color-mix(in srgb, var(--accent-red) 13%, var(--surface)); color: var(--accent-red); } /* ---------- status ---------- */ .lexpr-area-status { display: flex; flex-direction: column; gap: 2px; } .lexpr-area-status-linha { display: grid; grid-template-columns: 150px 130px 1fr; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--border-soft); } .lexpr-area-status-linha:last-child { border-bottom: none; } .lexpr-area-status-nome { font-weight: 640; font-size: 13.5px; } .lexpr-area-status-detalhe { font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; } .lexpr-area-status-quando { display: block; color: var(--text-muted); font-size: 11.5px; } @media (max-width: 760px) { .lexpr-area-status-linha { grid-template-columns: 1fr; } } /* ---------- indicadores ---------- */ .lexpr-area-indicadores { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; } .lexpr-area-indicador { flex: 1 1 120px; min-width: 110px; background: var(--background); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; } .lexpr-area-indicador.largo { flex: 1 1 200px; } .lexpr-area-indicador .valor { font-size: 20px; font-weight: 680; line-height: 1.1; } .lexpr-area-indicador .rotulo { font-size: 11.5px; color: var(--text-secondary); } .lexpr-area-indicador.destaque { border-color: var(--primary-blue); } .lexpr-area-indicador.destaque .valor { color: var(--primary-blue); } .lexpr-area-indicador.alerta { border-color: var(--accent-red); } .lexpr-area-indicador.alerta .valor { color: var(--accent-red); } /* ---------- listas de dados ---------- */ .lexpr-area-dados { margin: 0; display: flex; flex-direction: column; } .lexpr-area-dados > div { display: grid; grid-template-columns: minmax(160px, 34%) 1fr; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); } .lexpr-area-dados > div:last-child { border-bottom: none; } .lexpr-area-dados dt { font-size: 12.5px; color: var(--text-secondary); } .lexpr-area-dados dd { margin: 0; font-size: 13px; word-break: break-word; } @media (max-width: 640px) { .lexpr-area-dados > div { grid-template-columns: 1fr; gap: 2px; } } .lexpr-area-mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; } /* ---------- tabelas ---------- */ /* Tabela larga rola DENTRO do próprio contêiner: a página nunca rola na horizontal. */ .lexpr-area-tabela-rolagem { overflow-x: auto; margin: 0 -4px; } .lexpr-area-tabela { width: 100%; border-collapse: collapse; font-size: 13px; } .lexpr-area-tabela th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); font-weight: 640; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; } .lexpr-area-tabela td { padding: 9px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: top; } .lexpr-area-tabela tr:hover td { background: var(--background); } .lexpr-area-tabela tr.inativa td { opacity: 0.55; } .lexpr-area-nowrap { white-space: nowrap; } .lexpr-area-cabecalho { max-width: 480px; } .lexpr-area-agendamento { font-size: 12px; color: var(--text-secondary); max-width: 380px; } .lexpr-area-comando { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; color: var(--text-muted); margin-top: 3px; word-break: break-all; } /* ---------- formulários ---------- */ .lexpr-area-chaves { display: flex; flex-direction: column; gap: 2px; } .lexpr-area-chave { display: grid; grid-template-columns: 22px 1fr; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); cursor: pointer; align-items: start; } .lexpr-area-chave:last-child { border-bottom: none; } .lexpr-area-chave input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--primary-blue-dark); } .lexpr-area-chave-rotulo { font-size: 13.5px; font-weight: 620; } .lexpr-area-chave-detalhe { grid-column: 2; font-size: 12px; color: var(--text-secondary); line-height: 1.45; } .lexpr-area-formulario { display: flex; flex-direction: column; gap: 10px; max-width: 460px; } .lexpr-area-formulario label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-secondary); } .lexpr-area-linha-formulario { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .lexpr-area-linha-formulario input { flex: 1 1 220px; } .lexpr-area input[type="text"], .lexpr-area input[type="password"], .lexpr-area input:not([type]), .lexpr-area select { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 10px; font-size: 13px; font-family: inherit; background: var(--surface); color: var(--text-primary); } .lexpr-area input:focus, .lexpr-area select:focus { outline: none; border-color: var(--primary-blue); } /* ---- Editor da consolidação -------------------------------------------------------------- Campos de escrita da tela /consolidacao. Ficam à parte do formulário curto da Administração porque aqui o texto do dispositivo é o conteúdo principal, e não um dado de cadastro. */ .lexpr-area-campo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; } .lexpr-area-campo > span { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); } .lexpr-area-input { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 10px; font-size: 13px; font-family: inherit; background: var(--surface); color: var(--text-primary); } .lexpr-area-input:focus { outline: none; border-color: var(--primary-blue); } .lexpr-area-textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 14px; line-height: 1.6; font-family: Georgia, "Times New Roman", serif; background: var(--surface); color: var(--text-primary); resize: vertical; } .lexpr-area-textarea:focus { outline: none; border-color: var(--primary-blue); } .lexpr-area-form-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 14px; } .lexpr-area-form-linha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; } .lexpr-area-form-linha .lexpr-area-input { flex: 1 1 260px; width: auto; } .lexpr-area-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; } .lexpr-area-acoes .lexpr-area-input { flex: 0 1 220px; width: auto; } .lexpr-area-acoes-linha { white-space: nowrap; text-align: right; } .lexpr-area-acoes-linha .lexpr-area-btn { margin-left: 6px; } .lexpr-area-detalhes { margin: 4px 0 12px; font-size: 12.5px; } .lexpr-area-detalhes > summary { cursor: pointer; color: var(--text-secondary); } .lexpr-area-detalhes > summary:hover { color: var(--primary-blue); } .lexpr-area-texto-original { margin-top: 8px; padding: 10px 12px; border-left: 3px solid var(--border); background: var(--background); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 13px; line-height: 1.6; color: var(--text-secondary); max-height: 260px; overflow-y: auto; white-space: pre-wrap; } .lexpr-area-lista { list-style: none; margin: 0; padding: 0; } .lexpr-area-lista li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; flex-wrap: wrap; } .lexpr-area-lista li:last-child { border-bottom: none; } .lexpr-area-passos { margin: 6px 0 12px; padding-left: 20px; font-size: 13px; line-height: 1.55; } .lexpr-area-passos li { margin-bottom: 8px; } /* ---------- avisos e notas ---------- */ .lexpr-area-nota { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; margin: 12px 0 0; max-width: 92ch; } .lexpr-area-nota.alerta { background: color-mix(in srgb, var(--accent-red) 7%, var(--surface)); border-left: 3px solid var(--accent-red); padding: 10px 12px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .lexpr-area-nota code, .lexpr-area-mono code { font-family: ui-monospace, Menlo, Consolas, monospace; } /* ---------- benchmark da pesquisa (Área do desenvolvedor) ---------- */ /* As duas versões lado a lado — é o cabeçalho da comparação, e precisa ser a primeira coisa que a pessoa lê: sem saber QUAIS duas execuções estão em cima da mesa, nenhum número abaixo significa coisa alguma. */ .lexpr-bench-versoes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; } .lexpr-bench-versoes > div { background: var(--background); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .lexpr-bench-versoes > div:last-child { border-color: var(--primary-blue); } .lexpr-bench-versoes-rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); font-weight: 640; } .lexpr-bench-versoes .lexpr-area-mono { word-break: break-word; color: var(--text-muted); } @media (max-width: 720px) { .lexpr-bench-versoes { grid-template-columns: 1fr; } } /* Melhora e piora NUNCA se distinguem só pela cor: cada uma vem com o seu sinal (▲/▼) no texto, para quem não distingue verde de vermelho ler a mesma informação. */ .lexpr-bench-delta { white-space: nowrap; } .lexpr-bench-delta.melhor { color: var(--success-green); font-weight: 620; } .lexpr-bench-delta.pior { color: var(--accent-red); font-weight: 620; } .lexpr-bench-veredito { font-size: 14px; font-weight: 640; margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--background); border-left: 3px solid var(--border); } .lexpr-bench-veredito.melhor { border-left-color: var(--success-green); background: color-mix(in srgb, var(--success-green) 7%, var(--surface)); } .lexpr-bench-veredito.pior { border-left-color: var(--accent-red); background: color-mix(in srgb, var(--accent-red) 7%, var(--surface)); } .lexpr-bench-clicavel { cursor: pointer; } /* Botão que se lê como texto — para a linha da fila de propostas abrir o detalhe sem parecer mais um botão de ação ao lado de "Aplicar" e "Recusar". */ .lexpr-area-btn-link { background: none; border: none; padding: 0; font: inherit; color: var(--primary-blue); text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .lexpr-area-btn-link:hover { filter: brightness(0.85); } .lexpr-bench-destaque td { background: color-mix(in srgb, var(--primary-blue) 6%, var(--surface)); font-weight: 620; } /* Ranking anterior × ranking atual, lado a lado — a pergunta "o que mudou nesta consulta" se responde comparando duas listas, não lendo uma posição. */ .lexpr-bench-rankings { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; } @media (max-width: 720px) { .lexpr-bench-rankings { grid-template-columns: 1fr; } } .lexpr-bench-ranking { margin: 0; padding-left: 22px; font-size: 13px; } .lexpr-bench-ranking li { padding: 5px 0; border-bottom: 1px solid var(--border-soft); } .lexpr-bench-ranking li:last-child { border-bottom: none; } .lexpr-bench-ranking li.esperado { font-weight: 620; color: var(--success-green); } .lexpr-bench-ranking .lexpr-area-comando { display: block; } .lexpr-area-vazio { font-size: 13px; color: var(--text-muted); font-style: italic; margin: 8px 0; } .lexpr-area-erro-texto { color: var(--accent-red); } .lexpr-area-aviso { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: var(--radius-md); margin-bottom: 16px; font-size: 13.5px; } .lexpr-area-aviso.sucesso { background: color-mix(in srgb, var(--success-green) 12%, var(--surface)); border: 1px solid var(--success-green); color: var(--success-green); } .lexpr-area-aviso.erro { background: color-mix(in srgb, var(--accent-red) 10%, var(--surface)); border: 1px solid var(--accent-red); color: var(--accent-red); } .lexpr-area-aviso-fechar { background: transparent; border: none; cursor: pointer; color: inherit; font-size: 14px; } .lexpr-area-executando { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--selection); border: 1px solid var(--primary-blue); margin-bottom: 16px; font-size: 13.5px; } .lexpr-area-girando { width: 15px; height: 15px; border: 2px solid var(--primary-blue); border-top-color: transparent; border-radius: 50%; animation: lexpr-area-girar 0.8s linear infinite; flex: 0 0 auto; } @keyframes lexpr-area-girar { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .lexpr-area-girando { animation: none; } } /* ---------- ações (executar agora) ---------- */ .lexpr-area-acoes-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; } .lexpr-area-acao { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 13px 14px; background: var(--background); } .lexpr-area-acao h3 { margin: 0 0 5px; font-size: 13.5px; font-weight: 650; } .lexpr-area-acao p { margin: 0 0 6px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; } .lexpr-area-acao-agenda { font-size: 11.5px; color: var(--text-muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .lexpr-area-acao > button { flex: 0 0 auto; } /* ---------- texto oficial ---------- */ /* Único bloco monoespaçado das duas áreas, e é para TEXTO OFICIAL — o recorte literal do que o Diário publicou. Saída de processo não aparece aqui: fica em arquivo, servido à parte. */ .lexpr-area-texto-oficial { white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.55; background: var(--background); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 12px; max-height: 460px; overflow: auto; margin: 0; } /* ---------- entrada / saída / acesso negado ---------- */ .lexpr-entrar { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--background); padding: 24px; } .lexpr-entrar-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 3px 14px rgba(var(--shadow-tint), 0.12); padding: 26px; display: flex; flex-direction: column; gap: 14px; } .lexpr-entrar-marca { display: flex; flex-direction: column; gap: 2px; } .lexpr-entrar-titulo { font-size: 22px; font-weight: 700; color: var(--primary-blue); letter-spacing: 0.5px; } .lexpr-entrar-subtitulo { font-size: 12.5px; color: var(--text-secondary); } .lexpr-entrar-explicacao { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; margin: 0; } .lexpr-entrar-campo { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-secondary); } .lexpr-entrar-campo input { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 11px; font-size: 14px; font-family: inherit; background: var(--surface); color: var(--text-primary); } .lexpr-entrar-campo input:focus { outline: none; border-color: var(--primary-blue); } .lexpr-entrar-erro { background: color-mix(in srgb, var(--accent-red) 10%, var(--surface)); border: 1px solid var(--accent-red); color: var(--accent-red); border-radius: var(--radius-sm); padding: 9px 11px; font-size: 13px; } .lexpr-area-voltar { font-size: 12.5px; color: var(--text-secondary); text-decoration: none; } .lexpr-area-voltar:hover { color: var(--primary-blue); text-decoration: underline; } .lexpr-area-negado { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--background); padding: 24px; } .lexpr-area-negado-card { max-width: 460px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 26px; display: flex; flex-direction: column; gap: 12px; } .lexpr-area-negado-card h1 { margin: 0; font-size: 19px; font-weight: 650; } .lexpr-area-negado-card p { margin: 0; font-size: 13.5px; line-height: 1.5; } .lexpr-area-negado-ajuda { color: var(--text-secondary); font-size: 12.5px !important; } .lexpr-area-carregando { padding: 40px; text-align: center; color: var(--text-secondary); } /* Separador do menu Configurações, onde as duas áreas aparecem para quem tem permissão. */ .lexpr-theme-menu-separator { height: 1px; background: var(--border); margin: 6px 0; } /* ===================================================================== AVISO DE POSSÍVEL ALTERAÇÃO (ato do Diário × artigo do acervo) Âmbar, não vermelho: não é erro nem revogação confirmada — é "saiu algo sobre este artigo, confira". Vermelho aqui competiria visualmente com o aviso de entendimento revogado da PGE, que é uma afirmação bem mais forte. ===================================================================== */ .lexpr-doc-article-change-alert { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 8px; border: 1px solid #e0b354; border-radius: 3px; background: #fdf4e3; color: #8a5a12; font-size: 10.5px; font-weight: 600; cursor: pointer; vertical-align: middle; white-space: nowrap; } .lexpr-doc-article-change-alert:hover { background: #fbe9c8; } .lexpr-change-panel .lexpr-search-panel-header { background: #fdf4e3; color: #8a5a12; } .lexpr-change-disclaimer { margin: 0 0 14px; padding: 10px 12px; border-left: 3px solid #e0a800; border-radius: 4px; background: #fdf4e3; color: #6f4a10; font-size: 12px; line-height: 1.5; } .lexpr-change-item { margin: 0 0 18px; padding: 0 0 16px; border-bottom: 1px solid var(--border-soft); } .lexpr-change-item:last-child { border-bottom: none; } .lexpr-change-item-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; } .lexpr-change-kind { padding: 1px 7px; border-radius: 3px; background: #8a5a12; color: #fff; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; } .lexpr-change-act { font-size: 11.5px; color: var(--text-secondary); } .lexpr-change-heading { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; line-height: 1.45; } .lexpr-change-vigencia { margin: 0 0 10px; font-size: 11.5px; color: var(--text-secondary); } /* Duas colunas quando cabe; empilhadas quando o painel aperta. É @container e não @media porque o que aperta aqui é a largura do PAINEL, não a da janela. */ .lexpr-change-compare { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; } @media (min-width: 1500px) { .lexpr-change-compare { grid-template-columns: 1fr 1fr; } } .lexpr-change-side { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 9px 11px; background: var(--surface); min-width: 0; } .lexpr-change-side-new { border-color: #e0b354; background: #fffdf8; } .lexpr-change-side h4 { margin: 0 0 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); } .lexpr-change-side-new h4 { color: #8a5a12; } .lexpr-change-text { max-height: 230px; overflow-y: auto; font-size: 12px; line-height: 1.55; white-space: pre-wrap; text-align: justify; } .lexpr-change-analysis { margin: 8px 0; padding: 8px 10px; border-left: 3px solid #7aa87a; background: #f4f7f4; font-size: 11.5px; line-height: 1.5; } .lexpr-change-analysis-label { display: block; margin-bottom: 3px; font-weight: 700; color: #3f6b3f; } .lexpr-change-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 8px; } .lexpr-change-fulltext { margin-top: 10px; max-height: 320px; overflow-y: auto; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--background); font-size: 11.5px; line-height: 1.55; white-space: pre-wrap; } :root[data-theme="noite"] .lexpr-doc-article-change-alert { background: #3a2f14; border-color: #7a6428; color: #f0cf8a; } :root[data-theme="noite"] .lexpr-change-disclaimer, :root[data-theme="noite"] .lexpr-change-panel .lexpr-search-panel-header { background: #3a2f14; color: #f0cf8a; } :root[data-theme="noite"] .lexpr-change-side-new { background: #2a2416; } :root[data-theme="noite"] .lexpr-change-analysis { background: #1f2a1f; } /* ===================================================================== HISTÓRICO DA CONSOLIDAÇÃO — o rótulo "Atualizado por..." no artigo e o painel com a redação anterior. Deliberadamente azul e discreto, ao contrário do aviso âmbar de possível alteração: aquele pede conferência, este apenas informa que o dispositivo já foi consolidado e que existe redação anterior guardada. ===================================================================== */ .lexpr-doc-article-updated { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 8px; border: 1px solid var(--border); border-radius: 3px; background: var(--background); color: var(--text-secondary); font-size: 10.5px; font-weight: 600; cursor: pointer; vertical-align: middle; max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lexpr-doc-article-updated:hover { border-color: var(--primary-blue); color: var(--primary-blue); } .lexpr-revision-intro { margin: 0 0 14px; padding: 10px 12px; border-left: 3px solid var(--primary-blue); border-radius: 4px; background: var(--background); font-size: 12px; line-height: 1.55; color: var(--text-secondary); } .lexpr-revision-item { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .lexpr-revision-item:last-child { border-bottom: none; } .lexpr-revision-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; } .lexpr-revision-kind { padding: 1px 7px; border-radius: 3px; background: var(--selection); color: var(--primary-blue-dark); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; } .lexpr-revision-act { font-size: 12px; font-weight: 600; color: var(--text-primary); } .lexpr-revision-efeitos { margin: 0 0 4px; font-size: 12px; color: var(--text-secondary); } .lexpr-revision-vigencia { margin: 0 0 8px; font-size: 12px; color: var(--text-secondary); font-style: italic; } .lexpr-revision-subtitulo { margin: 8px 0 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); } .lexpr-revision-texto { padding: 10px 12px; border-left: 3px solid var(--border); border-radius: 0 4px 4px 0; background: var(--background); font-size: 12px; line-height: 1.6; white-space: pre-wrap; max-height: 340px; overflow-y: auto; } .lexpr-revision-rodape { margin-top: 8px; font-size: 11px; color: var(--text-muted); } /* ===================================================================== FILA DE CONSOLIDAÇÃO VINDA DO DIÁRIO (Fase 2) Âmbar, como o selo "Possível alteração" na leitura: é a mesma coisa vista de outro lugar — lá é aviso a quem lê, aqui é trabalho a fazer. Manter a cor faz a pessoa reconhecer a origem sem legenda. ===================================================================== */ .lexpr-fila-ato { padding: 12px 14px; border-left: 3px solid #e0b354; border-radius: 0 4px 4px 0; background: #fdf4e3; font-size: 12.5px; line-height: 1.55; color: #5c4210; } .lexpr-fila-ato-titulo { margin: 0 0 8px; font-weight: 650; } .lexpr-fila-ato-trecho { margin-bottom: 8px; padding: 8px 10px; border-radius: 4px; background: var(--surface); color: var(--text-primary); font-size: 12px; line-height: 1.6; white-space: pre-wrap; max-height: 220px; overflow-y: auto; } .lexpr-fila-ato-vigencia { margin: 0 0 6px; } .lexpr-fila-ato-analise { margin: 0 0 8px; font-style: italic; } .lexpr-fila-ato-analise-rotulo { font-style: normal; font-weight: 650; } .lexpr-fila-ato-acoes { margin-bottom: 4px; font-size: 12px; } .lexpr-fila-ato-acoes a { color: var(--primary-blue); } /* O ato aberto ao lado do editor. Fundo neutro, e não âmbar: aqui ele é material de trabalho durante a escrita, e um bloco colorido atrás do campo de texto competiria com o que se está digitando. */ .lexpr-fila-ato-editor { margin-bottom: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--background); } .lexpr-fila-ato-editor > summary { padding: 8px 12px; cursor: pointer; font-size: 12.5px; font-weight: 650; color: var(--text-secondary); } .lexpr-fila-ato-editor > summary:hover { color: var(--primary-blue); } .lexpr-fila-ato-corpo { padding: 0 12px 12px; font-size: 12.5px; line-height: 1.65; white-space: pre-wrap; max-height: 300px; overflow-y: auto; } /* Botão "Consolidar este dispositivo" no painel de aviso da leitura. */ .lexpr-change-consolidar { padding: 3px 10px; border: 1px solid #e0b354; border-radius: 3px; background: #fdf4e3; color: #8a5a12; font-size: 12px; font-weight: 650; font-family: inherit; cursor: pointer; } .lexpr-change-consolidar:hover { background: #fbe9c8; } :root[data-theme="noite"] .lexpr-fila-ato, :root[data-theme="noite"] .lexpr-change-consolidar { background: #3a2f14; border-color: #7a6428; color: #f0cf8a; } /* ================================================================================================= CURADORIA DA PESQUISA — a faixa "Avaliar pesquisa" e a estrela de resultado esperado. Discreta por decisão de projeto: quem valida passa a maior parte do tempo apenas pesquisando, e um controle que grita atrapalha justamente o uso normal que a curadoria depende de preservar. Usa as mesmas variáveis de tema do resto (nada de cor solta) — os três selos de avaliação são a única exceção, e reaproveitam --success-green/--accent-red, que já existem. ================================================================================================= */ .lexpr-validacao-alternar { display: flex; align-items: center; gap: 10px; margin: 2px 0 8px; font-size: 11px; color: var(--text-muted); } .lexpr-validacao-alternar label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; } .lexpr-validacao-aplicada { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: var(--primary-blue-dark); background: color-mix(in srgb, var(--primary-blue) 15%, var(--surface)); border-radius: 8px; padding: 1px 7px; } .lexpr-validacao { border: 1px dashed var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--primary-blue) 4%, var(--surface)); padding: 8px 10px; margin-bottom: 12px; } .lexpr-validacao-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .lexpr-validacao-titulo { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); } .lexpr-validacao-modo { font-size: 9.5px; font-weight: 600; text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--border); border-radius: 8px; padding: 0 6px; } .lexpr-validacao-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .lexpr-validacao-btn { padding: 3px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-primary); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; } .lexpr-validacao-btn:hover { border-color: var(--primary-blue); background: var(--selection); } .lexpr-validacao-btn:disabled { opacity: 0.45; cursor: default; } .lexpr-validacao-btn.boa { color: var(--success-green); border-color: color-mix(in srgb, var(--success-green) 45%, var(--border)); } .lexpr-validacao-btn.parcial { color: var(--text-secondary); } .lexpr-validacao-btn.ruim { color: var(--accent-red); border-color: color-mix(in srgb, var(--accent-red) 40%, var(--border)); } .lexpr-validacao-link { border: none; background: none; padding: 0 2px; color: var(--primary-blue); font-family: inherit; font-size: 11.5px; font-weight: 600; text-decoration: underline; cursor: pointer; } .lexpr-validacao-atalho { font-size: 11.5px; color: var(--text-secondary); margin-left: 4px; } .lexpr-validacao-pergunta { font-size: 12px; color: var(--text-primary); margin: 0 0 6px; } .lexpr-validacao-vigente { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-secondary); } .lexpr-validacao-selo { font-size: 9.5px; font-weight: 700; text-transform: uppercase; border-radius: 8px; padding: 1px 7px; color: var(--on-primary-text); background: var(--text-muted); } .lexpr-validacao-selo.boa { background: var(--success-green); } .lexpr-validacao-selo.parcial { background: var(--folder-icon); } .lexpr-validacao-selo.ruim { background: var(--accent-red); } .lexpr-validacao-lista { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; } .lexpr-validacao-opcao { display: flex; align-items: center; gap: 8px; } .lexpr-validacao-opcao-btn { flex: 1; display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 3px 8px; border: 1px solid transparent; border-radius: var(--radius-sm); background: none; font-family: inherit; font-size: 12px; color: var(--text-primary); text-align: left; cursor: pointer; } .lexpr-validacao-opcao-btn:hover { background: var(--selection); } .lexpr-validacao-opcao.principal .lexpr-validacao-opcao-btn { border-color: var(--primary-blue); background: var(--selection); } .lexpr-validacao-opcao.adicional .lexpr-validacao-opcao-btn { border-color: var(--border); } .lexpr-validacao-pos { font-size: 10.5px; font-weight: 700; color: var(--text-muted); min-width: 22px; } .lexpr-validacao-rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lexpr-validacao-marca { font-size: 9.5px; font-weight: 700; color: var(--primary-blue); } .lexpr-validacao-extra { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--text-muted); cursor: pointer; } .lexpr-validacao-obs { flex: 1; min-width: 180px; padding: 3px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-primary); font-family: inherit; font-size: 11.5px; } .lexpr-validacao-aviso { font-size: 11.5px; color: var(--success-green); margin: 4px 0 10px; } /* A estrela dentro do card do resultado (item 14). Só existe em modo validador, e não pode competir com o próprio resultado — daí o tamanho pequeno e a cor secundária. */ .lexpr-result-esperado { margin-top: 5px; padding: 1px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-secondary); font-family: inherit; font-size: 10.5px; font-weight: 600; cursor: pointer; } .lexpr-result-esperado:hover { border-color: var(--primary-blue); color: var(--primary-blue); } /* ===================================================================== DISPOSITIVO REVOGADO — riscado, no lugar dele. É a convenção que vem do Folio e que o RICMS já traz em 225 pontos ("III - (REVOGADO)", "a) (REVOGADA)", "§ 9.º (REVOGADO)"): o inciso revogado NÃO some da lista, senão quem lê perde a contagem e fica procurando o inciso III que não está mais lá. Ele fica, riscado. Diferente de .lexpr-doc-history-line.revoked, que é a NOTA editorial dizendo quem revogou — aquela é caixa vermelha, esta é a linha do próprio dispositivo. ===================================================================== */ .lexpr-doc-line.lexpr-doc-revogado, .lexpr-doc-table td.lexpr-doc-revogado { text-decoration: line-through; text-decoration-color: var(--accent-red); text-decoration-thickness: 1px; color: var(--text-muted); } /* Instrução e pendência da faixa de validação. Nasceram de um defeito real: na avaliação parcial, "Salvar" ficava desabilitado até alguém clicar numa linha da lista — e nada na tela dizia isso. Botão cinza sem explicação é uma tela escondendo a própria regra. */ .lexpr-validacao-dica { font-size: 11px; color: var(--text-muted); margin: -2px 0 6px; } .lexpr-validacao-pendente { font-size: 11px; color: var(--accent-red); margin: 6px 0 0; } /* Marca de seleção presente em TODA linha (○ vazio / ★ escolhido): é o que anuncia que a linha inteira é clicável. */ .lexpr-validacao-radio { font-size: 11px; color: var(--text-muted); min-width: 12px; } .lexpr-validacao-opcao.principal .lexpr-validacao-radio { color: var(--primary-blue); } /* Endereço sub-artigo no card do resultado: "Art. 17 → II, "c"". O artigo continua sendo o resultado; isto diz em que parte dele está a resposta. Discreto e do lado do título, não um selo colorido — não é uma qualidade do resultado, é a continuação do nome dele. */ .lexpr-result-dentro { font-size: 11px; font-weight: 600; color: var(--text-secondary); margin-left: 6px; white-space: nowrap; } /* Mesmo endereço sub-artigo, agora dentro da lista de escolha da faixa de validação. */ .lexpr-validacao-dentro { font-size: 10.5px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; } /* ===================================================================== VERSÃO DA NORMA — o cartão de consulta por data --------------------------------------------------------------------- Mesmo vocabulário visual dos outros cartões do CHICO (.lexpr-home-card): superfície, borda fina, raio 10, título em --font-size-medium, texto de apoio em 12.5px. Nada de tamanho, cor ou raio inventado aqui — o painel estava destoando justamente por ter sido desenhado como barra de ferramentas, e não como cartão. Abre NO LUGAR, empurrando o texto para baixo. Já foi menu flutuante, e o flutuante precisava de uma camada invisível atrás para fechar ao clicar fora — era ela que engolia o clique no campo de data. Duas aparências: neutra na redação vigente, âmbar numa data histórica. Essa diferença é a coisa mais importante daqui. ===================================================================== */ /* O cartão só existe ABERTO — o controle vive como ícone na barra de ações do documento (ver .lexpr-doc-action-btn.historica). Fechado, custa zero altura, que era a queixa: o normal é ler a redação vigente. */ .lexpr-versao-wrap { padding: 12px 16px 0; background: var(--background); } /* FAIXA FINA — o único resto que aparece com o cartão fechado, e só quando a aba está numa data histórica. O controle pode se esconder; o aviso de que o texto NÃO é o vigente, não: alguém lendo a redação de 2013 achando que é a de hoje é o erro caro que esta funcionalidade inteira existe para evitar. */ .lexpr-versao-faixa { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 16px; border-bottom: 1px solid color-mix(in srgb, var(--accent-red) 35%, var(--border)); background: color-mix(in srgb, var(--accent-red) 8%, var(--surface)); color: var(--text-secondary); font-size: var(--font-size-small); } .lexpr-versao-faixa > svg { flex: none; color: var(--accent-red); } .lexpr-versao-faixa strong { color: var(--accent-red); } .lexpr-versao-faixa-btn { padding: 3px 10px; border: 1px solid color-mix(in srgb, var(--accent-red) 30%, var(--border)); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-primary); font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap; } .lexpr-versao-faixa-btn:hover { border-color: var(--primary-blue); color: var(--primary-blue); } .lexpr-versao-faixa .lexpr-versao-parcial { margin-left: 0; } /* O botão de fechar do cartão, igual ao dos painéis laterais. */ .lexpr-versao-fechar { margin-left: auto; display: inline-flex; align-items: center; padding: 2px; border: none; border-radius: 4px; background: transparent; color: var(--text-muted); cursor: pointer; } .lexpr-versao-fechar:hover { color: var(--text-primary); background: var(--background); } /* O ícone de relógio da barra de ações fica vermelho enquanto a aba está numa data histórica — é o lembrete permanente de que a leitura não é a vigente. */ .lexpr-doc-action-btn.historica { color: var(--accent-red); } .lexpr-doc-action-btn.historica:hover { color: var(--accent-red); } .lexpr-versao-card { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; } .lexpr-versao-card.historica { border-color: color-mix(in srgb, var(--accent-red) 40%, var(--border)); background: color-mix(in srgb, var(--accent-red) 4%, var(--surface)); } /* ---------- cabeçalho ---------- */ .lexpr-versao-cabecalho { display: flex; align-items: center; gap: 10px; padding: 14px 18px 0; } .lexpr-versao-cabecalho > svg { flex: none; color: var(--primary-blue-dark); } .lexpr-versao-card.historica .lexpr-versao-cabecalho > svg { color: var(--accent-red); } .lexpr-versao-cabecalho h3 { margin: 0; font-size: var(--font-size-medium); font-weight: 700; color: var(--text-primary); } .lexpr-versao-parcial { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent-red) 12%, transparent); color: var(--accent-red); font-size: 10.5px; font-weight: 600; cursor: help; } /* ---------- linha "Exibindo:" ---------- */ .lexpr-versao-exibindo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 18px 16px; } .lexpr-versao-rotulo { color: var(--text-secondary); font-size: var(--font-size-normal); } /* Parece um campo de escolha, e não um botão de barra — é ele que responde "que redação estou lendo?". */ .lexpr-versao-seletor { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 210px; padding: 9px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-primary); font-size: var(--font-size-normal); font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; } .lexpr-versao-seletor:hover { border-color: var(--primary-blue); color: var(--primary-blue); } .lexpr-versao-seletor > svg { color: var(--text-muted); flex: none; } .lexpr-versao-aviso { font-size: var(--font-size-normal); color: var(--text-secondary); } .lexpr-versao-aviso strong { color: var(--accent-red); } /* ---------- seções ---------- */ .lexpr-versao-secao { display: flex; gap: 14px; padding: 18px; border-top: 1px solid var(--border-soft); } .lexpr-versao-secao-icone { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--primary-blue) 9%, var(--surface)); color: var(--primary-blue-dark); } .lexpr-versao-secao-conteudo { flex: 1; min-width: 0; } .lexpr-versao-secao-conteudo h4 { margin: 6px 0 12px; font-size: var(--font-size-normal); font-weight: 700; color: var(--text-primary); } .lexpr-versao-linha { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .lexpr-versao-data { width: 260px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-primary); font-size: var(--font-size-normal); font-family: inherit; font-variant-numeric: tabular-nums; } .lexpr-versao-data:focus { outline: 2px solid color-mix(in srgb, var(--primary-blue) 45%, transparent); outline-offset: 1px; } .lexpr-versao-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-primary); font-size: var(--font-size-normal); font-weight: 600; cursor: pointer; white-space: nowrap; } .lexpr-versao-btn:hover { border-color: var(--primary-blue); color: var(--primary-blue); } .lexpr-versao-btn.primaria { background: var(--primary-blue); border-color: var(--primary-blue); color: var(--on-primary-text); } .lexpr-versao-btn.primaria:hover { background: var(--primary-blue-dark); color: var(--on-primary-text); } .lexpr-versao-nota { margin: 12px 0 0; color: var(--text-secondary); font-size: 12.5px; line-height: 1.5; } .lexpr-versao-nota strong { color: var(--text-primary); font-weight: 700; } .lexpr-versao-erro { margin: 12px 0 0; color: var(--accent-red); font-size: 12.5px; line-height: 1.5; } .lexpr-versao-pontos { display: flex; flex-wrap: wrap; gap: 8px; max-height: 180px; overflow-y: auto; } .lexpr-versao-ponto { padding: 8px 15px; border: 1px solid color-mix(in srgb, var(--primary-blue) 25%, var(--border)); border-radius: var(--radius-sm); background: var(--surface); color: var(--primary-blue); font-size: var(--font-size-normal); font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; } .lexpr-versao-ponto:hover { border-color: var(--primary-blue); background: var(--selection); } .lexpr-versao-ponto.atual { background: var(--primary-blue); border-color: var(--primary-blue); color: var(--on-primary-text); } /* Reconstrução parcial, em detalhe (painel de histórico do dispositivo). */ .lexpr-temporal-incompleto-detalhe { margin: 6px 0; padding: 8px 10px; border-left: 3px solid var(--accent-red); border-radius: 4px; background: color-mix(in srgb, var(--accent-red) 7%, transparent); font-size: 11.5px; line-height: 1.5; color: var(--text-secondary); } /* A data na própria aba — com três abas em datas diferentes, saber qual é qual não pode depender de clicar em cada uma. */ .lexpr-tab-date { margin-left: 5px; padding: 0 5px; border-radius: 3px; background: color-mix(in srgb, var(--accent-red) 15%, transparent); color: var(--accent-red); font-size: 9.5px; font-weight: 700; font-variant-numeric: tabular-nums; } /* O relógio de "redações anteriores", irmão visual do rótulo de consolidação logo ao lado. */ .lexpr-doc-article-timeline { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 8px; border: 1px solid var(--border); border-radius: 3px; background: var(--background); color: var(--text-secondary); font-size: 10.5px; font-weight: 600; cursor: pointer; vertical-align: middle; white-space: nowrap; } .lexpr-doc-article-timeline:hover { border-color: var(--primary-blue); color: var(--primary-blue); } .lexpr-temporal-evento { margin: 8px 0; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--background); } /* O selo do tipo de alteração e a data ficam lado a lado, com respiro — sem isto saía "ACRESCENTADOefeitos a partir de 20/02/2025". */ .lexpr-temporal-evento .lexpr-revision-kind { margin-right: 8px; } .lexpr-temporal-evento-texto { margin-top: 5px; font-size: 11.5px; line-height: 1.55; color: var(--text-secondary); white-space: pre-wrap; } /* ===================================================================== REALCE DE CHEGADA --------------------------------------------------------------------- Quem clica numa referência precisa achar o trecho citado sem varrer a tela — mas o destaque não pode virar marca no documento. Some sozinho em 2,6 s, e respeita quem pediu menos movimento no sistema. ===================================================================== */ .lexpr-flash-alvo { animation: lexpr-flash 2.6s ease-out 1; border-radius: 4px; } @keyframes lexpr-flash { 0% { background: color-mix(in srgb, var(--primary-blue) 22%, transparent); } 70% { background: color-mix(in srgb, var(--primary-blue) 14%, transparent); } 100% { background: transparent; } } @media (prefers-reduced-motion: reduce) { .lexpr-flash-alvo { animation: none; outline: 2px solid var(--primary-blue); outline-offset: 2px; } } /* ===================================================================== ESCOPO DA PESQUISA --------------------------------------------------------------------- Em que norma a pesquisa vai procurar. Fica visível ANTES de pesquisar, e não só depois: com mais de uma lei no acervo, quem procura no RICMS e não acha precisa saber que procurou no RICMS — senão conclui que a lei não trata do assunto. ===================================================================== */ .lexpr-search-scope { display: flex; align-items: center; gap: 6px; margin: 10px 0 2px; padding: 5px 9px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--background); color: var(--text-secondary); font-size: 11.5px; line-height: 1.4; } .lexpr-search-scope > svg { flex: none; color: var(--toolbar-icon); } .lexpr-search-scope strong { color: var(--text-primary); } /* ===================================================================== CABEÇALHO ESTRUTURAL E FECHO ESCRITOS DENTRO DO CORPO --------------------------------------------------------------------- Nem toda norma vira nó de banco. Um acervo que reúne várias leis num documento só (o do ITCMD/PR reúne 48) traz o cabeçalho de capítulo e o fecho com as assinaturas como texto solto no corpo de um artigo — e eles saíam alinhados à esquerda, do tamanho de um inciso, enquanto o capítulo que É nó aparecia centralizado e azul. A mesma coisa com duas caras. Aqui elas passam a ter a MESMA cara: os mesmos tamanho, cor e centro de .lexpr-doc-h3/h4, e o nome de quem assina em negrito, que é como o Diário Oficial publica. Ver LegalTextParser.LegalLineKind. ===================================================================== */ .lexpr-doc-line.lexpr-doc-heading-line { margin: 26px 0 4px; color: var(--primary-blue); font-weight: 700; font-size: 15.5px; text-align: center; text-indent: 0; } /* Rubrica logo abaixo do rótulo ("CAPÍTULO VII" / "DA ALÍQUOTA"): encosta no cabeçalho de cima, porque as duas linhas são um bloco só. */ .lexpr-doc-line.lexpr-doc-heading-line + .lexpr-doc-line.lexpr-doc-heading-line { margin-top: 0; } /* ---------- papel do texto declarado pelo importador (ver TableMarkers) ---------- */ /* O TÍTULO DO DOCUMENTO — "Consulta 006/2026". Marca ONDE UM DOCUMENTO COMEÇA, e é a régua acima dele que faz o trabalho: a leitura é em rolagem contínua, e sem essa separação a ementa de uma consulta se lê como mais um parágrafo do fim da consulta anterior. No RICMS o "Art. 17" cumpre esse papel sozinho; num acervo de documentos independentes, nada cumpre. */ .lexpr-doc-line.lexpr-doc-titulo-documento { margin: 42px 0 14px; padding-top: 24px; border-top: 2px solid var(--border); font-size: 17px; font-weight: 700; color: var(--primary-blue); text-indent: 0; text-align: left; } /* O primeiro documento visível não precisa de régua acima — ela separaria o texto do cabeçalho da página, não um documento do outro. */ .lexpr-doc-article-wrap:first-of-type .lexpr-doc-line.lexpr-doc-titulo-documento { border-top: none; padding-top: 0; margin-top: 6px; } /* A EMENTA — o enunciado do documento. É o que a pessoa lê primeiro para decidir se aquela consulta responde a pergunta dela, e por isso não pode ter o mesmo peso do relato que vem depois. Alinhada à esquerda, e não centralizada como o cabeçalho de seção: ela é uma frase longa, às vezes de quatro linhas, e centralizar frase longa atrapalha a leitura. */ .lexpr-doc-line.lexpr-doc-ementa { margin: 4px 0 18px; padding: 12px 16px; background: var(--background); border-left: 3px solid var(--primary-blue); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-weight: 640; font-size: 15px; line-height: 1.45; color: var(--text-primary); text-indent: 0; text-align: left; } /* O CABEÇALHO DE SEÇÃO — "RESPOSTA", "DOS FATOS". É o divisor entre o que o contribuinte perguntou e o que o fisco respondeu, a fronteira mais importante do documento. Centralizado e em caixa alta como o documento original o escreve. */ .lexpr-doc-line.lexpr-doc-secao-titulo { margin: 28px 0 10px; color: var(--primary-blue); font-weight: 700; font-size: 14.5px; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; text-indent: 0; } .lexpr-doc-line.lexpr-doc-secao-titulo::after { content: ""; display: block; width: 56px; height: 2px; margin: 8px auto 0; background: var(--border); } .lexpr-doc-line.lexpr-doc-assinatura, .lexpr-doc-line.lexpr-doc-assinatura-nome { text-align: center; text-indent: 0; margin: 4px 0; color: var(--text-secondary); } /* O local e a data abrem o fecho, e ganham um respiro maior por isso. */ .lexpr-doc-line.lexpr-doc-assinatura:first-of-type { margin-top: 18px; } .lexpr-doc-line.lexpr-doc-assinatura-nome { margin-top: 14px; color: var(--text-primary); font-weight: 700; } /* ===================================================================== CABEÇALHO DA NORMA ("LEI Nº 22.262/2024") --------------------------------------------------------------------- Num acervo com dezenas de normas em rolagem contínua, o título de cada uma é a única fronteira visível entre uma lei e a seguinte — e estava saindo como um negrito qualquer, encostado no fecho da lei anterior. Centralizado, com espaço acima e um filete, ele passa a SEPARAR. ===================================================================== */ .lexpr-doc-norma-title { margin: 40px 0 6px; padding-top: 22px; border-top: 2px solid var(--border); color: var(--primary-blue-dark); font-size: 20px; font-weight: 700; letter-spacing: 0.02em; text-align: center; } /* O filete vale para TODA norma, inclusive a primeira — ali ele lê como régua de título, não como separador solto. Já tentei poupar a primeira com :first-child e não funciona: o título é sempre o primeiro filho do próprio contêiner (#node-N), então a regra casava em todas e o filete não aparecia em nenhuma. Distinguir "a primeira do documento" por CSS exigiria :has() ou uma classe posicional — complexidade que um filete não justifica. */ .lexpr-doc-norma-updated { display: block; text-align: center; }