/*
 * Design system compartilhado por TODAS as telas pós-login (Triagem,
 * Petições Pendentes, e a SPA Angular em /gerador — Gerar documentos e
 * Cadastros). Fonte única — cada página só faz
 * <link rel="stylesheet" href="/assets/design-system.css">, em vez de
 * duplicar isto num <style> ou num styles.css próprio (foi exatamente essa
 * duplicação que já causou nav/CSS ficarem dessincronizados entre páginas).
 * Também é a única folha de estilo global da SPA Angular (linkada uma vez
 * em index.html) — login, criar-conta, aceitar-convite, landing e manager
 * têm CSS próprio (layout sem topnav), mas todos herdam os tokens daqui em
 * vez de redeclarar cor/fonte/sombra.
 */

/* Paleta de marca Tramitex — LOCAL ÚNICO para landing pública e portal
   /manager (backlog: "um local para controlar todas as cores do landing e
   do manager, no máximo 4"). São só estas 4 cores (Design System & Brand
   Identity Guide v1.0, 02/09): Azul Profundo (dominante/textos/headers/
   sidebar), Azul Elétrico (primária/CTAs/links/destaques), Ciano Neón
   (acessória/ícones tech/active states), Cinza Neutro (fundo do sistema/
   cards/off-white). Pra mudar a identidade visual do landing/manager,
   mexe SÓ nestas 4 linhas — todo o resto do arquivo (--paper/--ink/
   --primary/--accent/--nav-bg/--list-accent abaixo, e o CSS de
   landing.css/manager.css/manager-login.css) referencia uma destas 4, não
   hex solto. Não conta aqui: --critical/--warning/--ok (verde/amarelo/
   vermelho) são cores SEMÂNTICAS de status, não de marca — ficam de fora
   de propósito. Também não conta a personalização por tenant das telas
   pós-login (corPrimaria/corSecundaria/corTerciaria, ver services/tema.ts)
   — isso é por escritório, enquanto landing/manager são páginas globais,
   sem tenant, e por isso não podem variar. */
:root {
  --brand-azul-profundo: #0b192c;
  --brand-azul-eletrico: #0066ff;
  --brand-ciano-neon: #00d2ff;
  --brand-cinza-neutro: #f4f6f8;

  --paper: var(--brand-cinza-neutro);
  --paper-raised: #ffffff;
  --ink: var(--brand-azul-profundo);
  --ink-soft: #4c5b71;
  /* Era #8695a8 (~3:1 de contraste sobre --paper/--paper-raised, abaixo do
     mínimo de 4.5:1 pra texto normal) — ficava "apagado" nos cards, onde
     essa cor é a mais usada (meta-informação: datas, legendas, textos
     secundários). #5f6f85 mantém o mesmo tom, mais escuro o suficiente pra
     dar ~4.7:1. */
  --ink-faint: #5f6f85;
  --line: #dbe2ea;
  /* Scrollbar do conteúdo principal (.page) — sobrescrita junto com a cor
     secundária do tenant (ver services/tema.ts), igual --nav-scroll já
     fazia só pra sidebar; padrão aqui replica o cinza neutro de sempre. */
  --content-scroll: var(--line);
  --content-scroll-hover: var(--ink-faint);
  --primary: #4fb5d7;
  --primary-soft: #e2edff;
  --primary-fg: #fff; /* texto sobre fundo --primary sólido — recalculado por tenant, ver services/tema.ts */
  --accent: var(--brand-ciano-neon);
  --accent-soft: #e0f9ff;
  --accent-fg: #fff; /* idem, sobre fundo --accent sólido */
  --critical: #b3261e;
  --critical-soft: #fbe4e1;
  --warning: #8a5609;
  --warning-soft: #f8ecd6;
  --ok: #146339;
  --ok-soft: #e2f3e9;
  --shadow: 0 1px 2px rgba(11, 25, 44, 0.06), 0 8px 24px -16px rgba(11, 25, 44, 0.3);
  --serif: 'Plus Jakarta Sans', Inter, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --sans: 'Plus Jakarta Sans', Inter, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

  /* Fundo dedicado da faixa/cartão onde a logo aparece (barra do landing,
     inputs do criar-conta) — sempre branco puro, nas duas temas, porque a
     logo (texto em Azul Profundo) só é legível sobre fundo branco/claro.
     Só ficava declarada no bloco de dark mode abaixo (faltando aqui) —
     sem isso, no tema claro a var não resolvia e o fundo virava
     transparente por trás da logo. */
  --paper-raised-nav: #ffffff;

  /* Zona da navegação (sidebar) — deliberadamente FORA do bloco de dark
     mode abaixo: a sidebar é sempre escura (chrome fixo da marca),
     independente do tema claro/escuro do sistema. --nav-bg é
     sobrescrevível por tenant (backlog item 28, "cor primária" — ver
     services/tema.ts); as demais são recalculadas junto por luminância
     quando isso acontece, nunca fixas em branco/preto por acaso. */
  --nav-bg: var(--brand-azul-profundo);
  --nav-fg: rgba(255, 255, 255, 0.7);
  --nav-fg-strong: rgba(255, 255, 255, 0.85);
  --nav-fg-faint: rgba(255, 255, 255, 0.55);
  --nav-hover-bg: rgba(255, 255, 255, 0.08);
  --nav-hover-bg-strong: rgba(255, 255, 255, 0.14);
  --nav-scroll: rgba(255, 255, 255, 0.18);
  --nav-scroll-hover: rgba(255, 255, 255, 0.3);
  --nav-border: rgba(255, 255, 255, 0.16);

  /* Acento de lista (.row/.card-list) — usa a mesma cor "primária" do
     tenant (a do menu/sidebar, --nav-bg), não a --primary de botões, pra
     ligar visualmente a marca do escritório às telas de listagem. Valor
     padrão aqui replica o Azul Profundo; sobrescrito junto com --nav-bg
     por services/tema.ts quando o tenant personaliza. */
  --list-accent: var(--brand-azul-profundo);
  --list-accent-soft: #eef1f5;

  /* Zona de "card" (.card/.card-list/.stat/.ferramenta-card) — backlog
     item 28, expandido em 03/09 ("cor primária aplicada também aos
     cards"): fundo CLARO por padrão (o oposto da nav, que é escura por
     padrão — ver design-system.css topo, "Cinza Neutro = fundo do
     sistema/cards"), sobrescrevível junto com --nav-bg (mesma cor) por
     services/tema.ts quando o tenant personaliza cor_primaria. Os 3 tons
     de texto (fg/fg-soft/fg-faint) replicam --ink/--ink-soft/--ink-faint
     por padrão — só divergem quando o tenant customiza (luminância
     recalculada, ou as cores de fonte explícitas, ver tema.ts). */
  --card-bg: var(--paper-raised);
  --card-fg: var(--ink);
  --card-fg-soft: var(--ink-soft);
  --card-fg-faint: var(--ink-faint);

  /* Cor de ícone/label do sidemenu e dos cards do dashboard (cor
     terciária, backlog item 28 expandido em 03/09) — padrão replica o
     que a nav/dashboard já mostravam antes desta cor existir (nav-fg
     "fraco" na sidebar, card-fg nos cards de ferramenta), só diverge
     quando o tenant personaliza cor_terciaria (ver tema.ts). */
  --menu-icon-fg: var(--nav-fg);
  --dash-icon-fg: var(--card-fg);
}

