/* Complemento do padrão FB v2 (css/fb-consult.css): só o que o hub precisa a mais.
   fb-consult.css é cópia fiel de "FB Consult - ID Visual" e não se edita. */

:root {
  --font: Manrope, system-ui, sans-serif;
  --pd-cols: 4;
  /* lidos por js/core/grafico.js em tempo de execução */
  --primary: var(--verde-2);
  --accent: var(--verde);
  --gr-ok: var(--verde);
  --gr-warn: #e09a1e;
  --gr-laranja: var(--radar);
  --gr-crit: var(--erro);
  --gr-info: var(--escuro-2);
  --gr-mut: var(--muted);
  --gr-mut-barra: var(--line-2);
  --gr-grid: var(--line);
  --gr-eixo: var(--muted);
  --gr-valor: var(--text);
  --gr-cat-1: var(--verde-2);
  --gr-cat-2: var(--escuro-1);
  --gr-cat-3: var(--verde);
  --gr-cat-4: var(--muted);
  --gr-cat-5: var(--escuro-2);
  --gr-cat-6: var(--muted-2);
  --gr-cat-7: var(--line-2);
  --gr-cat-8: var(--muted);
  --gr-linha: 2.25;
  --gr-marcador: 4;
  --gr-rx: 3;
  --gr-altura: 320px;
  --gr-fs-valor: 12.5px;
}

[hidden] { display: none !important; }

/* Clicável = mão. Desabilitado = proibido. */
a, button, select, summary, label[for], [role="button"], [role="tab"], th.ord,
input[type="checkbox"], input[type="radio"], input[type="range"], input[type="file"], input[type="date"] { cursor: pointer; }
button:disabled, select:disabled, input:disabled { cursor: not-allowed; }

body { font-size: 14px; line-height: 1.45; }

/* ---------- lateral ---------- */
.lateral-icone svg { width: 16px; height: 16px; display: block; }
.lateral-nav { scrollbar-width: none; }
.lateral-nav::-webkit-scrollbar { display: none; }
.lateral-pe .linkbtn { display: inline-flex; align-items: center; gap: 6px; }
.lateral-amb { display: block; margin: 0 4px 10px; font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .5); }

.sh-erro {
  display: flex; align-items: center; gap: 10px; margin-top: 36px; padding: 13px 15px;
  border: 1px solid rgba(192, 57, 43, .3); border-radius: var(--radius-sm);
  background: rgba(192, 57, 43, .06); color: var(--erro); font-size: 13.5px; font-weight: 600;
}

/* ---------- acesso (entrar, trocar senha) ---------- */
.acesso {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; padding: 24px;
  background: linear-gradient(170deg, var(--escuro-2), var(--escuro-1) 62%);
}
.acesso-logo { width: 210px; height: auto; }
.acesso-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 14px; }
.acesso-card h1 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.acesso-card .btn { width: 100%; }

/* ---------- cabeçalho e grades ---------- */
.tela { display: flex; flex-direction: column; gap: 14px; padding-bottom: 8px; }
.page-head { margin-bottom: 10px; }
.page-head.entre { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-fim { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mes { min-width: 130px; text-align: center; font-size: 14px; font-weight: 700; text-transform: capitalize; }
.bi-periodo { margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--muted-2); }
.bi-h3 { margin: 18px 0 8px; font-size: 13px; font-weight: 800; }
.panel-grid { gap: 14px; }

/* ---------- KPI: a fileira fecha cheia ---------- */
.kpi-grid { grid-template-columns: repeat(var(--pd-cols, 4), minmax(0, 1fr)); gap: 12px; margin: 0; }
.kpi-a { margin-top: 8px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.kpi.is-ok .kpi-n { color: var(--ok); }
.kpi.is-atencao .kpi-n { color: var(--atencao); }
.kpi.is-critico .kpi-n { color: var(--erro); }
@media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(min(var(--pd-cols, 4), 3), minmax(0, 1fr)); } }
@media (max-width: 640px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* ---------- cartão com título e controle ---------- */
.card-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.card-cab .bloco-titulo { margin: 0; }

/* Abas de período: pílula, a ativa é preta. */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.seg button {
  padding: 7px 14px; border: 0; border-radius: 999px; background: none;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); transition: .12s;
}
.seg button:hover { background: var(--card-2); color: var(--text); }
.seg button.is-on { background: var(--text); color: #fff; }

/* ---------- barra de filtros acima da tabela ---------- */
.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.filtros .campo { display: flex; flex-direction: column; gap: 5px; min-width: 130px; }
.filtros .campo.busca { flex: 1 1 240px; max-width: 340px; }
.filtros .field-label { margin: 0; }
.filtros input, .filtros select { height: 38px; padding: 8px 12px; font-size: 13px; }
.filtros select { padding-right: 32px; }
.filtros-fim { margin-left: auto; align-self: center; font-size: 12.5px; font-weight: 600; color: var(--muted-2); }

/* ---------- tabela ---------- */
table.matrix.op th, table.matrix.op td { text-align: left; }
table.matrix.op td.num, table.matrix.op th.num { text-align: right; }
table.matrix.op th.cen, table.matrix.op td.cen { text-align: center; }
table.matrix.op th + th, table.matrix.op td + td { border-left: 1px solid var(--line); }
table.matrix.op tbody tr:last-child td { border-bottom: 0; }
.card > .tablewrap { border-radius: var(--radius); }
.card > .pagi { margin: 0; padding: 10px 14px; border-top: 1px solid var(--line); }

/* Abas de fonte estilo planilha: a ativa encosta na tabela. */
.abas { display: flex; flex-wrap: wrap; gap: 3px; padding-left: 14px; margin-bottom: -15px; position: relative; z-index: 1; }
.aba {
  padding: 9px 15px; border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--card-2); color: var(--muted-2); font: inherit; font-size: 13px; font-weight: 700;
}
.aba.is-on { background: var(--verde-2); border-color: var(--verde-2); color: #fff; }

/* Barra horizontal presa no pé da tela (js/rolagem.js) */
.tablewrap.com-rolagem-pe { scrollbar-width: none; }
.tablewrap.com-rolagem-pe::-webkit-scrollbar { display: none; }
.rolagem-pe {
  position: sticky; bottom: 0; z-index: 3; overflow-x: auto; overflow-y: hidden; height: 14px;
  background: var(--card); border-top: 1px solid var(--line);
  scrollbar-width: auto; scrollbar-color: var(--muted) var(--card-2);
}
.rolagem-pe > div { height: 1px; }
@media (max-width: 640px) { .rolagem-pe { display: none; } }

/* ---------- simulador ---------- */
.bi-sim { display: flex; flex-direction: column; gap: 16px; }
.bi-sim label { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 600; color: var(--muted-2); }
.bi-sim b { color: var(--text); font-weight: 800; }
.bi-sim input[type="range"] { width: 100%; accent-color: var(--verde-2); }

/* ---------- gráfico ---------- */
.pd-svg { display: block; width: 100%; height: auto; }
.pd-svg text { font-family: var(--font); }
.pd-graf__vazio { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; border: 1px dashed var(--line-2); border-radius: var(--radius-sm); }
.pd-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 4px 2px; font-size: 12.5px; font-weight: 600; color: var(--muted-2); }
.pd-legenda__it { display: inline-flex; align-items: center; gap: 6px; }
.pd-legenda__it i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.pd-legenda__it i.is-tracejada { width: 16px; height: 0; border-top: 2px dashed; border-radius: 0; }
.pd-tip {
  position: fixed; z-index: 50; max-width: 280px; padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--text); color: #fff; font-size: 12px; line-height: 1.5;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .24); pointer-events: none;
}

