/* _PainelGestao/assets/css/painel.css */

:root {
  --pg-bg:      #f7f7f5;
  --pg-surf:    #ffffff;
  --pg-surf2:   #f1f0ec;
  --pg-txt:     #1a1a19;
  --pg-txt2:    #5f5e5a;
  --pg-txt3:    #898781;
  --pg-borda:   #e1e0d9;
  --pg-azul:    #2a78d6;
  --pg-verde:   #1baf7a;
  --pg-amarelo: #eda100;
  --pg-vermelho:#e34948;
  --pg-raio:    8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 24px 28px 60px;
  background: var(--pg-bg);
  color: var(--pg-txt);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

h1 { margin: 0; font-size: 20px; font-weight: 500; }
h2 { margin: 0 0 10px; font-size: 15px; font-weight: 500; }

.pg-sub   { margin: 2px 0 0; font-size: 13px; color: var(--pg-txt2); }
.pg-nota  { margin: -4px 0 10px; font-size: 12px; color: var(--pg-txt3); }

/* ----------------------------------------------------------------- */
/* Topo                                                              */
/* ----------------------------------------------------------------- */
.pg-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 20px;
  border-bottom: 1px solid var(--pg-borda);
}

.pg-filtros { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.pg-filtros select,
.pg-filtros button {
  height: 34px; padding: 0 10px; font-size: 13px;
  border: 1px solid var(--pg-borda); border-radius: var(--pg-raio);
  background: var(--pg-surf); color: var(--pg-txt); cursor: pointer;
  font-family: inherit;
}
.pg-filtros select { max-width: 190px; }
.pg-filtros button:hover:not(:disabled) { background: var(--pg-surf2); }
.pg-filtros button:disabled { opacity: .6; cursor: default; }

.pg-sair {
  font-size: 13px; color: var(--pg-txt2); text-decoration: none;
  padding: 0 8px; height: 34px; line-height: 34px;
}
.pg-sair:hover { color: var(--pg-txt); text-decoration: underline; }

/* ----------------------------------------------------------------- */
/* Cards                                                             */
/* ----------------------------------------------------------------- */
.pg-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin-bottom: 12px;
}

.pg-card { background: var(--pg-surf2); border-radius: var(--pg-raio); padding: 14px 16px; }
.pg-card-label { margin: 0; font-size: 13px; color: var(--pg-txt2); }
.pg-card-valor { margin: 4px 0 0; font-size: 26px; font-weight: 500; }
.pg-card-var   { margin: 2px 0 0; font-size: 12px; color: var(--pg-txt3); min-height: 16px; }
.pg-card-var.sobe  { color: var(--pg-verde); }
.pg-card-var.desce { color: var(--pg-vermelho); }

/* ----------------------------------------------------------------- */
/* Indices                                                           */
/* ----------------------------------------------------------------- */
.pg-indices {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin-bottom: 28px;
}

.pg-indice {
  display: block; text-decoration: none; color: inherit;
  background: var(--pg-surf); border: 1px solid var(--pg-borda);
  border-radius: 12px; padding: 12px 16px;
  transition: border-color .15s;
}
.pg-indice:hover { border-color: var(--pg-txt3); }

.pg-indice-label { margin: 0; font-size: 12px; color: var(--pg-txt2); }
.pg-indice-valor { margin: 2px 0 8px; font-size: 22px; font-weight: 500; }
.pg-indice-nota  { margin: 8px 0 0; font-size: 11px; color: var(--pg-txt3); }

.pg-barra   { display: block; height: 4px; background: var(--pg-surf2); border-radius: 2px; }
.pg-barra i { display: block; height: 4px; border-radius: 2px; width: 0; transition: width .3s; }

/* ----------------------------------------------------------------- */
/* Blocos e graficos                                                 */
/* ----------------------------------------------------------------- */
.pg-bloco {
  background: var(--pg-surf); border: 1px solid var(--pg-borda);
  border-radius: 12px; padding: 16px 18px; margin-bottom: 20px;
}

