/* Visual institucional (PMERJ / CPOSP): azul e branco + brasoes no topo.
   Fica num arquivo a parte: para voltar ao visual anterior basta tirar a linha
   <link rel="stylesheet" href="institucional.css"> do index.html e do analise.html
   (e o bloco <div class="faixa-inst"> com os brasoes). */

:root {
  --inst-azul: #1b2463;
  --inst-azul-2: #2b3990;
  --page: #f3f5fa;
  --surface-1: #ffffff;
  --surface-2: #e9edf7;
  --text-primary: #121733;
  --text-secondary: #4a5072;
  --text-muted: #7d829f;
  --grid: #e2e6f1;
  --axis: #c3c8dc;
  --border: rgba(27, 36, 99, 0.13);
  --series-1: #3446a8;
  --series-1-hover: #1b2463;
  --seq-0: #dde3f7;
  --seq-1: #1b2463;
  --focus: #3446a8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --inst-azul: #0f1438;
    --inst-azul-2: #1b2463;
    --page: #0b0f22;
    --surface-1: #141a36;
    --surface-2: #1d2447;
    --text-primary: #eef1fb;
    --text-secondary: #b9c0dd;
    --text-muted: #8189ab;
    --grid: #252c50;
    --axis: #333b63;
    --border: rgba(255, 255, 255, 0.10);
    --series-1: #7d93ec;
    --series-1-hover: #a9b8f5;
    --seq-0: #1c2450;
    --seq-1: #a9b8f5;
    --focus: #7d93ec;
  }
}
:root[data-theme="dark"] {
  --inst-azul: #0f1438;
  --inst-azul-2: #1b2463;
  --page: #0b0f22;
  --surface-1: #141a36;
  --surface-2: #1d2447;
  --text-primary: #eef1fb;
  --text-secondary: #b9c0dd;
  --text-muted: #8189ab;
  --grid: #252c50;
  --axis: #333b63;
  --border: rgba(255, 255, 255, 0.10);
  --series-1: #7d93ec;
  --series-1-hover: #a9b8f5;
  --seq-0: #1c2450;
  --seq-1: #a9b8f5;
  --focus: #7d93ec;
}

/* ---------- faixa azul com os brasoes e as abas ---------- */
.faixa-inst {
  margin: -20px -24px 18px;
  padding: 14px 24px 0;
  background: linear-gradient(100deg, var(--inst-azul) 0%, var(--inst-azul-2) 100%);
  color: #fff;
  /* estende o azul ate as bordas da janela em telas mais largas que o painel */
  box-shadow: 0 0 0 100vmax var(--inst-azul);
  clip-path: inset(0 -100vmax);
}
/* brasoes nos cantos e o nome no meio, acompanhando a largura da pagina */
.inst-marca { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding-bottom: 12px; }
.inst-marca img { height: 64px; width: auto; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
.inst-texto { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.inst-org { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.inst-cmd { font-size: 19px; font-weight: 700; line-height: 1.25; text-transform: uppercase; letter-spacing: .02em; }

.faixa-inst .abas { border-bottom: 0; margin: 0; gap: 2px; justify-content: center; }
.faixa-inst .abas a {
  color: rgba(255, 255, 255, .75); border-bottom: 0; margin: 0;
  border-radius: 8px 8px 0 0; padding: 9px 18px;
}
.faixa-inst .abas a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.faixa-inst .abas a[aria-current="page"] { color: var(--inst-azul); background: var(--page); }
:root[data-theme="dark"] .faixa-inst .abas a[aria-current="page"] { color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .faixa-inst .abas a[aria-current="page"] { color: #fff; }
}

/* ---------- detalhes em azul ---------- */
h1 { color: var(--inst-azul-2); }
:root[data-theme="dark"] h1 { color: var(--text-primary); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) h1 { color: var(--text-primary); } }
.kpi { border-top: 3px solid var(--series-1); }
.presets button.ativo, .seg button.ativo { background: var(--series-1); border-color: var(--series-1); color: #fff; }
:root[data-theme="dark"] .presets button.ativo, :root[data-theme="dark"] .seg button.ativo { color: #0b0f22; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .presets button.ativo, :root:not([data-theme="light"]) .seg button.ativo { color: #0b0f22; }
}
.btn-link { color: var(--series-1); }
.filtros { box-shadow: 0 1px 3px rgba(27, 36, 99, .06); }
.card, .kpi { box-shadow: 0 1px 2px rgba(27, 36, 99, .05); }

@media (max-width: 760px) {
  .faixa-inst { margin: -12px -16px 14px; padding: 10px 16px 0; }
  .inst-marca { gap: 10px; }
  .inst-marca img { height: 44px; }
  .inst-org { font-size: 10.5px; }
  .inst-cmd { font-size: 12.5px; }
}
@media print { .faixa-inst { display: none; } }