/* ==========================================================================
   Data SaqueAi — folha de estilo única
   Navy escuro, cards com gradiente, cantos arredondados.
   Sem framework: a página é servida direto pelo FastAPI, sem build step.
   ========================================================================== */

:root {
  /* A folha é dark-only. Sem esta declaração o navegador desenha o shadow DOM
     dos controles nativos no esquema CLARO: o ícone de calendário do
     `type=date` e o de relógio do `type=time` saem pretos sobre o campo
     escuro — praticamente invisíveis — e as setinhas do `type=number` somem.
     Mesmo problema do marcador de <details> lá embaixo, mas resolvido pelo
     caminho padronizado em vez de redesenhado à mão. */
  color-scheme: dark;

  --bg: #0b121c;
  --bg-elev: #101a28;
  --surface-de: #16202e;
  --surface-para: #1e2d45;
  --surface: linear-gradient(135deg, var(--surface-de), var(--surface-para));
  --borda: #26344a;
  --borda-forte: #33455f;

  --texto: #e8eef7;
  --muted: #8fa3bf;
  --fraco: #63789a;

  --acento: #2f7bff;
  --acento-suave: rgba(47, 123, 255, 0.14);
  --ok: #10b981;
  --alerta: #f59e0b;
  --erro: #ef4444;

  --raio: 14px;
  --raio-sm: 9px;
  --sombra: 0 10px 30px rgba(0, 0, 0, 0.35);
  --sidebar: 232px;

  --fonte: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Code", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Marca ────────────────────────────────────────────────────────────────── */

.marca { display: flex; align-items: center; gap: 10px; }
.marca img { height: 34px; width: auto; display: block; }

/* Fallback quando static/img/logo.png ainda não foi colocado: o wordmark em
   CSS ocupa o mesmo espaço, então o layout não muda quando o arquivo chegar. */
.marca .wordmark {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.3px;
  white-space: nowrap;
}
.marca .wordmark .destaque { color: var(--acento); }

/* ── Login ────────────────────────────────────────────────────────────────── */

.login-tela {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(47, 123, 255, 0.16), transparent 60%),
    var(--bg);
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 32px 30px;
}

.login-card h1 { font-size: 19px; margin: 22px 0 4px; }
.login-card p.sub { color: var(--muted); margin: 0 0 24px; font-size: 13px; }

/* ── Layout do app ────────────────────────────────────────────────────────── */

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

.sidebar {
  width: var(--sidebar);
  flex-shrink: 0;
  background: var(--bg-elev);
  border-right: 1px solid var(--borda);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar .marca { padding: 0 8px 22px; }

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--raio-sm);
  color: var(--muted);
  font-weight: 500;
  transition: background 0.12s, color 0.12s;
}
.nav a:hover { background: rgba(255, 255, 255, 0.04); color: var(--texto); text-decoration: none; }
.nav a.ativo { background: var(--acento-suave); color: var(--texto); }
.nav a .ico { width: 17px; text-align: center; opacity: 0.9; }

.rodape-sidebar {
  border-top: 1px solid var(--borda);
  padding-top: 14px;
  font-size: 12px;
  color: var(--muted);
}
.rodape-sidebar .usuario { color: var(--texto); font-weight: 600; }

.conteudo { flex: 1; min-width: 0; padding: 22px 26px 48px; }

.cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.cabecalho h1 { font-size: 21px; margin: 0; letter-spacing: -0.3px; }
.cabecalho .desc { color: var(--muted); font-size: 13px; margin: 3px 0 0; }

/* ── Cards ────────────────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 18px;
}

.grade { display: grid; gap: 14px; }
.grade.kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grade.dois { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.kpi .rotulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
  font-weight: 600;
}
.kpi .valor { font-size: 27px; font-weight: 700; margin-top: 6px; letter-spacing: -0.5px; }
.kpi .nota { font-size: 12px; color: var(--muted); margin-top: 2px; }

.titulo-card {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.titulo-card .aux { font-weight: 400; color: var(--muted); font-size: 12px; }

/* ── Formulários ──────────────────────────────────────────────────────────── */

label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; font-weight: 600; }

input, select {
  width: 100%;
  padding: 9px 11px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  color: var(--texto);
  font-family: inherit;
  font-size: 13px;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
}
input::placeholder { color: var(--fraco); }
select option { background: var(--surface-de); }

.campo { margin-bottom: 14px; }

.filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 11px;
  align-items: end;
}
.filtros .campo { margin-bottom: 0; }

/* ── Botões ───────────────────────────────────────────────────────────────── */

button, .botao {
  padding: 9px 15px;
  border-radius: var(--raio-sm);
  border: 1px solid var(--borda-forte);
  background: rgba(255, 255, 255, 0.05);
  color: var(--texto);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}