/* Dark mode (prefers-color-scheme) foi removido daqui de propósito: --paper
   e --ink são fixos no tema claro (marca não varia por tenant/tema, ver
   comentário da paleta acima), e um bloco que mudasse só ALGUMAS variáveis
   (--paper-raised, --ink-soft, --primary etc.) pro escuro sem mudar essas
   duas quebrava contraste em cascata — texto de --ink (fixo, quase preto)
   ficava ilegível sobre --paper-raised escurecido, e --ink-soft/--ink-faint
   clareados ficavam ilegíveis sobre --paper (fixo, claro). Bug visto na
   landing pública com o SO em modo escuro. Se um dark mode completo for
   desejado no futuro, --paper e --ink também precisam entrar no bloco. */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
}

html {
  scroll-behavior: smooth;
}

/* Ciano Neón (--accent) aplicado ao próprio uso nativo do navegador pra
   "acessório" — tingimento de checkbox/radio (accent-color é literalmente
   o nome da propriedade CSS pra isso). Sem custom-checkbox estilizado à
   mão em lugar nenhum do painel (ver backlog item 29 — token criado sem
   uso até então), então é seguro global: navegador ignora a propriedade
   sozinho onde `appearance` já foi customizado. */
input[type='checkbox'],
input[type='radio'] {
  accent-color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Casca das telas logadas: barra do logo ocupando a largura toda no topo,
   sidenav começando abaixo dela (só na largura do conteúdo, à esquerda) +
   conteúdo rolável à direita. Ver shell.html (Angular). */

/* height (não min-height) + overflow:hidden: trava a casca no tamanho da
   viewport de propósito, pra .sidenav e .page rolarem cada um por conta
   própria (ver .side-links/.page abaixo) em vez do documento inteiro rolar
   junto — menu com muitos itens não deve arrastar o conteúdo junto. */
.app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* Topbar no mesmo --nav-bg da sidebar (backlog item 28 — usuário pediu
   explicitamente "o background do nav E do sidemenu", os dois, não só um
   dos dois) — por padrão (sem tenant customizado) os dois ficam em Azul
   Profundo, unificando o "chrome" do painel; com tenant customizado, os
   dois seguem a cor primária junto. A logo (texto escuro, só funciona em
   fundo claro) ganha um "crachá" claro próprio (.logo-badge, ver
   shell.html) em vez de depender da cor do topbar — funciona igual em
   qualquer cor de fundo escolhida. */
.topbar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background:  var(--nav-bg);
  padding: 10px 26px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: #000 1px 1px 1px;
}

.topbar .logo-badge {
  display: inline-flex;
  align-items: center;
  /* Sempre branco, NUNCA var(--nav-bg) — é o "crachá" que existe
     justamente pra manter a logo legível em cima de qualquer cor de
     topbar (ver comentário acima de .topbar); virou var(--nav-bg) numa
     edição concorrente fora desta sessão, o que escondia a logo de novo
     sempre que o topbar customizado ficasse escuro — corrigido em 03/09. */
  /* background: #ffffff; */
  border-radius: 8px;
  padding: 6px 12px;
}

.topbar img {
  display: block;
  height: 70px;
  width: auto;
}

.topbar-acoes {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Botão hamburguer do drawer mobile (backlog responsividade, 14/09/2026) —
   só existe visualmente <=720px (ver media query mais abaixo); nas larguras
   maiores a sidenav já é visível (fixa ou em modo ícone), sem necessidade
   de abrir/fechar nada. */
.topbar-hamburguer {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0 4px 0 0;
  flex-shrink: 0;
  background: var(--nav-hover-bg);
  border: 1px solid var(--nav-border);
  border-radius: 8px;
  color: var(--nav-fg-strong);
}

.topbar-hamburguer svg {
  width: 18px;
  height: 18px;
}

.topbar-hamburguer:hover {
  background: var(--nav-hover-bg-strong);
}

.topbar-busca,
.topbar-novo-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--nav-hover-bg);
  border: 1px solid var(--nav-border);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--nav-fg);
}

.topbar-busca:hover,
.topbar-novo-toggle:hover {
  background: var(--nav-hover-bg-strong);
  color: var(--nav-fg-strong);
}

.topbar-busca kbd {
  font-family: var(--mono);
  font-size: 10.5px;
  background: var(--nav-hover-bg-strong);
  border: 1px solid var(--nav-border);
  border-radius: 4px;
  padding: 1px 5px;
}

.topbar-novo {
  position: relative;
}

.topbar-novo-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 21;
}

.topbar-novo-dropdown a {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
}

.topbar-novo-dropdown a:hover {
  background: var(--primary-soft);
  color: var(--primary);
}

