/* ─────────────────────────────────────────────────────────────────────────
   Componentes: cartões, KPIs, botões, formulários, tabelas, avisos, upload.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Cartão ─────────────────────────────────────────────────────────────── */
.cartao {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--raio);
  padding: 18px;
  box-shadow: var(--sombra);
}
.cartao + .cartao { margin-top: 16px; }

.cartao-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.cartao-titulo { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
.cartao-desc { font-size: 13.5px; color: var(--ink-soft); margin-top: 2px; }

@media (min-width: 1000px) {
  .cartao { padding: 22px; }
}

/* ── Cartão de indicador ────────────────────────────────────────────────── */
.kpi {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--raio);
  padding: 16px;
  box-shadow: var(--sombra);
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.kpi-icone {
  width: 42px; height: 42px;
  border-radius: var(--raio-p);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--icone-azul-bg);
  color: var(--azul);
}
.kpi-icone svg { width: 21px; height: 21px; }
.kpi-icone.verde { background: var(--icone-verde-bg); color: var(--icone-verde); }
.kpi-icone.ambar { background: var(--icone-ambar-bg); color: var(--icone-ambar); }
.kpi-icone.roxo { background: var(--icone-roxo-bg); color: var(--icone-roxo); }

.kpi-dados { min-width: 0; flex: 1; }
.kpi-rotulo {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-faint);
  font-weight: 600;
}
.kpi-valor {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.03em;
  margin: 3px 0 1px;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  word-break: break-word;
}
.kpi-nota { font-size: 12px; color: var(--ink-faint); }

@media (max-width: 400px) {
  .kpi-valor { font-size: 18px; }
}

/* ── Botões ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 10px 17px;
  border-radius: var(--raio-p);
  border: 1px solid transparent;
  font-size: 14.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  background: var(--azul);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s;
}
.btn:hover:not(:disabled) { background: var(--azul-escuro); text-decoration: none; color: #fff; }
.btn:disabled { background: var(--rule-forte); cursor: not-allowed; }

.btn-secundario {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--rule-forte);
}
.btn-secundario:hover:not(:disabled) { background: var(--surface-alt); color: var(--ink); }

.btn-discreto {
  background: transparent;
  color: var(--azul);
  border-color: transparent;
  min-height: 34px;
  padding: 5px 9px;
  font-size: 13.5px;
}
.btn-discreto:hover:not(:disabled) { background: var(--azul-claro); color: var(--azul-escuro); }

.btn-largo { width: 100%; }
.btn svg { width: 16px; height: 16px; }

/* ── Formulários ────────────────────────────────────────────────────────── */
.campo { margin-bottom: 15px; }
.campo label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 6px;
}
.campo .dica { font-weight: 400; color: var(--ink-faint); font-size: 12.5px; }

/* Campo com ícone à esquerda */
.entrada-caixa { position: relative; display: flex; align-items: center; }
.entrada-caixa .icone {
  position: absolute;
  left: 13px;
  color: var(--ink-faint);
  display: flex;
  pointer-events: none;
}
.entrada-caixa .icone svg { width: 17px; height: 17px; }
.entrada-caixa .entrada { padding-left: 40px; }

.entrada-caixa .olho {
  position: absolute;
  right: 8px;
  background: transparent;
  border: 0;
  color: var(--ink-faint);
  cursor: pointer;
  padding: 7px;
  display: flex;
  border-radius: 5px;
}
.entrada-caixa .olho:hover { color: var(--ink-soft); background: var(--surface-alt); }
.entrada-caixa .olho svg { width: 17px; height: 17px; }
.entrada-caixa:has(.olho) .entrada { padding-right: 42px; }

.entrada {
  width: 100%;
  /* 16px evita o zoom automático do iOS ao focar */
  font-size: 16px;
  padding: 11px 13px;
  border: 1px solid var(--rule-forte);
  border-radius: var(--raio-p);
  font-family: inherit;
  background: var(--surface);
  color: var(--ink);
  min-height: 44px;
}
.entrada:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px var(--azul-claro);
}

/* Select desenhado por nós.

   Sem isto o Windows pinta o controle do seu jeito - fundo acinzentado e uma
   seta grossa - e ele destoa de todo o resto da interface. A seta vira uma
   imagem de fundo (SVG embutido, sem arquivo externo) e o padding à direita
   abre espaço para ela. */
select.entrada {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 17px 17px;
  cursor: pointer;
}
select.entrada:hover { border-color: var(--rule-forte); }
/* A seta acompanha o azul do foco */
select.entrada:focus {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.entrada::placeholder { color: var(--ink-faint); }
.entrada:disabled { background: var(--surface-alt); color: var(--ink-faint); }

@media (min-width: 1000px) {
  .entrada { font-size: 14.5px; }
}

/* ── Avisos ─────────────────────────────────────────────────────────────── */
.aviso {
  padding: 12px 14px;
  border-radius: var(--raio-p);
  font-size: 13.5px;
  border: 1px solid;
  margin-bottom: 15px;
}
.aviso:last-child { margin-bottom: 0; }
.aviso strong { font-weight: 600; }
.aviso.ok { background: var(--ok-bg); border-color: var(--ok-borda); color: var(--ok); }
.aviso.erro { background: var(--erro-bg); border-color: var(--erro-borda); color: var(--erro); }
.aviso.alerta { background: var(--aviso-bg); border-color: var(--aviso-borda); color: var(--aviso); }
.aviso.info { background: var(--info-bg); border-color: var(--info-borda); color: var(--info); }

/* ── Etiquetas ──────────────────────────────────────────────────────────── */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}
.etiqueta.ok { color: var(--ok); border-color: var(--ok-borda); background: var(--ok-bg); }
.etiqueta.alerta { color: var(--aviso); border-color: var(--aviso-borda); background: var(--aviso-bg); }
.etiqueta.erro { color: var(--erro); border-color: var(--erro-borda); background: var(--erro-bg); }
.etiqueta.neutra { color: var(--ink-soft); border-color: var(--rule-forte); background: var(--surface-alt); }

/* ── Tabela ─────────────────────────────────────────────────────────────── */
/* overflow-x: auto criaria um contexto de recorte que corta o menu de ações
   ao abrir para cima. A tabela já cabe (as colunas usam minmax/ellipsis), e
   no celular ela vira lista de cartões, então a rolagem lateral aqui não é
   mais necessária. */
.tabela-wrap { overflow: visible; }

