/*
 * Tema JURÍDICO INTEGRADO sobre Bootstrap 5.
 * Paleta/tokens vêm de docs/design-system-clean-saas-v3.md ("Clean SaaS
 * Dashboard v3.0", vigente a partir de 2026-08-14 — ver DECISOES.md).
 * Sucede docs/backlog/IDENTIDADE_VISUAL_PARECERES_v2.md, removido do disco
 * pelo usuário na mesma troca — não citar mais esse caminho em comentário
 * novo.
 * Carregado depois do bootstrap.min.css em base.html — pode sobrescrever por
 * igual especificidade.
 */

:root {
  --cor-fundo: #F8F9FB;
  --cor-superficie: #FFFFFF;

  --cor-texto: #111827;
  --cor-texto-secundario: #4B5563;
  /* v3 não nomeia uma 3ª camada de texto no frontmatter, mas usa #6B7280
     informalmente em quase todo componente (ícone de botão terciário,
     placeholder de dropdown, meta de card) — mesmo papel que
     --cor-texto-fraco já cobria aqui. ~4.8:1 contra branco, passa WCAG
     1.4.3 pra texto normal (ver revisão de acessibilidade herdada da v2,
     mesmo cálculo, valor novo). */
  --cor-texto-fraco: #6B7280;

  --cor-borda: #D1D5DB;
  --cor-borda-suave: #F3F4F6;

  --cor-acento: #4F46E5;
  --cor-acento-hover: #4338CA;
  --cor-acento-suave: #EEF2FF;
  /* RGB de --cor-acento — Bootstrap consome como tripla, não como var()
     dentro de rgba() (ver --bs-link-color-rgb/--bs-btn-focus-shadow-rgb
     abaixo e .json-editor-textarea::selection). Mudar o hex acima sem
     mudar esta tripla desalinha os dois. */
  --cor-acento-rgb: 79, 70, 229;

  /* v3 Success/Warning/Error/Info (seção Colors) — texto sempre escurecido
     o bastante pra passar 4.5:1 contra o próprio fundo pastel da mesma
     linha (conferido: Warning #92400E/#FEF3C7 ~6.4:1, Error #991B1B/#FEE2E2
     ~5.9:1, Info #1E40AF/#DBEAFE ~6:1 — mais generoso que o mínimo que a v2
     já tinha precisado garantir manualmente). */
  --cor-sucesso: #065F46;
  --cor-sucesso-suave: #D1FAE5;

  --cor-alerta: #92400E;
  --cor-alerta-suave: #FEF3C7;

  --cor-erro: #991B1B;
  --cor-erro-suave: #FEE2E2;

  /* Info é semântica nova — v2 não tinha (só sucesso/alerta/erro). Ainda
     sem uso em nenhum template nesta entrega; token existe pra quando um
     componente precisar (ex.: badge "aguardando", nota informativa). */
  --cor-info: #1E40AF;
  --cor-info-suave: #DBEAFE;

  /* Sublinhado de marcador pendente no editor (ver .marcador-pendente
     abaixo) — azul de preenchimento, convenção herdada dos modelos .docx
     que o app substitui (campo cinza + sublinhado azul), distinto do
     indigo de marca (--cor-acento, usado em navegação/ações) e do azul
     padrão de hyperlink do Bootstrap que já aparece nos links inseridos no
     corpo do parecer (mark `link` do editor, sem CSS próprio). */
  --cor-marcador-pendente: #0d6efd;

  --esp-micro: 4px;
  --esp-pequeno: 8px;
  --esp-compacto: 12px;
  --esp-padrao: 16px;
  --esp-secao: 24px;
  --esp-grande: 32px;

  /* Escala de raio (v3, "Elevação Sutil/Soft UI" — sucede a "Flat
     Architecture" 4px/6px da v2). 8px padrão (botões/inputs/badges/células),
     6px só em ação compacta (chip/botão pequeno de tabela), 12px em
     card/modal/painel. Pílula (raio total) segue proibida em botão/card —
     única exceção documentada é avatar/badge numérico circular. */
  --raio: 8px;
  --raio-pequeno: 6px;
  --raio-grande: 12px;

  /* Escala de sombra (v3, "Elevação Sutil" — a v2 não tinha nenhuma,
     "Flat Architecture" evitava sombra de propósito). Nomes reaproveitam
     as custom properties que o próprio Bootstrap já lê em `.shadow*`
     (ver DECISOES.md) — cards/dropdowns/modais abaixo aplicam
     explicitamente, porque o Bootstrap declara essas variáveis mas não usa
     `box-shadow` na regra base de `.card`/`.dropdown-menu`/`.modal-content`
     (conferido no CSS compilado, não presumido — mesmo cuidado que a
     descoberta do offcanvas em 2026-08-14). */
  --bs-box-shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
  --bs-box-shadow: 0 1px 3px rgba(0, 0, 0, .05), 0 1px 2px rgba(0, 0, 0, .03);
  --sombra-md: 0 4px 6px -1px rgba(0, 0, 0, .05), 0 2px 4px -2px rgba(0, 0, 0, .03);
  --bs-box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .05), 0 4px 6px -4px rgba(0, 0, 0, .02);
  --sombra-xl: 0 20px 25px -5px rgba(0, 0, 0, .05), 0 8px 10px -6px rgba(0, 0, 0, .02);

  --fonte-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  --bs-font-sans-serif: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-font-size: 14px;
  --bs-body-bg: var(--cor-fundo);
  --bs-body-color: var(--cor-texto);
  --bs-secondary-color: var(--cor-texto-secundario);
  --bs-tertiary-color: var(--cor-texto-fraco);
  --bs-border-color: var(--cor-borda);
  --bs-border-radius: var(--raio);
  --bs-border-radius-sm: var(--raio-pequeno);
  --bs-border-radius-lg: var(--raio-grande);
  --bs-link-color-rgb: var(--cor-acento-rgb);
  --bs-link-hover-color-rgb: 67, 56, 202;
}

/* Respeita prefers-reduced-motion (revisão de acessibilidade — ver
   DECISOES.md): zera duração/repetição de toda animação e transição CSS do
   projeto pra quem pediu menos movimento no SO — inclui o spinner
   `.girando` (que já carrega o status também em texto ao lado, então parar
   de girar não perde informação) e as transições de hover/foco (borda,
   fundo, largura da barra de progresso). Snippet padrão (The A11Y Project) —
   `!important` é necessário aqui: é a única forma de vencer a duração
   declarada por regra mais específica sem duplicar a media query em cada
   uma. `scroll-behavior: auto` cobre rolagem suave, mesmo sem uso atual. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Escala tipográfica nomeada (v2). Aplicada nos pontos que já pediam esses
   papéis (títulos, legendas, rótulos de status, dado tabular/monoespaçado) —
   não é um reset geral de fonte, é vocabulário pra reutilizar em vez de
   inventar tamanho novo por tela. */
.txt-display-lg {
  font-size: 30px;
  font-weight: 700;
  line-height: 38px;
  letter-spacing: -0.02em;
}

.txt-headline-md {
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.01em;
}

.txt-title-sm {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.txt-label-caps {
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.txt-mono-data {
  font-family: var(--fonte-mono);
  font-size: 12px;
  line-height: 16px;
}

/* Logs & Debug (/admin/plataforma/logs, app/rotas/painel_plataforma.py) — body/headers de
   requisição e chamada de LLM, texto potencialmente grande (JSON de um parecer inteiro) —
   rolagem própria em vez de estourar o modal. */
.log-corpo {
  font-family: var(--fonte-mono);
  font-size: 12px;
  line-height: 18px;
  background: var(--cor-borda-suave);
  border: 1px solid var(--cor-borda);
  border-radius: 6px;
  padding: 10px 12px;
  max-height: 320px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Ícones — Material Symbols Outlined, um só ponto de variação (peso leve,
   sem preenchimento) pra manter a sobriedade institucional; decidido em
   2026-08-07 (ver DECISOES.md), ainda vigente pra TODO o app fora da
   sidebar. A seção "Icons" de docs/design-system-clean-saas-v3.md (v3,
   2026-08-14) propõe SVG inline outline (estilo Lucide/Heroicons) em vez
   de Material Symbols — mesma técnica já adotada só na sidebar (ver
   `app/templates/base.html`). Migrar os ~20 templates que ainda usam
   `<span class="material-symbols-outlined">` fica de fora desta leva de
   propagação do v3 (2026-08-14) de propósito: é troca de marcação em cada
   template, não CSS/token, e merece revisão própria — ver DECISOES.md.
   Não decorativo por padrão — cada uso concreto decide se o texto ao lado
   é dispensável (e então o ícone leva aria-hidden="true") ou se o ícone é
   só reforço visual de um texto que já basta sozinho. */
.material-symbols-outlined {
  font-variation-settings:
    "FILL" 0,
    "wght" 300,
    "GRAD" 0,
    "opsz" 20;
  font-size: 20px;
  vertical-align: middle;
  line-height: 1;
}

.btn .material-symbols-outlined {
  margin-right: var(--esp-micro);
  font-size: 18px;
  vertical-align: -3px;
}

/* Icone alinhado a texto de corpo (14px) dentro de <p>/<span>, nao a um
   botao nem a uma celula de tabela — 20px do padrao ficaria maior que a
   linha. Nomeia o 16px que tres pontos de tarefa_form.html repetiam como
   `style="font-size: 1rem"` inline. */
.material-symbols-outlined.icone-inline {
  font-size: 16px;
  vertical-align: -3px;
}

.table .material-symbols-outlined {
  font-size: 18px;
  color: var(--cor-texto-secundario);
}

/* Ícone de botão dentro de célula de tabela (ex.: "remover" de linha em
   campos/tabela.html) — a regra acima pintaria o ícone de cinza mesmo num
   botão vermelho/roxo; aqui ele volta a herdar a cor do próprio botão.
   3 classes > 2 classes, ganha da regra .table sem depender de ordem. */
.table .btn .material-symbols-outlined {
  color: inherit;
}

/* Rodapé grudado na base da viewport mesmo com pouco conteúdo (sticky
   footer clássico): body vira coluna de altura mínima igual à tela, e
   .conteudo (main) cresce pra empurrar .rodape pro fim — ver regras de
   .conteudo/.rodape mais abaixo. */
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* h1 entra junto com h2 (mesmo `display-lg` da v3: 30px/700) porque o titulo
   de pagina deste app sempre foi renderizado por <h2> — a varredura de
   2026-08-24 troca o elemento por <h1> pela semantica (um h1 por pagina,
   ordem de heading sem pulo) e nao pela aparencia. Sem esta linha, <h1>
   cairia no default responsivo do Bootstrap (ate 40px) e a troca viraria
   uma mudanca visual em 49 telas. Titulo de secao segue em .h5/h3. */
h1,
h2 {
  font-size: 30px;
  font-weight: 700;
  line-height: 38px;
  letter-spacing: -0.02em;
  margin: var(--esp-secao) 0 var(--esp-padrao);
}

h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  margin: 0 0 var(--esp-compacto);
}

fieldset legend {
  font-size: 15px;
  font-weight: 600;
  color: var(--cor-texto-secundario);
}

.editor-schema {
  font-family: var(--fonte-mono);
  font-size: 13.5px;
}

/* ===================================================================
   Sidebar + topbar — identidade "soft/moderna" (2026-08-14, ver
   DECISOES.md). Sucede o header navy full-bleed (layout comentado aqui
   desde 2026-08-06: cabeçalho full-bleed + .conteudo centralizado por
   padding-top). Agora .conteudo/.rodape convivem ao lado de uma coluna
   fixa à esquerda — ver regra `body:has(.sidebar)` mais abaixo pra como
   o deslocamento só se aplica quando a sidebar de fato renderiza (não no
   editor de parecer, que sobrescreve `cabecalho` com a própria casca —
   ADR-0003 — nem no login, que zera o bloco inteiro).

   Ícones: SVG outline inline (sprite em base.html), não Material Symbols
   (usado no resto do app) — decisão do usuário ao aprovar o protótipo
   desta identidade, ver DECISOES.md.

   Tokens `--sb-*` abaixo são escopados a este chrome de propósito — não
   redefinem --cor-fundo/--cor-superficie/--cor-texto* etc. usados pelo
   resto do app (botões, cards, tabelas), que continua no tema claro fixo
   de sempre.

   Modo escuro é claro por padrão de propósito (pedido do usuário,
   2026-08-14 — ver DECISOES.md): os valores dark abaixo existem mas só
   entram sob `:root[data-theme="dark"]` — um seletor explícito que hoje
   nenhum JS/preferência de sessão ainda seta, então o app inteiro renderiza
   sempre claro, independente do SO do usuário. Nada aciona `[data-theme]`
   ainda: é preparação para quando a configuração de tema por tenant
   existir (Fase 5, painel de configurações), não a feature em si. Trocar
   por `@media (prefers-color-scheme: dark)` de novo é regressão, não
   evolução — o pedido foi explicitamente "não seguir o SO". */
:root {
  --sb-fundo: #F8F9FB;
  --sb-superficie: #FFFFFF;
  --sb-borda: #E5E7EB;
  --sb-texto: #111827;
  --sb-texto-secundario: #4B5563;
  --sb-texto-terciario: #6B7280;
  --sb-acento: #4F46E5;
  --sb-acento-hover: #4338CA;
  --sb-acento-suave: #EEF2FF;
  --sb-acento-tinta: #FFFFFF;
  --sb-hover: #F3F4F6;
  --sb-alerta: #B91C1C;
  --sb-sombra-painel: 0 8px 24px rgba(15, 23, 42, .12);
  --sb-backdrop: rgba(15, 17, 21, .3);
}

:root[data-theme="dark"] {
  --sb-fundo: #101114;
  --sb-superficie: #17191D;
  --sb-borda: #2A2D33;
  --sb-texto: #F3F4F6;
  --sb-texto-secundario: #B2B8C4;
  --sb-texto-terciario: #8B909B;
  --sb-acento: #7C74FF;
  --sb-acento-hover: #948DFF;
  --sb-acento-suave: #211F3F;
  --sb-acento-tinta: #101114;
  --sb-hover: #1F2229;
  --sb-alerta: #F87171;
  --sb-sombra-painel: 0 8px 24px rgba(0, 0, 0, .5);
  --sb-backdrop: rgba(0, 0, 0, .5);
}

/* .btn-close do Bootstrap é um data-URI de X escura fixa — some contra
   fundo escuro. Mesma técnica do próprio .btn-close-white do Bootstrap
   (inverter a imagem via filter) em vez de reimplementar o ícone. */
:root[data-theme="dark"] .sidebar-fechar {
  filter: invert(1) grayscale(100%);
}

.sidebar,
.topbar {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.sidebar svg.icone,
.topbar svg.icone,
.painel-notificacoes svg.icone {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Largura só como fallback pré-JS/pré-CSS-do-Bootstrap carregar — o
   Bootstrap Offcanvas usa a custom property abaixo pra tudo (posição
   translateX, largura no breakpoint lg etc.), então setar só `width` sem
   a variável deixaria os dois lados divergindo. */
.sidebar {
  --bs-offcanvas-width: 256px;
  width: 256px;
  background: var(--sb-superficie);
  border-right: 1px solid var(--sb-borda);
  padding: 16px 12px;
  color: var(--sb-texto);
}

/* Gaveta — offcanvas de conteúdo de domínio, o recipiente "detalhe consultado
   em série" da skill de UI (`composicao-de-pagina.md` §8.4). Distinta do
   `.sidebar` acima, que é o outro offcanvas do produto e tem largura de menu.
   Só a largura: o resto (posição, transição, foco, Esc) é o Bootstrap.

   `min(...)` porque as duas pontas importam — larga o bastante para o texto do
   documento continuar legível, e com teto para a lista atrás não sumir. É essa
   lista que a gaveta existe para preservar; se ela some, o certo era modal. */
.gaveta {
  --bs-offcanvas-width: min(720px, 92vw);
}

/* O conteúdo compartilhado com a página cheia traz `col-lg-8`/`col-lg-4`, e o breakpoint do
   Bootstrap é media query — lê o **viewport**, não a largura deste painel. Num monitor grande as
   duas colunas continuam valendo dentro de 720px e ficam espremidas (visto na captura da
   verificação de UI, 2026-09-02). Empilha, sem mexer no parcial: quem decide a largura da coluna
   é o recipiente, não o conteúdo. */
.gaveta .row > [class*="col-"] {
  flex: 0 0 auto;
  width: 100%;
}

/* Backdrop do drawer mobile (só existe abaixo do breakpoint lg, injetado
   pelo próprio Bootstrap Offcanvas) — `opacity:1` porque a cor já vem com
   a transparência embutida no token; sem isso o `opacity:.5` padrão do
   Bootstrap multiplicaria por cima e escureceria de menos. */
.offcanvas-backdrop.show {
  background-color: var(--sb-backdrop);
  opacity: 1;
}

.sidebar-marca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 8px 20px;
}

.sidebar-marca-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  min-width: 0;
}

.sidebar-marca-icone {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--sb-acento);
  color: var(--sb-acento-tinta);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-marca-icone svg.icone { width: 18px; height: 18px; }

.sidebar-marca-texto {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--sb-texto);
}

.sidebar-fechar { flex-shrink: 0; }

.sidebar-corpo {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  color: var(--sb-texto-secundario);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.sidebar-item:hover { background: var(--sb-hover); color: var(--sb-texto); }
.sidebar-item:focus-visible { outline: 2px solid var(--sb-acento); outline-offset: 2px; }
.sidebar-item[aria-current="page"] { background: var(--sb-acento-suave); color: var(--sb-acento); }
.sidebar-item[aria-current="page"] svg.icone { color: var(--sb-acento); }

/* "Configurações" — sanfona (Bootstrap Collapse) no lugar do dropdown do
   header antigo, que não encaixava preso a um item de 256px de largura.
   `.secao-ativa` (não aria-current: o botão em si não é a página atual,
   só indica que a seção está aberta — o item de dentro é que leva
   aria-current de verdade) usa o mesmo tom fraco de destaque do estado
   ativo comum, sem duplicar cor nova só pra isso. */
.sidebar-item-acordeao { justify-content: flex-start; }
.sidebar-item-texto { flex: 1; }
.sidebar-item-acordeao.secao-ativa { color: var(--sb-acento); }
.sidebar-item-acordeao.secao-ativa svg.icone { color: var(--sb-acento); }

.sidebar-seta-acordeao {
  transition: transform .15s ease;
}

.sidebar-item-acordeao[aria-expanded="true"] .sidebar-seta-acordeao {
  transform: rotate(180deg);
}

.sidebar-submenu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0 2px 34px;
}

.sidebar-subitem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--sb-texto-secundario);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}

.sidebar-subitem svg.icone { width: 16px; height: 16px; }
.sidebar-subitem:hover { background: var(--sb-hover); color: var(--sb-texto); }
.sidebar-subitem:focus-visible { outline: 2px solid var(--sb-acento); outline-offset: 2px; }
.sidebar-subitem[aria-current="page"] { background: var(--sb-acento-suave); color: var(--sb-acento); }

/* "Continuar de onde parou" — dado real (ver base.html), cada item é um
   <a href> de verdade pro editor do parecer/formulário do processo. */
.sidebar-continuar {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--sb-borda);
}

.sidebar-rotulo-secao {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--sb-texto-terciario);
  margin: 0 12px 8px;
}

.sidebar-continuar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s ease;
}

.sidebar-continuar-item:hover { background: var(--sb-hover); }
.sidebar-continuar-item:focus-visible { outline: 2px solid var(--sb-acento); outline-offset: 2px; }

.sidebar-continuar-icone {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--sb-acento-suave);
  color: var(--sb-acento);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-continuar-icone svg.icone { width: 14px; height: 14px; }
.sidebar-continuar-texto { min-width: 0; display: flex; flex-direction: column; }

.sidebar-continuar-titulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--sb-texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-continuar-sub {
  font-size: 12px;
  color: var(--sb-texto-terciario);
}

/* Bloco de perfil — nome/cargo/avatar mock (ver base.html), menu de verdade
   (Bootstrap Dropdown, `.dropup` porque o gatilho fica no fim da sidebar,
   sem espaço abaixo pra abrir). Borda/margem que separam do resto da nav
   ficam no `.dropup` (o wrapper), não no botão — senão dobrariam de novo
   quando o botão ganhasse padding próprio. */
.sidebar-perfil-dropup {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--sb-borda);
}

.sidebar-perfil {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  border: none;
  background: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background .15s ease;
}

.sidebar-perfil:hover { background: var(--sb-hover); }
.sidebar-perfil:focus-visible { outline: 2px solid var(--sb-acento); outline-offset: 2px; }

.sidebar-perfil-seta {
  color: var(--sb-texto-terciario);
  flex-shrink: 0;
  transition: transform .15s ease;
}

.sidebar-perfil[aria-expanded="true"] .sidebar-perfil-seta {
  transform: rotate(180deg);
}

.sidebar-perfil-menu {
  width: 232px;
  border: 1px solid var(--sb-borda);
  border-radius: 10px;
  box-shadow: var(--sb-sombra-painel);
  padding: 6px;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.sidebar-perfil-menu .dropdown-item {
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--sb-texto-secundario);
}

.sidebar-perfil-menu .dropdown-item:hover,
.sidebar-perfil-menu .dropdown-item:focus-visible {
  background: var(--sb-hover);
  color: var(--sb-texto);
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sb-acento);
  color: var(--sb-acento-tinta);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}

.sidebar-perfil-info { min-width: 0; display: flex; flex-direction: column; }

.sidebar-perfil-nome {
  font-size: 14px;
  font-weight: 600;
  color: var(--sb-texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-perfil-cargo { font-size: 12px; color: var(--sb-texto-terciario); }

/* Barra fina acima do conteúdo — só abriga o toggle mobile e as
   notificações (globais, em toda página); título de cada página continua
   vindo do próprio `conteudo` de cada template, não duplicado aqui. */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 24px;
  background: var(--sb-superficie);
  border-bottom: 1px solid var(--sb-borda);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.botao-abrir-sidebar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--sb-borda);
  color: var(--sb-texto-terciario);
  cursor: pointer;
}

.botao-abrir-sidebar:hover { background: var(--sb-hover); color: var(--sb-texto); }
.botao-abrir-sidebar:focus-visible { outline: 2px solid var(--sb-acento); outline-offset: 2px; }

/* Trilha de navegação (breadcrumb) — Fase 19/Epic 2, no lugar do antigo .botao-voltar. `flex: 1`
   pra ocupar o meio da topbar entre o toggle da sidebar e `.topbar-acoes`; `min-width: 0` é o que
   permite o `overflow: hidden` abaixo funcionar dentro de um item flex (senão o item nunca encolhe
   além do conteúdo). Tokens `--sb-*` porque é cromo da topbar, não conteúdo de página — mesmo
   raciocínio de .botao-abrir-sidebar/.botao-notificacoes acima, não os tokens `--cor-*` que
   `.breadcrumb` usaria por padrão (tema do Bootstrap). */
.trilha {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.trilha .breadcrumb {
  flex-wrap: nowrap;
  overflow: hidden;
  font-size: 14px;
}

.trilha .breadcrumb-item {
  white-space: nowrap;
}

.trilha .breadcrumb-item + .breadcrumb-item::before {
  color: var(--sb-texto-terciario);
}

.trilha .breadcrumb-item a {
  color: var(--sb-texto-secundario);
  text-decoration: none;
  border-radius: 4px;
}

.trilha .breadcrumb-item a:hover {
  color: var(--sb-texto);
  text-decoration: underline;
}

.trilha .breadcrumb-item a:focus-visible {
  outline: 2px solid var(--sb-acento);
  outline-offset: 2px;
}

/* Último item — página atual, sem link (CLAUDE.md § Acessibilidade: <a href="#"> pra "aqui mesmo"
   seria um link que não navega). */
.trilha .breadcrumb-item.active {
  color: var(--sb-texto);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Abaixo de sm, a trilha reduz para os dois últimos níveis — o resto ainda existe no DOM (não
   perde a semântica pra leitor de tela), só não cabe na largura de um celular. O separador do
   primeiro item visível continua aparecendo: `+` conta o irmão anterior mesmo escondido por
   `display: none`, então não sobra "órfão" sem "/" na frente. */
@media (max-width: 575.98px) {
  .trilha .breadcrumb-item:not(:nth-last-child(-n+2)) {
    display: none;
  }
}

.topbar-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.botao-notificacoes {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--sb-borda);
  color: var(--sb-texto-terciario);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.botao-notificacoes:hover { background: var(--sb-hover); color: var(--sb-texto); }
.botao-notificacoes:focus-visible { outline: 2px solid var(--sb-acento); outline-offset: 2px; }

.badge-notificacao {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sb-alerta);
  border: 1.5px solid var(--sb-superficie);
}

.painel-notificacoes {
  width: 320px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--sb-borda);
  border-radius: 10px;
  box-shadow: var(--sb-sombra-painel);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.painel-notificacoes-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--sb-borda);
}

