/*
 * SGPA-WEB: componentes das telas novas (Sgpa\View\Componentes).
 * Cores pelas variáveis do Bootstrap: claro e escuro sem regras duplicadas.
 */

.sgpa-novo {
  font-size: 0.95rem;
  line-height: 1.5;
  color-scheme: inherit;
  background: var(--sgpa-cinza-claro);
}

.sgpa-novo h1,
.sgpa-novo h2 {
  margin: 0;
}

/* ---------- Cabeçalho da página ---------- */
.sgpa-pagina-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.sgpa-pagina-titulo {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

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

/* ---------- Grade ---------- */
.sgpa-grade {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  margin-bottom: 20px;
}

/* indicadores que ocupam toda a largura (as colunas vazias somem): Cobranças e Carnês do cliente */
.sgpa-grade.sgpa-grade-cheia {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.sgpa-grade-2 {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  margin-bottom: 20px;
}

/* ---------- Card ---------- */
.sgpa-card {
  margin-bottom: 20px;
  border: 1px solid var(--sgpa-borda);
  border-radius: var(--sgpa-raio);
  background: var(--bs-body-bg);
  box-shadow: var(--sgpa-sombra);
  transition: box-shadow var(--sgpa-transicao), transform var(--sgpa-transicao);
}

.sgpa-grade > .sgpa-card,
.sgpa-grade-2 > .sgpa-card {
  margin-bottom: 0;
}

.sgpa-card-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--sgpa-borda);
}

.sgpa-card-titulo {
  font-size: 1rem;
  font-weight: 600;
}

.sgpa-card-acoes {
  display: flex;
  gap: 6px;
}

.sgpa-card-corpo {
  padding: 18px;
}

.sgpa-card-rodape {
  padding: 12px 18px;
  border-top: 1px solid var(--sgpa-borda);
  color: var(--bs-secondary-color);
  font-size: 0.85rem;
}

/* ---------- Indicador ---------- */
.sgpa-indicador {
  /* 19/10/2026: o valor acompanha a largura do card (cqi); antes "R$ 25.032,59" vazava do card estreito */
  container-type: inline-size;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--sgpa-borda);
  border-radius: var(--sgpa-raio);
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  box-shadow: var(--sgpa-sombra);
  text-decoration: none;
  transition: box-shadow var(--sgpa-transicao), transform var(--sgpa-transicao), border-color var(--sgpa-transicao);
}

a.sgpa-indicador:hover {
  border-color: color-mix(in srgb, var(--sgpa-cor) 40%, var(--sgpa-borda));
  box-shadow: var(--sgpa-sombra-alta);
  color: var(--bs-body-color);
  transform: translateY(-2px);
}

.sgpa-indicador-icone {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--sgpa-cor) 14%, transparent);
  color: var(--sgpa-cor);
  font-size: 1.35rem;
  flex-shrink: 0;
}

.sgpa-indicador-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sgpa-indicador-rotulo {
  color: var(--bs-secondary-color);
  font-size: 0.82rem;
  font-weight: 500;
}

