/* Design system compartilhado do portal. Inspirado no painel de gestao
   interno do escritorio (menu lateral fixo, cards brancos com sombra leve,
   paleta azul-marinho + branco). Sem framework, so CSS puro. */

:root {
  --cor-fundo: #f4f5f7;
  --cor-superficie: #ffffff;
  --cor-borda: #e5e7eb;
  --cor-borda-forte: #d1d5db;

  --cor-texto: #1e293b;
  --cor-texto-secundario: #64748b;
  --cor-texto-suave: #94a3b8;

  --cor-primaria: #1e293b;
  --cor-primaria-hover: #0f172a;
  --cor-destaque: #0f766e;
  --cor-destaque-fundo: #ccfbf1;

  --cor-azul: #2563eb;
  --cor-azul-fundo: #dbeafe;
  --cor-verde: #16a34a;
  --cor-verde-fundo: #dcfce7;
  --cor-vermelho: #dc2626;
  --cor-vermelho-fundo: #fee2e2;
  --cor-amarelo: #d97706;
  --cor-amarelo-fundo: #fef3c7;

  --raio: 10px;
  --raio-pequeno: 6px;
  --sombra: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --largura-sidebar: 240px;
}

:root[data-tema="escuro"] {
  --cor-fundo: #0f172a;
  --cor-superficie: #1e293b;
  --cor-borda: #334155;
  --cor-borda-forte: #475569;

  --cor-texto: #e2e8f0;
  --cor-texto-secundario: #94a3b8;
  --cor-texto-suave: #64748b;

  --cor-primaria: #3b82f6;
  --cor-primaria-hover: #2563eb;
  --cor-destaque: #2dd4bf;
  --cor-destaque-fundo: #134e4a;

  --cor-azul: #60a5fa;
  --cor-azul-fundo: #1e3a5f;
  --cor-verde: #4ade80;
  --cor-verde-fundo: #14532d;
  --cor-vermelho: #ef4444;
  --cor-vermelho-fundo: #450a0a;
  --cor-amarelo: #fbbf24;
  --cor-amarelo-fundo: #451a03;

  --sombra: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);

  color-scheme: dark;
}