/* ---------- carregando ---------- */
.skel { display: flex; flex-direction: column; gap: 12px; margin-top: 36px; }
.skel > div {
  height: 40px; border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--card-2) 25%, var(--line) 50%, var(--card-2) 75%);
  background-size: 300% 100%; animation: skel 1.4s linear infinite;
}
.skel > .skel-t { width: 240px; height: 30px; }
.skel > .skel-k { height: 92px; }
@keyframes skel { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---------- administração ---------- */
.acoes { display: flex; gap: 6px; justify-content: center; }
.painel { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.painel .campo { display: flex; flex-direction: column; gap: 5px; flex: 1 1 220px; max-width: 320px; }
.painel .field-label { margin: 0; }
.painel .quem { flex-basis: 100%; font-size: 14px; }
.painel .secs { flex-basis: 100%; display: flex; flex-direction: column; gap: 8px; }
.aviso-tela { padding: 12px 15px; border-radius: var(--radius-sm); background: rgba(22, 179, 100, .09); color: var(--verde-3); font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.aviso-tela.erro { background: rgba(192, 57, 43, .08); color: var(--erro); }
.aviso-tela code { font-size: 13.5px; font-weight: 800; user-select: all; }
.btn-perigo { background: var(--erro); }
.btn-perigo:hover { background: var(--erro); filter: brightness(.9); }
td .acs { display: block; max-width: 300px; white-space: normal; font-size: 12.5px; }

/* ---------- celular ---------- */
@media (max-width: 900px) {
  html, body { background: var(--bg); }
  .lateral { flex-wrap: wrap; gap: 10px 14px; padding: 12px 14px 10px; }
  .lateral-topo { flex: 1 1 auto; flex-direction: row; align-items: center; gap: 12px; padding: 0; min-width: 0; }
  .lateral-topo .logo { align-self: center; }
  .lateral-nome { font-size: 14px; }
  .lateral-nome small, .lateral-amb { display: none; }
  .lateral-pe { order: 2; flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding-top: 0; border-top: 0; }
  .lateral-conta { padding: 0; }
  .lateral-conta-txt small { display: none; }
  .lateral-nav { order: 3; flex: 1 0 100%; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; }
  .lateral-grupo { display: flex; gap: 6px; margin: 0; flex: none; }
  .lateral-grupo-t { display: none; }
  .lateral-nav a { white-space: nowrap; margin-bottom: 0; }
  .wrap { padding: 4px 18px 40px; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 14px 40px; }
  .filtros .campo, .filtros .campo.busca, .painel .campo { flex: 1 1 100%; max-width: none; }
  .filtros-fim { margin-left: 0; }
  .btn-sm { min-height: 0; }
}

/* O padrão pinta todo <i> de célula como etiqueta; a bolinha do semáforo não é etiqueta. */
table.matrix td .semaforo i { margin: 0; padding: 0; background: none; color: inherit; font-size: 9px; }
/* Coluna que identifica a linha acompanha a rolagem. */
table.matrix.op tbody td:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); }

table.matrix.op.compacta th, table.matrix.op.compacta td { padding: 10px 9px; }
table.matrix.op.compacta th.ord { padding-right: 22px; }