.sgpa-indicador-valor {
  font-size: clamp(1rem, calc(13cqi - 0.5rem), 1.55rem);
  white-space: normal; /* se ainda não couber, o "R$" quebra a linha em vez de vazar */
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.sgpa-indicador-textual .sgpa-indicador-valor {
  font-size: 1.15rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

.sgpa-indicador-detalhe {
  color: var(--bs-secondary-color);
  font-size: 0.78rem;
}

.sgpa-cor-azul { --sgpa-cor: var(--sgpa-azul); }
.sgpa-cor-verde { --sgpa-cor: var(--sgpa-verde); }
.sgpa-cor-vermelho { --sgpa-cor: var(--sgpa-vermelho); }
.sgpa-cor-laranja { --sgpa-cor: var(--sgpa-laranja); }
.sgpa-cor-cinza { --sgpa-cor: #6b7280; }

[data-bs-theme="dark"] .sgpa-cor-azul { --sgpa-cor: #6ea0ff; }
[data-bs-theme="dark"] .sgpa-cor-verde { --sgpa-cor: #4cc38a; }
[data-bs-theme="dark"] .sgpa-cor-vermelho { --sgpa-cor: #ff6b6b; }
[data-bs-theme="dark"] .sgpa-cor-laranja { --sgpa-cor: #f59e4b; }
[data-bs-theme="dark"] .sgpa-cor-cinza { --sgpa-cor: #9ca3af; }

/* ---------- Situação (badge) ---------- */
.sgpa-situacao {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sgpa-cor) 14%, transparent);
  color: var(--sgpa-cor);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* ---------- Botões ---------- */
.sgpa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 8px;
  font-weight: 500;
}

.sgpa-btn.btn-link {
  text-decoration: none;
}

.sgpa-enviando {
  opacity: 0.7;
  pointer-events: none;
}

/* ---------- Alerta ---------- */
.sgpa-alerta {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: var(--sgpa-raio);
}

.sgpa-alerta > .bi {
  font-size: 1.1rem;
  line-height: 1.4;
}

/* ---------- Formulário ---------- */
.sgpa-form-grade {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.sgpa-form-grade > .sgpa-campo {
  grid-column: span 12;
  /* as classes col-md-* aqui indicam colunas da grade; anula a largura que o Bootstrap dá a elas */
  width: auto;
  max-width: none;
  flex: none;
  padding: 0;
}

@media (min-width: 768px) {
  .sgpa-form-grade > .col-md-1 { grid-column: span 1; }
  .sgpa-form-grade > .col-md-2 { grid-column: span 2; }
  .sgpa-form-grade > .col-md-3 { grid-column: span 3; }
  .sgpa-form-grade > .col-md-4 { grid-column: span 4; }
  .sgpa-form-grade > .col-md-5 { grid-column: span 5; }
  .sgpa-form-grade > .col-md-6 { grid-column: span 6; }
  .sgpa-form-grade > .col-md-7 { grid-column: span 7; }
  .sgpa-form-grade > .col-md-8 { grid-column: span 8; }
  .sgpa-form-grade > .col-md-9 { grid-column: span 9; }
  .sgpa-form-grade > .col-md-10 { grid-column: span 10; }
  .sgpa-form-grade > .col-md-11 { grid-column: span 11; }
  .sgpa-form-grade > .col-md-12 { grid-column: span 12; }
}

.sgpa-obrigatorio {
  color: var(--sgpa-vermelho);
}

.sgpa-campo .form-text {
  margin-top: 4px;
  font-size: 0.8rem;
}

.sgpa-form-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--sgpa-borda);
}

.sgpa-form-acoes-direita {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

@media (max-width: 575.98px) {
  .sgpa-form-acoes,
  .sgpa-form-acoes > div,
  .sgpa-form-acoes-direita {
    width: 100%;
  }

  .sgpa-form-acoes-direita > .sgpa-btn {
    flex: 1 1 auto;
  }
}

/* ---------- Tabela ---------- */
.sgpa-tabela {
  position: relative; /* contém o anúncio visually-hidden (absoluto), que esticava a página */
  border: 1px solid var(--sgpa-borda);
  border-radius: var(--sgpa-raio);
  background: var(--bs-body-bg);
  box-shadow: var(--sgpa-sombra);
  overflow: hidden;
}

.sgpa-tabela-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--sgpa-borda);
}

.sgpa-tabela-busca {
  position: relative;
  flex: 1 1 220px;
  max-width: 360px;
}

.sgpa-tabela-busca > .bi {
  position: absolute;
  top: 50%;
  left: 10px;
  color: var(--bs-secondary-color);
  transform: translateY(-50%);
}

.sgpa-tabela-busca .form-control {
  padding-left: 32px;
}

.sgpa-tabela-lote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--sgpa-azul-claro);
  font-size: 0.85rem;
  font-weight: 600;
}

.sgpa-tabela-lote[hidden] {
  display: none;
}

.sgpa-tabela-ferramentas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

.sgpa-tabela-ferramentas .form-select {
  width: auto;
}

.sgpa-tabela .table {
  --bs-table-bg: transparent;
  font-size: 0.9rem;
}

.sgpa-tabela thead th {
  background: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Menu "mais ações" da linha: fixo junto ao botão, fora do corte da tabela */
.sgpa-mais {
  display: inline-flex;
}

.sgpa-acoes-grupo > .sgpa-mais > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
}

.sgpa-mais-menu {
  position: fixed;
  z-index: 1060;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--sgpa-borda);
  border-radius: var(--sgpa-raio);
  background: var(--bs-body-bg);
  box-shadow: var(--sgpa-sombra-alta);
  text-align: left;
  white-space: nowrap;
}

.sgpa-mais-menu[hidden] {
  display: none;
}

.sgpa-mais-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--bs-body-color);
  text-decoration: none;
}

.sgpa-mais-item:hover,
.sgpa-mais-item:focus-visible {
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  outline: none;
}

.sgpa-mais-item .bi {
  width: 1.1em;
  color: var(--bs-secondary-color);
}

/* Botões ao lado de um campo (mostrar senha, gerar segredo) */
.sgpa-campo-botoes {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 2px;
}

/* Índices (Relatórios, Configurações): cartões de atalho */
.sgpa-atalhos-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}

.sgpa-atalho {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--sgpa-borda);
  border-radius: var(--sgpa-raio);
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  text-decoration: none;
  transition: border-color 120ms, box-shadow 120ms;
}

.sgpa-atalho:hover,
.sgpa-atalho:focus-visible {
  border-color: var(--bs-primary);
  box-shadow: var(--sgpa-sombra-alta);
  color: var(--bs-body-color);
}

.sgpa-atalho-icone {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
  font-size: 1.2rem;
}

.sgpa-atalho strong {
  display: block;
}

.sgpa-atalho small {
  display: block;
  color: var(--bs-secondary-color);
}

/* Alerta com lista recolhível (DICI) */
.sgpa-alerta-detalhe summary {
  cursor: pointer;
  font-weight: 600;
}

/* Período (extrato): datas, botão e atalhos na mesma linha quando cabem */
.sgpa-periodo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.sgpa-periodo .sgpa-campo {
  flex: 0 1 11rem;
  min-width: 9.5rem;
}

.sgpa-periodo .sgpa-filtros {
  margin: 0;
}

@media (max-width: 575.98px) {
  .sgpa-periodo .sgpa-campo {
    flex: 1 1 40%;
    min-width: 0;
  }
}

/* Coluna de texto longo (nome): largura mínima para não quebrar em várias linhas */
@media (min-width: 768px) {
  .sgpa-tabela thead th.sgpa-col-larga {
    min-width: 12rem;
  }
}

/* Coluna secundária: fora da tabela em telas médias (fica no celular e na exportação) */
@media (min-width: 768px) and (max-width: 1399.98px) {
  .sgpa-tabela .sgpa-col-secundaria {
    display: none;
  }
}

.sgpa-ordenar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.sgpa-ordenar:hover,
th[aria-sort="ascending"] .sgpa-ordenar,
th[aria-sort="descending"] .sgpa-ordenar {
  color: var(--bs-body-color);
}

.sgpa-seta-ordem {
  font-size: 0.7rem;
  opacity: 0.8;
}

.sgpa-col-selecao {
  width: 40px;
}

.sgpa-col-acoes {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}

.sgpa-tabela-vazia {
  padding: 32px 16px !important;
  color: var(--bs-secondary-color);
  text-align: center;
}

.sgpa-linha-esqueleto .sgpa-esqueleto {
  display: block;
  height: 14px;
  margin: 4px 0;
}