:root[data-tema="escuro"] .selo-cinza { background: #334155; color: #cbd5e1; }
:root[data-tema="escuro"] .ponto-cinza { background: #475569; }
:root[data-tema="escuro"] .sidebar-logo img { filter: brightness(0) invert(1); }

/* Selos e badges de acao usam texto com cor fixa (pensada pro fundo claro
   original) — no escuro o fundo escurece mas o texto ficava com o mesmo
   tom, quase ilegivel. Clareia o texto so no tema escuro. */
:root[data-tema="escuro"] .selo-azul,
:root[data-tema="escuro"] .acao.upload,
:root[data-tema="escuro"] .contagem.com-dado,
:root[data-tema="escuro"] .contagem-usuarios,
:root[data-tema="escuro"] .contagem-areas { color: #93c5fd; }
:root[data-tema="escuro"] .selo-verde,
:root[data-tema="escuro"] .acao.download { color: #86efac; }
:root[data-tema="escuro"] .selo-vermelho,
:root[data-tema="escuro"] .acao.exclusao { color: #fca5a5; }
:root[data-tema="escuro"] .selo-amarelo { color: #fcd34d; }

* { box-sizing: border-box; }

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

a { color: var(--cor-azul); }

/* ---- layout com menu lateral ---- */

.app {
  display: flex;
  min-height: 100vh;
}

.conteudo {
  flex: 1;
  padding: 2rem;
  min-width: 0;
}

.conteudo-largura-media { max-width: 860px; }
.conteudo-largura-total { max-width: 1200px; }

#sidebar-placeholder {
  width: var(--largura-sidebar);
  flex-shrink: 0;
}

.sidebar {
  width: var(--largura-sidebar);
  height: 100vh;
  position: sticky;
  top: 0;
  background: var(--cor-superficie);
  border-right: 1px solid var(--cor-borda);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.sidebar-logo {
  padding: 1.25rem 1.25rem 1rem;
}

.sidebar-logo img { display: block; height: 34px; }

.sidebar-secao {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.9rem 1.25rem 0.35rem;
}

.sidebar-nav { padding: 0 0.75rem; display: flex; flex-direction: column; gap: 0.15rem; }

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--raio-pequeno);
  color: var(--cor-texto-secundario);
  text-decoration: none;
  font-size: 0.9rem;
  border-left: 3px solid transparent;
  position: relative;
}

.sidebar-item:hover { background: var(--cor-fundo); }

.sidebar-item.ativo {
  background: var(--cor-destaque-fundo);
  color: var(--cor-destaque);
  font-weight: 600;
  border-left-color: var(--cor-destaque);
}

/* Aviso de backup com problema (sidebar.js > mostrarAvisoDeBackup). */
.aviso-backup {
  border-left: 4px solid var(--cor-vermelho);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.9rem;
}
.aviso-backup strong { color: var(--cor-vermelho); }

.sidebar-item .emblema {
  margin-left: auto;
  background: var(--cor-vermelho);
  color: #fff;
  border-radius: 9px;
  padding: 0 6px;
  font-size: 0.7rem;
  line-height: 1.3rem;
  min-width: 1.1rem;
  text-align: center;
}

.sidebar-rodape {
  margin-top: auto;
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid var(--cor-borda);
  font-size: 0.75rem;
  color: var(--cor-texto-suave);
}

.sidebar-rodape strong { color: var(--cor-texto-secundario); }

.sidebar-sair {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--cor-vermelho);
  text-decoration: none;
  font-size: 0.8rem;
  cursor: pointer;
}

.sidebar-credito {
  margin-top: 0.9rem;
  font-size: 0.68rem;
  color: var(--cor-texto-suave);
  opacity: 0.7;
}

.sidebar-tema {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  background: transparent;
  color: var(--cor-texto-secundario);
  font-size: 0.8rem;
  cursor: pointer;
  width: 100%;
}

.sidebar-tema:hover { background: var(--cor-fundo); }

/* ---- cabecalho de pagina ---- */

.cabecalho-pagina {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.cabecalho-pagina h1 {
  font-size: 1.4rem;
  margin: 0;
}

.cabecalho-pagina p {
  color: var(--cor-texto-secundario);
  margin: 0.2rem 0 0;
  font-size: 0.9rem;
}

/* ---- cards ---- */

.card {
  background: var(--cor-superficie);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}

.card-titulo {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card-titulo::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--cor-destaque);
  display: inline-block;
}

.grade-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.kpi {
  background: var(--cor-superficie);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 1.1rem 1.25rem;
  border-top: 3px solid transparent;
}

.kpi.alerta { border-top-color: var(--cor-vermelho); }
.kpi.sucesso { border-top-color: var(--cor-verde); }

.kpi-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.kpi-valor {
  font-size: 1.9rem;
  font-weight: 700;
  margin: 0.2rem 0 0.1rem;
  color: var(--cor-texto);
}

.kpi-sub {
  font-size: 0.78rem;
  color: var(--cor-texto-secundario);
}

/* ---- botoes ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border-radius: var(--raio-pequeno);
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
}

.btn:disabled { opacity: 0.55; cursor: default; }

.btn-primario { background: var(--cor-primaria); color: #fff; }
.btn-primario:hover:not(:disabled) { background: var(--cor-primaria-hover); }

.btn-contorno {
  background: var(--cor-superficie);
  color: var(--cor-texto);
  border-color: var(--cor-borda-forte);
}
.btn-contorno:hover:not(:disabled) { background: var(--cor-fundo); }

.btn-perigo-contorno {
  background: var(--cor-superficie);
  color: var(--cor-vermelho);
  border-color: var(--cor-vermelho);
}

.btn-sucesso { background: var(--cor-verde); color: #fff; }
.btn-sucesso:hover:not(:disabled) { background: #15803d; }

.btn-pequeno { padding: 0.3rem 0.65rem; font-size: 0.8rem; }

/* ---- controles segmentados (tipo filtro de periodo) ---- */

.segmentado {
  display: inline-flex;
  background: var(--cor-fundo);
  border-radius: var(--raio-pequeno);
  padding: 0.2rem;
  gap: 0.15rem;
}

.segmentado button {
  border: none;
  background: transparent;
  padding: 0.4rem 0.75rem;
  border-radius: 5px;
  font-size: 0.82rem;
  cursor: pointer;
  color: var(--cor-texto-secundario);
}

.segmentado button.ativo {
  background: var(--cor-primaria);
  color: #fff;
}

/* ---- formularios ---- */

label {
  display: block;
  font-size: 0.82rem;
  color: var(--cor-texto-secundario);
  margin-bottom: 0.3rem;
  font-weight: 500;
}

input, select {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-pequeno);
  font-size: 0.9rem;
  font-family: inherit;
  background: var(--cor-superficie);
  color: var(--cor-texto);
}

input:focus, select:focus {
  outline: none;
  border-color: var(--cor-destaque);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

input:read-only {
  background: var(--cor-fundo);
  color: var(--cor-texto-secundario);
  cursor: default;
}
input:read-only:focus { box-shadow: none; border-color: var(--cor-borda-forte); }

/* ---- combobox de empresa (busca por nome ou cnpj) ---- */

.combobox-empresa { position: relative; }

/* Razao social pode ser bem mais longa que a caixa (ex: "CONTARE
   CONTABILIDADE SOLUCOES EMPRESARIAIS LTDA") — sem isso, o texto corta
   de forma abrupta na borda do input, sem reticencias, parecendo que a
   tela quebrou em vez de so estar truncado. */
.combobox-empresa input {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combobox-lista {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 280px;
  overflow-y: auto;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-pequeno);
  box-shadow: var(--sombra);
}

.combobox-opcao {
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  font-size: 0.87rem;
}

.combobox-opcao:hover, .combobox-opcao.ativa { background: var(--cor-fundo); }

.combobox-opcao-sub {
  font-size: 0.78rem;
  color: var(--cor-texto-suave);
}

.combobox-vazio {
  color: var(--cor-texto-suave);
  cursor: default;
}
.combobox-vazio:hover { background: transparent; }

/* ---- ganchos do VISUAL NOVO (docs/visual-novo.md) ----
   Elementos marcados .so-novo existem no HTML mas ficam ESCONDIDOS no visual
   antigo; estilo-novo.css os mostra quando <html data-visual="novo">. E o que
   permite acrescentar telas novas sem tocar no que os usuarios veem hoje. */
.so-novo { display: none; }

/* Celula de arquivo: icone do tipo (so no novo) + nome truncado. No antigo o
   icone fica escondido e isto se comporta como o nome sozinho. */
.celula-arq { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.celula-arq .trunca { flex: 1; min-width: 0; }

/* ---- tabelas ---- */

table { width: 100%; border-collapse: collapse; font-size: 0.87rem; }
th, td { text-align: left; padding: 0.6rem 0.6rem; border-bottom: 1px solid var(--cor-borda); }
th { color: var(--cor-texto-secundario); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.02em; }
tbody tr:hover { background: var(--cor-fundo); }

/* Texto longo numa celula (nome de arquivo, razao social, nome de quem enviou)
   e CORTADO com "..." em vez de alargar a coluna: sem isso um nome gigante
   empurrava as outras colunas (inclusive o botao Baixar) pra fora da tela.
   Uso: <span class="trunca">texto</span> (+ trunca-curto / trunca-largo pra
   mudar o limite). O nome completo aparece ao passar o mouse — o title e
   preenchido sozinho por sidebar.js (a partir do textContent, nunca do HTML). */
.trunca {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.trunca-curto { max-width: 120px; }
.trunca-largo { max-width: 280px; }

/* Coluna "elastica": em vez de um limite fixo em pixels, a coluna ENCOLHE
   conforme a largura da tela pra tabela sempre caber (sem barra de rolagem
   horizontal empurrando Baixar/acoes pra fora). Truque do table-layout
   automatico: max-width: 0 no <td> deixa a largura vir do % do <th>
   (ex.: style="width: 26%"), e o texto que nao cabe vira "...". Use no <th>
   e no <td> das colunas de texto longo; as demais colunas mantem a largura
   natural. O .trunca de dentro vira bloco pra ocupar so o espaco da celula. */
th.col-elastica, td.col-elastica {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.col-elastica .trunca {
  display: block;
  max-width: 100%;
}
/* Largura minima: sem ela, em tela estreita as colunas elasticas encolhem
   ate sumir (o nome do arquivo virava 13px). Com o minimo a tabela passa a
   ter rolagem horizontal propria, mas o texto continua legivel. */
th.col-elastica { min-width: 110px; }
/* Tabela mais "justa": menos espaco lateral por celula pra sobrar largura
   pras colunas de texto (usada em tabelas com muitas colunas, ex.: Documentos). */
table.tabela-compacta th, table.tabela-compacta td { padding-left: 0.4rem; padding-right: 0.4rem; }

/* ---- badges / selos ---- */

.selo {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.selo-azul { background: var(--cor-azul-fundo); color: #1e40af; }
.selo-verde { background: var(--cor-verde-fundo); color: #166534; }
.selo-vermelho { background: var(--cor-vermelho-fundo); color: #991b1b; }
.selo-amarelo { background: var(--cor-amarelo-fundo); color: #92400e; }
.selo-cinza { background: #f1f5f9; color: #475569; }

.ponto-status {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.ponto-verde { background: var(--cor-verde); }
.ponto-vermelho { background: var(--cor-vermelho); }
.ponto-cinza { background: #cbd5e1; }

/* ---- estados vazios / mensagens ---- */

.mensagem-vazia {
  color: var(--cor-texto-secundario);
  font-size: 0.88rem;
  text-align: center;
  padding: 2rem 0;
}

.mensagem-erro { color: var(--cor-vermelho); font-size: 0.85rem; }
/* Aviso que NAO e erro do usuario (ex.: servico externo instavel). */
.mensagem-aviso { color: var(--cor-amarelo); font-size: 0.85rem; }
.mensagem-sucesso { color: var(--cor-verde); font-size: 0.85rem; }

/* ---- telas sem sidebar (login, solicitar acesso) ---- */

/* Paginas de entrada (login, solicitar acesso, trocar senha): fundo no mesmo
   azul-marinho de dentro do sistema, com um cartao BRANCO no meio. O cartao e sempre claro, mesmo com o tema
   escuro ligado (o tema so vale dentro do sistema, depois do login): por isso
   as variaveis de cor sao redefinidas aqui com a paleta clara, e tudo que
   estiver dentro (campos, links, mensagens, botao) acompanha sozinho. */
.pagina-centralizada {
  /* Texto solto dentro do cartao (mensagens de status, paragrafos) herdava a cor
     CLARA do tema escuro sobre o cartao branco e ficava ilegivel ("mensagem em
     branco"). As variaveis abaixo valem so aqui dentro, entao a cor tambem. */
  color: var(--cor-texto);
  --cor-fundo: #f4f5f7;
  --cor-superficie: #ffffff;
  --cor-borda: #e5e7eb;
  --cor-borda-forte: #cbd5e1;
  --cor-texto: #1e293b;
  --cor-texto-secundario: #475569;
  --cor-texto-suave: #94a3b8;
  --cor-primaria: #12303f;
  --cor-primaria-hover: #0b2230;
  --cor-destaque: #0f766e;
  --cor-azul: #1d6fa5;
  --cor-vermelho: #dc2626;
  --cor-verde: #16a34a;
  --cor-amarelo: #d97706;

  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: #0f172a; /* mesmo azul-marinho do fundo dentro do sistema (tema escuro) */
}

/* Garante que a cor de fundo cubra a janela inteira mesmo que o degrade do
   container nao alcance (zoom, janela redimensionada, rolagem). */
body:has(> .pagina-centralizada) { background: #0f172a; }

.pagina-centralizada .card {
  width: 100%;
  max-width: 400px;
  margin-bottom: 0;
  padding: 2rem 1.9rem;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Rotulos em caixa alta, pequenos e espacados, como no painel de gestao. */
.pagina-centralizada label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 0.9rem;
}
.pagina-centralizada .logo-central + label { margin-top: 0.4rem; }

.pagina-centralizada input {
  padding: 0.7rem 0.8rem;
  background: #fff;
}
/* Preenchimento automatico do navegador (e-mail/senha salvos): ele pinta o
   campo com cor propria e, com o tema escuro ligado, deixava o texto BRANCO
   sobre cinza. Forca fundo branco e texto escuro; "color-scheme: light" faz o
   navegador tratar este bloco como claro. O box-shadow inset e o unico jeito
   de trocar o fundo do autofill do Chrome/Edge. */
.pagina-centralizada { color-scheme: light; }
.pagina-centralizada input:-webkit-autofill,
.pagina-centralizada input:-webkit-autofill:hover,
.pagina-centralizada input:-webkit-autofill:focus {
  -webkit-text-fill-color: #1e293b;
  caret-color: #1e293b;
  box-shadow: 0 0 0 1000px #ffffff inset;
  transition: background-color 9999s ease-out 0s;
}
.pagina-centralizada input:focus {
  border-color: #12303f;
  box-shadow: 0 0 0 3px rgba(18, 48, 63, 0.14);
}

.pagina-centralizada .btn-primario {
  padding: 0.75rem 1rem;
  font-weight: 700;
  border-radius: 6px;
}

.logo-central {
  display: block;
  max-width: 190px;
  margin: 0 auto 1.25rem;
}

@media (max-width: 720px) {
  .sidebar { position: fixed; z-index: 20; transform: translateX(-100%); transition: transform 0.2s; }
  .sidebar.aberta { transform: translateX(0); }
  #sidebar-placeholder { width: 0; }
  .conteudo { padding: 1.25rem; }
}