:root {
  --marca: #44546a;
  --marca-escura: #333f52;
  --marca-clara: #eef1f5;
  --azul: #2563eb;
  --azul-escuro: #1d4ed8;
  --verde: #16a34a;
  --amarelo: #d97706;
  --vermelho: #dc2626;
  --roxo: #7c3aed;
  --cinza-texto: #374151;
  --cinza-claro: #6b7280;
  --borda: #e5e7eb;
  --fundo: #f9fafb;
  --branco: #ffffff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--fundo);
  color: var(--cinza-texto);
}

a { color: var(--marca); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 24px 32px 60px;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--branco);
  border-top: 4px solid var(--marca);
  border-bottom: 1px solid var(--borda);
  padding: 12px 24px;
  flex-wrap: wrap;
  /* Fica sempre visível ao rolar a página — altura real é medida por painelFixo.js e usada como
     offset pros painéis/cabeçalhos "congelados" de cada tela (ver .painel-fixo). */
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar-brand:hover { text-decoration: none; }
.topbar-logo { height: 28px; width: auto; display: block; }

.topbar-nav {
  display: flex;
  gap: 4px;
  flex: 1;
  /* Nunca quebra linha — sem isso, um indicador de cronômetro com nome de cliente grande
     "roubava" espaço da barra e empurrava os últimos itens do menu pra uma segunda linha.
     Em telas mais estreitas, quando os itens (que também não quebram texto) não cabem,
     rola horizontalmente em vez de "vazar" por cima dos botões ao lado. */
  flex-wrap: nowrap;
  min-width: 0;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: thin;
}

.topbar-nav a {
  color: var(--cinza-texto);
  font-weight: 500;
  padding: 6px 7px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  /* Nunca quebra o texto do próprio item em 2 linhas nem encolhe — sem isso, ao travar o
     menu numa linha só (flex-wrap: nowrap no .topbar-nav), o texto de cada item quebrava
     em 2 linhas em vez do menu inteiro. */
  white-space: nowrap;
  flex-shrink: 0;
}
.topbar-nav a:hover { background: var(--marca-clara); color: var(--marca); text-decoration: none; }
.topbar-nav a.ativo { background: var(--marca); color: var(--branco); }
.topbar-nav a.ativo:hover { background: var(--marca-escura); color: var(--branco); }

.topbar-nav-destaque {
  background: var(--branco);
  border: 1px solid var(--borda);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  font-weight: 700;
}
.topbar-nav-destaque:hover { background: var(--fundo) !important; color: var(--marca) !important; }
.topbar-nav-destaque.ativo { background: var(--branco); color: var(--marca); border-color: var(--marca); }

.topbar-user {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--cinza-claro);
  font-size: 0.9rem;
}

.link-button {
  background: none;
  border: none;
  color: var(--marca);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0;
}
.link-button:hover { text-decoration: underline; }
.acao-inline { display: inline; }

h1 { font-size: 1.5rem; margin: 0 0 16px; }
h2 { font-size: 1.15rem; margin: 24px 0 12px; }

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}
/* Quando uma das ações do cabeçalho é um <form> (não só links/botões soltos), precisa de flex
   pra ficar lado a lado — <form> é block por padrão, ao contrário de <a>/<button>. margin-left:
   auto (em vez de só confiar no justify-content:space-between do .page-header pai) garante que
   este bloco fica colado na borda direita tanto quando cabe do lado do título na MESMA linha
   quanto quando o título é comprido/tem muitos botões e ele quebra pra própria linha de baixo —
   sem isso, um bloco sozinho numa linha embrulhada cola na ESQUERDA (não tem irmão pra
   "space-between" repartir contra), fazendo os botões pularem de lado dependendo de quantos
   couberem ao lado do título (reportado pelo usuário 2026-09-11, tela de Faturamento variando
   conforme "← Mês anterior"/"Fechar"/"Reabrir" mudam de texto). */
.page-header-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }

/* Separa um bloco título+tabela do próximo quando vêm um em seguida do outro (ex: Certificados
   Digitais vencendo seguido de Processos Internos, ou os dois "Itens urgentes" do Visão Geral) —
   sem isso a segunda barra azul cola direto na tabela de cima. */
.tabela + .page-header, .tabela + .secao-titulo {
  margin-top: 28px;
}

/* Quando o título antecede uma tabela ou um grupo de cards, gruda nele: fundo azul da marca,
   texto branco, sem espaço solto entre os dois — lê como uma seção só, não dois blocos soltos. */
.page-header:has(+ .tabela),
.page-header:has(+ .stat-grid),
.secao-titulo:has(+ .tabela),
.secao-titulo:has(+ .stat-grid) {
  background: var(--marca);
  color: var(--branco);
  margin-bottom: 0;
  padding: 10px 16px;
  border-radius: 8px 8px 0 0;
  /* Mesma altura pra todas as barras, tenha botão de ação (mais alto) ou só o título
     (box-sizing: border-box, então o valor já inclui o padding vertical de 10px+10px). */
  min-height: 58px;
}
/* Quando conecta com tabela, o padding horizontal precisa bater exatamente com o padding do th
   logo abaixo (10px 14px) — senão o texto do título fica 2px fora de prumo com "Cliente"/primeira
   coluna, um desnível sutil mas visível numa barra contínua. */
.page-header:has(+ .tabela), .secao-titulo:has(+ .tabela) {
  padding-left: 14px;
  padding-right: 14px;
  /* A tabela logo abaixo tem borda cinza de 1px nas laterais — sem essa borda aqui também, o azul
     da barra fica 1px mais largo que o azul do cabeçalho da tabela, um degrau bem visível nas
     duas quinas de cima. */
  border-left: 1px solid var(--borda);
  border-right: 1px solid var(--borda);
  border-top: 1px solid var(--borda);
}
.page-header:has(+ .tabela) h1, .page-header:has(+ .tabela) h2,
.page-header:has(+ .stat-grid) h1, .page-header:has(+ .stat-grid) h2 {
  color: var(--branco);
  margin: 0;
}
.page-header:has(+ .tabela) + .tabela,
.secao-titulo:has(+ .tabela) + .tabela {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.tarefas-subnav {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--borda);
}
.tarefas-subnav a {
  padding: 8px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cinza-claro);
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  margin-bottom: -1px;
}
.tarefas-subnav a:hover { color: var(--cinza-texto); text-decoration: none; }
.tarefas-subnav a.ativo { color: var(--marca); background: var(--marca-clara); border-bottom-color: var(--marca); }

.btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--marca); color: var(--branco); }
.btn-primary:hover { background: var(--marca-escura); }
.btn-secondary { background: var(--branco); color: var(--cinza-texto); border-color: var(--borda); }
.btn-secondary:hover { background: var(--fundo); }
/* Ação reversível mas de peso (ex: reabrir competência fechada) — mesmo desenho do secundário, em
   vermelho, pra não se confundir com o botão de rotina ao lado. */