.sgpa-tabela-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--sgpa-borda);
  color: var(--bs-secondary-color);
  font-size: 0.85rem;
}

.sgpa-tabela[aria-busy="true"] .sgpa-tabela-rodape {
  opacity: 0.6;
}

/* Celular: cada linha vira um cartão com rótulos */
@media (max-width: 767.98px) {
  .sgpa-tabela .table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .sgpa-tabela .table,
  .sgpa-tabela .table tbody,
  .sgpa-tabela .table tr,
  .sgpa-tabela .table td {
    display: block;
    width: 100%;
  }

  .sgpa-tabela .table tr {
    position: relative;
    padding: 10px 14px;
    border-bottom: 1px solid var(--sgpa-borda);
  }

  .sgpa-tabela .table tr[hidden] {
    display: none;
  }

  .sgpa-tabela .table td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    border: 0;
    text-align: right;
    overflow-wrap: anywhere;
  }

  .sgpa-tabela .table td[data-label]::before {
    content: attr(data-label);
    color: var(--bs-secondary-color);
    font-size: 0.78rem;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    flex-shrink: 0;
  }

  .sgpa-tabela .table td:nth-child(1 of [data-label]) {
    color: var(--bs-body-color);
    font-weight: 600;
  }

  .sgpa-tabela .table td.sgpa-col-selecao {
    position: absolute;
    top: 10px;
    right: 14px;
    width: auto;
  }

  .sgpa-tabela .table tr:has(.sgpa-col-selecao) td:nth-child(2) {
    padding-right: 32px;
  }

  .sgpa-tabela .table td.sgpa-col-acoes {
    justify-content: flex-end;
    padding-top: 8px;
  }

  .sgpa-tabela .table td.sgpa-tabela-vazia {
    display: block;
    text-align: center;
  }

  .sgpa-tabela-busca {
    max-width: none;
  }

  .sgpa-tabela-ferramentas {
    width: 100%;
    margin-left: 0;
  }
}

/* ---------- Toasts ---------- */
.sgpa-toasts {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}

.sgpa-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 12px 12px 14px;
  border: 1px solid var(--sgpa-borda);
  border-left: 4px solid var(--sgpa-cor);
  border-radius: 10px;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  box-shadow: var(--sgpa-sombra-alta);
  font-size: 0.9rem;
  pointer-events: auto;
  animation: sgpa-toast-entrar 200ms ease-out;
}

.sgpa-toast > .bi {
  color: var(--sgpa-cor);
  font-size: 1.1rem;
}

.sgpa-toast-texto {
  flex: 1;
}

.sgpa-toast-fechar {
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--bs-secondary-color);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.sgpa-toast-sucesso { --sgpa-cor: var(--sgpa-verde); }
.sgpa-toast-erro { --sgpa-cor: var(--sgpa-vermelho); }
.sgpa-toast-alerta { --sgpa-cor: var(--sgpa-laranja); }
.sgpa-toast-info { --sgpa-cor: var(--sgpa-azul); }

.sgpa-toast.saindo {
  animation: sgpa-toast-sair 180ms ease-in forwards;
}

@keyframes sgpa-toast-entrar {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes sgpa-toast-sair {
  to { opacity: 0; transform: translateX(16px); }
}

@media (max-width: 575.98px) {
  .sgpa-toasts {
    right: 16px;
    left: 16px;
    width: auto;
  }
}

/* ---------- Modal ---------- */
.sgpa-modal {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 1px solid var(--sgpa-borda);
  border-radius: 14px;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  box-shadow: var(--sgpa-sombra-alta);
}

.sgpa-modal[open] {
  animation: sgpa-toast-entrar 180ms ease-out;
}

.sgpa-modal::backdrop {
  background: rgb(8 15 28 / 55%);
}

.sgpa-modal-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--sgpa-borda);
}

.sgpa-modal-titulo {
  font-size: 1.05rem;
  font-weight: 600;
}

.sgpa-modal-corpo {
  padding: 18px;
  overflow-y: auto;
}

.sgpa-modal-rodape {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--sgpa-borda);
}

/* ---------- Carregamento ---------- */
.sgpa-esqueleto-bloco .sgpa-esqueleto {
  height: 16px;
  margin: 8px 0;
}

.sgpa-esqueleto-bloco .sgpa-esqueleto:last-child {
  width: 60%;
}

.sgpa-carregando {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--bs-secondary-color);
}

/* ---------- Foco visível ---------- */
.sgpa-novo :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid #7aa7ff;
  outline-offset: 2px;
  box-shadow: none;
}

@media print {
  .sgpa-tabela-barra,
  .sgpa-tabela-rodape,
  .sgpa-col-selecao,
  .sgpa-col-acoes,
  .sgpa-toasts,
  .sgpa-pagina-acoes {
    display: none !important;
  }

  .sgpa-card,
  .sgpa-tabela {
    box-shadow: none;
  }
}