.painel-notificacoes-cabecalho h2 { font-size: 14px; font-weight: 600; margin: 0; color: var(--sb-texto); }

.painel-notificacoes-cabecalho button {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--sb-acento);
  cursor: pointer;
}

.painel-notificacoes-cabecalho button:hover { text-decoration: underline; }
.painel-notificacoes-cabecalho button:focus-visible { outline: 2px solid var(--sb-acento); outline-offset: 2px; }

.painel-notificacoes-lista { max-height: 320px; overflow-y: auto; }

.notificacao-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-bottom: 1px solid var(--sb-borda);
  font-size: 13px;
  color: var(--sb-texto-terciario);
}

.notificacao-item:last-child { border-bottom: none; }
.notificacao-item svg.icone { color: var(--sb-acento); margin-top: 1px; }
.notificacao-item.lida svg.icone { color: var(--sb-texto-terciario); }
.notificacao-texto { color: var(--sb-texto); font-weight: 500; line-height: 1.4; }
.notificacao-item.lida .notificacao-texto { color: var(--sb-texto-secundario); font-weight: 400; }

/* Fase 20/Epic 2 — `.notificacao-item` deixou de ser `<div>` decorativo: agora é `<a>` (lida, só
   navega) ou `<button>` dentro de `<form>` (não lida, marca como lida e segue pro link — ver
   `_notificacoes_topbar.html`). Reset da aparência nativa por cima do bloco acima, que já cobre
   ícone/texto/espaçamento; sem isto um `<button>` vira cinza com borda do sistema operacional. */
a.notificacao-item,
button.notificacao-item {
  display: flex;
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--sb-borda);
  border-radius: 0;
  text-align: left;
  text-decoration: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

a.notificacao-item:last-child,
button.notificacao-item:last-child { border-bottom: none; }
a.notificacao-item:hover,
button.notificacao-item:hover { background: var(--sb-hover); }
a.notificacao-item:focus-visible,
button.notificacao-item:focus-visible { outline: 2px solid var(--sb-acento); outline-offset: -2px; }

.painel-notificacoes-rodape {
  padding: 10px 14px;
  text-align: center;
  border-top: 1px solid var(--sb-borda);
}

.painel-notificacoes-rodape a { font-size: 13px; font-weight: 500; color: var(--sb-acento); text-decoration: none; }
.painel-notificacoes-rodape a:hover { text-decoration: underline; }
.painel-notificacoes-rodape a:focus-visible { outline: 2px solid var(--sb-acento); outline-offset: 2px; }
.notificacao-tempo { color: var(--sb-texto-terciario); font-size: 12px; margin-top: 2px; }

/* Desktop (≥lg): a sidebar deixa de ser um drawer pra virar coluna fixa.
   Checado direto no CSS compilado do Bootstrap 5.3.8 (não confiar de
   memória — a versão anterior deste comentário estava errada): o
   `@media (min-width:992px){.offcanvas-lg{...}}` do próprio Bootstrap só
   tira borda/header/bg, ele NÃO reseta `position`/`visibility`/`transform`
   nesse breakpoint — essas continuam valendo da regra base (incondicional,
   qualquer largura): `position:fixed; visibility:hidden;
   transform:translateX(-100%)` até a classe `.show` aparecer via JS. Sem
   este bloco a sidebar simplesmente não aparece em telas grandes (só via
   `.show`, isto é, só quando "aberta" como drawer) — bug real, pego só ao
   rodar o app e tirar screenshot, não na leitura do CSS.

   Duas pegadinhas a mais no mesmo `@media (min-width:992px){.offcanvas-lg{...}}`
   do Bootstrap, também só visíveis no CSS compilado: `background-color:
   transparent !important` (preciso do próprio !important pra vencer — nem
   especificidade resolve contra !important) e `--bs-offcanvas-border-width:0`
   (variável que o `border-right` de `.offcanvas-lg.offcanvas-start`, 2
   classes, usa — preciso repetir `border-right` aqui dentro, não dá pra só
   confiar na variável). Selector de 3 classes
   (`.sidebar.offcanvas-lg.offcanvas-start`) já vence as regras de 2 classes
   do Bootstrap por especificidade pra tudo que não é !important. */
@media (min-width: 992px) {
  .sidebar.offcanvas-lg.offcanvas-start {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    visibility: visible;
    transform: none;
    border-right: 1px solid var(--sb-borda);
    background-color: var(--sb-superficie) !important;
  }

  .sidebar-fechar,
  .botao-abrir-sidebar {
    display: none;
  }

  body:has(.sidebar) .topbar {
    margin-left: 256px;
  }
}

.conteudo {
  flex: 1 0 auto;
  width: 100%;
  padding: var(--esp-grande) var(--esp-padrao) var(--esp-grande);
}

/* Desloca .conteudo/.rodape pra depois da sidebar fixa — só ≥992px (abaixo
   disso a sidebar é um drawer sobreposto, não uma coluna, então não deve
   empurrar nada) e só quando a sidebar de fato existe na página
   (`:has()`, suporte universal nos navegadores evergreen desde 2023): o
   editor de parecer sobrescreve `cabecalho` com a própria casca (ADR-0003)
   e não renderiza `.sidebar`, então `.conteudo--editor-parecer` continua
   full-bleed exatamente como antes, sem gap à esquerda. `margin-left`
   físico (não `margin-inline-start`) porque só há layout LTR neste
   projeto. Nota: com `margin-left` fixo, `margin-inline:auto` acima deixa
   de centralizar simetricamente (a sobra de `max-width` vira só do lado
   direito em telas muito largas) — aceitável, é o padrão comum de
   dashboard com sidebar, não bug.

   `.rodape` não precisa de `width` aqui — é bloco comum com `width:auto`,
   que já encolhe sozinho quando ganha `margin-left` (largura = container -
   margens, padrão CSS pra `width:auto`). `.conteudo`, porém, declara
   `width:100%` explícito (regra acima) — `width` explícito NÃO encolhe
   sozinho com margem, então sem o `calc()` abaixo ele estourava 256px pra
   fora da viewport (pego só rodando o app: botão do canto direito da
   página cortado na borda). */
@media (min-width: 992px) {
  body:has(.sidebar) .conteudo {
    width: calc(100% - 256px);
    margin-left: 256px;
  }

  body:has(.sidebar) .rodape {
    margin-left: 256px;
  }
}

/* Editor de parecer (H6.7, 2026-08-07, decisão do usuário — ver DECISOES.md):
   histórico de quando `.conteudo` tinha teto de 1320px/centralização por
   padrão e o editor precisava de uma exceção pra usar a largura toda da
   janela (layout de 3 colunas — painel do Repertório à esquerda, marcadores
   à direita — não cabia espremido). Desde 2026-08-20 (ver DECISOES.md) o
   teto de 1320px/centralização saiu do padrão de `.conteudo` — toda página
   já ocupa a largura toda por padrão — então esta classe é hoje um no-op
   (mantida só porque `parecer_editor.html`/`modelo_estudio.html` ainda a
   referenciam; `max-width:none; margin-inline:0` já é o comportamento
   herdado de `.conteudo`). Não remover as duas propriedades achando bug —
   é redundância proposital, não vale a troca por tirar a classe dos dois
   templates só por isso. */
.conteudo--editor-parecer {
  max-width: none;
  margin-inline: 0;
}

/* ADR-0003 (2026-08-11) — casca do editor como subaplicação em tela cheia,
   substituindo a grade de 3 colunas fixas (H6.7, retirada nesta entrada).
   `body.pagina-editor-parecer` trava a viewport (sem rolagem no body — quem
   rola é só o canvas do documento, `.editor-canvas`); `.conteudo` (já
   `flex:1 0 auto` por padrão) perde o padding institucional e vira o
   container do workspace. Ver DECISOES.md para o que motivou cada peça. */
body.pagina-editor-parecer {
  height: 100vh;
  overflow: hidden;
}

/* Correção de rolagem (2026-08-12, ver DECISOES.md — a causa raiz real,
   confirmada renderizando a árvore num Edge headless: o `flex-shrink:0` de
   `.conteudo{flex:1 0 auto}` (regra de base, pensada pra página institucional
   normal, onde `.conteudo` só cresce e a rolagem é do documento inteiro)
   sobrevivia aqui — `display:flex`/`min-height:0` abaixo não bastavam porque
   nenhuma delas mexe em `flex-shrink`, e cascata CSS é por propriedade, não
   por regra. Sem poder encolher, `.conteudo` ficava do tamanho do próprio
   conteúdo (todo o documento, centenas de px além da viewport) mesmo com o
   body travado em `height:100vh; overflow:hidden` — o excesso só sumia
   cortado por baixo, sem barra de rolagem em lugar nenhum. `flex: 1 1 auto`
   (grow *e* shrink) é o que efetivamente limita `.conteudo` à altura
   disponível, permitindo que `.editor-canvas` (mais abaixo na árvore) seja
   a única região que de fato rola. */
.pagina-editor-parecer .conteudo {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  /* Mesma família da correção de altura acima, eixo horizontal — ver comentário completo em
     `.editor-workspace` (2026-09-17, auditoria ui-design-ji): sem `min-width:0` em cada nível da
     cadeia, um flex item não encolhe abaixo do conteúdo dos próprios filhos mesmo tendo espaço de
     sobra pra ceder. Só passou a doer com dois painéis abertos ao mesmo tempo. */
  min-width: 0;
  padding: 0;
}

/* `#editor-parecer` (o `<div>` de conteudo_bloco, entre `.conteudo` e
   `.editor-workspace`) também não tinha regra própria — sobrava
   `display:block` do navegador. `flex:1 1 auto` de `.editor-workspace` só
   funciona dentro de um pai flex; sem isso ela não herdava a altura limitada
   que `.conteudo` (corrigido acima) já passou a ter. `display:flex` +
   `min-height:0` aqui fecha a cadeia que o comentário de `.editor-workspace`
   logo abaixo já presumia existir. `min-width:0` (2026-09-17) fecha a mesma
   cadeia no eixo horizontal — ver `.editor-workspace`. */
#editor-parecer {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

/* Chrome fixo do topo (barra do documento + menus + toolbar), no lugar do
   header global (que não renderiza nesta rota — ver `{% block cabecalho %}`
   em parecer_editor.html). Fundo claro/institucional (§16 do ADR: "clara,
   pouca decoração"), não navy — o navy do header global marcava "chrome do
   SaaS", exatamente o que o editor deixa de parecer. */
.editor-topo {
  flex-shrink: 0;
  background: var(--cor-superficie);
  border-bottom: 1px solid var(--cor-borda);
}

.editor-barra-documento {
  display: flex;
  align-items: center;
  gap: var(--esp-padrao);
  flex-wrap: wrap;
  padding: var(--esp-compacto) var(--esp-padrao);
}

.editor-botao-voltar {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-micro);
  color: var(--cor-texto-secundario);
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  padding: var(--esp-micro) var(--esp-pequeno);
  border-radius: var(--raio);
  /* Alvo de toque ≥44px mesmo sendo um link de texto compacto — critério de
     acessibilidade permanente do projeto (ícone isolado ao lado de texto já
     ajuda, mas o botão inteiro ainda precisa da área mínima). */
  min-height: 44px;
}

.editor-botao-voltar:hover,
.editor-botao-voltar:focus-visible {
  background: var(--cor-fundo);
  color: var(--cor-texto);
}

/* Auditoria ui-design-ji, 2026-09-17 — grupo semântico "identidade do parecer" (título + fase),
   separado das ações de workflow em `.editor-acoes-documento`: é quem cresce e quebra linha dentro
   de `.editor-barra-documento` agora, não mais `.editor-titulo-bloco` sozinho — ver comentário em
   parecer_editor.html no ponto de uso. */
.editor-identidade-documento {
  display: flex;
  flex-direction: column;
  gap: var(--esp-micro);
  min-width: 0;
  flex: 1 1 auto;
}

.editor-titulo-bloco {
  min-width: 0;
}

.editor-titulo {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: var(--cor-texto);
}

.editor-metadados {
  font-size: 12.5px;
  color: var(--cor-texto-fraco);
  margin: 0;
}

/* Renomear parecer (2026-08-15) — <details>/<summary> nativos cobrem
   abrir/fechar o formulário sem JS; só o clique em "Salvar" precisa de
   servidor (hx-post no <form>, ver _parecer_titulo_bloco.html). */
.editor-titulo-resumo {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  width: fit-content;
  max-width: 100%;
}

.editor-titulo-resumo::-webkit-details-marker { display: none; }

.editor-titulo-icone {
  font-size: 16px;
  color: var(--cor-texto-fraco);
  flex-shrink: 0;
}

.editor-titulo-resumo:hover .editor-titulo-icone,
.editor-titulo-resumo:focus-visible .editor-titulo-icone {
  color: var(--cor-texto);
}

.editor-titulo-resumo:focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: 2px;
}

.editor-titulo-form {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  max-width: 420px;
}

/* Renomear campo do agregado (tela de revisão do Repertório, 2026-08-15) —
   mesmo padrão de <details>/<summary> de .editor-titulo-resumo acima, só que
   sem toolbar escura por trás (contexto normal de página, não do editor). */
.campo-revisao-nome {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  width: fit-content;
  max-width: 100%;
}

.campo-revisao-nome::-webkit-details-marker { display: none; }

.campo-revisao-nome .material-symbols-outlined {
  font-size: 16px;
  color: var(--cor-texto-fraco);
}

.campo-revisao-nome:hover .material-symbols-outlined,
.campo-revisao-nome:focus-visible .material-symbols-outlined {
  color: var(--cor-texto);
}

.campo-revisao-nome:focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: 2px;
}

/* Editar subsídio do plano proposto (Gerar parecer com IA, 2026-08-15) —
   mesmo padrão de <details>/<summary> das duas classes acima. */
.plano-item-resumo {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  cursor: pointer;
  list-style: none;
}

.plano-item-resumo::-webkit-details-marker { display: none; }

.plano-item-resumo .material-symbols-outlined {
  font-size: 16px;
  color: var(--cor-texto-fraco);
  flex-shrink: 0;
}

.plano-item-resumo:hover .material-symbols-outlined,
.plano-item-resumo:focus-visible .material-symbols-outlined {
  color: var(--cor-texto);
}

.plano-item-resumo:focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: 2px;
}

.editor-metadados a {
  color: var(--cor-texto-fraco);
  text-decoration: underline;
}

.editor-acoes-documento {
  display: flex;
  align-items: center;
  gap: var(--esp-pequeno);
  flex-wrap: wrap;
}

.editor-status-salvamento {
  white-space: nowrap;
}

/* Auditoria ui-design-ji, 2026-09-17 — `overflow-x: auto` removido: com `flex-wrap: wrap`, os
   grupos de botões quebram para a linha seguinte quando não cabem (cada `.btn-group` é um item
   flex inteiro, nenhum é sozinho mais largo que o container) — a barra cresce em altura, nunca
   rola na horizontal. A propriedade era inalcançável, não escondia comando nenhum atrás de scroll
   sem indicação visual (hipótese que a auditoria levantou e a leitura do CSS não confirmou). */
.editor-barra-ferramentas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--esp-micro);
  padding: var(--esp-pequeno) var(--esp-padrao);
  border-top: 1px solid var(--cor-borda-suave);
}

.editor-barra-ferramentas--somente-leitura {
  padding: var(--esp-compacto) var(--esp-padrao);
}

.editor-seletor-estilo {
  width: auto;
  min-width: 8rem;
}

.editor-seletor-fonte {
  width: auto;
  min-width: 8rem;
}

.editor-seletor-tamanho {
  width: auto;
  min-width: 4.5rem;
}

/* §9 do ADR — workspace: canvas (documento) + painel(éis) contextual(is) à
   direita. Desde 2026-09-17 (auditoria ui-design-ji) são dois slots
   independentes — `#painel-marcadores-editor` (fixo) e
   `#painel-contextual-editor` (os outros cinco, mutuamente exclusivos entre
   si) — que compartilham esta mesma classe `.editor-painel-contextual`
   porque o comportamento de largura/overlay é idêntico nos dois; ver
   comentário no ponto de uso em parecer_editor.html. flex:1/min-height:0
   deixa .editor-canvas ser a única região com rolagem própria (a viewport
   inteira já está travada por body.pagina-editor-parecer).

   `min-width: 0` (mesma família de correção de 2026-08-12 pro eixo vertical,
   ver comentário de `.pagina-editor-parecer .conteudo` acima) só passou a
   fazer falta com o segundo painel: `.editor-workspace` é filho de um flex
   COLUNA (`#editor-parecer`) e, sem `min-width` próprio, seu piso de largura
   é `auto` — o navegador não deixa a *caixa* encolher abaixo do tamanho de
   conteúdo preferido dos filhos. Com um painel só, canvas(≈826px, largura
   preferida da "página" A4) + 360px sempre coube dentro da viewport, o piso
   nunca era testado. Com Marcadores + um segundo painel (720px de painéis),
   a soma passa da viewport e `.editor-workspace` — sem este `min-width:0` —
   simplesmente ficava mais largo que a tela em vez de encolher o canvas,
   empurrando o segundo painel pra fora da área visível (`overflow:hidden` do
   body escondia o excesso sem barra de rolagem, então nem esse sintoma
   aparecia). Achado pela verificação de UI (`marcadores-fixo`), medindo a
   largura real das caixas — não visível checando só classe/visibilidade. */
.editor-workspace {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

.editor-canvas {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  position: relative;
}

.editor-alerta {
  margin: var(--esp-padrao) var(--esp-padrao) 0;
}

/* Painel contextual — largura 0 por padrão (fechado, documento com o máximo
   de espaço — §4/§8 do ADR), abre para uma largura fixa quando `.aberto`
   (classe ligada por editor-parecer.js). Transição de largura já herda o
   zero de `prefers-reduced-motion` da regra global no topo deste arquivo —
   não precisa repetir aqui (seção Acessibilidade do CLAUDE.md). */
.editor-painel-contextual {
  flex: 0 0 auto;
  width: 0;
  overflow: hidden;
  border-left: 1px solid var(--cor-borda);
  background: var(--cor-superficie);
  transition: width 0.15s ease;
}

.editor-painel-contextual.aberto {
  width: 360px;
  overflow-y: auto;
}

/* Auditoria ui-design-ji, 2026-09-17 — `#painel-contextual-editor` (Sumário/Repertório/PNCP/
   Proveniência/Comentários) mudou de lado: fica à ESQUERDA do canvas agora (pedido do usuário —
   "não ficou legal" com os dois painéis do lado direito), enquanto Marcadores continua à direita.
   A borda que separa painel de canvas precisa virar de lado junto — sem isto o painel esquerdo
   ficaria com uma borda solta na própria borda externa da tela, e sem nenhuma entre ele e o canvas. */
.editor-painel-contextual--esquerda {
  border-left: none;
  border-right: 1px solid var(--cor-borda);
}

.editor-painel-conteudo {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 360px;
}

.editor-painel-cabecalho {
  display: flex;
  align-items: center;
  gap: var(--esp-pequeno);
  padding: var(--esp-compacto) var(--esp-padrao);
  border-bottom: 1px solid var(--cor-borda-suave);
  flex-shrink: 0;
}

.editor-painel-titulo {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}

.editor-painel-corpo {
  padding: var(--esp-padrao);
  overflow-y: auto;
}

/* O repertório chega como um `.card` inteiro (fragmento
   reaproveitado de _repertorio_painel_escopado.html, também usado fora do
   editor) — remove a moldura duplicada quando ele já está dentro do painel
   contextual (que tem a própria borda/fundo). */
.editor-painel-corpo--sem-preenchimento {
  padding: 0;
}

.editor-painel-corpo--sem-preenchimento > .card {
  border: none;
  border-radius: 0;
}

/* Abas do painel de Repertório (Etapa 7, ADR §11) reaproveitam
   nav-tabs do Bootstrap — só ajusta o respiro pra caber dentro do painel
   estreito (360px) sem a densidade de uma página cheia. */
.editor-painel-corpo--sem-preenchimento .nav-tabs {
  padding: 0 var(--esp-padrao);
}

.editor-painel-corpo--sem-preenchimento .tab-content {
  padding: var(--esp-padrao);
}

/* Painel de proveniência (Fase 8, Epic 7) — mesma estrutura de
   .editor-painel-corpo, conteúdo montado por editor-parecer.js a cada
   seleção. Amostras da legenda replicam em miniatura a decoração aplicada
   no texto (ver .paragrafo-ia-gerado/.paragrafo-ia-editado mais abaixo) —
   reforço visual só, o texto ao lado da amostra já carrega a informação
   (regra de acessibilidade do CLAUDE.md: nunca só por cor). */
.proveniencia-legenda {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--esp-micro);
  margin-bottom: var(--esp-padrao);
}

.proveniencia-amostra {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  margin-right: 2px;
}

.proveniencia-amostra--gerado {
  background: var(--cor-info-suave);
  border-left: 3px solid var(--cor-info);
}

.proveniencia-amostra--editado {
  border-left: 3px dashed var(--cor-texto-secundario);
}

.proveniencia-fonte {
  padding: var(--esp-pequeno) 0;
  border-bottom: 1px solid var(--cor-borda-suave);
  font-size: 0.9rem;
}

.proveniencia-fonte:last-child {
  border-bottom: 0;
}

.proveniencia-fonte-tipo {
  display: block;
  color: var(--cor-texto-fraco);
  font-size: 0.8rem;
}

/* Painel de Sumário (Fase 18, Epic 2) — navegação pela árvore de heading do
   documento aberto. Lista montada por editor-parecer.js a cada transação
   (client-only, nunca persistida — Invariante 1 do CLAUDE.md). Hierarquia
   sinalizada por DOIS canais, não só recuo: nível 1 é texto normal escuro,
   níveis 2-3 recuam e clareiam — recuo sozinho some pra quem amplia muito a
   fonte ou lê por leitor de tela. */
.outline-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.outline-item {
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  border-radius: var(--raio-pequeno);
  /* Densidade deliberada (mesma exceção já aceita em `.btn-sm`, ver
     DECISOES.md 2026-08-07): um sumário de 20 títulos com alvo de 44px viraria
     uma lista rolável mais alta que o documento. O alvo tem a largura inteira
     do painel (360px) e ~36px de altura, bem acima de um ícone solto — o caso
     que o mínimo de 44px protege. */
  min-height: 36px;
  padding: var(--esp-pequeno);
  color: var(--cor-texto);
  font-size: 0.875rem;
  line-height: 1.35;
  /* Título longo quebra em até 2 linhas em vez de esticar o painel ou ser
     cortado sem aviso (`-webkit-box` é o único `display` da regra — line-clamp
     depende dele). */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.outline-item--n1 {
  font-weight: 600;
}

.outline-item--n2 {
  padding-left: var(--esp-secao);
  color: var(--cor-texto-secundario);
}

.outline-item--n3 {
  padding-left: calc(var(--esp-secao) + var(--esp-padrao));
  color: var(--cor-texto-secundario);
}

.outline-item:hover {
  background: var(--cor-borda-suave);
}

/* Anel de foco explícito (o item é um `<button>` sem `.btn`, então herdaria só
   o outline nativo do navegador): mesma técnica dos itens da barra de menu do
   editor e da sidebar. `outline-offset` negativo porque o item ocupa a largura
   inteira do painel — um anel externo seria cortado pelo `overflow` dele. */
.outline-item:focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: -2px;
}

