/* ===========================================================================
   IQF Gestor Contabil — Admin Shell

   Tudo o que e visual mora aqui: a CSP da aplicacao nao permite unsafe-inline
   (ver SecurityConfig e SEGURANCA.md), entao <style> na pagina e atributo
   style="..." no elemento simplesmente nao sao aplicados pelo navegador. Se algo
   precisa de estilo, precisa de classe.

   O Bootstrap vem do WebJar e continua sendo a base — o que esta aqui e so o
   casco (topbar/sidebar/conteudo) e alguns componentes proprios.
   =========================================================================== */

:root {
  --topbar-altura: 56px;
  --sidebar-largura: 264px;
  --sidebar-largura-recolhida: 76px;

  /* Largura efetiva do menu. Trocar esta variavel e o que recolhe o shell
     inteiro: sidebar e conteudo leem a mesma medida. */
  --sidebar-atual: var(--sidebar-largura);

  /* As cores do casco vem dos tokens de tema.css; aqui so os papeis. */
  --shell-topbar-fundo: var(--iqf-casco);
  --shell-sidebar-fundo: var(--iqf-casco-alt);
  --shell-sidebar-texto: var(--iqf-casco-texto);
  --shell-sidebar-texto-apagado: var(--iqf-casco-texto-apagado);
  --shell-sidebar-texto-ativo: #ffffff;
  --shell-sidebar-hover: rgba(255, 255, 255, 0.06);
  --shell-sidebar-ativo: rgba(255, 255, 255, 0.10);
  /* A barra do item ativo precisa de 3:1 contra o casco (elemento nao textual);
     o azul da marca, feito para fundo branco, ficaria apagado aqui. */
  --shell-indicador-ativo: #7b9bf5;
  --shell-borda: rgba(255, 255, 255, 0.08);
  --shell-transicao: 180ms ease;
}

html.sidebar-recolhida {
  --sidebar-atual: var(--sidebar-largura-recolhida);
}

/* Respeita quem pediu menos animacao no sistema operacional. */
@media (prefers-reduced-motion: reduce) {
  :root { --shell-transicao: 0ms; }
}

/* ---------------------------------------------------------------- estrutura */

body.app-shell {
  background-color: var(--iqf-fundo, #f5f7fa);
  min-height: 100vh;
}

.pular-para-conteudo {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1080;
  background: #fff;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
}

.sprite-icones { display: none; }

.icone {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
}

/* ------------------------------------------------------------------ topbar */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-altura);
  z-index: 1035;                  /* acima da sidebar, abaixo de modal/dropdown */
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.75rem;
  background-color: var(--shell-topbar-fundo);
  border-bottom: 1px solid var(--shell-borda);
  color: #fff;
}

