:root {
  --fundo: #0f1115;
  --superficie: #171a21;
  --superficie-2: #1e222b;
  --borda: #2a2f3a;
  --texto: #e6e8ec;
  --texto-fraco: #9aa2b1;
  --destaque: #ff6b1a;
  --destaque-fraco: #ff6b1a22;
  --ok: #37b26a;
  --alerta: #e0a12a;
  --erro: #e05555;
  --raio: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 14px/1.5 "Segoe UI", system-ui, sans-serif;
}

a { color: inherit; }

header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 22px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  position: sticky;
  top: 0;
  z-index: 10;
}

header h1 {
  font-size: 16px;
  margin: 0;
  letter-spacing: .3px;
}

header h1 span { color: var(--destaque); }

.instancia {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.usuario {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 8px;
}
#usuario-email { color: var(--texto-fraco); font-size: 13px; }
#logout { padding: 6px 12px; }

/* ---------- tela de login ---------- */
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fundo);
}
.login-caixa {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 320px;
  max-width: 90vw;
  padding: 28px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
}
.login-caixa h2 { margin: 0 0 12px; font-size: 18px; }
.login-caixa h2 span { color: var(--destaque); }
.login-caixa label { margin-top: 6px; }
.login-caixa input { width: 100%; }
.login-caixa button { margin-top: 16px; padding: 10px; background: var(--destaque); color: #fff; border-color: var(--destaque); font-weight: 600; cursor: pointer; }
.login-caixa button:disabled { opacity: .6; cursor: default; }
.login-erro { margin-top: 10px; color: var(--erro); font-size: 13px; }

main { padding: 20px 22px 60px; max-width: 1500px; margin: 0 auto; }

label { color: var(--texto-fraco); font-size: 12px; }

input, select, button {
  background: var(--superficie-2);
  color: var(--texto);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 8px 10px;
  font: inherit;
}

input:focus, select:focus, button:focus-visible {
  outline: 2px solid var(--destaque);
  outline-offset: 1px;
}

button { cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--destaque); }
button:disabled { opacity: .45; cursor: not-allowed; }

.botao-primario { background: var(--destaque); border-color: var(--destaque); color: #10121a; font-weight: 600; }

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 18px;
}

.campo { display: flex; flex-direction: column; gap: 4px; }
.campo input { min-width: 260px; }

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.kpi {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 12px 14px;
}

.kpi .rotulo { color: var(--texto-fraco); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; }
.kpi .valor { font-size: 20px; font-weight: 600; margin-top: 4px; }
.kpi .valor.vencido { color: var(--erro); }
.kpi .valor.saldo { color: var(--alerta); }
.kpi .valor.pago { color: var(--ok); }

.tabela-container {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow-x: auto;
}

