/* =====================================================================
   PADRÃO VISUAL PCNET · CAMADA 2b — SHELL

   A moldura da aplicação: cabeçalho fixo, área de conteúdo, rodapé, e a
   identidade que vive no cabeçalho (logo, navegação, pílula de usuário).

   Separado de pcnet-componentes.css porque é a camada que MAIS varia entre
   projetos — um plugin embutido numa página hospedeira não tem shell próprio
   e deve pular este arquivo inteiro. Componentes, esses, valem sempre.

   Depende de pcnet-tokens.css. Usa .pk-nav e .pk-pop de pcnet-componentes.css.
   ===================================================================== */

/* =====================================================================
   1. CABEÇALHO FIXO
   ===================================================================== */
.pk-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 9999;
  background: var(--pk-glass-bar);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
          backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--pk-border);
  box-shadow: var(--pk-shadow-sm);
  /* Empurra o conteúdo para baixo do notch (iPhone em retrato e paisagem).
     Sem isto, a logo fica sob a barra de status. */
  padding-top: env(safe-area-inset-top);
}

.pk-header__inner {
  display: flex; align-items: center; gap: var(--pk-sp-4);
  max-width: 1280px; margin: 0 auto;
  padding: 10px 28px;
  /* O recuo lateral também respeita o notch em paisagem (exige
     viewport-fit=cover na <meta name="viewport">). */
  padding-left:  max(28px, env(safe-area-inset-left));
  padding-right: max(28px, env(safe-area-inset-right));
}

.pk-header__left  { display: flex; align-items: center; gap: var(--pk-sp-3); flex-shrink: 0; }

/* ÂNCORA DOS PAINÉIS SUSPENSOS — o position:relative fica AQUI, no contêiner
   à direita, e não no botão que abre o painel. Um `right: 0` ancorado no
   próprio botão desloca o painel quando aquele botão não é o elemento mais à
   direita da barra; em tela estreita o painel vaza para fora da viewport. */
.pk-header__right { display: flex; align-items: center; gap: var(--pk-sp-2); flex-shrink: 0; position: relative; }

.pk-logo { height: 38px; width: auto; max-width: 170px; object-fit: contain; display: block; }

.pk-header__title { display: flex; flex-direction: column; line-height: 1.1; }
/* FILHO DIRETO (`>`), e não descendente (2026-09-23): o subtítulo é o <small>
   DENTRO de .pk-header__title, e um <strong> posto nele para destacar uma
   palavra ("Tempo real · <strong>Budel</strong> · …" no lansentinelbackups)
   casava com a regra do TÍTULO e saía a 20,5px/700 no meio de uma linha de
   12,5px. O título é o <strong> que PluginPcnetuiUi::cabecalho() põe como
   filho direto; o do subtítulo agora herda corpo e cor da linha dele. */
.pk-header__title > strong { font-size: var(--pk-text-lg); font-weight: 700; color: var(--pk-ink); }
.pk-header__title > small  { font-size: var(--pk-text-xs); font-weight: 500; color: var(--pk-ink-3); }

/* =====================================================================
   2. IDENTIDADE DO USUÁRIO
   ===================================================================== */
.pk-user-pill {
  display: flex; align-items: center; gap: var(--pk-sp-2);
  padding: 5px 13px 5px 5px;
  background: var(--pk-surface);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-pill);
  box-shadow: var(--pk-shadow-sm);
  font-size: var(--pk-text-base); font-weight: 600; color: var(--pk-ink);
  cursor: pointer;
}

/* Avatar SEMPRE circular — é o formato que separa "pessoa" de "coisa" numa
   interface onde todo o resto tem canto arredondado. */
.pk-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pk-green);
  color: var(--pk-on-green);
  font-weight: 700; font-size: var(--pk-text-sm);
  flex: none;
}

.pk-caret { width: 16px; height: 16px; color: var(--pk-ink-3);
            transition: transform var(--pk-ease); }
.is-open > .pk-caret,
.is-open .pk-caret { transform: rotate(180deg); }

/* =====================================================================
   3. CONTEÚDO
   O padding-top precisa cobrir a altura REAL do cabeçalho fixo. Se o
   cabeçalho crescer (nav quebrando para a 2ª linha), este valor cresce
   junto — ver a media query no fim. Errar aqui esconde o primeiro título
   atrás do cabeçalho, que é o bug mais comum de layout com header fixo.
   ===================================================================== */
.pk-main {
  max-width: 1080px; margin: 0 auto;
  padding: 86px 24px 56px;
  min-height: 100vh;
  min-height: 100dvh;   /* dvh evita o "pulo" quando a barra do Safari iOS some */
}