.shell-body {
  display: flex;
  flex: 1;
  align-items: stretch;
  min-height: 0; /* sem isso, um filho com overflow-y:auto não recebe altura limitada */
  margin-top: 1xp;
}

/* <app-nav> é um elemento custom (display:inline por padrão) envolvendo o
   <aside class="sidenav">, que é quem de fato precisa ser item flex direto
   de .shell-body (width/flex-shrink) — display:contents remove a caixa do
   <app-nav> do layout, promovendo o <aside> pro lugar dele. */
app-nav {
  display: contents;
}

.page {
  flex: 1;
  min-width: 0;
  padding: clamp(10px, 4vw, 0px);
  padding-bottom: 40px; /* espaço pro footer fixo (ver `footer` acima) não tampar o fim do conteúdo */
  overflow-y: auto; /* rolagem própria, independente da sidenav */
  scrollbar-width: thin;
  scrollbar-color: var(--content-scroll) transparent;
}

.page::-webkit-scrollbar {
  width: 6px;
}

.page::-webkit-scrollbar-track {
  background: transparent;
}

.page::-webkit-scrollbar-thumb {
  background: var(--content-scroll);
  border-radius: 999px;
}

.page::-webkit-scrollbar-thumb:hover {
  background: var(--content-scroll-hover);
}

.sheet {
  max-width: 82vw;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0px;
}

/* Telas de listagem: só a lista rola (19/09/2026, pedido do usuário —
   "controles, filtros, labels do topo e gráficos não devem rolar, só a
   lista", vale pra toda tela de listagem). O componente marca o próprio
   host com `host: { class: 'tela-lista' }`; a partir daí a cadeia de
   altura vai da viewport até a lista: .page (sem rolagem própria) →
   .sheet (100% da altura) → host (flex column) → o que o template marcar:
     .lista-rolavel   — a lista (ou o <section class="block"> dela): ocupa só
                        o espaço que precisa e rola por dentro quando passa
                        do que sobra na tela.
   Tudo que fica acima/ao lado (cabeçalho, avisos, abas, filtros, resumo,
   gráficos, formulário aberto) simplesmente não participa da rolagem.
   Telas em duas colunas (lista + detalhe/gráficos) marcam ainda:
     .layout-rolavel  — o grid das duas colunas (ocupa o que sobra do host);
     .coluna-lista    — a coluna da lista (abas/filtro fixos + .lista-rolavel);
     .coluna-lateral  — a outra coluna, que rola sozinha se a janela for
                        baixa demais pro conteúdo dela.
   Em coluna única com contagem/legenda acima da lista, o <section> vira
   .coluna-lista (encolhe) e só o .card-list dentro leva .lista-rolavel.
   ATENÇÃO ao marcar uma tela nova: a .page fica sem rolagem, então qualquer
   região alta que não seja .lista-rolavel/.coluna-lateral seria cortada.
   Só em desktop: no celular os layouts empilham em coluna única e congelar
   cabeçalho + filtros + gráficos comeria a tela toda, então lá a página
   inteira continua rolando como antes. */
@media (min-width: 901px) {
  /* `.sheet .tela-lista …` (3 níveis) de propósito: o CSS encapsulado de cada
     componente ({classe}[_ngcontent]) tem 2 níveis e carrega depois do global,
     então empataria e ganharia (align-items:start, position:sticky etc.). */
  .page:has(.sheet > .tela-lista) {
    overflow-y: hidden;
  }

  .page:has(.sheet > .tela-lista) .sheet {
    height: 100%;
  }

  .sheet > .tela-lista {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Filhos diretos do host que não podem ser espremidos pela lista
     (cabeçalho, avisos, abas, formulário aberto): mantêm o tamanho natural. */
  .sheet > .tela-lista > :not(.lista-rolavel),
  .sheet .tela-lista .coluna-lista > :not(.lista-rolavel) {
    flex-shrink: 0;
  }

  /* Formulário aberto acima da lista não pode empurrar a lista pra fora da
     tela — rola por dentro se passar de metade da janela. */
  /* Bloco de lista com contagem/cabeçalho próprio acima do .card-list
     (coluna única): o bloco em si encolhe, só o .card-list dentro rola. */
  .sheet > .tela-lista > .coluna-lista {
    flex: 0 1 auto;
  }

  .sheet > .tela-lista > form.card,
  .sheet .tela-lista .coluna-lista > form.card {
    max-height: 50vh;
    overflow-y: auto;
  }

  .sheet .tela-lista .lista-rolavel,
  .sheet .tela-lista .coluna-lateral {
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--content-scroll) transparent;
  }

  .sheet .tela-lista .lista-rolavel {
    flex: 0 1 auto;
  }

  /* Quando o próprio .lista-rolavel é um section.block (coluna flex), o
     .card-list dentro dele tem overflow:hidden e por isso encolheria pra
     caber (min-height implícito 0) em vez de estourar — a seção nunca teria
     o que rolar. Filhos não encolhem. */
  .sheet .tela-lista .lista-rolavel > * {
    flex-shrink: 0;
  }

  .sheet .tela-lista .lista-rolavel::-webkit-scrollbar,
  .sheet .tela-lista .coluna-lateral::-webkit-scrollbar {
    width: 6px;
  }

  .sheet .tela-lista .lista-rolavel::-webkit-scrollbar-thumb,
  .sheet .tela-lista .coluna-lateral::-webkit-scrollbar-thumb {
    background: var(--content-scroll);
    border-radius: 3px;
  }

  .sheet .tela-lista .layout-rolavel {
    flex: 1 1 0;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
  }

  .sheet .tela-lista .coluna-lista {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* Sem sticky: a coluna não acompanha rolagem de página nenhuma agora. */
  .sheet .tela-lista .coluna-lateral {
    position: static;
  }

  .sheet .tela-lista .coluna-lateral > * {
    flex-shrink: 0;
  }
}

/* Marca (logo) do cartão de Login — contexto diferente da .topbar acima
   (cartão contido, não barra full-width); login.css ajusta tamanho/posição
   por cima destas regras. */

/* Sem fundo próprio (era um bloco verde-escuro fixo antes do design system
   Tramitex, backlog item 29) — a logo nova tem texto em Azul Profundo, só
   funciona sobre fundo claro, então o "badge" escuro atrás dela deixaria o
   texto ilegível. Cada card claro (login/criar-conta/etc.) já dá o fundo. */
.brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-mark img {
  display: block;
  height: 40px;
  width: auto;
}

/* Sidenav — navegação principal à esquerda, menu de usuário fixado embaixo. */

/* Sidebar em Azul Profundo (--ink) — a única "zona escura" que sobra do
   design system Tramitex (backlog item 29); por isso os textos/ícones
   aqui dentro usam cores fixas escolhidas pra contraste contra ela, não
   var(--ink-soft)/var(--line) (calibradas pra fundo claro) — o dropdown do
   usuário (.user-menu .dropdown) continua um cartão claro flutuante por
   cima, sem herdar nada disto. */
.sidenav {
  width: 265px;
  flex-shrink: 0;
  background: var(--nav-bg);
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  overflow: hidden; /* quem rola é .side-links, não a sidenav inteira — ver abaixo */
}

.side-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto; /* lista de módulos rola sozinha quando não couber */
  min-height: 0;
  scrollbar-width: thin;
  /* Firefox usa esta propriedade em vez do ::-webkit-scrollbar-thumb
     abaixo — estava presa em var(--line) (cinza neutro fixo), então no
     Firefox a cor secundária do tenant nunca aparecia na scrollbar da
     sidebar, só no Chrome/Edge. Corrigido pra seguir --nav-scroll igual
     ao thumb webkit (ver services/tema.ts). */
  scrollbar-color: var(--nav-scroll) transparent;
}