.btn-perigo { background: var(--branco); color: var(--vermelho); border-color: #fecaca; }
.btn-perigo:hover { background: #fef2f2; }
.btn-link { color: var(--cinza-claro); align-self: center; font-family: inherit; }

/* Logos de marca (Excel, Google Drive) como SVG inline — emoji nao tem esses icones. Usado dentro
   de .menu-utilitarios-painel. */
.icone-menu { flex: 0 0 16px; width: 16px; height: 16px; }

/* Link "Lançamentos" da tabela de Faturamento — ícone em vez de texto, pra sinalizar que tem
   ações lá dentro (extras, observação) sem ocupar largura na tabela principal. */
.icone-lancamentos { display: inline-block; font-size: 1.3rem; line-height: 1; text-decoration: none; transition: transform 0.1s; }
.icone-lancamentos:hover { transform: scale(1.15); }

.card {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 24px;
  max-width: 560px;
}
/* Telas de detalhe com tabela/vários campos (ex: Honorários por cliente) precisam de mais espaço
   horizontal que o .card padrão (pensado pra formulário simples de uma coluna só). */
/* PADRÃO de largura (2026-09-21): card e aviso ocupam a MESMA largura da tabela da tela — o container
   inteiro (até 1600px) —, sem o teto de 1200px que deixava a margem direita torta em relação às tabelas
   logo abaixo. O espaço em branco em cima do primeiro título (padding do card + margem do h2) também
   não soma mais dobrado. Quem precisar de um card estreito (formulário simples) usa o .card puro. */
.card-largo { max-width: none; }
.card-largo > h2:first-child { margin-top: 0; }
/* Tabela de rótulo/valor dentro do card largo (ex: status da integração no Inter): estica junto com
   o card, com a coluna de rótulo numa largura fixa, em vez de encolher pro tamanho do texto. */
.card-largo .tabela-estreita { width: 100%; max-width: none; }
.card-largo .tabela-estreita th { width: 240px; }
/* Dois .card empilhados sem nada entre eles (ex: Honorários por cliente) coincidiam sem gap nenhum
   — dava a impressão de ser um bloco só, mesmo sendo duas seções distintas. */
.card + .card { margin-top: 20px; }

/* Form da Ordem de Serviço: o .card padrão (560px) deixa os 5 botões de ação bem desalinhados,
   quebrando linha de um em um. Alarga só o card (os campos continuam com largura de leitura
   confortável via a regra abaixo) pra sobrar espaço e as ações alinharem em menos linhas. */
.card-os-form { max-width: 820px; }
.card-os-form .form label { max-width: 480px; }
.card-os-form .form label:has(textarea) { max-width: 640px; }

/* Extras da O.S. ao lado do formulário principal (no espaço vazio à direita, em vez de embaixo) —
   as duas colunas dividem o espaço em partes iguais e quebram pra baixo sozinhas em telas mais
   estreitas (flex-wrap). min-width:0 nos dois é obrigatório pelo mesmo motivo do comentário acima
   (.clientes-form-layout): sem isso, o conteúdo interno (ex: os <select> da tabela de extras) trava
   a largura mínima do card bem acima do flex-basis e o layout quebra de linha cedo demais, mesmo
   com espaço de sobra. margin-top:0 desfaz a regra ".card + .card" logo acima (pensada pra cards
   empilhados um embaixo do outro) — sem isso ela também se aplica aqui (mesmos seletores, lado a
   lado) e desalinha o topo dos dois cards. Sem novo O.S. (osEdit nulo) só o card do formulário
   existe, aí a regra ".card-os-form" (820px) acima segue valendo normalmente. */
.os-layout { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.os-layout > .card-os-form { flex: 1 1 0; min-width: 0; margin-top: 0; }
.os-layout:has(.os-extras-lateral) > .card-os-form { max-width: none; }
.os-layout > .os-extras-lateral { flex: 1 1 0; min-width: 0; max-width: none; margin-top: 0; }

/* Form de cliente tem ~30 campos — o .card padrão (560px, uma coluna só) deixava um vão vazio
   enorme à direita em qualquer tela mais larga e obrigava rolar bastante. Mais largo + os campos
   curtos agrupados em .form-grade (já existente, usado no bloco de sócios) organizam vários por
   linha; campo longo (textarea, checkbox com explicação, cabeçalho de seção) continua sozinho na
   própria linha, fora do agrupamento. */
.card-cliente-form { max-width: 960px; }

/* Editar cliente: quando tem Sócios ao lado (2 cards), os dois usam a margem toda do container
   (mesmo limite de largura das outras telas do sistema) em vez de deixar sobra, e ficam do mesmo
   tamanho (flex-basis 0 + grow igual = divide o espaço disponível em partes iguais). Sozinho (Novo
   cliente, sem Sócios), o form continua com a largura de leitura confortável de sempre (960px, ver
   .card-cliente-form) — o :has() abaixo só entra em ação quando existe um segundo .card irmão. */
.clientes-form-layout { display: flex; gap: 20px; align-items: flex-start; }
.clientes-form-layout > .card + .card { margin-top: 0; }
/* min-width:0 é obrigatório aqui: por padrão um item flex nunca encolhe abaixo da largura mínima
   do próprio conteúdo (min-width:auto implícito), então o card de Sócios se recusava a respeitar a
   divisão 50/50 sempre que a tabela por dentro precisava de mais espaço — esticava o card (e
   consequentemente espremia o card principal do lado) em vez de deixar o scroll interno da tabela
   (.tabela-scroll) assumir o excesso. */
.clientes-form-layout:has(> .card + .card) > .card { flex: 1 1 0%; max-width: none; min-width: 0; }

/* A troca lado-a-lado ↔ empilhado usa um breakpoint fixo (media query), não flex-wrap: com
   flex-wrap, a decisão dependia da largura disponível NAQUELE EXATO MOMENTO, e excluir/adicionar
   um sócio muda a altura da página o suficiente pra fazer a barra de rolagem vertical
   aparecer/sumir — que muda a largura disponível em ~15-17px e podia derrubar o card pra linha de
   baixo (ou trazer de volta) sozinho, sem o usuário ter mexido na janela. Breakpoint fixo não liga
   pra altura da página, só pra largura da janela — fica estável. Empilhado, os dois cards voltam
   pro limite de leitura de 960px (a mesma seletividade :has() de cima, senão essa regra de aqui
   perde a briga de especificidade contra a de cima e o "max-width: none" continua valendo). */
@media (max-width: 1500px) {
  .clientes-form-layout { display: block; }
  .clientes-form-layout > .card { max-width: 960px; }
  .clientes-form-layout:has(> .card + .card) > .card { max-width: 960px; }
  .clientes-form-layout > .card + .card { margin-top: 20px; }
}

.ler-certificado {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--marca-clara);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 16px;
  margin-top: 8px;
}
.ler-certificado label { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; font-weight: 600; color: var(--cinza-texto); }
.ler-certificado .texto-auxiliar { margin: 0; }
.ler-certificado .btn { align-self: flex-start; }

.form { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; font-weight: 600; color: var(--cinza-texto); }
.form label[hidden] { display: none; }
.form label.checkbox { flex-direction: row; align-items: center; font-weight: 500; }
.anexos-checkboxes { display: flex; gap: 16px; flex-wrap: wrap; }
.anexos-checkboxes .checkbox-inline { gap: 6px; }
/* Vincular obrigações ao cliente: sem teto de largura (usa toda a margem do container, como as
   outras telas). Hoje é igual ao .card-largo; a classe fica pelos estilos próprios da tela. */
.card-obrigacoes { max-width: none; }
/* Lista de checkboxes em 2 colunas em vez de uma pilha vertical só — cabe bem mais coisa por tela
   num card largo. O título de cada categoria (.form-secao) ocupa as 2 colunas, só os checkboxes em
   si ficam lado a lado; banner com fundo em vez do simples traço/texto pequeno do .form-secao
   padrão, pra separar os módulos (Fiscal/Folha/...) de um jeito bem mais claro. */
.obrigacoes-grade { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.obrigacoes-grade .form-secao {
  grid-column: 1 / -1;
  margin-top: 28px;
  padding: 8px 14px;
  background: var(--fundo);
  border-radius: 6px;
  border-top: none;
  font-size: 0.85rem;
}
.obrigacoes-grade .form-secao:first-child { margin-top: 0; }
.form label small { font-weight: 400; color: var(--cinza-claro); }

/* Ícone de ajuda ao final do título do campo (tooltip nativo via title) — usado no lugar de um
   texto explicativo embaixo do rótulo, que empurra o input pra baixo em alturas diferentes por
   campo (varia com o tamanho do texto) e desalinha os campos de um form-grade entre si. */
.rotulo-ajuda {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cinza-claro);
  color: var(--branco);
  font-size: 0.7rem;
  font-weight: 700;
  cursor: help;
  margin-left: 2px;
}
.form input, .form select, .form textarea {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 8px 10px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: var(--branco);
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-color: var(--marca);
}
.form-actions { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.btn-pequeno { padding: 5px 10px; font-size: 0.82rem; }

/* Bloco de entrada/parcelamento da Ordem de Serviço — mesmo visual de card do resto do form, mas
   com um contorno próprio pra separar visualmente do resto dos campos soltos. */
.os-fieldset {
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 14px 16px 16px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.os-fieldset legend { padding: 0 6px; font-weight: 600; font-size: 0.85rem; color: var(--cinza-texto); }
.os-fieldset legend small { font-weight: 400; color: var(--cinza-claro); }
.os-parcela-linha { display: flex; align-items: center; gap: 8px; }
.os-parcela-linha input[type="date"] { width: 160px; }
.os-parcela-linha input[type="text"] { flex: 1; }
.os-parcela-numero { font-weight: 600; color: var(--cinza-claro); min-width: 24px; }
/* Campo travado por NFS-e já emitida — o valor atual continua submetendo normalmente (não usa
   `disabled`, que removeria o campo do POST); só bloqueia a interação visualmente. */
.campo-travado-nfse { pointer-events: none; opacity: 0.65; }
.form input[readonly] { background: var(--fundo); color: var(--cinza-claro); cursor: not-allowed; }
.form select:disabled { background: var(--fundo); color: var(--cinza-claro); cursor: not-allowed; }
/* Formulário em grade — campos lado a lado em vez de empilhados, pra aproveitar telas largas
   (ex: dentro de .card-largo). Poucos campos crescem pra preencher a linha (flex-grow), em vez de
   deixar espaço vazio como aconteceria com grid + auto-fit quando sobram colunas sem conteúdo.
   Os botões ficam numa linha própria ocupando tudo. */
.form-grade { display: flex; flex-direction: row; flex-wrap: wrap; gap: 14px; align-items: start; }
/* Só filhos diretos — um seletor descendente pegaria também o <label> de título dentro de
   .divisao-socios (coluna, não linha), aí o flex-basis de 220px vira ALTURA em vez de largura e
   estoura um espaço em branco enorme antes do quadro de sócios. */
.form-grade > label { flex: 1 1 220px; }
.form-grade > .form-actions { flex: 1 1 100%; margin-top: 0; }
/* Grupo de campos curtos (ex: 2 datas + horas estimadas) que não precisam da largura padrão de
   220px — parte de uma base menor (160px), mas CRESCE igual ao .form-grade normal (flex-grow: 1,
   não 0). Padrão pra qualquer rótulo com ajuda "?" (.rotulo-ajuda) que quebra linha sozinho num
   grupo compacto: com flex-grow:0 o rótulo ficava preso nos 160px mesmo sobrando espaço na linha
   (ex: só 2 campos numa linha de 3), então o texto+ícone quebravam feio em vez de simplesmente
   ocupar o vão livre. Repare nisso em qualquer novo .form-grade-compacta — não é caso a caso. */
.form-grade-compacta > label { flex: 1 1 160px; }
/* Divisão entre sócios: título, os campos de % (um .form-grade aninhado) e o texto de ajuda
   empilhados na ordem certa, ocupando a linha toda em vez de dividir espaço com o campo ao lado. */
.divisao-socios { flex: 1 1 100%; display: flex; flex-direction: column; gap: 8px; }
.form-secao { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--cinza-claro); border-top: 1px solid var(--borda); padding-top: 14px; margin-top: 4px; }
/* Variante com "Marcar/Desmarcar todos" ao lado do rótulo do grupo (ex: clientes vinculados no
   cadastro de usuário) — só quem usa essa classe extra ganha o layout em linha. */
.form-secao-com-acoes { display: flex; justify-content: space-between; align-items: center; }
.form-secao-acoes { display: flex; gap: 10px; text-transform: none; letter-spacing: normal; font-weight: 400; }
.form-secao-acoes .btn-link { font-size: 0.78rem; }

.filtros { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.filtros.sem-margem { margin-bottom: 0; }
.filtros select, .filtros input {
  padding: 7px 10px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  font-size: 0.9rem;
}
/* Certificados: filtro e ações (Sincronizar/Vencidos no Drive/+Novo) ficavam em blocos separados,
   um embaixo do outro, mesmo cabendo os dois numa linha só — agora dividem um único flex-wrap, só
   quebrando linha quando a tela for realmente estreita pra caber tudo. */
.filtros-e-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 16px; }
.conta-bancaria-dias { display: inline-flex; gap: 6px; }
.conta-bancaria-dias input { width: 110px; }

/* Faturamento: busca de cliente sozinha na 1ª linha, resto dos filtros na 2ª — cada
   .filtros-linha ocupa a largura toda do .filtros (que é flex-wrap) pra sempre quebrar linha. */
.filtros-honorarios { flex-direction: column; align-items: stretch; }
.filtros-linha { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; width: 100%; }
.filtro-data {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cinza-texto);
}
.filtro-data-select { display: flex; gap: 6px; }

.alerta { padding: 10px 14px; border-radius: 6px; font-size: 0.9rem; margin-bottom: 12px; }
.alerta-erro { background: #fef2f2; color: var(--vermelho); border: 1px solid #fecaca; }
.alerta-info { background: var(--marca-clara); color: var(--marca); border: 1px solid #c7d0dc; }
.alerta-sucesso { background: #f0fdf4; color: var(--verde); border: 1px solid #bbf7d0; }
/* Aviso solto no .container (ex: Honorários por cliente, Boletos): mesma largura dos .card-largo e das
   tabelas da tela (o container inteiro), pra não destoar. */
.alerta-largo { max-width: none; }
/* Aviso pequeno e temporário (some sozinho via JS) — em vez da barra cheia do .alerta padrão, pra
   confirmação rápida que não precisa ocupar a linha inteira nem ficar perene na tela. */
.aviso-temporario { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 0.82rem; margin-bottom: 12px; transition: opacity 0.4s ease; }

.tabela { width: 100%; border-collapse: collapse; background: var(--branco); border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; }
/* vertical-align: top (não o "middle" padrão do navegador) — sem isso, uma célula que cresce muito
   (ex: "Editar" aberto com o form inteiro de um extra, dentro do painel flutuante estreito de
   Faturamento) empurra o conteúdo das células vizinhas da mesma linha pro meio/rodapé, flutuando
   longe do rótulo delas — lido pelo usuário como "cada linha enorme e confusa". Não muda nada
   numa linha onde toda célula já tem 1 linha de altura (a esmagadora maioria das tabelas do
   sistema), só corrige esse caso de célula desproporcionalmente alta. */
.tabela th, .tabela td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--borda); font-size: 0.9rem; vertical-align: top; }
.tabela th { background: var(--marca); color: var(--branco); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.03em; }
/* Pedido do usuário: nenhum dado de célula em negrito, em tabela nenhuma do sistema — várias
   telas usavam <strong> pra destacar nome/valor numa célula (ex: razão social em Clientes), sem
   padrão nenhum (outras telas com a mesma informação, ex: Certidões Negativas, nunca usaram
   negrito). Central aqui em vez de editar célula por célula: pega qualquer <strong> dentro de uma
   tabela, sem precisar achar/tirar a tag em cada arquivo. */
.tabela td strong { font-weight: inherit; }
.tabela-grupo td { background: var(--marca); color: var(--branco); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; padding: 8px 14px; }
.tabela-compacta { margin-bottom: 24px; }
.tabela-compacta th, .tabela-compacta td { padding: 7px 12px; font-size: 0.85rem; }

/* Tabela de poucas colunas (ex: conferência de saldo) — sem isso ela estica pro tamanho do card/
   página inteira e fica com muito espaço vazio entre valores curtos. Cabeçalho sem quebra de linha
   (nowrap) pra tabela ficar larga e baixa, não estreita e alta com o título quebrando em 2 linhas. */
.tabela-estreita { width: auto; max-width: 900px; }
.tabela-estreita th { white-space: nowrap; }

/* Tabela de lançamentos do lote (lote.ejs): "Descrição 1", "Descrição 2"... — o número de colunas
   varia por lote — têm larguras diferentes porque cada uma segue o tamanho do pedaço de texto que
   caiu ali; sem nowrap, só a coluna cujo pedaço é curto (ex: "PIX", "TED") fica estreita o bastante
   pro título "Descrição N" quebrar em 2 linhas, enquanto a vizinha (pedaço mais longo, coluna mais
   larga) fica numa linha só — mesmo cabeçalho, aparência inconsistente entre colunas do lado. */
#tabela-lancamentos th { white-space: nowrap; }

/* Card "Conferência de saldo do período" (lote.ejs / revisar-pdf.ejs): estica pra largura cheia da
   página, na mesma margem da tabela de lançamentos logo abaixo (encolher pro tamanho do conteúdo,
   como antes, sobrava um espaço vazio enorme à direita, sem alinhar com nada da tela) — a tabela de
   dentro (.tabela-estreita) acompanha essa largura em vez de encolher pro tamanho do texto, e as
   linhas ficam mais baixas (igual .tabela-compacta) já que são só 4-5 valores curtos por linha,
   sem precisar da altura de uma tabela normal cheia de texto.*/
.card-conferencia-saldo { width: 100%; max-width: 100%; }
.card-conferencia-saldo .tabela-estreita { width: 100%; max-width: none; }
.card-conferencia-saldo .tabela-estreita th,
.card-conferencia-saldo .tabela-estreita td { padding: 7px 12px; font-size: 0.85rem; }

/* Descritor de colunas (Integração > Importar Excel, ver mapeadorColunas.js) — chips arrastáveis
   que o usuário solta em cima da coluna certa na pré-visualização, em vez de digitar a letra da
   coluna à mão. */
.mapeador-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.mapeador-chip {
  cursor: grab;
  user-select: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--branco);
}
.mapeador-chip.arrastando { opacity: 0.4; }
.mapeador-chip-data { background: var(--azul-escuro); }
.mapeador-chip-descricao { background: var(--roxo); }
.mapeador-chip-valor { background: var(--verde); }
.mapeador-chip-tipo { background: var(--amarelo); color: var(--marca); }
/* Par Entradas/Saídas — arquivo sem coluna de Tipo (C/D) e sem sinal, que separa entrada e saída
   em duas colunas próprias em vez disso (ver "Valor", que continua servindo só o caso clássico). */
.mapeador-chip-entrada { background: #0d9488; }
.mapeador-chip-saida { background: var(--vermelho); }

.tabela-mapeador thead th {
  background: var(--branco);
  color: var(--cinza-texto);
  text-transform: none;
  text-align: center;
  border-bottom: 2px solid var(--borda);
  vertical-align: top;
  min-width: 110px;
  transition: background 0.15s;
}
.tabela-mapeador thead th.coluna-mapeavel-hover { background: #eff6ff; }
.coluna-mapeavel-letra { font-weight: 700; font-size: 1rem; color: var(--marca); margin-bottom: 6px; }
.coluna-mapeavel-rotulos { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 22px; }

/* Linha vertical separando cada coluna, pra planilha com muitas colunas (e texto longo quebrando
   em várias linhas) não dar risco de confundir qual célula é de qual coluna. */
.tabela-mapeador th, .tabela-mapeador td { border-right: 1px solid var(--borda); }
.tabela-mapeador th:last-child, .tabela-mapeador td:last-child { border-right: none; }

/* Pinta a coluna INTEIRA (cabeçalho + células da pré-visualização) com a cor do chip aplicado nela
   — não só o rótulo pequeno no cabeçalho — pra ficar óbvio de relance quais colunas já foram
   mapeadas e pra qual campo, principalmente em planilhas com muitas colunas. Mesma cor dos chips/
   rótulos (ver .mapeador-chip-* e .mapeador-badge-*), só que mais clara pra não brigar com o texto
   das células. Prioridade quando uma coluna tem mais de um rótulo (raro): Data > Valor > Tipo >
   Descrição — ver pintarColunas em mapeadorColunas.js. Usa box-shadow inset em vez de background:
   com border-collapse, o background de <th>/<td> às vezes não pinta por cima do fundo herdado da
   tabela/thead — box-shadow desenha por cima sempre, sem depender da ordem de pintura de fundo. */
.tabela-mapeador th.coluna-cor-data, .tabela-mapeador td.coluna-cor-data { box-shadow: inset 0 0 0 999px #dbeafe; }
.tabela-mapeador th.coluna-cor-descricao, .tabela-mapeador td.coluna-cor-descricao { box-shadow: inset 0 0 0 999px #ede9fe; }
.tabela-mapeador th.coluna-cor-valor, .tabela-mapeador td.coluna-cor-valor { box-shadow: inset 0 0 0 999px #dcfce7; }
.tabela-mapeador th.coluna-cor-tipo, .tabela-mapeador td.coluna-cor-tipo { box-shadow: inset 0 0 0 999px #fef3c7; }
.tabela-mapeador th.coluna-cor-entrada, .tabela-mapeador td.coluna-cor-entrada { box-shadow: inset 0 0 0 999px #ccfbf1; }
.tabela-mapeador th.coluna-cor-saida, .tabela-mapeador td.coluna-cor-saida { box-shadow: inset 0 0 0 999px #fee2e2; }

.mapeador-badge { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.mapeador-badge-data { background: #dbeafe; color: var(--azul-escuro); }
.mapeador-badge-descricao { background: #ede9fe; color: var(--roxo); }
.mapeador-badge-valor { background: #dcfce7; color: var(--verde); }
.mapeador-badge-tipo { background: #fef3c7; color: var(--amarelo); }
.mapeador-badge-entrada { background: #ccfbf1; color: #0d9488; }
.mapeador-badge-saida { background: #fee2e2; color: var(--vermelho); }
.mapeador-badge-remover {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
}

/* Gráfico de barras horizontais simples (sem lib externa) — usado na análise de tempo por
   cliente/funcionário. Largura da barra é proporcional ao maior valor do próprio grupo. */
.grafico-barras { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 20px; }
.grafico-linha { display: grid; grid-template-columns: 180px 1fr 72px; align-items: center; gap: 10px; font-size: 0.85rem; }
.grafico-rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grafico-barra-fundo { background: var(--fundo); border-radius: 4px; height: 16px; overflow: hidden; }
.grafico-barra { background: var(--marca); height: 100%; border-radius: 4px; min-width: 2px; }
.grafico-barra-secundaria { background: var(--verde); }
.grafico-valor { text-align: right; font-variant-numeric: tabular-nums; color: var(--cinza-texto); }
@media (max-width: 640px) {
  .grafico-linha { grid-template-columns: 100px 1fr 60px; }
}

/* Cabeçalho fixo: linha do título gruda no topo da tela ao rolar pra baixo, em vez de sumir junto
   com o resto da tabela — pedido pro checklist (Tarefas > Lista), que costuma ter muitas linhas.
   Aplica em qualquer <th> dentro (tanto o <thead> normal quanto a linha de cabeçalho repetida por
   grupo/categoria no meio do <tbody>) — o `overflow: hidden` do .tabela teria que virar `visible`
   pra sticky não ser clipado, então desliga só nessa tabela. O offset (--altura-frozen) é medido
   por painelFixo.js — cola logo abaixo do .topbar + .painel-fixo, que também ficam colados. */
.tabela-cabecalho-fixo { overflow: visible; }
.tabela-cabecalho-fixo th { position: sticky; top: var(--altura-frozen, 60px); z-index: 2; }

/* "Painel congelado" de uma tela: tudo que tem que continuar visível ao rolar pra baixo (abas,
   título, filtros) — cola logo abaixo do .topbar (também sticky). Ver painelFixo.js pro cálculo do
   offset (--altura-topbar) e pra medir a altura final (--altura-frozen) usada pelo cabeçalho da
   tabela logo abaixo dele. */
.painel-fixo {
  position: sticky;
  top: var(--altura-topbar, 60px);
  z-index: 15;
  background: var(--fundo);
  padding-bottom: 12px;
}

.texto-alinhado-direita { text-align: right; }
/* Tabela de Honorários tem muitas colunas (cliente, honorário fixo, 4 categorias de extras, total,
   observação) — rola horizontalmente em telas menores em vez de espremer tudo. */
.tabela-scroll { overflow-x: auto; }
.tabela-honorarios td, .tabela-honorarios th { white-space: nowrap; }
.tabela-honorarios td:nth-child(1), .tabela-honorarios th:nth-child(1) { white-space: normal; min-width: 160px; }
.tabela-honorarios td.celula-detalhe { white-space: normal; min-width: 180px; }
/* Sem nowrap, table-layout:auto prefere quebrar nome/CPF em várias linhas a estourar a largura —
   nunca aciona a rolagem horizontal do .tabela-scroll (só ativa quando o conteúdo pede mais espaço
   do que tem, e "pedir mais espaço" não acontece se quebrar linha já resolve). */
.tabela-socios td, .tabela-socios th { white-space: nowrap; }

.tabela-obrigacoes th:nth-child(2), .tabela-obrigacoes td:nth-child(2) { width: 12%; }
.tabela-obrigacoes th:nth-child(4), .tabela-obrigacoes td:nth-child(4),
.tabela-obrigacoes th:nth-child(5), .tabela-obrigacoes td:nth-child(5) { white-space: nowrap; }

/* CNPJ e Tipo não quebram linha — se algo tiver que quebrar, prefere ser o nome do cliente. */
.tabela-certificados th:nth-child(2), .tabela-certificados td:nth-child(2),
.tabela-certificados th:nth-child(3), .tabela-certificados td:nth-child(3) { white-space: nowrap; }
.tabela tr:last-child td { border-bottom: none; }
.linha-inativa { opacity: 0.5; }

.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; text-transform: capitalize; }
/* O JS (src/public/js/botaoBaixa.js) liga/desliga o atributo `hidden` no botão de dar baixa (ver
   .botao-baixa/.campo-data-baixa, usado em Faturamento, Extras, Contas a Receber/Pagar,
   Participação nos Lucros e Ordem de Serviço), mas a regra `[hidden]{display:none}` é do próprio
   navegador (baixa prioridade) — sem isto aqui, o `display: inline-block` acima sempre ganha e o
   botão nunca some de verdade, ficando visível por cima do campo de data (reabre o calendário a
   cada clique nele em vez de deixar escolher a data e enviar). */
.badge[hidden] { display: none; }
/* .badge herda text-transform: capitalize (bom pra rótulo de status de 1 palavra, ex: "Pendente")
   — mas os botões de baixa têm frase inteira ("Recebido em...", "Marcar como pago"), onde
   capitalizar cada palavra deixa preposição/artigo errado ("Recebido Em", "Marcar Como Pago"). */
.badge-botao { border: none; font-family: inherit; cursor: pointer; text-transform: none; }
.badge-roxo { background: #ede9fe; color: var(--roxo); }
.badge-cinza { background: #f3f4f6; color: var(--cinza-claro); }
.badge-status-a_fazer { background: #fef3c7; color: var(--amarelo); }
.badge-status-em_andamento { background: #dbeafe; color: var(--azul-escuro); }
.badge-status-concluido { background: #dcfce7; color: var(--verde); }
.badge-status-dispensada { background: #f3f4f6; color: var(--cinza-claro); }
.badge-status-automatico { background: #ede9fe; color: var(--roxo); }

.os-status-resumo { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.os-status-resumo .badge { text-transform: none; }
.os-status-resumo .inline-form { display: inline-flex; }

/* Botão de dar baixa (pagar/receber) com data escolhida à mão, em vez de "agora" — data + botão
   lado a lado, sem quebrar a tabela. */
/* Data em cima, botão embaixo — empilhado em vez de lado a lado, pra ocupar menos largura na
   coluna da tabela (o texto do botão + a data juntos numa linha só estourava a coluna). */
.form-baixa { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 132px; }
.form-baixa input[type="date"] { padding: 4px 6px; border: 1px solid var(--borda); border-radius: 6px; font-size: 0.82rem; }
.form-baixa button { white-space: normal; text-align: center; }

/* Participação nos Lucros: alíquota + outras despesas lado a lado, rótulo pequeno em cima de cada
   campo (mesmo padrão compacto de .form-baixa, só que com dois campos em vez de um). */
.form-ajuste-lucro { display: flex; flex-direction: column; gap: 4px; min-width: 170px; }
.form-ajuste-lucro label { display: flex; flex-direction: column; gap: 2px; font-size: 0.75rem; color: var(--cinza-claro); }
.form-ajuste-lucro input[type="number"] { padding: 4px 6px; border: 1px solid var(--borda); border-radius: 6px; font-size: 0.82rem; }

/* Configurações: nome da categoria editável direto na linha da tabela. */
.form-editar-categoria { display: flex; gap: 6px; align-items: center; }
.form-editar-categoria input[type="text"] { padding: 5px 8px; border: 1px solid var(--borda); border-radius: 6px; font-size: 0.9rem; min-width: 200px; }
/* Sobrepõe a cor do status quando a tarefa está vencida — vermelho tem prioridade visual sobre
   "A Fazer"/"Em Andamento", já que o prazo estourado é a informação mais urgente pra equipe ver. */
.badge-status-atrasado { background: #fee2e2; color: var(--vermelho); }
.badge-status-vencido { background: #fee2e2; color: var(--vermelho); }
.badge-status-vencendo { background: #fef3c7; color: var(--amarelo); }
.badge-status-ok { background: #dcfce7; color: var(--verde); }
.badge-status-inativo { background: #f3f4f6; color: var(--cinza-claro); }

.acoes-certificado { display: flex; gap: 10px; align-items: center; white-space: nowrap; }
.acoes-certificado form { display: inline; }
.btn-link-perigo { color: var(--vermelho); }

.badge-certidao-negativa { background: #dcfce7; color: var(--verde); }
.badge-certidao-positiva_com_efeito_negativa { background: #fef3c7; color: var(--amarelo); }
.badge-certidao-positiva { background: #fee2e2; color: var(--vermelho); }
.badge-certidao-indefinida { background: #f3f4f6; color: var(--cinza-claro); }
.badge-certidao-sem-registro { background: #f3f4f6; color: var(--cinza-claro); }

tr.linha-ativa-no-mes { background: #ecfdf5; }

/* Boleto do Inter (Faturamento, ver boletosInter.js) mora DENTRO da coluna Recebimento, embaixo do
   botão Receber — a tabela de Honorários já está no limite de largura, uma coluna nova ia criar
   rolagem horizontal. Só aparece com a integração configurada. */
.boleto-bloco { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; }
.boleto-bloco .inline-form { display: inline; }
.extra-editar-details summary { cursor: pointer; color: var(--marca); font-weight: 600; font-size: 0.85rem; }
.extra-editar-details .form { margin-top: 10px; min-width: 260px; }

/* Extras dentro do painel flutuante de Faturamento (janela estreita, ~650px úteis e redimensionável)
   — a mesma tabela/card da tela cheia de Honorários do cliente estourava aqui: card com borda/padding
   próprios dentro do corpo do painel (que já tem padding), células com 14px de folga de cada lado e
   badge com raio 999px virando um círculo ao quebrar em várias linhas ("Ativo / No / Mês"). O "Editar"
   aberto ganha linha própria (ver ehModal em _extraLinhas.ejs), então aqui o form pode usar a largura
   toda em vez de esmagar uma coluna só. */
#painel-extras-corpo .card-largo { max-width: none; padding: 0; border: none; background: transparent; }
#painel-extras-corpo .card-largo h2 { margin-top: 0; }
#painel-extras-corpo .card-largo + .card-largo { margin-top: 20px; }
#painel-extras-corpo .tabela th,
#painel-extras-corpo .tabela td { padding: 8px 8px; font-size: 0.82rem; }
#painel-extras-corpo .tabela th { font-size: 0.7rem; }
#painel-extras-corpo .badge { border-radius: 8px; text-align: center; }
#painel-extras-corpo .badge-status-ok { white-space: nowrap; }
#painel-extras-corpo tr.linha-editar-extra td { border-top: none; padding-top: 0; }
#painel-extras-corpo .extra-editar-details .form { min-width: 0; }

.certidao-card { margin-bottom: 20px; }
.certidao-card h2 { margin-top: 0; font-size: 1.1rem; display: flex; align-items: center; gap: 10px; }
.certidao-link-emissao { font-size: 0.8rem; font-weight: 500; }
.certidao-historico { margin-top: 14px; }
.certidao-historico summary { cursor: pointer; color: var(--marca); font-weight: 600; }
.certidao-historico .tabela { margin-top: 10px; }

.celula-detalhe { color: var(--cinza-claro); font-size: 0.85rem; }

.celula-acoes-os { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; white-space: nowrap; }
.celula-acoes-os .inline-form { display: inline; }
.celula-acoes-os .btn-link { font-size: 0.85rem; }

/* .form-inline junto com .form (ex: form de sócios) herdava o flex-direction:column do .form,
   já que .form-inline nunca fixava a própria direção — cada campo caía numa linha, um embaixo do
   outro, em vez de lado a lado como o nome promete. */
.form-inline { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }

.status-select {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: inherit;
  border: none;
  cursor: pointer;
}
.status-select:disabled { opacity: 0.6; cursor: wait; }

/* Urgência: usada em kanban, lista e calendário. Nas linhas de tabela usa box-shadow em vez de
   border-left — um border-left de 4px só numa linha "vaza" pro border-collapse da tabela inteira
   (inclusive o cabeçalho, que não tem esse border-left declarado), desalinhando o texto do título
   com o resto. box-shadow inset é só pintura, não participa do modelo de bordas da tabela. */
tr.urgencia-atrasado td:first-child { box-shadow: inset 4px 0 0 var(--vermelho); }
tr.urgencia-proximo td:first-child { box-shadow: inset 4px 0 0 var(--amarelo); }
tr.urgencia-ok td:first-child { box-shadow: inset 4px 0 0 var(--verde); }
tr.urgencia-concluido td:first-child { box-shadow: inset 4px 0 0 var(--cinza-claro); }
tr.urgencia-dispensada td:first-child { box-shadow: inset 4px 0 0 var(--cinza-claro); }
.kanban-card.urgencia-atrasado, .calendario-evento.urgencia-atrasado { border-left: 4px solid var(--vermelho); }
.kanban-card.urgencia-proximo, .calendario-evento.urgencia-proximo { border-left: 4px solid var(--amarelo); }
.kanban-card.urgencia-ok, .calendario-evento.urgencia-ok { border-left: 4px solid var(--verde); }
.kanban-card.urgencia-concluido, .calendario-evento.urgencia-concluido { border-left: 4px solid var(--cinza-claro); }
.kanban-card.urgencia-dispensada, .calendario-evento.urgencia-dispensada { border-left: 4px solid var(--cinza-claro); }
tr[class*="urgencia-"] td:first-child { padding-left: 10px; }

.login-box {
  max-width: 380px;
  margin: 80px auto;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 32px;
}
.login-box h1 { font-size: 1.3rem; text-align: center; margin-bottom: 20px; }
.login-logo { display: block; max-width: 260px; width: 100%; height: auto; margin: 0 auto 20px; }
.login-esqueci { display: block; text-align: center; margin-top: 16px; font-size: 0.85rem; }
.senha-com-botao { display: flex; align-items: center; gap: 8px; }
.senha-com-botao input { flex: 1; }
.senha-com-botao .btn-link { white-space: nowrap; font-size: 0.8rem; }
.recuperar-texto { font-size: 0.9rem; color: var(--cinza-texto); line-height: 1.5; margin: 0 0 12px; }
.recuperar-lista { list-style: none; padding: 0; margin: 0 0 20px; font-size: 0.9rem; }
.recuperar-lista li { padding: 8px 0; border-bottom: 1px solid var(--borda); }
.recuperar-lista li:last-child { border-bottom: none; }

/* Kanban */
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.kanban-coluna { background: var(--branco); border: 1px solid var(--borda); border-radius: 10px; padding: 14px; min-height: 200px; }
.kanban-coluna h2 { margin: 0 0 12px; font-size: 0.95rem; display: flex; justify-content: space-between; }
.contagem { color: var(--cinza-claro); font-weight: 500; }
.kanban-lista { min-height: 120px; display: flex; flex-direction: column; gap: 10px; border-radius: 6px; transition: background 0.15s; }
.kanban-lista.lista-hover { background: #eff6ff; }
.kanban-card {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: grab;
  font-size: 0.85rem;
}
.kanban-card.arrastando { opacity: 0.4; }
.kanban-card-titulo { font-weight: 600; margin-bottom: 6px; }
.kanban-card-meta { display: flex; flex-direction: column; gap: 2px; color: var(--cinza-claro); font-size: 0.78rem; margin-bottom: 6px; }
.kanban-card-editar { font-size: 0.78rem; }

/* Demandas da Equipe — quadro com colunas personalizáveis (número variável, por isso
   grid-auto-flow em vez do grid fixo de 3 colunas do Kanban de tarefas) */
.kanban-demandas {
  display: flex; gap: 16px; align-items: start; overflow-x: auto; padding-bottom: 8px;
  background: #eaf2fd; border-radius: 10px; padding: 14px;
}
.kanban-demandas .kanban-coluna { flex: 0 0 260px; padding: 0 0 14px; overflow: hidden; }

/* Cabeçalho de cada coluna com a cara da nossa barra azul padrão (mesmo tratamento do
   .page-header: fundo colorido, texto branco, cantos superiores arredondados) — cada status
   fixo usa a cor correspondente da paleta de badges; colunas criadas pelo usuário ficam com a
   cor neutra da marca. */
.kanban-demandas .kanban-coluna h2 {
  align-items: center; gap: 6px; margin: 0 0 12px; padding: 10px 14px; border-radius: 9px 9px 0 0;
  background: var(--marca); color: var(--branco);
}
.kanban-demandas .kanban-coluna h2 .contagem { color: var(--branco); opacity: 0.85; }
.kanban-demandas .kanban-coluna h2.coluna-status-a_fazer { background: var(--amarelo); }
.kanban-demandas .kanban-coluna h2.coluna-status-em_andamento { background: var(--azul-escuro); }
.kanban-demandas .kanban-coluna h2.coluna-status-concluido { background: var(--verde); }
.kanban-demandas .kanban-coluna h2.coluna-status-cancelado { background: var(--roxo); }
.kanban-demandas .kanban-coluna h2.coluna-status-arquivado { background: #111827; }
.coluna-nome-form { flex: 1; }
.coluna-nome-input {
  width: 100%; border: none; background: transparent; font-weight: 600; font-size: 0.95rem;
  padding: 2px 4px; border-radius: 4px; font-family: inherit; color: inherit;
}
.coluna-nome-input:hover, .coluna-nome-input:focus { background: rgba(255, 255, 255, 0.2); outline: none; }
.coluna-acoes { display: flex; gap: 8px; margin: 0 14px 10px; }
.coluna-acoes .inline-form { display: inline; }
.coluna-acoes .btn-link { font-size: 0.75rem; }
.kanban-demandas .kanban-lista { margin: 0 14px; }
.nova-demanda-form { margin: 10px 14px 0; display: flex; flex-direction: column; gap: 4px; }
.nova-demanda-form input {
  width: 100%; border: 1px dashed var(--borda); border-radius: 6px; padding: 8px 10px;
  font-size: 0.85rem; background: transparent;
}
.nova-demanda-form input:focus { border-style: solid; border-color: var(--marca); outline: none; }
.nova-demanda-form .btn-link { align-self: flex-end; font-size: 0.75rem; }
/* "+ Nova coluna" mora no cabeçalho da página (não mais como uma "coluna" no fim da rolagem
   horizontal do quadro) — sticky ali ficava sobrepondo as colunas reais ao rolar. Forma compacta,
   lado a lado com o título, mesmo padrão de .page-header-acoes usado no resto do sistema. */
.nova-coluna-form-topo { display: flex; align-items: center; gap: 6px; }
.nova-coluna-form-topo input {
  border: 1px solid var(--borda); border-radius: 6px; padding: 8px 10px; font-size: 0.85rem; width: 180px;
}
.nova-coluna-form-topo input:focus { border-color: var(--marca); outline: none; }
.demanda-card.urgencia-atrasado { border-left: 4px solid var(--vermelho); }
.demanda-card.urgencia-proximo { border-left: 4px solid var(--amarelo); }

/* Rolagem horizontal duplicada no topo do quadro (item ligado por JS em demandas.js) — evita ter
   que descer até o fim da página pra rolar o quadro pros lados. */
.kanban-scroll-top { overflow-x: auto; overflow-y: hidden; margin-bottom: 8px; }
.kanban-scroll-top-inner { height: 1px; }

.kanban-card { position: relative; }
.demanda-card { cursor: pointer; }
.badge-protegido { font-size: 0.85rem; cursor: help; }

/* Tela do card de demanda: conteúdo principal + comentários, cada um metade da tela em telas
   largas, ocupando toda a largura disponível — "max-width: none" pra sobrepor o limite de 560px
   da .card base, deixando o próprio .container (mesmo limite das outras páginas) decidir a
   largura máxima — em vez de empilhar tudo numa coluna só. */
.card.demanda-detalhe { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; max-width: none; }
.demanda-voltar-quadro { display: inline-block; margin-bottom: 12px; font-size: 0.85rem; }
.demanda-autoria { margin-top: -8px; margin-bottom: 16px; }
/* Sem isso, o input de busca de cliente (dentro de um <div> que não é item flex do .form label)
   fica com a largura padrão do navegador (~170px) em vez de esticar igual os outros campos —
   cortava o nome de clientes com razão social mais longa. */
.campo-busca-cliente { display: flex; min-width: 420px; }
.campo-busca-cliente input[type="text"] { flex: 1; min-width: 0; }
.transferir-responsavel-form {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
  margin-top: 0;
  margin-bottom: 16px;
}
.transferir-responsavel-form label { flex: 1; max-width: 260px; }
h1 .badge-protegido { font-size: 0.7rem; font-weight: 500; vertical-align: middle; }
@media (min-width: 960px) {
  .card.demanda-detalhe { grid-template-columns: 1fr 1fr; }
  .demanda-lateral { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
  .demanda-secao-lateral { margin-top: 0; padding-top: 0; border-top: none; }
}
.kanban-card-cronometro { margin-top: 6px; }
/* Comparativo tempo gasto x tempo estimado — na edição do card (barra maior) e versão compacta
   no card do quadro (ver .kanban-card-tempo). Vermelho quando passa de 100% do estimado. */
.tempo-comparativo { margin-top: 12px; }
.tempo-comparativo-barra-fundo { background: var(--fundo); border-radius: 4px; height: 8px; overflow: hidden; margin-bottom: 4px; }
.tempo-comparativo-barra { background: var(--marca); height: 100%; border-radius: 4px; }
.tempo-comparativo-estourado { background: var(--vermelho); }
.kanban-card-tempo { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.kanban-card-tempo .tempo-comparativo-barra-fundo { flex: 1; margin-bottom: 0; }
.kanban-card-tempo-texto { font-size: 0.72rem; white-space: nowrap; }
.carga-trabalho-barra-fundo { width: 120px; display: inline-block; vertical-align: middle; margin-right: 8px; }
tr.linha-alerta td { background: #fef2f2; }
.cronometro-btn-mini, .cronometro-categoria-mini { font-size: 0.75rem; padding: 4px 8px; }
.tabela .cronometro-outros { width: 130px; }

/* Seções extras dentro do cartão de demanda: cronômetro, checklist, anexos, comentários */
.texto-auxiliar { color: var(--cinza-claro); font-size: 0.82rem; }
.os-saldo-parcelar.saldo-erro { color: var(--vermelho); font-weight: 600; }
.linha-saldo-dia td { background: #f3f4f6; font-weight: 600; color: var(--cinza-texto); }
.editor-nome-proposto { display: inline-flex; align-items: center; gap: 2px; }
.editor-nome-proposto input { min-width: 220px; }
.erro-detalhe { margin-top: 4px; }
.erro-detalhe summary { font-size: 0.78rem; color: var(--cinza-claro); cursor: pointer; }
.erro-selecionavel {
  margin: 6px 0 0; max-width: 320px; max-height: 220px; overflow: auto; white-space: pre-wrap;
  word-break: break-word; user-select: text; font-size: 0.72rem; background: var(--fundo);
  border: 1px solid var(--borda); border-radius: 6px; padding: 8px;
}
.demanda-secao { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--borda); }
.demanda-secao h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 1rem; }
.demanda-secao .contagem { font-size: 0.8rem; font-weight: 500; }

.checklist-progresso { height: 6px; background: var(--marca-clara); border-radius: 999px; overflow: hidden; margin-bottom: 12px; }
.checklist-progresso-barra { height: 100%; background: var(--verde); border-radius: 999px; transition: width 0.2s; }
.checklist-lista { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.checklist-lista li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.9rem; }
.checklist-lista li.arrastando { opacity: 0.4; }
.checklist-item-arrastar { cursor: grab; color: var(--cinza-claro); font-size: 1rem; line-height: 1; user-select: none; }
.checklist-lista li.checklist-concluido .checklist-item-texto-input { color: var(--cinza-claro); text-decoration: line-through; }
.checklist-item-texto-form { flex: 1; min-width: 0; }
.checklist-item-texto-input {
  width: 100%; border: none; background: transparent; font-size: 0.9rem; font-family: inherit;
  color: inherit; padding: 2px 4px; border-radius: 4px;
}
.checklist-item-texto-input:hover, .checklist-item-texto-input:focus { background: var(--marca-clara); outline: none; }
.checklist-novo-form, .comentario-novo-form, .anexo-novo-form { display: flex; gap: 8px; align-items: center; }
.comentario-novo-form { align-items: flex-start; }
.comentario-novo-form textarea { flex: 1; font-family: inherit; font-size: 0.9rem; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 6px; resize: vertical; }
.checklist-novo-form input[type="text"] { flex: 1; border: 1px dashed var(--borda); border-radius: 6px; padding: 8px 10px; font-size: 0.85rem; background: transparent; }
.checklist-novo-form input[type="text"]:focus { border-style: solid; border-color: var(--marca); outline: none; }

/* Um card pode ter vários checklists nomeados (igual Trello) — cada um é um bloco próprio,
   arrastável pra reordenar entre si (mesmo padrão dos itens dentro de um checklist). */
.checklist-grupo { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--borda); }
.checklist-grupo:last-of-type { border-bottom: none; margin-bottom: 12px; padding-bottom: 0; }
.checklist-grupo.arrastando { opacity: 0.4; }
.checklist-grupo-cabecalho { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.checklist-grupo-arrastar { cursor: grab; color: var(--cinza-claro); font-size: 1rem; line-height: 1; user-select: none; }
.checklist-nome-form { flex: 1; }
.checklist-nome-input {
  width: 100%; border: none; background: transparent; font-weight: 600; font-size: 0.92rem;
  padding: 2px 4px; border-radius: 4px; font-family: inherit; color: inherit;
  text-transform: uppercase; letter-spacing: 0.02em;
}
.checklist-nome-input:hover, .checklist-nome-input:focus { background: var(--marca-clara); outline: none; }
.checklist-grupo-cabecalho .btn-link { font-size: 0.75rem; white-space: nowrap; }
.novo-checklist-form { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.novo-checklist-form input[type="text"] { flex: 1; border: 1px dashed var(--borda); border-radius: 6px; padding: 8px 10px; font-size: 0.85rem; background: transparent; }
.novo-checklist-form input[type="text"]:focus { border-style: solid; border-color: var(--marca); outline: none; }

.anexos-lista, .comentarios-lista { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 10px; }
.anexos-lista li { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; }

/* Composição da nota consolidada mensal (Notas Fiscais > Emitir) — honorário fixo + cada extra
   elegível, um por linha, com checkbox pra excluir um extra específico desta emissão. */
.lista-composicao-nfse { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; }
.comentarios-lista li { border: 1px solid var(--borda); border-radius: 8px; padding: 10px 12px; }
.comentarios-lista p { margin: 4px 0 0; font-size: 0.9rem; }
.comentario-cabecalho { display: flex; justify-content: space-between; gap: 10px; font-size: 0.85rem; }

/* Cronômetro de tempo */
.badge-tempo { font-size: 0.75rem; color: var(--cinza-claro); font-weight: 600; }
.cronometro-btn {
  border: 1px solid var(--borda);
  background: var(--branco);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.75rem;
  cursor: pointer;
  color: var(--cinza-texto);
}
.cronometro-btn:hover { border-color: var(--marca); }
.cronometro-btn.cronometro-rodando { background: #fee2e2; border-color: var(--vermelho); color: var(--vermelho); font-weight: 600; }
.celula-tempo { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.cronometro-descricao-simples {
  border: 1px solid var(--borda);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.8rem;
  width: 160px;
}
.cronometro-btn-iniciar-simples {
  border: 1px solid var(--verde);
  background: #ecfdf5;
  color: var(--verde);
  border-radius: 999px;
  width: 24px;
  height: 24px;
  font-size: 0.75rem;
  cursor: pointer;
  flex-shrink: 0;
}
.cronometro-btn-iniciar-simples:hover { background: #d1fae5; }
.tabela-total td { font-weight: 700; border-top: 2px solid var(--borda); }

.cronometro-iniciar { display: flex; align-items: center; gap: 6px; }
.cronometro-categoria {
  border: 1px solid var(--borda);
  background: var(--branco);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.75rem;
  color: var(--cinza-texto);
  cursor: pointer;
}
.cronometro-outros { border: 1px solid var(--marca); border-radius: 6px; padding: 2px 8px; font-size: 0.75rem; width: 150px; }

/* Linha do cliente com cronômetro rodando agora — destaque pra achar fácil na lista */
tr.cronometro-linha-ativa { background: #ecfdf5; }
tr.cronometro-linha-ativa:hover { background: #d1fae5; }

/* Faixa de cronômetro ativo — linha própria abaixo da topbar (visível em qualquer tela).
   Fica fora da barra de menu de propósito: um nome de cliente grande não pode disputar
   espaço com os itens do menu principal, que precisam ficar sempre numa linha só. */
.cronometro-indicador {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ecfdf5;
  border-bottom: 1px solid var(--verde);
  color: var(--verde);
  padding: 5px 24px;
  font-size: 0.82rem;
  font-weight: 600;
}
.cronometro-indicador:hover { text-decoration: none; background: #d1fae5; }
.cronometro-indicador-texto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.cronometro-pulso {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--verde);
  animation: cronometro-pulsar 1.4s infinite;
}
@keyframes cronometro-pulsar {
  0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); }
  70% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

/* Cronômetro rápido (ampulheta) na topbar — abre um painel flutuante pra buscar cliente e
   iniciar/finalizar sem sair da tela atual. */
.cronometro-global { position: relative; }
.cronometro-global-btn { position: relative; font-size: 1.1rem; line-height: 1; padding: 7px 10px; }
.cronometro-global-bolinha {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--verde);
  animation: cronometro-pulsar 1.4s infinite;
}
.cronometro-global-painel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  padding: 16px;
  z-index: 2500;
  text-align: left;
}
.cronometro-global-painel[hidden] { display: none; }

/* Botão "Utilitários" (mesmo estilo do menu Utilitários do Domínio) — abre um dropdown simples
   embaixo do próprio botão com ações administrativas que não cabem soltas na tela (ex: atualizar
   cadastro em lote). Mesma mecânica de posicionamento do cronômetro global acima, só ancorado à
   esquerda (o botão de Utilitários fica no início do cabeçalho, não no canto direito da topbar). */
.menu-utilitarios { position: relative; display: inline-block; }
.menu-utilitarios-painel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  padding: 16px;
  z-index: 2500;
  text-align: left;
}
.menu-utilitarios-painel[hidden] { display: none; }
/* Variante pra quando o botão fica perto da borda ESQUERDA da tela (ex: Notas Fiscais > Emitir) —
   o padrão (right:0) ancora o painel de 360px pelo canto direito do botão e ele cresce pra
   ESQUERDA, saindo da tela quando não sobra espaço aí. Cresce pra direita em vez disso. */
.menu-utilitarios-painel-esquerda { right: auto; left: 0; }
/* Item de menu dentro do painel Utilitários (Clientes, Honorários, Demandas da Equipe) — link,
   botão ou ação que abre um painel flutuante próprio, em vez de expandir a ação direto no
   dropdown (o dropdown viraria uma bagunça assim que tivesse mais de uma ação com formulário —
   ver painelFlutuante.js). */
.menu-utilitarios-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--cinza-texto);
  font-size: 0.9rem;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}
.menu-utilitarios-item:hover { background: var(--fundo); }
.menu-utilitarios-item-perigo { color: var(--vermelho); }

/* Ícone "⋮" que abre o menu de ações (Editar/Duplicar/Excluir) de uma linha de tabela — reaproveita
   o mesmo dropdown de menu-utilitarios-item acima, só num painel mais estreito (não precisa dos
   360px do menu Utilitários padrão pra 3 itens curtos). */
.botao-menu-acoes {
  display: inline-block;
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--cinza-texto);
  padding: 2px 8px;
  border-radius: 4px;
}
.botao-menu-acoes:hover { background: rgba(0, 0, 0, 0.06); }
.menu-acoes-painel { width: 170px; padding: 6px; }
.cronometro-global-buscar input,
.cronometro-global-descricao {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  font-size: 0.9rem;
}
.cronometro-global-resultados { list-style: none; margin: 8px 0 0; padding: 0; max-height: 220px; overflow-y: auto; }
.cronometro-global-resultados li {
  padding: 8px 6px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: space-between;
}
.cronometro-global-resultados li:hover { background: var(--marca-clara); }
.cronometro-global-iniciar p { margin: 0 0 10px; font-size: 0.9rem; }
.cronometro-global-categorias { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cronometro-global-descricao { margin-bottom: 10px; }
.cronometro-global-rodando { text-align: center; }
.cronometro-global-rodando p { margin: 0 0 4px; }
.cronometro-global-tempo { font-size: 1.4rem; font-weight: 700; color: var(--marca); margin: 10px 0 !important; }

/* Variante informativa (não é aviso de problema) — convite pra ativar a detecção de atividade no
   sistema todo, não só no navegador. */
.aviso-ociosidade-idle-api { border-color: var(--azul); border-left-color: var(--azul); }

/* Aviso de ociosidade com cronômetro rodando */
.aviso-ociosidade {
  position: fixed;
  bottom: 20px;
  right: 20px;
  max-width: 360px;
  background: var(--branco);
  border: 1px solid var(--amarelo);
  border-left: 6px solid var(--amarelo);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  padding: 16px;
  z-index: 1000;
  animation: aviso-ociosidade-entrar 0.25s ease-out;
}
.aviso-ociosidade-texto { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-size: 0.88rem; color: var(--cinza-texto); }
.aviso-ociosidade-botoes { display: flex; gap: 8px; justify-content: flex-end; }
@keyframes aviso-ociosidade-entrar {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Calendário */
.calendario-legenda { display: flex; gap: 18px; margin-bottom: 14px; font-size: 0.82rem; color: var(--cinza-claro); flex-wrap: wrap; }
.legenda-item { display: flex; align-items: center; gap: 6px; }
.ponto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ponto.urgencia-atrasado { background: var(--vermelho); }
.ponto.urgencia-proximo { background: var(--amarelo); }
.ponto.urgencia-ok { background: var(--verde); }
.ponto.urgencia-concluido { background: var(--cinza-claro); }
.ponto-certificado { background: var(--roxo); }
.calendario-evento-certificado { background: #ede9fe; color: var(--roxo); font-weight: 600; }
.calendario-evento-certificado:hover { background: #ddd6fe; }
.ponto-demanda { background: var(--azul-escuro); }
.calendario-evento-demanda { background: #dbeafe; color: var(--azul-escuro); font-weight: 600; }
.calendario-evento-demanda:hover { background: #bfdbfe; }

.ponto-feriado-nacional { background: var(--azul); }
.ponto-feriado-estadual { background: var(--verde); }
.ponto-feriado-municipal { background: var(--amarelo); }
.calendario-evento-feriado-nacional { background: #dbeafe; color: var(--azul-escuro); font-weight: 600; }
.calendario-evento-feriado-estadual { background: #dcfce7; color: var(--verde); font-weight: 600; }
.calendario-evento-feriado-municipal { background: #fef3c7; color: var(--amarelo); font-weight: 600; }
.calendario-evento small { font-weight: 400; opacity: 0.8; }

.calendario-cabecalho-linha {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--marca);
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}
.calendario-cabecalho {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--branco);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 8px 4px;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.calendario-cabecalho:last-child { border-right: none; }

.calendario-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.calendario-dia {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 6px;
  min-height: 100px;
  max-height: 340px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.calendario-dia:hover { background: var(--fundo); border-color: var(--marca); }
.calendario-dia-vazio { background: transparent; border: none; cursor: default; }
.calendario-dia-vazio:hover { background: transparent; border-color: transparent; }
.calendario-dia-numero {
  font-size: 0.8rem;
  color: var(--cinza-claro);
  font-weight: 700;
  position: sticky;
  top: 0;
  background: inherit;
  padding-bottom: 2px;
}
.calendario-evento {
  display: block;
  font-size: 0.78rem;
  line-height: 1.35;
  background: var(--fundo);
  border-radius: 4px;
  padding: 4px 8px;
  white-space: normal;
  word-break: break-word;
  color: var(--cinza-texto);
}
.calendario-evento:hover { text-decoration: none; background: var(--borda); }

/* Dashboard */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 32px; }
.stat-card {
  display: block;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 18px;
  text-align: center;
  color: var(--cinza-texto);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.stat-card:hover { border-color: var(--marca); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); text-decoration: none; }
.stat-numero { font-size: 1.8rem; font-weight: 700; }
.stat-label { font-size: 0.82rem; color: var(--cinza-claro); margin-top: 4px; }
.stat-atrasado .stat-numero { color: var(--vermelho); }
.stat-proximo .stat-numero { color: var(--amarelo); }
.secao-titulo { display: flex; align-items: center; gap: 10px; margin: 8px 0 14px; }
.secao-titulo-prioridade { color: var(--vermelho); }

/* Grupo de regras (Integração) — cada grupo é um <details> recolhível, nativo, sem JS; só mostra
   as regras dele quando o usuário clica pra abrir. */
.grupo-regras { border: 1px solid var(--borda); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.grupo-regras summary {
  padding: 10px 14px;
  background: var(--fundo);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.grupo-regras summary::-webkit-details-marker { display: none; }
.grupo-regras summary::before { content: '▸ '; }
.grupo-regras[open] summary::before { content: '▾ '; }
.grupo-regras-acoes { display: flex; align-items: center; gap: 14px; padding: 8px 14px 0; }
.grupo-regras .tabela-scroll { padding: 10px 14px 14px; }
.grupo-regras.arrastando { opacity: 0.4; }
.grupo-regras-arrastar { cursor: grab; color: var(--cinza-claro); font-size: 1rem; line-height: 1; user-select: none; margin-right: 4px; }

/* Formulário de regra (Nova regra / edição inline) em duas linhas fixas, tipo tabela: palavra-chave
   (larga) + HP + grupo em cima, Débito/Crédito (largos, pra caber "código — nome" do plano de
   contas inteiro) embaixo — as duas linhas começam na mesma margem por serem blocos empilhados. */
.form-regra { display: flex; flex-direction: column; gap: 8px; margin-bottom: 0; }
.form-regra-linha1, .form-regra-linha2, .form-regra-linha3 { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.form-regra-linha2 input[name="conta_debito"],
.form-regra-linha2 input[name="conta_credito"] { flex: 1; min-width: 200px; }
/* Salvar/Aplicar esta regra/Excluir de uma regra já cadastrada — cada um é um <form> com action
   diferente (editar/aplicar/excluir), então não dá pra juntar num <form> só; "Salvar" usa o
   atributo form="..." pra submeter o .form-regra de fora dele, e os três ficam lado a lado aqui
   como se fossem botões de uma linha só. */
.form-regra-acoes { display: flex; gap: 12px; align-items: center; margin-top: 8px; margin-bottom: 16px; }
/* Rótulo fixo (não é placeholder — não some quando o campo é preenchido) acima de cada campo,
   pra continuar sabendo qual campo é qual mesmo depois de digitar. */
.rotulo-campo { font-size: 0.75rem; font-weight: 600; color: var(--cinza-claro); }
.campo-com-rotulo { display: flex; flex-direction: column; gap: 2px; }
.campo-com-rotulo input[type="text"], .campo-com-rotulo select { width: 100%; }
.campo-com-rotulo.campo-largo { flex: 1; min-width: 220px; }
.campo-checkbox-conta { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 200px; }
.campo-checkbox-conta-linha { display: flex; align-items: center; gap: 6px; }
.campo-checkbox-conta-linha input[type="text"] { flex: 1; min-width: 0; }
.campo-checkbox-conta-linha input[type="checkbox"],
.campo-checkbox-conta-linha input[type="radio"] { flex: 0 0 auto; }
.rotulo-checkbox-ativa { display: inline-flex; align-items: center; gap: 4px; height: 34px; }
.campo-busca-regras {
  display: block;
  width: 100%;
  max-width: 420px;
  margin-bottom: 12px;
  padding: 7px 10px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  font-size: 0.9rem;
}

@media (max-width: 800px) {
  .kanban { grid-template-columns: 1fr; }
  .calendario-dia { min-height: 60px; }
}

.overlay-assinando {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Maior que .aviso-ociosidade (z-index: 1000) — esse aviso (ociosidade ou certificado
     vencendo) pode aparecer por cima da tela de assinatura enquanto ela espera, e como os dois
     usavam o mesmo z-index, a ordem de empilhamento dependia só da ordem no DOM. */
  z-index: 2000;
}

/* O JS liga/desliga o atributo `hidden`, mas a regra `[hidden]{display:none}` é do próprio
   navegador (baixa prioridade) — sem isto aqui, o `display: flex` acima sempre ganha e o overlay
   nunca some de verdade, ficando parado cobrindo a tela inteira mesmo depois de "escondido". */
.overlay-assinando[hidden] { display: none; }

.overlay-assinando-caixa {
  background: var(--branco);
  border-radius: 10px;
  padding: 32px 36px;
  max-width: 380px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.overlay-assinando-caixa p { margin: 12px 0 0; }
.overlay-assinando-caixa p:first-of-type { font-weight: 600; color: var(--cinza-texto); }

.spinner {
  width: 36px;
  height: 36px;
  margin: 0 auto;
  border: 4px solid var(--borda);
  border-top-color: var(--marca);
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}

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

/* Overlay genérico que aparece sozinho em qualquer ação que recarrega a página inteira (qualquer
   <form> comum) — sem precisar de tratamento próprio tela por tela, ver carregamento.js. */
.overlay-carregando {
  position: fixed;
  inset: 0;
  background: rgba(249, 250, 251, 0.94);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  z-index: 5000;
}

/* Mesma pegadinha do .overlay-assinando: sem isso, o display:flex acima sempre ganha da regra
   padrão do navegador pro atributo hidden, e o overlay nunca some de verdade. */
.overlay-carregando[hidden] { display: none; }

.overlay-carregando-emblema {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay-carregando-anel {
  position: absolute;
  inset: 0;
  border: 4px solid var(--borda);
  border-top-color: var(--marca);
  border-radius: 50%;
  animation: girar 1s linear infinite;
}

.overlay-carregando-emblema img {
  width: 72px;
  animation: logo-pulsar 1.6s ease-in-out infinite;
}

@keyframes logo-pulsar {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.8; }
}

.overlay-carregando p {
  color: var(--cinza-texto);
  font-weight: 600;
}

/* Painel flutuante (ver painelFlutuante.js) — janela sobreposta, arrastável pelo cabeçalho e
   redimensionável (resize: both, nativo do navegador) — usado no painel de Regras dentro da tela
   de Lançamentos, pra editar regra sem perder de vista a tabela de lançamentos por trás. */
.painel-flutuante {
  position: fixed;
  width: 680px;
  height: 520px;
  min-width: 380px;
  min-height: 260px;
  max-width: 96vw;
  max-height: 92vh;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  resize: both;
  overflow: hidden;
}
.painel-flutuante[hidden] { display: none; }
.painel-flutuante-cabecalho {
  cursor: move;
  background: var(--marca);
  color: var(--branco);
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  user-select: none;
}
.painel-flutuante-cabecalho strong { font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.painel-flutuante-controles {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.painel-flutuante-opacidade {
  width: 70px;
  cursor: pointer;
  accent-color: var(--branco);
}
.painel-flutuante-fechar {
  background: transparent;
  border: none;
  color: var(--branco);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.painel-flutuante-fechar:hover { background: rgba(255, 255, 255, 0.15); }
.painel-flutuante-corpo {
  padding: 14px;
  overflow: auto;
  flex: 1 1 auto;
  /* A barra de rolagem (vertical, quando o conteúdo estoura) ia até o canto inferior direito do
     painel, bem em cima do "puxador" nativo de redimensionar (resize: both, no .painel-flutuante)
     — tentar arrastar o puxador acabava arrastando a rolagem por engano. Essa margem afasta o fim
     da barra de rolagem daquele canto, sobrando só um respiro (mesmo branco de fundo) livre pro
     puxador funcionar sem disputa. */
  margin: 0 8px 8px 0;
}
.descricao-copiavel { cursor: pointer; padding: 1px 2px; border-radius: 3px; }
.descricao-copiavel:hover { text-decoration: underline; background: rgba(0, 0, 0, 0.04); }

/* Valores de extra/total clicáveis na tabela de Faturamento — abrem o painel-flutuante de extras
   (ver lista.ejs) em vez de navegar pra outra página. Botão sem cara de botão, só o cursor e o
   hover já dão a dica de que é clicável. */
.celula-extra-clicavel, .celula-total-clicavel {
  display: inline-block;
  background: none;
  border: none;
  padding: 2px 6px;
  margin: -2px -6px;
  border-radius: 4px;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.celula-extra-clicavel:hover, .celula-total-clicavel:hover { background: rgba(0, 0, 0, 0.06); text-decoration: underline; }
.celula-extra-vazia { color: var(--cinza-claro); }

/* Dropdown próprio dos campos <input list="..."> (ver autocompleteDatalist.js) — anexado direto no
   <body> e posicionado via JS (position: fixed), pra nunca ser cortado por algum ancestral com
   overflow: hidden (ex: .tabela, ou o corpo com scroll do .painel-flutuante). */
.autocomplete-lista {
  position: fixed;
  z-index: 3000;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
  max-height: 220px;
  overflow-y: auto;
}
.autocomplete-lista[hidden] { display: none; }
.autocomplete-item { padding: 5px 10px; font-size: 0.78rem; cursor: pointer; }
.autocomplete-item:hover, .autocomplete-item.ativo { background: var(--marca-clara); }

/* Layout em 2 colunas só quando a opção é "código — nome" (plano de contas) — largura fixa da
   1ª coluna alinha o código de qualquer item com o cabeçalho, mesmo com nº de dígitos diferente
   entre eles (ex: "5" vs "10691"). */
.autocomplete-item.autocomplete-cabecalho {
  display: flex;
  gap: 10px;
  font-weight: 700;
  color: var(--marca);
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.03em;
  background: var(--marca-clara);
  cursor: default;
  border-bottom: 1px solid var(--borda);
  position: sticky;
  top: 0;
}
.autocomplete-item-codigo-nome { display: flex; gap: 10px; }
.autocomplete-col-codigo { flex: 0 0 64px; text-align: left; }
.autocomplete-col-conta { flex: 1 1 auto; }

/* Rodapé "+ Adicionar conta" (só no plano de contas, ver data-criar-conta-url) — sticky embaixo
   igual o cabeçalho fica em cima, então continua visível mesmo com a lista rolada. */
.autocomplete-item.autocomplete-adicionar {
  color: var(--marca);
  font-weight: 600;
  border-top: 1px solid var(--borda);
  position: sticky;
  bottom: 0;
  background: var(--branco);
}
.autocomplete-item.autocomplete-form-nova-conta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  cursor: default;
  border-top: 1px solid var(--borda);
  position: sticky;
  bottom: 0;
  background: var(--branco);
}
.autocomplete-item.autocomplete-form-nova-conta:hover { background: var(--branco); }
.autocomplete-novo-codigo, .autocomplete-novo-nome {
  border: 1px solid var(--borda);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 0.82rem;
  font-family: inherit;
}
.autocomplete-novo-codigo { width: 64px; }
.autocomplete-novo-nome { flex: 1 1 120px; min-width: 100px; }
.autocomplete-novo-salvar {
  background: var(--marca);
  color: var(--branco);
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 0.8rem;
  cursor: pointer;
  font-family: inherit;
}
.autocomplete-novo-salvar:disabled { opacity: 0.6; cursor: default; }
.autocomplete-novo-erro { flex-basis: 100%; color: var(--vermelho); font-size: 0.75rem; }

/* Classificação por coluna da tabela de Lançamentos (ver script em integracao/lote.ejs) — classe
   só é adicionada via JS nas colunas de fato clicáveis, então não vaza pra outras .tabela do app. */
.tabela th.coluna-ordenavel { cursor: pointer; user-select: none; }
/* filter em vez de sobrescrever "background" — .tabela th já define um navy sólido (var(--marca)),
   e um background translúcido aqui substituiria (não somaria a) essa cor, lavando o cabeçalho pra
   quase branco contra o fundo claro da página por trás. brightness só clareia o que já está lá. */
.tabela th.coluna-ordenavel:hover { filter: brightness(1.2); }
.tabela th.coluna-ordenada-asc::after { content: ' \25B2'; font-size: 0.7em; }
.tabela th.coluna-ordenada-desc::after { content: ' \25BC'; font-size: 0.7em; }