:root {
  --azul-escuro: #2c3e50;
  --azul: #2980b9;
  --verde: #27ae60;
  --vermelho: #e74c3c;
  --laranja: #e67e22;
  --amarelo: #f1c40f;
  --roxo: #9b59b6;
  --cinza-bg: #f4f6f8;
  --cinza-borda: #e1e4e8;
  --texto: #2c3e50;
}

* { box-sizing: border-box; }

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

.app-shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

.sidebar {
  width: 230px;
  flex-shrink: 0;
  background: var(--azul-escuro);
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
/* Botao "hamburguer" - so aparece em tela estreita (media query abaixo).
   Fixo no canto, acima de tudo, pra continuar acessivel mesmo com o menu
   fechado. */
.menu-toggle {
  display: none;
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1001;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 6px;
  background: var(--azul-escuro);
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
/* Fundo escurecido atras do menu aberto em tela estreita - clicar nele
   fecha o menu (mesmo padrao ja usado nos modais .modal-overlay). */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(15, 23, 32, 0.55);
}

.sidebar-title { padding: 18px 20px 14px; border-bottom: 1px solid rgba(255,255,255,0.12); margin-bottom: 8px; }
.sidebar-title h1 { margin: 0; font-size: 1.15rem; color: #fff; }
.subtitle { font-size: 0.78rem; opacity: 0.7; color: #fff; }

.bloqueio-overlay { position: fixed; inset: 0; z-index: 1000; background: #fff; display: flex; align-items: center; justify-content: center; }

/* Visualizacao de documento embutida (PDF de pendentes/aguardando-empresa)
   - overlay simples, generico o bastante pra reaproveitar em outro modal
   futuro que precise so de um titulo + conteudo + fechar. */
.modal-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(15, 23, 32, 0.72); display: flex; align-items: center; justify-content: center; padding: 24px; }
/* max-width:96vw (28/08/2026, pedido do escritorio de ajuste de tela) -
   rede de seguranca pra NENHUM modal conseguir ultrapassar a largura da
   tela horizontalmente, mesmo um sem "width" inline definido - o conteudo
   largo de verdade (tabela) ja tem sua PROPRIA rolagem via .table-wrap,
   entao isso nunca deveria cortar informacao, so evitar o modal como um
   todo esticar pra fora da tela em telas estreitas/notebook.
   resize:both + overflow:hidden (28/08/2026, mesmo pedido - o escritorio
   queria poder MOVER a janela do modal de lugar e redimensionar ela, nao
   so rolar a tabela por dentro) - overflow:hidden e exigido pelo proprio
   CSS pra "resize" funcionar, e tambem mantem os cantos arredondados
   quando o modal encolhe. O "arrastar pelo cabecalho" e feito em JS (ver
   tornarModaisArrastaveisERedimensionaveis, app.js) - CSS puro nao tem
   como mover um elemento fixed/absolute sozinho. */
.modal-box { background: #fff; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,0.4); display: flex; flex-direction: column; max-height: calc(100vh - 48px); max-width: 96vw; min-width: 320px; min-height: 180px; overflow: hidden; resize: both; }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--cinza-borda); }
.modal-box-pdf { width: min(1000px, 92vw); height: calc(100vh - 48px); }
.modal-pdf-conteudo { flex: 1; width: 100%; overflow: auto; background: #525659; padding: 16px 0; text-align: center; }
.modal-pdf-conteudo canvas { display: block; margin: 0 auto 12px; box-shadow: 0 1px 6px rgba(0,0,0,0.35); max-width: 100%; height: auto; }
.bloqueio-caixa { background: #fff; padding: 32px 36px; border-radius: 10px; width: 320px; text-align: center; border: 1px solid var(--cinza-borda); box-shadow: 0 4px 24px rgba(0,0,0,0.08); }
/* Moldura maior que a propria logo de proposito (17/09/2026, achado
   real: "object-fit:cover" cortava "ASSESSORIA CONTABIL", que fica perto
   da borda inferior do quadrado da logo - um circulo inscrito num
   quadrado sempre corta os 4 cantos, e o texto ocupava boa parte da
   largura bem perto do canto de baixo). A logo inteira (com
   "object-fit:contain", sem cortar nada) fica MENOR que a moldura
   circular ao redor - nenhuma parte da imagem (incluindo o texto) e
   perdida. Fundo da moldura escuro (nao branco, pedido do escritorio em
   17/09/2026) pra combinar com a textura preta da propria logo, em vez
   de deixar uma faixa branca ao redor.
   68% (nao mais) e o limite matematico seguro: um quadrado ocupando X%
   da moldura tem diagonal X%*sqrt(2) - pra essa diagonal nao ultrapassar
   o diametro da moldura (X%*sqrt(2) <= 100%), X% precisa ser <= ~70,7% -
   68% garante margem de sobra mesmo a propria logo tendo cantos quase
   retos (nao e perfeitamente circular por dentro). */
.logo-login-moldura {
  width: 140px; height: 140px;
  border-radius: 50%;
  background: #14100a;
  margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  overflow: hidden;
}
.logo-login-imagem { width: 68%; height: 68%; object-fit: contain; }
.bloqueio-caixa h1 { color: var(--texto); margin: 0 0 4px; font-size: 1.3rem; }
.bloqueio-caixa input { width: 100%; margin-top: 10px; box-sizing: border-box; padding: 9px 10px; border-radius: 5px; border: 1px solid var(--cinza-borda); background: #fff; color: var(--texto); font-size: 0.95rem; }
.bloqueio-caixa .btn { width: 100%; margin-top: 16px; }
.bloqueio-caixa .hint { color: #607080; }
.bloqueio-caixa .hint a { color: var(--azul); }

/* Botao de mostrar/ocultar senha (icone de olho) - reutilizado no login,
   na tela de bloqueio e no cadastro de usuarios. O wrapper assume a
   margem/tamanho que antes ficava direto no input. */
.campo-senha-wrap { position: relative; }
.campo-senha-wrap input { padding-right: 34px !important; }
.campo-senha-wrap .btn-alternar-senha {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-size: 1rem;
  line-height: 1; padding: 4px 6px; color: #607080; opacity: 0.8;
}
.campo-senha-wrap .btn-alternar-senha:hover { opacity: 1; }
.bloqueio-caixa .campo-senha-wrap { margin-top: 10px; }
.bloqueio-caixa .campo-senha-wrap input { margin-top: 0; }
.bloqueio-caixa .campo-senha-wrap .btn-alternar-senha { color: #607080; }

.tab-btn {
  border: none;
  background: none;
  text-align: left;
  padding: 13px 20px;
  font-size: 0.92rem;
  cursor: pointer;
  color: rgba(255,255,255,0.75);
  border-left: 3px solid transparent;
}
.tab-btn:hover { color: #fff; background: rgba(255,255,255,0.06); }
.tab-btn.active {
  color: #fff;
  border-left-color: var(--azul);
  background: rgba(255,255,255,0.08);
  font-weight: 600;
}

/* Grupo "Cadastros" - botao pai so expande/recolhe (nunca troca de painel
   sozinho), submenu recuado com os 3 filhos que se comportam como tab-btn
   normal. Mesma paleta/hover dos demais itens, sem inventar icone novo (o
   menu hoje nao usa icones em nenhum item). */
.tab-group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tab-group-toggle::after {
  content: "▸";
  font-size: 0.75rem;
  opacity: 0.6;
  transition: transform 0.15s ease;
}
.tab-group-toggle.open::after { transform: rotate(90deg); }
.tab-group-toggle.grupo-ativo { color: #fff; background: rgba(255,255,255,0.06); }

/* Submenu do menu lateral (09/09/2026, pedido do escritorio: "muito
   confuso visualmente" - o fundo do submenu era igual ao da barra
   inteira e o recuo do titulo era quase igual ao do menu pai, 24px contra
   20px). Regra unica pras 2 classes compartilhadas por TODO submenu do
   sistema (.tab-submenu/.tab-sub, ja usadas por Cadastros/Busca de XML/
   Situacao Fiscal/Configuracoes) - qualquer submenu novo que reusar essas
   mesmas classes (padrao ja estabelecido) herda o layout automaticamente,
   sem precisar repetir CSS nenhum.
   - Fundo mais claro que a barra lateral (--azul-escuro solido) pra
     diferenciar visualmente o grupo expandido do resto do menu.
   - Recuo do titulo do submenu ~1cm (38px) A MAIS que o do menu pai
     (20px de .tab-btn) - 58px no total. */
.tab-submenu { display: none; flex-direction: column; background: rgba(255, 255, 255, 0.08); }
.tab-submenu.open { display: flex; }
.tab-sub { padding-left: 58px; font-size: 0.86rem; }

/* Icone colorido ao lado de cada item do menu lateral (05/09/2026, todos
   os 16 itens - antes so "Busca de XML" tinha icone, agora todo o menu
   segue o mesmo padrao visual). Tamanho 22px (sugerido pelo material
   original do icone) - reduzido o padding-left de .tab-sub acima (era
   38px, so texto) porque agora o proprio icone ja da o recuo visual dos
   itens de submenu. */
.tab-btn-label { display: flex; align-items: center; gap: 10px; }
.tab-icon { width: 22px; height: 22px; flex-shrink: 0; }

/* Sem max-width - pedido do escritorio em 27/08/2026 (print real mostrando
   um vao vazio grande do lado direito em monitor largo, a tabela ficava
   "encolhida" no meio da tela em vez de usar o espaco disponivel). Antes
   tinha max-width:1100px; agora "main" usa toda a largura que sobrar do
   lado do menu, so limitada pelo padding. */
main { flex: 1; min-width: 0; padding: 24px 28px 60px; }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

h2 {
  font-size: 1rem;
  color: var(--azul-escuro);
  margin: 26px 0 10px;
}

.cards-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.card {
  flex: 1;
  min-width: 200px;
  border-radius: 8px;
  padding: 14px 16px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.card-dark { background: var(--azul-escuro); }
.card-click { cursor: pointer; transition: transform .08s ease; }
.card-click:hover { transform: translateY(-2px); }
.card-title { font-size: 0.75rem; opacity: 0.9; letter-spacing: 0.02em; }

/* Cards "modernos" (22/09/2026, pedido do escritorio - referencia visual
   trazida por eles) - comeca so no Painel de Tarefas (".card-tarefas",
   nao ".card" puro) pra nao mudar a aparencia de cards em outras telas
   ainda nao revisadas; se o escritorio aprovar o estilo, o mesmo padrao
   se estende ao resto do sistema depois. So visual (raio maior, sombra,
   icone) - nenhuma classe/estrutura funcional (card-click, os ids etc.)
   foi trocada. */
.card-tarefas {
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  position: relative;
  overflow: hidden;
}
.card-tarefas:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.18); }
.card-tarefas::after {
  /* Brilho decorativo sutil (canto superior direito) - so estetica, nao
     interfere na leitura do numero/titulo. */
  content: "";
  position: absolute;
  top: -30px; right: -30px;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
}
.card-tarefas-icone { font-size: 1.3rem; line-height: 1; opacity: 0.95; }
.card-tarefas .card-title { display: flex; align-items: center; gap: 8px; }
.card-value { font-size: 1.7rem; font-weight: 700; }
.card-value-sm { font-size: 1.05rem; font-weight: 600; line-height: 1.3; }

.alert-box {
  background: #fdecea;
  border: 1px solid #f5b7b1;
  color: #922b21;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 0.88rem;
  cursor: pointer;
}
.alert-box strong { display: block; margin-bottom: 4px; }
.alert-box-aviso { background: #fef5e7; border-color: #f8d78e; color: #7d5a11; }
/* Situacao da consulta ao cadastro do ISS Net no Emissor (30/09/2026): caixa
   com fundo claro e texto escuro - o texto laranja solto sobre o fundo
   verde-azulado ficava quase ilegivel. */
.emissor-status-cadastro { margin-top: 6px; padding: 8px 12px; border-radius: 6px; border: 1px solid #b8d4e8; background: #eef6fc; color: #12384f; font-size: 0.85rem; line-height: 1.4; font-weight: 400; }
.campo-erro-verificacao { border: 2px solid #c0392b !important; box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15); }
.emissor-ajuda-erro { display: block; margin-top: 6px; padding: 8px 12px; border-radius: 6px; border: 1px solid #e3a59c; background: #fdecea; color: #7a1c12; font-size: 0.85rem; line-height: 1.4; font-weight: 400; }
.emissor-ajuda-erro strong { display: block; margin-bottom: 2px; }
.emissor-verificacao { margin-top: 14px; padding: 12px 16px; border-radius: 8px; border: 1px solid #e3a59c; background: #fdecea; color: #7a1c12; }
.emissor-verificacao.ok { border-color: #9fd3b0; background: #eaf7ee; color: #14532d; }
.emissor-verificacao h4 { margin: 0 0 6px; }
.emissor-verificacao ol { margin: 6px 0 0; padding-left: 22px; }
.emissor-verificacao li { margin: 4px 0; }
.emissor-verificacao li button { background: none; border: none; padding: 0; color: inherit; font: inherit; text-align: left; text-decoration: underline; cursor: pointer; }
.emissor-verificacao li button:hover { color: #c0392b; }
.emissor-menu-issnet { margin: 10px 0 18px; padding: 14px 16px; border: 1px solid #b8d4e8; border-radius: 8px; background: #f4f9fd; }
.emissor-menu-issnet-topo { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 0.85rem; color: #12384f; }
.issnet-passo { padding: 12px 14px; margin-bottom: 10px; background: #fff; border: 1px solid #c9d6e2; border-left: 4px solid #1f8fc4; border-radius: 8px; }
.issnet-passo.feito { border-left-color: #1b6b3a; }
.issnet-passo-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 1rem; color: #12384f; }
.issnet-passo-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #1f8fc4; color: #fff; font-weight: 700; font-size: 0.85rem; flex: none; }
.issnet-passo.feito .issnet-passo-num { background: #1b6b3a; }
.issnet-passo select { width: 100%; max-width: 620px; }
.issnet-empresa { padding: 10px 12px; border-radius: 6px; background: #eef6fc; border: 1px solid #b8d4e8; }
.issnet-empresa-nome { font-size: 1.05rem; font-weight: 700; color: #12384f; }
.issnet-empresa-dados { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 6px; font-size: 0.9rem; align-items: center; }
.issnet-instrucoes { margin: 10px 0; padding-left: 22px; font-size: 0.9rem; line-height: 1.5; }
.issnet-faixa { padding: 10px 12px; border-radius: 6px; background: #eaf7ee; border: 1px solid #9fd3b0; color: #14532d; font-size: 0.95rem; margin-bottom: 12px; }
.issnet-faixa-aviso { display: block; margin-top: 4px; font-size: 0.8rem; color: #3d5a47; }
.issnet-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.issnet-cartao { display: flex; flex-direction: column; gap: 3px; padding: 12px; border: 1px solid #c9d6e2; border-radius: 8px; background: #fff; color: #12384f; text-decoration: none; }
.issnet-cartao:hover { border-color: #1f8fc4; box-shadow: 0 2px 8px rgba(31, 143, 196, 0.18); }
.issnet-cartao-icone { font-size: 1.4rem; }
.issnet-cartao small { color: #56687a; font-size: 0.78rem; line-height: 1.3; }
.emissor-menu-issnet-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 18px; }
.emissor-menu-issnet-grupo h4 { margin: 0 0 4px; font-size: 0.9rem; color: #12384f; border-bottom: 2px solid #1f8fc4; padding-bottom: 3px; }
.emissor-menu-issnet-grupo h5 { margin: 6px 0 2px; font-size: 0.78rem; color: #56687a; font-weight: 600; text-transform: uppercase; }
.emissor-menu-issnet-grupo a { display: block; padding: 3px 0; font-size: 0.85rem; color: #1f5f99; text-decoration: none; }
.emissor-menu-issnet-grupo a:hover { text-decoration: underline; }
.emissor-menu-issnet-grupo a.sub { padding-left: 12px; }
.destino-xml-barra { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 14px; padding: 12px 14px; border: 1px solid #b8d4e8; border-radius: 8px; background: #f4f9fd; font-size: 0.9rem; }
.destino-xml-barra #destinoXmlTexto { margin: 0 10px 0 4px; color: #12384f; }
.tree-row .btn-baixar-pasta { margin-left: 10px; padding: 2px 10px; font-size: 0.8rem; }
/* Rotina do Dominio dentro de cada quadro de importacao (05/10/2026). */
.dominio-rotina .dominio-caminho { margin: 6px 0 12px; padding: 10px 12px; border: 1px solid #b8d4e8; border-radius: 8px; background: #f4f9fd; font-size: 0.9rem; }
.dominio-rotina .dominio-caminho p { margin: 0 0 6px; }
.dominio-rotina .dominio-caminho-lista { margin: 0 0 6px; padding: 0; list-style: none; }
.dominio-rotina .dominio-caminho-lista li { margin: 2px 0; }
.dominio-rotina .dominio-caminho-lista code { word-break: break-all; }
.dominio-rotina .dominio-caminho-ok { color: #145a32; }
.dominio-rotina .dominio-caminho-erro { color: #a02020; font-weight: 600; }
.dominio-rotina .dominio-caminho-aviso { color: #5c3d00; }
.emissor-status-cadastro.aviso { border-color: #f0c36d; background: #fff8e6; color: #5c3d00; }
.emissor-status-cadastro strong { display: block; margin-bottom: 2px; }
/* Descricao do codigo (tributacao nacional/municipal) logo abaixo do campo. */
.emissor-descricao-codigo { display: block; margin-top: 4px; padding: 9px 12px; border-radius: 6px; border: 1px solid #c9d6e2; background: #eef6fc; color: #12384f; font-size: 0.9rem; font-weight: 400; line-height: 1.3; min-height: 38px; box-sizing: border-box; }
.emissor-descricao-codigo:empty::before { content: attr(data-vazio); color: #7a8794; }
.alert-box-critico { background: #2c1414; border-color: #7a1f1f; color: #ffd7d0; }

/* Badge de vencimento do certificado A1 (Cadastros > Certificado A1).
   Faixas: >60d verde, 60-31d amarelo, 30-16d laranja, <=15d vermelho,
   vencido reaproveita a mesma paleta "critica" do alerta de falha
   silenciosa (fundo escuro + texto claro) pra chamar mais atenção que o
   vermelho comum. "Sem certificado" fica cinza neutro - nunca em branco. */
.badge-cert {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-cert-valido { background: #eafaf1; color: #1e8449; }
.badge-cert-amarelo { background: #fef9e7; color: #9a7d0a; }
.badge-cert-laranja { background: #fdf0e2; color: #af5c11; }
.badge-cert-vermelho { background: #fdecea; color: #c0392b; }
.badge-cert-vencido { background: #2c1414; color: #ffd7d0; }
.badge-cert-desconhecido { background: #eceff1; color: #607d8b; }

/* Nome da empresa clicavel na tabela (abre o mesmo #empDetalhe do botao
   "Detalhes") - so o texto, nao a linha inteira, pra nao conflitar com o
   clique nos botoes de acao da mesma linha. */
.nome-empresa-link { color: var(--azul); cursor: pointer; text-decoration: underline; text-decoration-style: dotted; }
.nome-empresa-link:hover { text-decoration-style: solid; }

/* Reforco visual da tabela de Empresas (Cadastros > Empresas, pedido do
   escritorio em 03/09/2026) - cabecalho com fonte mais forte e borda
   nitida, linhas zebradas com contraste maior que o padrao do sistema, e
   hover pra facilitar acompanhar a linha lendo da esquerda pra direita.
   Escopado a #gridEmpresas de proposito (nao mexe no "thead th"/"tbody
   tr:nth-child" globais, que valeriam pra TODAS as tabelas do sistema). */
.tabela-empresas thead th { font-weight: 700; border-bottom: 2px solid var(--azul); }
.tabela-empresas tbody tr:nth-child(even) { background: #eef2f7; }
.tabela-empresas tbody tr:hover { background: #e3ecf7; }
.tabela-empresas tbody td { border-bottom: 1px solid #d8e0e8; }

/* Paginacao da lista de Empresas (09/09/2026) - achado real: sem isso, a
   lista inteira (49+ empresas, cada linha ~100-150px de altura por causa
   dos botoes/nome que quebram em 2 linhas em tela estreita) virava uma
   pagina gigante (~5000px) sem nenhum indicio visual de que continuava -
   a ultima empresa cadastrada (a mais nova, normalmente a mais relevante
   pro escritorio checar) ficava efetivamente "sumida" no fim de uma
   rolagem enorme, so aparecendo quando o filtro "Buscar" reduzia a lista.
   Paginacao fixa isso E evita que o problema volte a crescer junto com o
   cadastro. */
.paginacao-empresas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.paginacao-empresas-botoes { display: flex; align-items: center; gap: 8px; }
.paginacao-empresas-botoes span { font-size: 0.85rem; color: var(--texto); }

/* Coluna "Situacao" (Ativa/Inativa) - badge dedicado, separado do nome,
   com cor propria por status (antes era so texto "Sim"/"Nao" numa coluna
   sem destaque nenhum). */
.badge-situacao {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 3px 10px 3px 8px;
  border-radius: 12px;
  white-space: nowrap;
}
.badge-situacao::before { content: "●"; font-size: 0.55rem; }
.badge-situacao-ativa { background: #eafaf1; color: #1a7a34; }
/* Inativa em vermelho (24/09/2026, pedido do escritorio) - antes cinza. */
.badge-situacao-inativa { background: #fdecea; color: #c0392b; }

/* Nome da empresa na tabela: deixou de parecer link azul sublinhado
   (pedido do escritorio, 03/09/2026 - "hiperlink" confundia com link de
   verdade) - mantem 100% do clique (data-detalhe-empresa, mesmo listener
   de antes), so troca a aparencia por texto em negrito + seta ">" indicando
   que e clicavel. O botao "Editar" fica ANTES do nome, na mesma celula
   (pedido explicito: editar direto pela lista, sem abrir Detalhes antes). */
.celula-empresa-nome { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nome-empresa-clicavel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--azul-escuro);
  font-weight: 600;
  cursor: pointer;
}
.nome-empresa-clicavel:hover { color: var(--azul); }
.nome-empresa-clicavel .icone-abrir { color: #99a; font-weight: 700; }
.nome-empresa-clicavel:hover .icone-abrir { color: var(--azul); }
.btn-sm { padding: 3px 9px; font-size: 0.78rem; }

/* Badge de Regime tributario na listagem de Empresas (sugestao da IA
   aceita pelo escritorio, 03/09/2026) - mesmo padrao visual do badge de
   Situacao, cor por grupo amplo (Simples Nacional/Lucro Presumido/MEI/
   outro), ver classeBadgeRegime em app.js. */
.badge-regime {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 10px;
  white-space: nowrap;
}
.badge-regime-simples { background: #eaf2fb; color: #1c5a96; }
.badge-regime-presumido { background: #f3ecfa; color: #6c3fa8; }
.badge-regime-mei { background: #fdf3e3; color: #97650b; }
.badge-regime-pf { background: #efe9fb; color: #5b3aa6; }
.badge-regime-outro { background: #eceff1; color: #607d8b; }

/* Campo obrigatorio (*) no formulario de cadastro de empresa (sugestao da
   IA aceita pelo escritorio, 03/09/2026) - so marca visualmente os campos
   que o proprio JS ja bloqueia sem preencher (Documento/Razao Social, ver
   btnSalvarEmpresa em app.js), nenhuma validacao nova. */
.campo-obrigatorio-marca { color: var(--vermelho); font-weight: 700; }
/* Aba do cadastro de empresa nova com campo obrigatorio vazio (16/10/2026). */
.subtab-btn.aba-com-pendencia::after { content: " !"; color: var(--vermelho); font-weight: 700; }

/* Destaque do campo obrigatorio vazio ao tentar salvar (03/09/2026, ver
   validarCamposObrigatoriosEmpresa em app.js) - some sozinho assim que o
   usuario preenche o campo, sem precisar clicar em salvar de novo. */
.campo-invalido { border-color: var(--vermelho) !important; background: #fdecea; }

/* Grade "Dia de vencimento por mes" no Cadastro de Obrigações
   (Configurações, 04/09/2026) - 12 selects (1 por mes), mesmo padrao
   visual do form-row/label do resto do sistema. */
.grid-vencimento-meses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px 18px;
  margin-bottom: 18px;
}
.grid-vencimento-meses label { display: flex; flex-direction: column; gap: 5px; font-size: 0.85rem; color: #4a5a6a; }
.grid-vencimento-meses select {
  padding: 8px 10px; border: 1px solid var(--cinza-borda); border-radius: 6px; font-size: 0.9rem;
  background: #fff; color: var(--texto);
}

/* "Replica todos meses" (08/09/2026, pedido do escritorio) - botao-seta
   compacto, acima do campo de Janeiro - o nome so aparece no tooltip
   (atributo title), o texto visivel e so a seta. */
.btn-replicar-mes-icone {
  display: inline-block; margin-bottom: 12px; padding: 4px 9px; border: 1px solid var(--azul);
  border-radius: 5px; background: #eaf2fb; color: var(--azul-escuro); font-size: 0.78rem; font-weight: 600; cursor: pointer;
}
.btn-replicar-mes-icone:hover { background: var(--azul); color: #fff; }

/* Badges compactos na listagem de obrigações (08/09/2026) - Inativa/
   Robô/Multa/Alerta, visiveis sem precisar expandir a obrigação. */
.badge-obrigacao { font-size: 0.78rem; margin-left: 4px; }
.badge-obrigacao-inativa {
  display: inline-block; padding: 2px 7px; border-radius: 9px; background: #eceff1; color: #607d8b; font-weight: 700;
}

/* Árvore expansível do Cadastro de Obrigações (04/09/2026, pedido do
   escritorio) - o nome da obrigacao (linha "principal") expande/recolhe
   uma linha "detalhe" logo abaixo (colspan na tabela toda), que carrega
   o dia de vencimento por mes + a lista de empresas vinculadas. Mesmo
   padrao visual de seta giratoria ja usado nas outras arvores do sistema
   (.tree-caret), so inline numa celula de tabela em vez do componente
   .tree-node/.tree-row completo (nao cabia bem numa tabela de colunas
   fixas). */
.tree-caret-inline { display: inline-block; color: #98a5b3; transition: transform 0.12s ease; }
.linha-obrigacao-aberta .tree-caret-inline { transform: rotate(90deg); }
.nome-obrigacao-clicavel { cursor: pointer; font-weight: 600; color: var(--azul-escuro); }
.nome-obrigacao-clicavel:hover { color: var(--azul); }
.linha-obrigacao-detalhe > td { background: #fafbfc; padding: 0; border-bottom: 2px solid var(--cinza-borda); }
.painel-detalhe-obrigacao { padding: 18px 20px; }
.painel-detalhe-obrigacao h4 { margin: 0 0 6px; }

/* Nivel 1 da arvore (Departamento) no Cadastro de Obrigações
   (05/09/2026, pedido do escritorio) - mesma seta giratoria
   (.tree-caret-inline, reaproveitada via .linha-obrigacao-aberta) dos
   niveis mais internos, so com fundo mais forte pra marcar que e o
   cabecalho do grupo. */
.linha-departamento-obrigacoes > td { background: var(--cinza-bg); font-weight: 700; padding: 12px 14px; border-bottom: 2px solid var(--cinza-borda); }
.nome-departamento-clicavel { cursor: pointer; color: var(--azul-escuro); }
.nome-departamento-clicavel:hover { color: var(--azul); }

/* "Obrigações desta empresa" (cadastro individual da empresa) - ate
   09/09/2026 era uma lista de labels empilhadas fora de tabela
   (.bloco-departamento-obrigacoes/.cabecalho-departamento-obrigacoes/
   .lista-obrigacoes-departamento/.linha-obrigacao-empresa, removidas
   nesta parte). Pedido do escritorio: trocar por COLUNAS (Nome/Regime/
   Periodicidade), no mesmo padrao visual do Cadastro de Obrigações
   global quando expande um departamento - agora reusa direto as MESMAS
   classes de lá (.tabela-empresas, .linha-departamento-obrigacoes,
   .nome-departamento-clicavel, .tree-caret-inline/.linha-obrigacao-aberta),
   sem CSS proprio - qualquer ajuste visual feito numa tela vale
   automaticamente pra outra, ja que e a mesma classe. */

/* Filtros combinados por Departamento/Nome/Regime/Periodicidade
   (07/09/2026, pedido do escritório) - usados tanto no Cadastro de
   Obrigações (global) quanto na aba "Obrigações desta empresa". Barra
   flexível com o campo de texto + 1 dropdown multi-seleção por parâmetro
   + botão de limpar. */
.linha-filtros-obrigacoes { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin: 14px 0; }
.linha-filtros-obrigacoes .field-block { margin: 0; }
#obrFiltrosAtivosContagem, #empObrigacoesFiltrosAtivosContagem { margin: -6px 0 14px; font-style: italic; }

.filtro-multiselect { position: relative; display: inline-block; }
.filtro-multiselect-btn {
  padding: 8px 12px; border: 1px solid var(--cinza-borda); border-radius: 6px; background: #fff;
  font-size: 0.85rem; color: #4a5a6a; cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.filtro-multiselect-btn:hover { border-color: var(--azul); }
.filtro-multiselect-btn.filtro-multiselect-ativo { border-color: var(--azul); background: #eaf2fb; color: var(--azul-escuro); font-weight: 600; }
.filtro-multiselect-seta { color: #98a5b3; font-size: 0.7rem; }
.filtro-badge-contagem {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--azul); color: #fff; font-size: 0.72rem; font-weight: 700;
}
.filtro-multiselect-painel {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; min-width: 220px; max-height: 280px; overflow-y: auto;
  background: #fff; border: 1px solid var(--cinza-borda); border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  padding: 8px;
}
.filtro-multiselect-item { display: flex !important; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 4px; font-size: 0.85rem; cursor: pointer; }
.filtro-multiselect-item:hover { background: var(--cinza-bg); }

/* Cabeçalhos ordenáveis do Cadastro de Obrigações (clique pra ordenar,
   seta indica coluna/direção ativa) - departamento sempre em ordem
   alfabética (asc/desc), os demais campos ordenam DENTRO de cada
   departamento (a agrupação em si nunca muda por causa da ordenação de
   Nome/Regime/Periodicidade). */
.th-ordenavel { cursor: pointer; user-select: none; }
.th-ordenavel:hover { color: var(--azul); }
.th-ordenavel::after { content: "⇅"; margin-left: 5px; color: #c3cbd4; font-size: 0.75em; }
.th-ordenavel.th-ordenado-asc::after { content: "▲"; color: var(--azul); }
.th-ordenavel.th-ordenado-desc::after { content: "▼"; color: var(--azul); }

/* Lista de empresas com checkbox - lote do modal "Configurar obrigações por
   empresas" (#modalObrigacaoEmpresa). */
.lote-lista-empresas {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--cinza-borda);
  border-radius: 6px;
  padding: 8px 12px;
  margin-top: 8px;
  background: #fff;
}
.linha-lote-empresa { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 0.88rem; }
.linha-lote-empresa:not(:last-child) { border-bottom: 1px solid #f0f2f4; }

/* Painel de Tarefas (04/09/2026) */
.painel-tarefas-navegacao { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.painel-tarefas-navegacao strong { font-size: 1.05rem; min-width: 140px; text-align: center; }

.badge-status-tarefa {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
/* Icone (22/09/2026) alem da cor - pra situacao nunca depender so de cor
   pra ser reconhecida (bom pra quem tem dificuldade de distinguir cor, e
   ajuda a bater o olho mais rapido na tabela/calendario). */
.badge-status-tarefa::before { font-size: 0.85em; }
.badge-status-pendente { background: #eaf2fb; color: #1c5a96; }
.badge-status-pendente::before { content: "🕒"; }
.badge-status-em_andamento { background: #fdf3e3; color: #8a5a00; }
.badge-status-em_andamento::before { content: "⚙️"; }
.badge-status-concluida { background: #eafaf1; color: #1a7a34; }
.badge-status-concluida::before { content: "✅"; }
.badge-status-atrasada { background: #fdecea; color: #a12626; }
.badge-status-atrasada::before { content: "⚠️"; }
.badge-status-sem_movimento { background: #eceff1; color: #546670; }
.badge-status-sem_movimento::before { content: "⭕"; }
.badge-status-dispensada { background: #f1ebf8; color: #5e3f8c; }
.badge-status-dispensada::before { content: "🚫"; }

/* Obrigacoes do mes no topo do Painel de Tarefas (24/09/2026) */
.painel-obrigacoes-tarefas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; margin-bottom: 22px;
}
.painel-obrigacoes-item {
  background: #fff; border: 1px solid #e3e7eb; border-radius: 8px; padding: 10px 12px;
}
.painel-obrigacoes-item-aberto { grid-column: 1 / -1; border-color: #14b8a6; }
.painel-obrigacoes-nome { font-weight: 700; font-size: 0.92rem; }
.painel-obrigacoes-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.painel-obrigacoes-qtd {
  color: #0d9488; font-weight: 600; font-size: 0.85rem; cursor: pointer; user-select: none;
}
.painel-obrigacoes-qtd:hover { text-decoration: underline; }
.painel-obrigacoes-badges { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.painel-obrigacoes-badges .badge-status-tarefa { padding: 1px 7px; font-size: 0.7rem; }
.painel-obrigacoes-empresas { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid #f0f2f4; }
.painel-obrigacoes-empresas li {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 4px; border-bottom: 1px solid #f0f2f4;
}
.painel-obrigacoes-empresa-aberta { background: #f5fbfa; }
.painel-obrigacoes-empresa-nome { cursor: pointer; font-size: 0.88rem; flex: 1 1 260px; }
.painel-obrigacoes-empresa-nome:hover { color: #0d9488; text-decoration: underline; }
.painel-obrigacoes-status-opcoes { display: flex; gap: 6px; flex-wrap: wrap; flex-basis: 100%; padding: 4px 0 2px; }
.painel-status-opcao { border: 1px solid transparent; cursor: pointer; font-family: inherit; }
.painel-status-opcao:hover { filter: brightness(0.95); border-color: currentColor; }
.painel-status-opcao-atual { border-color: currentColor; box-shadow: 0 0 0 1px currentColor; }
/* No calendario (badge minusculo, so o numero) o icone atrapalha mais do
   que ajuda - mantido so a cor + o numero, igual ja era. */
.calendario-tarefas-badges .badge-status-tarefa::before { content: none; }

.calendario-tarefas {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 24px;
}
.calendario-tarefas-dia {
  background: #fff;
  border: 1px solid var(--cinza-borda);
  border-radius: 10px;
  min-height: 64px;
  padding: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: box-shadow .1s ease, border-color .1s ease;
}
.calendario-tarefas-dia:hover { border-color: var(--azul); box-shadow: 0 2px 8px rgba(0,0,0,0.10); }
.calendario-tarefas-dia-vazio { background: transparent; border: none; cursor: default; }
.calendario-tarefas-numero { font-size: 0.8rem; font-weight: 600; color: #4a5a6a; }
.calendario-tarefas-dia-hoje { border-color: var(--azul); border-width: 2px; }
.calendario-tarefas-dia-hoje .calendario-tarefas-numero { color: var(--azul); }
.calendario-tarefas-dia-selecionado { background: #eaf2fb; border-color: var(--azul); }
.calendario-tarefas-badges { display: flex; flex-wrap: wrap; gap: 3px; }
.calendario-tarefas-badges .badge-status-tarefa { padding: 1px 6px; font-size: 0.68rem; }

/* Grafico "Tarefas por departamento" (22/09/2026, pedido do escritorio -
   grafico mais moderno, mesma paleta ja validada pra contraste/daltonismo
   usada em todo grafico do sistema). 1 unica cor (magnitude por categoria
   - a categoria ja esta no rotulo embaixo da barra, cor a mais so seria
   decorativa) com hover mostrando o valor exato. */
.painel-tarefas-topo { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 24px; }
.painel-tarefas-topo > div { flex: 1 1 360px; min-width: 300px; }
.grafico-departamentos {
  background: #fcfcfb;
  border: 1px solid var(--cinza-borda);
  border-radius: 10px;
  padding: 16px 18px 8px;
}
.grafico-departamentos-barras {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  height: 160px;
  border-bottom: 1px solid #e1e0d9;
}
.grafico-departamentos-coluna {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 4px;
}
.grafico-departamentos-valor { font-size: 0.78rem; font-weight: 700; color: #52514e; }
.grafico-departamentos-barra {
  width: 100%;
  max-width: 46px;
  background: #2a78d6;
  border-radius: 4px 4px 0 0;
  transition: background .1s ease, opacity .1s ease;
  cursor: default;
}
.grafico-departamentos-coluna:hover .grafico-departamentos-barra { background: #1c5cab; }
.grafico-departamentos-rotulo { font-size: 0.72rem; color: #898781; text-align: center; margin-top: 6px; line-height: 1.2; }
.grafico-departamentos-vazio { color: #898781; font-size: 0.85rem; padding: 30px 0; text-align: center; }

/* Abas dentro do cadastro interno da empresa (#empDetalhe) - sugestao da
   IA aceita pelo escritorio, 03/09/2026. Classes proprias (nao reusa
   .tab-btn/.tab-panel, que sao do menu lateral principal - layout e
   comportamento diferentes, evita qualquer risco de um CSS vazar pro
   outro). */
.subtabs-nav {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--cinza-borda);
  margin: 4px 0 18px;
  overflow-x: auto;
}
.subtab-btn {
  padding: 10px 18px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  color: #7a8a99;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
}
.subtab-btn:hover { color: var(--azul-escuro); }
.subtab-btn.active { color: var(--azul); border-bottom-color: var(--azul); }

/* Abas de "Envio de Documentos" (14/10/2026, pedido do escritorio: abas mais
   definidas e perceptiveis) - mesmo estilo "pilula" das abas de Parcelamentos
   logo abaixo (padrao do sistema), com icone, hover que levanta a aba e
   espaco entre elas. Escopado a #docAbasNav. */
#docAbasNav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: none;
  background: var(--cinza-bg);
  padding: 10px;
  border-radius: 12px;
  margin: 4px 0 22px;
}
#docAbasNav .subtab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 8px;
  background: #fff;
  border: 2px solid var(--cinza-borda);
  color: var(--azul-escuro);
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s, background 0.15s;
}
#docAbasNav .subtab-btn .icone-aba { font-size: 1.1rem; line-height: 1; }
#docAbasNav .subtab-btn:hover {
  border-color: var(--azul);
  box-shadow: 0 2px 6px rgba(41, 128, 185, 0.25);
  transform: translateY(-1px);
}
#docAbasNav .subtab-btn:focus-visible { outline: 3px solid rgba(41, 128, 185, 0.45); outline-offset: 2px; }
#docAbasNav .subtab-btn.active {
  background: var(--azul);
  border-color: var(--azul);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 3px 8px rgba(41, 128, 185, 0.4);
}
#docAbasNav .subtab-btn.active .contador-aba { color: #fff; opacity: 0.9; }
#docAbasNav .subtab-btn.active .contador-aba.contador-aba-alerta { color: #fff; opacity: 1; }

/* Abas do menu "Parcelamentos" (pedido do escritorio, 17/09/2026: o
   .subtab-btn padrao acima - so texto cinza fino + risco embaixo - ficou
   "quase escondido" nessa tela, sem destaque nenhum pra indicar que sao 4
   opcoes clicaveis). Estilo "pilula" proprio, escopado só a #parcAbasNav
   de proposito - NAO mexe no .subtab-btn generico (usado tambem nas
   subabas do cadastro de Empresas, que devem continuar com a aparencia
   original). Fundo solido + sombra na aba ativa = destaque bem mais forte
   que so uma cor de texto/risco fino. */
#parcAbasNav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: none;
  background: var(--cinza-bg);
  padding: 10px;
  border-radius: 12px;
  margin: 4px 0 22px;
}
#parcAbasNav .subtab-btn {
  padding: 13px 22px;
  border-radius: 8px;
  background: #fff;
  border: 2px solid var(--cinza-borda);
  color: var(--azul-escuro);
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0;
}
#parcAbasNav .subtab-btn:hover {
  color: var(--azul-escuro);
  border-color: var(--azul);
}
#parcAbasNav .subtab-btn.active {
  background: var(--azul);
  border-color: var(--azul);
  color: #fff;
  box-shadow: 0 3px 8px rgba(41, 128, 185, 0.4);
}

/* Abas por MODALIDADE de parcelamento (21/09/2026): cada aba tem uma cor
   propria (--cor-aba, definida em app.js a partir da lista de modalidades).
   Inativa: faixa grossa na cor no topo + bolinha; ativa: fundo cheio na cor. */
#parcAbasNav .subtab-btn[data-cor] {
  border-top: 6px solid var(--cor-aba);
  border-color: var(--cinza-borda);
  border-top-color: var(--cor-aba);
  position: relative;
}
#parcAbasNav .subtab-btn[data-cor]:hover {
  border-color: var(--cor-aba);
  color: var(--azul-escuro);
}
#parcAbasNav .subtab-btn[data-cor].active {
  background: var(--cor-aba);
  border-color: var(--cor-aba);
  color: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}
#parcModalidadeCabecalho {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
  border-left: 8px solid var(--cor-aba, var(--azul));
  background: var(--cinza-bg);
  border-radius: 6px;
}
#parcModalidadeCabecalho .parc-mod-selo {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  background: var(--cor-aba, var(--azul));
}
#parcModalidadeCabecalho .parc-mod-texto { color: var(--azul-escuro); font-size: 0.9rem; }

/* Toggle Tabela/Cards (sugestao da IA aceita pelo escritorio, 03/09/2026) -
   estado "active" escopado a este toggle de proposito, pra nao virar um
   ".btn-outline.active" generico que mudaria a aparencia de botoes
   parecidos em outras telas do sistema. */
.visualizacao-empresas-toggle { display: flex; gap: 6px; align-self: flex-end; }
.visualizacao-empresas-toggle .btn.active { background: var(--azul-escuro); color: #fff; border-color: var(--azul-escuro); }

/* Visualizacao em Cards da listagem de Empresas (sugestao da IA aceita
   pelo escritorio, 03/09/2026) - alternativa a tabela, mesmos dados/acoes
   (ver renderizarEmpresasCards em app.js), so em grade responsiva. */
.grid-cards-empresas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.card-empresa {
  background: #fff;
  border: 1px solid var(--cinza-borda);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card-empresa-topo { display: flex; align-items: center; justify-content: space-between; }
.card-empresa-nome { font-size: 0.98rem; }
.card-empresa-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.82rem; color: #5a6b7a; }
.card-empresa-flags { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; color: #5a6b7a; border-top: 1px solid #eef1f4; padding-top: 8px; margin-top: 2px; }
.card-empresa-flags label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.card-empresa-acoes { display: flex; gap: 8px; margin-top: 4px; }

/* Aba Arquivos - nome da empresa em maiusculo em todo lugar que aparece
   (arvore, Busca avancada, Lixeira), mesmo quando o dado de origem (pasta
   no disco, criada historicamente) veio com letra minuscula. So o nivel
   "empresa" da arvore - o seletor com ">" direto evita pegar Competencia/
   Tipo, que sao netos de #arvoreArquivos, nao filhos diretos. */
#arvoreArquivos > .tree-node > .tree-row > .tree-label { text-transform: uppercase; }
#gridBusca tbody td:first-child,
#gridLixeira tbody td:first-child { text-transform: uppercase; }

/* Cabecalho de coluna clicavel (ordenacao por nome de empresa - varias
   tabelas do sistema). Seta so aparece depois do 1o clique (estado
   "ordem original" nao mostra nada). */
.th-ordenavel { cursor: pointer; user-select: none; white-space: nowrap; }
.th-ordenavel:hover { color: var(--azul); }
.th-ordenavel::after { content: ""; margin-left: 5px; font-size: 0.75rem; opacity: 0.6; }
.th-ordenavel.th-asc::after { content: "▲"; }
.th-ordenavel.th-desc::after { content: "▼"; }

/* Cartao de secao dentro do cadastro interno da empresa (#empDetalhe) -
   pedido do escritorio em 03/09/2026: "Dados cadastrais" e "Contatos"
   precisavam ficar no MESMO nivel visual (antes "Contatos" parecia um
   apendice menor, so uma tabelinha solta embaixo) - os dois agora usam o
   mesmo cartao (fundo, borda, espacamento), lado a lado no mesmo fluxo. */
.cartao-secao-empresa {
  background: #fff;
  border: 1px solid var(--cinza-borda);
  border-radius: 8px;
  padding: 18px 22px;
  margin-bottom: 22px;
}
.cartao-secao-empresa > h3:first-child { margin-top: 0; }

/* Bloco "Dados cadastrais" no topo de #empDetalhe - cada campo vira uma
   "linha" com separador e fundo alternado (pedido do escritorio,
   03/09/2026: "linhas mais destacadas... separadores visuais... mais
   espacamento" - a grade antes era so rotulo:valor sem nenhuma marcacao
   entre os campos). */
/* Reformulado (06/09/2026, achado real do escritorio: "contraste...
   extremamente confuso") - o zebrado antigo (nth-child par/impar) alternava
   por POSIÇÃO NO DOM, não por linha visual: numa grade que quebra em 4
   colunas, isso pintava as colunas 2 e 4 inteiras (não linhas alternadas),
   um padrão vertical que não tem nenhuma relação com o conteúdo e confunde
   mais do que ajuda. Trocado por "cada campo é seu próprio cartão" - fundo
   e borda IGUAIS em todos (sem alternância nenhuma), com espaço de verdade
   (gap) entre eles - fica óbvio onde um campo termina e o próximo começa
   não importa a posição. Label também escurecido (era #7a8a99, contraste
   baixo demais no fundo branco) e valor com fonte maior. */
.dados-cadastrais-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  font-size: 0.9rem;
}
.dados-cadastrais-grid > div {
  background: #f4f7f9;
  border: 1px solid #dde4e9;
  border-radius: 8px;
  padding: 10px 14px;
}
.dados-cadastrais-grid .campo-label { color: #57697a; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; display: block; }
.dados-cadastrais-grid .campo-valor { font-weight: 600; color: var(--azul-escuro); font-size: 0.98rem; }

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 26px;
}
.section-header h2 { margin: 0; }
/* Variante (24/09/2026, pedido do escritorio) - botao logo ao lado do
   titulo (esquerda), nao espalhado na ponta direita da tela - pra ficar
   alinhado horizontalmente com o grupo "Tabela"/"Cards" mais abaixo, que
   tambem fica coladinho perto do que ele controla. So aplicada onde
   pedido (Cadastrar nova empresa/Empresas cadastradas), o .section-header
   padrao (espalhado) continua sendo o normal em todo o resto do sistema. */
.section-header-compacto { justify-content: flex-start; gap: 14px; }
/* "+ Nova Empresa" e "Recolher" juntos na mesma linha (24/09/2026, pedido
   do escritorio: alinhar como o grupo Tabela/Cards, lado a lado e com
   espacamento identico - 6px, igual .visualizacao-empresas-toggle). O
   "Recolher" continua controlando a mesma lista de sempre (#empListaConteudo)
   mesmo ficando fisicamente perto do botao de "Cadastrar nova empresa" -
   so uma reorganizacao visual, nenhuma mudanca de comportamento. */
.btn-row-inline { display: flex; gap: 6px; }

/* Cabecalho do painel "Detalhes" da empresa fica visivel ao rolar a secao
   inteira (Contatos/Certificado/Obrigacoes pode ser longa) - sem isso, o
   usuario perde de vista qual empresa esta editando. So a pagina inteira
   rola (nao ha scroll interno em #empDetalhe), entao sticky gruda no topo
   da janela mesmo. */
#empDetalhe > .section-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--cinza-bg);
  padding: 10px 0;
  margin-top: 0;
  border-bottom: 1px solid var(--cinza-borda);
}

/* white-space:nowrap + text-align:center (28/08/2026, pedido do
   escritorio - print real mostrando "Visualizar"/"Salvar PDF" quebrando
   em 2 linhas dentro da coluna "Acoes" de uma tabela estreita): o botao
   nunca deve quebrar o proprio texto em 2 linhas - ele que se ajusta ao
   texto (padding fixo), nunca o contrario. text-align:center garante que
   o texto continue centralizado quando .celula-acoes-empilhadas (abaixo)
   estica todos os botoes do grupo pra mesma largura. */
.btn {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 9px 16px;
  font-size: 0.9rem;
  cursor: pointer;
  background: #fff;
  white-space: nowrap;
  text-align: center;
}
.btn-dark { background: var(--azul-escuro); color: #fff; }
.btn-primary { background: var(--azul); color: #fff; }
.btn-outline { background: #fff; color: var(--azul-escuro); border-color: var(--cinza-borda); }
.btn-lg { padding: 12px 22px; font-size: 0.95rem; margin: 16px 0; }
.btn-sm { padding: 5px 12px; font-size: 0.82rem; }
.btn:hover { filter: brightness(0.95); }
.btn-icon { background: none; border: none; font-size: 1.3rem; cursor: pointer; color: #888; }

/* "Buscar CNPJ" (24/09/2026, pedido do escritorio) - verde, mesma altura do
   campo de CNPJ ao lado (o .form-row generico so alinha os campos pelo
   topo/esticado, o que deixava o botao tao alto quanto rotulo+campo juntos -
   align-self:flex-end alinha pela base, e a altura fixa/box-sizing garante
   que fique identica ao input). Barra de progresso e uma faixa interna
   (.btn-cnpj-busca-progresso) cuja largura a JS anima de 0% a 100% durante
   a consulta - nao e um <progress> nativo pra poder ficar por cima do fundo
   verde do proprio botao. */
.form-row-cnpj-busca { align-items: flex-end; }
.btn-cnpj-busca {
  position: relative;
  overflow: hidden;
  align-self: flex-end;
  height: 38px;
  box-sizing: border-box;
  min-width: 140px;
  background: var(--verde);
  color: #fff;
  border-color: var(--verde);
}
.btn-cnpj-busca:disabled { cursor: wait; opacity: 1; }
.btn-cnpj-busca-progresso {
  position: absolute;
  inset: 0;
  width: 0%;
  background: rgba(255, 255, 255, 0.32);
  transition: width 0.15s linear;
}
.btn-cnpj-busca-texto { position: relative; z-index: 1; }
.campo-uf input { max-width: 70px; min-width: 70px !important; }
/* Altura explicita (nao so o align-self acima) pra garantir que o campo de
   CNPJ e o botao "Buscar CNPJ" fiquem com o MESMO numero de pixels, nao so
   "parecidos" (padding do .btn e do input tem 1px de diferenca por padrao). */
.form-row-cnpj-busca input#empDocumento { height: 38px; box-sizing: border-box; }
/* Aba "Dados Gerais" (24/09/2026): mesma altura pro Id, CNPJ e botao
   "Atualizar" (alinhados pela base via .form-row-cnpj-busca); o Id e curto,
   nao precisa dos 200px minimos dos demais campos. */
.form-row-cnpj-busca input#dgDocumento,
.form-row-cnpj-busca input#dgIdEmpresa { height: 38px; box-sizing: border-box; }
.form-row .campo-id-empresa input#dgIdEmpresa { min-width: 0; width: 120px; }
.icone-atualizar { display: inline-block; font-size: 1.15em; line-height: 1; margin-right: 2px; }
.btn-cnpj-busca:disabled .icone-atualizar { animation: girar-icone-atualizar 0.9s linear infinite; }
@keyframes girar-icone-atualizar { to { transform: rotate(360deg); } }

.btn-row { display: flex; gap: 10px; margin: 12px 0; flex-wrap: wrap; }
.file-btn { display: inline-flex; align-items: center; }

.chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 140px;
  padding: 10px 4px;
  background: #fff;
  border: 1px solid var(--cinza-borda);
  border-radius: 8px;
  overflow-x: auto;
}
.chart-empty { color: #99a; padding: 20px; font-size: .9rem; }
.chart-bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 46px;
  font-size: 0.7rem;
  height: 100%;
  justify-content: flex-end;
}
.chart-bar {
  width: 26px;
  border-radius: 3px 3px 0 0;
  min-height: 2px;
}
.chart-value { font-size: 0.7rem; margin-bottom: 2px; font-weight: 600; }
.chart-label { margin-top: 4px; color: #607080; white-space: nowrap; transform: rotate(0deg); }

.output-box {
  background: #fff;
  border: 1px solid var(--cinza-borda);
  border-radius: 6px;
  padding: 12px;
  font-family: Consolas, monospace;
  font-size: 0.82rem;
  white-space: pre-wrap;
  min-height: 60px;
  max-height: 260px;
  overflow-y: auto;
  width: 100%;
}
.output-tall { min-height: 200px; max-height: 400px; }

textarea.output-box { resize: vertical; min-height: 160px; }

.table-wrap {
  background: #fff;
  border: 1px solid var(--cinza-borda);
  border-radius: 8px;
  /* overflow-x:auto (nao "hidden") - pedido de layout responsivo em
     27/08/2026: uma tabela mais larga que a tela (comum em telas
     estreitas/janela redimensionada) ganha rolagem horizontal propria em
     vez de cortar/esconder colunas sem aviso nenhum. overflow-y continua
     "hidden" so pra manter as bordas arredondadas do cabecalho. */
  overflow-x: auto;
  overflow-y: hidden;
}
.table-scroll { max-height: 320px; overflow-y: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
thead th {
  background: var(--azul-escuro);
  color: #fff;
  text-align: left;
  padding: 10px 12px;
  position: sticky;
  top: 0;
}
tbody td { padding: 8px 12px; border-bottom: 1px solid var(--cinza-borda); }
/* Coluna de acoes com mais de 1 botao/link (ex: Situacao Fiscal - "Consultar
   Agora" + "Ver relatorio (PDF)") - empilha com espaco em vez de deixar o
   navegador quebrar linha sozinho (o que colidia visualmente antes do fix
   de `.btn { display: inline-block }` acima, achado real reportado com
   print em 27/08/2026: link do PDF sobrepondo o botao de cima).
   align-items:stretch (28/08/2026, pedido do escritorio - print real
   mostrando botoes empilhados com larguras diferentes umas das outras,
   tipo "degrau") - em flex-direction:column, "stretch" faz TODO botao do
   grupo esticar ate a largura do container, que por sua vez se ajusta
   sozinho ao FILHO MAIS LARGO (nao tem width fixo aqui) - resultado: todos
   os botoes do mesmo grupo ficam com a MESMA largura, igual a do botao
   com o texto mais comprido, sem precisar calcular nada em JS. */
.celula-acoes-empilhadas { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }

/* Tabelas de Situacao Fiscal (Federal/DCTF Web/MIT/DARF) - a coluna
   "Detalhe" e texto livre (pode ser longo, ex: "Debito(s) declarado(s)...
   saldo a pagar: R$ 178,31.") - garante quebra de linha em vez de estourar
   a largura da coluna (pedido do escritorio em 27/08/2026, depois de um
   print real mostrando conteudo cortado/sobreposto). */
.tabela-situacao-fiscal td { white-space: normal; word-break: break-word; vertical-align: top; }
.linha-grupo-empresa td { background: #eef2f6; padding-top: 10px; padding-bottom: 10px; }
.badge-prazo { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 1px 7px; border-radius: 10px; white-space: nowrap; }
.badge-prazo-ciencia { background: #e3f5e6; color: #1a7a34; }
.badge-prazo-confirmacao { background: #fff3d6; color: #8a5a00; }
.badge-prazo-expirado { background: #fbe4e4; color: #a12626; }

/* Tabela por debito, aninhada dentro da linha da empresa (Codigo da
   Receita/Descricao/Debito Apurado/Saldo a Pagar) - rolagem horizontal
   propria em tela estreita, nunca corta/sobrepoe conteudo. */
.tabela-debitos-wrap { margin: 6px 0; overflow-x: auto; border-radius: 6px; }
.tabela-debitos { font-size: 0.82rem; min-width: 560px; }
.tabela-debitos thead th { background: var(--cinza-bg); color: var(--azul-escuro); position: static; }
.linha-debitos:hover { background: none; }
.linha-debitos > td { padding: 4px 12px 12px; border-bottom: 1px solid var(--cinza-borda); }
tbody tr:nth-child(even) { background: #f9fafb; }
tbody tr.linha-marcada { background: #d6eaf8; }
tbody tr.linha-marcada:nth-child(even) { background: #cfe4f4; }
.empty-row td { text-align: center; color: #99a; padding: 20px; }
tbody td input[type=date] {
  padding: 5px 6px; border: 1px solid var(--cinza-borda); border-radius: 5px; font-size: 0.82rem; width: 145px;
}
tbody td input[type=date].vencendo { border-color: #e67e22; background: #fef5e7; }
tbody td input[type=date].vencida { border-color: var(--vermelho); background: #fdecea; }

.form-row { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.form-row label { display: flex; flex-direction: column; gap: 5px; font-size: 0.85rem; color: #4a5a6a; }
.form-row label[hidden] { display: none; }
/* Fundo/cor explicitos (09/09/2026, pedido do escritorio: "contraste
   entre os campos digitáveis, as fontes com o plano de fundo" - mesmo
   motivo ja documentado em .checkbox-inline logo abaixo: sem isso o
   campo herda a cor de fundo customizada de Configuracoes > Aparencia,
   deixando o texto digitado quase ilegivel em certas combinacoes de
   cor). Vale pra TODO .form-row select/input do sistema, nao so o "Dia
   de vencimento por mes" onde o problema foi reportado. */
.form-row select, .form-row input[type=date], .form-row input[type=time], .form-row input[type=text], .form-row input[type=number] {
  padding: 8px 10px; border: 1px solid var(--cinza-borda); border-radius: 6px; font-size: 0.9rem; min-width: 200px;
  background: #fff; color: var(--texto);
}
.form-row input[type=color] {
  padding: 2px; border: 1px solid var(--cinza-borda); border-radius: 6px; min-width: 60px; width: 60px; height: 38px; cursor: pointer;
}
/* Checkbox com texto ao lado (nao empilhado em cima, diferente do padrao
   coluna de ".form-row label" usado pros campos com rotulo em cima) - fundo
   branco solido + texto escuro em negrito garante contraste bom mesmo com
   a cor de fundo customizada em Configuracoes > Aparencia (pedido do
   escritorio em 25/08/2026). */
.form-row label.checkbox-inline {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--texto);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid var(--cinza-borda);
  cursor: pointer;
}
.form-row label.checkbox-inline input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; }

/* Rotulo de campo (.form-row label) em cima de fundo escuro (.card-dark,
   ex: cards de classificacao de documentos) - a cor/peso padrao (cinza
   claro, normal) fica com contraste ruim no fundo azul-marinho escuro.
   Escopado so dentro de .card-dark pra nao mudar formularios em fundo
   claro no resto do sistema. */
.card-dark .form-row label { color: #fff; font-weight: 600; }

/* Combobox com busca por qualquer palavra (nao so pelo inicio, diferente
   do <select> nativo) - usado no campo "Obrigacao" da classificacao de
   documentos. */
.combo-busca { position: relative; }
.combo-busca input[type=text] { width: 100%; }
.combo-busca-lista {
  position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 20;
  background: #fff; border: 1px solid var(--cinza-borda); border-radius: 6px;
  max-height: 220px; overflow-y: auto; box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.combo-busca-item { padding: 7px 10px; font-size: 0.88rem; color: #2c3e50; cursor: pointer; }
.combo-busca-item:hover, .combo-busca-item.combo-busca-item-ativa { background: #dbe7f3; }
.combo-busca-vazio { padding: 7px 10px; font-size: 0.85rem; color: #98a5b3; }

.field-block { display: block; margin: 16px 0; font-size: 0.88rem; color: #4a5a6a; }
.field-block input[type=text], .field-block input[type=file] {
  display: block; margin-top: 6px; width: 100%; padding: 9px 10px;
  border: 1px solid var(--cinza-borda); border-radius: 6px; font-size: 0.9rem;
  background: #fff; color: var(--texto);
}

.path-picker { display: flex; gap: 8px; margin-top: 6px; }
.path-picker input { flex: 1; }

.hint { color: #607080; font-size: 0.85rem; }
/* Status da busca individual de parcelamento (17/09/2026, pedido do
   escritorio: deixar bem claro que a consulta esta rodando e qual foi o
   resultado final, nao so um <p class="hint"> discreto igual qualquer
   outra dica da tela). */
.parc-status-buscando { color: var(--azul); font-weight: 600; }
.parc-status-encontrado { color: var(--verde); font-weight: 600; }
.parc-status-vazio { color: var(--texto); font-weight: 600; }
.parc-status-erro { color: var(--vermelho); font-weight: 600; }

/* Importação manual por upload (16/09/2026) - fluxo em passos numerados +
   dropzone, substitui o bloco de texto denso + "aponte uma pasta" que
   confundia quem nao sabia onde o Claude for Chrome salvou os arquivos. */
.fluxo-manual-card {
  background: #fff;
  border: 1px solid var(--cinza-borda);
  border-radius: 10px;
  padding: 18px 20px;
  margin: 14px 0;
}
.fluxo-passo { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.fluxo-passo:last-child { margin-bottom: 0; }
.fluxo-passo-numero {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--azul);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
}
.fluxo-passo-corpo { flex: 1; min-width: 0; }
.fluxo-passo-titulo { font-weight: 600; margin-bottom: 3px; }

.dropzone {
  border: 2px dashed var(--cinza-borda);
  border-radius: 10px;
  padding: 26px 16px;
  text-align: center;
  background: var(--cinza-bg);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dropzone:hover, .dropzone:focus-visible, .dropzone.dropzone-ativa {
  border-color: var(--azul);
  background: #eaf4fc;
  outline: none;
}
.dropzone-icone { font-size: 1.8rem; margin-bottom: 4px; }
.dropzone-titulo { font-weight: 600; }
.dropzone-sub { font-size: 0.8rem; color: #607080; margin-top: 2px; }
.dropzone input[type="file"] { display: none; }

.lista-arquivos-upload { list-style: none; padding: 0; margin: 12px 0 0; }
.lista-arquivos-upload li {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  background: var(--cinza-bg);
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 5px;
  font-size: 0.85rem;
}
.lista-arquivos-upload li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.opcao-avancada { margin-top: 16px; }
.opcao-avancada summary { cursor: pointer; color: var(--azul); font-size: 0.85rem; }
.opcao-avancada summary:hover { text-decoration: underline; }
.opcao-avancada-corpo { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--cinza-borda); }
.hint-atencao { color: #8a5a00; background: #fff6e0; border: 1px solid #f0d38a; border-radius: 6px; padding: 8px 10px; font-weight: 600; }
code { background: #eef1f4; padding: 2px 5px; border-radius: 4px; }

/* Padrao de "ajuda sob demanda" (pedido do escritorio em 24/08/2026) - o
   texto explicando o que uma funcionalidade faz nao fica mais visivel o
   tempo todo do lado do titulo; vira um botaozinho "?" que so mostra o
   texto (numa janela flutuante) ao passar o mouse por cima. Pura CSS
   (:hover), sem JS - o texto de ajuda fica dentro de .tooltip-ajuda,
   escondido por padrao. */
.ajuda-wrap { position: relative; display: inline-flex; align-items: center; vertical-align: middle; }
.btn-ajuda {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-left: 8px; border-radius: 50%;
  background: rgba(41,128,185,0.12); color: var(--azul); border: 1px solid rgba(41,128,185,0.35);
  font-size: 0.72rem; font-weight: 700; line-height: 1; cursor: help; padding: 0;
}
.btn-ajuda:hover, .btn-ajuda:focus { background: var(--azul); color: #fff; }
.tooltip-ajuda {
  display: none; position: absolute; top: 100%; left: 0; z-index: 60;
  width: 340px; max-width: 82vw; margin-top: 8px;
  background: var(--azul-escuro); color: #fff; font-weight: 400;
  font-size: 0.82rem; line-height: 1.45; text-transform: none; letter-spacing: normal;
  padding: 10px 12px; border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.ajuda-wrap:hover .tooltip-ajuda, .btn-ajuda:focus + .tooltip-ajuda { display: block; }

/* Area de arrastar-e-soltar PDFs (Documentos) - fica abaixo do botao
   "Selecionar PDFs", mesma selecao em memoria dos arquivos escolhidos
   pelo seletor (ver adicionarArquivosASelecao em app.js). Destaque visual
   so enquanto um arquivo esta sendo arrastado por cima (.drop-zone-ativa). */
.drop-zone {
  margin: 10px 0; padding: 22px; text-align: center; border-radius: 8px;
  /* Verde claro (pedido do escritorio em 24/08/2026) - antes era
     transparente, ficando exatamente da mesma cor do fundo da pagina
     (--cinza-bg, #f4f6f8) e virtualmente invisivel. */
  border: 2px dashed var(--verde); background: #eafaf1; color: #1e8449; font-size: 0.9rem;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.drop-zone-ativa { border-color: var(--azul); background: #eaf3fa; color: var(--azul); }

/* Barra de progresso do envio em lote (Documentos -> Prontos para envio) -
   preenchimento controlado via JS (largura em %), refletindo progresso
   REAL de um job no servidor, nao uma animacao decorativa. */
.barra-progresso-container { width: 100%; height: 16px; background: #e1e4e8; border-radius: 999px; overflow: hidden; }
.barra-progresso-preenchimento { height: 100%; background: var(--azul); border-radius: 999px; transition: width 0.25s ease; }

/* Lista de arquivos selecionados pra upload (Documentos), cada 1 com
   checkbox pra excluir individualmente antes de enviar - letra pequena
   de proposito (pedido do usuario), so pra conferir os nomes rapido. */
.lista-arquivos-selecionados { margin: 4px 0 8px; max-height: 220px; overflow-y: auto; }
.lista-arquivos-selecionados label {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.78rem; color: #4a5a6a; padding: 2px 0;
}
.lista-arquivos-selecionados label input[type="checkbox"] { flex-shrink: 0; }
.lista-arquivos-selecionados .nome-arquivo-desmarcado { text-decoration: line-through; color: #a0a8b0; }

/* Arvore de arquivos (Empresa > Competencia > Tipo > Arquivo) */
.tree { background: #fff; border: 1px solid var(--cinza-borda); border-radius: 8px; overflow: hidden; }
.tree-empty { padding: 20px; color: #99a; font-size: 0.88rem; }
.tree-node { border-bottom: 1px solid var(--cinza-borda); }
.tree-node:last-child { border-bottom: none; }
.tree-row {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  cursor: pointer; font-size: 0.9rem; user-select: none;
}
.tree-row:hover { background: #f4f6f8; }
.tree-caret { width: 14px; color: #98a5b3; transition: transform .12s ease; flex-shrink: 0; }
.tree-node.expanded > .tree-row .tree-caret { transform: rotate(90deg); }
.tree-label { flex: 1; }
.tree-count { font-size: 0.76rem; color: #98a5b3; }
/* Situacao de parcelamento colorida (17/09/2026, pedido do escritorio) -
   verde so pro que esta realmente em parcelamento agora, vermelho pra
   qualquer forma de encerrado (a distincao de motivo continua no texto,
   so a cor muda). */
.tree-situacao-ativo { color: var(--verde); font-weight: 600; }
.tree-situacao-encerrado { color: var(--vermelho); }
.tree-children { display: none; padding-left: 22px; background: #fafbfc; }
.tree-node.expanded > .tree-children { display: block; }
.tree-loading { padding: 10px 16px; color: #98a5b3; font-size: 0.85rem; }

/* Folha de empresa com colunas alinhadas (nome / cnpj / datas / situacao)
   - usada nas arvores de Parcelamentos, pra nao perder o alinhamento
   tabular que a listagem antiga tinha so por virar item de arvore. Fica
   dentro da .tree-row (que continua flex, caret + este bloco), o bloco em
   si e que vira grid de colunas fixas. */
.tree-row-cols {
  flex: 1; min-width: 0; display: grid;
  grid-template-columns: 1fr 148px 118px 118px 170px;
  align-items: center; gap: 10px;
}
.tree-row-cols .tree-label { flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-col { font-size: 0.78rem; color: #98a5b3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-row-cols .tree-count { text-align: right; white-space: nowrap; }
/* Variante mais simples (2 colunas: nome / situacao), usada no REGULARIZE. */
.tree-row-cols-2 { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 170px; align-items: center; gap: 10px; }
.tree-row-cols-2 .tree-label { flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-row-cols-2 .tree-count { text-align: right; white-space: nowrap; }

/* Variante de 4 colunas (nome / 2 tree-col / total), usada nas folhas de
   competencia do Relatorio de importacao (03/09/2026) - .tree-row-cols
   tem 5 faixas fixas (pensada pra outra tela, com 3 colunas do meio), que
   nao bate com as 4 celulas daqui (Competencia/Entrada/Saida/Total) -
   reaproveitar ela deixava o rotulo da competencia espremido em telas
   estreitas (1fr sobrava pouco espaco depois de 3 faixas fixas de mais). */
.tree-row-cols-3 { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 100px 100px 90px; align-items: center; gap: 10px; }
.tree-row-cols-3 .tree-label { flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-row-cols-3 .tree-count { text-align: right; white-space: nowrap; }

/* Botao "Emitir Guia do Parc" (17/09/2026, pedido do escritorio) - irmao
   de .tree-row-cols-3 dentro do .tree-row (que ja e flex), fica alinhado
   a direita sem disputar espaco com a grid de colunas. */
.btn-emitir-guia-parc { flex-shrink: 0; padding: 5px 12px; font-size: 0.78rem; white-space: nowrap; }

.tree-file-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 16px 9px 36px; border-bottom: 1px solid var(--cinza-borda); font-size: 0.87rem;
}
.tree-file-row:last-child { border-bottom: none; }
.tree-file-nome { flex: 1; overflow-wrap: anywhere; }
.tree-file-tamanho { color: #98a5b3; font-size: 0.78rem; white-space: nowrap; }
/* "Buscado em" (22/09/2026) - data em que o sistema baixou o arquivo,
   mesmo estilo discreto do tamanho, so pra situar sem competir com o
   nome do arquivo. */
.tree-file-data { color: #98a5b3; font-size: 0.78rem; white-space: nowrap; }
.tree-file-row .btn { padding: 6px 12px; font-size: 0.82rem; }

/* Interruptor (switch) - usado em Configuracoes > Ferramentas */
.switch { position: relative; display: inline-block; width: 42px; height: 24px; vertical-align: middle; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-track {
  position: absolute; inset: 0; background: #ccd2d9; border-radius: 999px; cursor: pointer; transition: background .15s ease;
}
.switch-track::before {
  content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .15s ease;
}
.switch input:checked + .switch-track { background: var(--verde); }
.switch input:checked + .switch-track::before { transform: translateX(18px); }

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.modal {
  background: #fff; border-radius: 8px; width: 520px; max-width: 92vw;
  max-height: 80vh; display: flex; flex-direction: column; overflow: hidden;
}
.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; border-bottom: 1px solid var(--cinza-borda); font-weight: 600;
}
.modal-path {
  padding: 8px 16px; font-size: 0.78rem; color: #607080; background: #f4f6f8;
  word-break: break-all;
}
.modal-list { overflow-y: auto; flex: 1; padding: 6px 0; }
.modal-list-item {
  padding: 9px 16px; cursor: pointer; font-size: 0.88rem; display: flex; align-items: center; gap: 8px;
}
.modal-list-item:hover { background: #eef4fa; }
.modal-empty { padding: 16px; color: #99a; font-size: 0.85rem; }
.modal-footer {
  display: flex; justify-content: flex-end; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--cinza-borda);
}
.modal-footer #browseCriarPastaEmpresa { margin-right: auto; }

/* Modal "Escolher pasta" - layout tipo "Salvar como" do Windows
   (barra lateral de atalhos + listagem da pasta atual lado a lado),
   pedido do escritorio em 02/09/2026. */
.modal-browse { width: 720px; max-width: 94vw; height: 480px; max-height: 84vh; }
.modal-body-browse { display: flex; flex: 1; overflow: hidden; margin-top: 8px; }
.modal-sidebar {
  width: 190px; flex-shrink: 0; overflow-y: auto; padding: 8px 0;
  background: #f6f8fa; border-right: 1px solid var(--cinza-borda);
}
.modal-sidebar-titulo {
  padding: 10px 14px 4px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; color: #8a97a6;
}
.modal-sidebar-item {
  padding: 7px 14px; cursor: pointer; font-size: 0.85rem; display: flex; align-items: center; gap: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.modal-sidebar-item:hover { background: #e6edf4; }
.modal-sidebar-item.ativo { background: #dbe8f5; font-weight: 600; }
.modal-main-browse { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

/* Arvore de navegacao estilo Windows Explorer (02/09/2026, pedido do
   escritorio) - substitui o antigo .modal-path (texto plano) + .modal-list
   (lista simples) por uma hierarquia expansivel, com a pasta atual
   destacada (.tree-node-row.ativo) - ver renderizarArvore em app.js. */
.modal-tree { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 0; }
.tree-node-row {
  display: flex; align-items: center; gap: 4px; cursor: pointer;
  font-size: 0.85rem; padding: 5px 8px 5px 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; border-radius: 4px; margin: 0 4px;
}
.tree-node-row:hover { background: #eef4fa; }
.tree-node-row.ativo { background: var(--azul-escuro, #1e5a8e); color: #fff; font-weight: 600; }
.tree-chevron {
  width: 16px; flex-shrink: 0; text-align: center; font-size: 0.7rem;
  color: #8a97a6; cursor: pointer;
}
.tree-node-row.ativo .tree-chevron { color: #d8e6f2; }
.tree-icon { flex-shrink: 0; font-size: 0.9rem; }
.tree-label { overflow: hidden; text-overflow: ellipsis; }
.tree-carregando, .tree-vazio {
  font-size: 0.78rem; color: #99a; padding: 4px 8px; font-style: italic;
}

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--azul-escuro); color: #fff; padding: 12px 20px; border-radius: 6px;
  font-size: 0.88rem; opacity: 0; pointer-events: none; transition: all .2s ease; max-width: 90vw; z-index: 100;
  white-space: pre-line;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { background: var(--vermelho); }

/* Aviso fixo de execucao em segundo plano (01/09/2026) - barra no topo,
   sempre por cima de tudo, visivel em qualquer aba enquanto um "Rodar
   agora" esta rodando (ver src/routes/execucoes.js, execucaoEmAndamento.js). */
.aviso-execucao-fundo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: var(--azul-escuro); color: #fff; padding: 10px 20px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 0.9rem; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.aviso-manifestacao-fundo { background: #6a3fa0; }
.aviso-parcelamento-fundo { background: #c2410c; }

/* Aba "Codigo de Acesso" do cadastro de empresas (16/10/2026): mesmo
   desenho do quadro de acesso do Portal do Simples Nacional - campos um
   embaixo do outro, rotulo em negrito por cima, quadro com faixa azul. */
.quadro-codigo-acesso { max-width: 340px; background: #f4f1ee; border-top: 5px solid #1351b4; padding: 18px 22px; margin: 10px 0 14px; display: flex; flex-direction: column; gap: 18px; }
.quadro-codigo-acesso-campos { display: flex; flex-direction: column; gap: 18px; }
.quadro-codigo-acesso label { display: flex; flex-direction: column; gap: 8px; font-weight: 600; color: #1b1b1b; }
.quadro-codigo-acesso input { width: 100%; box-sizing: border-box; padding: 10px 14px; border: 1px solid #888; border-radius: 6px; background: #fff; font-weight: 400; }
.quadro-codigo-acesso input::placeholder { font-style: italic; color: #666; }
.quadro-codigo-acesso input[readonly] { background: #f7f7f7; }
.quadro-codigo-acesso .campo-com-acoes { display: flex; gap: 6px; align-items: center; }
.quadro-codigo-acesso .campo-com-acoes input { flex: 1; min-width: 0; }
.quadro-codigo-acesso .campo-com-acoes .btn { flex: none; padding: 6px 10px; }

/* Selo "Cadastro incompleto" ao lado do nome na lista de Empresas
   (24/09/2026, pedido do escritorio) - empresa ativa sem Regime e/ou sem
   Contato valido; o que falta fica no tooltip. */
.selo-cadastro-incompleto {
  display: inline-block; background: #fdf1e3; border: 1px solid var(--laranja); color: #8a4b0a;
  border-radius: 10px; padding: 1px 8px; font-size: 0.72rem; font-weight: 600;
  white-space: nowrap; cursor: help; margin-left: 6px; vertical-align: middle;
}
.aviso-execucao-spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
  animation: aviso-execucao-girar 0.8s linear infinite; flex-shrink: 0;
}
@keyframes aviso-execucao-girar { to { transform: rotate(360deg); } }

.situacao-regular { color: #27ae60; font-weight: 600; }
.situacao-irregular { color: var(--vermelho); font-weight: 600; }
.situacao-erro { color: #999; font-weight: 600; }
.situacao-neutra { color: #607080; font-weight: 600; }

/* Icone de certidao (28/08/2026, pedido do escritorio) - "tamanho medio"
   (36px), circular, colorido conforme a situacao daquele tipo (mesmas 4
   classes .situacao-* acima, reaproveitadas aqui como cor de FUNDO/BORDA
   em vez de cor de texto, ja que o conteudo e um emoji, nao uma palavra).
   1 por tipo de certidao, lado a lado na mesma linha da empresa (Certidoes,
   1 linha por empresa desde a correcao do layout). */
.icone-certidao {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--cinza-borda);
  background: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s ease;
}
.icone-certidao:hover { transform: scale(1.08); }
.icone-certidao.situacao-regular { border-color: #27ae60; background: #eafaf1; }
.icone-certidao.situacao-irregular { border-color: var(--vermelho); background: #fdecea; }
.icone-certidao.situacao-erro { border-color: #999; background: #f2f2f2; }
.icone-certidao.situacao-neutra { border-color: #cfd8e3; background: #f7f9fb; }

.parc-ativo { color: #27ae60; font-weight: 600; }
.parc-inativo { color: #999; }
.sitfis-parcelado { color: #2980b9; font-weight: 600; }

/* ====================================================================
   Layout responsivo (pedido do escritorio, 27/08/2026) - o app e uma
   pagina web (Express + HTML/CSS/JS), nao um app desktop: "responsivo"
   aqui significa a pagina se adaptar ao REDIMENSIONAMENTO DA JANELA DO
   NAVEGADOR (maximizar/restaurar o navegador, abrir em metade da tela
   etc.) via CSS, nao controle de janela nativa (isso nao existe pra uma
   pagina web). Abaixo de 880px de largura, o menu lateral (fixo em 230px)
   deixa de caber confortavel ao lado do conteudo - vira um painel
   retratil (fora da tela por padrao, "hamburguer" no canto abre/fecha),
   e o conteudo principal usa a largura toda.
   ==================================================================== */
@media (max-width: 880px) {
  .menu-toggle { display: flex; }

  .sidebar {
    position: fixed;
    top: 0;
    left: -260px;
    z-index: 999;
    width: 250px;
    transition: left 0.2s ease;
    box-shadow: 2px 0 12px rgba(0,0,0,0.25);
  }
  .sidebar.aberta { left: 0; }
  .sidebar-overlay.aberta { display: block; }

  main {
    max-width: 100%;
    padding: 64px 14px 60px;
  }

  .cards-row { gap: 10px; }
  .card { min-width: 140px; padding: 10px 12px; }

  .form-row { gap: 10px; }
  .form-row select, .form-row input[type=date], .form-row input[type=time], .form-row input[type=text] {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 520px) {
  main { padding: 60px 8px 50px; }
  .btn-row { gap: 6px; }
  .btn { padding: 8px 12px; font-size: 0.85rem; }
}

/* Cadastro de Departamentos / Grupo de Empresas (25/09/2026): botao
   bloqueado (Excluir com vinculos, Editar de departamento protegido) fica
   visivelmente apagado - o motivo aparece no title ao passar o mouse. */
#gridDepartamentos .btn:disabled,
#gridGruposEmpresas .btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Blocos de contato dos socios no formulario de empresa (25/09/2026) -
   mesmo layout do contato inicial; botao Remover alinhado pela base. */
.linha-socio-contato { align-items: flex-end; }
.linha-socio-contato [data-remover-socio-contato] { height: 38px; }

/* Quadro "Capital social por sócio" (25/09/2026) - mesmo visual da consulta
   publica do QSA da Receita: cabecalho azul, 1 bloco amarelo por socio,
   total em destaque. */
.quadro-capital-socios { margin: 6px 0 18px; }
.qsa-titulo { margin: 8px 0 10px; color: #1a73b8; font-size: 1.05rem; }
.qsa-rotulo { font-weight: 700; display: inline-block; min-width: 190px; }
.qsa-cabecalho { background: #d9eef3; border: 1px solid #bfe0e8; color: #1d4a57; border-radius: 6px; padding: 12px 18px; line-height: 1.7; margin-bottom: 10px; }
.qsa-socio { background: #fdf3d0; border: 1px solid #f3e2a6; color: #7a5a00; border-radius: 6px; padding: 12px 18px; line-height: 1.7; margin-bottom: 10px; }
.qsa-valor { display: flex; align-items: center; gap: 0; margin-top: 4px; }
.qsa-valor input { padding: 6px 10px; border: 1px solid #e3cf87; border-radius: 6px; background: #fff; color: var(--texto); font-size: 0.95rem; width: 180px; }
.qsa-total { background: #eef2f6; border: 2px solid #2c3e50; border-radius: 6px; padding: 12px 18px; line-height: 1.7; }
.qsa-total strong { font-size: 1.1rem; }
.qsa-conf-ok { color: #1a7a34; font-weight: 600; }
.qsa-conf-erro { color: #b42318; font-weight: 600; }
.qsa-conf-neutra { color: #607d8b; }

/* Situacao do Departamento Pessoal (25/09/2026) */
.tabela-situacao-dp .col-situacao-dp { text-align: center; width: 150px; }
.tabela-situacao-dp .col-situacao-dp input { width: 18px; height: 18px; cursor: pointer; }
.situacoes-dp-obrigacao { display: flex; gap: 8px; flex-wrap: wrap; }

/* Cadastro de Obrigacoes - quantidade de empresas por obrigacao (28/09/2026) */
.bloco-empresas-obrigacao { margin-top: 4px; }
.qtd-empresas-obrigacao { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; color: var(--azul); cursor: pointer; }
.qtd-empresas-obrigacao:hover { text-decoration: underline; }
.qtd-empresas-obrigacao .seta-qtd { display: inline-block; transition: transform .15s ease; }
.qtd-empresas-obrigacao.aberta .seta-qtd { transform: rotate(90deg); }
.qtd-empresas-obrigacao.qtd-zero { color: #95a5a6; cursor: default; text-decoration: none; }
.lista-empresas-obrigacao { margin: 6px 0 4px 14px; padding: 0; list-style: none; font-size: 13px; min-width: 320px; }
.lista-empresas-obrigacao li { padding: 2px 0; }
.tabela-obr-por-empresas td { vertical-align: top; }
.celula-obr-por-empresas { padding-left: 24px !important; }
.nome-obr-por-empresas { font-weight: 600; }
.modal-obr-emp-secao { font-size: 14px; margin: 14px 0 6px; color: var(--azul-escuro); }
.modal-obr-emp-secao:first-child { margin-top: 0; }
.modal-obr-emp-individual { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #d0d7de; border-radius: 8px; background: #f6f8fa; color: #2c3e50; cursor: pointer; }
#modalObrEmpLoteLista { max-height: 300px; overflow: auto; }
.linha-lote-empresa-atual { background: #fff4cc; }
.acrescentar-empresas-obrigacao { background: none; border: 0; padding: 0; margin-left: 14px; font: inherit; font-size: 12px; color: var(--verde); cursor: pointer; }
.acrescentar-empresas-obrigacao:hover { text-decoration: underline; }
.linha-lote-todas { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 12px; font-weight: 600; font-size: 0.88rem; cursor: pointer; }

/* Painel de Tarefas - filtro por competencia + departamento (28/09/2026) */
.painel-tarefas-filtro-competencia { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 4px; }
.seletor-competencia { position: relative; }
.seletor-competencia-btn { min-width: 170px; padding: 8px 14px; border: 1px solid var(--cinza-borda); border-radius: 6px; background: #fff; color: #6b7785; font: inherit; font-size: 0.9rem; cursor: pointer; text-align: center; }
.seletor-competencia-btn:hover, .seletor-competencia-btn.aberto { border-color: var(--laranja); }
.seletor-competencia-btn.seletor-competencia-preenchido { color: var(--texto); font-weight: 600; }
.seletor-competencia-popover { position: absolute; top: calc(100% + 4px); left: 0; z-index: 50; width: 230px; padding: 10px; background: #fff; border: 1px solid var(--cinza-borda); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,0.15); }
.seletor-competencia-cabecalho { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.seletor-competencia-cabecalho button { background: none; border: 0; font-size: 1.1rem; padding: 2px 10px; cursor: pointer; color: var(--texto); border-radius: 4px; }
.seletor-competencia-cabecalho button:hover { background: var(--cinza-bg); }
.seletor-competencia-meses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.seletor-competencia-meses button { background: none; border: 0; padding: 10px 0; border-radius: 4px; cursor: pointer; font: inherit; font-size: 0.88rem; color: var(--texto); }
.seletor-competencia-meses button:hover { background: #eef1f4; }
.seletor-competencia-meses button.mes-atual { box-shadow: inset 0 0 0 1px var(--cinza-borda); }
.seletor-competencia-meses button.selecionado { background: var(--azul); color: #fff; }
.seletor-competencia-rodape { text-align: right; margin-top: 6px; }
.seletor-competencia-rodape button { background: none; border: 0; color: var(--azul); cursor: pointer; font-size: 0.82rem; }
.painel-tarefas-navegacao button:disabled { opacity: 0.45; cursor: not-allowed; }
/* WhatsApp Avisos embutido (29/09/2026) */
.iframe-whatsapp-avisos { width: 100%; height: calc(100vh - 60px); min-height: 600px; border: 0; background: #fff; border-radius: 8px; }
/* Canais de envio de documentos (30/09/2026) */
.canais-envio-documentos { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 12px; padding: 10px 14px; border: 1px solid var(--cinza-borda); border-radius: 8px; background: #fff; }
.canal-envio { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #2c3e50; cursor: pointer; }
.canal-envio input { width: 17px; height: 17px; margin: 0; cursor: pointer; }
.canal-envio-icone { width: 24px; height: 24px; flex: none; }
#canaisEnvioAviso { color: var(--vermelho); font-weight: 600; }

/* Emissor de Notas Virtus - tela inicial e quadro do prestador (30/09/2026) */
.emissor-landing { max-width: 460px; margin: 8px 0 24px 0; padding: 24px; background: var(--card-bg, #fff); border: 1px solid var(--border, #d8dee4); border-radius: 12px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.emissor-landing-logos { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.emissor-landing-selo { width: 300px; max-width: 100%; height: auto; border-radius: 8px; background: #fff; }
.emissor-landing-marca { display: flex; align-items: center; gap: 12px; }
.emissor-landing-marca img { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; background: #fff; }
.emissor-landing-marca strong { font-size: 1.15rem; }
.emissor-prestador-dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 16px; padding: 12px 16px; margin: 4px 0 16px; border: 1px solid var(--border, #d8dee4); border-radius: 8px; background: var(--card-bg, #fff); }
.emissor-prestador-dados div { display: flex; flex-direction: column; min-width: 0; }
.emissor-prestador-dados span { font-size: 0.72rem; text-transform: uppercase; opacity: 0.7; }
.emissor-prestador-dados b { font-weight: 600; overflow-wrap: anywhere; }
.emissor-prestador-dados .emissor-prestador-alerta { grid-column: 1 / -1; color: #c0392b; }

/* Aba "Dados Gerais" da empresa (07/10/2026): Salvar Alterações so habilita com mudanca. */
.barra-salvar-dados-gerais { align-items: center; gap: 12px; }
#btnSalvarDadosGeraisEmpresa:disabled { opacity: 0.45; cursor: not-allowed; }

/* Envio de Documentos simplificado (08/10/2026): contadores das abas e "Outras ações". */
.contador-aba { font-weight: 400; opacity: 0.75; }
.contador-aba.contador-aba-alerta { color: var(--vermelho); opacity: 1; font-weight: 600; }
.outras-acoes-documentos { margin: 6px 0; }
.outras-acoes-documentos summary { cursor: pointer; color: var(--cinza-texto, #667); font-size: 0.9em; }
.outras-acoes-documentos .btn-row { margin-top: 8px; }
#receberGuiasPainel { margin: 10px 0 14px; }

/* Fechamento do mês (08/10/2026): 5 etapas em cartoes. */
.fech-etapa { background: #fff; border: 1px solid var(--cinza-borda); border-radius: 10px; padding: 12px 16px; margin-bottom: 8px; }
.fech-etapa-atual { border: 2px solid var(--azul); }
.fech-etapa-topo { display: flex; align-items: center; gap: 12px; }
.fech-etapa-marca { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; background: #eef1f5; color: #667; }
.fech-etapa-atual .fech-etapa-marca { background: var(--azul); color: #fff; }
.fech-etapa-feita .fech-etapa-marca { background: #d8f3e3; color: #1e8e3e; }
.fech-etapa-texto { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.fech-etapa-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.fech-etapa-corpo { margin: 10px 0 2px 42px; display: grid; gap: 4px; }
.fech-dica { margin: -2px 0 6px 24px; display: block; }
.fech-pastas { margin-top: 16px; }
.fech-pastas summary { cursor: pointer; font-weight: 600; }
.fech-etapa-andamento .fech-etapa-marca { background: #fdf0d5; color: #9a6700; }
.fech-selo-andamento { font-weight: 400; font-size: 0.8em; background: #fdf0d5; color: #9a6700; border-radius: 10px; padding: 1px 8px; margin-left: 6px; }