table.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

/* table-layout: fixed só onde há <colgroup> definindo as larguras (a lista
   de empresas em Relatórios). Sem colgroup ele repartiria as colunas em
   partes iguais, e um nome longo ficaria espremido em 95px. */
table.tabela:has(> colgroup) { table-layout: fixed; }
/* Larguras das colunas da lista de empresas.

   Em porcentagem, não em pixels: com valores fixos a coluna do nome ficava
   com menos de 100px em telas de 1024px, ilegível. */
table.tabela col.c-nome { width: 34%; }
table.tabela col.c-cnpj { width: 16%; }
table.tabela col.c-regime { width: 15%; }
table.tabela col.c-cert { width: 16%; }
table.tabela col.c-venc { width: 13%; }
table.tabela col.c-acoes { width: 46px; }

/* Abaixo de 1200px o regime tributário sai: é sempre "Simples Nacional" e
   sua ausência não tira informação da linha. */
@media (max-width: 1200px) {
  table.tabela col.c-regime { width: 0; }
  table.tabela .col-regime { display: none; }
  table.tabela col.c-nome { width: 40%; }
  table.tabela col.c-cnpj { width: 20%; }
  table.tabela col.c-cert { width: 20%; }
  table.tabela col.c-venc { width: 16%; }
}

/* Conteúdo que não cabe é encurtado, não estica a coluna.

   O corte fica no conteúdo da célula, não na célula: com overflow no <td> o
   menu de ações (que vive dentro dela) seria recortado ao abrir. */
table.tabela td .linha-emp .nome,
table.tabela td .linha-emp .sub,
table.tabela td.texto {
  /* block é o que faz o corte funcionar: um <span> é inline por padrão, e
     elemento inline ignora overflow e largura - o texto vazava por cima da
     coluna vizinha em vez de ganhar reticências. */
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* O ellipsis precisa de uma largura de referência.
   min-width:0 sozinho não basta num flex: o item ainda cresce com o conteúdo.
   O que limita de fato é o pai ter overflow:hidden - aí o filho não tem para
   onde crescer e o corte acontece. O overflow fica na .linha-emp, não no
   <td>, porque o menu de ações vive na célula e seria recortado ao abrir. */
table.tabela td .linha-emp {
  min-width: 0;
  overflow: hidden;
}
table.tabela td .linha-emp .texto {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
table.tabela th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-faint);
  font-weight: 600;
  padding: 0 12px 9px 0;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
table.tabela td {
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
}
table.tabela tbody tr:last-child td { border-bottom: 0; }
table.tabela tbody tr:hover td { background: var(--surface-alt); }
table.tabela td.principal { color: var(--ink); font-weight: 600; }
table.tabela .direita, table.tabela th.direita { text-align: right; padding-right: 0; }

/* No celular a tabela vira lista de cartões */
@media (max-width: 760px) {
  table.tabela, table.tabela tbody, table.tabela tr, table.tabela td { display: block; width: 100%; }
  table.tabela thead { display: none; }
  table.tabela tr {
    border: 1px solid var(--rule);
    border-radius: var(--raio-p);
    padding: 12px 14px;
    margin-bottom: 10px;
    background: var(--surface);
  }
  table.tabela tr:last-child { margin-bottom: 0; }
  table.tabela td {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 5px 0;
    border: 0;
    text-align: right;
  }
  table.tabela td::before {
    content: attr(data-rotulo);
    font-size: 12px;
    color: var(--ink-faint);
    font-weight: 600;
    text-align: left;
    flex-shrink: 0;
  }
  table.tabela td.principal {
    border-bottom: 1px solid var(--rule);
    padding-bottom: 9px;
    margin-bottom: 5px;
  }
  table.tabela tbody tr:hover td { background: transparent; }
}

/* ── Lista (importações recentes, alertas) ──────────────────────────────── */
.lista { display: flex; flex-direction: column; }
.lista-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.lista-item:last-child { border-bottom: 0; }
.lista-item .icone-caixa {
  width: 34px; height: 34px;
  border-radius: var(--raio-p);
  background: var(--surface-alt);
  color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lista-item .icone-caixa svg { width: 17px; height: 17px; }
.lista-item .corpo { flex: 1; min-width: 0; }
.lista-item .titulo { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.lista-item .nota { font-size: 12.5px; color: var(--ink-faint); }
.lista-item .quando { font-size: 12px; color: var(--ink-faint); white-space: nowrap; }

@media (max-width: 500px) {
  .lista-item .quando { display: none; }
}

/* ── Área de upload ─────────────────────────────────────────────────────── */
.solta {
  border: 2px dashed var(--rule-forte);
  border-radius: var(--raio);
  padding: 30px 20px;
  text-align: center;
  cursor: pointer;
  background: var(--surface-alt);
  transition: border-color .15s, background .15s;
}
.solta:hover, .solta.ativo { border-color: var(--azul); background: var(--azul-claro); }
.solta.tem-arquivo { border-style: solid; border-color: var(--azul); background: var(--azul-claro); }
.solta .icone-nuvem {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--azul-claro);
  color: var(--azul);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
}
.solta.tem-arquivo .icone-nuvem { background: #fff; }
.solta .icone-nuvem svg { width: 22px; height: 22px; }
.solta .principal { font-weight: 600; font-size: 14.5px; }
.solta .secundario { font-size: 13px; color: var(--ink-soft); margin-top: 3px; }
input[type=file].escondido { display: none; }

/* ── Vazio e carregando ─────────────────────────────────────────────────── */
.vazio {
  text-align: center;
  padding: 36px 20px;
  color: var(--ink-faint);
  font-size: 14px;
}
.vazio .titulo { font-weight: 600; color: var(--ink-soft); margin-bottom: 3px; }

.girando {
  display: inline-block;
  width: 15px; height: 15px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ── Ações e opções ─────────────────────────────────────────────────────── */
.acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.acoes.fim { justify-content: flex-end; }

.opcao { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0 0; }
.opcao input[type=checkbox] {
  width: 17px; height: 17px; margin-top: 2px;
  flex-shrink: 0; accent-color: var(--azul);
}
.opcao label { font-size: 14px; cursor: pointer; font-weight: 500; }
.opcao .nota { display: block; font-size: 12.5px; color: var(--ink-soft); font-weight: 400; margin-top: 2px; }

/* Linha de "lembrar acesso" + link */
.linha-entre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* ── Seletor de período e filtros ───────────────────────────────────────── */
.periodo-caixa {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--surface);
  border: 1px solid var(--rule-forte);
  border-radius: var(--raio-p);
  padding: 8px 13px;
  min-height: 42px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--ink);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.periodo-caixa:hover { background: var(--surface-alt); }
.periodo-caixa svg { width: 16px; height: 16px; color: var(--ink-faint); flex-shrink: 0; }
.periodo-caixa .seta { margin-left: 2px; }

/* Painel flutuante de escolha do período */
.periodo-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--raio);
  box-shadow: var(--sombra-g);
  padding: 16px;
  min-width: 250px;
}
.periodo-ancora { position: relative; }

/* ── Abas (Gráfico / Tabela) ────────────────────────────────────────────── */
.abas {
  display: inline-flex;
  background: var(--surface-alt);
  border: 1px solid var(--rule);
  border-radius: var(--raio-p);
  padding: 3px;
  gap: 2px;
}
.aba {
  border: 0;
  background: transparent;
  padding: 6px 14px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: var(--ink-soft);
  cursor: pointer;
}
.aba.ativa { background: var(--surface); color: var(--azul); box-shadow: var(--sombra); }

/* ── Nota de rodapé de cartão ───────────────────────────────────────────── */
.cartao-nota {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 9px 12px;
  background: var(--surface-alt);
  border-radius: var(--raio-p);
  font-size: 12.5px;
  color: var(--ink-soft);
}
.cartao-nota svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--ink-faint); }