/* Entrada de view: um fade curto com 6px de subida. Curto de propósito —
   acima de ~300ms a navegação passa a PARECER lenta, mesmo sendo instantânea. */
.pk-view { animation: pk-fade .3s ease; }
@keyframes pk-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.pk-foot {
  text-align: center;
  color: var(--pk-ink-3);
  font-size: var(--pk-text-sm);
  padding: 28px 0 calc(4px + env(safe-area-inset-bottom));   /* respiro para a home-bar do iPhone */
}
.pk-foot a { color: inherit; text-decoration: none; font-weight: 600; }
.pk-foot a:hover, .pk-foot a:focus-visible { text-decoration: underline; }

/* =====================================================================
   4. TÍTULO DE SEÇÃO — elemento de identidade, não decoração
   Caixa alta com tracking largo e ícone verde. É o que dá ritmo à página
   longa e o que mais rápido denuncia uma tela "fora do padrão" quando
   alguém usa um <h2> comum no lugar.
   ===================================================================== */
.pk-section-title {
  display: flex; align-items: center; gap: var(--pk-sp-2);
  margin: 24px 0 14px;
  font-size: var(--pk-text-md); font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px;
  color: var(--pk-ink);
}
.pk-section-title svg { color: var(--pk-green-dark); }

.pk-section-head { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 14px; }
.pk-section-head .pk-section-title { margin: 0; }

/* O gap cresce no hover: a seta "avança" sem precisar de transform, o que
   evita repintar a caixa inteira. */
.pk-section-link {
  display: inline-flex; align-items: center; gap: var(--pk-sp-1);
  font-size: var(--pk-text-base); font-weight: 600;
  color: var(--pk-green-ink); text-decoration: none;
  transition: gap var(--pk-ease);
}
.pk-section-link:hover { gap: var(--pk-sp-2); }

.pk-back {
  display: inline-flex; align-items: center; gap: var(--pk-sp-2);
  background: none; border: none; cursor: pointer;
  padding: 6px 2px; margin-bottom: var(--pk-sp-1);
  font-family: var(--pk-font); font-size: var(--pk-text-base); font-weight: 500;
  color: var(--pk-ink-2);
  transition: color var(--pk-ease);
}
.pk-back:hover { color: var(--pk-green-ink); }

/* =====================================================================
   5. RESPONSIVO DO SHELL
   ===================================================================== */

/* Quando a navegação quebra para a 2ª linha, o cabeçalho cresce e o
   padding-top do conteúdo TEM de acompanhar — senão o primeiro título fica
   atrás dele. O `width:100%` na nav é o que a tira da 1ª linha do flex;
   sem isso o `margin:0 auto` dela deixa de empurrar o bloco da direita para
   a ponta, e os painéis suspensos (ancorados em right:0) vazam pela
   esquerda em telas estreitas. */
/* 🔴 SÓ A NAV DO CABEÇALHO (2026-09-23). A regra era `.pk-nav` genérica e
   alcançava toda nav do padrão: a barra de abas do lansentinelbackups
   (`nav.lsb-tabbar.pk-nav`, filha direta da coluna flex da tela) ganhava
   `order: 3` e, abaixo de 980px, pulava para DEPOIS da tabela inteira; os
   filtros do monitorpcnet (`.mpc-barra > .pk-nav`) iam para uma linha própria,
   centrados. A intenção sempre foi a nav do portal, que mora no cabeçalho. */
@media (max-width: 980px) {
  .pk-header__inner { flex-wrap: wrap; justify-content: space-between; }
  .pk-header__inner > .pk-nav { order: 3; width: 100%; margin: 6px 0 0; justify-content: center; flex-wrap: wrap; }
  .pk-main { padding-top: calc(142px + env(safe-area-inset-top)); }
}

@media (max-width: 600px) {
  .pk-header__inner { padding: 10px max(14px, env(safe-area-inset-left))
                              10px max(14px, env(safe-area-inset-right)); }
  .pk-header__title { display: none; }
  .pk-logo { height: 32px; }
  .pk-main {
    padding: calc(142px + env(safe-area-inset-top)) 14px 44px;
    padding-left:  max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
  .pk-user-pill .pk-uname { display: none; }   /* sobra o avatar, que já identifica */
}

@media (pointer: coarse) {
  .pk-user-pill, .pk-back, .pk-section-link { min-height: 44px; }
  .pk-back, .pk-section-link { display: inline-flex; align-items: center; }
}