/* =====================================================================
   PADRÃO VISUAL PCNET · ESTRUTURA PEDIDA NO PEGAPROX

   Exceção à regra "só tema" do pcnet-pegaprox.css: aqui entram mudanças de tamanho e
   espaço que o usuário pediu por escrito. Cada bloco começa com "Pedido de <data>" e
   diz o quê; a trava (checar-layout.py --estrutura) recusa regra sem pedido e seletor
   que alcance o aviso de licença. Cores só por token.
   ===================================================================== */


/* Pedido de 2026-09-30: divisão clara na tela inicial entre os grupos de cluster
   (Hospedagem × Interno PCNet). O título do grupo ganha cara de título de seção da casa:
   caixa alta, tracking de .8px, fio embaixo e respiro acima. Vale também para "Sem grupo". */
.space-y-4 > .flex.items-center.gap-3.px-1:has(> h3.text-base):has(+ .grid) {
  margin-top: var(--pk-sp-4);
  padding-bottom: var(--pk-sp-2);
  border-bottom: 1px solid var(--pk-hairline);
}
.space-y-4 > .flex.items-center.gap-3.px-1:has(> h3.text-base):has(+ .grid) > h3 {
  font-size: var(--pk-text-lg);
  text-transform: uppercase;
  letter-spacing: .8px;
}


/* Pedido de 2026-09-30: botão "Ver"/"Ocultar" de "Principais Recursos". A margem
   automática no "Top 10" leva os dois para a direita do cabeçalho. */
[data-pcnet-recolhivel] > :first-child > :has(+ .pcnet-recolher) {
  margin-left: auto;
}
.pcnet-recolher {
  margin-left: var(--pk-sp-2);
  min-height: 36px;
  padding: 0 var(--pk-sp-3);
  border: 1px solid var(--pk-hairline);
  border-radius: var(--pk-radius-xs);
  background: transparent;
  color: var(--pk-green-ink);
  font-family: var(--pk-font);
  font-size: var(--pk-text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--pk-ease), border-color var(--pk-ease);
}
.pcnet-recolher:hover { background: var(--pk-hover-bg); border-color: var(--pk-hairline-hover); }
.pcnet-recolher:focus-visible { outline: 3px solid var(--pk-green-dark); outline-offset: 2px; }


/* Pedido de 2026-10-01 (revisão da tela inicial): no fim da página, a barra fixa
   "Tarefas" cobria a última linha do rodapé, que é o aviso de licença. O rodapé ganha
   embaixo um respiro maior que a barra, nos dois layouts. */
footer.border-t.mt-8 {
  padding-bottom: var(--pk-sp-6);
}


/* Pedido de 2026-10-06: janela "Criar VM de template" (botão ao lado de "Criar nova VM", na
   aba Recursos). Peças da casa em CSS próprio, porque a tela do PegaProx não carrega o
   pcnet-componentes.css; cores só por token. */
.pcnet-tpl {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pk-sp-3);
  background: color-mix(in srgb, var(--pk-bg) 70%, transparent);
}
.pcnet-tpl[hidden] {
  visibility: hidden;
}
.pcnet-tpl__caixa {
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: var(--pk-sp-5);
  border: 1px solid var(--pk-hairline);
  border-radius: var(--pk-radius);
  background: var(--pk-surface);
  box-shadow: var(--pk-shadow-lg);
  color: var(--pk-ink);
  font-family: var(--pk-font);
}
.pcnet-tpl__titulo {
  margin: 0 0 var(--pk-sp-1);
  font-size: var(--pk-text-xl);
  font-weight: 700;
}
.pcnet-tpl__dica {
  margin: 0 0 var(--pk-sp-4);
  color: var(--pk-ink-2);
}
.pcnet-tpl__form {
  display: flex;
  flex-direction: column;
  gap: var(--pk-sp-3);
}
.pcnet-tpl__linha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--pk-sp-3);
}
.pcnet-tpl__campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
  font-size: var(--pk-text-sm);
}
.pcnet-tpl__campo small {
  font-weight: 400;
  color: var(--pk-ink-3);
}
.pcnet-tpl__campo input,
.pcnet-tpl__campo select {
  min-height: 42px;
  padding: 0 var(--pk-sp-2);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-xs);
  background: var(--pk-surface-2);
  color: var(--pk-ink);
  font-family: var(--pk-font);
  font-size: var(--pk-text-base);
  font-weight: 400;
}
.pcnet-tpl__campo input:focus-visible,
.pcnet-tpl__campo select:focus-visible,
.pcnet-tpl__btn:focus-visible {
  outline: 3px solid var(--pk-green-dark);
  outline-offset: 2px;
}
.pcnet-tpl__erro {
  margin: 0;
  padding: var(--pk-sp-2) var(--pk-sp-3);
  border-radius: var(--pk-radius-xs);
  background: var(--pk-danger-soft);
  color: var(--pk-danger-ink);
}
.pcnet-tpl__acoes {
  display: flex;
  justify-content: flex-end;
  gap: var(--pk-sp-2);
  margin-top: var(--pk-sp-2);
}
.pcnet-tpl__btn {
  min-height: 42px;
  padding: 0 var(--pk-sp-4);
  border: 1px solid transparent;
  border-radius: var(--pk-radius-xs);
  background: var(--pk-green);
  color: var(--pk-on-green);
  font-family: var(--pk-font);
  font-weight: 600;
  cursor: pointer;
}
.pcnet-tpl__btn:disabled {
  cursor: progress;
  background: var(--pk-surface-2);
  color: var(--pk-ink-3);
}
.pcnet-tpl__btn--sec {
  background: transparent;
  border-color: var(--pk-hairline-hover);
  color: var(--pk-ink);
}
.pcnet-tpl-abrir svg {
  flex-shrink: 0;
}

/* Pedido de 2026-10-07: na Visão geral do cluster, o técnico vê só o uso somado dos nós
   (o pcnet-pegaprox.js monta .pcnet-resumo no lugar do bloco "Nós"). Só leitura. */
.pcnet-resumo {
  padding: var(--pk-sp-4);
  border: 1px solid var(--pk-hairline);
  border-radius: var(--pk-radius-sm);
  background: var(--pk-surface);
  color: var(--pk-ink);
  font-family: var(--pk-font);
}
.pcnet-resumo__titulo {
  margin: 0 0 var(--pk-sp-4);
  color: var(--pk-ink-2);
  font-size: var(--pk-text-sm);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pcnet-resumo__grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pk-sp-4);
}
@media (max-width: 900px) {
  .pcnet-resumo__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pcnet-resumo__item {
  padding: var(--pk-sp-3);
  border-radius: var(--pk-radius-xs);
  background: var(--pk-surface-2);
}
.pcnet-resumo__topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--pk-sp-2);
  color: var(--pk-ink-2);
  font-size: var(--pk-text-sm);
}
.pcnet-resumo__topo strong {
  color: var(--pk-ink);
  font-size: var(--pk-text-lg);
}
.pcnet-resumo__barra {
  height: 8px;
  margin: var(--pk-sp-2) 0;
  border-radius: 999px;
  background: var(--pk-hairline);
  overflow: hidden;
}
.pcnet-resumo__barra span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--pk-green);
}
.pcnet-resumo__barra--medio span { background: var(--pk-warning); }
.pcnet-resumo__barra--alto span { background: var(--pk-danger); }
.pcnet-resumo__det {
  color: var(--pk-ink-3);
  font-size: 0.75rem;
}