.side-links::-webkit-scrollbar {
  width: 6px;
}

.side-links::-webkit-scrollbar-track {
  background: transparent;
}

.side-links::-webkit-scrollbar-thumb {
  background: var(--nav-scroll);
  border-radius: 999px;
}

.side-links::-webkit-scrollbar-thumb:hover {
  background: var(--nav-scroll-hover);
}

.side-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--menu-icon-fg);
  border-radius: 10px;
  padding: 10px 12px;
}

.side-links a svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.side-links a:hover {
  color: var(--nav-fg-strong);
  background: var(--nav-hover-bg);
}

.side-links a.active {
  color: var(--primary-fg);
  background: var(--primary);
}

/* Ciano Neón (--accent) nos 2 módulos "de IA" da sidebar (nav.html,
   class="tech") — "Ícones Tech" é literalmente uma das 2 categorias de
   uso do PDF (a outra, "Active States", já é --primary em .active acima,
   decisão de item 28/29 anterior a esta; não reaproveitada aqui pra não
   duas fontes de "estado ativo" na mesma sidebar). Só o ícone, não o
   texto — cor no hover/ativo continua herdando normal (inherit desfaz o
   accent quando o link já está destacado de outro jeito). */
.side-links a.tech svg {
  color: var(--accent);
}

.side-links a.tech:hover svg,
.side-links a.tech.active svg {
  color: inherit;
}

/* Menu de usuário — fica no rodapé da sidenav (margin-top: auto empurra
   pra baixo), dropdown abre pra CIMA (bottom, não top — não tem espaço
   embaixo, é o fim da tela). */

.user-menu {
  position: relative;
  margin-top: auto;
}

/* Cartão de escritório (backlog item 1) — fixo no rodapé da sidebar, logo
   acima do menu de usuário (mesmo margin-top:auto do .user-menu que o
   engloba, então sobe/desce junto). Só o nome: sem "status do plano" do
   levantamento original — não existe billing neste projeto, e inventar um
   status seria pior que não mostrar nada. */
.user-menu .office-card {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--nav-fg-faint);
  padding: 0 2px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu .toggle {
  width: 100%;
  text-align: left;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--nav-fg-strong);
  background: var(--nav-hover-bg);
  border: 1px solid var(--nav-border);
  border-radius: 8px;
  padding: 10px 12px;
}

.user-menu .toggle:hover {
  filter: none;
  background: #FFFFFF;
}

.user-menu .dropdown {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 10;
}

.user-menu .dropdown-usuario {
  font-size: 13px;
  color: var(--ink);
  font-weight: 600;
}

.user-menu .dropdown-escritorio {
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 2px;
}

.user-menu .dropdown-link {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 6px 2px;
  /* Reset de botão — "Tour guiado" usa <button> (não navega, só dispara
     um evento), então sem isso herdaria o botão verde cheio padrão em
     vez de ficar igual aos links de "Minha conta"/"Meu escritório". */
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--sans);
  cursor: pointer;
}

.user-menu .dropdown-link:hover {
  color: var(--primary);
}

.user-menu .dropdown-sair {
  font-size: 12.5px;
  padding: 8px 12px;
}

/* Tablet (721–1024px) — rail de ícones (backlog responsividade, 14/09/2026):
   empilhar os ~16 itens da sidenav em cima do conteúdo (como era antes)
   empurrava a tela toda pra baixo do fold numa tela de tablet, que tem
   altura de sobra; em vez disso a sidenav vira uma coluna estreita só de
   ícones (title=rótulo via texto do span, mantido no DOM pra leitor de
   tela) e o conteúdo ganha o resto da largura, igual um app nativo de
   tablet. */
@media (min-width: 721px) and (max-width: 1024px) {
  .sidenav {
    width: 76px;
    padding: 20px 8px;
  }

  .side-links a {
    justify-content: center;
    padding: 10px 6px;
    position: relative;
  }

  .side-links a > span:not(.nav-badge) {
    display: none;
  }

  .side-links a .nav-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    margin-left: 0;
    font-size: 9px;
    padding: 2px 5px;
  }

  .user-menu .office-card {
    display: none;
  }

  .user-menu .toggle {
    color: transparent;
    padding: 10px 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
  }

  .user-menu .dropdown {
    left: 0;
    right: auto;
    width: 240px;
  }

  app-rodape footer {
    left: 76px;
  }
}