/* Título onde o cursor está agora (`aria-current="true"` no mesmo elemento —
   o estado nunca é só cor). Indigo sobre o pastel da mesma família: 5,6:1,
   acima do mínimo de 4.5:1 para texto normal. */
.outline-item.ativo {
  background: var(--cor-acento-suave);
  color: var(--cor-acento);
  font-weight: 600;
}

.outline-item-vazio {
  color: var(--cor-texto-fraco);
  font-style: italic;
}

.editor-painel-fechar {
  margin-left: auto;
}

/* Status bar (rodapé do editor) — discreta, no lugar do rodapé
   institucional (que não renderiza nesta rota). Altura reduzida a pedido do
   usuário em 2026-08-12 (~70% da altura anterior): padding vertical zerado
   é o único jeito de encolher sem violar o alvo de toque mínimo de 44px dos
   botões de zoom logo abaixo (`.editor-controle-zoom .btn` — critério de
   acessibilidade permanente do projeto, ver CLAUDE.md) — os 44px do botão +
   a borda de baixo já são o piso de altura possível; zerar o padding chega
   em ~46px (~76% da altura original de ~60px), o mais próximo de 70% que dá
   pra fazer sem encolher os botões. Ver DECISOES.md. */
.editor-rodape {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-padrao);
  padding: 0 var(--esp-padrao);
  border-top: 1px solid var(--cor-borda);
  background: var(--cor-superficie);
}

.editor-controle-zoom {
  display: flex;
  align-items: center;
  gap: var(--esp-pequeno);
}

.editor-controle-zoom .btn {
  /* Alvo de toque ≥44px em ícone isolado (critério de acessibilidade
     permanente do projeto) — exceção deliberada de densidade (.btn-sm) não
     se aplica aqui: "−"/"+" não têm texto ao lado que já amplie a área. */
  min-width: 44px;
  min-height: 44px;
}

@media (max-width: 991.98px) {
  /* §15 do ADR — painel lateral sobrepõe o workspace em vez de dividir a
     largura em telas menores. */
  .editor-painel-contextual.aberto {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 1040;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
  }

  /* O painel esquerdo (`--esquerda`) entra pela borda esquerda da tela, não a direita — mesmo
     `inset`/`box-shadow` do padrão acima, espelhados. Sem isto, em tela estreita ele saltaria pro
     lado errado (a regra genérica venceria por ordem de declaração — mesma especificidade, uma
     classe cada). */
  .editor-painel-contextual--esquerda.aberto {
    inset: 0 auto 0 0;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
  }
}

/* Imprimir (§5.6/§6.1 do ADR, "Imprimir" no menu "..."/Arquivo) — some todo o
   chrome do editor, deixa só o texto do parecer. Sem página A4 simulada
   (sombra/fundo cinza/margem de tela) nem zoom aplicado na tela — a
   paginação real de verdade já é responsabilidade do "Baixar PDF"
   (LibreOffice); isto aqui é só o fallback rápido do navegador. */
@media print {
  .editor-topo,
  .editor-painel-contextual,
  .editor-rodape,
  .editor-alerta,
  #aviso-rascunho-local,
  #banner-conexao-editor {
    display: none !important;
  }

  body.pagina-editor-parecer {
    height: auto;
    overflow: visible;
  }

  .pagina-editor-parecer .conteudo,
  .editor-workspace,
  .editor-canvas {
    display: block;
    overflow: visible;
    min-height: 0;
  }

  .editor-tiptap {
    background: none;
    padding: 0;
    min-height: 0;
  }

  .editor-tiptap .ProseMirror {
    zoom: 1 !important;
    width: auto;
    min-height: 0;
    padding: 0;
    box-shadow: none;
  }

  /* Fase 18, Epic 3 — a goteira de numeração é cromo de tela: o papel
     impresso sai como o documento, sem ela (o DOCX/PDF nunca a teve). */
  .editor-tiptap .ProseMirror .bloco-numerado::before {
    display: none;
  }
}

.rodape {
  flex-shrink: 0;
  border-top: 1px solid var(--cor-borda);
  margin-top: var(--esp-grande);
}

.rodape-conteudo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--esp-pequeno) var(--esp-compacto);
  padding: var(--esp-padrao);
  font-size: 12.5px;
  color: var(--cor-texto-fraco);
}

.rodape-marca {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cor-texto-secundario);
}

/* Botões — reskin dos componentes Bootstrap com a paleta do projeto */

/* white-space: nowrap — sem isso, botão espremido num flex container (ex.:
   "Salvar edição" ao lado de um <input> com flex-grow-1, ver
   _repertorio_revisao.html) quebra o texto em 2 linhas mas o botão
   vizinho sem esse aperto fica com 1 linha só — alturas desencontradas.
   min-width:auto (padrão de item flex) já impede o botão de encolher abaixo
   do texto de uma linha só; quem cede espaço é o campo ao lado, que pode
   encolher. Ver DECISOES.md 2026-08-07. */
.btn {
  font-weight: 600;
  font-size: 13.5px;
  white-space: nowrap;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--cor-acento);
  --bs-btn-border-color: var(--cor-acento);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--cor-acento-hover);
  --bs-btn-hover-border-color: var(--cor-acento-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--cor-acento-hover);
  --bs-btn-active-border-color: var(--cor-acento-hover);
  /* #C7D2FE — v3 frontmatter chama isso de `primary-fixed-dim`, papel
     exatamente "indigo esmaecido pra estado desabilitado/fixo". */
  --bs-btn-disabled-bg: #C7D2FE;
  --bs-btn-disabled-border-color: #C7D2FE;
  --bs-btn-focus-shadow-rgb: var(--cor-acento-rgb);
}

.btn-outline-secondary {
  --bs-btn-color: var(--cor-texto);
  --bs-btn-border-color: var(--cor-borda);
  --bs-btn-hover-color: var(--cor-texto);
  --bs-btn-hover-bg: var(--cor-fundo);
  --bs-btn-hover-border-color: var(--cor-borda);
  --bs-btn-active-color: var(--cor-texto);
  --bs-btn-active-bg: var(--cor-fundo);
  --bs-btn-active-border-color: var(--cor-borda);
}

.btn-outline-danger {
  --bs-btn-color: var(--cor-erro);
  --bs-btn-border-color: var(--cor-borda);
  --bs-btn-hover-color: var(--cor-erro);
  --bs-btn-hover-bg: var(--cor-erro-suave);
  --bs-btn-hover-border-color: var(--cor-erro);
  --bs-btn-active-color: var(--cor-erro);
  --bs-btn-active-bg: var(--cor-erro-suave);
  --bs-btn-active-border-color: var(--cor-erro);
}

/* "Destructive" do v3 (2026-08-14, ver DECISOES.md) — achado revisando o
   modal de "Arquivar processo": .btn-danger (ação destrutiva confirmada,
   não só o botão que abre a confirmação) ainda estava com o vermelho
   sólido puro do Bootstrap, nunca reskinado — nem na v2, que também não
   endereçava isso. v3: fundo pastel, texto/borda escuros, mesma família
   de --cor-erro-suave/--cor-erro que .badge/.tag já usam. */
.btn-danger {
  --bs-btn-color: var(--cor-erro);
  --bs-btn-bg: var(--cor-erro-suave);
  --bs-btn-border-color: #FECACA;
  --bs-btn-hover-color: var(--cor-erro);
  --bs-btn-hover-bg: #FECACA;
  --bs-btn-hover-border-color: #FECACA;
  --bs-btn-active-color: var(--cor-erro);
  --bs-btn-active-bg: #FECACA;
  --bs-btn-active-border-color: #FECACA;
}

/* Cards — fundo branco puro explícito: sem isso, .card herda
   --bs-card-bg: var(--bs-body-bg) do Bootstrap, que aqui é --cor-fundo
   (cinza claro), e o card some contra o fundo da página. "Elevação Sutil"
   (v3, 2026-08-14 — sucede a "Flat Architecture" sem sombra da v2, ver
   DECISOES.md): borda 1px + sombra difusa de baixo contraste juntas — a
   borda define o limite, a sombra sugere a camada (o Bootstrap declara
   `--bs-card-box-shadow` mas não aplica `box-shadow` nenhum na regra base
   de `.card`, conferido no CSS compilado, não presumido — precisa reforçar
   aqui). Raio 12px (`--raio-grande`), não o `--raio` genérico (8px): v3
   reserva 12px especificamente pra "Cards e Painéis". */
.card {
  --bs-card-bg: var(--cor-superficie);
  border-radius: var(--raio-grande);
  box-shadow: var(--bs-box-shadow);
}

/* Anatomia de header de card (piloto 2026-08-07, radius/sombra atualizados
   2026-08-14 — ver DECISOES.md): ícone à esquerda do título, título
   16px/600 (mesma escala de .txt-title-sm), ação contextual opcional à
   direita, padding = --esp-padrao (16px, ~p-3 do Bootstrap). */
.card-header {
  border-bottom-color: var(--cor-borda-suave);
  padding: var(--esp-padrao);
}

.card-header-titulo {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.card-header .material-symbols-outlined {
  font-size: 20px;
  color: var(--cor-texto-secundario);
}

/* Dropdowns & Menus (v3, 2026-08-14 — ver DECISOES.md) — todo
   `.dropdown-menu` do Bootstrap no app (Configurações antigo, tags de
   modelo, menus do editor...). A sidebar já tinha a própria versão mais
   específica (`.painel-notificacoes`/`.sidebar-perfil-menu`, 2 classes >
   1 classe daqui), que continua valendo sem mudança. 10px de raio é valor
   próprio da v3 pra este componente — não é nem `--raio` (8px) nem
   `--raio-grande` (12px), mesmo valor que a sidebar já usava por
   antecipação. Padding no container (Bootstrap usa 0 por padrão) é o que
   dá o respiro pro raio do item aparecer no hover — sem isso o item fica
   colado na borda do menu e o cantinho arredondado não tem onde mostrar. */
.dropdown-menu {
  --bs-dropdown-padding-y: 6px;
  --bs-dropdown-padding-x: 6px;
  border-color: var(--cor-borda);
  border-radius: 10px;
  box-shadow: var(--bs-box-shadow-lg);
}

.dropdown-item {
  border-radius: var(--raio-pequeno);
  padding: 10px 12px;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--cor-borda-suave);
}

/* Modais (v3) — sombra máxima da escala (mesmo plano de elevação de
   toast/notificação fixa) e raio de card/painel (12px). Overlay mais claro
   que o `--bs-backdrop-opacity` padrão do Bootstrap (.5): v3 pede
   `rgba(0,0,0,0.25)`. */
.modal-content {
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-xl);
}

.modal-backdrop {
  --bs-backdrop-bg: #000;
  --bs-backdrop-opacity: .25;
}

/* modal-dialog-scrollable + <form> envolvendo header/body/footer (ajuste 2026-08-25, achado no
   modal da calculadora de prazo, `_modal_calculadora_prazo.html`) — combinação que quebra sem
   este bloco. `modal-dialog-scrollable` do Bootstrap conta com modal-header/modal-body/
   modal-footer como filhos DIRETOS de .modal-content (`display:flex;flex-direction:column`) pra
   sobrar altura só pro modal-body rolar (`overflow-y:auto;flex:1 1 auto`), com o resto capado por
   `.modal-content{max-height:100%;overflow:hidden}`. Um `<form>` no meio (padrão de
   `_modal_criar_tarefa.html` — POST nativo cobrindo o modal inteiro numa viagem só) faz
   modal-header/body/footer virarem NETOS, não filhos, de .modal-content: o `<form>` é uma caixa de
   bloco comum, sem flex, então o conteúdo que não cabe no `max-height:100%` do pai é só cortado —
   modal-footer (com o botão de submit) some sem scrollbar e sem aviso quando o conteúdo do
   modal-body é mais alto que a tela. Repassar display:flex/flex-direction:column/min-height:0/
   overflow:hidden pro <form> devolve pra ele o papel de container flex real, e as regras do
   Bootstrap voltam a valer nos netos (agora filhos de fato). Regra geral, não escopada só pra
   calculadora de prazo — qualquer modal futuro que combine os dois padrões (`modal-dialog-
   scrollable` + `<form>` de casca) tem o mesmo bug sem isso. */
.modal-dialog-scrollable .modal-content > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Toast (v3 — "Toasts e notificações fixas: shadow: xl", plano de elevação
   máximo). `.toast` do Bootstrap já aplica `box-shadow:
   var(--bs-toast-box-shadow)` sozinho (conferido no CSS compilado) — só
   precisa apontar essa variável pro nosso xl em vez do DEFAULT que ela usa
   por padrão. */
.toast {
  --bs-toast-box-shadow: var(--sombra-xl);
}

/* Picker de modelo de parecer_form.html (selecionar-modelo.js) — reforço
   visual só, quem garante a seleção de fato é o hidden input; mesma cor de
   destaque do :focus de .form-control/.form-select logo abaixo. */
.card-selecionavel--ativo {
  border-color: var(--cor-acento);
  box-shadow: 0 0 0 3px var(--cor-acento-suave);
}

/* Formulários */

/* v3 descreve "shadow: inner (#E0E7FF)" pro foco — julguei não trocar o
   anel externo já existente (v2) por um inset de verdade: a leitura mais
   defensável da frase é só "sem o outline azul nativo do navegador" (que já
   não aparece aqui, o Bootstrap zera com outline:0 e este anel substitui),
   não uma instrução literal pra inverter a técnica. Trocar só a cor pro
   novo indigo evita reintroduzir um efeito visual não testado numa leva já
   grande de mudança. Sinalizado em DECISOES.md 2026-08-14 como leitura
   própria, não ambiguidade resolvida por adivinhação silenciosa. */
.form-control:focus,
.form-select:focus {
  border-color: var(--cor-acento);
  box-shadow: 0 0 0 3px var(--cor-acento-suave);
}

.campo-pendente {
  background: var(--cor-alerta-suave);
  border-left: 3px solid var(--cor-alerta);
  padding: var(--esp-pequeno) var(--esp-pequeno) var(--esp-micro);
  border-radius: 0 var(--raio-pequeno) var(--raio-pequeno) 0;
}

.campo-origem {
  margin: calc(var(--esp-padrao) * -0.5) 0 var(--esp-padrao);
  font-size: 12.5px;
  color: var(--cor-texto-fraco);
  font-style: italic;
}

.confirmacao-salvo {
  color: var(--cor-sucesso);
  font-weight: 600;
  font-size: 12.5px;
  margin-left: var(--esp-pequeno);
}

.tag-variavel {
  display: inline-block;
  font-family: var(--fonte-mono);
  font-size: 12px;
  background: var(--cor-acento-suave);
  color: var(--cor-acento);
  border-radius: var(--raio-pequeno);
  padding: 2px var(--esp-pequeno);
  margin: 2px var(--esp-micro) 2px 0;
}

/* Progresso de preenchimento de marcadores (2026-08-07) — calculado no
   editor-parecer.js a partir do próprio painel, não do servidor (ver
   comentário em parecer_editor.html). Barra em roxo (cor de marca/estado
   "em progresso"); o check por campo abaixo é quem carrega o verde de
   "concluído" — evita confundir os dois significados na mesma cor. */
.progresso-marcadores {
  height: 4px;
  background: var(--bs-secondary-bg, #e9ecef);
  border-radius: 2px;
  overflow: hidden;
}

.progresso-marcadores-barra {
  height: 100%;
  width: 0;
  background: var(--cor-acento);
  transition: width 0.2s ease;
}

.marcador-check {
  font-size: 16px;
  color: var(--bs-secondary-color, #adb5bd);
  opacity: 0.4;
}

.marcador-check--ativo {
  color: var(--cor-sucesso);
  opacity: 1;
}

/* Nome cru do marcador entre parênteses, ao lado do rótulo legível (só
   quando os dois divergem — ver parecer_editor.html) — mesma família mono
   de .tag-variavel, mas apagado: é referência, não o dado principal da linha. */
.marcador-nome-cru {
  font-family: var(--fonte-mono);
  font-size: 11px;
  color: var(--cor-texto-fraco);
}

/* Fase 16, Epic 6 (D6) — sugestões do PNCP logo abaixo do campo do marcador: o valor oficial
   oferecido para o marcador que lhe corresponde. Linha própria, recuada e apagada em relação ao
   campo, porque é oferta e não conteúdo — o dado principal da linha continua sendo o que está no
   input. `flex-wrap` porque a razão social de uma contratada estoura a largura do painel. */
.marcador-sugestoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-micro);
  margin-top: var(--esp-micro);
}

/* Botão estreito o bastante para caber dois no painel, e truncado por CSS além do truncate do
   Jinja — o `aria-label` carrega o valor inteiro, então nada se perde para quem usa leitor de
   tela. Exceção de alvo de toque já vigente para botão denso (`.btn-sm`, CLAUDE.md §
   Acessibilidade): é controle de painel lateral, ao lado de um campo, não ícone isolado. */
.marcador-sugestao {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Fase 16, Epic 6 (D6) — mapeamento variável do modelo → variável canônica do PNCP, no formulário
   de edição do modelo e no Estúdio. Grade de duas colunas (nome do marcador | seletor) para o olho
   ler a coluna da esquerda como lista: são dez a vinte linhas de par, e empilhar rótulo sobre campo
   dobraria a altura sem ganhar nada. Abaixo de 768px vira uma coluna, como todo formulário aqui. */
.alias-variaveis {
  display: grid;
  gap: var(--esp-pequeno);
}

.alias-variavel {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr);
  align-items: center;
  gap: var(--esp-compacto);
}

@media (max-width: 768px) {
  .alias-variavel {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--esp-micro);
  }
}

/* Cartão de parecer (listagem) */

.cartao-parecer-corpo {
  flex: 1;
  min-width: 240px;
}

.titulo-parecer {
  font-size: 15px;
  font-weight: 600;
}

.objeto-parecer {
  color: var(--cor-texto-secundario);
  font-size: 13px;
  margin: var(--esp-micro) 0;
}

.atualizado-parecer {
  color: var(--cor-texto-fraco);
  font-size: 12px;
  margin: var(--esp-micro) 0 0;
}

/* Badges de status — retangular-suave (v3, raio 6px de chip — sucede o
   raio 2px quase-quadrado da v2, ver DECISOES.md 2026-08-14), rótulo em
   maiúsculas/tracking largo (label-caps). Continua nunca pílula (raio
   total), critério que não mudou entre v2 e v3. */

.folha-pronta,
.tag-processando,
.tag-rascunho {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--raio-pequeno);
}

/* Glifo via ligature do Material Symbols (o texto literal do nome do ícone
   vira o desenho, é assim que a fonte funciona — não precisa de <span> no
   template). Tamanho um pouco abaixo do --esp-padrao pra não estourar a
   altura da linha do rótulo. */
.folha-pronta::before,
.tag-processando::before,
.tag-rascunho::before {
  font-family: "Material Symbols Outlined";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
  font-size: 14px;
}

.folha-pronta {
  color: var(--cor-sucesso);
  background: var(--cor-sucesso-suave);
}

.folha-pronta::before {
  content: "check_circle";
}

.tag-processando {
  color: var(--cor-alerta);
  background: var(--cor-alerta-suave);
}

.tag-processando::before {
  content: "warning";
}

.tag-rascunho {
  color: var(--cor-texto-secundario);
  background: var(--cor-borda-suave);
}

.tag-rascunho::before {
  content: "draft";
}

/* Badges genéricos do Bootstrap (.badge.text-bg-*) — usados em 7 templates
   (tags de modelo, "arquivado", "não revisado"...), nunca alinhados ao v2:
   ainda pílula, cores saturadas puras do Bootstrap. Mesma regra das badges
   de status acima (retangular, cor institucional suave, peso 600) — achado
   ao reskinar a listagem de Processos, não exclusivo dela (ver DECISOES.md
   2026-08-07). `!important` necessário: o próprio Bootstrap declara
   `.text-bg-*` com `!important` em color/background-color. */
.badge {
  font-weight: 600;
  font-size: 11px;
  border-radius: var(--raio-pequeno);
}

.badge.text-bg-secondary {
  color: var(--cor-texto-secundario) !important;
  background-color: var(--cor-borda-suave) !important;
}

.badge.text-bg-warning {
  color: var(--cor-alerta) !important;
  background-color: var(--cor-alerta-suave) !important;
}

/* success/info completam o mapeamento semântico do v3 — a v2 só tinha
   secondary/warning reskinados aqui porque eram os únicos usados quando
   essa regra foi escrita (2026-08-07); text-bg-success/text-bg-info já
   apareciam em templates sem override próprio (cores puras do Bootstrap
   por baixo, nunca alinhadas). */
.badge.text-bg-success {
  color: var(--cor-sucesso) !important;
  background-color: var(--cor-sucesso-suave) !important;
}

.badge.text-bg-info {
  color: var(--cor-info) !important;
  background-color: var(--cor-info-suave) !important;
}

/* Barra de progresso (Fase 17, modal de execução de job) — 1º uso de `.progress`/`.progress-bar`
   do Bootstrap no projeto. Sem isto a barra saía com o azul padrão do Bootstrap (`--bs-primary`),
   que o projeto nunca redefine globalmente (cada componente é tematizado pontualmente, ex. o
   `.btn-primary` acima) — deixaria a barra destoando de todo botão/link "de ação" da tela, que usam
   `--cor-acento`. */
.progress-bar {
  background-color: var(--cor-acento);
}

/* Tabelas de dados (v3, componente-núcleo — ver DECISOES.md 2026-08-14):
   cabeçalho BRANCO com borda inferior (v3: "Sem fundo escuro no header" —
   sucede o header navy/branco da v2), label-caps, zebra striping sutil,
   padding mais respirado que a v2, só divisores horizontais, hover de
   linha. Reskin do .table do Bootstrap — nenhum template precisa de classe
   nova, os dois que usam <table> já carregam .table. */
/* Superfície branca explícita (v3: cards e tabelas em branco puro sobre o
   fundo cinza da página). Sem isso a tabela herdava --bs-table-bg:
   transparent do Bootstrap e as linhas se confundiam com o fundo da
   página — mesma lógica do --bs-card-bg em .card, abaixo. */
.table {
  --bs-table-bg: var(--cor-superficie);
}

.table > thead {
  --bs-table-bg: var(--cor-superficie);
  background: var(--cor-superficie);
}

.table > thead th {
  color: var(--cor-texto);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  /* #E5E7EB — v3 pede especificamente este tom pro divisor do header (não
     --cor-borda/#D1D5DB nem --cor-borda-suave/#F3F4F6, os dois tokens
     genéricos): meio-termo próprio da seção "Data Tables" do documento,
     mais forte que o divisor entre linhas (2px vs 1px) pra separar cabeçalho
     de dado sem voltar a um bloco de cor sólido. */
  border-bottom: 2px solid #E5E7EB;
  vertical-align: middle;
}

.table > :not(caption) > * > * {
  padding: var(--esp-compacto) var(--esp-padrao);
  border-left: 0;
  border-right: 0;
  border-bottom-color: var(--cor-borda-suave);
}

.table > tbody > tr:nth-of-type(even) > * {
  background-color: var(--cor-borda-suave);
}

.table > tbody > tr:hover > * {
  background-color: var(--cor-borda-suave);
  transition: background-color .15s ease;
}

/* Indicador de requisição HTMX em andamento — oculto por padrão, exibido
   enquanto o `htmx-request` está ativo no formulário (upload, envio de texto).
   `.girando.htmx-indicator` (2 classes) garante precedência sobre a regra de
   `.girando` isolado (usada em _extracao.html/_repertorio_item_status.html,
   sempre visível quando renderizada), independente da ordem no arquivo. */
.htmx-indicator,
.girando.htmx-indicator {
  display: none;
}

.htmx-request.htmx-indicator,
.htmx-request .htmx-indicator {
  display: inline-block;
}

/* Modal de seleção de página do PDF (2026-08-06, ver DECISOES.md) — grid de
   miniaturas, um card por página. */
.grade-paginas-pdf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--esp-compacto);
}

.pagina-pdf-card {
  position: relative;
  display: block;
  cursor: pointer;
  border: 2px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  padding: var(--esp-micro);
  text-align: center;
  background: var(--cor-superficie);
  transition: border-color .12s ease, background-color .12s ease;
}