/* ── Ranking (empresas com maior faturamento) ───────────────────────────── */

/* O cartão fica numa coluna estreita da grade, e razão social de empresa é
   longa. Uma linha só, cortada com reticências: o nome inteiro fica no
   title, e a tabela não vira um bloco de cinco linhas por empresa.

   O corte precisa de uma largura de referência: sem max-width a célula
   cresceria até caber o texto e empurraria as outras colunas para fora do
   cartão. Com table-layout auto, max-width numa célula funciona como dica
   de largura, e é o bastante para o ellipsis entrar em ação. */
table.tabela td.principal:has(> .ranking-nome) { max-width: 0; width: 100%; }
/* Colunas de número ficam no seu tamanho natural; a do nome ocupa o resto */
table.tabela:has(.ranking-nome) th.direita,
table.tabela:has(.ranking-nome) td.direita {
  width: 1%;
  white-space: nowrap;
  padding-left: 14px;   /* separa o valor do nome e da porcentagem */
}

.ranking-nome {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-pos {
  width: 22px;
  color: var(--ink-faint);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── Rosca de status ────────────────────────────────────────────────────── */
.rosca-area {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}
.rosca { position: relative; width: 158px; height: 158px; flex-shrink: 0; }
.rosca-centro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.rosca-centro .rotulo { font-size: 11px; color: var(--ink-faint); }
.rosca-centro .valor { font-size: 27px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.rosca-centro .nota { font-size: 11px; color: var(--ink-faint); }

.legenda { display: flex; flex-direction: column; gap: 10px; min-width: 150px; }
.legenda-item { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.legenda-cor { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.legenda-texto { flex: 1; color: var(--ink-soft); }
.legenda-valor { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Alertas ────────────────────────────────────────────────────────────── */
.alerta-item {
  display: flex;
  gap: 11px;
  padding: 11px;
  border-radius: var(--raio-p);
  border: 1px solid var(--rule);
  background: var(--surface-alt);
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: inherit;
  margin-bottom: 9px;
}
.alerta-item:last-child { margin-bottom: 0; }
.alerta-item:hover { border-color: var(--rule-forte); }
.alerta-item .icone { flex-shrink: 0; display: flex; }

/* min-width: 0 e o que impede o texto de estourar o cartao.
 *
 * Num flex o filho tem minimo implicito `auto`, ou seja, a largura do
 * conteudo. Um alerta com muitas empresas listadas na nota empurrava o cartao
 * e criava rolagem lateral no celular. */
.alerta-item .corpo {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.alerta-item .corpo .titulo,
.alerta-item .corpo .nota {
  overflow-wrap: anywhere;
}
.alerta-item .icone svg { width: 17px; height: 17px; }
.alerta-item.alerta .icone { color: var(--aviso); }
.alerta-item.erro .icone { color: var(--erro); }
.alerta-item.info .icone { color: var(--info); }
.alerta-item .titulo { font-size: 13px; font-weight: 600; color: var(--ink); }
.alerta-item .nota { font-size: 12px; color: var(--ink-faint); margin-top: 1px; }

/* ── Acesso rápido ──────────────────────────────────────────────────────── */
.atalhos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.atalho {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--rule);
  border-radius: var(--raio-p);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  width: 100%;
}
.atalho:hover { border-color: var(--azul); background: var(--azul-claro); }
.atalho .icone {
  width: 34px; height: 34px;
  border-radius: var(--raio-p);
  background: var(--azul-claro);
  color: var(--azul);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.atalho:hover .icone { background: var(--surface); }
.atalho .icone svg { width: 17px; height: 17px; }
.atalho .corpo { flex: 1; min-width: 0; }
/* Título e nota são <span>: sem block ficariam na mesma linha, coladas */
.atalho .titulo {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--azul);
  line-height: 1.3;
}
.atalho .nota {
  display: block;
  font-size: 11.5px;
  color: var(--ink-faint);
  line-height: 1.35;
  margin-top: 1px;
}
.atalho .seta { color: var(--ink-faint); flex-shrink: 0; }
.atalho .seta svg { width: 15px; height: 15px; }

@media (max-width: 400px) {
  .atalhos { grid-template-columns: 1fr; }
}

/* Atalho largo (celular, antes da barra de navegação) */
.atalho-largo {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px;
  border-radius: var(--raio);
  background: var(--azul-claro);
  border: 1px solid var(--azul-borda);
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: inherit;
  margin-top: 16px;
}
.atalho-largo .icone {
  width: 44px; height: 44px;
  border-radius: var(--raio-p);
  background: var(--surface);
  color: var(--azul);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.atalho-largo .icone svg { width: 22px; height: 22px; }
.atalho-largo .titulo { font-size: 16px; font-weight: 600; color: var(--azul); }
.atalho-largo .nota { font-size: 13px; color: var(--ink-soft); }
.atalho-largo .seta { margin-left: auto; color: var(--azul); }

/* ── Rodapé da aplicação ────────────────────────────────────────────────── */
.rodape-app {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  color: var(--ink-faint);
}

/* Sino de notificações (celular) */
.sino {
  position: relative;
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  border-radius: var(--raio-p);
}
.sino:hover { background: var(--surface-alt); }
.sino svg { width: 20px; height: 20px; }
.sino .contador {
  position: absolute;
  top: 3px; right: 3px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--erro);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ── Modal ──────────────────────────────────────────────────────────────── */
.modal-fundo {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

.modal {
  background: var(--surface);
  border-radius: var(--raio) var(--raio) 0 0;
  width: 100%;
  max-width: 640px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sombra-g);
}

.modal-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--rule);
}
.modal-topo .titulo { font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; }
.modal-topo .nota { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }

.modal-fechar {
  background: transparent;
  border: 0;
  color: var(--ink-faint);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  flex-shrink: 0;
}
.modal-fechar:hover { background: var(--surface-alt); color: var(--ink); }
.modal-fechar svg { width: 18px; height: 18px; }

.modal-corpo { padding: 16px 20px 20px; overflow-y: auto; flex: 1; }

/* No PC o modal fica centralizado; no celular sobe de baixo, como uma gaveta */
@media (min-width: 700px) {
  .modal-fundo { align-items: center; padding: 24px; }
  .modal { border-radius: var(--raio); max-height: 82vh; }
}

/* ── Linha de empresa dentro do modal ───────────────────────────────────── */
.emp-item {
  border: 1px solid var(--rule);
  border-radius: var(--raio-p);
  margin-bottom: 10px;
  overflow: hidden;
}
.emp-item:last-child { margin-bottom: 0; }

.emp-cabecalho {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
.emp-cabecalho:hover { background: var(--surface-alt); }
.emp-cabecalho .corpo { flex: 1; min-width: 0; }
.emp-cabecalho .nome {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.emp-cabecalho .doc { font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.emp-cabecalho .seta { color: var(--ink-faint); flex-shrink: 0; transition: transform .15s; }
.emp-cabecalho .seta svg { width: 16px; height: 16px; }
.emp-cabecalho.aberto .seta { transform: rotate(90deg); }

.emp-acoes {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.emp-detalhe {
  padding: 4px 14px 14px;
  border-top: 1px solid var(--rule);
  background: var(--surface-alt);
}

/* Grade dos 12 meses: presente x ausente */
.meses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 6px;
  margin-top: 12px;
}
.mes {
  padding: 7px 8px;
  border-radius: 5px;
  font-size: 11.5px;
  text-align: center;
  border: 1px solid;
  font-variant-numeric: tabular-nums;
}
.mes.tem { background: var(--ok-bg); border-color: var(--ok-borda); color: var(--ok); }
.mes.falta { background: var(--erro-bg); border-color: var(--erro-borda); color: var(--erro); }
.mes .valor { display: block; font-weight: 600; margin-top: 1px; }

.legenda-meses {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 12px;
  flex-wrap: wrap;
}

/* ─────────────────────────────────────────────────────────────────────────
   Números não quebram linha

   Um valor como "R$ 22.148.391,25" partido em duas linhas fica ilegível e
   estoura a altura do cartão. Em vez de quebrar, o texto encolhe até caber
   (a versão abreviada já é usada onde o espaço é curto).
   ───────────────────────────────────────────────────────────────────────── */
.kpi-valor {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
  /* Acompanha a largura do cartão em vez de estourar */
  font-size: clamp(15px, 5.2vw, 22px);
}

@media (min-width: 480px) {
  .kpi-valor { font-size: clamp(17px, 2.6vw, 22px); }
}
@media (min-width: 1000px) {
  .kpi-valor { font-size: 22px; }
}

.kpi-rotulo {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Valores em tabela também não quebram */
table.tabela td.num, table.tabela .direita { white-space: nowrap; }

/* No celular a tabela vira cartão: o rótulo não pode espremer o valor */
@media (max-width: 760px) {
  table.tabela td::before { max-width: 45%; }
  table.tabela td { align-items: baseline; }
  table.tabela td.principal { white-space: normal; }
}

/* Destaque breve ao chegar num cartão vindo de um atalho (sino, alerta) */
.cartao.destacado {
  animation: piscar-cartao 1.6s ease;
}
@keyframes piscar-cartao {
  0%, 100% { box-shadow: var(--sombra); }
  15%, 60% { box-shadow: 0 0 0 3px var(--azul-claro), 0 0 0 4px var(--azul); }
}

/* ─────────────────────────────────────────────────────────────────────────
   Tela de Relatórios
   ───────────────────────────────────────────────────────────────────────── */

/* KPIs de certificado: ícone circular grande, como na referência */
.kpi-cert {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--raio);
  padding: 16px;
  box-shadow: var(--sombra);
  display: flex;
  align-items: center;
  gap: 14px;
}
.kpi-cert .circulo {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.kpi-cert .circulo svg { width: 22px; height: 22px; }
.kpi-cert .circulo.verde { background: var(--ok-bg); color: var(--ok); }
.kpi-cert .circulo.ambar { background: var(--aviso-bg); color: var(--aviso); }
.kpi-cert .circulo.vermelho { background: var(--erro-bg); color: var(--erro); }
.kpi-cert .corpo { min-width: 0; }
.kpi-cert .rotulo { font-size: 13px; color: var(--ink-soft); }
.kpi-cert .valor {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.kpi-cert .nota { font-size: 12px; color: var(--ink-faint); }

.grade-cert {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

/* No celular: número em cima, rótulo embaixo (como na referência) */
@media (max-width: 700px) {
  .grade-cert { gap: 8px; }
  .kpi-cert { flex-direction: column; align-items: flex-start; gap: 8px; padding: 13px; }
  .kpi-cert .circulo { width: 38px; height: 38px; }
  .kpi-cert .circulo svg { width: 19px; height: 19px; }
  .kpi-cert .valor { font-size: 22px; }
  .kpi-cert .rotulo { font-size: 12.5px; }
  .kpi-cert .nota { font-size: 11px; }
}

/* Barra de filtros */
.filtros {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
.filtros .busca { position: relative; }
.filtros .busca .lupa {
  position: absolute;
  left: 13px; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-faint);
  pointer-events: none;
  display: flex;
}
.filtros .busca .lupa svg { width: 17px; height: 17px; }
.filtros .busca .entrada { padding-left: 40px; }
.filtros .linha { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.filtros label {
  display: block;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-bottom: 5px;
}
.filtros select.entrada { min-height: 44px; }

@media (min-width: 1000px) {
  .filtros {
    grid-template-columns: minmax(240px, 1.4fr) auto;
    align-items: end;
  }
  .filtros .linha { grid-template-columns: repeat(3, minmax(140px, 1fr)) auto; }
}

/* Avatar de iniciais da empresa */
.avatar-emp {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--azul-claro);
  color: var(--azul);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: .02em;
}

/* Situação do certificado: bolinha + texto */
.situacao {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  white-space: nowrap;
}
.situacao .ponto {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.situacao.ok .ponto { background: var(--ok); }
.situacao.vencendo .ponto { background: var(--aviso); }
.situacao.vencido .ponto { background: var(--erro); }
.situacao.ausente .ponto { background: var(--rule-forte); }
.situacao.ok { color: var(--ink-soft); }
.situacao.vencendo { color: var(--ink-soft); }
.situacao.vencido { color: var(--ink-soft); }
.situacao.ausente { color: var(--ink-faint); }

/* Menu de ações (três pontinhos) */
.acoes-ancora { position: relative; display: inline-block; }

.btn-pontos {
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--raio-p);
  color: var(--ink-faint);
  cursor: pointer;
  padding: 0;
}
.btn-pontos:hover { background: var(--surface-alt); color: var(--ink); }
.btn-pontos.aberto { background: var(--azul-claro); color: var(--azul); }
.btn-pontos svg { width: 18px; height: 18px; }

/* Abre sempre para cima, em qualquer largura.

   Aberto para baixo ele quebrava: nas últimas linhas da lista sobrava pouco
   espaço até o rodapé, e o menu era espremido ou saía da área visível. Como
   os três pontos ficam à direita, para cima há sempre espaço livre. */
.menu-acoes {
  position: absolute;
  right: 0;
  top: auto;
  bottom: calc(100% + 6px);
  z-index: 40;
  min-width: 244px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--raio);
  box-shadow: var(--sombra-g);
  padding: 6px;
}

.menu-acoes button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 11px;
  border: 0;
  background: transparent;
  border-radius: var(--raio-p);
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.menu-acoes button:hover:not(:disabled) { background: var(--surface-alt); }
.menu-acoes button:disabled { color: var(--ink-faint); cursor: not-allowed; }
.menu-acoes button svg { width: 17px; height: 17px; color: var(--ink-soft); flex-shrink: 0; }
.menu-acoes button:disabled svg { color: var(--rule-forte); }
.menu-acoes .motivo {
  display: block;
  font-size: 11.5px;
  color: var(--ink-faint);
  margin-top: 1px;
}

/* Linha da tabela de relatórios */
.linha-emp .nome { font-size: 14px; font-weight: 600; color: var(--ink); }
.linha-emp .sub { font-size: 12.5px; color: var(--ink-faint); }

/* No celular cada empresa vira um bloco com avatar à esquerda */
.emp-cartao {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.emp-cartao:last-child { border-bottom: 0; }
.emp-cartao .dados { flex: 1; min-width: 0; }
.emp-cartao .nome {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.emp-cartao .cnpj,
.emp-cartao .regime {
  font-size: 13px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.emp-cartao .lado {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.emp-cartao .venc { font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; }

/* Paginação */
.paginacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 16px;
  margin-top: 4px;
  border-top: 1px solid var(--rule);
}
.paginacao .info { font-size: 13px; color: var(--ink-soft); }
.paginacao .paginas { display: flex; gap: 6px; align-items: center; }
.pagina-btn {
  min-width: 36px; height: 36px;
  padding: 0 8px;
  border: 1px solid var(--rule-forte);
  background: var(--surface);
  border-radius: var(--raio-p);
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pagina-btn:hover:not(:disabled):not(.ativa) { background: var(--surface-alt); }
.pagina-btn.ativa { border-color: var(--azul); color: var(--azul); font-weight: 600; }
.pagina-btn:disabled { opacity: .45; cursor: not-allowed; }
.pagina-btn svg { width: 15px; height: 15px; }
.pagina-reticencias { color: var(--ink-faint); padding: 0 2px; }

@media (max-width: 600px) {
  .paginacao { justify-content: center; }
  .paginacao .info { width: 100%; text-align: center; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Correções de responsividade em telas estreitas

   Em Android com tela de 360px, três coisas estouravam a largura: o menu de
   ações (min-width fixo), o cartão de empresa (quatro colunas lado a lado) e
   a falta de trava de rolagem horizontal no corpo da página.
   ───────────────────────────────────────────────────────────────────────── */

/* Trava de segurança contra rolagem lateral.

   Vale como rede: as causas foram corrigidas na origem (larguras fixas,
   100vw e o menu de ações), mas um elemento novo que estoure não deve
   quebrar a navegação no celular. */
html, body { max-width: 100%; overflow-x: hidden; }
.conteudo { max-width: 100%; }

@media (max-width: 760px) {
  /* O menu se ancora pelas bordas da janela, não pelo botão: assim o rótulo
     mais longo ("Download Ass. pelo Contador") cabe sem cortar. */
  .menu-acoes {
    position: fixed;
    left: 12px;
    right: 12px;
    top: auto;
    min-width: 0;
    width: auto;
    max-width: none;
  }
  .menu-acoes button {
    font-size: 14px;
    padding: 13px 12px;
    align-items: flex-start;
  }
  .menu-acoes button > span {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* O cartão da empresa vira duas linhas: identificação em cima, situação e
     ações embaixo. Assim nada fica espremido. */
  .emp-cartao {
    flex-wrap: wrap;
    row-gap: 8px;
    position: relative;
    padding-right: 42px;   /* espaço do botão de ações */
  }
  .emp-cartao .dados { flex: 1 1 100%; order: 1; }
  .emp-cartao .avatar-emp { order: 0; }
  .emp-cartao .lado {
    order: 2;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-left: 52px;     /* alinha sob o texto, após o avatar */
    flex-wrap: wrap;
  }
  /* O botão de ações fica ancorado no canto, fora do fluxo */
  .emp-cartao .acoes-ancora {
    position: absolute;
    top: 12px;
    right: 0;
  }

  /* Avatar um pouco menor para sobrar largura ao nome */
  .emp-cartao .avatar-emp { width: 36px; height: 36px; font-size: 12px; }
  .emp-cartao .nome { font-size: 14px; }
  .emp-cartao .cnpj, .emp-cartao .regime { font-size: 12.5px; }
}

/* Telas bem estreitas (360px e menos) */
@media (max-width: 380px) {
  .conteudo { padding-left: 12px; padding-right: 12px; }
  .cartao { padding: 14px; }
  .emp-cartao .lado { margin-left: 0; }
  /* KPIs de certificado empilham em duas colunas */
  .grade-cert { grid-template-columns: 1fr 1fr; }
  .grade-cert .kpi-cert:last-child { grid-column: 1 / -1; }
}

/* A tabela de relatórios no PC: nomes longos não podem esticar a página */
table.tabela td .linha-emp { min-width: 0; }
table.tabela td .linha-emp .nome,
table.tabela td .linha-emp .sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 30ch;
}

/* Modal e seletor de período: dentro da janela e acima da área de gesto */
@media (max-width: 760px) {
  .modal {
    max-height: calc(100dvh - 24px - env(safe-area-inset-bottom, 0px));
    /* largura vem das margens do pai, não de 100vw (que conta a rolagem) */
    max-width: none;
    width: auto;
    margin-left: 12px;
    margin-right: 12px;
  }
  .modal-corpo {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
  }
  /* O popup de período tinha largura mínima maior que a folga lateral */
  .periodo-pop {
    min-width: 0;
    width: auto;
    max-width: 320px;
    right: 0;
    left: auto;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Submenu "Mais" (celular)

   Sobe de baixo, logo acima da barra de navegação, com as seções que não
   couberam nos três lugares fixos.
   ───────────────────────────────────────────────────────────────────────── */
.mais-fundo {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .38);
  z-index: 29;
}

.mais-folha {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--barra-altura) + env(safe-area-inset-bottom, 0px));
  z-index: 31;
  background: var(--surface);
  border-top: 1px solid var(--rule);
  border-radius: var(--raio) var(--raio) 0 0;
  box-shadow: var(--sombra-g);
  padding: 8px 10px 12px;
  max-height: 60vh;
  overflow-y: auto;
}

/* Puxador, para o painel se ler como gaveta */
.mais-alca {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--rule-forte);
  margin: 2px auto 10px;
}

.mais-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 10px;
  border: 0;
  background: transparent;
  border-radius: var(--raio-p);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: var(--ink);
}
.mais-item:active { background: var(--surface-alt); }
.mais-item.ativo { background: var(--azul-claro); }
.mais-item.ativo .nome { color: var(--azul); font-weight: 600; }

.mais-icone {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: var(--raio-p);
  background: var(--surface-alt);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mais-item.ativo .mais-icone { background: var(--azul); color: #fff; }
.mais-icone svg { width: 19px; height: 19px; }

.mais-texto { min-width: 0; }
.mais-texto .nome {
  display: block;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.3;
}
.mais-texto .desc {
  display: block;
  font-size: 12.5px;
  color: var(--ink-faint);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* No PC existe o menu lateral: nada disso aparece */
@media (min-width: 1000px) {
  .mais-folha, .mais-fundo { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Registro de documentos enviados

   Contadores clicáveis no topo, filtro por tipo e uma linha por arquivo que
   abre com o detalhe. O que importa aqui é o motivo do descarte: sem ele um
   envio de 40 arquivos termina sem explicação.
   ───────────────────────────────────────────────────────────────────────── */
.grade-registro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}
@media (min-width: 720px) {
  .grade-registro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.reg-kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 8px;
  border: 1.5px solid var(--rule);
  border-radius: var(--raio-p);
  background: var(--surface);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .12s, background .12s;
}
.reg-kpi:hover { border-color: var(--rule-forte); }
.reg-kpi .n { font-size: 20px; font-weight: 700; line-height: 1.1; }
.reg-kpi .r { font-size: 12px; color: var(--ink-faint); }

/* Cada contador leva a cor da sua situação */
.reg-kpi.ok .n { color: var(--ok); }
.reg-kpi.aviso .n { color: var(--aviso); }
.reg-kpi.erro .n { color: var(--erro); }

.reg-kpi.ativo { border-color: var(--azul); background: var(--azul-claro); }
.reg-kpi.ok.ativo { border-color: var(--ok); background: var(--ok-bg); }
.reg-kpi.aviso.ativo { border-color: var(--aviso); background: var(--aviso-bg); }
.reg-kpi.erro.ativo { border-color: var(--erro); background: var(--erro-bg); }

/* ── Filtro por tipo ── */
.reg-tipos {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.reg-tipos .rotulo { font-size: 12.5px; color: var(--ink-faint); }
.pilula {
  padding: 5px 13px;
  border: 1px solid var(--rule-forte);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}
.pilula:hover { border-color: var(--azul); color: var(--azul); }
.pilula.ativa {
  background: var(--azul-claro);
  border-color: var(--azul);
  color: var(--azul);
  font-weight: 600;
}

/* ── Lista ── */
.reg-lista { display: flex; flex-direction: column; gap: 8px; }

.reg-item {
  border: 1px solid var(--rule);
  border-radius: var(--raio-p);
  background: var(--surface);
  overflow: hidden;
}
/* Uma faixa na lateral resume a situação sem depender de ler a etiqueta */
.reg-item.importado { border-left: 3px solid var(--ok); }
.reg-item.descartado { border-left: 3px solid var(--aviso); }
.reg-item.invalido,
.reg-item.erro { border-left: 3px solid var(--erro); }

.reg-cabeca {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 13px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.reg-cabeca:hover { background: var(--surface-alt); }

.reg-cabeca .seta {
  color: var(--ink-faint);
  display: flex;
  flex-shrink: 0;
  transition: transform .15s;
}
.reg-cabeca .seta svg { width: 16px; height: 16px; }
.reg-cabeca .seta.girada { transform: rotate(90deg); }

.reg-corpo { flex: 1; min-width: 0; }
.reg-corpo .fonte {
  display: block;
  font-size: 12px;
  color: var(--azul);
  font-weight: 500;
}
.reg-corpo .arquivo {
  display: block;
  font-size: 13px;
  color: var(--ink);
  /* Nome de arquivo é longo e não deve empurrar a etiqueta para fora */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Detalhe ── */
.reg-detalhe {
  padding: 4px 13px 13px 39px;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 7px;
}
.reg-detalhe .par {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 10px;
  font-size: 13px;
  padding-top: 7px;
}
.reg-detalhe .rot { color: var(--ink-faint); }
.reg-detalhe .val { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.reg-detalhe .val.tecnico {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12px;
  color: var(--ink-soft);
}

@media (max-width: 620px) {
  .reg-detalhe { padding-left: 13px; }
  .reg-detalhe .par { grid-template-columns: 1fr; gap: 1px; }
  .reg-cabeca .etiqueta { display: none; }
  /* Sem a etiqueta, a faixa lateral e a cor do texto informam a situação */
  .reg-item.descartado .reg-corpo .arquivo { color: var(--aviso); }
  .reg-item.invalido .reg-corpo .arquivo,
  .reg-item.erro .reg-corpo .arquivo { color: var(--erro); }
}

/* Marca do recorte vindo do menu lateral: diz qual filtro está ativo e
   serve de botão para removê-lo. */
.marca-filtro {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 3px 8px 3px 10px;
  border: 1px solid var(--azul-borda);
  border-radius: 999px;
  background: var(--azul-claro);
  color: var(--azul);
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  vertical-align: middle;
}
.marca-filtro:hover { background: var(--azul-borda); }
.marca-filtro svg { width: 13px; height: 13px; }

/* ─────────────────────────────────────────────────────────────────────────
   Entrada dos gráficos

   As barras sobem da base e a rosca é traçada, em vez de aparecerem prontas.
   Tudo em CSS: o SVG é montado uma vez e o navegador anima sozinho, sem
   recalcular a cada quadro.
   ───────────────────────────────────────────────────────────────────────── */
@keyframes barra-sobe {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

.barra-anim {
  animation: barra-sobe .55s cubic-bezier(.22, .68, .36, 1) backwards;
}

/* O valor só aparece depois que a barra chegou ao topo */
@keyframes valor-surge {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

.barra-valor {
  animation: valor-surge .3s ease-out backwards;
}

/* A rosca parte com o traço recolhido e o desenrola até a posição final.
   --traco e --parado vêm do JS, que conhece o tamanho de cada fatia. */
@keyframes fatia-tracada {
  from { stroke-dashoffset: calc(var(--parado) + var(--traco) * 1px); }
  to   { stroke-dashoffset: var(--parado); }
}

.fatia-anim {
  animation: fatia-tracada cubic-bezier(.3, .7, .4, 1) backwards;
}

/* Movimento é decoração: quem pediu para reduzi-lo recebe o gráfico pronto */
@media (prefers-reduced-motion: reduce) {
  .barra-anim, .barra-valor, .fatia-anim { animation: none; }
}

/* Campo com valor inválido: a borda avisa antes de tentar salvar. */
.entrada.com-erro {
  border-color: var(--erro);
  background: var(--erro-bg);
}
.entrada.com-erro:focus {
  border-color: var(--erro);
  box-shadow: 0 0 0 3px var(--erro-borda);
}
.aviso-campo {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--erro);
}

/* ─────────────────────────────────────────────────────────────────────────
   Tela de Empresas
   ───────────────────────────────────────────────────────────────────────── */
.empresas-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 4px;
  padding-bottom: 2px;
}

/* Abas sublinhadas, como na referência: a linha ativa marca a seleção sem
   precisar de fundo colorido. */
.abas-linha {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--rule);
  flex: 1;
  min-width: 0;
}

.aba-linha {
  padding: 9px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  margin-bottom: -1px;   /* cobre a borda do container */
  white-space: nowrap;
}
.aba-linha:hover { color: var(--ink); }
.aba-linha.ativa {
  color: var(--azul);
  border-bottom-color: var(--azul);
  font-weight: 600;
}

.empresas-controles {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.por-pagina {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-faint);
  white-space: nowrap;
}
.por-pagina select.entrada {
  min-height: 38px;
  width: auto;
  min-width: 74px;
  font-size: 14px;
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Cabeçalho que ordena: o botão ocupa a célula inteira para a área de clique
   ser a coluna toda, não só o texto. */
.th-ordena {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.th-ordena:hover { color: var(--azul); }
.th-ordena .seta { color: var(--azul); font-size: 11px; }

/* Avatar colorido pelo nome: ajuda a reconhecer a empresa na varredura
   visual da lista, sem depender de ler o texto. */
.avatar-emp.azul { background: var(--icone-azul-bg); color: var(--azul); }
.avatar-emp.verde { background: var(--icone-verde-bg); color: var(--icone-verde); }
.avatar-emp.ambar { background: var(--icone-ambar-bg); color: var(--icone-ambar); }
.avatar-emp.roxo { background: var(--icone-roxo-bg); color: var(--icone-roxo); }
.avatar-emp.rosa { background: var(--icone-rosa-bg); color: var(--icone-rosa); }

/* Nome + subtítulo na mesma célula */
table.tabela .linha-emp {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
table.tabela .linha-emp .texto { min-width: 0; }
table.tabela .linha-emp .sub {
  display: block;
  font-size: 12.5px;
  color: var(--ink-faint);
  font-weight: 400;
}

.aguardando {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--aviso);
  font-size: 13px;
}
.aguardando svg { width: 15px; height: 15px; flex-shrink: 0; }

.tracinho { color: var(--ink-faint); }

/* Larguras da tabela de empresas.

   O valor é alinhado à direita e o status logo em seguida: sem folga entre
   eles os dois se encostam ("R$ 182 mil Com dados"). */
table.tabela col.c-import { width: 17%; }
table.tabela col.c-fat { width: 15%; }
table.tabela col.c-status { width: 13%; }
table.tabela td[data-rotulo="Faturamento 12 meses"] { padding-right: 18px; }

@media (max-width: 1200px) {
  /* O regime é sempre Simples Nacional: some antes das colunas informativas */
  table.tabela col.c-regime { width: 0; }
}

/* Cartão do celular: valor e situação empilhados à direita */
.emp-cartao .valor-fat {
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.emp-cartao .regime { margin-top: 3px; }

@media (max-width: 760px) {
  .empresas-topo {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }
  /* As abas rolam de lado em vez de empilhar: empilhadas ocupavam três
     linhas e empurravam a lista para baixo da dobra. */
  .abas-linha {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .abas-linha::-webkit-scrollbar { display: none; }
  .aba-linha { padding: 9px 12px; font-size: 13.5px; }

  .empresas-controles { justify-content: space-between; }
  .por-pagina span { display: none; }   /* o select se explica sozinho */
}

/* Em telas estreitas o KPI de faturamento não cabe por extenso; o valor curto
   já é o que a tela mostra, e o title guarda o número completo. */
@media (max-width: 440px) {
  .kpi-valor { font-size: 17px; }
  .kpi-rotulo { font-size: 10px; }
}

/* Botão de tema: claro -> escuro -> automático */
.btn-tema {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex-shrink: 0;
  border: 0;
  border-radius: var(--raio-p);
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
}
.btn-tema svg { width: 17px; height: 17px; }

/* No menu escuro o botão segue a cor dos outros controles de lá */
.menu-usuario .btn-tema { color: var(--escuro-txt); }
.menu-usuario .btn-tema:hover { color: #fff; background: rgba(255,255,255,.08); }

/* No topo do celular ele fica sobre fundo claro */
.topo-mobile .btn-tema {
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  width: 38px; height: 38px;
}
.topo-mobile .btn-tema:hover { background: var(--surface-alt); }

/* ─────────────────────────────────────────────────────────────────────────
   Ícone flutuando na zona de upload

   Movimento pequeno e lento: a área é grande e vazia, e o ícone subindo de
   leve indica que ali se solta o arquivo, sem virar distração.
   ───────────────────────────────────────────────────────────────────────── */
@keyframes flutuar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

.icone-nuvem.flutua {
  animation: flutuar 3s ease-in-out infinite;
}

/* Ao arrastar um arquivo por cima, o movimento acelera e sobe mais: dá o
   retorno de que a zona está pronta para receber. */
.solta.ativo .icone-nuvem.flutua {
  animation-duration: 1.1s;
}

/* Com o arquivo já escolhido não há mais o que indicar */
.solta.tem-arquivo .icone-nuvem.flutua {
  animation: none;
}

/* O ícone de certificado vem de um traçado 512x512; a caixa é a mesma dos
   outros, então só o conteúdo do SVG muda de escala. */
.icone-nuvem svg[viewBox="0 0 512 512"] {
  width: 26px;
  height: 26px;
}

@media (prefers-reduced-motion: reduce) {
  .icone-nuvem.flutua { animation: none; }
}

/* Ações do topo da página: tema e seletor de período lado a lado */
.acoes-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Fora do menu escuro, o botão de tema segue o esquema da página */
.acoes-topo .btn-tema {
  width: 40px; height: 40px;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink-soft);
}
.acoes-topo .btn-tema:hover {
  border-color: var(--azul);
  color: var(--azul);
  background: var(--azul-claro);
}

/* ─────────────────────────────────────────────────────────────────────────
   Modal do faturamento por mês

   Abre sobre a lista em vez de trocar de tela: quem confere a carteira quer
   espiar uma empresa e voltar ao ponto onde estava, com o filtro e a página
   preservados.
   ───────────────────────────────────────────────────────────────────────── */
.modal.modal-largo { max-width: 720px; }

.modal-titulo-area { min-width: 0; }
.modal-titulo {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  /* Razão social é longa: corta em vez de empurrar o botão de fechar */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modal-sub {
  font-size: 13px;
  color: var(--ink-faint);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.modal-rodape {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--rule);
}

/* Resumo do período */
.det-resumo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.det-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 13px;
  border: 1px solid var(--rule);
  border-radius: var(--raio-p);
  background: var(--surface-alt);
}
.det-kpi .rot { font-size: 11.5px; color: var(--ink-faint); }
.det-kpi .val {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Uma linha por mês, com barra proporcional ao maior do período */
.det-meses { display: flex; flex-direction: column; }

.det-mes {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) 106px 52px;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
}
.det-mes:last-child { border-bottom: 0; }

/* "rotulo", nao "mes": .mes ja e a pastilha de competencia do painel de
   pendencias, com borda e fundo proprios. */
.det-mes .rotulo {
  font-size: 12.5px;
  color: var(--ink-soft);
  text-transform: capitalize;
}

.det-mes .trilho {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-alt);
  overflow: hidden;
}
/* "preenche", e nao "barra": .barra e a barra de navegacao do celular, que e
   position:fixed e cobria a tela inteira quando o nome colidia. */
.det-mes .preenche {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--azul);
  /* Cresce ao abrir o modal, na mesma linguagem do grafico do painel */
  animation: barra-cresce .5s cubic-bezier(.22, .68, .36, 1) backwards;
}

@keyframes barra-cresce {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

.det-mes .valor {
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.det-mes .var {
  font-size: 11.5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.det-mes .var.sobe { color: var(--ok); }
.det-mes .var.desce { color: var(--erro); }

@media (max-width: 620px) {
  .det-resumo { grid-template-columns: 1fr; }
  /* Sem a barra: em tela estreita o número é o que importa */
  .det-mes { grid-template-columns: minmax(0, 1fr) auto 46px; }
  .det-mes .trilho { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .det-mes .preenche { animation: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Participação no ranking

   Barra e número juntos: a barra dá a proporção de relance, o número dá o
   valor exato. Só o número exigiria comparar dígito por dígito para saber
   quem é maior.
   ───────────────────────────────────────────────────────────────────────── */
.participacao {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  justify-content: flex-end;
  width: 100%;
}

.participacao .trilho {
  flex: 1;
  min-width: 34px;
  max-width: 92px;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-alt);
  overflow: hidden;
}

.participacao .preenche {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--azul);
  animation: barra-cresce .5s cubic-bezier(.22, .68, .36, 1) backwards;
}

.participacao .pct {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 52px;
  text-align: right;
}

/* Sem altura limitada: a lista inteira aparece e quem rola é a página, não
   uma caixa dentro dela. Barra de rolagem interna esconde o fim da lista e
   obriga a rolar duas vezes para chegar ao rodapé. */

@media (max-width: 620px) {
  /* Em tela estreita a barra vira ruído: o número basta */
  .participacao .trilho { display: none; }
  .participacao .pct { min-width: 0; }
}

/* No celular o botão do cabeçalho sai: o do topo já aparece em toda tela e
   dois botões iguais na mesma dobra confundem. */
@media (max-width: 999px) {
  .acoes-topo .btn-tema { display: none; }
}

/* A tabela do ranking vira cartão junto com as outras (regra em 760px), mas
   a altura limitada não faz sentido quando cada empresa ocupa um bloco. */
@media (max-width: 760px) {
  .cartao-ranking .participacao { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .participacao .preenche { animation: none; }
}