/* Smartphone (<=720px) — drawer off-canvas (backlog responsividade,
   14/09/2026): a sidenav some da tela por padrão (translateX) e desliza por
   cima do conteúdo quando aberta pelo botão hamburguer do topbar
   (.topbar-hamburguer, ver shell.html/nav.html), com um backdrop
   escurecido atrás pra fechar no toque fora. Substitui o comportamento
   anterior de empilhar a sidenav inteira (16+ itens) no topo da página, que
   empurrava todo o conteúdo pra baixo do fold no celular. */
@media (max-width: 720px) {
  .topbar-hamburguer {
    display: inline-flex;
  }

  .topbar {
    padding: 8px 14px;
    gap: 6px;
  }

  .topbar img {
    height: 42px;
  }

  .topbar-busca kbd {
    display: none;
  }

  .topbar-busca,
  .topbar-novo-toggle {
    padding: 7px 10px;
    font-size: 12px;
  }

  .sidenav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    width: min(82vw, 300px);
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: var(--shadow);
  }

  .sidenav.sidenav-aberta {
    transform: translateX(0);
  }

  .page {
    overflow-y: auto;
  }

  app-rodape footer {
    position: static; /* sidenav agora é um drawer flutuante — sem offset fixo aqui */
    left: auto;
  }

  /* .sheet ficava travado em 82vw mesmo no celular (pensado pra dar
     respiro num monitor largo) — num smartphone isso sobra só ~260-300px
     úteis, estreito demais pra linha com várias pills/botões (Financeiro),
     cabeçalho de conversa (Atendimento) ou a barra do editor rico
     (Documentos). Como essas telas usam `.card-list { overflow: hidden }`
     pra arredondar a lista, o que não cabia nesses ~300px era literalmente
     CORTADO, não rolável (achado do usuário, 14/09/2026). Quase full-width
     aqui, com respiro fixo pequeno em vez de proporcional. */
  .sheet {
    max-width: 100%;
    padding: 0 12px;
  }
}

.sidenav-backdrop {
  display: none;
}

@media (max-width: 720px) {
  .sidenav-backdrop.mostrar {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(11, 25, 44, 0.45);
    z-index: 25;
  }
}

/* Cabeçalho de página */

.masthead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}

.masthead-right {
  text-align: right;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 14px 0px 6px;
}

h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 36px);
  margin: 0;
  text-wrap: balance;
}

/* Estatísticas resumidas (topo de Triagem/Petições Pendentes) */

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 10px 0px 0px 0px;
}

.stat {
  background: var(--card-bg);
  color: var(--card-fg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: var(--shadow);
}

.stat .n {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat .l {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--card-fg-soft);
}

/* Seção com título + lista de cards */

section.block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.block-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  /* Congelado no topo da rolagem própria de .page (12/09/2026, pedido do
     usuário: "os controles e filtro não devem rolar junto com a lista,
     isso vale para todas telas de listagem") — position:sticky gruda no
     topo do container rolável mais próximo (.page, ver
     overflow-y:auto lá), sem precisar de JS. Margem virou padding pra o
     background (senão a lista apareceria "por trás" da margem enquanto
     rola) cobrir toda a área congelada; z-index acima de .card-list pra
     as linhas da lista passarem por baixo, não por cima. */
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--paper);
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Sem isto, botões/select encolhiam junto com o .filtro ao lado (flex-
   shrink padrão é 1 em todo mundo) até o texto do botão não caber mais e
   quebrar em duas linhas (Financeiro: "+ Nova Receita"/"+ Nova Despesa",
   reportado pelo usuário) — .filtro absorve o espaço flexível, o resto
   mantém o tamanho natural. Margem zerada nos dois eixos: quem cuida do
   espaçamento agora é o .block-header (margin-bottom acima) e o próprio
   align-items:baseline (sem precisar de margin-top). */
.block-header .filtro {
  flex: 1 1 200px;
  min-width: 160px;
  margin: 0;
}

.block-header button {
  flex-shrink: 0;
}

.block-header select {
  flex-shrink: 0;
  width: auto; /* senão herda width:100% do select global (flex-basis:auto
                  usa a `width` como base) e vira a largura inteira da
                  linha, empurrando os botões pra quebrar */
}

.block h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 19px;
  margin: 14px 0px 6px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.block h2 .count {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-faint);
  font-weight: 600;
}

.card-list {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
  /* `.card-list` normalmente é item flex de `section.block` (flex column)
     — item flex por padrão tem min-width:auto, ou seja, recusa encolher
     abaixo do maior conteúdo que não quebra linha (ex.: preview de
     documento/nome de conversa com white-space:nowrap). Sem isto, esse
     texto nunca chegava a truncar com "…": o item inteiro (e tudo acima
     dele na árvore) crescia pra caber o texto, estourando a tela no
     celular (achado do usuário, 14/09/2026, ver também o fix de
     grid-template-columns nos *-layout de Documentos/Financeiro/
     Atendimento — mesma família de bug). */
  min-width: 0;
}

/* .row: base é flexbox (uma linha simples); .row-3/.row-2 viram grid
   quando a linha precisa de colunas alinhadas (data fixa à esquerda,
   tags/ações à direita). */

.row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  box-shadow: inset 3px 0 0 transparent;
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

.row:last-child {
  border-bottom: none;
}

.card-list .row:hover {
  background: var(--list-accent-soft);
  box-shadow: inset 3px 0 0 var(--list-accent);
}

.row.row-3 {
  display: grid;
  grid-template-columns: 74px 1fr auto;
}

.row.row-2 {
  display: grid;
  grid-template-columns: 1fr auto;
}

.row .info {
  flex: 1;
  min-width: 0;
}

.row .nome,
.row .titulo {
  font-size: 14px;
  color: var(--card-fg);
}

.row .tarefas,
.row .sub {
  font-size: 12.5px;
  /* Era #666 fixo — não acompanhava --card-bg escurecido quando o
     escritório personaliza a cor secundária em "Meu Escritório" (ver
     tema.ts), ficando ilegível. As outras cores da mesma .row já usam
     --card-fg/--card-fg-faint, que se recalculam sozinhas; esta ficou
     destoando. */
  color: #666;
  margin-top: 3px;
}