.pagina-pdf-card:hover {
  border-color: var(--cor-acento);
}

/* `:has()` — suportado em todo navegador evergreen (Chrome/Edge/Safari desde
   2023, Firefox 121+). Sem suporte, o card só não destaca visualmente; o
   checkbox no canto continua visível e funcional — degradação aceitável. */
.pagina-pdf-card:has(input:checked) {
  border-color: var(--cor-acento);
  background: var(--cor-acento-suave);
}

.pagina-pdf-card input[type="checkbox"] {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--cor-acento);
}

.pagina-pdf-card img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--cor-borda-suave);
  border-radius: 2px;
  background: var(--cor-fundo);
}

.previa-item-repertorio-imagem {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.previa-item-repertorio-pdf {
  display: block;
  width: 100%;
  height: 75vh;
  border: 0;
}

.pagina-pdf-numero {
  display: block;
  font-size: 12px;
  color: var(--cor-texto-secundario);
  margin-top: var(--esp-micro);
}

/* Anexos */

.zona-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-micro);
  text-align: center;
  border: 1px dashed var(--cor-borda);
  border-radius: var(--raio);
  padding: var(--esp-secao) var(--esp-padrao);
  margin-bottom: var(--esp-compacto);
  color: var(--cor-texto-secundario);
  font-size: 13.5px;
  cursor: pointer;
  background: var(--cor-superficie);
  transition: border-color .12s ease, background-color .12s ease;
}

.zona-upload:hover {
  border-color: var(--cor-acento);
  background: var(--cor-acento-suave);
}

.zona-upload-icone {
  font-size: 22px;
  color: var(--cor-texto-fraco);
}

.zona-upload-formatos {
  font-size: 12px;
  color: var(--cor-texto-fraco);
}

.zona-upload input[type="file"] {
  display: none;
}

.lista-anexos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-compacto);
  padding: 0;
  margin: var(--esp-compacto) 0;
  list-style: none;
}

.item-anexo {
  text-align: center;
}

.miniatura-anexo {
  display: block;
  width: 6rem;
  height: 6rem;
  object-fit: cover;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
}

/* Fase 10, Epic 5 — fotos acumuladas antes do envio (repertorio-upload-multiplo.js) */

.lista-fotos-acumuladas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-compacto);
  padding: 0;
  margin: 0 0 var(--esp-compacto);
  list-style: none;
}

.foto-acumulada-repertorio {
  position: relative;
  width: 5.5rem;
}

.foto-acumulada-repertorio img {
  display: block;
  width: 100%;
  height: 5.5rem;
  object-fit: cover;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
}

.foto-acumulada-repertorio-remover {
  position: absolute;
  top: -.5rem;
  right: -.5rem;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Extração */

.extracao-status {
  font-size: 13.5px;
}

.extracao-status[data-status="concluida"],
.extracao-status[data-status="aplicada"] {
  color: var(--cor-sucesso);
  font-weight: 600;
}

.extracao-status[data-status="erro"] {
  color: var(--cor-erro);
  font-weight: 600;
}

.girando {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--cor-alerta-suave);
  border-top-color: var(--cor-alerta);
  border-radius: 50%;
  animation: girar .6s linear infinite;
  vertical-align: -1px;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

/* Árvore de taxonomia */

.arvore-raiz {
  list-style: none;
  margin: 0;
  padding: 0;
}

.arvore-raiz ul {
  list-style: none;
  margin: 0;
  padding-left: 20px;
}

.arvore-raiz summary {
  cursor: pointer;
  font-weight: 600;
  padding: var(--esp-micro) 0;
}

.arvore-raiz li li summary {
  font-weight: 500;
  font-size: 13.5px;
}

.form-ramificacao,
.form-novo-parecer {
  display: flex;
  gap: var(--esp-pequeno);
  align-items: center;
  margin: var(--esp-pequeno) 0;
}

/* Syntax highlighting do textarea de JSON em modelo_dados.html/modelo_form.html
   (json-highlight.js) — o textarea real fica invisível (texto transparente,
   caret visível) por cima de um <pre> com o mesmo conteúdo tokenizado.
   Fonte/padding/borda duplicados de propósito e IGUAIS nos dois elementos:
   é o que mantém o fundo alinhado linha a linha com o que o usuário
   realmente edita. Não reaproveitar o padding/border-radius herdado do
   .form-control do Bootstrap aqui — declarar os dois do zero evita que uma
   mudança futura no tema do Bootstrap desalinhe só um dos dois. */
.json-editor {
  position: relative;
}

.json-editor-fundo,
.json-editor-textarea {
  margin: 0;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  font-family: var(--fonte-mono);
  font-size: 13px;
  line-height: 20px;
  white-space: pre-wrap;
  word-break: break-word;
  box-sizing: border-box;
}

.json-editor-fundo {
  position: absolute;
  inset: 0;
  overflow: hidden; /* sem scrollbar própria — json-highlight.js espelha o scroll do textarea */
  color: var(--cor-texto);
  background: transparent;
  pointer-events: none;
}

.json-editor-fundo code {
  font: inherit;
  white-space: inherit;
  word-break: inherit;
}

.json-editor-textarea {
  position: relative;
  color: transparent;
  caret-color: var(--cor-texto);
  background: transparent;
}

.json-editor-textarea::selection {
  background: rgba(var(--cor-acento-rgb), 0.25);
}

/* .form-control:focus do Bootstrap redeclara background-color (ver
   bootstrap.min.css) — sem este reforço, o fundo opaco tapa o <pre> assim
   que o usuário clica pra editar. */
.json-editor-textarea:focus {
  background: transparent;
}

.json-tok-key {
  /* Navy aposentado (v3 não tem cor navy — ver DECISOES.md 2026-08-14);
     texto principal escuro em negrito já distingue a chave do valor ao
     lado sem precisar de uma 2ª cor de marca só pra isto. */
  color: var(--cor-texto);
  font-weight: 600;
}

.json-tok-string {
  color: var(--cor-sucesso);
}

.json-tok-number {
  color: var(--cor-acento);
}

.json-tok-boolean {
  color: var(--cor-alerta);
  font-weight: 600;
}

.json-tok-null {
  color: var(--cor-texto-fraco);
  font-style: italic;
}

.form-ramificacao input {
  max-width: 220px;
}

/* Editor do parecer (H3.2). Fase 10/Epic 2 (padronização tipográfica do
   DOCX/PDF, ver FONTE/TAMANHO_PADRAO/ESPACAMENTO_ENTRELINHAS/RECUO_* em
   app/geracao/exportar_editor.py) — a partir daqui a tela deixa de mostrar o
   texto na fonte de interface (Inter) e passa a reproduzir a tipografia real
   do parecer exportado (Times New Roman, tamanhos/recuos/espaçamento do
   padrão institucional). Continua sendo só a intenção visual — a fidelidade
   byte-a-byte de verdade (DXA, quebra de página) é sempre do exportador — mas
   a tela agora bate com o que sai no DOCX/PDF em vez de ser uma aproximação
   solta.

   Fase 15 — cada valor abaixo é `var(--editor-*, <default institucional>)`.
   As variáveis só existem quando o tenant customizou a formatação (`<style>`
   gerado em `parecer_editor.html` a partir de `resolver_formatacao_documento`,
   `app/plataforma/tenant_configuracao.py`); sem customização, o `var()` cai
   direto no default aqui — mesmo valor de sempre. `pt`/`cm` diretos (não mais
   conversão manual pra `px`): CSS aceita as duas unidades nativamente, então
   um valor em pt aqui é literalmente o mesmo número que `Pt(x)` usa no
   exportador — sem conta de conversão pra manter sincronizada à mão. */

/* Emula o tamanho de uma página A4 do Word (2026-08-08, pedido do usuário
   — só a largura/margem, sem paginação real: o card-body vira uma "mesa de
   trabalho" cinza, a página propriamente dita é o próprio .ProseMirror,
   branca, largura/margem de A4, crescendo em altura conforme o texto —
   rolagem contínua, não corta em folhas separadas. Paginação de verdade já
   existe via "Baixar PDF" (LibreOffice); reproduzi-la aqui seria duplicar
   essa responsabilidade por um ganho majoritariamente cosmético.
   max-width:100% evita quebrar em telas mais estreitas que 210mm. Margem de
   2cm reflete o padrão tipográfico institucional combinado, explícito desde a Fase 10/Epic 2
   (`MARGEM_PAGINA` em app/geracao/exportar_editor.py — antes disso a exportação real caía no
   default Carta/2,54cm do template python-docx, nunca decidido, enquanto esta tela já
   simulava A4/2,5cm; a divergência entre preview e exportado era parte do próprio bug). */
.editor-tiptap {
  background: var(--bs-tertiary-bg, #e9ecef);
  display: flex;
  justify-content: center;
  padding: var(--esp-grande, 2rem) var(--esp-padrao);
  /* ADR-0003 — sem o `.card`/`.card-body` que antes dava altura ao redor da
     "mesa de trabalho" cinza, isso garante que ela preencha o canvas visível
     mesmo com um documento curto (em vez de encolher para o tamanho do
     conteúdo) — .editor-canvas (pai) é quem rola de verdade. */
  min-height: 100%;
}

.editor-tiptap .ProseMirror {
  /* Contexto de posicionamento da goteira de numeração (Fase 18, Epic 3 — ver
     `.bloco-numerado::before` mais abaixo): é o papel, não cada bloco, que
     define a coluna dos números. */
  position: relative;
  min-height: 297mm;
  width: 210mm;
  max-width: 100%;
  padding: var(--editor-margem-pagina, 2cm);
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  /* Times New Roman 12pt / entrelinha 1,5 — mesmo padrão institucional do
     exportador (FONTE/TAMANHO_PADRAO/ESPACAMENTO_ENTRELINHAS,
     exportar_editor.py). */
  font-family: var(--editor-fonte, "Times New Roman", Times, serif);
  font-size: var(--editor-tamanho-corpo, 12pt);
  line-height: var(--editor-entrelinha, 1.5);
  color: #000;
  /* outline:none aqui não é "solto" — devolvido logo abaixo por
     `body.usando-teclado`, ver comentário ali. Acessibilidade — ver
     DECISOES.md. */
  outline: none;
}

.editor-tiptap .ProseMirror p {
  /* ESPACO_DEPOIS_PARAGRAFO = 6pt. */
  margin: 0 0 var(--editor-espaco-paragrafo, 6pt);
}

/* :focus-visible nativo trata contenteditable como "sempre visível" mesmo em
   clique de mouse (é assim que o navegador decide, não uma escolha deste
   projeto) — nesta tela isso lia como uma caixa de alerta em volta da página
   A4 inteira a cada clique, bem diferente do cursor piscando sem moldura do
   Word/Google Docs. `usando-teclado` (classe no <body>, alternada por
   mousedown/Tab em editor-parecer.js) restringe o anel ao caso em que ele
   realmente ajuda — navegação por teclado — sem abrir mão dele (Acessibilidade
   — nunca outline:none solto). */
body.usando-teclado .editor-tiptap .ProseMirror:focus {
  outline: 2px solid var(--cor-acento);
  outline-offset: -2px;
}

.editor-tiptap .ProseMirror h1,
.editor-tiptap .ProseMirror h2,
.editor-tiptap .ProseMirror h3 {
  font-weight: 700;
  margin: 0 0 8px;
}

/* 14pt / 13pt / 12pt — _TAMANHO_HEADING em exportar_editor.py. */
.editor-tiptap .ProseMirror h1 { font-size: var(--editor-tamanho-h1, 14pt); }
.editor-tiptap .ProseMirror h2 { font-size: var(--editor-tamanho-h2, 13pt); }
.editor-tiptap .ProseMirror h3 { font-size: var(--editor-tamanho-h3, 12pt); }

.editor-tiptap .ProseMirror blockquote {
  /* RECUO_BLOCKQUOTE = 4cm. */
  margin-left: var(--editor-recuo-citacao, 4cm);
  padding-left: var(--esp-pequeno);
  border-left: 3px solid var(--bs-secondary-border-subtle, #ccc);
  /* TAMANHO_CITACAO = 10pt. */
  font-size: var(--editor-tamanho-citacao, 10pt);
}

.editor-tiptap .ProseMirror ul,
.editor-tiptap .ProseMirror ol {
  /* RECUO_LISTA = 3cm. */
  margin-left: var(--editor-recuo-lista, 3cm);
  padding-left: 1em;
}

.editor-tiptap .ProseMirror .assinatura {
  text-align: center;
  margin-top: var(--esp-grande, 2rem);
}

.editor-tiptap .ProseMirror .nota-rodape {
  font-size: 0.8em;
  vertical-align: super;
  color: var(--bs-secondary-color, #666);
}

.editor-tiptap .ProseMirror table {
  border-collapse: collapse;
  width: 100%;
}

.editor-tiptap .ProseMirror table td,
.editor-tiptap .ProseMirror table th {
  border: 1px solid var(--bs-border-color, #ccc);
  padding: 4px 8px;
}

/* Identificação visual de marcador (2026-08-10, ver DECISOES.md — revisão do
   estilo com caixa de fundo de 2026-08-07): sublinhado fino, sem fundo,
   inspirado no modelo .docx original que o app substitui (campo cinza +
   sublinhado azul). Verde = já preenchido (mark `variavel`, aplicada por
   app/plataforma/marcadores.py) — mantido deliberadamente distinto do texto
   normal mesmo depois de preenchido, pra dar pra escanear o documento e
   reencontrar o campo no painel lateral sem abrir cada trecho. Azul = ainda
   cru (`{{ nome }}`, decoração só de exibição do TipTap — nunca persiste,
   ver MarcadorPendente em editor-parecer.js). */
.editor-tiptap .ProseMirror [data-variavel] {
  color: var(--cor-sucesso);
  text-decoration: underline;
  text-decoration-color: var(--cor-sucesso);
  text-underline-offset: 2px;
}

.editor-tiptap .ProseMirror .marcador-pendente {
  color: var(--cor-texto-fraco);
  text-decoration: underline;
  text-decoration-color: var(--cor-marcador-pendente);
  text-underline-offset: 2px;
}

/* Destaque (Fase 10, Epic 6, mark `highlight`) — paleta fixa de 3 cores,
   reaproveita os tokens "-suave" já auditados (contraste do texto escuro
   padrão do editor contra esses fundos claros já passa 4.5:1 em todo o
   resto do app, ex. .lacuna-pendente abaixo) em vez de declarar cor nova. */
.editor-tiptap .ProseMirror mark[data-cor="amarelo"] {
  background: var(--cor-alerta-suave);
}

.editor-tiptap .ProseMirror mark[data-cor="vermelho"] {
  background: var(--cor-erro-suave);
}

.editor-tiptap .ProseMirror mark[data-cor="verde"] {
  background: var(--cor-sucesso-suave);
}

/* Destaque do Teor da intimação com os trechos usados no cálculo do prazo (Fase 14, Epic 5, ajuste
   2026-08-27) — mesmo token do highlight acima, mas fora de .editor-tiptap: o teor é texto simples
   (app.contencioso.prazo_evidencia.destacar_evidencias), não ProseMirror. */
.teor-com-destaque mark {
  background: var(--cor-alerta-suave);
  padding: 0 0.15em;
}

/* Fonte/tamanho por trecho selecionado (Fase 18, Epic 6, marks `fonteFamilia`/
   `fonteTamanho`) — paleta fixa curada, mesmo espírito do destaque acima.
   Só efeito visual no editor; o exportador DOCX aplica o equivalente em
   `run.font.name`/`run.font.size` (app/geracao/exportar_editor.py). */
.editor-tiptap .ProseMirror [data-fonte-familia="mono"] {
  font-family: Consolas, "Courier New", monospace;
}

.editor-tiptap .ProseMirror [data-fonte-familia="sans"] {
  font-family: Arial, Helvetica, sans-serif;
}

.editor-tiptap .ProseMirror [data-fonte-pt="9"] {
  font-size: 9pt;
}

.editor-tiptap .ProseMirror [data-fonte-pt="10"] {
  font-size: 10pt;
}

.editor-tiptap .ProseMirror [data-fonte-pt="11"] {
  font-size: 11pt;
}

.editor-tiptap .ProseMirror [data-fonte-pt="12"] {
  font-size: 12pt;
}

.editor-tiptap .ProseMirror [data-fonte-pt="13"] {
  font-size: 13pt;
}

.editor-tiptap .ProseMirror [data-fonte-pt="14"] {
  font-size: 14pt;
}

/* Fase 8, Epic 7 — highlight de conteúdo gerado por IA (decoração de nó
   inteiro, aplicada por ProvenienciaIA em editor-parecer.js). "Gerado"
   reaproveita --cor-info/--cor-info-suave (token existente, v3, sem uso até
   este componente — ver comentário na declaração das cores no topo do
   arquivo); "editado" fica sem fundo, só borda tracejada — diferenciação por
   traço, não só cor (mesma legenda em texto no painel de proveniência).
   .lacuna-pendente é decoração inline (não do parágrafo inteiro) sobre o
   texto literal "[LACUNA: ...]", reaproveitando os tokens de alerta já
   usados no resto do app. */
/* Goteira de numeração de bloco (Fase 18, Epic 3) — o número de cada bloco de
   topo na margem esquerda do papel, como número de linha de IDE (e como a
   numeração de linha do Word, referência declarada do produto). Sempre
   visível, por decisão do usuário em 2026-08-21: serve pra dizer "parágrafo 5"
   sem contar na mão, não só pro chat de redação da Epic 10.

   É decoração do TipTap lida de `data-numero-bloco`, nunca conteúdo do
   documento: não entra na árvore salva (Invariante 1), não é exportada pro
   DOCX/PDF (o exportador lê o JSON, que não conhece isto) e some na
   impressão, abaixo. */
.editor-tiptap .ProseMirror .bloco-numerado::before {
  content: attr(data-numero-bloco);
  /* Goteira de verdade = coluna reta, não número colado em cada bloco. Para
     isso o número é posicionado em relação AO PAPEL (`.ProseMirror`, que ganha
     `position: relative` na regra de cima), com `left` negativo entrando na
     margem — assim ele ignora o recuo do próprio bloco (lista recua 3cm,
     citação 4cm) e todos caem no mesmo x.

     `top` fica em `auto` de propósito: sem valor explícito, o navegador usa a
     posição estática do pseudo-elemento, que é o começo da primeira linha do
     bloco — vertical vem do bloco, horizontal vem do papel, que é exatamente o
     que uma goteira precisa.

     Primeira tentativa era `right: 100%` sobre o próprio bloco: alinhava os
     parágrafos com a lista fora de esquadro e, pior, o `text-indent: 2cm` do
     parágrafo (Fase 15) era herdado pelo pseudo-elemento e empurrava o dígito
     para dentro do texto. Daí o `text-indent: 0` explícito abaixo. */
  position: absolute;
  /* O bloco que contém o pseudo-elemento é o *padding box* do papel, então
     `left: 0` é a borda esquerda da folha e a margem de 2cm vai daí até o
     texto: a goteira ocupa o miolo dessa faixa (0,4cm de respiro de cada
     lado), sem invadir o texto nem cair na mesa cinza fora do papel. */
  left: 0.4cm;
  width: calc(var(--editor-margem-pagina, 2cm) - 0.8cm);
  text-align: right;
  text-indent: 0;
  /* Sans-serif pequena de propósito: é cromo do editor, não texto do parecer
     (Times 12pt) — a diferença de família/tamanho é o que impede confundir o
     número com conteúdo. `line-height: inherit` alinha o número com a
     primeira linha do bloco, seja parágrafo, título ou tabela. */
  font-family: var(--bs-font-sans-serif);
  font-size: 11px;
  font-weight: 400;
  font-style: normal;
  line-height: inherit;
  /* 4,8:1 contra o branco do papel — acima do mínimo de 4,5:1 para texto
     normal (seção Acessibilidade do CLAUDE.md). */
  color: var(--cor-texto-fraco);
  /* Copiar o parecer não pode levar junto a numeração da tela; e o número não
     é clicável nesta leva (nenhum alvo de toque a garantir, portanto). */
  user-select: none;
  pointer-events: none;
}

.editor-tiptap .ProseMirror .paragrafo-ia-gerado {
  background: var(--cor-info-suave);
  border-left: 3px solid var(--cor-info);
  padding-left: calc(var(--esp-pequeno) - 3px);
}

.editor-tiptap .ProseMirror .paragrafo-ia-editado {
  border-left: 3px dashed var(--cor-texto-secundario);
  padding-left: calc(var(--esp-pequeno) - 3px);
}

.editor-tiptap .ProseMirror .lacuna-pendente {
  background: var(--cor-alerta-suave);
  color: var(--cor-alerta);
  border-radius: var(--raio-pequeno);
  padding: 0 2px;
}

/* Épico 5 — trecho ancorado por um comentário (Decoration.inline calculada em
   editor-parecer.js::calcularDecoracoesComentarios). `--cor-acento-suave`
   (roxo/índigo da marca) reaproveitado aqui de propósito: distingue de
   highlight (amarelo/vermelho/verde, sinalização de conteúdo) e de
   gerado-por-IA (azul info) — comentário é conversa sobre o trecho, não
   sinalização do trecho em si. Resolvido fica com o mesmo formato, só mais
   discreto (cinza) — continua clicável (abre a thread já resolvida na
   lateral), só não compete visualmente com comentário aberto. Órfão (H5.4)
   não tem classe própria porque simplesmente não gera Decoration nenhuma —
   sem destaque no corpo é o comportamento correto, não uma omissão. */
.editor-tiptap .ProseMirror .trecho-comentado {
  background: var(--cor-acento-suave);
  border-bottom: 2px solid var(--cor-acento);
  cursor: pointer;
}

.editor-tiptap .ProseMirror .trecho-comentado--resolvido {
  background: var(--cor-borda-suave);
  border-bottom: 2px solid var(--cor-texto-fraco);
}

/* Regeneração de seção via IA — ícone que aparece ao passar o mouse sobre um
   heading (posicionado por editor-parecer.js via getBoundingClientRect,
   nunca inserido dentro de .ProseMirror: esse elemento é gerenciado pelo
   próprio ProseMirror, um filho estranho ali seria removido/confundiria o
   diff da view). .editor-tiptap vira o ancoradouro (position: relative) —
   já centraliza a "página" A4 por flex, isso não muda. */
.editor-tiptap {
  position: relative;
}

.botao-regenerar-secao {
  position: absolute;
  display: none;
  /* 44px — alvo de toque mínimo (era 2rem/32px). */
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.botao-regenerar-secao.mostrar {
  display: inline-flex;
}

.popover-regenerar-secao {
  position: absolute;
  display: none;
  width: 18rem;
  z-index: 6;
  padding: var(--esp-pequeno);
  box-shadow: var(--bs-box-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
}

.popover-regenerar-secao.mostrar {
  display: block;
}

.regenerar-secao-comparativo {
  max-height: 50vh;
  overflow-y: auto;
}

/* Menu de contexto personalizado (botão direito) e popover de "marcar como
   variável" — mesma linguagem visual do popover de instrução acima (cartão
   flutuante, mesma sombra), mesmo ancoradouro .editor-tiptap. */
.menu-contexto-editor {
  position: absolute;
  display: none;
  min-width: 12rem;
  z-index: 7;
  padding: var(--esp-micro) 0;
  box-shadow: var(--bs-box-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
}

.menu-contexto-editor.mostrar {
  display: block;
}

.menu-contexto-item {
  display: flex;
  align-items: center;
  gap: var(--esp-micro);
  width: 100%;
  padding: var(--esp-micro) var(--esp-pequeno);
  border: 0;
  background: none;
  text-align: left;
  font-size: 0.9rem;
}

.menu-contexto-item:hover {
  background: var(--bs-tertiary-bg, #e9ecef);
}

.menu-contexto-divisor {
  height: 1px;
  margin: var(--esp-micro) 0;
  background: var(--bs-border-color, #dee2e6);
}

.popover-marcar-variavel {
  position: absolute;
  display: none;
  width: 16rem;
  z-index: 7;
  padding: var(--esp-pequeno);
  box-shadow: var(--bs-box-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
}

.popover-marcar-variavel.mostrar {
  display: block;
}

/* Fase 10, Epic 6 — popover de sugestões de correção ortográfica. Mesma
   linguagem visual dos dois acima (cartão flutuante, mesma sombra), só mais
   largo porque pode listar várias palavras de uma vez (uma linha por
   palavra distinta encontrada na seleção verificada). */
.popover-ortografia {
  position: absolute;
  display: none;
  width: 20rem;
  max-height: 60vh;
  overflow-y: auto;
  z-index: 7;
  padding: var(--esp-pequeno);
  box-shadow: var(--bs-box-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
}

.popover-ortografia.mostrar {
  display: block;
}

.popover-ortografia-linha {
  padding: var(--esp-micro) 0;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.popover-ortografia-linha:last-of-type {
  border-bottom: 0;
}

.popover-ortografia-palavra {
  display: block;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--cor-erro);
  text-decoration-style: wavy;
}

.popover-ortografia-sugestoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-micro);
  margin-top: var(--esp-micro);
}

/* Épico 5 — botão flutuante "Comentar" (mostra/posiciona via
   atualizarBotaoComentar, editor-parecer.js) e o popover de composição do
   comentário. Mesma linguagem visual/ancoradouro (#editor-tiptap) dos
   popovers acima — `.botao-comentar-selecao` é o único elemento flutuante
   deste arquivo que é um botão, não um card: fica pequeno e sólido de
   propósito (ação de um clique, não um formulário) perto do fim da seleção. */
.botao-comentar-selecao {
  position: absolute;
  display: none;
  align-items: center;
  gap: var(--esp-micro);
  z-index: 7;
  padding: 4px var(--esp-pequeno);
  border: 1px solid var(--cor-acento);
  border-radius: var(--raio-pequeno);
  background: var(--cor-superficie);
  color: var(--cor-acento);
  font-size: 0.8rem;
  box-shadow: var(--bs-box-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
}

.botao-comentar-selecao .material-symbols-outlined {
  font-size: 1rem;
}

.botao-comentar-selecao.mostrar {
  display: flex;
}

.botao-comentar-selecao:hover {
  background: var(--cor-acento-suave);
}

.popover-comentario {
  position: absolute;
  display: none;
  width: 18rem;
  z-index: 7;
  padding: var(--esp-pequeno);
  box-shadow: var(--bs-box-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
}

.popover-comentario.mostrar {
  display: block;
}

/* Fase 13, Epic 4 — popover de hover sobre remissão legal com dispositivo
   resolvido (ver ligarPopoverDispositivoLegal, editor-parecer.js). Mesma
   forma de .popover-comentario acima (elemento único, mostrado por
   .mostrar), só mais largo pro texto de artigo/parágrafo não ficar
   espremido. */
.popover-dispositivo-legal {
  position: absolute;
  display: none;
  width: 22rem;
  max-width: min(22rem, 90vw);
  z-index: 7;
  padding: var(--esp-pequeno);
  box-shadow: var(--bs-box-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
}

.popover-dispositivo-legal.mostrar {
  display: block;
}

.popover-dispositivo-legal-rotulo {
  display: flex;
  align-items: center;
  gap: var(--esp-micro);
  margin: 0 0 var(--esp-micro);
  font-weight: 600;
}

.popover-dispositivo-legal-texto {
  margin: 0 0 var(--esp-micro);
  font-size: 0.9rem;
  white-space: pre-wrap;
  max-height: 12rem;
  overflow-y: auto;
}

.popover-dispositivo-legal-alteracao {
  margin: 0 0 var(--esp-micro);
  font-size: 0.85rem;
  color: var(--cor-texto-secundario);
}

.popover-dispositivo-legal-vazio,
.popover-dispositivo-legal-carregando {
  margin: 0;
  font-size: 0.9rem;
  color: var(--cor-texto-fraco);
}

.popover-dispositivo-legal-planalto {
  font-size: 0.85rem;
}

/* Painel lateral "Comentários" (#painel-comentarios-corpo) — uma
   .comentario-thread por comentário raiz, respostas aninhadas dentro dela em
   .comentario-respostas. Mesmo espaçamento (--esp-*) do resto dos painéis
   contextuais, sem componente Bootstrap novo (card manual, mais compacto que
   .card padrão pra caber várias threads na largura de 360px do painel). */
.comentario-thread {
  padding: var(--esp-pequeno) 0;
  border-bottom: 1px solid var(--cor-borda-suave);
}

.comentario-thread:last-child {
  border-bottom: 0;
}

.comentario-thread--resolvido {
  opacity: 0.75;
}

.comentario-ancora {
  margin: 0 0 var(--esp-micro);
  padding: var(--esp-micro) var(--esp-pequeno);
  border-left: 3px solid var(--cor-acento);
  background: var(--cor-acento-suave);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--cor-texto-secundario);
}

.comentario-ancora--orfao {
  border-left-color: var(--cor-texto-fraco);
  background: var(--cor-borda-suave);
  font-style: normal;
}

.comentario-linha-autor {
  display: flex;
  justify-content: space-between;
  gap: var(--esp-pequeno);
  font-size: 0.8rem;
}

.comentario-autor {
  font-weight: 600;
  color: var(--cor-texto);
}

.comentario-data {
  color: var(--cor-texto-fraco);
}

.comentario-texto {
  margin: 2px 0 var(--esp-micro);
  font-size: 0.9rem;
  white-space: pre-wrap;
}

.comentario-respostas {
  margin: var(--esp-micro) 0 var(--esp-micro) var(--esp-padrao);
  padding-left: var(--esp-pequeno);
  border-left: 2px solid var(--cor-borda-suave);
}

.comentario-resposta + .comentario-resposta {
  margin-top: var(--esp-micro);
}

.comentario-acoes {
  display: flex;
  align-items: center;
  gap: var(--esp-micro);
  margin-top: var(--esp-micro);
}

.comentario-form-resposta {
  margin-top: var(--esp-pequeno);
}

.barra-ferramentas-editor {
  row-gap: var(--esp-micro);
}

/* Sticky ao rolar (2026-08-07, pedido do usuário — ver DECISOES.md):
   barra de ferramentas e os dois cards laterais (Repertório,
   Marcadores) grudam no topo da viewport. Só a partir do breakpoint em
   que o layout de 3 colunas do editor existe de fato (col-lg-*, ver
   parecer_editor.html) — abaixo disso as colunas empilham e os três
   sticky brigariam pela mesma posição na tela. .cabecalho não é fixo,
   por isso top:0 é o valor certo (nada sobra por cima dele).
   `.barra-ferramentas-editor` é `card-header` do mesmo card do editor
   (ver parecer_editor.html): sem background explícito, o card-header
   padrão do Bootstrap é levemente translúcido e deixa o texto do editor
   "vazar" por baixo dele ao rolar — por isso o background sólido aqui.
   Os cards laterais viram coluna flex com altura travada em 100vh: o
   card-header permanece fixo dentro do próprio card, só o card-body
   ganha scroll interno quando o conteúdo (muitos campos de repertório
   ou muitos marcadores) passa da altura disponível — evita que o card
   "vaze" por baixo da viewport sem controle. */
/* Sticky ao rolar da toolbar do Estúdio do Modelo (modelo_estudio.html,
   Fase 3/Épico 7 — mesma classe/card-header, layout ainda "página que rola
   inteira" fora do editor de parecer). `#painel-repertorio-parecer`/
   `#form-marcadores` saíram desta regra no ADR-0003: dentro da casca nova
   de parecer_editor.html a página inteira não rola mais (só
   .editor-canvas/.editor-painel-contextual rolam, de forma independente) —
   o cabeçalho do painel já fica fixo por flex normal
   (.editor-painel-cabecalho { flex-shrink: 0 }), sticky/max-height:100vh
   ficariam redundantes e criariam um scroll aninhado sem propósito. */
@media (min-width: 992px) {
  .barra-ferramentas-editor {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--bs-card-bg);
  }
}

/* Aviso de conexão do editor (2026-08-08, feedback do usuário — ver
   DECISOES.md): card flutuante fixo na base da viewport, não no fluxo
   normal do topo da página. Um alerta no topo (como .alert-secondary de
   processo arquivado, logo acima) some de vista assim que o usuário rola
   pra baixo — e esse aviso pode aparecer bem no meio de uma sessão de
   edição longa, com o documento já rolado. z-index acima da barra de
   ferramentas sticky (2) e de dropdowns do Bootstrap (1000), abaixo de
   modal (1055) — não há modal nesta tela, a folga é só por hábito. */
.banner-conexao-editor {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 1040;
  max-width: min(90vw, 40rem);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* Lembrete de gravação de sessão via rrweb (dev-only, ver base.html/
   gravacao-sessao.js) — canto inferior esquerdo (o toast de sucesso já ocupa o
   direito, ver #caixa-toasts). --cor-erro sobre --cor-erro-suave: par já auditado
   pra 4.5:1 (Acessibilidade, CLAUDE.md), reaproveitado aqui em vez de um token novo. */
.badge-gravacao-sessao {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 1040;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background-color: var(--cor-erro-suave);
  color: var(--cor-erro);
  font-size: 0.8125rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Tela de login — sem cabeçalho/rodapé (ver base.html, blocks cabecalho/
   rodape vazios em login.html), o card centraliza sozinho na viewport
   inteira; padding sobra como respiro em telas baixas onde o flex não tem
   espaço de sobra pra centralizar de verdade. */
.pagina-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px var(--esp-padrao);
}

/* Flat Architecture (v2, 2026-08-07 — ver DECISOES.md): sem sombra; a borda
   1px em --cor-borda (não --cor-borda-suave, muito clara pra carregar o
   contorno sozinha sem elevação) faz toda a separação do fundo. */
.cartao-login {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: var(--esp-grande) var(--esp-secao);
  border-radius: var(--raio-grande);
  border: 1px solid var(--cor-borda);
}

.cartao-login-cabecalho {
  text-align: center;
  margin-bottom: var(--esp-secao);
}

.cartao-login-marca {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Navy aposentado (v3 não tem cor navy — ver DECISOES.md 2026-08-14). */
  color: var(--cor-texto);
  margin: 0 0 var(--esp-micro);
}

.cartao-login-subtitulo {
  font-size: 13px;
  color: var(--cor-texto-secundario);
  margin: 0 0 var(--esp-padrao);
}

.cartao-login-titulo {
  margin: 0 0 var(--esp-micro);
}

.cartao-login-texto-auxiliar {
  font-size: 13.5px;
  color: var(--cor-texto-secundario);
  margin: 0;
}

.campo-senha {
  position: relative;
}

.campo-senha .form-control {
  padding-right: 2.6rem;
}

.botao-alternar-senha {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44x44 — alvo de toque mínimo. O ícone continua 18px e a posição visual
     (right: 4px, centralizado verticalmente) não muda — a área extra é só
     invisível, dentro do padding-right reservado em .campo-senha
     .form-control, não sobre o texto digitado. */
  min-width: 44px;
  min-height: 44px;
  padding: 6px;
  border: none;
  background: transparent;
  border-radius: var(--raio-pequeno);
  color: var(--cor-texto-fraco);
  cursor: pointer;
}

.botao-alternar-senha:hover {
  color: var(--cor-texto);
  background: var(--cor-fundo);
}

.botao-alternar-senha:focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: 1px;
}

@media (max-width: 480px) {
  .pagina-login {
    padding: 32px 12px 48px;
  }

  .cartao-login {
    padding: var(--esp-secao) var(--esp-padrao);
    border-radius: var(--raio);
  }
}

/* Grade mensal server-side, sem lib de calendário nova (ver CLAUDE.md,
   "sem build step"). Nasceu na visão em calendário do módulo de Tarefas
   (Fase 11, Epic 4 — tarefa_calendario.html) com nome preso àquela tela
   (.tabela-calendario-tarefas/.celula-calendario-tarefas); generalizada em
   2026-08-25 para a Agenda unificada (/agenda), que desenha a mesma grade
   com duas fontes de item — mesmo CSS, sem duplicar bloco. */
.tabela-calendario th {
  text-align: center;
}

.tabela-calendario td {
  width: 14.28%;
  height: 96px;
  vertical-align: top;
  padding: 4px 6px;
}

.celula-calendario-fora-do-mes {
  background: var(--cor-borda-suave);
}

.celula-calendario--hoje {
  background: var(--cor-acento-suave);
}

.celula-calendario-dia {
  font-weight: 600;
  color: var(--cor-texto-secundario);
  margin-bottom: 2px;
}

.celula-calendario-itens li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Fase 11 — redesenho da tela "Nova tarefa"/"Editar tarefa"
   (tarefa_form.html, pedido do usuário 2026-08-20 — ver DECISOES.md):
   composição de uma única tarefa em vez de formulário CRUD tradicional.
   Link contextual reaproveita o vocabulário de .editor-botao-voltar mais
   acima, mas com Material Symbols (não o sprite SVG da sidebar) — esta tela
   fica fora do editor de parecer. */
.link-voltar-contextual {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-micro);
  color: var(--cor-texto-fraco);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  padding: var(--esp-micro) var(--esp-pequeno);
  margin: 0 0 var(--esp-compacto) calc(var(--esp-pequeno) * -1);
  border-radius: var(--raio-pequeno);
  min-height: 44px;
}

.link-voltar-contextual .material-symbols-outlined {
  font-size: 18px;
}

.link-voltar-contextual:hover,
.link-voltar-contextual:focus-visible {
  color: var(--cor-texto);
  background: var(--cor-borda-suave);
}

.link-voltar-contextual:focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: 2px;
}

/* Card único (§14 do pedido) — sem sub-cards por campo, largura confortável
   de leitura em vez de esticar até a largura toda de .conteudo (sem teto
   próprio desde 2026-08-20, ver DECISOES.md), alinhado à esquerda junto do
   resto da página (sem margin-inline:auto — "não centralizar"). */
.tarefa-compor {
  max-width: 1050px;
}

.tarefa-compor-corpo {
  padding: var(--esp-secao);
}

.tarefa-compor-label-principal {
  font-size: 15px;
  font-weight: 600;
}

.tarefa-obrigatorio {
  color: var(--cor-erro);
}

/* Campo principal com mais destaque que um <input> comum, sem exagerar no
   tamanho de fonte (pedido explícito do usuário). */
.tarefa-compor-titulo {
  font-size: 17px;
  padding: 12px 14px;
}

.tarefa-compor-divisor {
  border-color: var(--cor-borda-suave);
  margin: var(--esp-secao) 0;
  opacity: 1;
}

.tarefa-compor-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--esp-padrao);
}

.tarefa-prazo-amigavel {
  margin-top: var(--esp-micro);
}

.tarefa-prioridade-campo {
  display: flex;
  align-items: center;
  gap: var(--esp-pequeno);
}

.tarefa-prioridade-campo .form-select {
  flex: 1 1 auto;
}

/* Reforço visual só (aria-hidden no template) — a cor nunca é a única pista,
   o texto do <select> ao lado já basta sozinho (Acessibilidade, CLAUDE.md). */
.tarefa-prioridade-indicador {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--cor-borda);
}

.tarefa-prioridade-indicador[data-prioridade="urgente"] { background: var(--cor-erro); }
.tarefa-prioridade-indicador[data-prioridade="normal"] { background: var(--cor-alerta); }
.tarefa-prioridade-indicador[data-prioridade="baixa"] { background: var(--cor-texto-fraco); }

.tarefa-compor-acoes {
  display: flex;
  justify-content: flex-end;
  gap: var(--esp-pequeno);
  padding: var(--esp-padrao) var(--esp-secao);
  border-top: 1px solid var(--cor-borda-suave);
}

@media (max-width: 576px) {
  .tarefa-compor-acoes {
    flex-direction: column-reverse;
  }

  .tarefa-compor-acoes .btn {
    width: 100%;
  }
}

/* Landing page pública (`/landing-page`, temporário — pedido do usuário,
   2026-08-20, ver DECISOES.md). Prefixo `lp-` próprio: página de marketing
   sem sessão, fora da casca autenticada (sidebar/topbar — `cabecalho`/
   `rodape` são sobrescritos em landing_page.html com header/footer
   próprios, mesmo padrão de `.pagina-login`). Reusa os tokens `--cor-*`/
   `--esp-*`/`--raio-*` de sempre — tema claro fixo, mesma convenção do
   resto do conteúdo do app (ver comentário de `--sb-*` acima). */
.pagina-landing {
  max-width: none;
  margin-inline: 0;
  padding: 0;
}

/* Âncoras do nav (#consultivo, #fluxo...) — rolagem suave; zerada de volta
   pra `auto` sob prefers-reduced-motion pela regra global no topo deste
   arquivo (`scroll-behavior: auto !important`), sem precisar repetir aqui
   (ver Acessibilidade em CLAUDE.md). Escopado à landing (`html:has(.pagina-landing)`)
   — não é comportamento desejado nas páginas autenticadas, que não têm
   navegação por âncora nenhuma. `.lp-topo` não é sticky (ver comentário na
   regra dela), então não precisa de `scroll-margin-top` compensando altura
   de header fixo — só uma folga pequena pro título da seção não colar no
   topo da viewport. */
html:has(.pagina-landing) {
  scroll-behavior: smooth;
}

.pagina-landing section[id] {
  scroll-margin-top: var(--esp-grande);
}

.lp-largura {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--esp-padrao);
}

.pagina-landing-corpo svg.icone {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Topo — barra fina fixa no fluxo (não sticky: página curta o bastante,
   sticky só somaria complexidade sem benefício de uso comprovado). */
.lp-topo {
  border-bottom: 1px solid var(--cor-borda-suave);
  background: var(--cor-superficie);
}

.lp-topo-linha {
  display: flex;
  align-items: center;
  gap: var(--esp-secao);
  padding-block: var(--esp-compacto);
}

.lp-marca {
  display: flex;
  align-items: center;
  gap: var(--esp-pequeno);
  text-decoration: none;
  color: var(--cor-texto);
  margin-right: auto;
}

.lp-marca-icone {
  display: inline-flex;
  color: var(--cor-acento);
}

.lp-marca-icone svg.icone { width: 22px; height: 22px; }

.lp-marca-texto {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.lp-topo-nav {
  display: flex;
  gap: var(--esp-secao);
}

.lp-topo-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--cor-texto-secundario);
  text-decoration: none;
}

.lp-topo-nav a:hover { color: var(--cor-texto); }

.lp-marca:focus-visible,
.lp-topo-nav a:focus-visible,
.lp-topo-entrar:focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: 2px;
  border-radius: var(--raio-pequeno);
}

@media (max-width: 700px) {
  .lp-topo-nav { display: none; }
}

/* Hero */
.lp-hero {
  background: linear-gradient(180deg, var(--cor-acento-suave) 0%, var(--cor-fundo) 100%);
  border-bottom: 1px solid var(--cor-borda-suave);
}

.lp-hero-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  align-items: center;
  gap: var(--esp-grande);
  padding-block: 64px;
}

.lp-selo {
  display: inline-flex;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-acento);
  margin: 0 0 var(--esp-padrao);
}

.lp-hero-texto h1 {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--cor-texto);
  margin: 0 0 var(--esp-padrao);
}

.lp-hero-subtitulo {
  font-size: 17px;
  line-height: 1.6;
  color: var(--cor-texto-secundario);
  margin: 0 0 var(--esp-secao);
  max-width: 56ch;
}

.lp-hero-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-compacto);
  margin-bottom: var(--esp-secao);
}

