/* Design system do /repag — extraído da identidade visual do painel-pe.
   Fonte: painel-pe/painel-pe/index.html (tokens de cor, glass, kicker, tabs). */
:root {
  --navy: #0B1220;
  --navy-2: #0F172A;
  --cyan: #60A5FA;
  --cyan-2: #2EF5FF;
  --magenta: #E879A4;
  --lime: #7FB69C;
  --gold: #D4A84B;
  --rose: #F87171;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { background: var(--navy); color: #e2e8f0; font-family: 'Inter', sans-serif; margin: 0; padding: 0; }
.font-mono { font-family: 'JetBrains Mono', monospace; }

/* Sem isso, o <select> nativo mostra o popup de opções no tema claro do SO
   (fundo branco/lista "preta" do Chrome) mesmo com a caixa fechada estilizada
   via Tailwind — color-scheme faz o browser desenhar o popup nativo em dark. */
select, select option {
  color-scheme: dark;
  background-color: #1e293b;
  color: #e2e8f0;
}

.kicker {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: #64748b; font-weight: 600;
}
.kicker-soft {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .15em;
  text-transform: uppercase; color: #94a3b8; font-weight: 500;
}

.glass { background: rgba(15,23,42,.6); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.06); border-radius: 18px; }
.glass-soft { background: rgba(15,23,42,.4); border: 1px solid rgba(255,255,255,.05); border-radius: 14px; }

.glow { position: absolute; border-radius: 50%; filter: blur(120px); opacity: .18; pointer-events: none; z-index: 0; }
.glow-cyan { background: var(--cyan-2); } .glow-magenta { background: var(--magenta); }
.glow-gold { background: var(--gold); } .glow-lime { background: var(--lime); }

.bar-h { background: rgba(255,255,255,.05); border-radius: 3px; height: 8px; overflow: hidden; }
.bar-h-fill { height: 100%; border-radius: 3px; transition: width .3s; }

.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 10px;
  font-weight: 600; font-size: 14px; cursor: pointer; transition: all .2s;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: #e2e8f0;
}
.btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
.btn.primary { background: linear-gradient(135deg, var(--cyan-2), var(--cyan)); color: #001828; border-color: transparent; }
.btn.primary:hover { filter: brightness(1.1); }
.btn.danger { background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.3); color: #fca5a5; }
.btn.danger:hover { background: rgba(248,113,113,.18); }

.tab-pill {
  padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all .2s; color: #94a3b8; background: transparent; border: none;
}
.tab-pill:hover { color: #e2e8f0; }
.tab-pill.active { background: rgba(46,245,255,.12); color: var(--cyan-2); }

.layer-tab {
  padding: 10px 18px; border-radius: 12px; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: all .18s; color: #94a3b8; background: transparent; border: 1px solid rgba(255,255,255,.08);
  display: inline-flex; align-items: center; gap: 8px; letter-spacing: .01em; text-decoration: none;
}
.layer-tab:hover { color: #e2e8f0; border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.03); }
.layer-tab.active {
  color: #001828; background: linear-gradient(135deg, var(--cyan-2), var(--lime));
  border-color: transparent; box-shadow: 0 4px 20px -8px rgba(46,245,255,.5);
}

.sub-pill {
  padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 600; cursor: pointer;
  transition: all .18s; color: #94a3b8; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
  font-family: 'JetBrains Mono', monospace; letter-spacing: .05em;
}
.sub-pill:hover { color: #e2e8f0; }
.sub-pill.active { background: rgba(46,245,255,.15); color: var(--cyan-2); border-color: rgba(46,245,255,.3); }

.kpi-card { position: relative; overflow: hidden; }
.kpi-card .glow-small {
  position: absolute; width: 200px; height: 200px; border-radius: 50%; filter: blur(60px);
  opacity: .2; top: -50%; right: -30%; pointer-events: none;
}
.delta { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: .05em; }
.delta.up { color: var(--lime); } .delta.down { color: var(--rose); } .delta.flat { color: #64748b; }

.row-zebra > div:nth-child(even) { background: rgba(255,255,255,.015); }

.story-note {
  padding: 18px 22px; border-radius: 14px; background: rgba(46,245,255,.04);
  border: 1px solid rgba(46,245,255,.12); color: #cbd5e1; line-height: 1.65; font-size: 14px; margin-bottom: 24px;
}

.repag-input {
  background: rgba(2,6,23,.8); border: 1px solid rgba(255,255,255,.1); border-radius: 10px;
  color: #e2e8f0; font-size: 13px; padding: 8px 12px; font-family: inherit;
}
.repag-input:focus { outline: none; border-color: rgba(46,245,255,.4); }

.check-row {
  display: flex; align-items: center; gap: 8px; font-size: 12px; color: #cbd5e1;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: 8px 12px; cursor: pointer; transition: all .15s;
}
.check-row:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
.check-row.disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.check-row input[type=checkbox] { accent-color: var(--cyan-2); width: 14px; height: 14px; flex-shrink: 0; }

.field-label { font-size: 11px; color: #64748b; display: block; margin-bottom: 4px; font-family: 'JetBrains Mono', monospace; letter-spacing: .04em; text-transform: uppercase; }

.grad-text {
  background: linear-gradient(135deg, var(--cyan-2), var(--lime));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}