* { box-sizing: border-box; margin: 0; }
/* ==========================================================================
   PAINEL DE CONTROLE DO VISUAL
   --------------------------------------------------------------------------
   Mudar um valor aqui muda o sistema INTEIRO. É o lugar seguro para ajustar a
   aparência sem procurar por onde o estilo está espalhado.

   Havia dois conjuntos de nomes para as MESMAS cores (`--azul` e
   `--cor-primaria`), o que fazia trocar uma cor pegar só metade das telas.
   Unificado em 2026-08-05. Armadilha que existia: `--azul-claro` valia #0D47A1,
   que é o azul ESCURO — o nome mentia. Hoje cada nome diz o que a cor é.
   ========================================================================== */
:root {
  /* --- Identidade: a cor da marca e suas variações ------------------------ */
  --cor-primaria: #1E88E5;          /* azul principal: botões, links, destaques */
  --cor-primaria-escura: #0D47A1;   /* hover de botão, contorno de foco */
  --cor-primaria-clara: #64B5F6;    /* realces suaves */
  --cor-primaria-fundo: #F3F7FF;    /* fundo de item selecionado/hover no menu */

  /* --- Sinalização: cores que comunicam estado ---------------------------- */
  --cor-sucesso: #4CAF50;           /* concluído, pago, positivo */
  --cor-alerta: #F44336;            /* erro, excluir, vencido */
  --cor-destaque: #FFC107;          /* atenção: publicação nova, "hoje" no calendário */
  --cor-status-nao-tratada: var(--cor-destaque);

  /* Tons de leitura das cores de estado. Estavam fixos no HTML (`color:#9c2b21`
     em 17 lugares, `background:#fdecea` em 13...), então mudar a cor de "vencido"
     exigia caçar hexadecimal por 20 arquivos. Agora é uma linha. */
  --cor-alerta-texto: #9c2b21;      /* texto de vencido/atraso (contraste p/ leitura) */
  --cor-alerta-fundo: #fdecea;      /* fundo da linha vencida numa tabela */
  --cor-alerta-forte: #B71C1C;      /* alerta mais grave */
  --cor-sucesso-texto: #1d6f42;     /* valor recebido, positivo */
  --cor-aviso-texto: #8f6b14;       /* aviso (âmbar) legível */
  --cor-aviso-fundo: #FFF8E1;
  --cor-aviso-borda: #FFE9A8;
  --cor-aviso-fundo-linha: #fdf3e0;  /* linha de tabela em aviso (hoje, pulado) */

  /* --- Superfícies e texto ----------------------------------------------- */
  --cor-fundo: #FAFAFA;             /* fundo da página */
  --cor-fundo-card: #FFFFFF;        /* fundo dos cartões e da barra lateral */
  --cor-borda: #E0E0E0;             /* linhas divisórias e contornos */
  --cor-texto-primario: #212121;    /* texto normal */
  --cor-texto-secundario: #757575;  /* legendas, rótulos, texto de apoio */
  --cor-desabilitado: #BDBDBD;

  /* --- Forma: arredondamento e sombra ------------------------------------ */
  --raio: 8px;                      /* cantos de cartões e caixas */
  --raio-pequeno: 6px;              /* cantos de botões e campos */
  --sombra-card: 0 1px 3px rgba(0, 0, 0, .08);

  /* --- Tipografia --------------------------------------------------------- */
  --fonte: 'Segoe UI', system-ui, sans-serif;
  --fonte-base: 1rem;               /* tamanho do texto normal */
}
body { font-family: var(--fonte); background: var(--cor-fundo);
  color: var(--cor-texto-primario); display: flex; min-height: 100vh; }
.sidebar { width: 250px; background: #FFFFFF; color: var(--cor-texto-primario); display: flex;
  flex-direction: column; position: fixed; top: 0; bottom: 0; border-right: 1px solid var(--cor-borda);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.logo { padding: 16px; flex-shrink: 0; }
.logo img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 8px; }
.logo-login { display: flex; justify-content: center; margin-bottom: 22px; }
.logo-login img { width: 250px; max-width: 100%; height: auto; border-radius: 8px; }
.sidebar nav { flex: 1; padding: 8px 0; overflow-y: auto; min-height: 0; }
.sidebar nav a { display: flex; align-items: center; gap: 12px; color: var(--cor-texto-primario); text-decoration: none;
  padding: 12px 16px; font-size: .95rem; border-left: 3px solid transparent; transition: all 200ms; }
.sidebar nav a:hover { background: var(--cor-primaria-fundo); color: var(--cor-primaria); }
.sidebar nav a.ativo { background: var(--cor-primaria-fundo); color: var(--cor-primaria); border-left-color: var(--cor-primaria); font-weight: 600; }
.rodape-sidebar { padding: 16px; border-top: 1px solid var(--cor-borda); font-size: .85rem; flex-shrink: 0; }
/* Nome do usuário à esquerda, catraca ⚙ dos ajustes da conta à direita. */
.rodape-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* ---- Dropdown com busca (`select[data-busca]`) ----
   O <select> real continua no formulário (é ele que envia name/value) e some da vista;
   quem aparece é um campo de texto que filtra as opções. Sem JavaScript, `.combo-oculto`
   nunca é aplicada e o select nativo continua na tela. */
.combo { position: relative; }
.combo-oculto { display: none; }
.combo-campo { width: 100%; }
.combo-lista { position: absolute; z-index: 45; left: 0; right: 0; top: calc(100% + 2px);
  max-height: 260px; overflow-y: auto; background: #FFFFFF; border: 1px solid var(--cor-borda);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 4px; }
.combo-lista[hidden] { display: none; }
.combo-opcao { padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: .9rem; }
.combo-opcao:hover, .combo-opcao.marcada { background: var(--cor-primaria-fundo); color: var(--cor-primaria); }
.combo-opcao.atual { font-weight: 700; }
.combo-vazio { padding: 8px 10px; font-size: .85rem; color: var(--cor-texto-secundario); }

/* Toggle "no papel timbrado" ao lado do botão de exportar: fica na mesma linha, com o
   texto miúdo — é uma opção do botão, não um campo de formulário à parte. */
.coluna-timbrado { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.toggle-timbrado { font-size: .84rem; color: var(--cor-texto-secundario); }

/* Etiqueta da coluna TIPO na aba Atividades (andamento × tarefa × prazo × audiência).
   Mesmas cores das etiquetas do kanban — o mesmo tipo tem a mesma cor no sistema todo. */
.etq-atividade { display: inline-block; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: 10px;
  color: #fff; background: var(--cor-texto-secundario); }
.etq-atividade.etq-tarefa { background: var(--cor-primaria-escura); }
.etq-atividade.etq-audiencia { background: #6a3fa0; }
.etq-atividade.etq-prazo { background: #b3392e; }
.etq-atividade.etq-andamento { background: #5b6b7c; }

/* ---- Listas em CARDS clicáveis (processos, atendimentos) ----
   Substituem as linhas de tabela: o card inteiro é o alvo, e o hover levanta o cartão com
   sombra e vidro. Na tabela, só o número era clicável — alvo pequeno, pior ainda no
   celular. O checkbox de seleção em lote continua dentro do card (o clique nele não
   navega: o handler global ignora <a>, <label>, <input> e <button>). */
.lista-cards { display: flex; flex-direction: column; gap: 10px; }
.selecao-todos { margin-bottom: 10px; font-size: .85rem; color: var(--cor-texto-secundario); }
.selecao-todos label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; }
.selecao-todos input { width: auto; margin: 0; }
.cartao-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px;
  border: 1px solid var(--cor-borda); border-radius: 12px;
  background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(243,247,255,.78));
  backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%);
  box-shadow: 0 1px 3px rgba(15,32,55,.06);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; }
.card-clicavel { cursor: pointer; }
.card-clicavel:hover { transform: translateY(-2px); border-color: var(--cor-primaria);
  box-shadow: 0 10px 24px rgba(15,32,55,.16); }
.card-clicavel:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }
.cartao-item-selecao { display: flex; align-items: center; margin: 0; padding: 2px 0; cursor: pointer; }
.cartao-item-selecao input { width: auto; margin: 0; }
.cartao-item-corpo { flex: 1; min-width: 0; }
.cartao-item-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.cartao-item-titulo { font-size: 1rem; color: var(--cor-primaria-escura); }
.cartao-item-campos { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: .86rem;
  color: var(--cor-texto-primario); }
.cartao-item-rotulo { display: block; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--cor-texto-secundario); }
.cartao-item-acoes { display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; }
@media (max-width: 700px) {
  .cartao-item { flex-wrap: wrap; }
  .cartao-item-acoes { width: 100%; }
}