.row .sub {
  font-family: var(--mono);
}

/* Total de itens acima da lista (pedido do usuário 08/09/2026: "várias
   listagens não tem um total de itens na lista acima") — acompanha o
   filtro de busca de cada tela (conta o array já filtrado, não o total
   geral cadastrado), texto pequeno e discreto, sem virar um card/caixa. */
.contagem-lista {
  font-size: 12.5px;
  color: var(--ink-faint);
  margin: 0 0 8px;
}

.row .data {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--card-fg-faint);
}

.when {
  font-family: var(--mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  line-height: 1.35;
}

.when .today {
  color: var(--critical);
  font-weight: 700;
}

.when .tomorrow {
  color: var(--warning);
  font-weight: 700;
}

.proc {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.orgao {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.title-main {
  font-size: 14px;
  color: var(--ink);
}

.btn {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  border: 1px solid var(--primary-soft);
  background: var(--primary-soft);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}

.tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

.pill {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.pill.tribunal {
  background: var(--primary-soft);
  color: var(--primary);
}

.pill.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--primary-soft);
  color: var(--primary);
  text-transform: none;
  letter-spacing: 0;
}

.pill.tag button {
  background: none;
  border: none;
  color: inherit;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

/* Etiquetas exibidas à esquerda (sob o nome do cliente, ou no editor de
   etiquetas do form) — diferente do .tags padrão, que empurra pra direita
   (usado em linhas de lista com ações/pills de status). */
.tags-lista,
.tags-editor {
  justify-content: flex-start;
  margin-top: 6px;
}

.tag-editor {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}

.tag-editor input[type='text'] {
  flex: 1;
}

.cor-picker {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 2px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--paper);
  cursor: pointer;
}

.parte-editor {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
  flex-wrap: wrap;
}

.parte-editor select {
  flex: 1;
  min-width: 160px;
}

.form-grid .checkbox-label {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.checkbox-label input[type='checkbox'] {
  width: auto;
}

/* Agenda — grade de calendário mensal */

.calendario-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.calendario-nav h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 18px;
  margin: 0;
  flex: 1;
}

.calendario {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.calendario-semana {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  /* Mesma cor de fundo da navegação (sidebar/topbar) — pedido do usuário
     pra diferenciar visualmente o cabeçalho de dias da semana da grade de
     dias abaixo (essa sim sempre branca, ver .calendario-dia). */
  background: var(--nav-bg);
  border-bottom: 1px solid var(--line);
}

.calendario-semana div {
  padding: 8px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* --nav-fg-strong (não --ink-faint): o fundo agora é --nav-bg, escuro por
     padrão e sobrescrito por tenant (ver services/tema.ts) — precisa do
     par de texto já calculado pra contrastar com ELE, não com --paper. */
  color: var(--nav-fg-strong);
}

.calendario-grade {
  display: grid;
  /* minmax(0, 1fr), não só 1fr: sem o mínimo 0, uma célula com um chip de
     texto longo (white-space: nowrap) força a coluna inteira a esticar
     além da fração igual — é o que deixava dia com atividade "grande" e
     dia vazio "estreito". */
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendario-dia {
  height: 112px;
  min-width: 0;
  padding: 6px;
  /* Branco fixo (--paper-raised, não --card-bg) — pedido do usuário:
     diferente de --card-bg, --paper-raised não é recolorido pela cor
     secundária do tenant (ver services/tema.ts), então os dias ficam
     sempre brancos independente de personalização. */
  background: var(--paper-raised);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}

.calendario-dia:nth-child(7n) {
  border-right: none;
}

.calendario-dia:hover {
  background: var(--paper);
}

.calendario-dia.fora-mes {
  opacity: 0.4;
}

.calendario-dia.selecionado {
  background: var(--primary-soft);
  /* Borda na cor primária do tenant (--nav-bg — é o que "Cor primária" em
     Meu Escritório de fato controla, ver services/tema.ts; --primary é a
     cor SECUNDÁRIA de lá, apesar do nome do token CSS). inset, não border,
     pra não empurrar o grid (célula já tem border-right/bottom pro
     desenho da grade) nem mudar a altura fixa da célula. */
  box-shadow: inset 0 0 0 2px var(--nav-bg);
}

.calendario-numero {
  font-size: 12px;
  color: var(--ink-soft);
}

.calendario-dia.hoje .calendario-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-fg);
  font-weight: 700;
}

.calendario-chip {
  font-size: 11px;
  padding: 2px 5px;
  border-radius: 5px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendario-chip.tipo-prazo {
  background: var(--critical-soft);
  color: var(--critical);
  border-color: transparent;
}

.calendario-chip.tipo-audiencia,
.calendario-chip.tipo-pericia {
  background: var(--warning-soft);
  color: var(--warning);
  border-color: transparent;
}

.calendario-chip.tipo-tarefa,
.calendario-chip.tipo-reuniao,
.calendario-chip.tipo-lembrete {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: transparent;
}

.calendario-mais {
  font-size: 10.5px;
  color: var(--ink-faint);
}

/* Agenda — visão semanal (backlog item 10, "Falta visão semana/dia") —
   7 colunas com a lista do dia inteira, sem truncar em "+N mais" como a
   grade mensal (aqui sobra altura pra isso). Reusa as mesmas cores por
   tipo de atividade da grade mensal (.calendario-chip.tipo-*). */

.semana-grade {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.semana-dia {
  min-width: 0;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

.semana-dia:last-child {
  border-right: none;
}

.semana-dia.hoje {
  background: var(--primary-soft);
}

.semana-dia-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.semana-numero {
  color: var(--ink);
  text-transform: none;
  font-weight: 700;
}

.semana-dia.hoje .semana-numero {
  color: var(--primary);
}

.semana-dia-cabecalho button.link {
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}

.semana-itens {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 140px;
}

.semana-item {
  font-size: 11.5px;
  padding: 4px 6px;
  border-radius: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  cursor: pointer;
  line-height: 1.4;
}

.semana-item:hover {
  filter: brightness(0.97);
}

.semana-item-hora {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  margin-right: 4px;
}

.semana-item.tipo-prazo {
  background: var(--critical-soft);
  color: var(--critical);
  border-color: transparent;
}

.semana-item.tipo-audiencia,
.semana-item.tipo-pericia {
  background: var(--warning-soft);
  color: var(--warning);
  border-color: transparent;
}

.semana-item.tipo-tarefa,
.semana-item.tipo-reuniao,
.semana-item.tipo-lembrete {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: transparent;
}

.semana-vazio {
  font-size: 11px;
  color: var(--ink-faint);
  text-align: center;
  padding-top: 8px;
}

@media (max-width: 720px) {
  .semana-grade {
    grid-template-columns: 1fr;
  }

  .semana-dia {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .semana-dia:last-child {
    border-bottom: none;
  }
}

.pill.dup,
.pill.cache {
  background: var(--paper);
  color: var(--ink-faint);
  border: 1px solid var(--line);
}

.pill.tipo {
  background: var(--paper);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}

.pill.privada {
  background: var(--warning-soft);
  color: var(--warning);
}

.pill.erro {
  background: var(--critical-soft);
  color: var(--critical);
}

.pill.status-ativo {
  background: var(--ok-soft);
  color: var(--ok);
}

.pill.status-suspenso {
  background: var(--warning-soft);
  color: var(--warning);
}

.pill.status-arquivado,
.pill.status-encerrado {
  background: var(--paper);
  color: var(--ink-faint);
  border: 1px solid var(--line);
}

.empty {
  padding: 20px 16px;
  color: var(--ink-faint);
  font-size: 13.5px;
}

.scope-note {
  background: var(--primary-soft);
  border-radius: 10px;
  padding: 16px 18px;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.6;
}

.scope-note b {
  color: var(--primary);
}

/* Cartão avulso (formulários — Gerar documentos, Cadastros) */

.card {
  background: var(--card-bg);
  color: var(--card-fg);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 5px;
}

label {
  font-size: 13px;
  font-weight: 600;
  color: var(--card-fg-soft);
}

input[type='text'],
select,
textarea,
input[type='number'],
input[type='date'] {
  width: 100%;
  font-size: 15px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
}

textarea {
  resize: vertical;
}

input[type='text']:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* Campo de filtro/busca acima de uma .card-list — toda tela de listagem
   deve ter um (convenção do painel, não só decoração desta tela).
   margin-top: sem isso o campo ficava colado no que vem antes quando não
   há mais nada entre os dois (Gravações, sem masthead-right/aviso no
   meio, reportado pelo usuário). margin-bottom: sem isso o campo ficava
   colado na lista logo abaixo (Assinaturas/Gravações/Arquivos, também
   reportado) — os dois resetados a zero dentro de .filtros-linha (ver
   abaixo) e de .block-header (ver mais abaixo), que já têm seu próprio
   espaçamento no container. */
.filtro {
  max-width: 360px;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Ícone de lupa à esquerda do placeholder (12/09/2026, pedido do usuário:
   "em todos filtros") — background-image em vez de wrapper com <svg>
   próprio, pra não precisar tocar o HTML de cada uma das ~15 telas que já
   usam .filtro. Precisa do seletor `input.filtro` (não só `.filtro`) pra
   empatar em especificidade com `input[type='text']` (padding: 10px 12px
   ali em cima) e vencer por ordem de declaração — só `.filtro` sozinho
   perderia essa disputa e o padding-left seria ignorado. Cor da lupa fixa
   (#5f6f85, o mesmo valor de --ink-faint) porque background-image não lê
   variável CSS por var() dentro de um data URI. */
input.filtro {
  padding-left: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6f85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 15px 15px;
}

/* Linha com abas (nav.tabs)/filtro de texto/select lado a lado — antes
   cada um ficava em bloco, um embaixo do outro, quebrando a tela em várias
   linhas sem necessidade (Publicações, Movimentações). `.filtro` normalmente
   herda `width: 100%` do input[type='text'] global — dentro desta linha
   isso faria ele tentar ocupar o espaço todo, então vira flex-basis
   controlado, não mais 100%. */
.filtros-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  /* Congelado, mesmo racional/motivo do .block-header logo abaixo — telas
     como Publicações/Movimentações usam .filtros-linha em vez de
     .block-header (abas + filtro lado a lado), mas a regra "controles e
     filtro não rolam junto com a lista" vale igual. */
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--paper);
  padding-top: 10px;
  padding-bottom: 10px;
}

.filtros-linha nav.tabs {
  margin-top: 0; /* já vem de nav.tabs sozinho — aqui o espaçamento é do .filtros-linha */
  flex: 0 0 auto;
}

.filtros-linha .filtro {
  flex: 0 1 240px;
  width: auto;
  margin: 0;
}

.filtros-linha select {
  flex: 0 0 auto;
  width: auto; /* senão herda width:100% do select global e vira a largura
                  inteira da linha (flex-basis:auto usa a `width` como
                  base quando não é sobrescrita) */
}

.filtros-linha label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  flex: 0 0 auto;
}

.botoes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

button {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-fg);
  background: var(--primary);
  border: none;
  border-radius: 8px;
  padding: 12px 16px;
  cursor: pointer;
  font-family: var(--sans);
  margin: 5px;
}

button:disabled {
  opacity: 0.5;
  cursor: default;
}

button:not(:disabled):hover {
  filter: brightness(1.08);
}

.status {
  font-size: 13.5px;
  line-height: 1.5;
  border-radius: 8px;
  padding: 12px 14px;
  display: none;
}

.status.mostrar {
  display: block;
}

.status.carregando {
  background: var(--warning-soft);
  color: var(--warning);
}

.status.ok {
  background: var(--ok-soft);
  color: var(--ok);
  margin-top: 10px;
}

.status.erro {
  background: var(--critical-soft);
  color: var(--critical);
}

.aviso {
  font-size: 12.5px;
  color: var(--ink-faint);
  line-height: 1.6;
}

/* Fontes extras do editor rico (Quill, ver rich-editor.ts) — serif e
   monospace já vêm com rótulo + font-family prontos do quill.snow.css,
   estas 4 são as registradas a mais (`Font.whitelist`). O rótulo do
   dropdown (::before, funciona tanto pro item fechado quanto pra lista
   aberta — mesmo seletor que o quill.snow.css usa pra serif/monospace) e a
   fonte real do texto (`.ql-font-*` aplicado ao próprio texto formatado,
   dentro ou fora do editor) precisam ser declarados separados. */
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='arial']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='arial']::before {
  content: 'Arial';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='times-new-roman']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='times-new-roman']::before {
  content: 'Times New Roman';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='georgia']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='georgia']::before {
  content: 'Georgia';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='verdana']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='verdana']::before {
  content: 'Verdana';
}

