:root {
  --azul: #00695C;
  --azul-escuro: #00695C;
  --verde: #00A550;
  --vermelho: #ED3137;
  --cinza: #616161;
  --azul-claro: #8FD9C7;
  --laranja: #C24100;
  --bg: #F5F5F5;
  --texto: #212121;
  --borda: #BDBDBD;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Verdana, Arial, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--texto);
}
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--azul-escuro);
  color: white;
  padding: 0.6rem 1.2rem;
  flex-wrap: wrap;
  gap: 0.6rem;
  /* cabeçalho sempre visível: fica "grudado" no topo em vez de sumir ao
     rolar a tela. z-index alto o bastante pra ficar acima de qualquer
     cabeçalho de tabela (sticky, z-index 1-2), mas abaixo do fundo do
     modal de confirmação (z-index 100), que deve continuar cobrindo tudo
     quando aberto. */
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar-brand { font-weight: 700; font-size: 1.05rem; margin-right: 1rem; display: flex; align-items: center; gap: 0.65rem; }
.topbar-brand img { height: 26px; width: auto; display: block; }
.topbar-brand .topbar-brand-texto { display: flex; flex-direction: column; line-height: 1.15; }
.topbar-brand .topbar-brand-texto small { font-weight: 400; font-size: 0.72rem; color: #cfe9e4; }
.topbar-nav { display: flex; align-items: center; gap: 1.7rem; flex-wrap: wrap; }
.topbar-nav a { color: #e8eef5; font-size: 0.92rem; }
.topbar-nav a:hover { color: white; text-decoration: underline; }
.topbar-user { display: flex; align-items: center; gap: 0.8rem; font-size: 0.9rem; }
.btn-link { color: #cfe0f0 !important; }

.content { padding: 1.4rem 1.8rem 3rem; max-width: 1800px; margin: 0 auto; }

h1 { font-size: 1.4rem; margin: 0 0 1rem; color: var(--azul-escuro); }
h2 { font-size: 1.1rem; color: var(--azul-escuro); }

.card {
  background: white;
  border-radius: 10px;
  border: 1px solid var(--borda);
  padding: 1rem 1.2rem;
}
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.8rem;
  margin-bottom: 1.4rem;
}
.grid-qualitativo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.8rem;
  margin-bottom: 1.4rem;
  align-items: start;
}
.grid-qualitativo table td { font-size: 0.85rem; }
.tile {
  border-radius: 10px;
  padding: 0.9rem 1rem;
  color: white;
  text-align: center;
}
.tile .valor { font-size: 1.6rem; font-weight: 700; display: block; }
.tile-clicavel { cursor: pointer; transition: box-shadow 0.1s; }
.tile-clicavel:hover { box-shadow: 0 1px 6px rgba(0,0,0,0.25); }
.tile-ativo { box-shadow: 0 0 0 3px var(--azul-escuro) inset; }

/* cards pequenos (tela da empresa: mês a mês, por executor) — mais
   compactos que .tile, com nome + %/valor + rodapé de contagem, um fundo
   branco (não colorido) e uma faixa colorida na borda esquerda pra indicar
   o status (fechado/pendente, tem vencida ou não), em vez de pintar o
   card inteiro. Sem barra de rolagem: quebra em várias linhas quando não
   couber tudo na largura da tela, mas todos do mesmo tamanho (largura de
   coluna fixa, não 1fr) — nem a última linha incompleta estica os cards.
   130px (em vez de 160px) pra caber mais cards por linha (menos linhas). */
.grid-cards-pequenos {
  display: grid;
  grid-template-columns: repeat(auto-fill, 130px);
  gap: 0.5rem;
  margin-bottom: 1.2rem;
}
.card-pequeno {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: 130px;
  background: white;
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 0.5rem 0.55rem;
  text-decoration: none;
  color: var(--texto);
}
a.card-pequeno:hover { box-shadow: 0 1px 4px rgba(0,0,0,0.15); text-decoration: none; }
.card-pequeno-titulo { font-size: 0.72rem; font-weight: 600; color: #555; }
.card-pequeno-valor { font-size: 1.3rem; font-weight: 700; line-height: 1.15; }
.card-pequeno-badge { display: inline-block; align-self: flex-start; font-size: 0.6rem; font-weight: 600; color: white; padding: 0.1rem 0.4rem; border-radius: 999px; margin-top: 0.1rem; }
.card-pequeno-rodape { font-size: 0.66rem; color: #616161; margin-top: 0.1rem; }
.card-pequeno[onclick]:hover { box-shadow: 0 1px 5px rgba(0,0,0,0.18); }
.card-pequeno-ativo { box-shadow: 0 0 0 2px var(--azul-escuro) inset; background: #eef4fa; }
/* números "concluídas"/"vencida(s)" clicáveis dentro do card de mês — bem
   discretos de propósito: só o próprio número muda de cor e ganha um
   sublinhado pontilhado, sem badge/pilula nova ocupando espaço no card. */
.filtro-mes-num { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; text-decoration-thickness: 1px; font-weight: 600; border-radius: 3px; padding: 0 0.15rem; margin: 0 -0.15rem; }
.filtro-mes-num:hover { text-decoration-style: solid; }
.filtro-mes-concl { color: #1f8a4c; }
.filtro-mes-venc { color: var(--vermelho); }
/* estado ativo: sai do sublinhado discreto e vira um "chip" com fundo —
   bem mais visível que só trocar o estilo do sublinhado, pra ficar claro
   qual dos dois (concluídas/vencidas) está com o filtro ligado agora. */
.filtro-mes-num-ativo { text-decoration: none; }
.filtro-mes-concl.filtro-mes-num-ativo { background: #1f8a4c; color: white; }
.filtro-mes-venc.filtro-mes-num-ativo { background: var(--vermelho); color: white; }
/* cor da fonte em "Vezes/ano" e "% do total" na tabela de obrigações da
   empresa — indica de cara quem consome mais (vermelho/negrito), na média
   (cor padrão) ou menos (cinza) que as outras obrigações da mesma empresa. */
.execucao-alto { color: #ED3137; font-weight: 700; }
.execucao-medio { color: inherit; }
.execucao-baixo { color: #95a5a6; }
/* o "(N dias)" ao lado da data na lista "A vencer" — anotação leve, sem
   negrito. A cor por urgência (mesmas faixas do seletor "A vencer nos
   próximos": 7/15/30/60/90 dias) fica só nesse texto, não na linha nem na
   data em si. */
.dias-restantes-info { font-weight: 400; opacity: 0.85; }
.dias-restantes-info.venc-7 { color: #b3564f; opacity: 1; }
.dias-restantes-info.venc-15 { color: #c07c46; opacity: 1; }
.dias-restantes-info.venc-30 { color: #a68a3e; opacity: 1; }
.dias-restantes-info.venc-60 { color: #5b85ab; opacity: 1; }
.dias-restantes-info.venc-90 { color: #97a0a8; opacity: 1; }
/* o "(N dias de atraso)" em "Pendências vencidas" — quanto mais tempo
   passou do vencimento, mais grave a cor (escala só de vermelho, já que
   aqui é sempre algo ruim; diferente de "A vencer", que esfria conforme
   o prazo fica mais distante). Acima de 90 dias cai na mesma cor mais
   grave — atraso nunca "sai de moda". */
.dias-restantes-info.atraso-7 { color: #c1935a; opacity: 1; }
.dias-restantes-info.atraso-15 { color: #c17b46; opacity: 1; }
.dias-restantes-info.atraso-30 { color: #b85f4c; opacity: 1; }
.dias-restantes-info.atraso-60 { color: #ac4c42; opacity: 1; }
.dias-restantes-info.atraso-90 { color: #8f3730; opacity: 1; font-weight: 600; }
.tile .rotulo { font-size: 0.78rem; opacity: 0.95; }

table { border-collapse: collapse; width: 100%; background: white; }
th, td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--borda); font-size: 0.88rem; text-align: left; }
th { background: var(--azul); color: white; font-weight: 600; position: sticky; top: 0; }
/* Destaque ao passar o cursor na linha (opção "B com D" escolhida): barra
   azul na lateral esquerda + a linha "levanta" com uma sombra sutil. */
tr:hover td { background: #eaf1f8; box-shadow: 0 2px 6px rgba(0,0,0,0.10); }
tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--azul), 0 2px 6px rgba(0,0,0,0.10); }

.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  color: white;
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
}

.table-wrap { overflow: auto; max-height: 68vh; border: 1px solid var(--borda); border-radius: 8px; }

/* linhas que recebem foco via âncora (#obrig-123, #dia-2026-01-05) depois
   de uma ação sem JS (fallback) não podem ficar escondidas embaixo do
   cabeçalho fixo do site. */
tr[id^="obrig-"], tr[id^="dia-"] { scroll-margin-top: calc(var(--topbar-h, 90px) + 0.5rem); }

/* campos do cartão "Dar baixa em lote" empilhados verticalmente — usado
   tanto na barra lateral do Catálogo quanto no Painel de Atividades, onde
   a coluna é estreita e um <select> com nomes longos (empresa, atividade)
   não pode ter permissão de esticar além da largura da coluna. */
.campos-lote { display: flex; flex-direction: column; gap: 0.7rem; }
.campos-lote select, .campos-lote input { width: 100%; max-width: 100%; box-sizing: border-box; }

.catalogo-layout { display: grid; grid-template-columns: 300px 1fr; align-items: start; gap: 1rem; }
/* top/max-height contam com o cabeçalho fixo (--topbar-h, calculado em JS
   no base.html) pra sidebar e cabeçalho de tabela grudarem logo abaixo
   dele, e não por baixo/atrás dele. */
.catalogo-sidebar { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: calc(var(--topbar-h, 0px) + 0.8rem); max-height: calc(100vh - var(--topbar-h, 0px) - 1.6rem); overflow-y: auto; }
.catalogo-sidebar .card { width: 100%; }
/* 2026-09-16: voltou a ter scroll próprio (pedido do usuário -- a lista
   tinha ficado grande demais sem rolagem, difícil de navegar). O
   comentário antigo aqui falava de "dar corda" pro sticky de uma barra
   lateral (.catalogo-sidebar/.catalogo-layout, logo abaixo) -- mas
   nenhuma template usa mais essas classes hoje (tela foi redesenhada em
   algum momento, virou filtros no topo em vez de barra lateral), então
   esse motivo não existe mais. Com o scroll de volta aqui, o cabeçalho da
   tabela (regra global "th { position: sticky }") volta a grudar
   corretamente enquanto rola só a lista, sem precisar rolar a página
   inteira. Altura bem maior que o padrão (68vh, usado nas outras tabelas
   do sistema) porque essa lista tem muito mais linhas -- ocupa quase a
   tela toda, descontando o cabeçalho fixo do sistema (--topbar-h). */
.table-wrap-catalogo { max-height: calc(100vh - var(--topbar-h, 60px) - 2rem); overflow: auto; }
/* Catálogo de Obrigações (2026-09-16): a linha ficou muito larga (9
   colunas fixas + 12 meses + instrução + ações = ~23 colunas) -- pedido do
   usuário pra deixar mais compacta, sem tirar nenhuma coluna nem mudar o
   texto "dd/mm" de cada mês (é só fonte/espaçamento menores, mesmo
   princípio já usado em ".table-obrigacoes" noutra tela mais densa). As
   células de mês (.cell-mes) já têm fonte própria (0.72rem) e os selos
   (.badge) também -- não encolhem mais que isso, só o preenchimento ao
   redor deles é que diminui. */
.tabela-catalogo th, .tabela-catalogo td { padding: 0.3rem 0.35rem; font-size: 0.78rem; }

@media (max-width: 900px) {
  .catalogo-layout { grid-template-columns: 1fr; }
  .catalogo-sidebar { position: static; max-height: none; }
}

.table-obrigacoes th, .table-obrigacoes td { font-size: 0.78rem; padding: 0.35rem 0.4rem; white-space: nowrap; }
.table-obrigacoes th:nth-child(1), .table-obrigacoes td:nth-child(1) { white-space: normal; min-width: 160px; max-width: 200px; }
.table-obrigacoes th:nth-child(2), .table-obrigacoes td:nth-child(2),
.table-obrigacoes th:nth-child(3), .table-obrigacoes td:nth-child(3) { white-space: normal; max-width: 110px; }
.table-obrigacoes th:nth-child(4), .table-obrigacoes td:nth-child(4) { white-space: normal; max-width: 130px; }
.table-obrigacoes .col-obrigacao,
.table-obrigacoes th:nth-child(1) {
  position: sticky;
  left: 0;
  background: white;
  z-index: 1;
  box-shadow: 2px 0 4px -2px rgba(0,0,0,0.15);
}
.table-obrigacoes th:nth-child(1) { z-index: 2; background: var(--azul); }
/* a 1ª coluna é "sticky" (fica fixa ao rolar pros lados) e por isso tem
   fundo branco próprio — sem isso, o hover da linha (regra acima) não
   aparecia nela, já que o branco fixo cobria o azulado do destaque. */
.table-obrigacoes tr:hover .col-obrigacao {
  background: #eaf1f8;
  box-shadow: inset 3px 0 0 var(--azul), 2px 0 4px -2px rgba(0,0,0,0.15);
}
.table-obrigacoes tr.linha-destacada .col-obrigacao {
  animation: destacar-linha 4s ease-out;
}
.select-compacto { font-size: 0.75rem; width: 100px; padding: 0.25rem; }

.form-box { max-width: 380px; margin: 3rem auto; }
.form-box .card { padding: 1.6rem; }
input, select, button {
  font-family: inherit;
  font-size: 0.92rem;
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--borda);
}
label { display: block; font-size: 0.85rem; margin: 0.7rem 0 0.2rem; color: #444; }
button, .btn {
  background: var(--azul);
  color: white;
  border: none;
  cursor: pointer;
  padding: 0.55rem 1rem;
  border-radius: 6px;
  margin-top: 1rem;
}
button:hover, .btn:hover { background: var(--azul-escuro); text-decoration: none; }
.erro { color: var(--vermelho); font-size: 0.85rem; margin-top: 0.6rem; }

/* empresas em "chips" (cadastro de atividades em lote) — em vez de uma
   lista empilhada, uma por linha, os nomes fluem lado a lado e quebram
   quando não couber, cada um clicável como um todo (não só a caixinha). */
.chips-empresas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-height: 40vh;
  overflow-y: auto;
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 0.7rem;
  margin-bottom: 0.8rem;
}
.chip-empresa {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: white;
  font-size: 0.82rem;
  font-weight: normal;
  color: var(--texto);
  cursor: pointer;
  user-select: none;
}
.chip-empresa:hover { border-color: var(--azul); }
.chip-empresa input[type="checkbox"] { margin: 0; accent-color: var(--azul); }
.chip-empresa-marcada { background: var(--azul); border-color: var(--azul); color: white; }

/* botões de ação compactos e consistentes nas linhas de tabela — antes
   misturava link, botão e link de novo na mesma linha (Vincular empresas /
   Editar nome / Excluir-desativar), cada um com uma cara diferente. */
.btn-tabela {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--borda);
  background: white;
  color: var(--texto);
  font-size: 0.78rem;
  text-decoration: none;
  cursor: pointer;
  margin: 0 0.3rem 0.3rem 0;
}
.btn-tabela:hover { border-color: var(--azul); color: var(--azul); background: #f5f9fc; text-decoration: none; }
.btn-tabela-perigo:hover { border-color: #ED3137; color: #ED3137; background: #fdecea; }
.aviso { color: #7a5c00; background: #fff6da; border: 1px solid #ffe088; padding: 0.6rem 0.9rem; border-radius: 6px; font-size: 0.85rem; }

.login-logo { text-align: center; font-weight: 700; color: var(--azul-escuro); margin-bottom: 1rem; font-size: 1.15rem; }

/* ---------------------------------------------------------------------
   Capa da tela de login — painel cheio (hero) à esquerda + formulário à
   direita. Usa margens negativas pra "furar" o padding do <main class=
   "content"> do base.html e ocupar a tela inteira, já que login é a
   única página sem topbar (usuário ainda não autenticado). */
.login-page {
  margin: -1.4rem -1.8rem -3rem;
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  max-width: none;
}
.login-hero {
  flex: 1.3;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #00BB69 0%, #00946C 30%, #00766E 100%);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 4rem;
  min-width: 0;
}
.login-hero-shape { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.08); }
.login-hero-shape.s1 { width: 480px; height: 480px; top: -160px; right: -140px; }
.login-hero-shape.s2 { width: 260px; height: 260px; bottom: -100px; left: -80px; background: rgba(255,255,255,0.06); }
.login-hero-shape.s3 { width: 140px; height: 140px; top: 55%; right: 12%; background: rgba(255,255,255,0.07); }
/* Marca d'água do ícone da São Manoel no fundo do painel — pedido do
   usuário (2026-09-15: "tambem ela bem grande de fundo em marca dagua").
   Usa só o ícone (recortado da logo horizontal em logo-icone-negativo.png),
   não a logo inteira — a logo horizontal é bem "esticada" e ficaria
   estranha cortada num canto; o ícone sozinho é quadrado e funciona melhor
   como marca d'água. */
.login-hero-watermark {
  /* Pedido do usuario (2026-09-16): "eu estava imaginando a marca dagua
     cobrir tudo e as letra ficar atras dela" -- marca d'agua cobrindo o
     painel inteiro (object-fit:cover, 100% de largura/altura), com todo o
     texto por cima dela (z-index:1 nos elementos de texto, ja existente). */
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.13;
  pointer-events: none;
  user-select: none;
}
.login-hero-badge {
  position: relative; z-index: 1;
  margin-bottom: 1.8rem;
}
.login-hero-badge img { height: 58px; width: auto; display: block; }
.login-hero-titulo { position: relative; z-index: 1; font-size: 2.4rem; font-weight: 800; line-height: 1.15; margin: 0 0 0.6rem; letter-spacing: -0.01em; color: white; }
.login-hero-empresa { position: relative; z-index: 1; font-size: 1.1rem; font-weight: 600; color: #FAE830; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1.2rem; }
.login-hero-tagline { position: relative; z-index: 1; font-size: 1.02rem; color: #e3edf7; max-width: 420px; line-height: 1.55; margin-bottom: 2.2rem; }
.login-hero-features { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.7rem; }
.login-hero-features .item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.92rem; color: #f1f6fb; }
.login-hero-features .dot { width: 22px; height: 22px; border-radius: 50%; background: var(--laranja); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.72rem; }
.login-form-side { flex: 1; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 2rem; }
.login-form-side .form-box { margin: 0; width: 100%; max-width: 380px; }
.login-form-side .login-logo { display: none; }
@media (max-width: 860px) {
  .login-page { flex-direction: column; }
  .login-hero { padding: 2.2rem 1.8rem; min-height: 220px; }
  .login-hero-titulo { font-size: 1.7rem; }
  .login-hero-features { display: none; }
}

/* ---------------------------------------------------------------------
   Tela inicial de navegação (/inicio) — cabeçalho com o mesmo gradiente
   da capa de login (identidade visual) + grade de cards grandes, um por
   seção do sistema. */
.inicio-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, #00BB69 0%, #00946C 30%, #00766E 100%);
  color: white;
  border-radius: 14px;
  padding: 2.2rem 2.4rem;
  margin-bottom: 1.8rem;
}
.inicio-hero h1 { color: white; font-size: 1.7rem; margin-bottom: 0.3rem; }
.inicio-hero p { color: #e3edf7; margin: 0; font-size: 0.95rem; }
.grid-inicio {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
}
.card-inicio {
  background: white;
  border-radius: 12px;
  border: 1px solid var(--borda);
  padding: 1.3rem 1.3rem 1.1rem;
  display: block;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
  border-top: 4px solid var(--cor, var(--azul));
}
.card-inicio:hover { transform: translateY(-3px); box-shadow: 0 10px 24px -8px rgba(31,78,120,0.28); text-decoration: none; border-color: var(--cor, var(--azul)); }
.card-inicio .icone {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--cor, var(--azul));
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 0.9rem;
}
.card-inicio .titulo { font-weight: 700; color: var(--texto); font-size: 1rem; margin-bottom: 0.3rem; }
.card-inicio .desc { color: #666; font-size: 0.82rem; line-height: 1.4; }

/* lista de empresas na tela de início: com muitas empresas ativas, os cards
   (mesmo tamanho dos cards de módulo) deixariam a página enorme — em vez
   disso, uma caixa com altura fixa e rolagem vertical própria. */
.empresas-inicio-scroll {
  max-height: 60vh;
  overflow-y: auto;
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 1rem;
  background: #fbfcfd;
}
.empresas-inicio-scroll .grid-inicio { gap: 0.8rem; }

.filtros { display: flex; gap: 0.8rem; align-items: end; margin-bottom: 1rem; flex-wrap: wrap; }
.filtros.filtros-painel {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 0.3rem;
}
.filtros.filtros-painel > div { flex-shrink: 0; }
.filtros.filtros-painel select[name="obrigacao"] {
  width: 220px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filtros.filtros-painel select[name="empresa_id"] {
  width: 220px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell-mes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 24px;
  border-radius: 4px;
  color: white;
  font-size: 0.72rem;
  cursor: pointer;
  border: none;
}
.cell-mes:hover { opacity: 0.85; }
.legenda { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.8rem; margin-bottom: 1rem; }
.legenda-item { display: flex; align-items: center; gap: 0.35rem; }
.legenda-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

.subtitulo { color: #666; font-size: 0.9rem; margin: -0.6rem 0 1.2rem; }
.section { margin-bottom: 2rem; }
.pill { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; background: #eef2f6; font-size: 0.76rem; }

/* ---- Lâmina Executiva ---- */
.lamina-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.lamina-folha {
  background: #fff;
  border: 1px solid #e1e0d9;
  border-radius: 10px;
  padding: 2rem;
  max-width: 900px;
  margin: 0 auto;
  box-shadow: 0 4px 18px -10px rgba(0,0,0,0.15);
}
.lamina-cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; border-bottom: 2px solid var(--azul-escuro); padding-bottom: 1rem; margin-bottom: 1.5rem; }
.lamina-titulo { font-size: 1.3rem; font-weight: 700; color: var(--azul-escuro); }
.lamina-subtitulo { color: #666; font-size: 0.9rem; margin-top: 0.2rem; }
.lamina-tiles-topo { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.lamina-tile-topo {
  background: var(--azul); color: #fff; border-radius: 8px;
  padding: 0.5rem 1rem; text-align: center; min-width: 110px;
}
.lamina-tile-topo .valor { display: block; font-size: 1.4rem; font-weight: 700; line-height: 1.1; }
.lamina-tile-topo .rotulo { display: block; font-size: 0.7rem; opacity: 0.9; }
.lamina-secoes { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.lamina-secao h2 { margin-top: 0; }
.lamina-donut-wrap { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.lamina-donut circle { transition: none; }
.lamina-donut-numero { font-size: 1.7rem; font-weight: 700; fill: var(--texto); }
.lamina-donut-legenda-central { font-size: 0.72rem; fill: #666; }
.lamina-legenda { display: flex; flex-direction: column; gap: 0.5rem; }
.lamina-legenda-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; }
.lamina-legenda-cor { width: 13px; height: 13px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.lamina-legenda-label { min-width: 70px; }
.lamina-legenda-valor { color: #666; font-size: 0.82rem; }
.lamina-barras { display: flex; flex-direction: column; gap: 0.7rem; }
.lamina-barra-linha { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 0.6rem; }
.lamina-barra-nome { font-size: 0.85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lamina-barra-trilho { background: #eef0ee; border-radius: 5px; height: 16px; display: flex; overflow: hidden; }
.lamina-barra-seg { height: 100%; }
.lamina-barra-valor { font-size: 0.78rem; color: #444; white-space: nowrap; }
.lamina-barra-total { color: #999; }
.lamina-rodape { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #eee; font-size: 0.72rem; color: #999; text-align: center; }

@media print {
  .topbar, .lamina-toolbar, .no-print { display: none !important; }
  body { background: #fff; }
  .lamina-folha { box-shadow: none; border: none; max-width: 100%; }
}
.lamina-mes-filtro { margin-bottom: 1.5rem; }
@media (max-width: 760px) {
  .lamina-secoes { grid-template-columns: 1fr; }
}

/* Menu agrupado em caixas de listagem (Cadastro / Empresas / Consulta e
   Acompanhamento) — 2026-09-04. Abre com hover (mouse) e também com clique
   (JS em base.html, classe "aberto"), pra funcionar em touch também. */
.nav-group { position: relative; display: flex; align-items: center; }
/* "Ponte" invisível entre o botão e o dropdown — 2026-09-04. O dropdown
   tem margin-top (respiro visual antes dele aparecer), mas isso deixa uma
   faixa vazia entre o fim do botão e o início do dropdown que não faz
   parte de nenhum elemento — descendo o mouse por essa faixa "sai" do
   :hover do grupo, fechando o menu antes de chegar lá. Esse ::after
   invisível preenche exatamente essa faixa (mesma altura do margin-top do
   dropdown), então o grupo continua "sob o mouse" o caminho inteiro e o
   menu não fecha sozinho no meio do caminho. */
.nav-group::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 340px;
  height: 0.6rem;
}
.nav-group-btn {
  color: #e8eef5;
  font-size: 0.92rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.nav-group-btn:hover { color: white; text-decoration: underline; }
.nav-group-btn .caret { font-size: 0.65rem; opacity: 0.85; }
.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.6rem;
  background: white;
  border-radius: 10px;
  box-shadow: 0 14px 32px -9px rgba(0,0,0,0.30), 0 2px 8px rgba(0,0,0,0.10);
  min-width: 250px;
  padding: 0.5rem;
  z-index: 60;
}
.nav-group:hover .nav-dropdown,
.nav-group.aberto .nav-dropdown { display: block; }
.topbar-nav .nav-dropdown a {
  display: block;
  color: #274156;
  font-size: 0.9rem;
  padding: 0.62rem 0.85rem;
  border-radius: 7px;
  line-height: 1.3;
}
.topbar-nav .nav-dropdown a:hover {
  background: #eef4fa;
  color: var(--azul-escuro);
  text-decoration: none;
}
.nav-dropdown .nav-separador { height: 1px; background: #e4e9ee; margin: 0.4rem 0.2rem; }
.nav-dropdown .nav-secao-titulo {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a97a6;
  padding: 0.5rem 0.85rem 0.3rem;
}

/* Grupo "Empresas": dropdown mais largo, com campo de busca fixo no topo
   e lista rolavel com as empresas ativas -- 2026-09-04, segunda versao do
   menu (antes era so o link "Cadastro de Empresas", que agora mora dentro
   do grupo "Cadastro"). */
.nav-dropdown-empresas {
  width: 320px;
  padding: 0;
}
.nav-dropdown-empresas .empresas-busca-wrap {
  padding: 0.7rem 0.7rem 0.5rem;
  border-bottom: 1px solid #eef1f4;
}
.nav-dropdown-empresas .empresas-busca {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.7rem;
  border: 1px solid #d5dde4;
  border-radius: 7px;
  font-size: 0.87rem;
  font-family: inherit;
  outline: none;
}
.nav-dropdown-empresas .empresas-busca:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(46,117,182,0.15);
}
.nav-dropdown-empresas .empresas-lista {
  max-height: 360px;
  overflow-y: auto;
  padding: 0.4rem;
}
.nav-dropdown-empresas .empresas-lista a {
  display: block;
  color: #274156;
  font-size: 0.87rem;
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-dropdown-empresas .empresas-lista a:hover {
  background: #eef4fa;
  color: var(--azul-escuro);
  text-decoration: none;
}
/* Empresa com pendência vencida — 2026-09-04, discreto (só a cor da fonte,
   sem negrito/ícone/fundo) pra sinalizar sem poluir a lista; mantém o
   vermelho (não vira azul) mesmo com o mouse em cima, pra não perder o
   aviso justo no hover. */
.nav-dropdown-empresas .empresas-lista a.empresa-vencida { color: var(--vermelho); }
.nav-dropdown-empresas .empresas-lista a.empresa-vencida:hover {
  background: #fdecea;
  color: var(--vermelho);
}
.nav-dropdown-empresas .empresas-vazio {
  padding: 0.8rem 0.9rem;
  font-size: 0.85rem;
  color: #8a97a6;
}

/* Submenu com o resumo de pendências (vencidas/a vencer) de UMA empresa,
   ao passar o mouse em cima do nome dela — 2026-09-05. Conteúdo vem de
   /empresas/{id}/resumo-pendencias-menu (JSON), buscado sob demanda no
   hover (ver JS em base.html), não pré-carregado pra todas as empresas de
   uma vez. "left: 100%" sem margem/vão de propósito, mesmo motivo do
   ".nav-group::after": um vão vazio entre a lista e o submenu faria o
   mouse "sair" no meio do caminho ao mover na diagonal, fechando o
   submenu antes da hora. */
.empresas-flyout {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  width: 280px;
  max-height: 380px;
  overflow-y: auto;
  background: white;
  /* sem isso, o texto herdava o branco/claro do ".topbar" (fundo azul
     escuro) e ficava invisível em cima do fundo branco deste submenu —
     achado no teste visual (2026-09-05), só a data e os títulos das
     seções apareciam, que já tinham cor própria definida. */
  color: #274156;
  border-radius: 10px;
  box-shadow: 0 14px 32px -9px rgba(0,0,0,0.30), 0 2px 8px rgba(0,0,0,0.10);
  padding: 0.8rem 0.9rem;
  font-size: 0.83rem;
  z-index: 61;
}
.empresas-flyout.aberto { display: block; }
.empresas-flyout h4 {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: #274156;
  white-space: normal;
}
.empresas-flyout .flyout-secao-titulo {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a97a6;
  margin: 0.6rem 0 0.25rem;
}
.empresas-flyout .flyout-secao-titulo:first-of-type { margin-top: 0; }
.empresas-flyout .flyout-item {
  display: block;
  padding: 0.28rem 0;
  border-bottom: 1px dashed #eef1f4;
  line-height: 1.3;
  white-space: normal;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 4px;
}
/* itens do submenu agora são links (2026-09-05, "leva na pendência da
   empresa já filtrado") -- destaque leve no hover pra ficar claro que dá
   pra clicar, sem exagerar (o submenu já é discreto por design). */
.empresas-flyout .flyout-item:hover {
  background: #f4f7fb;
  padding-left: 0.3rem;
  margin-left: -0.3rem;
}
.empresas-flyout .flyout-item:last-child { border-bottom: none; }
.empresas-flyout .flyout-vencida { color: var(--vermelho); }
option.opcao-vencida { color: var(--vermelho); }
.filtros-painel optgroup.grupo-vencidas,
.filtros optgroup.grupo-vencidas {
  color: var(--cinza);
  font-style: normal;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-top: 1px solid var(--borda);
}
.filtros-painel optgroup.grupo-vencidas option,
.filtros optgroup.grupo-vencidas option { font-weight: 400; }
.empresas-flyout .flyout-due { color: #8a97a6; font-size: 0.78rem; }
.empresas-flyout .flyout-vazio { color: #8a97a6; font-style: italic; padding: 0.3rem 0; }
.empresas-flyout .flyout-mais { color: #8a97a6; font-size: 0.78rem; padding-top: 0.3rem; }
.empresas-flyout .flyout-carregando { color: #8a97a6; font-style: italic; }
.empresas-flyout .flyout-ver-tudo {
  display: block;
  margin-top: 0.7rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--azul);
  font-weight: 600;
}

.linha-destacada {
  animation: destacar-linha 4s ease-out;
}
@keyframes destacar-linha {
  0% { background-color: #fff3c4; }
  100% { background-color: transparent; }
}

/* ---- Bloqueio visual de "dar baixa" por departamento (2026-09-16) ----
   Célula/botão cinza com cadeado, sem reagir a clique, pras obrigações de
   um departamento diferente do da pessoa logada. A checagem real continua
   no servidor -- isso aqui é só pra não deixar nem clicar à toa. */
.cell-mes.bloqueada, .badge.bloqueada {
  background: #d9dcdf !important;
  color: #8b93a1 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}
.cell-mes.bloqueada:hover, .badge.bloqueada:hover { opacity: 1 !important; }
tr.linha-pendencia.bloqueada, tr.linha-rotina.bloqueada { opacity: 0.6; }
input.chk-pendencia:disabled, input.chk-rotina-lote:disabled { cursor: not-allowed; }
span.select-compacto.bloqueada {
  color: #8b93a1;
  cursor: not-allowed;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}