/* ---------- Painel ---------- */
.sgpa-secao-titulo {
  margin: 4px 0 12px !important;
  color: var(--bs-secondary-color);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sgpa-lembrete {
  margin-bottom: 20px;
}

.sgpa-painel-atualizado {
  align-self: center;
  color: var(--bs-secondary-color);
  font-size: 0.82rem;
}

/* Gráficos do painel (Etapa 7.4b): grade de 12 colunas; abaixo de 1200px, 6 + 6; no celular, uma coluna */
.sgpa-graficos {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin-bottom: 20px;
}

.sgpa-graficos > .sgpa-card {
  margin-bottom: 0;
  grid-column: span 12;
  min-width: 0;
}

@media (min-width: 768px) {
  .sgpa-graficos > .sgpa-col-4,
  .sgpa-graficos > .sgpa-col-6,
  .sgpa-graficos > .sgpa-col-8 { grid-column: span 6; }
}

@media (min-width: 1200px) {
  .sgpa-graficos > .sgpa-col-4 { grid-column: span 4; }
  .sgpa-graficos > .sgpa-col-8 { grid-column: span 8; }
}

.sgpa-card-grafico .sgpa-card-corpo {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px 16px 8px;
}

.sgpa-grafico-cabecalho {
  padding: 2px 4px 6px;
}

.sgpa-grafico-titulo {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
}

.sgpa-grafico-resumo {
  margin: 2px 0 0;
  color: var(--bs-secondary-color);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.sgpa-grafico {
  flex: 1;
  min-height: 220px;
}

.sgpa-grafico-carregando,
.sgpa-grafico-vazio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 220px;
  margin: 0;
  color: var(--bs-secondary-color);
  font-size: 0.9rem;
}

.sgpa-grafico .apexcharts-tooltip {
  box-shadow: var(--sgpa-sombra-alta);
  border-radius: 8px;
}

.sgpa-grafico .apexcharts-legend-text {
  color: var(--bs-body-color) !important;
}

/* Painel (7.4c): 6 cartões, 3 por linha no desktop */
@media (min-width: 1200px) {
  .sgpa-grade-painel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Painel (13/10/2026, prévia aprovada): cards claros na cor de cada um, ícone forte, comparação e mini gráfico */
.sgpa-kpis {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  margin-bottom: 20px;
}
.sgpa-kpi {
  --kpi-forte: #1f5fbf;
  --kpi-fundo1: #f2f6fe;
  --kpi-fundo2: #e3ecfb;
  --kpi-borda: #d3e1f8;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 16px 18px 12px;
  border: 1px solid var(--kpi-borda);
  border-radius: 14px;
  background: linear-gradient(160deg, var(--kpi-fundo1) 0%, var(--kpi-fundo2) 100%);
  color: var(--bs-body-color);
  text-decoration: none;
  transition: transform var(--sgpa-transicao), box-shadow var(--sgpa-transicao);
}
a.sgpa-kpi:hover {
  color: var(--bs-body-color);
  transform: translateY(-2px);
  box-shadow: var(--sgpa-sombra-alta);
}
a.sgpa-kpi:focus-visible {
  outline: 3px solid var(--kpi-forte);
  outline-offset: 2px;
}
.sgpa-kpi-verde { --kpi-forte: #157347; --kpi-fundo1: #f1faf5; --kpi-fundo2: #e1f3e9; --kpi-borda: #cfe9db; }
.sgpa-kpi-azul { --kpi-forte: #1f5fbf; --kpi-fundo1: #f2f6fe; --kpi-fundo2: #e3ecfb; --kpi-borda: #d3e1f8; }
.sgpa-kpi-laranja { --kpi-forte: #ea580c; --kpi-fundo1: #fff7f1; --kpi-fundo2: #ffe9db; --kpi-borda: #fbdcc6; }
.sgpa-kpi-teal { --kpi-forte: #0f766e; --kpi-fundo1: #f0faf9; --kpi-fundo2: #ddf2ef; --kpi-borda: #cbe8e5; }
.sgpa-kpi-vermelho { --kpi-forte: #b91c1c; --kpi-fundo1: #fef4f4; --kpi-fundo2: #fbe3e3; --kpi-borda: #f5d0d0; }
.sgpa-kpi-cinza { --kpi-forte: #475569; --kpi-fundo1: #f4f6f9; --kpi-fundo2: #e6ebf1; --kpi-borda: #dbe2ea; }
[data-bs-theme="dark"] .sgpa-kpi {
  --kpi-fundo1: color-mix(in srgb, var(--kpi-forte) 22%, #10141b);
  --kpi-fundo2: color-mix(in srgb, var(--kpi-forte) 10%, #10141b);
  --kpi-borda: color-mix(in srgb, var(--kpi-forte) 40%, #262c38);
}
.sgpa-kpi-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sgpa-kpi-rotulo {
  font-weight: 600;
  color: var(--bs-secondary-color);
}
.sgpa-kpi-icone {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--kpi-forte);
  color: #fff;
  font-size: 1.1rem;
}
.sgpa-kpi-valor {
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.sgpa-kpi-complemento {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
}
.sgpa-kpi-detalhe {
  font-size: 0.82rem;
  color: var(--bs-secondary-color);
}
.sgpa-kpi-variacao {
  font-weight: 700;
}
.sgpa-variacao-bom { color: #0f5c38; }
.sgpa-variacao-ruim { color: #9a3412; }
.sgpa-variacao-neutro { color: var(--bs-body-color); }
[data-bs-theme="dark"] .sgpa-variacao-bom { color: #6ee7a8; }
[data-bs-theme="dark"] .sgpa-variacao-ruim { color: #fdba74; }
.sgpa-kpi-serie {
  width: 100%;
  height: 36px;
  margin-top: 2px;
}
.sgpa-kpi-serie path {
  fill: none;
  stroke: var(--kpi-forte);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
[data-bs-theme="dark"] .sgpa-kpi-serie path {
  stroke: color-mix(in srgb, var(--kpi-forte) 55%, #ffffff);
}

/* Quadro "Precisa de atenção" */
.sgpa-card-atencao {
  display: flex;
  flex-direction: column;
  padding: 16px 16px 8px;
}

.sgpa-atencao {
  margin: 6px -16px 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--sgpa-borda);
}

.sgpa-atencao li + li {
  border-top: 1px solid var(--sgpa-borda);
}

.sgpa-atencao a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 20px;
  color: var(--bs-body-color);
  text-decoration: none;
  transition: background var(--sgpa-transicao);
}

.sgpa-atencao a:hover {
  background: var(--bs-tertiary-bg);
}

.sgpa-atencao-icone {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--sgpa-cor) 12%, transparent);
  color: var(--sgpa-cor);
  flex-shrink: 0;
}

.sgpa-atencao strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
}

.sgpa-atencao strong + span {
  display: block;
  color: var(--bs-secondary-color);
  font-size: 0.8rem;
}

.sgpa-girando .bi {
  animation: sgpa-girar 0.8s linear infinite;
}

@keyframes sgpa-girar {
  to { transform: rotate(360deg); }
}

.sgpa-card-lista .sgpa-card-corpo {
  padding: 6px 0;
}

.sgpa-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sgpa-lista a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--sgpa-borda);
  color: var(--bs-body-color);
  text-decoration: none;
  transition: background var(--sgpa-transicao);
}

.sgpa-lista li:last-child a {
  border-bottom: 0;
}

.sgpa-lista a:hover {
  background: var(--sgpa-azul-claro);
}

.sgpa-lista-principal {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sgpa-lista-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--bs-secondary-color);
  font-size: 0.8rem;
}

.sgpa-etiqueta {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  font-size: 0.72rem;
  font-weight: 600;
}

.sgpa-lista-vazia {
  margin: 0;
  padding: 18px;
  color: var(--bs-secondary-color);
}

/* ---------- Abas ---------- */
.sgpa-abas-lista {
  display: flex;
  gap: 2px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--sgpa-borda);
  overflow-x: auto;
  scrollbar-width: thin;
}

.sgpa-aba {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--bs-secondary-color);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--sgpa-transicao), border-color var(--sgpa-transicao);
}

.sgpa-aba:hover {
  color: var(--bs-body-color);
}

.sgpa-aba[aria-selected="true"] {
  border-bottom-color: var(--sgpa-azul);
  color: var(--sgpa-azul);
}

[data-bs-theme="dark"] .sgpa-aba[aria-selected="true"] {
  border-bottom-color: #6ea0ff;
  color: #6ea0ff;
}

.sgpa-aba-contador {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  font-size: 0.72rem;
  line-height: 18px;
  text-align: center;
}

.sgpa-aba-painel:focus-visible {
  outline: none;
}

/* ---------- Detalhes (ficha) ---------- */
.sgpa-detalhes {
  display: grid;
  gap: 12px 24px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  margin: 0;
}

.sgpa-detalhe dt {
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.sgpa-detalhe dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
}

.sgpa-detalhe dd.sgpa-vazio {
  color: var(--bs-secondary-color);
}

.sgpa-ficha-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  color: var(--bs-secondary-color);
  font-size: 0.9rem;
}

.sgpa-ficha-cabecalho strong {
  color: var(--bs-body-color);
}

.sgpa-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.sgpa-filtros a {
  padding: 5px 12px;
  border: 1px solid var(--sgpa-borda);
  border-radius: 999px;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
}

.sgpa-filtros a[aria-current="page"] {
  border-color: var(--sgpa-azul);
  background: var(--sgpa-azul);
  color: #fff;
}

.sgpa-aviso {
  color: var(--sgpa-laranja);
  font-weight: 500;
}

.sgpa-aviso[hidden] {
  display: none;
}

/* ---------- Grupo de opções ---------- */
.sgpa-opcoes {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.sgpa-opcoes legend {
  float: none;
  width: auto;
  margin-bottom: 6px;
  color: var(--bs-secondary-color);
  font-size: 0.8rem;
  font-weight: 600;
}

.sgpa-opcoes .btn-check:focus-visible + .btn {
  outline: 3px solid #7aa7ff;
  outline-offset: 2px;
}

/* ---------- Atalhos do cliente ---------- */
.sgpa-atalhos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

/* Tráfego do cliente ao vivo (Etapa 7.9f) */
.sgpa-trafego-grafico {
  min-height: 220px;
  border-radius: 8px;
  background: var(--sgpa-fundo-suave, rgba(127, 127, 127, .06));
  overflow: hidden;
}
.sgpa-trafego-grade { stroke: rgba(127, 127, 127, .25); stroke-dasharray: 4 4; }
.sgpa-trafego-escala { fill: currentColor; opacity: .55; font-size: 11px; }
.sgpa-trafego-cor { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; }

/* Fluxo de caixa (19/10/2026): saldo realizado (linha cheia) e projetado (tracejada); R$ 0 em vermelho */
.sgpa-fluxo-grafico { --fluxo-linha: var(--sgpa-azul); --fluxo-zero: var(--sgpa-vermelho); position: relative; min-height: 260px; }
[data-bs-theme="dark"] .sgpa-fluxo-grafico { --fluxo-linha: #6ea0ff; --fluxo-zero: #ff6b6b; }
.sgpa-fluxo-grafico svg { display: block; width: 100%; height: 260px; overflow: visible; }
.sgpa-fluxo-grade { stroke: rgba(127, 127, 127, .22); }
.sgpa-fluxo-escala { fill: currentColor; opacity: .6; font-size: 11px; }
.sgpa-fluxo-zero { stroke: var(--fluxo-zero); stroke-width: 1.5; }
.sgpa-fluxo-linha { fill: none; stroke: var(--fluxo-linha); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sgpa-fluxo-linha-proj { stroke-dasharray: 6 5; }
.sgpa-fluxo-hoje { stroke: currentColor; opacity: .35; stroke-dasharray: 2 3; }
.sgpa-fluxo-guia { stroke: currentColor; opacity: .3; }
.sgpa-fluxo-ponto { fill: var(--fluxo-linha); stroke: var(--bs-body-bg); stroke-width: 2; }
.sgpa-fluxo-dica { position: absolute; pointer-events: none; background: var(--bs-body-bg); color: var(--bs-body-color); border: 1px solid var(--sgpa-borda, rgba(127,127,127,.3));
  border-radius: 8px; padding: .4rem .6rem; font-size: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.12); white-space: nowrap; transform: translate(-50%, -110%); }
.sgpa-fluxo-dica strong { display: block; }

/* DRE e orçamento (19/10/2026) */
.sgpa-dre th, .sgpa-dre td { white-space: nowrap; }
.sgpa-dre-grupo th, .sgpa-dre-grupo td { font-weight: 600; border-top: 1px solid var(--sgpa-borda, rgba(127,127,127,.3)); }
.sgpa-dre-conta td:first-child { padding-left: 1.25rem; }
.sgpa-dre-subtotal th, .sgpa-dre-subtotal td { font-weight: 700; background: var(--sgpa-fundo-suave, rgba(127,127,127,.06)); }
.sgpa-orcamento-valor { min-width: 84px; }

/* Quitar título (7.7e): forma de pagamento não escolhida */
.sgpa-opcoes-invalida .btn {
  border-color: var(--bs-danger);
}

/* Módulo de OLTs (Etapa 9): comandos que vão para a OLT */
.sgpa-comandos {
  max-height: 320px;
  overflow: auto;
  padding: 12px 14px;
  border: 1px solid var(--sgpa-borda);
  border-radius: 8px;
  background: var(--bs-tertiary-bg);
  font-size: 0.82rem;
  white-space: pre-wrap;
}

/* Sinal óptico da ONU (Etapa 9): barra com as zonas e selo em texto (admin/assets/js/componentes/sinal.js) */
.sgpa-sinal { --sgpa-s-critico: #c62828; --sgpa-s-fraco: #e8590c; --sgpa-s-atencao: #e6a700; --sgpa-s-bom: #1e8e5a; --sgpa-s-alto: #b0256b; min-width: 220px; }
[data-bs-theme="dark"] .sgpa-sinal { --sgpa-s-critico: #ff6b6b; --sgpa-s-fraco: #ff922b; --sgpa-s-atencao: #ffd43b; --sgpa-s-bom: #4cc38a; --sgpa-s-alto: #f06595; }
.sgpa-sinal-linha { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.sgpa-sinal-valor { font-variant-numeric: tabular-nums; }
.sgpa-sinal-selo { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; color: #fff; background: var(--bs-secondary); }
.sgpa-sinal-selo.sgpa-sinal-critico { background: var(--sgpa-s-critico); }
.sgpa-sinal-selo.sgpa-sinal-fraco { background: var(--sgpa-s-fraco); }
.sgpa-sinal-selo.sgpa-sinal-atencao { background: var(--sgpa-s-atencao); color: #1f1f1f; }
.sgpa-sinal-selo.sgpa-sinal-bom { background: var(--sgpa-s-bom); }
.sgpa-sinal-selo.sgpa-sinal-alto { background: var(--sgpa-s-alto); }
.sgpa-sinal-barra { position: relative; height: 10px; margin-top: 0.4rem; border-radius: 999px; overflow: visible; background: var(--bs-tertiary-bg); }
.sgpa-sinal-zona { position: absolute; top: 0; bottom: 0; opacity: 0.85; }
.sgpa-sinal-zona:first-child { border-radius: 999px 0 0 999px; }
.sgpa-sinal-zona:nth-last-child(2) { border-radius: 0 999px 999px 0; }
.sgpa-sinal-zona.sgpa-sinal-critico { background: var(--sgpa-s-critico); }
.sgpa-sinal-zona.sgpa-sinal-fraco { background: var(--sgpa-s-fraco); }
.sgpa-sinal-zona.sgpa-sinal-atencao { background: var(--sgpa-s-atencao); }
.sgpa-sinal-zona.sgpa-sinal-bom { background: var(--sgpa-s-bom); }
.sgpa-sinal-zona.sgpa-sinal-alto { background: var(--sgpa-s-alto); }
.sgpa-sinal-marca { position: absolute; top: -4px; width: 4px; height: 18px; margin-left: -2px; border-radius: 2px; background: var(--bs-body-color); box-shadow: 0 0 0 2px var(--bs-body-bg); }
.sgpa-sinal-extra { margin-top: 0.35rem; font-size: 0.8rem; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.sgpa-sinal-compacta { min-width: 160px; }
.sgpa-sinal-compacta .sgpa-sinal-barra { height: 6px; margin-top: 0.3rem; }
.sgpa-sinal-compacta .sgpa-sinal-marca { top: -3px; height: 12px; }

/* Caixas da rede óptica (Etapa 9): mapa, ocupação, portas e fotos */
.sgpa-mapa { height: 320px; border-radius: var(--sgpa-raio); border: 1px solid var(--sgpa-borda); z-index: 0; }
.sgpa-mapa-grande { height: min(70vh, 560px); }
.sgpa-mapa-icone { background: none; border: 0; }
.sgpa-mapa-ponto { display: block; width: 18px; height: 18px; border: 3px solid #fff; box-shadow: 0 1px 4px rgb(0 0 0 / 45%); }
.sgpa-mapa-cto { border-radius: 50%; }
.sgpa-mapa-ceo { border-radius: 3px; }
.sgpa-mapa-verde { background: #1e8e5a; }
.sgpa-mapa-laranja { background: #d9730d; }
.sgpa-mapa-vermelho { background: #c62828; }
.sgpa-mapa-rotulo { position: absolute; left: 22px; top: -1px; white-space: nowrap; font-size: 0.72rem; font-weight: 700; color: #1f1f1f; text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
.sgpa-ocupacao { min-width: 120px; }
.sgpa-ocupacao-texto { display: block; font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.sgpa-ocupacao-barra { display: block; height: 6px; margin-top: 0.25rem; border-radius: 999px; background: var(--bs-tertiary-bg); overflow: hidden; }
.sgpa-ocupacao-barra > span { display: block; height: 100%; background: var(--sgpa-cor, var(--sgpa-verde)); }
.sgpa-portas { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.75rem; }
.sgpa-porta { --sgpa-porta-cor: #1e8e5a; border: 1px solid var(--sgpa-borda); border-left: 6px solid var(--sgpa-porta-cor); border-radius: var(--sgpa-raio); padding: 0.6rem 0.75rem; background: var(--bs-body-bg); min-height: 96px; }
.sgpa-porta-ocupada { --sgpa-porta-cor: #1f5fbf; }
.sgpa-porta-reservada { --sgpa-porta-cor: #e6a700; }
.sgpa-porta-defeito { --sgpa-porta-cor: #c62828; }
[data-bs-theme="dark"] .sgpa-porta-ocupada { --sgpa-porta-cor: #6ea0ff; }
[data-bs-theme="dark"] .sgpa-porta-livre { --sgpa-porta-cor: #4cc38a; }
[data-bs-theme="dark"] .sgpa-porta-defeito { --sgpa-porta-cor: #ff6b6b; }
.sgpa-porta-numero { font-weight: 700; }
.sgpa-porta-situacao { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--bs-secondary-color); }
.sgpa-porta-cliente { display: block; margin-top: 0.25rem; font-weight: 600; overflow-wrap: anywhere; }
.sgpa-porta-login, .sgpa-porta-obs { font-size: 0.78rem; color: var(--bs-secondary-color); overflow-wrap: anywhere; }
.sgpa-porta-acoes { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.sgpa-porta-acoes .form-control { width: 100%; }
.sgpa-porta-busca { width: 100%; max-height: 220px; overflow: auto; }
.sgpa-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; }
.sgpa-foto { margin: 0; border: 1px solid var(--sgpa-borda); border-radius: var(--sgpa-raio); overflow: hidden; background: var(--bs-body-bg); }
.sgpa-foto img { display: block; width: 100%; height: 160px; object-fit: cover; }
.sgpa-foto figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; padding: 0.5rem 0.6rem; font-size: 0.85rem; }
.sgpa-foto figcaption small { flex-basis: 100%; color: var(--bs-secondary-color); }
.sgpa-foto figcaption .btn { margin-left: auto; }
.sgpa-porta-pct { font-weight: 600; color: var(--bs-secondary-color); }
.sgpa-porta-perda { display: inline-block; margin-left: 0.4rem; padding: 0 0.35rem; border-radius: 4px; font-size: 0.72rem; font-weight: 600; background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
.sgpa-orc-etapas { padding-left: 1.2rem; margin-bottom: 0.75rem; font-variant-numeric: tabular-nums; }
.sgpa-orc-etapas li { margin-bottom: 0.15rem; }
.sgpa-orc-portas { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-variant-numeric: tabular-nums; }
.sgpa-orc-porta { white-space: nowrap; }
.sgpa-campo-codigo { font-size: 1.35rem; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.sgpa-campo-distancia { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sgpa-campo-caixa .btn { min-height: 44px; }

/* Etapa 11: histórico do sinal óptico (aba Fibra) */
.sgpa-sh-onu + .sgpa-sh-onu { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--sgpa-borda, var(--bs-border-color)); }
.sgpa-sh-resumo.sgpa-sinal { min-width: 0; }
.sgpa-sh-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.5rem 1rem; margin-bottom: 0.5rem; }
.sgpa-sh-item { display: flex; flex-direction: column; gap: 0.15rem; font-variant-numeric: tabular-nums; }
.sgpa-sh-rotulo { font-size: 0.75rem; color: var(--bs-secondary-color); }
.sgpa-sh-grafico { min-height: 280px; }

/* Etapa 12: Configurações > Recursos */
.sgpa-recurso-perfis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; }
.sgpa-recurso-perfil.ativo .btn { border-color: var(--sgpa-primaria, var(--bs-primary)); box-shadow: inset 0 0 0 1px var(--sgpa-primaria, var(--bs-primary)); }
.sgpa-recurso { scroll-margin-top: 80px; }
.sgpa-recurso:target { animation: sgpa-recurso-destaque 1.6s ease-out; }
@keyframes sgpa-recurso-destaque { from { background: rgb(var(--sgpa-primaria-rgb, 13, 110, 253) / 12%); } to { background: transparent; } }
.sgpa-recurso-detalhe { max-height: 320px; overflow: auto; margin: 0.25rem 0 0; padding: 0.5rem; font-size: 0.75rem; white-space: pre-wrap; background: var(--bs-tertiary-bg); border-radius: 6px; }

/* ---------- Painel, quadros (13/10/2026, prévia aprovada) ---------- */
@media (min-width: 576px) {
  .sgpa-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .sgpa-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1400px) {
  .sgpa-kpis { grid-template-columns: repeat(var(--sgpa-kpis, 6), minmax(0, 1fr)); }
}
.sgpa-painel-linha {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 16px;
}
@media (min-width: 992px) {
  .sgpa-linha-2-1-1,
  .sgpa-linha-1-1-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sgpa-linha-2-1-1 > :first-child { grid-column: 1 / -1; }
  .sgpa-linha-2-1 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
@media (min-width: 1400px) {
  .sgpa-linha-2-1-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
  .sgpa-linha-2-1-1 > :first-child { grid-column: auto; }
  .sgpa-linha-1-1-1 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sgpa-linha-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
.sgpa-quadro {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 18px 20px;
  border-radius: 14px;
}
.sgpa-quadro .sgpa-grafico-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 0;
}
.sgpa-quadro-link {
  font-size: 0.85rem;
  font-weight: 600;
}
.sgpa-quadro-miolo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
}
.sgpa-quadro-sub {
  display: flex;
  justify-content: space-between;
  margin: 4px 0 0;
  color: var(--bs-secondary-color);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sgpa-quadro-sub .sgpa-quadro-link {
  letter-spacing: 0;
  text-transform: none;
}
.sgpa-quadro-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--sgpa-borda);
  font-weight: 600;
}
.sgpa-quadro-total strong { font-size: 1.15rem; }
.sgpa-total-verde { color: #157347; }
[data-bs-theme="dark"] .sgpa-total-verde { color: #4cc38a; }

/* barras (formas de pagamento, concentradores) */
.sgpa-barras {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sgpa-barra-linha {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.sgpa-barra-meta {
  color: var(--bs-secondary-color);
  font-size: 0.8rem;
}
.sgpa-barra {
  height: 9px;
  border-radius: 5px;
  background: var(--bs-tertiary-bg);
  overflow: hidden;
}
.sgpa-barra-valor { height: 100%; border-radius: 5px; }
.sgpa-barra-azul { background: #1f5fbf; }
.sgpa-barra-teal { background: #0f766e; }
.sgpa-barra-verde { background: #157347; }
.sgpa-barra-laranja { background: #ea580c; }
.sgpa-barra-cinza { background: #64748b; }
.sgpa-barra-sem { background: repeating-linear-gradient(45deg, #f6d5cc 0 6px, #fff1e8 6px 12px); }
[data-bs-theme="dark"] .sgpa-barra-sem { background: repeating-linear-gradient(45deg, #5c2c1c 0 6px, #2a1a14 6px 12px); }

/* últimas baixas */
.sgpa-baixas {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sgpa-baixas li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}
.sgpa-baixas li + li { border-top: 1px solid var(--sgpa-borda); }
.sgpa-baixa-sigla {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 800;
}
.sgpa-sigla-azul { background: #e8f0fc; color: #163f80; }
.sgpa-sigla-teal { background: #ddf2ef; color: #0b4f4a; }
.sgpa-sigla-verde { background: #e1f3e9; color: #0f5132; }
.sgpa-sigla-laranja { background: #ffe9db; color: #9a3412; }
.sgpa-sigla-cinza { background: #e6ebf1; color: #334155; }
[data-bs-theme="dark"] .sgpa-baixa-sigla { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.sgpa-baixa-texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.sgpa-baixa-texto strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sgpa-baixa-texto span {
  color: var(--bs-secondary-color);
  font-size: 0.8rem;
}

/* "Precisa de atenção" em destaque, com etiqueta na cor do item */
.sgpa-quadro.sgpa-card-atencao {
  border-color: #f6d5cc;
  background: #fff8f6;
}
[data-bs-theme="dark"] .sgpa-quadro.sgpa-card-atencao {
  border-color: #5c2c1c;
  background: color-mix(in srgb, #b91c1c 10%, var(--bs-body-bg));
}
.sgpa-card-atencao .sgpa-grafico-titulo { color: #9b1c1c; }
[data-bs-theme="dark"] .sgpa-card-atencao .sgpa-grafico-titulo { color: #ff8a8a; }
.sgpa-quadro .sgpa-atencao {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  border-top: 0;
}
.sgpa-quadro .sgpa-atencao li + li { border-top: 0; }
.sgpa-quadro .sgpa-atencao a {
  padding: 10px 12px;
  border: 1px solid #f3e0da;
  border-radius: 10px;
  background: var(--bs-body-bg);
}
[data-bs-theme="dark"] .sgpa-quadro .sgpa-atencao a { border-color: var(--sgpa-borda); }
.sgpa-atencao-etiqueta {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--sgpa-cor);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5;
}
.sgpa-cor-vermelho .sgpa-atencao-etiqueta { background: #b91c1c; }
.sgpa-cor-laranja .sgpa-atencao-etiqueta { background: #c2410c; }
.sgpa-cor-azul .sgpa-atencao-etiqueta { background: #1f5fbf; }
.sgpa-cor-cinza .sgpa-atencao-etiqueta { background: #475569; }
.sgpa-cor-verde .sgpa-atencao-etiqueta { background: #157347; }
.sgpa-card-atendimento .sgpa-card-corpo { padding: 0; }
.sgpa-quadro .sgpa-grafico { min-height: 200px; }

/* Barra de ações fixa no rodapé (13/10/2026, editar cliente; padrão dos formulários desde 14/10/2026): o conteúdo tem
   overflow-x próprio, por isso fixed e não sticky. A folga embaixo vale para a página inteira (a barra pode estar dentro de um card). */
.sgpa-form-acoes-fixo {
  position: fixed;
  right: 0;
  bottom: 0;
  left: var(--sgpa-sidebar-atual, 0px);
  z-index: 1020;
  margin: 0;
  padding: 12px 24px;
  border-top: 1px solid var(--sgpa-borda);
  background: var(--bs-body-bg);
  box-shadow: 0 -6px 16px rgb(16 24 40 / 8%);
  transition: left var(--sgpa-transicao);
}
html.sgpa-em-janela .sgpa-form-acoes-fixo { left: 0; }
.sgpa-conteudo:has(.sgpa-form-acoes-fixo) { padding-bottom: 96px; }
@media (max-width: 575.98px) {
  .sgpa-form-acoes-fixo { padding: 10px 16px; }
  .sgpa-conteudo:has(.sgpa-form-acoes-fixo) { padding-bottom: 150px; }
}
@media print {
  .sgpa-form-acoes-fixo { position: static; box-shadow: none; }
}

/* Cobrança por bairro (13/10/2026): filtros numa linha e lista compacta (cada título numa linha) */
.sgpa-filtro-rota { padding: 16px 16px 12px; }
.sgpa-filtro-rota .sgpa-form-grade { align-items: center; }
.sgpa-filtro-botoes {
  display: flex;
  gap: 8px;
}
.sgpa-filtro-botoes .sgpa-btn { flex: 1 1 auto; min-height: 58px; justify-content: center; }
.sgpa-tabela-compacta .table { font-size: 0.8rem; }
.sgpa-tabela-compacta .table > :not(caption) > * > * {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
  white-space: nowrap;
}
.sgpa-tabela-compacta .sgpa-situacao { font-size: 0.72rem; }