/*
 * 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;
  --ink-faint: #8695a8;
  --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: var(--brand-azul-eletrico);
  --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);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* --paper: #0c1526; */
    --paper-raised: #17294a;
    /* --ink: #3878d1; */
    --ink-soft: #b3c0d4;
    --ink-faint: #75849c;
    --line: #263652;
    --primary: #4d94ff;
    --primary-soft: #17294a;
    --accent: #4fe0ff;
    --accent-soft: #103544;
    --critical: #ef6b62;
    --critical-soft: #3a1f1f;
    --warning: #e3ac57;
    --warning-soft: #392c15;
    --ok: #5ecb90;
    --ok-soft: #123321;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px -16px rgba(0, 0, 0, 0.7);
    --list-accent: #4d94ff;
    --list-accent-soft: rgba(77, 148, 255, 0.14);
  }
}

* {
  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;
}

.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(20px, 4vw, 48px);
  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: 70vw;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* 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;
}

@media (max-width: 720px) {
  .shell-body {
    flex-direction: column;
    overflow-y: auto; /* empilhado, rola junto — sidenav vira uma barra curta no topo */
  }

  .sidenav {
    width: 100%;
    overflow: visible;
  }

  .side-links {
    overflow-y: visible;
  }

  .page {
    overflow-y: visible;
  }
}

/* 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;
  margin-bottom: 10px; /* espaço até a lista/section.block seguinte — ver
                          .block-header .filtro logo abaixo pro motivo de
                          zerar a margem do filtro em vez de deixar cada
                          um contribuir a sua (Assinaturas ficava colado
                          na lista, reportado pelo usuário). */
}

/* 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;
}

/* .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;
  color: #666;
  margin-top: 3px;
}

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

.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);
  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;
  color: var(--ink-faint);
}

.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;
  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);
}

.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: 10px;
}

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;
}

/* 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;
  margin-top: 10px;
  margin-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;
}

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

/* 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: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

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

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

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

/* 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;
}

button.link {
  background: none;
  color: var(--primary);
  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;
  }
}