/* ENAPOR Konekta — a Gestão (p. 10, 13 e 28 do conceito visual): os separadores, os Conectores (a lista com o Exact vivo e os outros sete
   esbatidos, e o painel do Exact com o «Testar ligação») e os separadores esbatidos (Perfis, Permissões, Consumo, Auditoria e Alertas).
   Quem os monta é js/gestao.js. O Conhecimento é de css/conhecimento.css; o estado do Exact, o disco do ícone e os contadores são de
   css/agentes.css; o interruptor desativado é de css/conversa.css; o «Próxima fase» é de css/proxima.css. */

/* ---------------------------------------------------------------- os separadores */

.gs-abas { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 0 0 1.2rem; border-bottom: 1px solid var(--borda); }
.gs-abas a {
  margin-bottom: -1px; padding: 0.55rem 0.1rem; border-bottom: 2px solid transparent; color: var(--dim); font-weight: 600; text-decoration: none;
  transition: color var(--dur-rapida), border-color var(--dur-rapida);
}
.gs-abas a:hover { color: var(--texto); }
.gs-abas a[aria-current="page"] { color: var(--azul-texto); border-bottom-color: var(--azul); }

/* ---------------------------------------------------------------- o que os quadros têm em comum */

.gs-quadro { min-width: 0; padding: 1rem 1.1rem 1.1rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.gs-quadro h2 { margin: 0; font-size: var(--t-base); font-weight: 700; }
.gs-quadro-cab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.6rem 1rem; margin-bottom: 0.8rem; }
.gs-quadro-frase { margin: 0.1rem 0 0.8rem; color: var(--dim); font-size: var(--t-peq); }
.gs-quadro-cab .gs-quadro-frase { margin-bottom: 0; }
.gs-quadro-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.gs-pe { margin: 0.9rem 0 0; color: var(--dim); font-size: var(--t-peq); }
/* duas linhas: a de cima a negrito, a de baixo esbatida */
.gs-duas { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.gs-duas > small { color: var(--dim); font-size: 0.78rem; }
.gs-pequeno { font-size: var(--t-peq); }

/* ---------------------------------------------------------------- Conectores (p. 10) */

/* a lista e, ao lado, o painel do Exact; estreito, o painel vai por baixo da lista */
.gs-con { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.gs-lista { list-style: none; margin: 0; padding: 0; }
.gs-item { padding: 0 0.6rem; border-top: 1px solid var(--borda); }
.gs-item-cab { border-top: 0; border-radius: var(--raio-peq); background: var(--superficie-2); color: var(--dim); font-size: 0.78rem; font-weight: 650; }
.gs-item-cab .gs-linha { padding: 0.45rem 0; }
.gs-item-vivo { border-radius: var(--raio-peq); background: var(--correr-fundo); }
/* a linha e o que vem depois dela: o selo (de um conector esbatido) ou um espaço do mesmo tamanho (os outros), para as colunas alinharem */
.gs-fila { display: flex; align-items: center; gap: 0.6rem; }
.gs-fila > .gs-linha, .gs-item .proxima-corpo { flex: 1; min-width: 0; }
.gs-fim, .gs-item .proxima-selo { flex: none; width: 7rem; }
.gs-item .proxima-selo { justify-content: center; }
.gs-linha {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(4.5rem, auto) 1.2rem; align-items: center; column-gap: 0.8rem;
  padding: 0.6rem 0;
}
.gs-con-nome { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.gs-con-nome strong { min-width: 0; overflow-wrap: anywhere; font-weight: 650; }
.gs-con-nome .ag-ico { flex: none; width: 2rem; height: 2rem; border-radius: 8px; }
.gs-estado { min-width: 0; }
.gs-consultas { display: flex; flex-direction: column; align-items: flex-end; text-align: right; line-height: 1.25; font-variant-numeric: tabular-nums; }
.gs-consultas small { color: var(--dim); font-size: 0.75rem; font-weight: 500; }
.gs-chevron { justify-self: end; color: var(--dim); }

/* o painel do Exact: quem é, o motivo e os avisos, o estado, a base e o Connector, e os botões */
.gs-painel { display: flex; flex-direction: column; gap: 0.9rem; }
.gs-painel-cab { display: flex; align-items: center; gap: 0.8rem; }
.gs-painel-cab h2, .gs-painel-cab h3 { margin: 0; font-size: var(--t-m); font-weight: 700; }
.gs-painel-cab p { margin: 0; color: var(--dim); font-size: var(--t-peq); }
.gs-avisos:empty, .gs-resultado:empty { display: none; }
.gs-avisos .alerta, .gs-falha, .gs-resultado .alerta { margin: 0 0 0.5rem; font-size: var(--t-peq); }
.gs-avisos .alerta:last-child, .gs-resultado .alerta { margin-bottom: 0; }
.gs-falha p, .gs-resultado .alerta p { margin: 0.2rem 0 0; }
.gs-falha .linha { margin-top: 0.6rem; }
.gs-fios { border-top: 1px solid var(--borda); }
.gs-fios .esqueleto { padding: 0.8rem 0 0; }
.gs-fio { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: 0.8rem; padding: 0.7rem 0; border-bottom: 1px solid var(--borda); }
.gs-fio-rotulo { font-weight: 650; }
.gs-fio-valor { min-width: 0; display: flex; flex-direction: column; line-height: 1.35; overflow-wrap: anywhere; }
.gs-fio-valor small { color: var(--dim); font-size: var(--t-peq); }
.gs-acoes { display: flex; flex-direction: column; gap: 0.6rem; }
.gs-testar, .gs-suspender { width: 100%; min-height: 2.6rem; }
.gs-so-admin { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.6rem 0.8rem; border-radius: var(--raio-peq); background: var(--superficie-2); color: var(--dim); font-size: var(--t-peq); }

@media (min-width: 1100px) {
  .gs-con { grid-template-columns: minmax(0, 1fr) minmax(19rem, 24rem); }
  .gs-painel { position: sticky; top: calc(var(--faixa) + 1rem); }
}

/* estreito: o nome e o estado numa coluna, as consultas ao lado, e o selo por baixo (sem a seta, sem o cabeçalho e sem o espaço do selo) */
@media (max-width: 760px) {
  .gs-item-cab, .gs-fim, .gs-chevron { display: none; }
  .gs-linha { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nome num" "estado num"; row-gap: 0.1rem; }
  .gs-con-nome { grid-area: nome; }
  .gs-estado { grid-area: estado; padding-left: 2.7rem; }
  .gs-consultas { grid-area: num; }
  .gs-item .proxima-item { flex-wrap: wrap; gap: 0; }
  .gs-item .proxima-corpo { flex-basis: 100%; }
  .gs-item .proxima-selo { width: auto; margin: 0 0 0.6rem 2.7rem; }
  .gs-fio { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
}

/* ---------------------------------------------------------------- os separadores esbatidos */

.gs-esbatido { display: flex; flex-direction: column; gap: 1rem; }
.gs-demo { margin: 0; color: var(--dim); font-size: 0.78rem; text-align: right; }
.gs-tabela th { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.gs-tabela td { vertical-align: middle; }
.gs-tabela th.num { text-align: right; }
/* o perfil e a regra: o disco do ícone e as duas linhas */
.gs-perfil { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.gs-perfil .ag-ico { flex: none; width: 2.2rem; height: 2.2rem; }
.gs-seta { width: 2.2rem; text-align: right; color: var(--dim); }

/* Perfis (p. 13): a lista e o detalhe do primeiro */
.gs-perfis { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.gs-perfis tr.ativa td { background: #E4EEFC; }
.gs-detalhe { display: flex; flex-direction: column; gap: 0.9rem; }
.gs-detalhe h3 { margin: 0 0 0.1rem; font-size: var(--t-base); font-weight: 700; }
.gs-detalhe .gs-painel-cab h3 { font-size: var(--t-m); }
.gs-detalhe .gs-painel-cab p { margin: 0.1rem 0 0; }
.gs-secao { padding-top: 0.9rem; border-top: 1px solid var(--borda); }
.gs-fontes, .gs-notas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.gs-fontes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gs-fontes li, .gs-notas li { display: flex; align-items: center; gap: 0.6rem; min-width: 0; padding: 0.5rem 0.6rem; border-radius: var(--raio-peq); background: var(--superficie-2); }
.gs-fontes .ag-ico, .gs-notas .ag-ico { flex: none; width: 2rem; height: 2rem; border-radius: 8px; background: var(--superficie); }
.gs-gerir { width: 100%; min-height: 2.6rem; }
.gs-detalhe .gs-pe { margin-top: 0; }

/* Permissões (p. 12): o que os agentes fazem, não fazem e acrescentam */
.gs-tres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 0.9rem; }
.gs-grupo { padding: 0.9rem 1rem; border: 1px solid var(--borda); border-left-width: 3px; border-radius: var(--raio-peq); background: var(--superficie); }
.gs-grupo h3 { margin: 0; font-size: var(--t-base); font-weight: 700; }
.gs-grupo .gs-quadro-frase { margin-bottom: 0.5rem; }
.gs-grupo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.gs-grupo li { display: flex; align-items: flex-start; gap: 0.5rem; }
.gs-grupo li .ico { margin-top: 0.2rem; }
.gs-grupo-ok { border-left-color: var(--ok); }
.gs-grupo-ok li .ico { color: var(--ok); }
.gs-grupo-erro { border-left-color: var(--erro); }
.gs-grupo-erro li .ico { color: var(--erro); }
.gs-grupo-aviso { border-left-color: var(--aviso); }
.gs-grupo-aviso li .ico { color: var(--aviso); }

/* Consumo: os contadores e a quota de cada perfil */
.gs-quadro .ag-kpis { margin-bottom: 1rem; }
.gs-quota { display: flex; align-items: center; gap: 0.6rem; min-width: 7rem; }
.gs-quando { white-space: nowrap; }
.gs-quota .ag-teto { flex: 1; margin-top: 0; }

/* Alertas (p. 28): os separadores de enfeite, as regras, os canais e o interruptor */
.gs-sub-abas { display: flex; flex-wrap: wrap; gap: 0 1.4rem; margin-bottom: 0.8rem; border-bottom: 1px solid var(--borda); }
.gs-sub-aba { margin-bottom: -1px; padding: 0.4rem 0.1rem; border-bottom: 2px solid transparent; color: var(--dim); font-weight: 600; }
.gs-sub-aba.ativa { color: var(--azul-texto); border-bottom-color: var(--azul); }
.gs-canais { display: flex; gap: 0.3rem; white-space: nowrap; }
.gs-col-ativa { width: 4rem; }
.gs-inativa td { opacity: 0.55; }

@media (min-width: 1100px) {
  .gs-perfis { grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem); }
}

/* a tabela esbatida não desliza (o corpo é inerte): nos ecrãs estreitos saem as colunas que menos dizem */
@media (max-width: 900px) {
  .gs-col-quem, .gs-col-canais { display: none; }
}

@media (max-width: 760px) {
  .gs-col-grav, .gs-col-quota { display: none; }
  .gs-tabela th, .gs-tabela td { padding: 0.55rem 0.5rem; }
  .gs-tabela th, .gs-quando { white-space: normal; }
  .gs-perfil .ag-ico { display: none; }
  .gs-fontes { grid-template-columns: minmax(0, 1fr); }
}