.topbar-marca {
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.topbar-marca:hover { color: #fff; }

.btn-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: #fff;
}

.btn-icone:hover { background-color: var(--shell-sidebar-hover); }

.topbar-contexto {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  min-width: 0;
}

.topbar-contexto .form-select {
  /* flex-shrink desligado: sem isto o seletor encolhe ate cortar o nome da
     empresa, que e justamente o dado que precisa estar sempre legivel. */
  flex: 0 0 auto;
  width: 16rem;
  max-width: 22rem;
  background-color: rgba(255, 255, 255, 0.08);
  border-color: var(--shell-borda);
  color: #fff;
}

/* O <option> herda o fundo do <select> em parte dos navegadores; sem isto a
   lista aberta fica branco-no-branco no Windows. */
.topbar-contexto .form-select option { color: #212529; background-color: #fff; }

/*
  O que o <select> vira com JavaScript: um botao com cara de campo de busca, que
  abre a janela do Ctrl+K. As medidas sao as MESMAS do .form-select acima de
  proposito — trocar um pelo outro no carregamento nao pode mexer a barra.
*/
.topbar-busca {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  width: 16rem;
  max-width: 22rem;
  padding: 0.25rem 0.5rem 0.25rem 0.75rem;
  font-size: 0.875rem;
  text-align: left;
  border: 1px solid var(--shell-borda);
  border-radius: 0.375rem;
  background-color: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.topbar-busca:hover { background-color: rgba(255, 255, 255, 0.16); }

/*
  Escrito a mao, e nao deixado por conta do [hidden] do navegador: o display:flex
  acima e regra de autor com a mesma especificidade do [hidden] da folha do
  navegador, e autor vence. Hoje quem salva e o "[hidden]{display:none!important}"
  do Reboot do Bootstrap — depender disso significaria que o botao aparece, sem
  fazer nada, no dia em que o Bootstrap mudar de opiniao ou sair da tela.
*/
.topbar-busca[hidden] { display: none; }

.topbar-busca svg { flex: 0 0 auto; width: 1rem; height: 1rem; }

/* O nome da empresa e o dado que precisa continuar legivel; e ele que encolhe. */
.topbar-busca-nome {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-busca-atalho {
  flex: 0 0 auto;
  padding: 0.05rem 0.3rem;
  font-size: 0.65rem;
  border-radius: 0.25rem;
  background-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.75);
}


.topbar-usuario { display: flex; align-items: center; gap: 0.5rem; }

.btn-usuario {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: #fff;
  max-width: 14rem;
}

.btn-usuario:hover { background-color: var(--shell-sidebar-hover); }

.nome-usuario {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----------------------------------------------------------------- sidebar */

.sidebar {
  position: fixed;
  top: var(--topbar-altura);
  bottom: 0;
  left: 0;
  width: var(--sidebar-atual);
  z-index: 1030;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--shell-sidebar-fundo);
  border-right: 1px solid var(--shell-borda);
  transition: width var(--shell-transicao), transform var(--shell-transicao);
}

.sidebar-nav { flex: 1 1 auto; padding: 0.75rem 0.5rem; }

.sidebar-grupo {
  margin: 1rem 0 0.35rem;
  padding: 0 0.75rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--shell-sidebar-texto-apagado);
}

/* Link de texto no cabecalho do grupo, e nao mais um item de menu: trocar de
   empresa nao e um lugar para onde se vai. */
.sidebar-trocar {
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: underline;
}

.sidebar-trocar:hover { color: #fff; }

/* Menu recolhido: so os icones cabem, e este botao nao tem um. */
html.sidebar-recolhida .sidebar-trocar { display: none; }

.sidebar-grupo-detalhe {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.75);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-vazio {
  margin: 0 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px dashed var(--shell-borda);
  border-radius: 0.5rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
}

.sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  color: var(--shell-sidebar-texto);
  white-space: nowrap;
}

.sidebar .nav-link:hover {
  background-color: var(--shell-sidebar-hover);
  color: var(--shell-sidebar-texto-ativo);
}

.sidebar .nav-link.ativo {
  background-color: var(--shell-sidebar-ativo);
  color: var(--shell-sidebar-texto-ativo);
  font-weight: 600;
  box-shadow: inset 3px 0 0 0 var(--shell-indicador-ativo);
}

.sidebar-rodape {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--shell-borda);
  font-size: 0.75rem;
  color: var(--shell-sidebar-texto-apagado);
}

/* O ultimo backup, so para o ADMIN (LayoutAdvice). */
.sidebar-backup { display: block; margin-top: 0.25rem; }
/* Vermelho claro: a barra lateral e escura (--iqf-casco-alt), e o vermelho dos alertas sumiria nela. */
.sidebar-backup-atrasado { color: #fca5a5; font-weight: 600; }

/* Estado recolhido: sobra so o icone, e o rotulo vira o title= do link. */
html.sidebar-recolhida .nav-rotulo,
html.sidebar-recolhida .sidebar-grupo-detalhe,
html.sidebar-recolhida .sidebar-vazio { display: none; }

html.sidebar-recolhida .sidebar-grupo {
  font-size: 0;                    /* esconde o texto sem sumir com o espacamento */
  margin: 0.75rem 0.75rem 0.35rem;
  padding: 0;
  border-top: 1px solid var(--shell-borda);
}

html.sidebar-recolhida .sidebar .nav-link {
  justify-content: center;
  padding: 0.55rem 0;
}

/* ---------------------------------------------------------------- conteudo */

.conteudo {
  margin-left: var(--sidebar-atual);
  padding-top: var(--topbar-altura);
  transition: margin-left var(--shell-transicao);
}

.conteudo-interno {
  max-width: 1400px;
  padding: 1.75rem 2rem 3rem;
}

.cabecalho-pagina {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.cabecalho-subtitulo {
  margin: 0.25rem 0 0;
  color: var(--bs-secondary-color, #6c757d);
  font-size: 0.875rem;
}

.cabecalho-acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* -------------------------------------------------------------- componentes */

/*
  Painel: a superficie branca onde mora cada bloco de conteudo.

  Existia escrito a mao 61 vezes como "bg-white rounded-3 shadow-sm p-4", ao lado
  de 20 .card do Bootstrap — duas aparencias para a mesma ideia, e o bg-white fixo
  impedindo qualquer tema escuro. Agora e uma classe, que le os tokens.
*/
.painel {
  padding: 1.5rem;
  border-radius: var(--iqf-raio-lg, 0.75rem);
  background-color: var(--iqf-superficie, #fff);
  box-shadow: var(--iqf-sombra-cartao);
}

/* Tabela que ocupa o painel inteiro: sem respiro interno, para o cabecalho da
   tabela encostar nas bordas, e com o canto cortando o fundo dele. */
.painel-tabela {
  border-radius: var(--iqf-raio-lg, 0.75rem);
  background-color: var(--iqf-superficie, #fff);
  box-shadow: var(--iqf-sombra-cartao);
}

/* Titulo de bloco dentro do painel — o <h2 class="h6"> que as telas ja usam. */
.painel > h2.h6:first-child,
.painel > .d-flex:first-child h2.h6 { margin-bottom: 1rem; }

@media (max-width: 575.98px) {
  .painel { padding: 1rem; }
}

/*
  Envio em andamento (app.js, ligarEnvioUnico). O formulario POST recebe
  [data-enviando] e o botao que o disparou, .enviando: o spinner do botaoSubmit
  aparece, e o botao deixa claro que o clique ja foi aceito.

  Nao e [disabled] de proposito: botao desabilitado sai dos dados do formulario,
  e o "Lancar e continuar" do extrato depende do name do botao clicado.
*/
.btn.enviando {
  cursor: progress;
  opacity: 0.75;
  pointer-events: none;
}

.btn.enviando .htmx-indicator { opacity: 1; }

/* O botao de fechar do alerta so existe com JavaScript: sem ele, o X seria um
   botao morto. O espaco a direita que o Bootstrap reserva para ele, idem. */
.alert-dismissible .btn-close { display: none; }
html.com-js .alert-dismissible .btn-close {
  display: block;
  padding: 0.95rem 1rem;
}
html:not(.com-js) .alert-dismissible { padding-right: var(--bs-alert-padding-x); }

/* A mensagem de flash: icone a esquerda, texto a direita, alinhados. */
.alerta-flash {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.alerta-flash .icone {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.0625rem;
}

/* Linha de "nada encontrado" nas tabelas: centro, cinza, com respiro — e nao uma
   linha de dados vazia que parece erro de carregamento. */
.linha-vazia > td {
  padding: 2.25rem 1rem !important;
  color: var(--bs-secondary-color, #6c757d);
  text-align: center;
  background-color: var(--iqf-superficie, #fff) !important;
}

.linha-vazia .icone {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0 auto 0.5rem;
  opacity: 0.45;
}

/* Coluna de numero (alinhada a direita) nao quebra linha: "R$" numa linha e
   "8.430,55" na outra desalinha a coluna inteira e se le como dois valores. */
.table td.text-end,
.table th.text-end { white-space: nowrap; }

/*
  Tabela que vira cartao no celular: cada linha um bloco, cada celula uma linha
  "rotulo ... valor". O rotulo vem do data-rotulo da propria celula, e nao do
  <thead> por JavaScript: a tela fica certa sem script, e o teste le o atributo.

  Celula SEM data-rotulo e o titulo do cartao (o nome da empresa, o arquivo) ou a
  fileira de botoes: vai inteira, alinhada a esquerda. Os botoes deixam de ficar
  numa linha so (text-nowrap) e quebram, que e o que cabe na largura do celular.

  Float, e nao flex, na celula com rotulo: varias celulas tem mais de um filho
  (selo + texto, data + "por fulano"), e no flex cada filho viraria uma coluna.
*/
@media (max-width: 767.98px) {
  .tabela-cartoes > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .tabela-cartoes,
  .tabela-cartoes > tbody,
  .tabela-cartoes > tbody > tr,
  .tabela-cartoes > tbody > tr > td { display: block; width: 100%; }

  .tabela-cartoes > tbody > tr {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--iqf-borda, #dee2e6);
  }

  .tabela-cartoes > tbody > tr:last-child { border-bottom: 0; }

  .tabela-cartoes > tbody > tr > td {
    padding: 0.3rem 0 !important;
    border: 0;
    text-align: right;
  }

  .tabela-cartoes > tbody > tr > td[data-rotulo]::before {
    content: attr(data-rotulo);
    float: left;
    margin-right: 1rem;
    /* A fonte do texto, e nao a da celula: em "Usuario" e "Origem" a celula e
       monoespacada (e um login, um IP), e o rotulo herdaria isso. */
    font-family: var(--bs-body-font-family);
    font-size: var(--iqf-texto-sm, 0.8125rem);
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
  }

  .tabela-cartoes > tbody > tr > td[data-rotulo]::after {
    content: "";
    display: table;
    clear: both;
  }

  /* !important para vencer o .text-end/.text-nowrap da coluna de botoes, que
     tambem sao !important no Bootstrap: no cartao os botoes comecam a esquerda,
     como o resto do texto, e quebram linha. */
  .tabela-cartoes > tbody > tr > td:not([data-rotulo]) {
    text-align: left !important;
    white-space: normal !important;
  }

  .tabela-cartoes > tbody > tr > td:not([data-rotulo]) + td:not([data-rotulo]),
  .tabela-cartoes > tbody > tr > td[data-rotulo] + td:not([data-rotulo]) { padding-top: 0.625rem !important; }

  .tabela-cartoes > tbody > tr > td .justify-content-end { justify-content: flex-start !important; }

  .tabela-cartoes > tbody > tr.linha-vazia > td { text-align: center !important; }

  /* Rodape (o total do extrato): rotulo a esquerda, valor a direita, sem as
     celulas vazias que so existiam para alinhar com as colunas de cima. */
  .tabela-cartoes > tfoot,
  .tabela-cartoes > tfoot > tr { display: block; }

  .tabela-cartoes > tfoot > tr {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
  }

  .tabela-cartoes > tfoot > tr > :empty { display: none; }
}

.paginacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
}

.paginacao-posicao { color: var(--bs-secondary-color, #6c757d) !important; }

.paginacao-total {
  font-size: var(--iqf-texto-sm, 0.8125rem);
  color: var(--bs-secondary-color, #6c757d);
}

.metrica { min-width: 0; }

/* O numero e o dado; o rotulo so diz o que ele e. Com os dois quase do mesmo
   tamanho, o olho nao sabia para onde ir primeiro. */
.metrica-rotulo {
  font-size: var(--iqf-texto-xs, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bs-secondary-color, #6c757d);
}

.metrica-valor {
  margin-top: 0.25rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.metrica-detalhe {
  margin-top: 0.25rem;
  font-size: var(--iqf-texto-sm, 0.8125rem);
  color: var(--bs-secondary-color, #6c757d);
}

/* Larguras que antes viviam em style="..." — inutil sob a nossa CSP. */
.formulario-estreito { max-width: 640px; }
.qrcode-2fa { max-width: 260px; }

/* Barra do teto do MEI. <progress> nativo porque o valor entra por atributo,
   sem depender de style inline (ver comentario em apuracao/mensal.html). */
progress.barra-limite {
  display: block;
  width: 100%;
  height: 8px;
  border: 0;
  border-radius: 4px;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--bs-secondary-bg, #e9ecef);
}

progress.barra-limite::-webkit-progress-bar {
  background-color: var(--bs-secondary-bg, #e9ecef);
  border-radius: 4px;
}

progress.barra-limite::-webkit-progress-value { border-radius: 4px; }

progress.barra-ok::-webkit-progress-value { background-color: var(--bs-success, #198754); }
progress.barra-ok::-moz-progress-bar { background-color: var(--bs-success, #198754); }
progress.barra-atencao::-webkit-progress-value { background-color: var(--bs-warning, #ffc107); }
progress.barra-atencao::-moz-progress-bar { background-color: var(--bs-warning, #ffc107); }
progress.barra-perigo::-webkit-progress-value { background-color: var(--bs-danger, #dc3545); }
progress.barra-perigo::-moz-progress-bar { background-color: var(--bs-danger, #dc3545); }

.estado-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2.5rem 1rem;
  border: 1px dashed var(--bs-border-color, #dee2e6);
  border-radius: 0.75rem;
  color: var(--bs-secondary-color, #6c757d);
  text-align: center;
}

.estado-vazio .icone { width: 2rem; height: 2rem; opacity: 0.6; }

/* --- listas repetiveis de formulario (socios, CNAEs secundarios) --- */

.lista-repetivel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.linha-repetivel {
  display: flex;
  /* wrap por causa da descricao do CNAE: ela tem width 100% e precisa cair na
     linha de baixo, em vez de ser espremida ao lado do campo. */
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 26rem;
}

/* O .form-control do Bootstrap tem width:100%. Com o wrap acima, isso o faz
   tomar a linha inteira e empurrar a lupa e o "x" para baixo. flex:1 devolve o
   campo a condicao de item que divide a linha com os botoes. */
.linha-repetivel .form-control {
  flex: 1 1 8rem;
  width: auto;
}

/* Enquanto o codigo esta pela metade nao ha descricao nenhuma, e um elemento
   vazio ainda ocuparia uma linha inteira mais o gap — a lista de CNAEs ficaria
   com buracos entre as linhas antes de alguem digitar qualquer coisa. */
[data-cnae-descricao]:empty {
  display: none;
}

/* A lupa so existe se houver JavaScript para abrir a janela; sem ele seria um
   botao morto. Esconder por CSS, e nao por um laco no boot, e o que faz a linha
   de CNAE clonada ja nascer certa — ela e criada depois de qualquer laco rodar. */
[data-buscar-cnae] {
  display: none;
}

html.com-js [data-buscar-cnae] {
  display: inline-block;
}

.linha-socio {
  padding: 0.625rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.5rem;
  background-color: var(--bs-body-bg, #fff);
}

.cabecalho-socios {
  margin-bottom: 0.35rem;
  padding: 0 0.625rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bs-secondary-color, #6c757d);
}

.soma-participacao { font-size: 0.8rem; }

.lista-vazia { margin-bottom: 0.5rem; }

/* Indicador de carregamento do htmx.
   Estas regras substituem o <style> que o htmx injetaria em runtime — injecao
   que a nossa CSP bloqueia. Sem elas o spinner ficaria sempre visivel. */
.htmx-indicator {
  opacity: 0;
  transition: opacity 200ms ease-in;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

.botao-com-indicador {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* ------------------------------------------------------------ telas publicas */

body.tela-publica {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1.5rem;
  background-color: var(--shell-sidebar-fundo);
}

.tela-publica-caixa {
  width: 100%;
  max-width: 30rem;
  padding: 2rem;
  border-radius: 0.75rem;
  background-color: #fff;
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.35);
}

.tela-publica-marca {
  display: block;
  margin-bottom: 1.25rem;
  color: var(--shell-sidebar-fundo);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.tela-publica-rodape {
  margin: 1.5rem 0 0;
  font-size: 0.78rem;
  color: var(--bs-secondary-color, #6c757d);
}

/* -------------------------------------------------------------- responsivo */

.sidebar-fundo { display: none; }

@media (max-width: 991.98px) {
  /* No celular o menu vira gaveta: sai da frente por padrao e entra por cima do
     conteudo, sem empurrar nada. */
  :root { --sidebar-atual: var(--sidebar-largura); }

  .sidebar { transform: translateX(-100%); }

  html.sidebar-aberta .sidebar { transform: translateX(0); }

  .conteudo { margin-left: 0; }

  html.sidebar-aberta .sidebar-fundo {
    display: block;
    position: fixed;
    inset: var(--topbar-altura) 0 0 0;
    z-index: 1025;
    background-color: rgba(0, 0, 0, 0.5);
  }

  /* Recolher nao faz sentido em gaveta: no celular ela abre inteira. */
  html.sidebar-recolhida .nav-rotulo,
  html.sidebar-recolhida .sidebar-grupo-detalhe,
  html.sidebar-recolhida .sidebar-vazio { display: revert; }

  html.sidebar-recolhida .sidebar-grupo {
    font-size: 0.7rem;
    margin: 1rem 0 0.35rem;
    padding: 0 0.75rem;
    border-top: 0;
  }

  html.sidebar-recolhida .sidebar .nav-link {
    justify-content: flex-start;
    padding: 0.55rem 0.75rem;
  }
}

@media (max-width: 575.98px) {
  .topbar-marca,
  .nome-usuario { display: none; }

  .topbar-contexto .form-select,
  .topbar-busca { width: auto; max-width: 42vw; flex: 0 1 auto; }

  /* Atalho de teclado nao existe em celular, e o espaco e do nome da empresa. */
  .topbar-busca-atalho { display: none; }

  .conteudo-interno { padding: 1.25rem 1rem 2.5rem; }
}

/* ------------------------------------------------------------------ impressao */

@media print {
  .topbar, .sidebar, .sidebar-fundo, .cabecalho-acoes { display: none !important; }
  .conteudo { margin-left: 0; padding-top: 0; }
}

/* ------------------------------------------------- grade de competencias */

.seletor-competencia {
  margin-bottom: 1.25rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.75rem;
  background-color: var(--bs-body-bg, #fff);
}

.seletor-ano {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.seletor-ano-atual {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

/* Empurra o atalho para a direita; no celular ele cai para a linha de baixo. */
.seletor-atalho { margin-left: auto; }

.grade-meses {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.grade-meses a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.4rem 0.25rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.4rem;
  text-decoration: none;
  color: inherit;
  line-height: 1.25;
}

.grade-meses a:hover { border-color: var(--bs-primary, #0d6efd); }

.mes-nome { font-size: 0.8rem; font-weight: 600; }

/* tabular-nums para os valores nao dancarem de largura entre os meses. */
.mes-valor {
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* As tres cores dos estados. Os nomes vem de EstadoDoMes.classeCss(), e nao de
   condicoes no template: estado novo sem cor aqui aparece sem pintura nenhuma,
   que na grade se confunde com "mes vazio". */
.mes-fechada {
  background-color: var(--bs-success-bg-subtle, #d1e7dd);
  border-color: var(--bs-success-border-subtle, #a3cfbb) !important;
}

.mes-aberta {
  background-color: var(--bs-warning-bg-subtle, #fff3cd);
  border-color: var(--bs-warning-border-subtle, #ffe69c) !important;
}

.mes-vazia {
  background-color: transparent;
  border-style: dashed;
  color: var(--bs-secondary-color, #6c757d);
}

/* O mes em foco: contorno proprio, e nao mudanca de fundo — o fundo ja carrega o
   estado, e sobrescreve-lo esconderia a informacao mais importante da grade. */
.mes-em-foco {
  outline: 2px solid var(--bs-primary, #0d6efd);
  outline-offset: 1px;
  font-weight: 700;
}

.grade-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  color: var(--bs-secondary-color, #6c757d);
}

.grade-legenda span::before {
  content: "";
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.3rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.2rem;
  vertical-align: -1px;
}

.legenda-fechada::before { background-color: var(--bs-success-bg-subtle, #d1e7dd); }
.legenda-aberta::before { background-color: var(--bs-warning-bg-subtle, #fff3cd); }
.legenda-vazia::before { border-style: dashed; }

/* No celular a grade vira 4 colunas x 3 linhas: doze colunas dariam quadradinhos
   de menos de 30px, pequenos demais para acertar com o dedo. */
@media (max-width: 767.98px) {
  .grade-meses { grid-template-columns: repeat(4, 1fr); }
  .seletor-atalho { margin-left: 0; }
}

/* Mes sem estado: so navega (painel da carteira). Nao herda cor de estado nenhum
   porque nao ha estado a comunicar — a cor pertence a linha da empresa, abaixo. */
.mes-neutro { background-color: transparent; }

/* O selo da situacao no painel reaproveita as cores da grade, de proposito: e a
   mesma informacao, e a contadora nao deveria traduzir de uma tela para a outra.
   Precisa da cor de texto propria porque, como badge, o padrao do Bootstrap e
   texto branco. */
.selo-estado {
  border: 1px solid var(--bs-border-color, #dee2e6);
  color: var(--bs-body-color, #212529);
  font-weight: 600;
}

/* As cores da transmissao, vindas de EstadoDaTransmissao.classeCss().

   Sao DIFERENTES das do estado do mes de proposito: as duas colunas ficam lado a
   lado, e pintar "fechada" e "transmitida" do mesmo verde faria a linha inteira
   parecer uma informacao so — que e exatamente o que elas nao sao. */
.transmissao-ok {
  background-color: var(--bs-primary-bg-subtle, #cfe2ff);
  border-color: var(--bs-primary-border-subtle, #9ec5fe) !important;
}

.transmissao-pendente {
  background-color: var(--bs-warning-bg-subtle, #fff3cd);
  border-color: var(--bs-warning-border-subtle, #ffe69c) !important;
}

/* A defasada e a unica que PARECE resolvida — ja foi transmitida, e o valor mudou
   depois. Vermelha, e nao um tom do azul de transmitida: quem bate o olho na coluna
   tem de parar nesta linha. */
.transmissao-defasada {
  background-color: var(--bs-danger-bg-subtle, #f8d7da);
  border-color: var(--bs-danger-border-subtle, #f1aeb5) !important;
}

.transmissao-nao-se-aplica { background-color: transparent; }

/* ------------------------------------------------ alertas fiscais do painel */

/* Uma frase por alerta, sob o nome da empresa. A barra a esquerda carrega a cor:
   um fundo colorido em cada linha com alerta deixaria a tabela inteira listrada e
   a cor pararia de significar alguma coisa. */
.alerta-fiscal {
  font-size: 0.78rem;
  line-height: 1.3;
  margin-top: 0.3rem;
  padding-left: 0.5rem;
  border-left: 3px solid transparent;
  max-width: 34rem;
}

.alerta-atencao {
  border-left-color: var(--bs-warning, #ffc107);
  color: var(--bs-body-color, #212529);
}

.alerta-urgente {
  border-left-color: var(--bs-danger, #dc3545);
  color: var(--bs-danger-text-emphasis, #58151c);
  font-weight: 600;
}

/* ------------------------------------------------ busca de tomador na nota */

/* A lista abre EMBAIXO do campo, e nao numa janela: escolher tomador acontece a
   cada nota lancada, e uma janela que abre e fecha dez vezes seguidas cansa. O
   CNAE, que se escolhe uma vez por empresa, continua no modal. */
.lista-de-tomadores {
  position: absolute;
  z-index: 1040;              /* acima do conteudo, abaixo da topbar */
  width: 100%;
  max-width: 40rem;
  max-height: 16rem;
  overflow-y: auto;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* O contexto de posicionamento da lista. Sem isto ela se ancora na pagina e
   escorrega para longe do campo ao rolar a tela. */
[data-campo-tomador] { position: relative; }

/* A lupa so existe com JavaScript, como a do CNAE: sem ele seria botao morto. */
[data-buscar-tomador] { display: none; }
html.com-js [data-buscar-tomador] { display: inline-block; }

/* ------------------------------------- paineis de lancamento no extrato */

/* Lancar nota, consolidado ou folha sem sair do extrato. O painel abre pelo
   :target — clicar em "Lancar nota" vai para #lancar-nota e o CSS o revela.

   Ser CSS, e nao JavaScript, e o que faz isto funcionar em tres situacoes que um
   toggle em JS teria de tratar uma a uma: sem JavaScript, depois do POST (o
   controller redireciona com a ancora, e o painel ja volta aberto) e no link
   colado de outra tela. O JavaScript so poe o foco no primeiro campo.

   Um :target por vez, que e o desejado: abrir a folha fecha a nota. */
.painel-lancamento { display: none; }
.painel-lancamento:target { display: block; }