/* Situação fática editável na ficha: fechada quando já há texto (o parágrafo abaixo já
   mostra o conteúdo), aberta quando está vazia — é o convite para preencher. */
.bloco-resumo > summary { cursor: pointer; color: var(--cor-texto-primario); }
.bloco-resumo > summary .txt-apoio { font-weight: 400; font-size: .85rem; }
.bloco-resumo .form-resumo { margin-top: 10px; }
.texto-resumo { white-space: pre-wrap; }
.rodape-sidebar a { color: var(--cor-texto-secundario); display: block; margin-top: 8px; text-decoration: none; transition: color 200ms; }
.rodape-sidebar a:hover { color: var(--cor-primaria); }
.usuario-info small { color: var(--cor-texto-secundario); }
.rodape-sidebar .btn-sair { background: var(--cor-primaria); color: #FFFFFF; text-align: center;
  padding: 8px 12px; border-radius: 6px; font-weight: 700; margin-top: 12px; }
.rodape-sidebar .btn-sair:hover { color: var(--cor-primaria); filter: brightness(1.06); }
/* Elementos só visíveis no modo responsivo (telas pequenas) */
.barra-mobile { display: none; }
.overlay-menu { display: none; }
/* A tabela rola DENTRO da própria caixa, em qualquer largura de janela. Antes isso só
   valia abaixo de 860px; entre 861px e ~1100px — a largura típica de meia tela — a
   tabela empurrava o `.conteudo` e a PÁGINA INTEIRA passava a rolar na horizontal
   (medido: janela de 960px, documento de 1019px). Era o "o sistema não se ajusta à
   janela" relatado em 2026-08-12. O contêiner é criado pelo JS do base.html. */
.tabela-scroll { width: 100%; overflow-x: auto; }
/* `min-width: 0` é o que permite ao item flex encolher abaixo do conteúdo: sem ele o
   padrão `min-width: auto` trava a coluna na largura mínima da tabela. */
.conteudo { flex: 1; min-width: 0; margin-left: 250px; padding: 32px 40px; }
.tela-cheia { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
h1 { font-size: 1.5rem; color: var(--cor-primaria); margin-bottom: 20px; font-weight: 600; }
h2 { font-size: 1.15rem; color: var(--cor-texto-primario); margin: 24px 0 12px; font-weight: 600; }
.topo { display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.topo h1 { margin: 0; }
.btn { display: inline-block; background: var(--cor-primaria); color: #FFFFFF; border: 0;
  padding: 10px 20px; border-radius: 6px; font-size: .93rem; cursor: pointer; text-decoration: none;
  font-weight: 500; transition: all 200ms; }
.btn:hover { background: var(--cor-primaria-escura); box-shadow: 0 2px 8px rgba(30, 136, 229, 0.3); }
.btn:active { transform: scale(0.98); }
.btn.secundario { background: #FFFFFF; color: var(--cor-primaria); border: 1.5px solid var(--cor-borda); }
.btn.secundario:hover { background: var(--cor-primaria-fundo); border-color: var(--cor-primaria); }
.btn.perigo { background: var(--cor-alerta); }
.btn.perigo:hover { background: #E53935; }
.btn.pequeno { padding: 6px 14px; font-size: .84rem; }
.cartao { background: #FFFFFF; border: 1px solid var(--cor-borda); border-radius: 8px;
  padding: 24px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.cartoes-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 18px; margin-bottom: 24px; }
/* Cards do painel: vidro fosco, destaque no hover e o card INTEIRO é o link para a
   tela que detalha aquele número. */
.cartao-num { display: block; text-decoration: none; color: inherit;
  background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(243,247,255,.72));
  backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255,255,255,.75); border-radius: 12px;
  padding: 20px; box-shadow: 0 2px 10px rgba(15,32,55,.08);
  transition: transform 180ms, box-shadow 180ms, border-color 180ms; }
a.cartao-num:hover { transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15,32,55,.16); border-color: var(--cor-primaria-clara); }
a.cartao-num:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }
a.cartao-num:active { transform: translateY(-1px); }
.cartao-num .num { font-size: 2.2rem; font-weight: 700; color: var(--cor-primaria); }
.cartao-num .num.valor { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.cartao-num .rotulo { color: var(--cor-texto-secundario); font-size: .88rem; font-weight: 500; }
a.cartao-num:hover .rotulo { color: var(--cor-primaria); }
/* Alerta do DJEN: card de vidro clicável no topo do painel. */
.cartao-alerta { display: flex; align-items: center; gap: 14px; text-decoration: none;
  color: var(--cor-texto-primario); margin-bottom: 22px; padding: 16px 20px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,193,7,.24), rgba(255,255,255,.72));
  backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255,193,7,.55); box-shadow: 0 4px 16px rgba(143,107,20,.14);
  transition: transform 180ms, box-shadow 180ms; }
.cartao-alerta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(143,107,20,.22); }
.cartao-alerta:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }
.cartao-alerta .alerta-icone { font-size: 1.6rem; line-height: 1; }
.cartao-alerta small { display: block; color: var(--cor-texto-secundario); }
.cartao-alerta .alerta-seta { margin-left: auto; font-size: 1.3rem; color: var(--cor-aviso-texto); }
.topo-secao { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 22px 0 10px; }
.topo-secao h2 { margin: 0; }
.ver-tudo { font-size: .85rem; color: var(--cor-primaria-escura); text-decoration: none; font-weight: 600; }
.ver-tudo:hover { text-decoration: underline; }
table { width: 100%; border-collapse: collapse; background: #FFFFFF; border: 1px solid var(--cor-borda);
  border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--cor-texto-secundario); padding: 13px 16px; background: #F5F5F5; border-bottom: 1px solid var(--cor-borda);
  font-weight: 600; }