button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); }
button:disabled { opacity: 0.45; cursor: not-allowed; }

button.primario { background: var(--acento); border-color: var(--acento); color: #fff; }
button.primario:hover:not(:disabled) { background: #1f68e6; }
button.perigo { color: var(--erro); border-color: rgba(239, 68, 68, 0.4); }
button.perigo:hover:not(:disabled) { background: rgba(239, 68, 68, 0.12); }
button.largo { width: 100%; }
button.pequeno { padding: 5px 10px; font-size: 12px; }

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

/* ── Tabelas ──────────────────────────────────────────────────────────────── */

.tabela-wrap { overflow-x: auto; border-radius: var(--raio-sm); }

table { width: 100%; border-collapse: collapse; font-size: 13px; }

th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  font-weight: 700;
  padding: 9px 11px;
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: var(--surface-de);
}

td { padding: 9px 11px; border-bottom: 1px solid rgba(38, 52, 74, 0.5); white-space: nowrap; }
tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
tbody tr.clicavel { cursor: pointer; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.mono, .mono { font-family: var(--mono); font-size: 12px; }

/* ── Etiquetas ────────────────────────────────────────────────────────────── */

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.tag.ok { background: rgba(16, 185, 129, 0.16); color: var(--ok); }
.tag.alerta { background: rgba(245, 158, 11, 0.16); color: var(--alerta); }
.tag.erro { background: rgba(239, 68, 68, 0.16); color: var(--erro); }
.tag.neutra { background: rgba(143, 163, 191, 0.14); color: var(--muted); }
.tag.info { background: var(--acento-suave); color: #7aa9ff; }

/* ── Avisos ───────────────────────────────────────────────────────────────── */

.aviso {
  padding: 10px 13px;
  border-radius: var(--raio-sm);
  font-size: 13px;
  margin-bottom: 14px;
  border: 1px solid transparent;
}
.aviso.erro { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); color: #ffb4b4; }
.aviso.ok { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.3); color: #86efac; }
.aviso.info { background: var(--acento-suave); border-color: rgba(47, 123, 255, 0.3); color: #a8c7ff; }
.aviso.alerta { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.3); color: #fcd34d; }
.aviso:empty { display: none; }

.vazio { text-align: center; padding: 34px 16px; color: var(--muted); font-size: 13px; }

/* ── Painel lateral (detalhe) ─────────────────────────────────────────────── */

.painel-fundo {
  position: fixed;
  inset: 0;
  background: rgba(4, 8, 14, 0.62);
  display: none;
  z-index: 50;
}
.painel-fundo.aberto { display: block; }

.painel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(560px, 94vw);
  background: var(--bg-elev);
  border-left: 1px solid var(--borda);
  box-shadow: -18px 0 44px rgba(0, 0, 0, 0.45);
  transform: translateX(100%);
  transition: transform 0.18s ease;
  z-index: 51;
  display: flex;
  flex-direction: column;
}
.painel.aberto { transform: translateX(0); }

.painel-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--borda);
}
.painel-topo h2 { font-size: 15px; margin: 0; }
.painel-corpo { padding: 18px 20px; overflow-y: auto; flex: 1; }

.def { display: grid; grid-template-columns: 150px 1fr; gap: 7px 14px; font-size: 13px; }
.def dt { color: var(--muted); font-weight: 600; }
.def dd { margin: 0; word-break: break-word; }

/* Glossário: os `dd` são frases, não valores — precisam de mais respiro que a
   lista de definição do painel de detalhe. */
.def.glossario { gap: 14px 20px; line-height: 1.55; }
.def.glossario dt { color: var(--texto); }
.def.glossario dd { color: var(--muted); }
@media (max-width: 700px) {
  .def.glossario { grid-template-columns: 1fr; gap: 4px; }
  .def.glossario dd { margin-bottom: 10px; }
}

.glossario-card > summary {
  cursor: pointer;
  list-style: none;
  margin: 0;
  user-select: none;
}
.glossario-card[open] > summary { margin-bottom: 14px; }
.glossario-card > summary::-webkit-details-marker { display: none; }
/* A seta é desenhada à mão porque o marcador nativo não herda a cor do tema
   e fica preto sobre o fundo escuro no Chrome. */
.glossario-card > summary span:first-child::before {
  content: '▸';
  display: inline-block;
  margin-right: 7px;
  color: var(--muted);
  transition: transform 0.15s;
}
.glossario-card[open] > summary span:first-child::before { transform: rotate(90deg); }
.glossario-card > summary:hover span:first-child { color: var(--acento); }

.secao-detalhe { margin-top: 22px; }
.secao-detalhe h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
  margin: 0 0 10px;
}