.lp-hero-selos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-pequeno);
}

.lp-hero-selos li {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-pequeno);
  font-size: 14px;
  color: var(--cor-texto-secundario);
}

.lp-hero-selos svg.icone {
  width: 18px;
  height: 18px;
  color: var(--cor-sucesso);
  margin-top: 2px;
}

/* Card ilustrativo do hero — decorativo (aria-hidden), representa a tela do
   editor/workflow sem reproduzir dado real de nenhum parecer. */
.lp-hero-card {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-grande);
  padding: var(--esp-secao);
  box-shadow: 0 24px 48px -24px rgba(17, 24, 39, 0.25);
}

.lp-hero-card-topo {
  display: flex;
  align-items: center;
  gap: var(--esp-compacto);
  margin-bottom: var(--esp-secao);
}

.lp-hero-card-numero {
  font-size: 13px;
  font-weight: 600;
  color: var(--cor-texto-secundario);
}

.lp-hero-card-linha {
  height: 10px;
  border-radius: var(--raio-pequeno);
  background: var(--cor-borda-suave);
  margin-bottom: var(--esp-compacto);
}

.lp-hero-card-linha--titulo { width: 70%; height: 14px; background: var(--cor-acento-suave); }
.lp-hero-card-linha--curta { width: 45%; }

/* Trilha do workflow dentro do card ilustrativo (2026-08-31) — o mock antes
   era só linhas cinzas; a trilha diz, em um relance, o que o produto faz com
   um parecer. Decorativa: o contêiner do card é aria-hidden. */
.lp-hero-card-fluxo {
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--esp-pequeno);
  margin: var(--esp-secao) 0 0;
  padding: 0;
  font-size: 12px;
  color: var(--cor-texto-fraco);
}

/* Só a etapa corrente vira "chip" — as demais ficam como texto fraco, com a
   seta entrando pelo ::before do irmão. Assim a trilha ecoa o badge "Em
   revisão" do topo do card em vez de disputar atenção com ele. */
.lp-hero-card-fluxo li + li::before {
  content: "→";
  margin-right: var(--esp-pequeno);
  color: var(--cor-texto-fraco);
}

.lp-hero-card-fluxo-atual {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--esp-pequeno);
  border-radius: var(--raio-pequeno);
  background: var(--cor-alerta-suave);
  color: var(--cor-alerta);
  font-weight: 600;
}

.lp-hero-card-rodape {
  display: flex;
  align-items: center;
  gap: var(--esp-pequeno);
  margin-top: var(--esp-secao);
  padding-top: var(--esp-padrao);
  border-top: 1px solid var(--cor-borda-suave);
  font-size: 13px;
  color: var(--cor-texto-secundario);
}

@media (max-width: 900px) {
  .lp-hero-grade {
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--esp-grande);
  }

  .lp-hero-visual { display: none; }

  .lp-hero-texto h1 { font-size: 32px; }
}

/* Faixa de credibilidade logo abaixo do hero (2026-08-31) — quatro fatos
   curtos, não uma seção: sem título próprio, altura pequena e borda em cima e
   embaixo, pra funcionar como transição entre o hero e o corpo da página. */
.lp-prova {
  background: var(--cor-superficie);
  border-bottom: 1px solid var(--cor-borda-suave);
}

.lp-prova-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--esp-padrao) var(--esp-secao);
  padding-block: var(--esp-secao);
}

.lp-prova-item { text-align: center; }

.lp-prova-numero {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cor-acento);
}

.lp-prova-rotulo {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cor-texto-secundario);
}

/* Seções genéricas de conteúdo */
.lp-secao { padding-block: 64px; }

.lp-secao-cabecalho {
  max-width: 640px;
  margin: 0 auto var(--esp-grande);
  text-align: center;
}

.lp-secao-apoio {
  margin: var(--esp-pequeno) 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--cor-texto-secundario);
}

.lp-secao-selo {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-acento);
  margin: 0 0 var(--esp-pequeno);
}

.lp-secao-cabecalho h2 { margin-top: 0; }

/* Faixa "jeito antigo → com o produto" */
.lp-problema { padding-block: var(--esp-grande) 0; }

.lp-problema-grade {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--esp-secao);
}

.lp-problema-item {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-grande);
  padding: var(--esp-secao);
}

.lp-problema-item p:not(.lp-problema-rotulo) {
  margin: 0;
  color: var(--cor-texto-secundario);
  line-height: 1.6;
}

.lp-problema-rotulo {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cor-texto-fraco);
  margin: 0 0 var(--esp-pequeno);
}

.lp-problema-item--solucao {
  border-color: var(--cor-acento);
  background: var(--cor-acento-suave);
}

.lp-problema-item--solucao .lp-problema-rotulo { color: var(--cor-acento-hover); }
.lp-problema-item--solucao p:not(.lp-problema-rotulo) { color: var(--cor-texto); }

.lp-problema-seta { color: var(--cor-texto-fraco); display: flex; }

@media (max-width: 700px) {
  .lp-problema-grade { grid-template-columns: 1fr; }
  .lp-problema-seta { transform: rotate(90deg); justify-content: center; }
}