td { padding: 13px 16px; border-bottom: 1px solid var(--cor-borda); font-size: .93rem; color: var(--cor-texto-primario); }
tr:last-child td { border-bottom: 0; }
tr:hover td { background: #F9FBFF; }
td a { color: var(--cor-primaria); font-weight: 600; text-decoration: none; transition: color 200ms; }
td a:hover { color: var(--cor-primaria-escura); text-decoration: underline; }
/* Link que troca de módulo (abre em nova aba — ver web.link_modulo). A setinha avisa
   ANTES do clique que a aba é nova; sem ela, a aba nova pega o usuário de surpresa. */
a.link-modulo { color: var(--cor-primaria); font-weight: 600; text-decoration: none; }
a.link-modulo:hover { color: var(--cor-primaria-escura); text-decoration: underline; }
.link-modulo-marca { font-size: .78em; margin-left: 3px; opacity: .65; text-decoration: none;
  display: inline-block; vertical-align: super; line-height: 1; }
.flash { padding: 14px 16px; border-radius: 8px; margin-bottom: 16px; font-size: .93rem; font-weight: 500; }
.flash.sucesso { background: #E8F5E9; color: #1B5E20; border: 1px solid #C8E6C9; }
.flash.erro { background: #FFEBEE; color: var(--cor-alerta-forte); border: 1px solid #FFCDD2; }
form.filtro { display: flex; gap: 10px; flex-wrap: wrap; }
input, select, textarea { font: inherit; padding: 9px 12px; border: 1px solid var(--cor-borda);
  border-radius: 6px; background: #fff; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--cor-primaria-escura); border-color: transparent; }
form.filtro input, form.filtro select { width: auto; }
.grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px; }
.grade .campo-l { grid-column: 1 / -1; }
label { display: block; font-size: .84rem; font-weight: 600; color: var(--cor-texto-secundario); margin-bottom: 5px; }
.acoes-form { margin-top: 20px; display: flex; gap: 10px; }
.selo { display: inline-block; padding: 4px 12px; border-radius: 16px; font-size: .78rem; font-weight: 600; }
.selo.Ativo { background: #E8F5E9; color: #1B5E20; }
.selo.Suspenso { background: #FFF3E0; color: #E65100; }
.selo.Encerrado, .selo.Arquivado { background: #EEEEEE; color: #424242; }
.selo.nao-tratada { background: var(--cor-status-nao-tratada); color: #212121; }
.caixa-login { background: #fff; border: 1px solid var(--cor-borda); border-radius: 12px;
  padding: 36px; width: 360px; box-shadow: 0 8px 30px rgba(30,58,95,.12); }
.caixa-login h1 { text-align: center; margin-bottom: 22px; }
.caixa-login .campo { margin-bottom: 14px; }
.detalhe-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 20px; }
.detalhe-grade .rotulo { font-size: .78rem; text-transform: uppercase; color: var(--cor-texto-secundario);
  letter-spacing: .04em; }
.detalhe-grade .valor { font-size: .95rem; margin-top: 2px; }
.vazio { color: var(--cor-texto-secundario); padding: 30px; text-align: center; }
.em-breve { text-align: center; padding: 60px 20px; color: var(--cor-texto-secundario); }
.em-breve .icone { font-size: 3rem; margin-bottom: 12px; }
/* ---- Processo detalhe: coluna única ----
   Era `1fr 320px` com um painel `position: sticky` à direita. No celular a coluna de
   320px não cabia e o painel (timesheet) subia por cima do conteúdo, deixando a ficha
   ilegível. O painel foi desmontado — tudo o que havia nele virou card do Resumo —, então
   o container é só uma coluna, sem breakpoint para dar errado. */
.processo-container { display: block; }
.processo-main { min-width: 0; }
.dados-processo { border-top: 4px solid var(--cor-primaria); }
.processo-abas { margin-top: 24px; }
.tab-nav { display: flex; gap: 0; border-bottom: 2px solid var(--cor-borda); margin-bottom: 24px; role: tablist; }
.tab-button { padding: 12px 20px; background: transparent; border: none; color: var(--cor-texto-secundario);
  font-size: .95rem; font-weight: 500; cursor: pointer; border-bottom: 3px solid transparent; transition: all 200ms;
  position: relative; top: 2px; }
.tab-button:hover { color: var(--cor-primaria); }
.tab-button.active { color: var(--cor-primaria); border-bottom-color: var(--cor-primaria); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.panel-data { font-size: .75rem; color: var(--cor-texto-secundario); font-weight: 600; }
.panel-titulo { color: var(--cor-texto-primario); margin-top: 2px; }
.panel-titulo a { color: var(--cor-primaria); text-decoration: none; font-weight: 600; }
.panel-titulo a:hover { text-decoration: underline; }
/* Panel Card Header */
.panel-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
/* Panel Financeiro */
.panel-financeiro { display: flex; flex-direction: column; gap: 6px; }
.fin-linha { display: flex; justify-content: space-between; gap: 8px; font-size: .85rem; padding: 6px 0; border-bottom: 1px solid var(--cor-borda); align-items: center; }
.fin-linha.fin-total { border-top: 1px solid var(--cor-borda); border-bottom: none; padding-top: 8px; font-weight: 600; }
.fin-label { color: var(--cor-texto-secundario); font-weight: 500; flex: 1; }
.fin-valor { font-weight: 600; text-align: right; min-width: 60px; }
.panel-buttons { display: flex; gap: 6px; }
.btn-small {
  background: var(--cor-primaria);
  color: #FFFFFF;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 150ms;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-small:hover {
  background: var(--cor-primaria-escura);
  box-shadow: 0 1px 4px rgba(30, 136, 229, 0.3);
}
.btn-tiny {
  background: var(--cor-primaria);
  color: #FFFFFF;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 150ms;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
}
.btn-tiny:hover {
  background: var(--cor-primaria-escura);
  box-shadow: 0 1px 4px rgba(30, 136, 229, 0.3);
}
/* ---- Faturas: edição ---- */
.fatura-grid { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }
.fatura-grid > div { min-width: 0; }
.fatura-emissor { position: sticky; top: 100px; }
.fatura-logo-box { max-width: 500px; }
@media (max-width: 900px) { .fatura-grid { grid-template-columns: 1fr; } .fatura-emissor { position: static; } }
/* ---- Publicações: fila ---- */
.publicacao-item { border-top: 4px solid var(--cor-status-nao-tratada); }
/* Publicação sendo tratada no overlay: destaque para não perder a referência ao fundo. */
.publicacao-em-tratamento { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }
.painel-teor { max-height: 100%; overflow-y: auto; font-size: .82rem; line-height: 1.5;
  color: var(--cor-texto-secundario); white-space: pre-wrap; }
/* Botões SEMPRE na lateral: o bloco de texto encolhe (min-width:0 permite quebrar dentro
   do flex), as ações não encolhem nem descem para baixo do teor. */
.pub-cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pub-cabecalho-texto { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.acoes-publicacao { display: flex; align-items: flex-start; gap: 6px; flex-shrink: 0;
  flex-wrap: wrap; justify-content: flex-end; max-width: 260px; }
@media (max-width: 700px) {
  /* Só em tela estreita a lateral vira linha de baixo — senão não caberia nada. */
  .pub-cabecalho { flex-direction: column; }
  .acoes-publicacao { max-width: none; justify-content: flex-start; }
}
/* Aviso anti-duplicidade: providências já lançadas para o mesmo processo. */
.ja-lancado { margin-top: 6px; font-size: .82rem; color: var(--cor-aviso-texto); background: var(--cor-aviso-fundo);
  border: 1px solid var(--cor-aviso-borda); border-radius: 6px; padding: 5px 9px; }
.ja-lancado a { color: var(--cor-aviso-texto); font-weight: 600; }

/* ---- Publicações: overlay de tratamento (glassmorphism, layout horizontal) ---- */
.overlay-tratamento { position: fixed; inset: 0; z-index: 80; display: flex;
  align-items: center; justify-content: center; padding: 24px; }
.overlay-fundo { position: absolute; inset: 0; background: rgba(15, 32, 55, .45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cartao-tratamento { position: relative; width: min(1180px, 100%); max-height: calc(100vh - 48px);
  display: flex; flex-direction: column; border-radius: 16px; overflow: hidden;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 24px 60px rgba(15, 32, 55, .32); }
.tratamento-topo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 22px; border-bottom: 1px solid rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .38); }
.tratamento-topo h2 { margin: 0; font-size: 1.05rem; color: var(--cor-primaria-escura); }
.tratamento-topo small { color: var(--cor-texto-secundario); }
.tratamento-abas { display: flex; gap: 6px; margin-left: auto; }
.tratamento-abas a { padding: 7px 15px; border-radius: 20px; font-size: .86rem; font-weight: 600;
  text-decoration: none; color: var(--cor-texto-secundario);
  background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .7); }
.tratamento-abas a:hover { color: var(--cor-primaria); }
.tratamento-abas a.ativa { background: var(--cor-primaria); color: #FFFFFF; border-color: transparent; }
.tratamento-fechar { color: var(--cor-texto-secundario); text-decoration: none; font-size: 1.2rem;
  line-height: 1; padding: 4px 6px; }
.tratamento-fechar:hover { color: var(--cor-alerta); }
/* Horizontal: processo | providência | teor (era uma pilha vertical na lateral). */
.tratamento-corpo { display: grid; grid-template-columns: 1fr 1.4fr 1.2fr; gap: 0;
  overflow-y: auto; }
.tratamento-coluna { padding: 18px 22px; min-width: 0; display: flex; flex-direction: column; }
.tratamento-coluna + .tratamento-coluna { border-left: 1px solid rgba(255, 255, 255, .55); }
.tratamento-coluna h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--cor-primaria); margin: 0 0 10px; font-weight: 700; }
.tratamento-coluna label { font-size: .78rem; margin-bottom: 3px; }
.tratamento-coluna input, .tratamento-coluna select, .tratamento-coluna textarea {
  background: rgba(255, 255, 255, .85); border-color: rgba(0, 0, 0, .12); }
.tratamento-previa { margin-top: 10px; padding: 9px 12px; border-radius: 8px;
  background: rgba(30, 136, 229, .12); }
.tratamento-previa small { color: var(--cor-texto-secundario); }
.tratamento-previa div { font-weight: 700; color: var(--cor-primaria-escura); font-size: 1.05rem; }
.tratamento-acoes { margin-top: auto; padding-top: 16px; display: flex; gap: 8px; }
@media (max-width: 980px) {
  .tratamento-corpo { grid-template-columns: 1fr; }
  .tratamento-coluna + .tratamento-coluna { border-left: 0; border-top: 1px solid rgba(255,255,255,.55); }
  .tratamento-abas { margin-left: 0; width: 100%; }
}
/* ---- PWA: convite de instalação (revelado por JS só quando o aparelho suporta) ---- */
.instalar-app-ios { margin-top: 8px; padding: 8px 10px; border-radius: 6px;
  background: rgba(30, 136, 229, .10); font-size: .8rem; line-height: 1.45; }
.caixa-login .instalar-app { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cor-borda); }
.btn-primary { background: var(--cor-primaria); color: #FFFFFF; border: none; padding: 10px 16px;
  border-radius: 6px; font-weight: 600; cursor: pointer; transition: all 200ms; }
.btn-primary:hover { background: var(--cor-primaria-escura); box-shadow: 0 2px 8px rgba(30, 136, 229, 0.3); }
/* ---- Agenda: calendário ---- */
.alterna-visao { display: inline-flex; gap: 4px; }
.cal-nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cal-titulo { font-size: 1.1rem; color: var(--cor-primaria); min-width: 165px; text-align: center; }
table.calendario { table-layout: fixed; }
table.calendario th { text-align: center; }
.cal-dia { vertical-align: top; height: 92px; padding: 6px 7px; cursor: pointer; }
.cal-dia:hover { background: #eef3fa; }
.cal-dia:hover .cal-mais { visibility: visible; }
.cal-mais { visibility: hidden; color: var(--cor-primaria-escura); font-weight: 700; float: right; }
.cal-num { font-weight: 600; font-size: .85rem; margin-bottom: 4px; }
.cal-dia.fora-mes { background: #fafbfd; }
.cal-dia.fora-mes .cal-num span { color: #b6bfca; }
.cal-dia.fds { background: #f6f8fb; }
.cal-dia.cal-hoje { outline: 2px solid var(--cor-destaque); outline-offset: -2px; }
.cal-tag-hoje { color: var(--cor-aviso-texto); font-weight: 700; margin-left: 4px; }
.cal-dia.feriado { background: var(--cor-alerta-fundo); }
.cal-dia.feriado:hover { background: #fadbd7; }
.cal-dia.feriado .cal-num span { color: var(--cor-alerta-texto); }
.cal-feriado-desc { color: var(--cor-alerta-texto); font-size: .72rem; font-weight: 600; line-height: 1.25; margin-bottom: 3px; }
.cal-item { display: block; font-size: .72rem; line-height: 1.3; padding: 2px 6px; margin-bottom: 3px;
  border-radius: 4px; color: #fff !important; font-weight: 600; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-item:hover { text-decoration: none; filter: brightness(1.15); }
.cal-item.tarefa { background: var(--cor-primaria-escura); }
.cal-item.audiencia { background: #6a3fa0; }
.cal-item.prazo { background: #b3392e; }
.cal-item.concluida { opacity: .5; text-decoration: line-through; }
.cal-legenda { display: flex; gap: 18px; margin-top: 10px; color: var(--cor-texto-secundario); font-size: .82rem; }
.cal-legenda .quad { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; }
.cal-legenda .quad.tarefa { background: var(--cor-primaria-escura); }
.cal-legenda .quad.audiencia { background: #6a3fa0; }
.cal-legenda .quad.prazo { background: #b3392e; }
.cal-legenda .quad.feriado-q { background: var(--cor-alerta-fundo); border: 1px solid #f5c6c1; }
/* ---- Cálculos: demonstrativo ---- */
.demonstrativo { font-size: .92rem; }
.demo-proc { color: var(--cor-texto-secundario); margin-bottom: 6px; }
.demo-cab { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--cor-primaria); }
.demo-secao { margin-top: 18px; }
table.demo-tab, table.demo-resumo { border: 0; }
.demo-tab td { padding: 5px 8px; border-bottom: 1px dotted #e3e8ef; font-size: .88rem; }
.demo-tab td.num, .demo-resumo td.num { text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; width: 130px; }
.demo-tab .formula { color: var(--cor-texto-secundario); font-size: .8rem; }
.demo-tab tr.demo-desc td { font-weight: 700; color: var(--cor-primaria); border-bottom: 0; padding-top: 10px; }
.demo-tab tr.demo-sub td { font-weight: 700; border-bottom: 2px solid var(--cor-borda); }
.demo-resumo th { text-align: right; }
.demo-resumo th:first-child { text-align: left; }
.demo-resumo tr.demo-total td { font-weight: 700; border-top: 2px solid var(--cor-primaria);
  font-size: .95rem; }
/* ---- bolinhas de estágio (agenda do processo) ---- */
.estagios { display: inline-flex; gap: 6px; align-items: center; }
.bolinha { width: 15px; height: 15px; border-radius: 50%; border: 1px solid #c2cad6;
  background: #fff; cursor: pointer; padding: 0; transition: transform .1s; }
.bolinha:hover { transform: scale(1.2); }
.bolinha.bo-pendente.on { background: #6b7686; border-color: #6b7686; }
.bolinha.bo-em_progresso.on { background: var(--cor-primaria-escura); border-color: var(--cor-primaria-escura); }
.bolinha.bo-concluida.on { background: var(--cor-sucesso-texto); border-color: var(--cor-sucesso-texto); }
.filtro-datas { display: inline-flex; gap: 6px; align-items: center; }
.filtro-datas input[type=date] { width: auto; }
/* Filtro em CAIXAS marcáveis (financeiro): categorias combináveis, no lugar de um select
   de escolha única. Cada caixa é uma pílula clicável — o alvo de toque no celular é o
   rótulo inteiro, não só o quadradinho. */
.filtro-caixas { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.caixa-filtro { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--cor-fundo-card); border: 1px solid var(--cor-borda); border-radius: 999px;
  padding: 6px 12px; font-size: .85rem; margin: 0; user-select: none; }
.caixa-filtro:hover { border-color: var(--cor-primaria); }
.caixa-filtro input { width: auto; margin: 0; accent-color: var(--cor-primaria); }
.caixa-filtro:has(input:checked) { background: var(--cor-primaria-fundo);
  border-color: var(--cor-primaria); color: var(--cor-primaria); font-weight: 600; }
/* ---- Agenda: painel kanban ---- */
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.kb-coluna { background: #eef1f5; border: 1px solid var(--cor-borda); border-radius: 10px; padding: 8px; }
.kb-cabecalho { font-weight: 700; font-size: .9rem; padding: 6px 10px; border-radius: 6px; margin-bottom: 8px;
  display: flex; justify-content: space-between; align-items: center; color: #fff; }
.kb-cabecalho.kb-pendente { background: #6b7686; }
.kb-cabecalho.kb-em_progresso { background: var(--cor-primaria-escura); }
.kb-cabecalho.kb-concluida { background: var(--cor-sucesso-texto); }
.kb-contador { background: rgba(255,255,255,.3); border-radius: 12px; padding: 0 8px; font-size: .8rem; }
/* A COLUNA rola, não a página (pedido do usuário, 2026-08-24). Antes o quadro crescia com
   o número de cartões: para ver o fim da coluna mais cheia era preciso rolar a tela toda —
   e aí o cabeçalho das outras colunas saía de vista, junto com a barra de filtros. Agora
   cada pilha tem a própria barra de rolagem e o quadro cabe na janela.
   O `calc` desconta, por alto, a barra de filtros + o cabeçalho da coluna + as margens da
   página; `min-height` impede que numa janela baixa a coluna vire uma fresta onde nem um
   cartão coube — e sem altura nenhuma não haveria alvo para soltar o que se arrasta. */
.kb-lista { display: flex; flex-direction: column; gap: 8px; padding: 4px; border-radius: 6px;
  max-height: calc(100vh - 260px); min-height: 140px; overflow-y: auto; }
.kb-lista.kb-sobre { background: #dde7f3; outline: 2px dashed var(--cor-primaria-escura); }
.kb-card { background: #fff; border: 1px solid var(--cor-borda); border-left: 4px solid var(--cor-texto-secundario);
  border-radius: 8px; padding: 9px 11px; cursor: grab; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.kb-card:active { cursor: grabbing; }
.kb-card.kb-arrastando { opacity: .45; }
/* Card com processo/atendimento vinculado: o corpo inteiro navega para o caso. O hover e
   o anel de foco existem para o alvo clicável não ficar invisível. */
.kb-card-clicavel:hover { border-color: var(--cor-primaria-escura);
  box-shadow: 0 2px 8px rgba(30, 136, 229, .18); }
.kb-card-clicavel:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }
.kb-card.kb-tipo-tarefa { border-left-color: var(--cor-primaria-escura); }
.kb-card.kb-tipo-audiencia { border-left-color: #6a3fa0; }
.kb-card.kb-tipo-prazo { border-left-color: #b3392e; }
.kb-card-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.kb-etq { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 1px 7px;
  border-radius: 10px; color: #fff; }
.kb-etq.kb-tarefa { background: var(--cor-primaria-escura); }
.kb-etq.kb-audiencia { background: #6a3fa0; }
.kb-etq.kb-prazo { background: #b3392e; }
.kb-data { font-size: .78rem; color: var(--cor-texto-secundario); font-variant-numeric: tabular-nums; }
.kb-data.kb-vencido { color: var(--cor-alerta-texto); font-weight: 700; }
.kb-titulo { display: block; font-weight: 600; color: var(--cor-texto-primario); text-decoration: none; font-size: .9rem; line-height: 1.3; }
.kb-titulo:hover { color: var(--cor-primaria); text-decoration: underline; }
.kb-proc { font-size: .78rem; margin-top: 4px; }
.kb-proc a { color: var(--cor-primaria); text-decoration: none; font-weight: 600; }
.kb-resp { font-size: .76rem; color: var(--cor-texto-secundario); margin-top: 3px; }
.kb-aviso { display: inline-block; margin-top: 5px; font-size: .68rem; font-weight: 700; color: var(--cor-alerta-texto);
  background: var(--cor-alerta-fundo); padding: 1px 7px; border-radius: 4px; }
/* Cartão que está no quadro pelo INÍCIO antecipado: a data grande é a de começar, então
   o vencimento oficial precisa aparecer aqui — senão o prazo parece ter outra data. */
.kb-inicio { font-size: .7rem; color: var(--cor-aviso-texto); margin-top: 4px; }
@media (max-width: 860px) {
  .kanban { grid-template-columns: 1fr; }
  /* Em coluna única a rolagem interna atrapalha: a página inteira já rola. */
  .kb-lista { max-height: none; overflow-y: visible; }
}

/* ---- Caixa de resumo da providência (overlay `?ver=`) ----
   Reusa `overlay-tratamento`/`cartao-tratamento` do painel de publicação — o desenho é o
   mesmo por pedido do usuário. Aqui ficam só as partes que a caixa tem a mais: o modo
   LEITURA (dado com rótulo, em vez de campo) e a checklist marcável. */
.caixa-providencia .tratamento-topo h2 { display: flex; align-items: center; gap: 8px; }
.prov-acoes-topo { display: flex; gap: 6px; margin-left: auto; align-items: center; }
.prov-dado { font-size: .9rem; margin-bottom: 10px; color: var(--cor-texto-primario); }
.prov-rotulo { display: block; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--cor-texto-secundario); margin-bottom: 2px; }
.prov-descricao { font-size: .9rem; line-height: 1.5; overflow-y: auto; }
.prov-paragrafo { margin: 0 0 8px; white-space: pre-wrap; }
/* Cada item é um <form> (posta sem JS), então precisa parecer uma LINHA, não um bloco. */
.prov-item { display: flex; align-items: flex-start; gap: 9px; padding: 5px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .06); }
.prov-item:last-child { border-bottom: 0; }
.prov-caixa { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; padding: 0;
  border: 1.5px solid var(--cor-texto-secundario); border-radius: 5px; background: #fff;
  cursor: pointer; font-size: .8rem; line-height: 1; color: #fff; }
.prov-caixa:hover { border-color: var(--cor-primaria); }
.prov-item.feito .prov-caixa { background: var(--cor-sucesso-texto);
  border-color: var(--cor-sucesso-texto); }
.prov-item.feito .prov-item-texto { text-decoration: line-through;
  color: var(--cor-texto-secundario); }
.prov-item-texto { flex: 1; }
.prov-progresso { display: inline-block; margin-left: 6px; font-size: .72rem; font-weight: 700;
  color: var(--cor-primaria); background: var(--cor-primaria-fundo); border-radius: 10px;
  padding: 1px 8px; vertical-align: middle; }
@media (max-width: 980px) {
  .prov-acoes-topo { margin-left: 0; }
}

/* ---- Menu de ações: botão só de ícone que abre uma lista (padrão de TODOS os módulos) ---- */
.menu-acoes { position: relative; display: inline-block; }
.btn-icone { padding: 9px 13px; line-height: 1.2; font-size: 1.05rem; }
.menu-lista { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 230px;
  background: #FFFFFF; border: 1px solid var(--cor-borda); border-radius: 8px; padding: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14); flex-direction: column; gap: 2px; display: flex; }
.menu-lista[hidden] { display: none; }
/* Menu que abre para CIMA: o da catraca no pé da barra lateral não tem espaço abaixo. */
.menu-lista-acima { top: auto; bottom: calc(100% + 6px); right: auto; left: 0; min-width: 210px; }
.menu-lista a, .menu-lista button { display: block; width: 100%; text-align: left; background: transparent;
  border: 0; color: var(--cor-texto-primario); padding: 9px 12px; border-radius: 6px; font-size: .9rem;
  text-decoration: none; cursor: pointer; font-weight: 500; }
.menu-lista a:hover, .menu-lista button:hover { background: var(--cor-primaria-fundo); color: var(--cor-primaria); }
.menu-lista button.item-perigo:hover { background: #FFEBEE; color: var(--cor-alerta-forte); }
.menu-lista .menu-titulo { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--cor-texto-secundario); padding: 8px 12px 4px; font-weight: 700; }
.menu-lista hr { border: 0; border-top: 1px solid var(--cor-borda); margin: 4px 0; }
/* ---- Seleção em lote (checkbox nas linhas + barra de ações) ---- */
.col-selecao { width: 38px; text-align: center; }
.col-selecao input { width: auto; }
.barra-lote { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 10px 14px;
  background: var(--cor-primaria-fundo); border: 1px solid var(--cor-primaria-clara); border-radius: 8px; font-size: .9rem; }
.barra-lote[hidden] { display: none; }
.barra-lote strong { color: var(--cor-primaria); }

/* ---- "Memorizar este dispositivo" (tela do 2FA) ---- */
.lembrar-dispositivo { display: flex; align-items: flex-start; gap: 8px; font-weight: 400;
  font-size: .86rem; margin: 4px 0 14px; cursor: pointer; }
.lembrar-dispositivo input { width: auto; margin-top: 3px; }
.lembrar-dispositivo small { display: block; color: var(--cor-texto-secundario); font-weight: 400;
  line-height: 1.4; margin-top: 3px; }

/* ---- Barra de filtros compacta (cabe filtros + botões de ação na mesma linha) ---- */
.filtro-compacto { align-items: center; gap: 8px; }
.filtro-compacto input, .filtro-compacto select { font-size: .84rem; padding: 6px 9px; }
.filtro-compacto .btn { font-size: .84rem; padding: 7px 12px; }
.filtro-compacto .btn-icone { padding: 6px 11px; font-size: 1rem; }
/* Espaço reservado: some da vista sem sumir do layout (barra não muda de forma). */
.invisivel { visibility: hidden; }
.acoes-agenda { display: inline-flex; gap: 6px; margin-left: auto; }
.menu-lista a.ativo { background: var(--cor-primaria-fundo); color: var(--cor-primaria); font-weight: 700; }

/* ---- Toggle (interruptor verde quando ligado) ---- */
.toggle-linha { display: flex; align-items: center; gap: 10px; font-weight: 400;
  cursor: pointer; margin: 0; }
.toggle-linha input.toggle { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-visor { flex: 0 0 auto; width: 44px; height: 24px; border-radius: 12px;
  background: var(--cor-desabilitado); position: relative; transition: background 180ms; }
.toggle-visor::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px;
  height: 18px; border-radius: 50%; background: #FFFFFF; transition: transform 180ms;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); }
/* O estado ligado vem de uma CLASSE posta pelo JS (ver base.html), não de `:checked`:
   assim o visor acompanha também mudanças programáticas do checkbox (formulário
   restaurado, teste automatizado) e não depende de o motor casar o seletor de irmão. */
.toggle-linha.ligado .toggle-visor,
.toggle-linha input.toggle:checked + .toggle-visor { background: var(--cor-sucesso); }
.toggle-linha.ligado .toggle-visor::after,
.toggle-linha input.toggle:checked + .toggle-visor::after { transform: translateX(20px); }
.toggle-linha input.toggle:focus-visible + .toggle-visor { outline: 2px solid var(--cor-primaria); }
/* ---- Vencimentos das parcelas (financeiro) ---- */
.lista-parcelas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px; margin-top: 12px; }
.parcela-linha label { font-size: .76rem; color: var(--cor-texto-secundario); margin-bottom: 3px; }
#campos-parcelas[hidden] { display: none; }

/* ---- Aviso da busca assíncrona no DataJud (cadastro de processo) ---- */
.aviso-datajud { display: block; margin-top: 6px; font-size: .82rem; color: var(--cor-texto-secundario); }
.aviso-datajud.erro { color: var(--cor-alerta-forte); }
.aviso-datajud[hidden] { display: none; }

/* ---- Colunas escolhíveis nos relatórios ---- */
.colunas-relatorio { width: 100%; }
.colunas-lista { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 12px;
  border: 1px dashed var(--cor-borda); border-radius: 8px; background: #FAFBFD; }
.coluna-item { display: flex; align-items: center; gap: 6px; font-size: .85rem;
  font-weight: 400; margin: 0; white-space: nowrap; }
.coluna-item input { width: auto; }

/* Linha de totalização ao pé de uma tabela (ex.: horas na nova fatura). */
.linha-total td { background: var(--cor-primaria-fundo); border-top: 2px solid var(--cor-borda); }

/* ---- Relatórios: barra de download ----
   O botão do formulário se chamava "Gerar" e só refazia a consulta na TELA; o download
   ficava atrás de um "Exportar:" cinza e pequeno, fácil de não ver (sobretudo no celular,
   onde cai abaixo da dobra). O botão virou "Aplicar filtros" e estes aqui viraram a ação
   destacada da página. */
.rotulo-baixar { font-size: .88rem; font-weight: 600; color: var(--cor-texto-secundario); }
.btn-baixar { display: inline-flex; align-items: center; gap: 4px; padding: 7px 13px;
  border-radius: 6px; font-size: .86rem; font-weight: 600; text-decoration: none;
  background: var(--cor-primaria-fundo); color: var(--cor-primaria-escura);
  border: 1px solid var(--cor-primaria); transition: all 150ms; }
.btn-baixar:hover { background: var(--cor-primaria); color: #FFFFFF; }

/* ---- Referência de variáveis dos modelos ---- */
.variavel-copiavel { cursor: pointer; background: var(--cor-primaria-fundo); padding: 2px 8px; border-radius: 5px;
  color: var(--cor-primaria-escura); font-size: .85rem; }
.variavel-copiavel:hover { background: #E3EDFF; }

/* ---- Resumo do processo: cards empilhados (agenda, financeiro, vinculados, cálculos) ----
   Antes eram colunas `auto-fit minmax(300px)`: financeiro e vinculados ficavam estreitos e
   com alturas diferentes ao lado da agenda, que ocupava a linha inteira. Agora todos têm a
   mesma largura e alinham entre si — e a mesma regra já serve ao celular. */
.resumo-cards { display: flex; flex-direction: column; gap: 16px; }
.resumo-card { margin-bottom: 0; }
.resumo-card .topo { margin-bottom: 14px; }
.resumo-card h2 { font-size: 1rem; }
.resumo-card .vazio { padding: 16px 0; text-align: left; font-size: .88rem; }

/* Blocos internos do card Financeiro (timesheet e lançamentos moram dentro dele). */
.fin-bloco { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--cor-borda); }
.fin-bloco-titulo { display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-bottom: 10px; font-weight: 600; font-size: .92rem;
  color: var(--cor-primaria); }
.fin-detalhe-lanc { margin-top: 14px; }
.fin-detalhe-lanc summary { cursor: pointer; color: var(--cor-texto-secundario);
  font-size: .88rem; }
.fin-apontamentos { list-style: none; margin: 10px 0 0; padding: 0; display: flex;
  flex-direction: column; gap: 4px; }
.fin-apontamentos li { display: flex; align-items: center; gap: 8px; font-size: .84rem;
  padding: 4px 0; border-bottom: 1px solid var(--cor-borda); }
.fin-apontamentos form { display: inline; }
.fin-apont-data { color: var(--cor-texto-secundario); font-variant-numeric: tabular-nums; }
.fin-apont-desc { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fin-apont-horas { font-weight: 600; white-space: nowrap; }
/* Apontar horas: uma linha só no desktop, quebra sozinha no celular. */
.fin-timesheet-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 12px; }
.fin-timesheet-form input { width: auto; padding: 7px 9px; font-size: .88rem; }
.fin-timesheet-form .campo-horas { width: 72px; }
.fin-timesheet-form .campo-atividade { flex: 1; min-width: 150px; }
.fin-acoes-rodape { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px;
  padding-top: 14px; border-top: 1px solid var(--cor-borda); }

/* ---- Vínculo entre processos (principal ↔ desdobramentos) ---- */
.vinculo-processos { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--cor-borda);
  display: flex; flex-direction: column; gap: 6px; }
.vinculo-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .88rem; }
.vinculo-etq { font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; padding: 2px 9px; border-radius: 10px;
  background: #EDE7F6; color: #4527A0; }
.vinculo-etq.vinculo-filho { background: #E1F5FE; color: #01579B; }

/* ---- Lançamento de andamento (data + texto multilinha + clipe de anexo) ---- */
.form-andamento { display: flex; flex-direction: column; gap: 8px; }
.andamento-linha { display: flex; gap: 10px; align-items: flex-start; }
.andamento-texto { flex: 1; resize: vertical; min-height: 44px; font: inherit; }
.andamento-acoes { display: flex; gap: 8px; align-items: center; }
.nome-arquivo { color: var(--cor-texto-secundario); font-size: .82rem; }
.nome-arquivo[hidden] { display: none; }
/* Preserva as quebras de linha digitadas no andamento manual. */
.texto-andamento { white-space: pre-wrap; }
@media (max-width: 700px) { .andamento-linha { flex-direction: column; } }

/* ---- Anexos de andamento (documentos guardados no banco) ---- */
.campo-arquivo { width: auto; max-width: 230px; font-size: .85rem; padding: 6px 8px; }
.lista-anexos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.anexo { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px;
  background: var(--cor-primaria-fundo); border: 1px solid var(--cor-borda); border-radius: 14px; font-size: .82rem; }
.anexo a { color: var(--cor-primaria); text-decoration: none; font-weight: 600; }
.anexo a:hover { text-decoration: underline; }
.anexo small { color: var(--cor-texto-secundario); }
.anexo form { display: inline; }
.btn-anexo-remover { background: transparent; border: 0; color: var(--cor-texto-secundario);
  cursor: pointer; font-size: .8rem; padding: 0 2px; width: auto; }
.btn-anexo-remover:hover { color: var(--cor-alerta); }
.linha-edicao-andamento[hidden] { display: none; }
.linha-edicao-andamento td { background: #F9FBFF; }
/* O clipe "anexar" é um <label> estilizado de botão sobre um input escondido. */
label.btn.pequeno { display: inline-block; margin: 0; font-weight: 500; }

/* ---- Blocos de qualificação (cadastro de cliente PF/PJ, alternados por JS) ---- */
.bloco-qualificacao { border: 1px solid var(--cor-borda); border-radius: 8px; padding: 12px 14px; }
.bloco-qualificacao legend { padding: 0 6px; font-size: .8rem; font-weight: 700;
  color: var(--cor-primaria); text-transform: uppercase; letter-spacing: .04em; }

/* Honorário de êxito sem data: vence quando o caso encerrar (2026-08-12). */
.selo-condicionado { display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: var(--cor-primaria-fundo); color: var(--cor-primaria-escura);
  font-size: .78rem; font-weight: 600; white-space: nowrap; }

/* Endereço em texto corrido de cadastro anterior ao desmembramento (2026-08-12). */
.aviso-endereco-antigo { padding: 10px 12px; margin-bottom: 12px; border-radius: 8px;
  background: #FFF8E1; border: 1px solid #FFE082; font-size: .88rem; }
.aviso-endereco-antigo small { color: var(--cor-texto-secundario); display: block; margin-top: 4px; }

/* ---- Opção "CAIXA ALTA" nos cadastros (escolha do usuário, não regra do sistema) ---- */
.opcao-caixa-alta { display: flex; align-items: flex-start; gap: 8px; font-weight: 400;
  padding: 10px 12px; border: 1px dashed var(--cor-borda); border-radius: 8px; background: #FAFBFD; }
.opcao-caixa-alta input { width: auto; margin-top: 3px; }
.opcao-caixa-alta small { display: block; color: var(--cor-texto-secundario); font-weight: 400; }

@media print {
  .sidebar, .nao-imprime, .flash { display: none !important; }
  .conteudo { margin-left: 0; padding: 0; }
  .cartao { border: 0; padding: 0; }
  body { background: #fff; }
}
/* Janela dividida (meia tela de um monitor comum): a barra lateral de 250px comia um
   terço do espaço útil e o conteúdo ficava espremido. Aqui ela afina e o miolo respira,
   sem ainda virar o menu deslizante — isso só abaixo de 860px. */
@media (max-width: 1100px) {
  .sidebar { width: 200px; }
  .conteudo { margin-left: 200px; padding: 24px 22px; }
  .sidebar nav a { padding: 11px 12px; gap: 8px; font-size: .9rem; }
  .rodape-sidebar, .logo { padding: 12px; }
}
@media (max-width: 860px) {
  /* Barra superior fixa com botão de menu e Sair */
  .barra-mobile { display: flex; align-items: center; gap: 12px; position: fixed; top: 0; left: 0;
    right: 0; height: 54px; background: var(--cor-primaria); color: #fff; padding: 0 12px; z-index: 50; }
  .menu-toggle { background: transparent; border: 0; color: #fff; font-size: 1.6rem; line-height: 1;
    cursor: pointer; padding: 2px 8px; width: auto; }
  .barra-mobile-titulo { font-weight: 600; flex: 1; font-size: 1rem; }
  .barra-mobile .btn-sair-mobile { color: #fff; border: 1px solid rgba(255,255,255,.45);
    padding: 6px 12px; border-radius: 6px; text-decoration: none; font-size: .85rem; }
  /* Barra lateral vira menu deslizante (off-canvas) */
  .sidebar { transform: translateX(-100%); transition: transform .25s ease; width: 230px; z-index: 60; }
  body.menu-aberto .sidebar { transform: translateX(0); box-shadow: 0 0 30px rgba(0,0,0,.35); }
  .overlay-menu { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 55; }
  body.menu-aberto .overlay-menu { display: block; }
  .conteudo { margin-left: 0; padding: 70px 16px 24px; }
  .grade { grid-template-columns: 1fr; }
  .cartoes-resumo { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
  /* Tabelas rolam horizontalmente sem quebrar o layout */
  .tabela-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabela-scroll table { min-width: 560px; }
  .caixa-login { width: 360px; max-width: 100%; padding: 28px 22px; }
  form.filtro { width: 100%; }
}

/* ==========================================================================
   CLASSES UTILITÁRIAS
   --------------------------------------------------------------------------
   Substituem os `style="..."` mais repetidos dos templates (474 das 582
   ocorrências vinham de 71 padrões iguais). Estilo inline vence qualquer
   regra, então cada troca foi verificada calculando a cascata sobre o HTML
   renderizado — só entraram aqui as propriedades em que NENHUMA regra mais
   específica disputa (por isso `width` ficou de fora: 31 casos perdiam para
   `form.filtro select`).

   Ficam no FIM do arquivo de propósito: em empate de especificidade, a última
   regra vence.
   ========================================================================== */

/* Texto */
.txt-apoio { color: var(--cor-texto-secundario); }
.txt-primario { color: var(--cor-primaria); }
.txt-alerta { color: var(--cor-alerta-texto); }
.txt-positivo { color: var(--cor-sucesso-texto); }
.txt-aviso { color: var(--cor-aviso-texto); }

/* Rótulo de campo em formulário de filtro (o padrão mais repetido do sistema) */
.rotulo-campo { display: block; font-size: .82rem; color: var(--cor-texto-secundario); }

/* Fluxo */
.em-linha { display: inline; }
.cresce { flex: 1; }
.sem-quebra { white-space: nowrap; }
.fim-da-coluna { align-self: flex-end; }

/* Espaçamento acima (escala do sistema) */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 10px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; }

/* Linha de tabela vencida/em atraso */
.linha-alerta { background: var(--cor-alerta-fundo); }

/* --- Utilitárias, 2ª leva (também verificadas contra a cascata) ----------- */
.larg-total { width: 100%; }
.larg-auto { width: auto; }
.m-0 { margin: 0; }
.mb-1 { margin-bottom: 6px; }
.mb-2 { margin-bottom: 10px; }
.mb-3 { margin-bottom: 12px; }
.centrado { text-align: center; }
.desativado { opacity: .5; cursor: not-allowed; }

/* Linha de campos que quebra sozinha (barra de filtros, ações em linha) */
.linha-campos { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }

/* Nota de rodapé de um bloco: texto de apoio, menor, com respiro em cima */
.nota { margin: 10px 0 0; color: var(--cor-texto-secundario); font-size: .85rem; }
.nota-compacta { color: var(--cor-texto-secundario); font-size: .88rem; }

/* Rótulo de campo com respiro embaixo (variante do .rotulo-campo) */
.rotulo-campo-espacado { display: block; font-size: .82rem;
  color: var(--cor-texto-secundario); margin-bottom: 6px; }

/* Opção de escolha (radio/checkbox) alinhada com o texto ao lado */
.opcao-linha { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }

/* Destaque lateral: chama atenção para um bloco sem gritar */
.bloco-destacado { border-left: 4px solid var(--cor-primaria); }

.linha-aviso { background: var(--cor-aviso-fundo-linha); }