pre.json {
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: 11px;
  font-family: var(--mono);
  font-size: 12px;
  overflow-x: auto;
  margin: 0;
  color: #b8ccea;
}

/* ── Gráficos ─────────────────────────────────────────────────────────────── */

.grafico { position: relative; height: 260px; }
.grafico.baixo { height: 200px; }
/* Barras horizontais precisam de altura por categoria: sem isso o Chart.js
   começa a esconder rótulos do eixo para caberem. */
.grafico.alto { height: 340px; }

/* ── Utilitários ──────────────────────────────────────────────────────────── */

.oculto { display: none !important; }
.muted { color: var(--muted); }
.mt { margin-top: 16px; }
.entre { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.carregando { color: var(--muted); font-size: 13px; }

.mascarado-aviso {
  font-size: 12px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── Higienização ─────────────────────────────────────────────────────────── */

/* Barra de progresso do lote. É o único componente novo da tela: o resto
   reaproveita .card, .tag, .aviso e .tabela-wrap. */
.progresso {
  height: 8px;
  border-radius: 99px;
  background: rgba(143, 163, 191, 0.16);
  overflow: hidden;
}
.progresso > span {
  display: block;
  height: 100%;
  background: var(--acento);
  border-radius: 99px;
  transition: width 0.4s ease;
}
.progresso.parcial > span { background: var(--alerta); }
.progresso.pronto  > span { background: var(--ok); }

/* Seletor de arquivo. O input nativo é feio e não aceita estilo direto, então
   ele fica escondido atrás de um <label> que se comporta como botão. */
.arquivo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 18px;
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio-sm);
  background: rgba(47, 123, 255, 0.04);
}
.arquivo input[type="file"] { display: none; }
.arquivo label {
  cursor: pointer;
  padding: 8px 14px;
  border-radius: var(--raio-sm);
  border: 1px solid var(--borda-forte);
  background: var(--bg-elev);
  font-size: 13px;
  font-weight: 600;
  color: var(--texto);
}
.arquivo label:hover { border-color: var(--acento); color: #7aa9ff; }

/* Chips de telefone: WhatsApp em verde, os demais em cinza. Reaproveita .tag e
   só acrescenta o espaçamento entre eles. */
.telefones { display: flex; gap: 5px; flex-wrap: wrap; }
.telefones .tag { font-family: var(--mono); letter-spacing: 0; }

/* Painel de seleção de colunas da exportação. */
.colunas-grupo { margin-bottom: 16px; }
.colunas-grupo > .titulo-card { margin: 0 0 8px; }
.colunas-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px 14px; }
.colunas-lista label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--texto);
  cursor: pointer;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.colunas-lista input { accent-color: var(--acento); }

/* ── Verificação em duas etapas ───────────────────────────────────────────── */

/* O card de cadastro é bem mais alto que o de login (QR + 10 códigos), então
   ganha largura e rolagem própria em telas baixas. */
.login-card:has(#painel-cadastro:not([hidden])) { max-width: 460px; }

.passos-2fa { margin: 0 0 20px; padding-left: 20px; font-size: 13px; line-height: 1.6; }
.passos-2fa > li { margin-bottom: 16px; }
.passos-2fa .sub { margin: 8px 0 0; font-size: 12px; }

.qr-2fa {
  display: flex;
  justify-content: center;
  margin: 12px 0 4px;
}
/* Fundo branco fixo: o PNG do QR tem módulos pretos sobre transparente, e num
   tema escuro sem isto ele fica invisível para a câmera. */
.qr-2fa img {
  width: 180px;
  height: 180px;
  padding: 10px;
  background: #fff;
  border-radius: var(--raio-sm);
}

.segredo-2fa {
  display: inline-block;
  margin-top: 4px;
  padding: 4px 8px;
  border-radius: var(--raio-sm);
  background: rgba(143, 163, 191, 0.14);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1px;
  word-break: break-all;
}

.codigos-2fa {
  list-style: none;
  margin: 10px 0;
  padding: 12px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: rgba(143, 163, 191, 0.07);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 12px;
  font-family: var(--mono);
  font-size: 12.5px;
}

.confirma-2fa {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--texto);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
.confirma-2fa input { accent-color: var(--acento); }

/* Campo de código: monoespaçado e espaçado, para conferir dígito a dígito. */
#codigo-cadastro, #codigo-verificacao {
  font-family: var(--mono);
  font-size: 17px;
  letter-spacing: 3px;
  text-align: center;
}

@media (max-width: 820px) {
  .sidebar { width: 62px; padding: 16px 8px; }
  .sidebar .marca .wordmark, .nav a span:not(.ico), .rodape-sidebar .detalhe { display: none; }
  .nav a { justify-content: center; }
  .conteudo { padding: 16px 14px 40px; }
  .codigos-2fa { grid-template-columns: 1fr; }
}