table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--borda); white-space: nowrap; }
th { color: var(--texto-fraco); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; background: var(--superficie-2); position: sticky; top: 0; }
tbody tr:hover { background: var(--destaque-fraco); }
tbody tr.clicavel { cursor: pointer; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.truncar { max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--borda);
  background: var(--superficie-2);
}
.badge.ativo { color: var(--ok); border-color: #37b26a55; background: #37b26a18; }
.badge.rescindido { color: var(--erro); border-color: #e0555555; background: #e0555518; }
.badge.cancelado { color: var(--texto-fraco); }
.badge.vencida { color: var(--erro); border-color: #e0555555; background: #e0555518; }
.badge.quitada { color: var(--ok); border-color: #37b26a55; background: #37b26a18; }
.badge.aberta { color: var(--alerta); border-color: #e0a12a55; background: #e0a12a18; }
.badge.reneg { color: var(--destaque); border-color: #ff6b1a55; background: var(--destaque-fraco); }

.paginacao { display: flex; align-items: center; gap: 12px; margin-top: 14px; justify-content: flex-end; color: var(--texto-fraco); }

.trilha { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; color: var(--texto-fraco); font-size: 13px; }
.trilha button { padding: 4px 10px; font-size: 12px; }

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px 18px;
  margin-bottom: 18px;
}
.cartao h2 { margin: 0 0 4px; font-size: 18px; }
.cartao .subtitulo { color: var(--texto-fraco); font-size: 13px; margin-bottom: 14px; }

.grade-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 20px;
}
.grade-campos .item .rotulo { color: var(--texto-fraco); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.grade-campos .item .conteudo { margin-top: 2px; word-break: break-word; white-space: normal; }

.resumo-contrato {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 20px;
  margin-bottom: 16px;
}
.resumo-contrato .item .rotulo { color: var(--texto-fraco); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.resumo-contrato .item .conteudo { margin-top: 2px; word-break: break-word; }

details.ficha { border-top: 1px solid var(--borda); padding-top: 12px; }
details.ficha summary {
  cursor: pointer;
  color: var(--texto-fraco);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .6px;
  list-style: none;
}
details.ficha summary::before { content: '\25B8'; display: inline-block; margin-right: 8px; transition: transform .15s; }
details.ficha[open] summary::before { transform: rotate(90deg); }
details.ficha summary:hover { color: var(--destaque); }
details.ficha summary::-webkit-details-marker { display: none; }
details.ficha .grade-campos { margin-top: 14px; }

h3.secao { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--texto-fraco); margin: 22px 0 10px; }

.mensagem { padding: 14px; border-radius: var(--raio); border: 1px solid var(--borda); background: var(--superficie); color: var(--texto-fraco); }
.mensagem.erro { color: var(--erro); border-color: #e0555555; background: #e0555512; }

.carregando { color: var(--texto-fraco); padding: 20px; text-align: center; }

.linha-baixas { background: var(--superficie-2); }
.linha-baixas td { white-space: normal; padding-top: 4px; padding-bottom: 8px; }
.baixas { display: flex; flex-wrap: wrap; gap: 8px; }
.baixa { font-size: 12px; color: var(--texto-fraco); border: 1px solid var(--borda); border-radius: 999px; padding: 2px 10px; }

.oculto { display: none; }
.aviso-cancelada { opacity: .5; }

/* ---------- abas do cabecalho ---------- */
nav.abas { display: flex; gap: 6px; }
.aba {
  background: transparent;
  border: 1px solid transparent;
  color: var(--texto-fraco);
  padding: 6px 14px;
  cursor: pointer;
}
.aba:hover { color: var(--texto); }
.aba.ativa {
  color: var(--texto);
  border-color: var(--borda);
  background: var(--superficie-2);
}

/* ---------- tela de comissoes ---------- */
.filtros-comissao { align-items: end; }
.filtros-comissao .check {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--texto);
  font-size: 13px;
  white-space: nowrap;
  padding-bottom: 8px;
}
.filtros-comissao .check input { width: auto; padding: 0; }

.subtitulo-com { color: var(--texto-fraco); font-size: 13px; margin: 4px 0 14px; }
.cod-pessoa { color: var(--texto-fraco); font-size: 12px; }

/* grupo de formatura dentro do detalhe de uma pessoa */
.tabela-comissao-detalhe .grupo-formatura { background: var(--superficie-2); }
.tabela-comissao-detalhe .grupo-formatura td { font-weight: 600; }
.link-formatura, .link-formando {
  background: transparent;
  border: none;
  color: var(--destaque);
  padding: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.link-formando { color: var(--texto); }
.link-formatura:hover, .link-formando:hover { text-decoration: underline; }

/* o detalhe expandido de uma pessoa ocupa a largura toda, sem hover de linha */
.linha-detalhe-com > td { padding: 0; background: var(--fundo); }
.linha-detalhe-com .tabela-container { margin: 0; border-radius: 0; }

/* formando que pagou a 1a parcela no mes mas nao tem comissao no relatorio */
.tabela-comissao-detalhe .sem-comissao { background: #e0a12a10; }
.obs-sem-comissao { color: var(--texto-fraco); font-size: 13px; }
.badge.aviso { color: var(--alerta); border-color: #e0a12a55; background: #e0a12a18; }

/* alerta de prazo entrega contrato divergente */
.badge.alerta-erro { color: var(--erro); border-color: #e0555555; background: #e0555518; }
.marca-alerta { color: var(--erro); font-weight: 700; cursor: help; }

/* ---------- controle de reajuste anual ---------- */
.indice-manual { width: 90px; padding: 4px 6px; }
tr.linha-alerta > td:first-child { border-left: 3px solid var(--erro); }
.badge.reaj-vencido { color: var(--texto-fraco); border-color: var(--borda); }
.badge.reaj-alerta { color: var(--erro); border-color: #e0555555; background: #e0555518; }
.badge.reaj-futuro { color: var(--alerta); border-color: #e0a12a55; background: #e0a12a18; }

.linha-arvore-reaj > td { padding: 0; background: var(--fundo); }
.arvore-reaj { padding: 14px 18px; }
.arvore-cabecalho { color: var(--texto-fraco); font-size: 13px; margin-bottom: 10px; }
.reaj-lista { display: flex; flex-direction: column; gap: 6px; }
.reaj-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  max-width: 640px;
}
.reaj-item input[type="checkbox"] { width: auto; cursor: pointer; }
.reaj-data { font-variant-numeric: tabular-nums; cursor: pointer; min-width: 150px; }
.reaj-campo { padding: 4px 6px; }
.reaj-campo-indice { width: 140px; }
.reaj-campo-pct { width: 70px; margin-left: auto; }
.reaj-feito { opacity: .6; }
.reaj-feito .reaj-data { text-decoration: line-through; }