.pg-duas { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; }
@media (max-width: 900px) { .pg-duas { grid-template-columns: 1fr; } }

.pg-chart { position: relative; width: 100%; }

.pg-legenda {
  display: flex; flex-wrap: wrap; gap: 16px;
  margin-bottom: 10px; font-size: 12px; color: var(--pg-txt2);
}
.pg-legenda span { display: flex; align-items: center; gap: 5px; }
.pg-legenda .sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.pg-legenda .ln { width: 14px; height: 2px; display: inline-block; }

/* ----------------------------------------------------------------- */
/* Listas                                                            */
/* ----------------------------------------------------------------- */
.pg-linha {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--pg-borda);
  font-size: 13px;
}
.pg-linha:last-child { border-bottom: none; }
.pg-linha.rodape { color: var(--pg-txt2); font-size: 12px; }
.pg-linha .dir { display: flex; align-items: center; gap: 12px; }
.pg-linha em { font-style: normal; font-size: 12px; color: var(--pg-txt2); }
.pg-linha a { color: var(--pg-azul); text-decoration: none; }
.pg-linha a:hover { text-decoration: underline; }
.pg-linha .vazio { color: var(--pg-txt3); }

.pg-badge {
  font-size: 12px; font-weight: 500; padding: 2px 10px;
  border-radius: var(--pg-raio); min-width: 36px; text-align: center;
}
.pg-badge.zero    { background: var(--pg-surf2); color: var(--pg-txt3); }
.pg-badge.neutro  { background: var(--pg-surf2); color: var(--pg-txt2); }
.pg-badge.alerta  { background: #faeeda; color: #854f0b; }
.pg-badge.critico { background: #fcebeb; color: #a32d2d; }

/* ----------------------------------------------------------------- */
/* Estados                                                           */
/* ----------------------------------------------------------------- */
.pg-carregando { padding: 40px 0; text-align: center; color: var(--pg-txt3); font-size: 14px; }
.pg-conteudo[hidden], [hidden] { display: none !important; }

.pg-erro-box {
  background: #fcebeb; color: #a32d2d; border: 1px solid #f7c1c1;
  border-radius: var(--pg-raio); padding: 12px 16px; font-size: 14px;
}

.pg-cache { margin: 8px 0 0; font-size: 11px; color: var(--pg-txt3); text-align: right; }

/* ----------------------------------------------------------------- */
/* Login                                                             */
/* ----------------------------------------------------------------- */
body.pg-login {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 20px;
}

.pg-login-box {
  width: 100%; max-width: 340px;
  background: var(--pg-surf); border: 1px solid var(--pg-borda);
  border-radius: 12px; padding: 28px 26px; text-align: center;
}
.pg-login-box form { margin-top: 20px; text-align: left; }
.pg-login-box label { display: block; font-size: 13px; color: var(--pg-txt2); margin-bottom: 6px; }
.pg-login-box input {
  width: 100%; height: 38px; padding: 0 10px; font-size: 15px;
  border: 1px solid var(--pg-borda); border-radius: var(--pg-raio);
  background: var(--pg-bg); font-family: inherit;
}
.pg-login-box input:focus { outline: none; border-color: var(--pg-azul); }
.pg-login-box button {
  width: 100%; height: 38px; margin-top: 14px; font-size: 14px;
  border: none; border-radius: var(--pg-raio);
  background: var(--pg-txt); color: #fff; cursor: pointer; font-family: inherit;
}
.pg-login-box button:hover { background: #000; }

.pg-erro {
  margin: 16px 0 0; padding: 8px 12px; font-size: 13px;
  background: #fcebeb; color: #a32d2d; border-radius: var(--pg-raio);
}
.pg-rodape { margin: 20px 0 0; font-size: 11px; color: var(--pg-txt3); }


/* ----------------------------------------------------------------- */
/* Abas                                                              */
/* ----------------------------------------------------------------- */
.pg-topo { align-items: flex-start; }
.pg-titulo { flex: 0 0 auto; }

.pg-abas {
  display: flex; gap: 2px; order: 3; flex: 1 1 100%;
  margin-top: 4px; padding: 3px;
  background: var(--pg-surf2); border-radius: 10px;
  width: fit-content;
}

.pg-aba {
  border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--pg-txt2);
  padding: 7px 18px; border-radius: 7px; transition: background .15s, color .15s;
}
.pg-aba:hover { color: var(--pg-txt); }
.pg-aba.ativa {
  background: var(--pg-surf); color: var(--pg-txt); font-weight: 500;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

.pg-nota-solta { margin: -8px 0 16px; }

/* ----------------------------------------------------------------- */
/* Aviso de mes em curso                                             */
/* ----------------------------------------------------------------- */
.pg-aviso {
  margin: 0 0 18px; padding: 10px 14px; font-size: 13px;
  background: #faeeda; color: #854f0b;
  border: 1px solid #efd9b4; border-radius: var(--pg-raio);
}

/* ----------------------------------------------------------------- */
/* Card com tooltip (Capelaes ativos)                                */
/* ----------------------------------------------------------------- */
.pg-card-clicavel { position: relative; cursor: default; outline: none; }
.pg-card-clicavel.tem-lista { cursor: pointer; }
.pg-card-clicavel.tem-lista:focus-visible { box-shadow: 0 0 0 2px var(--pg-azul); }

.pg-tooltip {
  position: absolute; z-index: 20; top: calc(100% + 6px); right: 0;
  min-width: 240px; max-width: 320px; max-height: 300px; overflow-y: auto;
  padding: 12px 14px; font-size: 12px; line-height: 1.6;
  background: var(--pg-surf); color: var(--pg-txt);
  border: 1px solid var(--pg-borda); border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  opacity: 0; visibility: hidden; transition: opacity .15s;
}
.pg-tooltip strong { display: block; margin-bottom: 6px; font-weight: 500; color: var(--pg-txt2); }
.pg-tooltip ul { margin: 0; padding-left: 16px; }

.pg-card-clicavel.tem-lista:hover .pg-tooltip,
.pg-card-clicavel.aberto .pg-tooltip { opacity: 1; visibility: visible; }

/* ----------------------------------------------------------------- */
/* Lista de vinculos capelao x empresas                              */
/* ----------------------------------------------------------------- */
.pg-linha.vinculo { align-items: flex-start; }
.pg-linha.vinculo small {
  display: block; margin-top: 2px; font-size: 12px;
  color: var(--pg-txt2); line-height: 1.5;
}

@media (max-width: 760px) {
  .pg-abas { width: 100%; }
  .pg-aba { flex: 1; padding: 7px 8px; }
}


/* ----------------------------------------------------------------- */
/* Logo                                                              */
/* ----------------------------------------------------------------- */
.pg-logo { display: block; height: 34px; width: auto; margin-bottom: 8px; }
.pg-login-box .pg-logo { margin: 0 auto 16px; }

.pg-card-comp { margin: 2px 0 0; font-size: 12px; color: var(--pg-azul); min-height: 16px; }

/* ----------------------------------------------------------------- */
/* Paginas de relatorio                                              */
/* ----------------------------------------------------------------- */
.pg-relatorio .pg-topo { align-items: flex-end; }

.pg-tabela {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.pg-tabela th {
  text-align: left; font-weight: 500; color: var(--pg-txt2);
  padding: 8px 10px; border-bottom: 1px solid var(--pg-borda);
  white-space: nowrap;
}
.pg-tabela td {
  padding: 8px 10px; border-bottom: 1px solid var(--pg-borda);
  vertical-align: middle;
}
.pg-tabela tbody tr:hover { background: var(--pg-surf2); }
.pg-tabela .n { text-align: right; }
.pg-tabela .dim { color: var(--pg-txt3); }
.pg-tabela tfoot td {
  border-top: 2px solid var(--pg-borda); border-bottom: none;
  font-weight: 500; background: var(--pg-surf2);
}
.pg-tabela.estreita { max-width: 520px; }
.pg-tabela .vazio { color: var(--pg-txt3); }

.pg-badge.ok { background: #e3f5ed; color: #0f6b4a; }

.pg-colunas {
  columns: 3; column-gap: 28px; font-size: 13px; line-height: 1.9;
}
.pg-colunas span { display: block; break-inside: avoid; }
@media (max-width: 900px) { .pg-colunas { columns: 2; } }
@media (max-width: 600px) { .pg-colunas { columns: 1; } }


/* ----------------------------------------------------------------- */
/* Marca e dados da associacao                                       */
/* ----------------------------------------------------------------- */
.pg-marca { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pg-marca .pg-logo { height: 38px; width: auto; margin: 0; flex: 0 0 auto; }

.pg-assoc { display: flex; flex-direction: column; line-height: 1.35; }
.pg-assoc strong { font-size: 12px; font-weight: 600; color: var(--pg-txt); }
.pg-assoc span  { font-size: 11px; color: var(--pg-txt2); }

/* ----------------------------------------------------------------- */
/* Subtemas                                                          */
/* ----------------------------------------------------------------- */
.pg-subtemas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 20px 28px;
}

.pg-subtema-grupo { break-inside: avoid; }

.pg-subtema-cab {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; padding-bottom: 6px; margin-bottom: 8px;
  border-bottom: 1px solid var(--pg-borda);
}
.pg-subtema-nome {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--pg-txt);
}
.pg-subtema-nome .sw {
  width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex: 0 0 auto;
}
.pg-subtema-tot { font-size: 12px; color: var(--pg-txt2); white-space: nowrap; }

.pg-subtema-item {
  display: grid; grid-template-columns: 1fr 70px 34px;
  align-items: center; gap: 8px; padding: 3px 0; font-size: 12px;
}
.pg-subtema-item .rot { color: var(--pg-txt2); }
.pg-subtema-item .bar { height: 5px; background: var(--pg-surf2); border-radius: 3px; }
.pg-subtema-item .bar i { display: block; height: 5px; border-radius: 3px; }
.pg-subtema-item .val { text-align: right; color: var(--pg-txt); }

/* ----------------------------------------------------------------- */
/* Relatorios por mes                                                */
/* ----------------------------------------------------------------- */
.pg-mes { border-bottom: 1px solid var(--pg-borda); }
.pg-mes:last-child { border-bottom: none; }
.pg-mes summary {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding: 10px 0; cursor: pointer;
  font-size: 13px; font-weight: 500; list-style: none;
}
.pg-mes summary::-webkit-details-marker { display: none; }
.pg-mes summary::before {
  content: '▸'; margin-right: 6px; color: var(--pg-txt3);
  transition: transform .15s; display: inline-block;
}
.pg-mes[open] summary::before { transform: rotate(90deg); }
.pg-mes-tot { font-size: 12px; font-weight: 400; color: var(--pg-txt3); margin-left: auto; }
.pg-mes .pg-linha { padding-left: 20px; }

/* ----------------------------------------------------------------- */
/* Visualizador de relatorio                                         */
/* ----------------------------------------------------------------- */
body.pg-visor { display: flex; flex-direction: column; height: 100vh; padding-bottom: 0; }
.pg-pdf {
  flex: 1; width: 100%; border: 1px solid var(--pg-borda);
  border-radius: 12px; background: var(--pg-surf); min-height: 0;
}

/* ----------------------------------------------------------------- */
/* Impressao - usada pelas paginas de relatorio                      */
/* ----------------------------------------------------------------- */
@media print {
  body { padding: 0; background: #fff; }
  .pg-filtros, .pg-sair, .pg-cache { display: none !important; }
  .pg-bloco { border: none; padding: 0; page-break-inside: avoid; }
}