.ql-font-arial {
  font-family: Arial, Helvetica, sans-serif;
}

.ql-font-times-new-roman {
  font-family: 'Times New Roman', Times, serif;
}

.ql-font-georgia {
  font-family: Georgia, serif;
}

.ql-font-verdana {
  font-family: Verdana, Geneva, sans-serif;
}

/* 108px (padrão do quill.snow.css) corta "Times New Roman" fechado — só
   este dropdown precisa de mais espaço, os outros (header/size) continuam
   com a largura padrão. */
.ql-snow .ql-picker.ql-font {
  width: 140px;
}

footer {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  font-size: 12px;
  color: var(--ink-faint);
  text-align: center;
}

/* <app-rodape> (o "powered by tramitex.com.br") fixo no rodapé da área de
   conteúdo, não da janela inteira — `left: 265px` alinha com a largura
   fixa de .sidenav pra ficar centralizado no espaço visível de verdade,
   não no viewport todo (que incluiria a sidenav escura). Escopado pro
   selector do componente (não `footer` puro) de propósito: manager.html/
   landing.html/dashboard.html têm rodapés próprios, com texto e contexto
   diferentes, que não devem virar fixos por tabela. Revertido pra
   static/full-width no breakpoint mobile abaixo, onde a sidenav empilha
   em cima. padding-bottom extra em .page evita que o footer fixo tampe o
   fim do conteúdo ao rolar até embaixo. */