/* "Por que existe" — bloco curto, texto centralizado e mais estreito que o
   resto da página (ideal pra parágrafo corrido de 2-3 frases, não pra
   grade de cartões). */
.lp-origem { padding-block: var(--esp-grande) 0; text-align: center; }

.lp-origem-texto {
  max-width: 640px;
  margin-inline: auto;
}

.lp-origem-texto h2 { margin-top: 0; }

.lp-origem-texto p:not(.lp-secao-selo) {
  font-size: 16px;
  line-height: 1.7;
  color: var(--cor-texto-secundario);
  margin: 0;
}

/* Grupos de módulos dentro da seção "A plataforma" (2026-08-31) — sucedem as
   três seções de cartões que existiam antes (resumo + Consultivo +
   Contencioso), que repetiam conteúdo e davam à trilha ainda não pronta o
   mesmo peso da que estava em produção. Cabeçalho alinhado à esquerda, para
   contrastar com o cabeçalho centralizado da seção que os contém. */
.lp-grupo + .lp-grupo { margin-top: var(--esp-grande); }

.lp-grupo-cabecalho {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--esp-compacto);
  margin-bottom: var(--esp-padrao);
  padding-bottom: var(--esp-pequeno);
  border-bottom: 1px solid var(--cor-borda-suave);
}

.lp-grupo-cabecalho h3 {
  margin: 0;
  font-size: 20px;
}

/* Uma linha no lugar dos cinco cartões tracejados de "planejado" que antes
   ocupavam uma seção inteira — o roadmap continua declarado, sem competir em
   espaço com o que já existe. */
.lp-roadmap {
  margin: var(--esp-grande) 0 0;
  padding: var(--esp-padrao);
  border: 1px dashed var(--cor-borda);
  border-radius: var(--raio);
  font-size: 14px;
  line-height: 1.6;
  color: var(--cor-texto-secundario);
  text-align: center;
}

.lp-roadmap strong { color: var(--cor-texto); }

/* Cartões de funcionalidade */
.lp-cartoes-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--esp-padrao);
}

.lp-cartao {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-grande);
  padding: var(--esp-secao);
  transition: box-shadow .15s ease;
}

/* Elevação sutil no hover (design system v3) — o cartão não é clicável, então
   é só resposta de leitura, sem virar alvo falso. Zerada sob
   prefers-reduced-motion pela regra global do topo deste arquivo. */
.lp-cartao:hover { box-shadow: var(--bs-box-shadow); }

/* h4 desde 2026-08-31: os cartões passaram a viver dentro de um grupo com h3
   próprio (`.lp-grupo-cabecalho`), então desceram um nível de heading — o
   tamanho, esse, continua o mesmo de antes. */
.lp-cartao h3,
.lp-cartao h4 {
  margin: var(--esp-padrao) 0 var(--esp-pequeno);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.lp-cartao p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--cor-texto-secundario);
}

.lp-cartao-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--raio);
  background: var(--cor-acento-suave);
  color: var(--cor-acento);
}

.lp-cartao-icone svg.icone { width: 22px; height: 22px; }


/* Passo a passo ("Como funciona") */
.lp-fluxo { background: var(--cor-superficie); border-block: 1px solid var(--cor-borda-suave); }

.lp-passos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--esp-secao);
  counter-reset: none;
}

.lp-passo-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cor-acento);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: var(--esp-padrao);
}

.lp-passo h3 { margin-bottom: var(--esp-micro); }

.lp-passo p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--cor-texto-secundario);
}

/* Segurança e governança */
.lp-seguranca-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--esp-grande);
  align-items: start;
}

.lp-seguranca-texto {
  font-size: 15px;
  line-height: 1.6;
  color: var(--cor-texto-secundario);
  margin: 0;
}

.lp-seguranca-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-padrao);
}

.lp-seguranca-lista li {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-compacto);
  padding: var(--esp-padrao);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  font-size: 14px;
  color: var(--cor-texto);
}

.lp-seguranca-lista svg.icone { color: var(--cor-acento); margin-top: 1px; }

@media (max-width: 800px) {
  .lp-seguranca-grade { grid-template-columns: minmax(0, 1fr); }
}

/* Chamada final */
.lp-cta { padding-block: var(--esp-grande) 80px; }

.lp-cta-caixa {
  text-align: center;
  background: var(--cor-texto);
  border-radius: var(--raio-grande);
  padding: 56px var(--esp-secao);
}

.lp-cta-caixa h2 { color: #fff; margin-top: 0; }

.lp-cta-caixa p {
  color: #D1D5DB;
  font-size: 15px;
  margin: 0 0 var(--esp-secao);
}

.lp-cta-secundario {
  margin: var(--esp-padrao) 0 0;
  font-size: 14px;
  color: #D1D5DB;
}

.lp-cta-secundario a {
  color: #fff;
  text-decoration: underline;
}

/* Rodapé de marketing — independente de `.rodape` (chrome autenticado);
   mesmo texto/marca de sempre (ver `{% block rodape %}` de base.html).
   Ampliado (P1 item 7, 2026-08-20): de uma linha só pra 3 blocos
   empilhados — marca/tagline, links de contato/legal, copyright — sem
   perder o tom discreto (mesmas cores fracas de sempre). */
.lp-rodape { border-top: 1px solid var(--cor-borda); }

.lp-rodape-conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-pequeno);
  padding: var(--esp-padrao);
  text-align: center;
}

.lp-rodape-topo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--esp-compacto);
  font-size: 12.5px;
  color: var(--cor-texto-fraco);
}

.lp-rodape-topo .lp-marca-texto {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cor-texto-secundario);
  font-size: 12.5px;
}

.lp-rodape-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--esp-compacto);
  font-size: 12.5px;
}

.lp-rodape-links a {
  color: var(--cor-texto-secundario);
  text-decoration: underline;
}

.lp-rodape-links a:hover { color: var(--cor-texto); }

.lp-rodape-links a:focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: 2px;
  border-radius: var(--raio-pequeno);
}

.lp-rodape-copyright {
  margin: 0;
  font-size: 12px;
  color: var(--cor-texto-fraco);
}

/* Política de Privacidade (/privacidade, P1 item 7 do backlog de melhorias
   da landing, 2026-08-20) — página de texto corrido, largura de leitura
   confortável (~70ch), não a grade de cartões do resto da landing. */
.lp-privacidade { padding-block: var(--esp-grande); }

.lp-privacidade-texto {
  max-width: 720px;
  margin-inline: auto;
}

.lp-privacidade-texto h1 {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 var(--esp-pequeno);
}

.lp-privacidade-atualizado {
  color: var(--cor-texto-fraco);
  font-size: 13.5px;
  margin: 0 0 var(--esp-secao);
}

.lp-privacidade-texto h2 {
  font-size: 19px;
  margin: var(--esp-secao) 0 var(--esp-pequeno);
}

.lp-privacidade-texto p {
  color: var(--cor-texto-secundario);
  line-height: 1.7;
  margin: 0 0 var(--esp-padrao);
}

.lp-privacidade-texto a { color: var(--cor-acento); }

/* Fase 11 — redesenho da tela "Tarefas" (tarefa_lista.html/_tarefa_filtros.html,
   pedido do usuário 2026-08-20 — "central de trabalho", ver DECISOES.md).
   Tabs de estado: indicador inferior discreto, não link sublinhado solto. */
.tarefas-tabs {
  display: flex;
  gap: var(--esp-secao);
  border-bottom: 1px solid var(--cor-borda-suave);
  margin-bottom: var(--esp-padrao);
  overflow-x: auto;
}

.tarefas-tab {
  padding: var(--esp-pequeno) 0 var(--esp-compacto);
  color: var(--cor-texto-secundario);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}

.tarefas-tab:hover { color: var(--cor-texto); }

.tarefas-tab:focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: 2px;
  border-radius: var(--raio-pequeno);
}

.tarefas-tab--ativa {
  color: var(--cor-acento);
  border-bottom-color: var(--cor-acento);
}

/* Barra de ferramentas — busca integrada à esquerda, ações agrupadas à
   direita (§6/§17 do pedido: nem campo de busca isolado, nem fileira de
   links/selects soltos). */
.tarefas-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--esp-pequeno);
  margin-bottom: var(--esp-compacto);
}

.tarefas-busca {
  position: relative;
  flex: 1 1 260px;
  max-width: 360px;
}

.tarefas-busca-icone {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cor-texto-fraco);
  font-size: 18px;
  pointer-events: none;
}

.tarefas-busca-campo {
  width: 100%;
  height: 36px;
  padding: 0 10px 0 34px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-superficie);
  font-size: 13.5px;
  color: var(--cor-texto);
}

.tarefas-busca-campo:focus {
  outline: none;
  border-color: var(--cor-acento);
  box-shadow: 0 0 0 3px var(--cor-acento-suave);
}

/* Remove o "x" nativo de <input type=search> do Chrome/Edge — sem isso ele
   desalinha o padding calculado acima e duplica o afazer da lupa fixa. */
.tarefas-busca-campo::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.tarefas-toolbar-acoes {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Realce discreto quando o dropdown correspondente tem filtro aplicado —
   reforço visual só, o texto do botão ("Filtros"/nome da pasta) já basta. */
.tarefas-filtro-ativo {
  border-color: var(--cor-acento);
  color: var(--cor-acento);
  background: var(--cor-acento-suave);
}

.tarefas-filtros-painel {
  min-width: 220px;
}

.tarefas-pastas-painel {
  min-width: 240px;
  max-height: 320px;
  overflow-y: auto;
}

.tarefas-pasta-item {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: 4px;
}

.tarefas-pasta-item .dropdown-item {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tarefas-pasta-remover {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  border-radius: var(--raio-pequeno);
  color: var(--cor-texto-fraco);
}

.tarefas-pasta-remover:hover { background: var(--cor-erro-suave); color: var(--cor-erro); }
.tarefas-pasta-remover:focus-visible { outline: 2px solid var(--cor-acento); outline-offset: 1px; }
.tarefas-pasta-remover .material-symbols-outlined { font-size: 16px; margin: 0; }

/* Alternância Lista/Calendário — par de ícones com fundo, não mais dois
   links "·"-separados (§3 do pedido não lista o toggle, mas a
   funcionalidade precisa continuar existindo em algum lugar discreto). */
.tarefas-visualizacao-toggle {
  display: flex;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  overflow: hidden;
}

.tarefas-visualizacao-toggle a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--cor-texto-fraco);
  text-decoration: none;
}

.tarefas-visualizacao-toggle a:hover { background: var(--cor-borda-suave); color: var(--cor-texto); }
.tarefas-visualizacao-toggle a:focus-visible { outline: 2px solid var(--cor-acento); outline-offset: -2px; }

.tarefas-visualizacao-toggle-ativo {
  background: var(--cor-acento-suave);
  color: var(--cor-acento) !important;
}

/* Contagem discreta — sem paginação real ainda (decisão do usuário,
   2026-08-20, ver DECISOES.md): mostra quantas tarefas vieram, sem
   controles de página que não fariam nada. */
.tarefas-contagem {
  margin: 0 0 var(--esp-pequeno);
}

/* Tabela — mais densa que .table-sm padrão, título como elemento dominante
   da linha, linha inteira como unidade de interação (hover discreto, sem
   sombra). */
.tarefas-tabela thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cor-texto-fraco);
  border-bottom-color: var(--cor-borda);
  padding: 0 var(--esp-compacto) var(--esp-pequeno);
}

.tarefas-tabela td {
  padding: var(--esp-compacto);
  vertical-align: middle;
  border-color: var(--cor-borda-suave);
}

.tarefas-tabela tbody tr {
  cursor: pointer;
}

.tarefa-celula-estado {
  width: 1%;
  padding-right: 0;
  cursor: default;
}

.tarefa-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  border-radius: 50%;
  color: var(--cor-texto-fraco);
}

.tarefa-checkbox:hover { background: var(--cor-borda-suave); color: var(--cor-texto-secundario); }
.tarefa-checkbox:focus-visible { outline: 2px solid var(--cor-acento); outline-offset: 2px; }
.tarefa-checkbox--feita { color: var(--cor-sucesso); }
.tarefa-checkbox--fazendo { color: var(--cor-alerta); }

.tarefa-titulo-link {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--cor-texto);
  text-decoration: none;
}

.tarefa-titulo-link:hover { color: var(--cor-acento); }

.tarefa-titulo-link:focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: 2px;
  border-radius: var(--raio-pequeno);
}

.tarefa-titulo-link--feita {
  color: var(--cor-texto-fraco);
  text-decoration: line-through;
}

.tarefa-contexto {
  font-size: 12px;
  color: var(--cor-texto-fraco);
  margin: 2px 0 0;
}

.tarefa-celula-responsavel {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 180px;
}

.avatar-pequena {
  width: 22px;
  height: 22px;
  font-size: 10.5px;
}

.tarefa-prazo-atrasada {
  color: var(--cor-erro);
  font-weight: 600;
}

.tarefa-prioridade-selo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
}

.tarefa-prioridade-selo .material-symbols-outlined { font-size: 15px; }
.tarefa-prioridade-selo--urgente { color: var(--cor-erro); }
.tarefa-prioridade-selo--normal { color: var(--cor-alerta); }
.tarefa-prioridade-selo--baixa { color: var(--cor-texto-secundario); }

/* Kebab de ações — opacidade reduzida por padrão (não some no touch, que não
   tem :hover) e cheia no hover/foco/aberto da linha. Substitui o botão
   grande "Editar" de cada linha (§14 do pedido). */
.tarefa-botao-acoes {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  border-radius: var(--raio-pequeno);
  color: var(--cor-texto-fraco);
  opacity: .55;
  transition: opacity .1s ease, background .15s ease;
}

/* `.tarefas-tabela` é o hover original (nasceu em `/tarefas`); `tr:hover` genérico foi somado na
   Fase 24/Epic 3 quando a tela de Usuários reusou o mesmo botão de ações fora daquela tabela — o
   componente sempre foi genérico, só o seletor de hover é que tinha nascido restrito de mais. */
.tarefas-tabela tbody tr:hover .tarefa-botao-acoes,
tr:hover .tarefa-botao-acoes,
.tarefa-botao-acoes:focus-visible,
.tarefa-botao-acoes[aria-expanded="true"] {
  opacity: 1;
}

.tarefa-botao-acoes:hover { background: var(--cor-borda-suave); color: var(--cor-texto); }
.tarefa-botao-acoes:focus-visible { outline: 2px solid var(--cor-acento); outline-offset: 2px; }

/* Barra de ícones da edição de tarefa (`_tarefa_secundarios.html`, modal e página cheia) —
   substitui os cinco `.card` empilhados de estado/etiquetas/atribuição/pastas/processo-parecer
   (pedido do usuário, 2026-09-25, referência visual: Google Keep). Reaproveita a família de
   botão-ícone 32×32 de `.tarefa-botao-acoes` acima (mesma "densidade de toolbar" já aceita em
   CLAUDE.md § Acessibilidade) e o `.dropdown`/`.dropdown-menu` do Bootstrap — nenhum componente
   novo, só um arranjo novo dos dois que o projeto já tinha. O estado de cada propriedade
   (quantas etiquetas, quem está atribuído) aparece no próprio ícone via `--marcado`/a contagem,
   em vez de uma linha de resumo à parte. */
.tarefa-secundarios {
  margin-top: var(--esp-secao);
}

.tarefa-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--esp-micro);
  padding-bottom: var(--esp-padrao);
  margin-bottom: var(--esp-padrao);
  border-bottom: 1px solid var(--cor-borda-suave);
}

.tarefa-toolbar-grupo {
  display: flex;
  gap: 2px;
  background: var(--cor-borda-suave);
  border-radius: var(--raio-pequeno);
  padding: 2px;
}

.tarefa-toolbar-separador {
  width: 1px;
  height: 24px;
  background: var(--cor-borda-suave);
  margin: 0 var(--esp-micro);
}

.tarefa-toolbar-botao {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--raio-pequeno);
  background: none;
  color: var(--cor-texto-fraco);
  text-decoration: none;
}

.tarefa-toolbar-botao:hover { background: var(--cor-superficie); color: var(--cor-texto); }
.tarefa-toolbar-botao:focus-visible { outline: 2px solid var(--cor-acento); outline-offset: 2px; }
.tarefa-toolbar-botao[aria-expanded="true"] { background: var(--cor-superficie); color: var(--cor-texto); }
.tarefa-toolbar-botao--marcado { color: var(--cor-acento); }

/* Dentro do grupo "Estado" o ativo ganha fundo — os três botões formam um segmentado, não uma
   lista de ícones soltos. Fora dele ("ver processo"/"ver parecer" já criados) só a cor muda. */
.tarefa-toolbar-grupo .tarefa-toolbar-botao--ativo { background: var(--cor-superficie); color: var(--cor-acento); box-shadow: var(--bs-box-shadow-sm); }
a.tarefa-toolbar-botao--ativo { color: var(--cor-acento); }

.tarefa-toolbar-contagem {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.tarefa-toolbar-painel {
  width: min(320px, 90vw);
}

/* Anexos precisa de mais fôlego que as demais — upload + lista de arquivo têm texto mais longo
   (nome de arquivo, tamanho, data) que uma ficha de etiqueta. */
.tarefa-toolbar-painel--larga {
  width: min(380px, 90vw);
}

.tarefa-anexos-secao {
  padding-top: var(--esp-pequeno);
}

/* Item de dropdown que é um <button type=submit> dentro de <form> (mudar
   estado a partir do menu ⋮) — mesma aparência de .dropdown-item comum,
   só que sem herdar o reskin de .btn (que não se aplica aqui). */
button.dropdown-item {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  font-weight: 500;
}

/* ==========================================================================
   Epic 8 (2026-08-25) — menu de contexto em cascata, etiquetas, chips de
   filtro ativo e board Kanban. Mesmos tokens de sempre, nenhum valor novo.
   ========================================================================== */

/* Submenu dentro do dropdown "⋮" (Alterar Prioridade/Prazo/Estado ▸) — Bootstrap 5 não tem
   dropdown de dois níveis pronto; a alternância de `.mostrar` é feita por JS delegado em
   tarefa_lista.html/tarefa_kanban.html (clique ou teclado, nunca só :hover — não funciona em
   touch nem é acessível por teclado sozinho). */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
}

.dropdown-submenu > .dropdown-item .material-symbols-outlined:last-child {
  font-size: 16px;
  color: var(--cor-texto-fraco);
}

/* Abre pra ESQUERDA do gatilho — o dropdown pai (`.dropdown-menu-end`, ver _tarefa_linha.html) já
   fica encostado na borda direita da tela (o "⋮" é a última coluna da tabela); um submenu que
   abrisse pra direita (`left: 100%`) saía da viewport quase sempre, sem scroll horizontal pra
   alcançar (achado em produção, 2026-08-25). */
.dropdown-submenu > .dropdown-menu {
  display: none;
  position: absolute;
  top: 0;
  right: 100%;
  left: auto;
  margin-right: 2px;
}

.dropdown-submenu > .dropdown-menu.mostrar {
  display: block;
}

/* Telas estreitas: sem espaço pra abrir nem pra esquerda nem pra direita — o submenu cai pra
   baixo do gatilho, como um acordeão dentro do próprio dropdown. */
@media (max-width: 480px) {
  .dropdown-submenu > .dropdown-menu {
    position: static;
    margin-right: 0;
    box-shadow: none;
    border: none;
    padding-left: var(--esp-padrao);
  }
}

.menu-prioridade-ponto,
.menu-cor-ponto {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: var(--esp-pequeno);
  flex-shrink: 0;
}

.menu-prioridade-ponto--urgente { background: var(--cor-erro); }
.menu-prioridade-ponto--normal { background: var(--cor-alerta); }
.menu-prioridade-ponto--baixa { background: var(--cor-texto-fraco); }

/* Pontos de cor de etiqueta no menu "Vincular etiquetas" — cor sólida (não a "-suave" do chip
   `.tarefa-etiqueta--*`, que ficaria pálida demais num círculo de 8px). Mesmo vocabulário fechado
   de ETIQUETA_CORES_VALIDAS. */
.menu-cor-ponto--secundario { background: var(--cor-texto-fraco); }
.menu-cor-ponto--acento { background: var(--cor-acento); }
.menu-cor-ponto--sucesso { background: var(--cor-sucesso); }
.menu-cor-ponto--alerta { background: var(--cor-alerta); }
.menu-cor-ponto--erro { background: var(--cor-erro); }
.menu-cor-ponto--info { background: var(--cor-info); }

/* Atalhos de data (Hoje/Amanhã/Próxima semana) — botões pequenos lado a lado com o campo de
   data manual, mesmo submenu "Alterar Prazo". */
.menu-prazo-atalhos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-micro);
  padding: 0 var(--esp-compacto) var(--esp-pequeno);
}

.menu-prazo-atalhos .btn { flex: 1 1 auto; }

/* Etiquetas (Epic 8) — chip pequeno, cor de fundo "-suave" + texto na cor cheia (mesmo par já
   auditado que badge de aviso usa, ver comentário em style.css §toasts). Cor vem do catálogo do
   tenant (ETIQUETA_CORES_VALIDAS), nunca hex livre. */
.tarefa-etiqueta {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
  line-height: 1.5;
}

.tarefa-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

/* O par fundo/texto de cada cor vive numa custom property, e não direto em
   `background`/`color`, desde a Fase 19/Epic 6: a ficha que o Tom Select desenha no campo de
   etiquetas da tarefa precisa das mesmas cores, e a biblioteca pinta `.ts-control > div` com
   especificidade maior que a classe sozinha. Com o par nomeado, a regra de lá consome o mesmo
   valor (ver bloco "Campos ricos") em vez de repetir as seis linhas abaixo. */
.tarefa-etiqueta--secundario { --etiqueta-fundo: var(--cor-borda-suave); --etiqueta-texto: var(--cor-texto-secundario); }
.tarefa-etiqueta--acento { --etiqueta-fundo: var(--cor-acento-suave); --etiqueta-texto: var(--cor-acento); }
.tarefa-etiqueta--sucesso { --etiqueta-fundo: var(--cor-sucesso-suave); --etiqueta-texto: var(--cor-sucesso); }
.tarefa-etiqueta--alerta { --etiqueta-fundo: var(--cor-alerta-suave); --etiqueta-texto: var(--cor-alerta); }
.tarefa-etiqueta--erro { --etiqueta-fundo: var(--cor-erro-suave); --etiqueta-texto: var(--cor-erro); }
.tarefa-etiqueta--info { --etiqueta-fundo: var(--cor-info-suave); --etiqueta-texto: var(--cor-info); }

[class*="tarefa-etiqueta--"] {
  background: var(--etiqueta-fundo);
  color: var(--etiqueta-texto);
}

/* Chips de "Filtros ativos" acima da tabela — cada um com um "×" que limpa só aquele filtro
   (reusa url_tarefas com o campo zerado), nunca "Limpar tudo" disfarçado de filtro único. */
.tarefas-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-pequeno);
  margin-bottom: var(--esp-padrao);
}

.tarefas-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-micro);
  font-size: 12.5px;
  font-weight: 500;
  background: var(--cor-acento-suave);
  color: var(--cor-acento);
  padding: 3px 4px 3px 10px;
  border-radius: 999px;
  text-decoration: none;
}

.tarefas-chip:hover { background: var(--cor-acento); color: #fff; }
.tarefas-chip:focus-visible { outline: 2px solid var(--cor-acento); outline-offset: 2px; }

.tarefas-chip .material-symbols-outlined {
  font-size: 15px;
  border-radius: 50%;
}

/* Board Kanban (Epic 8) — colunas lado a lado com rolagem horizontal própria (a página nunca
   rola na horizontal, ver regra de responsividade), cartão arrastável via HTML5 drag-and-drop
   nativo (sem lib nova). */
.kanban-board {
  display: flex;
  gap: var(--esp-padrao);
  overflow-x: auto;
  padding-bottom: var(--esp-pequeno);
  align-items: flex-start;
}

.kanban-coluna {
  flex: 0 0 280px;
  background: var(--cor-borda-suave);
  border-radius: var(--raio-grande);
  padding: var(--esp-pequeno);
  display: flex;
  flex-direction: column;
  gap: var(--esp-pequeno);
  max-height: calc(100vh - 320px);
}

.kanban-coluna-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--esp-micro) var(--esp-pequeno);
}

.kanban-coluna-titulo {
  display: flex;
  align-items: center;
  gap: var(--esp-pequeno);
}

.kanban-coluna-contagem {
  font-size: 12px;
  color: var(--cor-texto-fraco);
  font-weight: 700;
}

.kanban-coluna-corpo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-pequeno);
  overflow-y: auto;
  min-height: 40px;
  padding: 2px;
}

/* Alvo de solta em destaque — ligada via JS nos eventos dragenter/dragleave/drop
   (tarefa_kanban.html), nunca só :hover (drag-and-drop não dispara hover no alvo em todo
   navegador). */
.kanban-coluna-corpo.kanban-arrastando-sobre {
  outline: 2px dashed var(--cor-acento);
  outline-offset: -2px;
  border-radius: var(--raio-pequeno);
}

.kanban-cartao {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda-suave);
  border-left: 3px solid var(--cor-borda-suave);
  border-radius: var(--raio-pequeno);
  padding: var(--esp-pequeno) var(--esp-compacto);
  cursor: grab;
  text-decoration: none;
  color: inherit;
  display: block;
}

.kanban-cartao:hover { border-color: var(--cor-borda); box-shadow: var(--sombra-md); }
.kanban-cartao:focus-visible { outline: 2px solid var(--cor-acento); outline-offset: 2px; }
.kanban-cartao[draggable="true"]:active { cursor: grabbing; }

/* Faixa lateral por prioridade (pedido do usuário, 2026-08-25) — mesmo vocabulário de cor de
   .tarefa-prioridade-selo; só a borda esquerda muda, o resto do cartão continua neutro (cor
   entra pra hierarquia, não decoração — CLAUDE.md § Acessibilidade: nunca só a cor, o rótulo
   "Urgente/Normal/Baixa" continua em texto no rodapé do cartão). */
.kanban-cartao--urgente { border-left-color: var(--cor-erro); }
.kanban-cartao--normal { border-left-color: var(--cor-alerta); }
.kanban-cartao--baixa { border-left-color: var(--cor-texto-fraco); }

.kanban-cartao-titulo {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cor-texto);
  margin-bottom: var(--esp-micro);
}

.kanban-cartao-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-pequeno);
  font-size: 12px;
  color: var(--cor-texto-fraco);
}

/* Estado vazio (§19 do pedido) — nunca só uma tabela em branco. */
.tarefas-vazio {
  padding: var(--esp-grande) var(--esp-padrao);
  text-align: center;
  color: var(--cor-texto-secundario);
}

.tarefas-vazio .material-symbols-outlined {
  font-size: 40px;
  color: var(--cor-texto-fraco);
  margin-bottom: var(--esp-pequeno);
}

.tarefas-vazio h3 {
  color: var(--cor-texto);
  margin-bottom: var(--esp-micro);
}

@media (max-width: 480px) {
  .tarefas-busca {
    max-width: none;
    flex-basis: 100%;
  }
}

/* ==========================================================================
   Arquétipo de página "busca + resultado" (2026-08-22 — ver DECISOES.md)

   Piloto da camada de COMPOSIÇÃO de página, ausente do design system v3: o
   v3 diz como um card se parece (borda + sombra + raio 12px), não quantos
   cards a tela tem, qual deles é primário, nem o que se recolhe. Estas
   classes são o vocabulário dessa camada — genéricas de propósito
   (`.pagina-cabecalho`, `.estado-vazio`, `.lista-resultado`), não prefixadas
   por tela, porque a intenção é que a próxima página de busca reuse em vez
   de inventar a própria grade.

   Primeira tela a usar: intimacao_buscar_djen.html. Todo valor de espaço,
   cor e raio sai dos tokens do :root — nenhum número novo é introduzido
   aqui, só arranjo.
   ========================================================================== */

/* Zona 1 — cabeçalho da página. Título + subtítulo de uma linha, com espaço
   reservado à direita pra ação de página (ex.: "Novo processo") quando a
   tela tiver uma; por isso o space-between mesmo sem segundo filho hoje. */
.pagina-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--esp-padrao);
  margin-bottom: var(--esp-secao);
}

/* 68ch: linha de leitura confortável. Sem teto, o subtítulo estica até a
   largura toda do dashboard em monitor grande e vira uma faixa de texto que
   ninguém lê. */
.pagina-cabecalho-texto {
  max-width: 68ch;
}

.pagina-cabecalho-sub {
  margin-bottom: 0;
  color: var(--cor-texto-secundario);
}

/* O espacamento da zona 1 e do proprio header (margin-bottom 24px); o titulo
   nao acrescenta margem por cima. Sem isso, o `margin-top: var(--esp-secao)`
   que a regra `h1, h2` acabou de dar ao <h1> empurraria o titulo pra baixo
   dentro do cabecalho — o <h1> aqui nao tinha margem nenhuma antes, porque
   caia no default do Bootstrap. */
.pagina-cabecalho h1 {
  margin-top: 0;
}

/* Zona 2 — painel de comando (o formulário de busca). */
.busca-painel {
  margin-bottom: var(--esp-secao);
}

/* Agrupamento semântico de critério. <fieldset>/<legend> de verdade (regra
   de acessibilidade do CLAUDE.md pra escolha coletiva) — o que exige zerar
   o estilo que o Bootstrap dá a `legend` solto: float:left + width:100% +
   font-size calc(1.275rem + .3vw), que aqui atrapalhariam o flex. */
.busca-grupo {
  border: 0;
  padding: 0;
  min-width: 0;
}

.busca-grupo + .busca-grupo,
.busca-avancado {
  margin-top: var(--esp-secao);
}

.busca-grupo-titulo {
  float: none;
  width: auto;
  padding: 0;
  margin-bottom: var(--esp-pequeno);
  font-size: inherit;
  line-height: inherit;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--esp-pequeno);
  color: var(--cor-texto);
}

/* A regra do formulário mora aqui, na legenda do grupo — não num form-text
   depois dos campos, onde só é lida depois do erro. Caixa normal (não caps)
   pra contrastar com o rótulo do grupo e ler como frase, não como etiqueta. */
.busca-grupo-regra {
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--cor-texto-secundario);
}

/* Campo de sigla curta (UF, código de meio). Existe pra que a largura da
   coluna e o caixa-alta digam "cabe pouca coisa aqui" — o oposto do
   `col-md-3` uniforme que dava a um campo de 2 caracteres o mesmo peso
   visual do nome da parte. */
.campo-sigla {
  text-transform: uppercase;
}

/* Filtro secundário recolhido. `list-style:none` + `::marker` vazio cobre
   Chrome/Firefox/Safari (cada um esconde o triângulo nativo por um caminho
   diferente); o chevron abaixo é desenhado com borda, sem depender do
   carregamento da fonte de ícones. */
.busca-avancado-gatilho {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-pequeno);
  padding: var(--esp-pequeno) 0;
  cursor: pointer;
  font-weight: 600;
  color: var(--cor-acento);
  list-style: none;
  border-radius: var(--raio-pequeno);
}

.busca-avancado-gatilho::-webkit-details-marker { display: none; }
.busca-avancado-gatilho::marker { content: ""; }

.busca-avancado-gatilho:focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: 2px;
}

.busca-avancado-gatilho .material-symbols-outlined {
  font-size: 20px;
}

.busca-avancado-gatilho::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
}

.busca-avancado[open] .busca-avancado-gatilho::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.busca-avancado-corpo {
  margin-top: var(--esp-pequeno);
}

/* Rodapé do painel: ação primária à direita, no fim natural da leitura do
   formulário. `--bs-card-cap-bg` do Bootstrap é um preto 3% que sujaria o
   branco puro que a v3 pede pra superfície de card. */
.busca-rodape {
  --bs-card-cap-bg: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--esp-compacto);
  border-top-color: var(--cor-borda-suave);
  padding: var(--esp-padrao);
}

.busca-limpar {
  margin-right: auto;
  color: var(--cor-texto-secundario);
}

/* Zona 3 — resultado.

   Estado vazio genérico. Sucede `.tarefas-vazio` (mesma anatomia, nome preso
   a uma tela); a migração de /tarefas pra cá não foi feita nesta leva
   pra não misturar refatoração de tela em produção com o piloto. */
.estado-vazio-painel {
  margin-top: var(--esp-secao);
}

.estado-vazio {
  padding: var(--esp-grande) var(--esp-padrao);
  text-align: center;
  color: var(--cor-texto-secundario);
}

.estado-vazio .material-symbols-outlined {
  font-size: 40px;
  color: var(--cor-texto-fraco);
  margin-bottom: var(--esp-pequeno);
}

/* h2 ou h3: o estado vazio às vezes é de uma <section> que já tem h2 próprio (relatório de
   importação do acervo, Fase 22), e aí o título dele desce um nível para a ordem de heading não
   pular — a aparência é a mesma nos dois casos. */
.estado-vazio :is(h2, h3) {
  color: var(--cor-texto);
  margin-bottom: var(--esp-micro);
}

.estado-vazio p {
  max-width: 56ch;
  margin-inline: auto;
}

/* Cartão de pasta — navegação por pastas virtuais (/pastas, Fase 23/Epic 4). Componente novo, e
   não reuso de `.painel-kpi`: lá o número é o conteúdo e o rótulo é a legenda; aqui é o oposto — o
   nome da pasta é o destino e a contagem é o metadado que ajuda a escolher. Reusar o KPI inverteria
   a hierarquia da tela inteira. D17 do ADR-0012: nível de pasta é lista de cartões, nunca tabela;
   contador e nome de pasta não são colunas ordenáveis, são navegação. Ver `DECISOES.md`. */
.pasta-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--esp-padrao);
  margin-bottom: 0;
}

.pasta-cartao {
  display: flex;
  align-items: center;
  gap: var(--esp-compacto);
  /* Padding generoso de propósito: o cartão inteiro é o alvo de clique, então ele já nasce muito
     acima dos 44x44px do § Acessibilidade sem precisar de regra própria. */
  padding: var(--esp-padrao);
  height: 100%;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-grande);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--bs-box-shadow);
  transition: border-color .15s ease;
}

.pasta-cartao:hover {
  border-color: var(--cor-acento);
  color: inherit;
}

.pasta-cartao:focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: 2px;
}

.pasta-cartao-icone {
  font-size: 28px;
  color: var(--cor-texto-fraco);
  flex-shrink: 0;
}

/* `min-width: 0` para o nome longo poder truncar dentro do grid em vez de esticar a coluna. */
.pasta-cartao-texto {
  min-width: 0;
}

.pasta-cartao-nome {
  display: block;
  overflow-wrap: anywhere;
}

.pasta-cartao-contagem {
  font-size: 13px;
  color: var(--cor-texto-secundario);
}

/* "Sem classificação" (ORG07) — pendência, não erro: `--cor-alerta`, jamais `--cor-erro`. A borda
   tracejada carrega o mesmo recado sem depender de cor (§ Acessibilidade: cor nunca é a única
   pista), e o texto "a classificar" ao lado da contagem fecha em palavras. */
.pasta-cartao--pendente {
  border-style: dashed;
}

.pasta-cartao--pendente .pasta-cartao-icone {
  color: var(--cor-alerta);
}

.pasta-cartao-marca {
  color: var(--cor-alerta);
}

/* Barra de ação da lista. Fica grudada no topo ao rolar porque a decisão
   ("importar isto") se forma DURANTE a rolagem da lista — com os botões
   soltos acima, o usuário precisa voltar ao topo pra agir. z-index baixo de
   propósito: fica acima do conteúdo da página e abaixo de dropdown (1000) e
   modal (1055) do Bootstrap. */
.barra-acoes-resultado {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--esp-compacto);
  margin-bottom: var(--esp-padrao);
  padding: var(--esp-compacto) var(--esp-padrao);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-grande);
  box-shadow: var(--bs-box-shadow);
}

.barra-acoes-meta {
  font-size: 13px;
  color: var(--cor-texto-fraco);
}

.barra-acoes-botoes {
  display: flex;
  gap: var(--esp-pequeno);
  flex-wrap: wrap;
}

/* Lista de resultado — gap de 16px entre itens é o `stack-md` do v3
   ("16px entre itens de uma mesma lista"). */
.lista-resultado {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-padrao);
}

.item-resultado {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-compacto);
  padding: var(--esp-padrao);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-grande);
  box-shadow: var(--bs-box-shadow);
}

/* Estado "selecionado" sem uma linha de JS: `:has()` (já em uso neste
   arquivo, `body:has(.sidebar)`). Mesmo tratamento de
   `.card-selecionavel--ativo` — anel de acento, não mudança de fundo. */
.item-resultado:has(.item-resultado-check:checked) {
  border-color: var(--cor-acento);
  box-shadow: 0 0 0 3px var(--cor-acento-suave);
}

/* Item já capturado antes: recolhido pro fundo, sem sumir. */
.item-resultado--importada {
  background: var(--cor-fundo);
  box-shadow: none;
}

.item-resultado-check {
  margin-top: 3px;
  flex-shrink: 0;
}

.item-resultado-corpo {
  flex: 1 1 auto;
  min-width: 0;
}

.item-resultado-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--esp-pequeno);
  margin-bottom: var(--esp-micro);
}

/* O número do processo é a identidade do item — e também o rótulo da caixa
   de seleção (clicar nele marca o item, alvo bem maior que o checkbox).
   `tabular-nums` alinha os dígitos entre linhas da lista, que é o que faz
   uma coluna de números CNJ virar algo escaneável. */
.item-resultado-numero {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--cor-texto);
  cursor: pointer;
}

/* Meta em uma linha só, separada por · gerado no CSS — sem os separadores
   entrarem no HTML (leitor de tela não lê pontinho decorativo) e sem sobrar
   um · órfão quando um campo opcional não vem. */
.item-resultado-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-pequeno);
  margin-bottom: var(--esp-pequeno);
  font-size: 13px;
  color: var(--cor-texto-fraco);
}

.item-resultado-meta span + span::before {
  content: "·";
  margin-right: var(--esp-pequeno);
}

.item-resultado-partes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-micro);
  margin-bottom: var(--esp-pequeno);
}

.item-resultado-teor {
  margin-bottom: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--cor-texto-secundario);
  white-space: pre-wrap;
}

/* No modal o teor é o conteúdo principal, não um resumo espremido no card —
   sobe pra escala de corpo (`body-md` do v3) em vez dos 13px da lista. */
.modal-body .item-resultado-teor {
  font-size: 14px;
  line-height: 22px;
  color: var(--cor-texto);
}

/* Gatilho do modal de teor. <button> nativo (regra do CLAUDE.md: gatilho de
   JS que não navega é botão, não <a href="#">) com aparência de link — daí
   o reset de background/border, que o `btn btn-link` do Bootstrap traria
   junto com um padding grande demais pra um link dentro do card. */
.item-resultado-teor-abrir {
  margin-top: var(--esp-pequeno);
  padding: 0;
  background: none;
  border: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--cor-acento);
  cursor: pointer;
  border-radius: var(--raio-pequeno);
}

.item-resultado-teor-abrir:hover {
  color: var(--cor-acento-hover);
  text-decoration: underline;
}

.item-resultado-teor-abrir:focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: 2px;
}

.lista-paginacao {
  display: flex;
  justify-content: center;
  margin-top: var(--esp-secao);
}

/* Abaixo de 576px a barra de ação vira duas faixas empilhadas e os botões
   ocupam a largura toda — dois botões lado a lado nessa largura ficam com
   texto quebrado no meio. */
@media (max-width: 575.98px) {
  .barra-acoes-resultado {
    align-items: stretch;
  }

  .barra-acoes-botoes {
    width: 100%;
  }

  .barra-acoes-botoes .btn {
    flex: 1 1 auto;
  }
}

/* ==========================================================================
   Painel (dashboard pós-login, /painel) — 2026-08-25.

   `.lista-resultado`/`.item-resultado` (acima) são reusados sem alteração
   pros widgets "Alertas de prazo"/"Intimações novas" — identidade + meta em
   linha + corpo já resolvido, só sem `.item-resultado-check` (nada aqui é
   selecionável em lote). Só dois componentes são genuinamente novos, sem
   equivalente no vocabulário existente: o cartão de indicador (número grande
   como link) e a tira de 7 dias da agenda. Primeira tela a usar — candidata
   a arquétipo "Dashboard" em composicao-de-pagina.md se um segundo painel
   parecido aparecer.
   ========================================================================== */

.painel-secao {
  margin-bottom: var(--esp-secao);
}

.painel-secao-cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--esp-padrao);
  margin-bottom: var(--esp-pequeno);
}

.painel-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--esp-padrao);
  margin-bottom: var(--esp-secao);
}

.painel-kpi {
  display: flex;
  flex-direction: column;
  gap: var(--esp-micro);
  padding: var(--esp-padrao);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-grande);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--bs-box-shadow);
  transition: border-color .15s ease;
}

.painel-kpi:hover {
  border-color: var(--cor-acento);
  color: inherit;
}

.painel-kpi:focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: 2px;
}

.painel-kpi-rotulo {
  color: var(--cor-texto-secundario);
}

.painel-kpi-numero {
  color: var(--cor-texto);
}

/* Alerta visual só quando a contagem pesa (prazo vencido/vencendo hoje) —
   quem monta o contexto decide via esta classe modificadora, o CSS só
   aplica a cor (mesma régua de contraste 4.5:1 do CLAUDE.md, `--cor-erro`
   já validado contra `--cor-superficie` no resto do app). */
.painel-kpi--alerta .painel-kpi-numero {
  color: var(--cor-erro);
}

/* Fase 21/Epic 3 — campo de intervalo livre da barra de filtros do Painel Gerencial
   (painel_gestao.html) só aparece quando o preset de período é "Intervalo livre". Reativo via
   `:has()`, sem JS — mesmo espírito do checkbox->lista já usado no arquétipo de busca+resultado
   (composicao-de-pagina.md §3.1, "Seleção via :has(:checked)"). */
#painel-gestao-filtros .painel-gestao-periodo-livre {
  display: none;
}

#painel-gestao-filtros:has(#painel-periodo option[value="livre"]:checked) .painel-gestao-periodo-livre {
  display: block;
}

.painel-agenda {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--esp-compacto);
}

@media (max-width: 767.98px) {
  .painel-agenda {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
}

.painel-agenda-dia {
  padding: var(--esp-compacto);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-grande);
  min-height: 96px;
}

.painel-agenda-dia--hoje {
  border-color: var(--cor-acento);
  box-shadow: 0 0 0 3px var(--cor-acento-suave);
}

.painel-agenda-dia-rotulo {
  display: block;
  color: var(--cor-texto-secundario);
  margin-bottom: var(--esp-pequeno);
}

.painel-agenda-itens {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-micro);
}

.painel-agenda-itens li {
  font-size: 13px;
  line-height: 18px;
}

.painel-agenda-itens a {
  color: var(--cor-texto);
}

.painel-alerta-icone {
  color: var(--cor-erro);
  margin-top: 2px;
}

/* ==========================================================================
   Agendamento de job (/admin/plataforma/jobs)

   O formulário mostra só os campos da frequência escolhida ("Todo dia" pede
   horário; "Toda semana" pede horário e dia da semana; "Avançado" pede a
   expressão cron). Isso é apresentação pura e o estado já está no próprio
   <select> — resolvido com :has(), sem JavaScript, na linha do
   .item-resultado:has(:checked) que a busca do DJEN já usa.

   Dentro de @supports: onde :has() não existir, todos os campos aparecem —
   feio, porém utilizável. O contrário (esconder sem conseguir revelar)
   deixaria o formulário impossível de preencher.
   ========================================================================== */
@supports selector(:has(*)) {
  .agendamento-campos [data-para] {
    display: none;
  }

  .agendamento-campos:has(select[name="frequencia"] option[value="minutos"]:checked) [data-para~="minutos"],
  .agendamento-campos:has(select[name="frequencia"] option[value="horaria"]:checked) [data-para~="horaria"],
  .agendamento-campos:has(select[name="frequencia"] option[value="diaria"]:checked) [data-para~="diaria"],
  .agendamento-campos:has(select[name="frequencia"] option[value="semanal"]:checked) [data-para~="semanal"],
  .agendamento-campos:has(select[name="frequencia"] option[value="mensal"]:checked) [data-para~="mensal"],
  .agendamento-campos:has(select[name="frequencia"] option[value="avancada"]:checked) [data-para~="avancada"] {
    display: block;
  }
}

/* Gatilho do <details> de cada job — <summary> de verdade (foco por Tab e
   ativação por Enter/Espaço vêm do navegador), só com o cursor de mão que
   deixa claro que a linha é clicável. */
.agendamento-gatilho {
  cursor: pointer;
  font-weight: 600;
}

/* ==========================================================================
   Calculadora avulsa de prazo (/contencioso/prazos/calculadora, Fase 14,
   Epic 7)

   Mesmo raciocínio do bloco "Agendamento de job" acima: o par de radio
   "Prazo contado" / "Data certa" decide qual conjunto de campos aparece —
   resolvido com :has(), sem JavaScript. Diferença de desenho: em vez de
   "esconder tudo, revelar um", aqui só o conjunto *não* aplicável ao tipo
   marcado leva display:none — o conjunto aplicável nunca precisa de um
   display explícito de volta (evita reescrever o `display: flex` que as
   `.row` do Bootstrap já trazem). Sem suporte a :has(), os dois conjuntos
   ficam visíveis ao mesmo tempo — feio, porém utilizável, mesmo trade-off
   já aceito no bloco de agendamento de job.
   ========================================================================== */
@supports selector(:has(*)) {
  .prazo-calculadora-form:has(input[name="tipo"][value="data_certa"]:checked) .prazo-calc-campo-contado {
    display: none;
  }

  .prazo-calculadora-form:not(:has(input[name="tipo"][value="data_certa"]:checked)) .prazo-calc-campo-data-certa {
    display: none;
  }
}

/* ==========================================================================
   Tabelas de dados — cromo do DataTables (2.x, vendorizado) no tema do JI

   Decisão do usuário, 2026-08-25: todas as tabelas do produto passam por uma
   biblioteca externa (ver DECISOES.md e app/static/tabelas.js). A biblioteca
   entra pelo tema oficial de Bootstrap 5, então a *tabela* em si continua
   sendo o `.table` já tematizado mais acima neste arquivo — cabeçalho branco,
   label-caps, zebra, hover. O que este bloco veste é só o cromo que a
   biblioteca injeta em volta: seletor de "por página", campo de busca,
   contagem e paginação.

   Regra que orienta o bloco: o cromo é informação de nível 6 (controle de
   navegação, não conteúdo). Ele emoldura a tabela, não compete com ela.
   ========================================================================== */
.dt-container {
  --dt-cromo-cor: var(--cor-texto-fraco);
  /* Respiro depois da tabela: no modo "simples" não há faixa de rodapé pra
     afastar a tabela do que vier a seguir (o formulário de "adicionar" das
     telas de configuração encostava na última linha). */
  margin-bottom: var(--esp-padrao);
}

/* As duas faixas de cromo (acima e abaixo da tabela) respiram no mesmo ritmo
   de "entre grupos" do resto das telas, sem colar no cabeçalho da página nem
   na primeira linha de dado. */
.dt-container .dt-layout-row {
  align-items: center;
  gap: var(--esp-compacto);
  margin: 0;
}

.dt-container .dt-layout-row:first-child {
  margin-bottom: var(--esp-compacto);
}

.dt-container .dt-layout-row:last-child {
  margin-top: var(--esp-compacto);
}

/* Rolagem horizontal fica na faixa da tabela, não no container inteiro: sem
   isso o campo de busca e a paginação rolariam lateralmente junto com as
   colunas em tela estreita, saindo da vista. Substitui o `.table-responsive`
   que envolvia a tabela antes da migração — por isso a tabela migrada não
   precisa mais daquele wrapper. */
.dt-container .dt-layout-table {
  overflow-x: auto;
  margin: 0;
}