app-rodape footer {
  position: fixed;
  left: 265px;
  right: 0;
  bottom: 0;
  z-index: 5;
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  background: var(--paper);
}

/* Cadastros — abas e formulário em grade */

nav.tabs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

nav.tabs button {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-family: var(--sans);
}

nav.tabs button.active {
  color: var(--primary-fg);
  background: var(--primary);
}

.form-grid {
  display: flow;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 11px;
}

.form-grid .col-2 {
  grid-column: span 2;
}

.form-acoes {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  margin-top: 42px;
}

/* Botão "fraco" — reusado fora de .form-acoes também (nav do calendário,
   editor de etiquetas/partes). Antes só existia como ".form-acoes
   button.secundario", então esses outros usos caíam sem querer no button
   primário cheio (verde), com vários botões "gritando" juntos na tela. */
button.secundario {
  background: transparent;
  color: #3a3a3a;
  border: 1px solid var(--line);
}

/* Estado "pressionado" de um button.secundario usado como toggle (ex.:
   "Delegadas a mim" em agenda.html) — mesmo padrão visual de nav.tabs
   button.active, só que sem virar aba. */
button.secundario.active {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--primary);
}

/* "Secondary Button" do PDF (Design_System_Tramitex v1.0, seção 4) —
   sólido em Azul Profundo, diferente do nosso button.secundario acima
   (contorno, que já cobria o "Outline Button" do PDF — ver decisão
   registrada no backlog item 29). --ink não muda no tema escuro
   (deliberado, ver bloco de dark mode acima), então texto branco fixo
   continua legível nos dois temas sem token novo. Uso pretendido: ações
   secundárias de suporte/navegação com mais peso visual que um outline,
   sem competir com o botão primário (--primary) da tela — ex.: "Sair" no
   /manager (manager.html), não ações de cancelar formulário (essas
   continuam button.secundario). */
button.escuro {
  background: var(--ink);
  color: #fff;
  border: none;
}

/* Cor trocada de var(--primary) pra var(--ink) a pedido do usuário
 * (06/09/2026): button.link é usado como botão de ação (Ver processo/
 * Editar/Excluir/Ver detalhe/etc.) em várias telas — Movimentações,
 * Publicações, E-mails, Notas — e o usuário quer essas ações na cor de
 * FONTE do tenant ("Meu escritório" > cor de fonte, ver services/tema.ts),
 * não na cor secundária/de destaque (--primary, ainda usada em botões
 * sólidos/outline e nos links de navegação de verdade, ex. "Abrir no site
 * do tribunal"). Pedido chegou tela por tela mas é claramente geral —
 * corrigido na fonte compartilhada em vez de sobrescrever em cada CSS de
 * módulo. */
/* Ícone de WhatsApp (cadastros.html/cliente-ficha.html) — cor fixa da marca
 * (verde oficial #25D366), não um token do design system: é um logo de
 * terceiro universalmente reconhecido por essa cor, diferente dos botões de
 * ação da tela (que seguem a cor de fonte/tenant, ver button.link abaixo) —
 * pedido do usuário 06/09/2026, "precisa ser o icon do WhatsApp". */
.icon-whatsapp {
  width: 18px;
  height: 18px;
  fill: #25d366;
  vertical-align: middle;
}

button.link {
  background: none;
  color: var(--ink);
  border: none;
  padding: 0;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

button.link.critico {
  color: var(--critical);
}

@media (max-width: 560px) {
  .row.row-3,
  .row.row-2 {
    grid-template-columns: 1fr;
    row-gap: 6px;
  }

  .row {
    flex-wrap: wrap;
  }

  .tags {
    justify-content: flex-start;
  }

  .stats {
    grid-template-columns: 1fr;
  }
}