/* Menu "⋮" de ação por linha recortado pela rolagem horizontal acima — mesma
   armadilha (e mesma saída) de `.table-responsive--dropdown-aberto`: libera o
   recorte só enquanto o menu daquela linha está aberto, alternado por
   app/static/tabelas.js nos eventos show/hidden do dropdown do Bootstrap. */
.dt-container .dt-layout-table--dropdown-aberto {
  overflow: visible;
}

/* Contagem ("1–25 de 147 processos") e "por página": texto auxiliar, mesmo
   tom dos metadados do resto do produto. */
.dt-container .dt-info,
.dt-container .dt-length label {
  color: var(--dt-cromo-cor);
  font-size: 13px;
  margin: 0;
}

.dt-container .dt-length {
  display: flex;
  align-items: center;
  gap: var(--esp-pequeno);
}

.dt-container .dt-length select.form-select {
  width: auto;
  min-width: 4.5rem;
}

.dt-container .dt-search {
  display: flex;
  align-items: center;
  gap: var(--esp-pequeno);
  justify-content: flex-end;
}

.dt-container .dt-search input.form-control {
  width: auto;
  min-width: 16rem;
}

/* Cabeçalho ordenável.

   A biblioteca ancora a seta no canto direito da célula (`position: absolute;
   right: 12px`) e reserva 30px de padding pra ela. Numa coluna larga — a de
   assunto, a de data — isso joga a seta longe do título, e o olho deixa de
   ligar uma coisa à outra: parece um símbolo solto na divisa entre colunas.
   Aqui ela volta a ser um sufixo do próprio título.

   `position: relative` (em vez de `static`) é obrigatório: as duas pontas da
   seta são `::before`/`::after` absolutos, então este <span> precisa continuar
   sendo o bloco de referência deles — senão os dois pulariam pro canto do
   <th>, que é o elemento posicionado logo acima. */
.dt-container table.table thead > tr > th.dt-orderable-asc,
.dt-container table.table thead > tr > th.dt-orderable-desc,
.dt-container table.table thead > tr > th.dt-ordering-asc,
.dt-container table.table thead > tr > th.dt-ordering-desc {
  cursor: pointer;
  padding-right: var(--esp-padrao);
}

.dt-container table.table thead > tr > th span.dt-column-order {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 1em;
  right: auto;
  top: auto;
  bottom: auto;
  margin-left: var(--esp-micro);
  vertical-align: middle;
}

/* O realce de hover da biblioteca é um `outline` cinza em volta da célula —
   igualzinho a um anel de foco, o que confunde quem navega por teclado (ver
   CLAUDE.md § Acessibilidade: foco tem que ser distinguível). Vira fundo. */
.dt-container table.table thead > tr > th.dt-orderable-asc:hover,
.dt-container table.table thead > tr > th.dt-orderable-desc:hover {
  outline: none;
  background-color: var(--cor-borda-suave);
}

.dt-container table.table thead th .dt-column-order::before,
.dt-container table.table thead th .dt-column-order::after {
  opacity: .35;
  color: var(--cor-texto-fraco);
}

.dt-container table.table thead th:hover .dt-column-order::before,
.dt-container table.table thead th:hover .dt-column-order::after {
  opacity: .7;
}

.dt-container table.table thead th.dt-ordering-asc .dt-column-order::before,
.dt-container table.table thead th.dt-ordering-desc .dt-column-order::after {
  opacity: 1;
  color: var(--cor-acento);
}

.dt-container table.table thead th.dt-ordering-asc,
.dt-container table.table thead th.dt-ordering-desc {
  color: var(--cor-acento);
}

/* Foco visível no cabeçalho ordenável: a biblioteca torna o <th> operável por
   teclado, então ele precisa do mesmo indicador de foco de qualquer controle
   do produto (CLAUDE.md § Acessibilidade — nunca outline suprimido sem
   substituto). */
.dt-container table.table thead th:focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: -2px;
  border-radius: var(--raio-pequeno);
}

/* Paginação: o Bootstrap já dá a forma; aqui só entram as cores do tema e uma
   densidade menor, condizente com a barra de controle. */
.dt-container .dt-paging .pagination {
  margin: 0;
  gap: var(--esp-micro);
}

.dt-container .dt-paging .page-link {
  border-radius: var(--raio-pequeno);
  border-color: transparent;
  color: var(--cor-texto-secundario);
  padding: var(--esp-micro) var(--esp-compacto);
}

.dt-container .dt-paging .page-link:hover {
  background-color: var(--cor-borda-suave);
  color: var(--cor-texto);
}

.dt-container .dt-paging .page-item.active .page-link {
  background-color: var(--cor-acento-suave);
  border-color: transparent;
  color: var(--cor-acento);
  font-weight: 600;
}

.dt-container .dt-paging .page-item.disabled .page-link {
  color: var(--cor-texto-fraco);
  background-color: transparent;
  opacity: .55;
}

/* Cromo que não tem função no volume corrente da tabela (ver `ajustarCromoAoVolume`
   em tabelas.js): paginação e "por página" numa tabela que cabe numa página só,
   busca numa tabela de poucas linhas. Escondido por CSS em vez de não ser
   renderizado porque o estado é reavaliado a cada troca por HTMX, e alternar
   classe é mais barato (e mais reversível) que remontar o cromo. */
.dt-container--sem-paginacao .dt-paging,
.dt-container--sem-paginacao .dt-length,
.dt-container--sem-busca .dt-search {
  display: none;
}

/* "Nenhum resultado para essa busca." — a biblioteca escreve isso numa linha
   da própria tabela, então o tratamento não pode ser o `.estado-vazio` de
   página cheia; fica um vazio contido, mas ainda orientado por texto, não uma
   célula em branco. */
.dt-container table.table td.dt-empty {
  padding: var(--esp-grande) var(--esp-padrao);
  text-align: center;
  color: var(--cor-texto-fraco);
}

/* Em telas estreitas o cromo empilha: busca ocupando a linha inteira embaixo
   do seletor de "por página", paginação centralizada. Sem isso os dois
   controles de cima se espremem lado a lado no celular. */
@media (max-width: 575.98px) {
  .dt-container .dt-search,
  .dt-container .dt-paging {
    justify-content: flex-start;
  }

  .dt-container .dt-search input.form-control {
    min-width: 0;
    width: 100%;
  }
}

/* ==========================================================================
   Agenda unificada (/agenda, 2026-08-25)

   Fecha o item "Calendário unificado de prazos" do Pós-MVP da Fase 14: a
   mesma grade mensal de .tabela-calendario (acima) desenhando duas fontes
   de compromisso — Tarefa.prazo (Fase 11) e Prazo.data_termino (Fase 14).
   O item mesclado é o único componente genuinamente novo aqui (a Zona 4 do
   arquétipo de dashboard mescla fontes numa tira de 7 dias, mas sem
   distinguir tipo/estado por item); ver DECISOES.md, 2026-08-25.
   ========================================================================== */
.agenda-comando {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-compacto);
  margin-bottom: var(--esp-compacto);
}

.agenda-mes-nav {
  display: flex;
  align-items: center;
  gap: var(--esp-compacto);
}

/* Seta de mês é ícone isolado — alvo de toque mínimo de 44px (CLAUDE.md
   § Acessibilidade), diferente do .btn-sm denso de barra de ferramentas. */
.agenda-mes-seta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.agenda-mes-rotulo {
  min-width: 12ch;
  text-align: center;
}

.agenda-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-pequeno);
}

.agenda-resumo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-padrao);
  margin-bottom: var(--esp-pequeno);
}

.agenda-legenda-item {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-micro);
}

.agenda-legenda-item .material-symbols-outlined {
  font-size: 16px;
}

.agenda-legenda-item--prazo {
  color: var(--cor-erro);
}

/* Item da célula: ícone (tipo) + título truncado. O tipo também é anunciado
   em texto por leitor de tela (.visually-hidden no template) — o ícone
   sozinho nunca é o único portador da informação. */
.calendario-item a {
  display: flex;
  align-items: center;
  gap: var(--esp-micro);
  color: var(--cor-texto);
  font-size: 13px;
  line-height: 18px;
  min-width: 0;
}

.calendario-item-icone {
  font-size: 14px;
  flex-shrink: 0;
  color: var(--cor-texto-fraco);
}

.calendario-item-titulo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendario-item--prazo .calendario-item-icone {
  color: var(--cor-erro);
}

/* Audiência e prazo de parecer (2026-08-26) — mesma `tarefa` de `.calendario-item--tarefa`, só com
   ícone/cor próprios pros quatro rótulos que o usuário pensa na agenda (ver docstring de
   app/plataforma/agenda.py). Reaproveita --cor-acento (mesma cor da etiqueta "Audiência" em
   tarefas.py) e --cor-info (já usado como cor de ícone isolado em `.badge.text-bg-info`) — nenhum
   token novo. */
.calendario-item--audiencia .calendario-item-icone {
  color: var(--cor-acento);
}

.calendario-item--prazo-parecer .calendario-item-icone {
  color: var(--cor-info);
}

.calendario-item--atrasado a {
  color: var(--cor-erro);
  font-weight: 600;
}

.calendario-item--concluido a {
  color: var(--cor-texto-fraco);
  text-decoration: line-through;
}

.calendario-item--concluido .calendario-item-icone {
  color: var(--cor-sucesso);
}

/* ---------------------------------------------------------------------------
   Fase 16, Epic 3 — painel PNCP somente leitura (`_pncp_blocos.html`), usado na
   seção "Contratações PNCP" da tela do processo e no painel lateral do editor
   de parecer. Genérico o bastante para os dois enquadramentos: nenhuma largura
   fixa, tudo em grid que colapsa — o painel do editor é bem mais estreito que a
   coluna da tela do processo.
   --------------------------------------------------------------------------- */
.pncp-vinculo-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--esp-compacto);
  flex-wrap: wrap;
  margin-bottom: var(--esp-pequeno);
}

/* Cada linha rótulo/valor/copiar. `auto 1fr auto` mantém o rótulo do tamanho do
   texto e o valor ocupando o resto; no painel estreito do editor o `minmax(0,
   1fr)` é o que impede um CNPJ ou uma razão social longa de estourar a coluna. */
.pncp-campo {
  display: grid;
  grid-template-columns: minmax(9rem, auto) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--esp-pequeno);
  padding: var(--esp-micro) 0;
  border-bottom: 1px solid var(--cor-borda-suave);
}

.pncp-campo:last-child {
  border-bottom: 0;
}

.pncp-campo-rotulo {
  color: var(--cor-texto-secundario);
}

.pncp-campo-valor {
  overflow-wrap: anywhere;
}

/* O botão de copiar só ganha peso visual quando a linha está sob o ponteiro ou
   quando ele próprio está com foco — senão uma coluna inteira de botões compete
   com o dado, que é o que o usuário veio ler. Nunca `display: none`/
   `visibility: hidden`: precisa continuar alcançável por Tab (e é o
   `:focus-within` que garante isso ao chegar nele pelo teclado). */
.pncp-campo-copiar {
  opacity: 0.35;
  transition: opacity 120ms ease-in-out;
}

.pncp-campo:hover .pncp-campo-copiar,
.pncp-campo:focus-within .pncp-campo-copiar {
  opacity: 1;
}

@media (max-width: 992px) {
  /* Painel estreito/celular: rótulo acima do valor, botão na terceira linha —
     três colunas num container de ~320px espremeriam o valor a nada. */
  .pncp-campo {
    grid-template-columns: minmax(0, 1fr);
  }

  .pncp-campo-copiar {
    opacity: 1;
    justify-self: start;
  }
}

.pncp-texto-longo {
  margin-top: var(--esp-compacto);
}

.pncp-texto-longo .pncp-campo-rotulo {
  display: block;
  margin-bottom: var(--esp-micro);
}

/* Bloco recolhível (Contratação / Contratos e aditivos / Itens / Arquivos). */
.pncp-bloco {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  margin-top: var(--esp-compacto);
}

.pncp-bloco-gatilho {
  display: flex;
  align-items: baseline;
  gap: var(--esp-pequeno);
  flex-wrap: wrap;
  padding: var(--esp-pequeno) var(--esp-compacto);
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--raio);
}

.pncp-bloco[open] > .pncp-bloco-gatilho {
  border-bottom: 1px solid var(--cor-borda-suave);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

/* `<summary>` recebe foco por Tab e o outline nativo some em alguns navegadores
   quando a seta de disclosure é recolorida — devolve explicitamente (CLAUDE.md
   § Acessibilidade: nunca remover foco sem substituto). */
.pncp-bloco-gatilho:focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: 2px;
}

.pncp-bloco-corpo {
  padding: var(--esp-compacto);
}

.pncp-subbloco + .pncp-subbloco {
  margin-top: var(--esp-padrao);
  padding-top: var(--esp-padrao);
  border-top: 1px solid var(--cor-borda-suave);
}

/* Termo aditivo e resultado de item são "filhos" de um contrato/item: a barra à
   esquerda diz isso sem precisar de mais um nível de card aninhado. */
.pncp-termo,
.pncp-resultado {
  margin-top: var(--esp-compacto);
  padding-left: var(--esp-compacto);
  border-left: 3px solid var(--cor-borda);
}

.pncp-arquivos li {
  display: flex;
  align-items: center;
  gap: var(--esp-pequeno);
  flex-wrap: wrap;
  padding: var(--esp-micro) 0;
}

.pncp-arquivos .material-symbols-outlined {
  color: var(--cor-texto-fraco);
}

/* `.estado-vazio` colore o `<h2>`; aqui o título do vazio é `<h4>` para não
   pular nível de heading dentro do card da seção (h1 -> h3 -> h4). */
.estado-vazio .txt-title-sm {
  color: var(--cor-texto);
  margin-bottom: var(--esp-micro);
}

/* ==========================================================================
   Campos ricos — Flatpickr (data) + Tom Select (combobox), vendorizados
   (Fase 19, Epic 1 — ver app/static/campos.js e DECISOES.md)

   As duas bibliotecas entram pelo próprio tema Bootstrap 5 (Tom Select) ou
   sem tema nenhum (Flatpickr, que só tem CSS "cru"). O que este bloco veste
   é o acento indigo do JI por cima — mesmo espírito do bloco "Tabelas de
   dados" logo acima: veste o cromo da biblioteca, não redesenha o
   componente. O `prefers-reduced-motion` das duas já é coberto pela regra
   global no topo do arquivo (não precisa repetir aqui).
   ========================================================================== */

/* Flatpickr anexa o calendário ao <body>, fora da cascata normal de
   .form-control/.card — precisa do próprio raio/borda/sombra. */
.flatpickr-calendar {
  border-radius: var(--raio);
  border: 1px solid var(--cor-borda);
  box-shadow: var(--sombra-md);
  font-family: inherit;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--cor-acento);
  border-color: var(--cor-acento);
}

.flatpickr-day.inRange {
  background: var(--cor-acento-suave);
  border-color: var(--cor-acento-suave);
  box-shadow: -5px 0 0 var(--cor-acento-suave), 5px 0 0 var(--cor-acento-suave);
}

.flatpickr-day.today {
  border-color: var(--cor-acento);
}

.flatpickr-day:hover {
  background: var(--cor-borda-suave);
}

/* Alvo de toque ≥44×44px (CLAUDE.md § Acessibilidade) — Fase 19/Epic 7. A biblioteca desenha a
   célula a 39×39px; a largura já sai ~44px por ser percentual de um `.dayContainer` de largura
   fixa (307.875px ÷ 7 ≈ 43,98px), então só a altura precisava do ajuste. Sem tocar no
   dimensionamento (via JS) da biblioteca. */
.flatpickr-day {
  height: 44px;
  line-height: 44px;
}

/* Foco visível em navegação por teclado dentro do grid de dias — a
   biblioteca não traz um por padrão (CLAUDE.md § Acessibilidade). */
.flatpickr-day:focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: 1px;
}

/* Dia não computável (Fase 14, pintado pelo `data-nao-uteis` de campos.js —
   Fase 19/Epic 5). A cor codifica o *efeito* do dia, não o tipo cadastrado:
   são seis tipos vindos da rota e seis cores seriam seis contrastes para
   conferir e nenhuma delas memorizável. O tipo exato continua legível — em
   `title` e `aria-label`, com a descrição real do evento ("Recesso forense"),
   que é a única forma que serve também para quem não enxerga a cor. */

/* Fim de semana: neutro. É o dia não computável mais comum e o único que o
   usuário já sabia de antemão — pintar de vermelho seria alarme falso em dois
   dias de cada sete. */
.flatpickr-day.campo-data-dia-nao-util--fim_de_semana {
  background: var(--cor-borda-suave);
  color: var(--cor-texto-secundario);
}

/* Sem expediente forense (feriado, recesso, ponto facultativo, suspensão de
   expediente): âmbar, o mesmo par de tokens que o produto já usa para "atenção,
   olhe isto" (`--cor-alerta` sobre `--cor-alerta-suave`). */
.flatpickr-day.campo-data-dia-nao-util--feriado,
.flatpickr-day.campo-data-dia-nao-util--recesso,
.flatpickr-day.campo-data-dia-nao-util--ponto_facultativo,
.flatpickr-day.campo-data-dia-nao-util--suspensao_expediente {
  background: var(--cor-alerta-suave);
  color: var(--cor-alerta);
  font-weight: 600;
}

/* Suspensão de prazo (art. 220 CPC) ganha cor própria porque o efeito é outro:
   não é "não há expediente", é "o prazo não corre" — inclusive em dias
   corridos, onde o resto desta lista não tem efeito nenhum. */
.flatpickr-day.campo-data-dia-nao-util--suspensao_prazo {
  background: var(--cor-info-suave);
  color: var(--cor-info);
  font-weight: 600;
}

/* Só onde o campo declarou `data-nao-uteis-bloqueia` (início da contagem) —
   campo que registra um fato (publicação, data do evento) pinta mas não trava,
   senão calendário incompleto impediria cadastrar o que de fato aconteceu. */
.flatpickr-day.campo-data-dia-bloqueado {
  text-decoration: line-through;
  cursor: not-allowed;
}

/* Campo de data dentro de um `.dropdown-menu` (menu de contexto de /tarefas,
   "Alterar prazo ▸ Data personalizada"): ali o calendário é desenhado dentro
   do próprio campo (`static: true`, ver campos.js), o que faz o Flatpickr
   envolver o <input> num `.flatpickr-wrapper` `inline-block` — dentro do
   `.d-flex` do formulário isso encolheria o campo até o tamanho do texto.
   Regra escopada ao dropdown: fora dele não existe wrapper nenhum. */
.dropdown-menu .flatpickr-wrapper {
  flex: 1 1 auto;
  min-width: 0;
}

.dropdown-menu .flatpickr-wrapper .form-control {
  width: 100%;
}

/* O menu já encosta na borda direita da tela (ver `.dropdown-submenu`, acima);
   um calendário de ~310px alinhado à esquerda do campo sairia da viewport. */
.dropdown-menu .flatpickr-calendar.static {
  right: 0;
  left: auto;
}

/* --------------------------------------------------------------------------
   Janela de contagem (Fase 19, Epic 5 — `_prazo_janela_contagem.html`)

   Componente novo, não coberto pelo Bootstrap: uma faixa de dias em que cada
   dia diz se entrou na conta do prazo. Não é `.badge` (não rotula nada), não é
   `.progress` (o eixo não é proporção, é calendário) e não é `.table` (a
   quebra de linha é do fluxo, não de colunas). Registrado em DECISOES.md como
   exige a skill `ui-design-ji`. Só apresentação: `aria-hidden` no HTML, porque
   a frase de vencimento e o `<details>` de dias não contados, logo acima e
   abaixo, já dizem tudo por extenso.
   -------------------------------------------------------------------------- */

.prazo-janela {
  margin-top: var(--esp-compacto);
  margin-bottom: var(--esp-compacto);
}

.prazo-janela-faixa {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--esp-micro);
}

.prazo-janela-mes {
  align-self: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--cor-texto-fraco);
  padding: 0 var(--esp-micro);
}

.prazo-janela-dia {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: var(--esp-micro) 2px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  background: var(--cor-acento-suave);
  color: var(--cor-acento);
  line-height: 1.1;
}

.prazo-janela-semana {
  font-size: 9px;
  text-transform: uppercase;
  opacity: .75;
}

.prazo-janela-numero {
  font-size: 12px;
  font-weight: 600;
}

.prazo-janela-dia--fora {
  background: var(--cor-borda-suave);
  color: var(--cor-texto-secundario);
  border-color: var(--cor-borda-suave);
}

.prazo-janela-dia--termino {
  background: var(--cor-acento);
  border-color: var(--cor-acento);
  color: #fff;
}

.prazo-janela-legenda {
  margin-top: var(--esp-pequeno);
  display: flex;
  align-items: center;
  gap: var(--esp-micro);
  flex-wrap: wrap;
}

.prazo-janela-chave {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-acento-suave);
}

.prazo-janela-chave--fora {
  background: var(--cor-borda-suave);
  border-color: var(--cor-borda-suave);
}

.prazo-janela-chave--termino {
  background: var(--cor-acento);
  border-color: var(--cor-acento);
}

/* Legenda separa os pares "amostra + palavra" sem depender de bullet: a chave
   seguinte já começa um par novo, então a folga vai antes dela. */
.prazo-janela-legenda .prazo-janela-chave + .prazo-janela-chave,
.prazo-janela-legenda .prazo-janela-chave:not(:first-child) {
  margin-left: var(--esp-pequeno);
}

/* Combobox múltiplo no filtro de tribunal da listagem de processos judiciais (Fase 19, Epic 4).
   O `<select>` nativo tinha largura própria; o Tom Select cresce e encolhe conforme as fichas
   escolhidas, e num `.d-flex` de filtros isso faz a barra inteira dançar a cada escolha. Piso e
   teto seguram o campo numa faixa previsível, com as fichas quebrando linha dentro dele. */
.filtro-tribunal-processo .ts-wrapper {
  min-width: 12rem;
  max-width: 22rem;
}

/* Ficha de etiqueta dentro do combobox múltiplo (Fase 19, Epic 6). A cor vem da própria etiqueta,
   pelo `data-classe` que a <option> carrega — nenhuma cor nova, e nenhum valor repetido: consome o
   par `--etiqueta-fundo`/`--etiqueta-texto` declarado junto de `.tarefa-etiqueta--*`. A regra
   precisa desta especificidade porque a biblioteca pinta `.ts-control > div` por conta própria. */
.ts-wrapper.multi .ts-control > div[class*="tarefa-etiqueta--"] {
  background: var(--etiqueta-fundo);
  color: var(--etiqueta-texto);
}

/* Linha do dropdown não é ficha: fundo colorido de ponta a ponta ali competiria com o realce de
   item ativo da própria biblioteca. Só o texto vai na cor da etiqueta. */
.ts-dropdown [class*="tarefa-etiqueta--"] {
  background: none;
  color: var(--etiqueta-texto);
}

/* Tom Select já lê --bs-border-color/--bs-border-radius (remapeados pro JI
   no :root deste arquivo), então herda raio e borda de graça — só o azul
   padrão do Bootstrap precisa virar o acento indigo do projeto. */
.ts-wrapper.focus .ts-control {
  border-color: var(--cor-acento);
  box-shadow: 0 0 0 .25rem rgba(var(--cor-acento-rgb), .25);
}

.ts-wrapper.multi .ts-control > div.active {
  background: var(--cor-acento);
  color: #fff;
}

.ts-dropdown .active {
  background-color: var(--cor-acento-suave);
}

/* Texto longo extraído de um documento, exibido para leitura (tela do item do Acervo Histórico,
   Fase 22/Epic 5). Não é `.log-corpo`: aquele é monoespaçado, para JSON e cabeçalho de requisição;
   aqui o conteúdo é um parecer, prosa que alguém vai LER — fonte de corpo, entrelinha de leitura e
   `pre-wrap` para preservar a quebra de parágrafo que a extração trouxe. Rolagem própria porque o
   teto de texto por item é 1 MB (D4): sem ela, um documento longo empurraria os cartões de
   metadados da coluna ao lado para fora da primeira tela. */
.texto-documento {
  max-height: 60vh;
  overflow: auto;
  padding: var(--esp-compacto);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-superficie);
  font-size: 14px;
  line-height: 22px;
  white-space: pre-wrap;
  word-break: break-word;
}