/* =========================================================================
   Painel Acesso Apps — design system
   -------------------------------------------------------------------------
   Tudo parte dos tokens do :root. Componente nenhum escreve cor, espaçamento
   ou raio na mão: se precisar de um valor novo, ele vira token antes.

   As classes seguem `pn-bloco__elemento pn-bloco--variação`.
   ========================================================================= */

:root {
    /* --- marca -------------------------------------------------------- */
    /* O #62b28c é o verde da documentação da API. Ele é claro demais para
       texto sobre branco, então as ações usam o 600 e a barra lateral o 800. */
    --verde-50:  #eff8f3;
    --verde-100: #d7ecdf;
    --verde-200: #aedcc1;
    --verde-300: #82c8a3;
    --verde-400: #62b28c;
    --verde-500: #419471;
    --verde-600: #2f7659;
    --verde-700: #245c46;
    --verde-800: #1b4535;
    --verde-900: #122e23;

    /* --- neutros ------------------------------------------------------ */
    --cinza-0:   #ffffff;
    --cinza-50:  #f5f7f6;
    --cinza-100: #eceff0;
    --cinza-200: #dde2e1;
    --cinza-300: #c3cbc9;
    --cinza-400: #94a09d;
    --cinza-500: #657069;   /* AA sobre --superficie e sobre --fundo */
    --cinza-600: #505a56;
    --cinza-700: #3c4441;
    --cinza-800: #272d2b;
    --cinza-900: #161a19;

    /* --- semânticos --------------------------------------------------- */
    --erro-50:   #fdf2f2;
    --erro-200:  #f3c7c7;
    --erro-600:  #c62d2d;
    --erro-700:  #97231f;
    --aviso-50:  #fdf7ea;
    --aviso-200: #f0dcae;
    --aviso-600: #9a6a0a;
    --aviso-700: #7a5208;
    --info-50:   #eff5fd;
    --info-200:  #c9dcf5;
    --info-600:  #1f5fa8;
    --info-700:  #17477d;

    /* --- papéis ------------------------------------------------------- */
    --fundo:          var(--cinza-50);
    --superficie:     var(--cinza-0);
    --superficie-2:   var(--cinza-50);
    --borda:          var(--cinza-200);
    --borda-forte:    var(--cinza-300);
    --texto:          var(--cinza-800);
    --texto-suave:    var(--cinza-500);
    --texto-invertido:var(--cinza-0);
    --acao:           var(--verde-600);
    --acao-forte:     var(--verde-700);
    --lateral:        var(--verde-800);
    --lateral-ativo:  var(--verde-700);

    /* --- espaçamento (base 4px) --------------------------------------- */
    --e-1: .25rem;
    --e-2: .5rem;
    --e-3: .75rem;
    --e-4: 1rem;
    --e-5: 1.5rem;
    --e-6: 2rem;
    --e-7: 3rem;

    /* --- tipografia --------------------------------------------------- */
    --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --fonte-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --t-xs:  .75rem;
    --t-sm:  .875rem;
    --t-md:  1rem;
    --t-lg:  1.125rem;
    --t-xl:  1.5rem;
    --t-2xl: 2rem;

    /* --- forma -------------------------------------------------------- */
    --raio-1: 4px;
    --raio-2: 8px;
    --raio-3: 12px;
    --sombra-1: 0 1px 2px rgba(22, 26, 25, .06);
    --sombra-2: 0 4px 16px rgba(22, 26, 25, .10);
    --anel-foco: 0 0 0 3px rgba(98, 178, 140, .45);

    --largura-lateral: 260px;
    /* Listagem, painel inicial e auditoria ocupam a tela inteira -- tabela larga é o
       caso comum aqui. O teto de leitura vale só para formulário, onde campo com dois
       mil pixels de largura não ajuda ninguém. */
    --largura-formulario: 1180px;
}

/* =========================================================================
   base
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--fonte);
    font-size: var(--t-md);
    line-height: 1.55;
    color: var(--texto);
    background: var(--fundo);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; }
p { margin: 0; }

a { color: var(--acao-forte); }

:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--anel-foco);
    border-radius: var(--raio-1);
}

/* Atalho para quem navega por teclado pular a barra lateral inteira. */
.pn-pular {
    position: absolute;
    left: var(--e-3);
    top: -3rem;
    z-index: 100;
    padding: var(--e-2) var(--e-4);
    background: var(--superficie);
    border-radius: var(--raio-1);
    box-shadow: var(--sombra-2);
    transition: top .15s ease;
}
.pn-pular:focus { top: var(--e-3); }

/* =========================================================================
   estrutura
   ========================================================================= */

.pn-app { min-height: 100vh; }

.pn-lateral {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--largura-lateral);
    display: flex;
    flex-direction: column;
    background: var(--lateral);
    color: var(--texto-invertido);
    z-index: 40;
}

.pn-lateral__marca {
    display: block;
    padding: var(--e-5);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    color: inherit;
    text-decoration: none;
}
.pn-lateral__logo {
    display: block;
    width: 190px;
    max-width: 100%;
    height: auto;
    margin-bottom: var(--e-3);
}
.pn-lateral__produto {
    display: block;
    font-size: var(--t-md);
    font-weight: 650;
    letter-spacing: -.01em;
}
.pn-lateral__marca span {
    display: block;
    margin-top: 2px;
    font-size: var(--t-xs);
    color: var(--verde-200);
}

.pn-nav { flex: 1; padding: var(--e-4) var(--e-3); overflow-y: auto; }
/* Uma linha antes de cada categoria: a margem abre espaço acima dela, o padding
   separa a linha do texto. A primeira seção -- o Início -- não tem título, então a
   primeira linha cai justamente entre ele e Cadastros, e nenhuma sobra no topo. */
.pn-nav__grupo {
    margin: var(--e-4) 0 var(--e-2);
    padding: var(--e-4) var(--e-3) 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--verde-300);
}

.pn-nav__item {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-2) var(--e-3);
    margin-bottom: 2px;
    border-radius: var(--raio-1);
    color: var(--verde-100);
    font-size: var(--t-sm);
    text-decoration: none;
}
.pn-nav__item:hover { background: rgba(255, 255, 255, .08); color: var(--cinza-0); }
.pn-nav__item[aria-current="page"] {
    background: var(--lateral-ativo);
    color: var(--cinza-0);
    font-weight: 600;
}
/* Seção aberta, mas em outra tela dela: o `aria-current` fica no filho, e sem uma
   marca aqui o menu não diria onde a pessoa está. */
.pn-nav__item--aberto:not([aria-current="page"]) { color: var(--cinza-0); font-weight: 600; }

.pn-nav__item--futuro { opacity: .55; cursor: default; }
.pn-nav__item--futuro:hover { background: none; color: var(--verde-100); }

/* filtro do menu ------------------------------------------------------- */
/* Nasce com `hidden` no HTML e o JavaScript revela: sem script seria um campo que
   não faz nada. O menu inteiro continua listado abaixo. */
.pn-nav__filtro {
    display: flex;
    gap: var(--e-2);
    align-items: center;
    margin-bottom: var(--e-4);
}
.pn-nav__filtro[hidden] { display: none; }

.pn-nav__filtro-campo {
    flex: 1;
    min-width: 0;
    padding: var(--e-2) var(--e-3);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--raio-1);
    background: rgba(0, 0, 0, .22);
    color: var(--cinza-0);
    font: inherit;
    font-size: var(--t-sm);
}
.pn-nav__filtro-campo::placeholder { color: var(--verde-200); }
.pn-nav__filtro-campo:focus {
    outline: none;
    border-color: var(--verde-300);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .12);
}

/* O atalho é um botão de verdade: quem usa o mouse chega na paleta pelo mesmo lugar. */
.pn-nav__paleta {
    display: flex;
    gap: 2px;
    flex: none;
    padding: var(--e-2);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--raio-1);
    background: transparent;
    color: var(--verde-200);
    cursor: pointer;
}
.pn-nav__paleta:hover { background: rgba(255, 255, 255, .08); color: var(--cinza-0); }
.pn-nav__paleta kbd {
    font-family: var(--fonte-mono);
    font-size: 10px;
    line-height: 1.4;
}

.pn-nav__secao[hidden], .pn-nav__ramo[hidden] { display: none; }
.pn-nav__submenu[hidden], .pn-nav__item--filho[hidden] { display: none; }

.pn-nav__vazio {
    padding: var(--e-3);
    color: var(--verde-200);
    font-size: var(--t-sm);
}
.pn-nav__vazio[hidden] { display: none; }

/* Submenu: aparece quando a seção está aberta, com um filete ligando ao pai. */
.pn-nav__submenu {
    margin: 2px 0 var(--e-2);
    padding-left: var(--e-3);
    border-left: 1px solid rgba(255, 255, 255, .18);
}
.pn-nav__item--filho {
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: var(--t-xs);
    color: var(--verde-200);
}

.pn-nav__marcador {
    margin-left: auto;
    padding: 1px var(--e-2);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.pn-lateral__rodape {
    padding: var(--e-4);
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: var(--t-sm);
}
.pn-lateral__usuario { display: block; font-weight: 600; }
.pn-lateral__login {
    display: block;
    color: var(--verde-200);
    font-size: var(--t-xs);
    word-break: break-all;
}

.pn-principal {
    margin-left: var(--largura-lateral);
    min-height: 100vh;
    /* Sem isto o conteúdo largo empurra o container e a página inteira ganha rolagem
       horizontal em vez de o item interno se ajustar. */
    min-width: 0;
}

.pn-topo {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--e-3) var(--e-4);
    padding: var(--e-4) var(--e-6);
    background: var(--superficie);
    border-bottom: 1px solid var(--borda);
}
.pn-topo__titulo { font-size: var(--t-lg); min-width: 0; overflow-wrap: anywhere; }
.pn-topo__acoes {
    margin-left: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--e-2) var(--e-3);
}

.pn-conteudo {
    padding: var(--e-6);
}

/* Formulário também acompanha a tela: a grade de campos já mantém cada campo numa
   largura de leitura, então o teto extra só criava espaço morto à direita. */
.pn-form { max-width: 100%; }

.pn-secao + .pn-secao { margin-top: var(--e-6); }
.pn-secao__titulo { font-size: var(--t-md); margin-bottom: var(--e-3); }

/* =========================================================================
   botões
   ========================================================================= */

.pn-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    padding: var(--e-2) var(--e-4);
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: var(--raio-1);
    background: var(--acao);
    color: var(--texto-invertido);
    font: inherit;
    font-size: var(--t-sm);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.pn-botao:hover { background: var(--acao-forte); }
.pn-botao:disabled, .pn-botao[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }

.pn-botao--secundario {
    background: var(--superficie);
    border-color: var(--borda-forte);
    color: var(--texto);
}
.pn-botao--secundario:hover { background: var(--cinza-100); }

.pn-botao--perigo { background: var(--erro-600); }
.pn-botao--perigo:hover { background: var(--erro-700); }

.pn-botao--discreto {
    background: none;
    color: var(--texto-suave);
    font-weight: 500;
}
.pn-botao--discreto:hover { background: var(--cinza-100); color: var(--texto); }
/* Discreto de perigo: link de linha destrutivo -- texto vermelho, sem o fundo cheio do
   --perigo (que o --discreto zeraria de qualquer jeito por vir depois). */
.pn-botao--discreto.pn-botao--perigo { background: none; color: var(--erro-700); }
.pn-botao--discreto.pn-botao--perigo:hover { background: var(--erro-50); color: var(--erro-700); }

.pn-botao--largo { width: 100%; }

/* Estado de carregando: o texto some e entra um anel girando, sem o botão
   mudar de tamanho e empurrar o resto do formulário. */
.pn-botao[data-carregando="true"] { position: relative; color: transparent; pointer-events: none; }
.pn-botao[data-carregando="true"]::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: var(--cinza-0);
    border-radius: 50%;
    animation: pn-girar .6s linear infinite;
}
.pn-botao--secundario[data-carregando="true"]::after {
    border-color: var(--borda-forte);
    border-top-color: var(--texto);
}

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

@media (prefers-reduced-motion: reduce) {
    .pn-botao[data-carregando="true"]::after { animation-duration: 2s; }
    * { transition-duration: .01ms !important; }
}

/* =========================================================================
   formulário
   ========================================================================= */

.pn-campo { margin-bottom: var(--e-4); }
/* Campo inline: caixa de marcação ao lado do texto (não empilhado como os campos de texto). */
.pn-campo--inline { display: flex; align-items: flex-start; gap: var(--e-2); }
.pn-campo--inline input { margin-top: 3px; flex: none; }
.pn-campo__rotulo {
    display: block;
    margin-bottom: var(--e-2);
    font-size: var(--t-sm);
    font-weight: 600;
}
.pn-campo__obrigatorio { color: var(--erro-600); margin-left: 2px; }

.pn-campo__controle {
    display: block;
    width: 100%;
    padding: var(--e-2) var(--e-3);
    min-height: 40px;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-1);
    background: var(--superficie);
    color: var(--texto);
    font: inherit;
    font-size: var(--t-sm);
}
/* --cinza-400 dava 2,7:1 sobre branco. O placeholder aqui carrega dica de uso
   ("Nome, razão social, CNPJ ou apelido"), então precisa ser legível. */
.pn-campo__controle::placeholder { color: var(--cinza-500); }
.pn-campo__controle:focus-visible { border-color: var(--verde-400); }
.pn-campo__controle[aria-invalid="true"] { border-color: var(--erro-600); }
/* Campo travado (readonly): valor definido por outra fonte -- p.ex. o identificador único
   do host no preparar-máquina. Fundo apagado e cursor de "não editável", sem tirar do POST. */
.pn-campo__controle[readonly] { background: var(--cinza-100); color: var(--texto-suave); cursor: default; }

.pn-campo__ajuda { display: block; margin-top: var(--e-2); font-size: var(--t-xs); color: var(--texto-suave); }
.pn-campo__erro { display: block; margin-top: var(--e-2); font-size: var(--t-xs); color: var(--erro-700); font-weight: 600; }

.pn-form__acoes { display: flex; gap: var(--e-3); margin-top: var(--e-5); }

/* =========================================================================
   cartão
   ========================================================================= */

.pn-cartao {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-2);
    box-shadow: var(--sombra-1);
}
.pn-cartao__corpo { padding: var(--e-5); }
.pn-cartao__cabecalho {
    display: flex;
    align-items: center;
    /* Sem wrap, o texto auxiliar à direita empurra a página em tela estreita: item flex
       não encolhe abaixo do próprio conteúdo por padrão. */
    flex-wrap: wrap;
    gap: var(--e-2) var(--e-3);
    padding: var(--e-4) var(--e-5);
    border-bottom: 1px solid var(--borda);
}
.pn-cartao__cabecalho h2,
.pn-cartao__cabecalho h3 { font-size: var(--t-md); min-width: 0; overflow-wrap: anywhere; }

/* Cartão que recolhe: o <summary> é o cabeçalho. Configurado, nasce fechado -- o resumo
   basta e a comparação embaixo ganha a tela; sem [open], sem a borda que separaria de um
   corpo que não está à mostra. A seta fica posicionada de forma absoluta para não disputar
   ordem no flex com o subtítulo (o ::after viria sempre depois dele). */
.pn-cartao--recolhivel > summary {
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: calc(var(--e-5) + 1.1em);
}
.pn-cartao--recolhivel > summary::-webkit-details-marker { display: none; }
.pn-cartao--recolhivel:not([open]) > summary { border-bottom: 0; }
.pn-cartao--recolhivel > summary::after {
    content: "";
    position: absolute;
    right: var(--e-5);
    top: calc(var(--e-4) + .55em);
    width: .55em;
    height: .55em;
    border-right: 2px solid var(--texto-suave);
    border-bottom: 2px solid var(--texto-suave);
    transform: rotate(45deg);
    transition: transform .15s ease;
}
.pn-cartao--recolhivel[open] > summary::after { transform: rotate(-135deg); }
/* Resumo na própria linha, abaixo do título: flex-basis 100% força a quebra sem depender
   da ordem dos itens. */
.pn-cartao__subtitulo {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-2);
    font-size: var(--t-sm);
    font-weight: 400;
    color: var(--texto-suave);
    overflow-wrap: anywhere;
}

.pn-grade { display: grid; gap: var(--e-4); }
.pn-grade--numeros { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }

.pn-numero__valor {
    display: block;
    font-size: var(--t-2xl);
    font-weight: 650;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.pn-numero__rotulo { display: block; font-size: var(--t-sm); color: var(--texto-suave); }
.pn-numero__detalhe { display: block; margin-top: var(--e-2); font-size: var(--t-xs); color: var(--texto-suave); }

/* =========================================================================
   alerta
   ========================================================================= */

.pn-alerta {
    display: flex;
    gap: var(--e-3);
    padding: var(--e-3) var(--e-4);
    margin-bottom: var(--e-4);
    border: 1px solid var(--borda);
    border-left-width: 4px;
    border-radius: var(--raio-1);
    font-size: var(--t-sm);
    background: var(--superficie-2);
}
.pn-alerta--sucesso { background: var(--verde-50);  border-color: var(--verde-200); border-left-color: var(--verde-600); }
.pn-alerta--erro    { background: var(--erro-50);   border-color: var(--erro-200);  border-left-color: var(--erro-600); }
.pn-alerta--aviso   { background: var(--aviso-50);  border-color: var(--aviso-200); border-left-color: var(--aviso-600); }
.pn-alerta--info    { background: var(--info-50);   border-color: var(--info-200);  border-left-color: var(--info-600); }

/* =========================================================================
   badge de status
   ========================================================================= */

.pn-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--e-1);
    padding: 2px var(--e-2);
    border: 1px solid var(--borda);
    border-radius: 999px;
    background: var(--superficie-2);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--cinza-600);
    white-space: nowrap;
}
.pn-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pn-badge--ativo      { background: var(--verde-50); border-color: var(--verde-200); color: var(--verde-700); }
.pn-badge--pendente   { background: var(--aviso-50); border-color: var(--aviso-200); color: var(--aviso-700); }
.pn-badge--bloqueado  { background: var(--erro-50);  border-color: var(--erro-200);  color: var(--erro-700); }
.pn-badge--desativado { background: var(--cinza-100); border-color: var(--borda-forte); color: var(--cinza-600); }

/* Ambiente da aplicação. Fica na mesma linha do selo de status, que já usa verde e
   vermelho -- por isso produção é azul, e não verde: dois verdes lado a lado diriam a
   mesma coisa duas vezes e nenhuma direito. */
.pn-badge--producao        { background: var(--info-50);  border-color: var(--info-200);  color: var(--info-700); }
.pn-badge--homologacao     { background: var(--aviso-50); border-color: var(--aviso-200); color: var(--aviso-700); }
.pn-badge--desenvolvimento { background: var(--cinza-100); border-color: var(--borda-forte); color: var(--cinza-600); }

/* Host alcançável por SSH. Cinza-azulado e monoespaçado: é informação técnica, e não
   um estado -- as cores de estado já estão gastas com ativo, desativado e ambiente. */
.pn-badge--ssh {
    background: var(--cinza-100);
    border-color: var(--borda-forte);
    color: var(--cinza-700);
    font-family: var(--fonte-mono);
    font-size: 11px;
}
.pn-badge--ssh::before { background: var(--verde-600); }

/* Selos enfileirados numa célula, quebrando linha quando não couberem. */
.pn-selos { display: flex; flex-wrap: wrap; gap: var(--e-1); }

/* Um domínio anunciado pelo traefik, com o caminho e como respondeu. */
.pn-dominio { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin-bottom: var(--e-1); }

/* =========================================================================
   máquina do monitor: cabeçalho, indicadores e abas
   ========================================================================= */

.pn-maquina { margin-bottom: var(--e-5); }

.pn-maquina__cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--e-3);
    margin-bottom: var(--e-4);
}
.pn-maquina__identidade { min-width: 0; }
.pn-maquina__nome { font-size: var(--t-xl); line-height: 1.2; }
.pn-maquina__legenda {
    margin: var(--e-1) 0 0;
    color: var(--texto-suave);
    font-size: var(--t-sm);
    overflow-wrap: anywhere;
}
.pn-maquina__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }

/* Números lado a lado, sem cartão em volta de cada um: a moldura repetida seis vezes
   ocupa mais espaço do que a informação que carrega. */
.pn-indicadores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: 1px;
    margin: 0;
    border: 1px solid var(--borda);
    border-radius: var(--raio-2);
    background: var(--borda);
    overflow: hidden;
}
.pn-indicador { padding: var(--e-3) var(--e-4); background: var(--superficie); }
.pn-indicador dt {
    margin-bottom: 2px;
    color: var(--texto-suave);
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.pn-indicador dd { margin: 0; font-size: var(--t-md); font-weight: 600; }
.pn-indicador--alerta { background: var(--erro-50); }
.pn-indicador--alerta dd { color: var(--erro-700); }

/* abas ------------------------------------------------------------------ */
/* Sem JavaScript os três painéis ficam visíveis e as abas viram âncoras. O script
   esconde os outros e marca o escolhido. */
.pn-abas__barra {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-1);
    margin-bottom: var(--e-4);
    border-bottom: 1px solid var(--borda);
}
.pn-abas__aba {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    padding: var(--e-2) var(--e-3);
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--texto-suave);
    font-size: var(--t-sm);
    font-weight: 600;
    text-decoration: none;
}
.pn-abas__aba:hover { color: var(--texto); }
.pn-abas__aba[aria-selected="true"] { color: var(--acao-forte); border-bottom-color: var(--acao); }

.pn-abas__marca {
    padding: 0 6px;
    border-radius: 999px;
    background: var(--cinza-100);
    color: var(--cinza-600);
    font-size: var(--t-xs);
    font-weight: 600;
}
.pn-abas__marca--alerta { background: var(--erro-50); color: var(--erro-700); }

.pn-abas__painel[hidden] { display: none; }
/* O [hidden] do navegador nem sempre vence o display de linha de tabela. */
.pn-tabela tr[hidden] { display: none; }
/* Item de grade escondido pelo filtro (cartão de empresa, por ex.). */
[data-linha][hidden] { display: none; }
.pn-abas__painel + .pn-abas__painel { margin-top: var(--e-5); }
.pn-abas[data-abas="pronto"] .pn-abas__painel + .pn-abas__painel { margin-top: 0; }

/* filtro dentro de uma aba, sem a moldura do filtro de página inteira */
.pn-filtros--embutido { margin-bottom: var(--e-3); padding: 0; border: 0; background: none; }
.pn-filtros--embutido[hidden] { display: none; }
.pn-filtros__contagem {
    margin: 0 0 0 auto;
    align-self: end;
    padding-bottom: var(--e-2);
    color: var(--texto-suave);
    font-size: var(--t-xs);
    white-space: nowrap;
}

/* =========================================================================
   espera de página inteira
   ========================================================================= */

/* Cobre a tela para dizer que a consulta está em curso e para impedir o segundo
   clique, que dispararia outra sessão SSH. */
.pn-aguarde {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 19, .35);
}
.pn-aguarde[hidden] { display: none; }

.pn-aguarde__caixa {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-4) var(--e-5);
    border-radius: var(--raio-2);
    background: var(--superficie);
    box-shadow: var(--sombra-2);
    font-size: var(--t-sm);
}
.pn-aguarde__anel {
    width: 18px;
    height: 18px;
    border: 2px solid var(--borda-forte);
    border-top-color: var(--acao);
    border-radius: 50%;
    animation: pn-girar .7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .pn-aguarde__anel { animation-duration: 2s; }
}

/* =========================================================================
   paleta de pesquisa de telas (Ctrl+Espaço)
   ========================================================================= */

/* Encostada no topo, e não centralizada: a lista cresce para baixo e o olho já
   está onde o texto é digitado. */
.pn-paleta {
    width: min(560px, calc(100vw - 2rem));
    max-height: min(70vh, 560px);
    margin: 12vh auto auto;
    padding: 0;
    border: 1px solid var(--borda);
    border-radius: var(--raio-3);
    background: var(--superficie);
    box-shadow: var(--sombra-2);
    color: var(--texto);
    overflow: hidden;
}
.pn-paleta::backdrop { background: rgba(15, 23, 19, .45); }

.pn-paleta__campo { padding: var(--e-4); border-bottom: 1px solid var(--borda); }
.pn-paleta__entrada {
    width: 100%;
    border: 0;
    background: none;
    color: var(--texto);
    font: inherit;
    font-size: var(--t-lg);
}
.pn-paleta__entrada:focus { outline: none; }
.pn-paleta__entrada::placeholder { color: var(--texto-suave); }

/* Flex em coluna para o `order` valer: quem casou pelo título sobe. */
.pn-paleta__lista {
    display: flex;
    flex-direction: column;
    max-height: min(46vh, 380px);
    margin: 0;
    padding: var(--e-2);
    list-style: none;
    overflow-y: auto;
}
.pn-paleta__lista[hidden] { display: none; }
.pn-paleta__linha[hidden] { display: none; }

.pn-paleta__link {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 var(--e-3);
    padding: var(--e-2) var(--e-3);
    border-radius: var(--raio-1);
    color: inherit;
    text-decoration: none;
}
.pn-paleta__texto { font-weight: 600; font-size: var(--t-sm); }
.pn-paleta__grupo {
    justify-self: end;
    color: var(--texto-suave);
    font-size: var(--t-xs);
}
.pn-paleta__descricao {
    grid-column: 1 / -1;
    color: var(--texto-suave);
    font-size: var(--t-xs);
}

/* A linha marcada é a que o Enter abre. O fundo não carrega a informação sozinho:
   o aria-selected acompanha, e é ele que o leitor de tela anuncia. */
.pn-paleta__linha[aria-selected="true"] .pn-paleta__link { background: var(--verde-50); }
.pn-paleta__linha[aria-selected="true"] .pn-paleta__texto { color: var(--verde-800); }

.pn-paleta__vazio {
    margin: 0;
    padding: var(--e-5);
    color: var(--texto-suave);
    font-size: var(--t-sm);
    text-align: center;
}
.pn-paleta__vazio[hidden] { display: none; }

.pn-paleta__rodape {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-4);
    margin: 0;
    padding: var(--e-2) var(--e-4);
    border-top: 1px solid var(--borda);
    background: var(--superficie-2);
    color: var(--texto-suave);
    font-size: var(--t-xs);
}
.pn-paleta__rodape kbd {
    display: inline-block;
    min-width: 18px;
    margin-right: 2px;
    padding: 1px 4px;
    border: 1px solid var(--borda-forte);
    border-radius: 4px;
    background: var(--superficie);
    font-family: var(--fonte-mono);
    font-size: 10px;
    text-align: center;
}

/* =========================================================================
   estado vazio
   ========================================================================= */

.pn-vazio { padding: var(--e-7) var(--e-5); text-align: center; }
.pn-vazio__titulo { font-size: var(--t-md); margin-bottom: var(--e-2); }
.pn-vazio__texto { max-width: 46ch; margin: 0 auto var(--e-4); color: var(--texto-suave); font-size: var(--t-sm); }

/* =========================================================================
   tela centrada (entrar / trocar senha)
   ========================================================================= */

.pn-centro {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--e-5);
    background:
        radial-gradient(60rem 40rem at 50% -20%, var(--verde-100), transparent 70%),
        var(--fundo);
}
.pn-centro__caixa { width: 100%; max-width: 400px; }
.pn-centro__marca { text-align: center; margin-bottom: var(--e-5); }
.pn-centro__logo { display: block; width: 150px; height: auto; margin: 0 auto var(--e-3); }
.pn-centro__marca strong { display: block; font-size: var(--t-xl); letter-spacing: -.01em; }
.pn-centro__marca span { display: block; margin-top: var(--e-1); font-size: var(--t-sm); color: var(--texto-suave); }
.pn-centro__titulo { font-size: var(--t-md); margin-bottom: var(--e-4); }
.pn-centro__rodape { margin-top: var(--e-5); text-align: center; font-size: var(--t-xs); color: var(--texto-suave); }

/* =========================================================================
   responsivo — a lateral vira gaveta
   ========================================================================= */

.pn-menu-botao { display: none; }
.pn-fundo-gaveta { display: none; }

@media (max-width: 900px) {
    .pn-lateral {
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: var(--sombra-2);
    }
    .pn-app[data-gaveta="aberta"] .pn-lateral { transform: none; }

    .pn-principal { margin-left: 0; }
    .pn-conteudo { padding: var(--e-4); }
    .pn-topo { padding: var(--e-3) var(--e-4); }

    .pn-menu-botao { display: inline-flex; }

    .pn-app[data-gaveta="aberta"] .pn-fundo-gaveta {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 35;
        background: rgba(22, 26, 25, .45);
        border: 0;
    }
}

/* =========================================================================
   utilitários
   ========================================================================= */

/* Visível só para leitor de tela -- clip-path em vez de display:none, que
   removeria o elemento da árvore de acessibilidade junto. */
.pn-visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.pn-codigo {
    padding: 1px var(--e-2);
    border: 1px solid var(--borda);
    border-radius: var(--raio-1);
    background: var(--superficie-2);
    font-family: var(--fonte-mono);
    font-size: var(--t-xs);
}

.pn-pagina__acoes {
    display: flex;
    justify-content: flex-end;
    gap: var(--e-3);
    margin-bottom: var(--e-4);
}

/* =========================================================================
   filtros
   ========================================================================= */

.pn-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--e-3);
    padding: var(--e-4);
    margin-bottom: var(--e-4);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-2);
}
.pn-filtros__campo { flex: 1 1 260px; min-width: 0; }
.pn-filtros__campo--estreito { flex: 0 1 180px; }
.pn-filtros__acoes { display: flex; gap: var(--e-2); }

/* =========================================================================
   tabela
   ========================================================================= */

/* A rolagem mora aqui dentro: tabela larga nunca empurra a página.
   `position: relative` não é enfeite: sem um ancestral posicionado, o bloco de
   contenção do `.pn-visualmente-oculto` (que é `position: absolute`) vira a viewport,
   e aí o `overflow` daqui não clipa esse texto -- ele escapa e estica a página. */
.pn-tabela__rolagem { position: relative; overflow-x: auto; }

.pn-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-sm);
}
.pn-tabela th, .pn-tabela td {
    padding: var(--e-3) var(--e-4);
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--borda);
}
/* Cabeçalho por onde se ordena: o cursor e a seta avisam que é clicável, e a seta
   preenchida mostra a direção. A coluna ativa fica com o texto mais forte. */
.pn-tabela__ordenavel { cursor: pointer; user-select: none; white-space: nowrap; }
.pn-tabela__ordenavel:hover { color: var(--texto); }
.pn-tabela__ordenavel::after {
    content: "\2195";
    margin-left: 4px;
    color: var(--cinza-400);
    font-size: .85em;
}
.pn-tabela__ordenavel[aria-sort="ascending"]::after { content: "\2191"; color: var(--acao-forte); }
.pn-tabela__ordenavel[aria-sort="descending"]::after { content: "\2193"; color: var(--acao-forte); }
.pn-tabela__ordenavel[aria-sort] { color: var(--texto); }
.pn-tabela__ordenavel:focus-visible { outline: var(--anel-foco); outline-offset: -2px; }

.pn-tabela thead th {
    position: sticky;
    top: 0;
    background: var(--superficie-2);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--texto-suave);
    white-space: nowrap;
}
.pn-tabela tbody tr:last-child th,
.pn-tabela tbody tr:last-child td { border-bottom: 0; }
.pn-tabela tbody tr:hover { background: var(--verde-50); }

.pn-tabela__ordenar {
    display: inline-flex;
    align-items: center;
    gap: var(--e-1);
    color: inherit;
    text-decoration: none;
}
.pn-tabela__ordenar:hover { color: var(--acao-forte); text-decoration: underline; }

.pn-tabela__principal { display: block; font-weight: 600; color: var(--texto); text-decoration: none; }
.pn-tabela__principal:hover { color: var(--acao-forte); text-decoration: underline; }
.pn-tabela__secundario {
    display: block;
    margin-top: 2px;
    font-size: var(--t-xs);
    font-weight: 400;
    color: var(--texto-suave);
}
.pn-tabela__numerico { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* O flex mora numa div dentro da célula. `display:flex` no próprio <td> tira a
   célula do layout de tabela, e a borda da linha deixa de atravessar a coluna. */
.pn-tabela__celula-acoes { text-align: right; }
.pn-tabela__acoes {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--e-1);
    white-space: nowrap;
}
.pn-tabela__acoes form { display: inline; }

/* Botões de linha andam compactos: com o padding cheio a coluna de ações não cabia
   na largura útil e "Excluir" só aparecia depois de rolar a tabela de lado. */
.pn-tabela__acoes .pn-botao {
    padding: var(--e-1) var(--e-2);
    min-height: 32px;
}

.pn-botao--texto-perigo { color: var(--erro-700); }
.pn-botao--texto-perigo:hover { background: var(--erro-50); color: var(--erro-700); }

/* =========================================================================
   paginação
   ========================================================================= */

.pn-paginacao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    margin-top: var(--e-4);
}
.pn-paginacao__contagem { font-size: var(--t-sm); color: var(--texto-suave); }
.pn-paginacao__lista { display: flex; flex-wrap: wrap; gap: var(--e-1); list-style: none; margin: 0; padding: 0; }
.pn-paginacao__link {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 var(--e-3);
    border: 1px solid var(--borda);
    border-radius: var(--raio-1);
    background: var(--superficie);
    color: var(--texto);
    font-size: var(--t-sm);
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
}
.pn-paginacao__link:hover { background: var(--cinza-100); }
.pn-paginacao__link--atual {
    background: var(--acao);
    border-color: var(--acao);
    color: var(--texto-invertido);
    font-weight: 600;
}
.pn-paginacao__link--inativo { opacity: .45; pointer-events: none; }
.pn-paginacao__reticencias { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--e-2); color: var(--texto-suave); }

/* =========================================================================
   formulário em grade
   ========================================================================= */

.pn-form__grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 0 var(--e-4);
}
.pn-form__coluna--cheia { grid-column: 1 / -1; }
.pn-form__cep { grid-column: 1 / -1; max-width: 320px; }

/* Uma fila de campos que ocupa a largura toda em vez de se estilhaçar em várias colunas
   curtas -- o que a grade auto-fit faz com três campos numa tela larga, jogando-os no canto
   esquerdo. Alinha tudo pelo topo (senão o CNPJ, com botão e `align-items:flex-end`, escorrega
   para o rodapé da linha que a ajuda do Ambiente deixa alta) e quebra só quando não cabe. O
   CNPJ, que leva input + botão, ganha um pouco mais de espaço. */
.pn-form__linha { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 var(--e-4); }
.pn-form__linha > * { flex: 1 1 220px; min-width: 0; }
.pn-form__linha > .pn-campo-com-acao { flex: 1.5 1 300px; }

.pn-campo__controle--area { min-height: 88px; resize: vertical; }

/* =========================================================================
   modal de confirmação
   ========================================================================= */

.pn-modal {
    width: min(440px, calc(100vw - 2rem));
    padding: var(--e-5);
    border: 1px solid var(--borda);
    border-radius: var(--raio-3);
    background: var(--superficie);
    color: var(--texto);
    box-shadow: var(--sombra-2);
}
.pn-modal::backdrop { background: rgba(22, 26, 25, .5); }
.pn-modal__titulo { font-size: var(--t-lg); margin-bottom: var(--e-3); }
.pn-modal__texto { color: var(--texto-suave); font-size: var(--t-sm); }
.pn-modal__acoes { display: flex; justify-content: flex-end; gap: var(--e-3); margin-top: var(--e-5); }

/* =========================================================================
   ações em lote e detalhes
   ========================================================================= */

.pn-barra-lote {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    padding: var(--e-3) var(--e-4);
    border-bottom: 1px solid var(--borda);
    background: var(--aviso-50);
    font-size: var(--t-sm);
}

.pn-tabela__selecao { width: 40px; text-align: center; }
.pn-tabela__selecao input { width: 16px; height: 16px; }

.pn-detalhes { margin-top: var(--e-2); }
.pn-detalhes summary { cursor: pointer; font-weight: 600; }
.pn-detalhes summary:hover { text-decoration: underline; }

.pn-lista-simples {
    margin: var(--e-2) 0 0;
    padding-left: var(--e-5);
    font-size: var(--t-xs);
    line-height: 1.7;
}

/* =========================================================================
   marcação e matriz de permissões
   ========================================================================= */

.pn-campo--marcacao { margin-bottom: var(--e-4); }

.pn-marcacao {
    /* Mesmo motivo do contêiner de rolagem: o rótulo oculto dentro da etiqueta é
       absoluto e precisa de um bloco de contenção local. */
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    font-size: var(--t-sm);
    cursor: pointer;
}
.pn-marcacao input { width: 16px; height: 16px; margin: 0; accent-color: var(--acao); }
.pn-marcacao--central { justify-content: center; width: 100%; }

.pn-matriz__coluna { width: 96px; text-align: center; }
.pn-matriz thead .pn-matriz__coluna { white-space: normal; }
.pn-matriz__metodo {
    display: block;
    margin-top: 2px;
    font-family: var(--fonte-mono);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cinza-400);
}

/* =========================================================================
   painel inicial
   ========================================================================= */

.pn-saudacao { font-size: var(--t-lg); }

.pn-grade--duas { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

.pn-cartao--link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.pn-cartao--link:hover { border-color: var(--verde-300); box-shadow: var(--sombra-2); }
.pn-cartao--link:hover .pn-numero__rotulo { color: var(--acao-forte); }

.pn-cartao__rodape {
    padding: var(--e-3) var(--e-5);
    border-top: 1px solid var(--borda);
    background: var(--superficie-2);
}

/* --- barra de composição por status --- */

.pn-barra {
    display: flex;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--cinza-100);
}
.pn-barra__fatia { display: block; min-width: 3px; }
.pn-barra__fatia--ativo      { background: var(--verde-500); }
.pn-barra__fatia--pendente   { background: var(--aviso-600); }
.pn-barra__fatia--trial      { background: var(--info-600); }
.pn-barra__fatia--bloqueado  { background: var(--erro-600); }
.pn-barra__fatia--desativado { background: var(--cinza-400); }

.pn-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2) var(--e-4);
    margin: var(--e-4) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--t-sm);
    color: var(--texto-suave);
}
.pn-legenda li { display: inline-flex; align-items: center; gap: var(--e-2); }
.pn-legenda strong { color: var(--texto); font-variant-numeric: tabular-nums; }
.pn-legenda__ponto { width: 10px; height: 10px; border-radius: 3px; background: var(--cinza-400); }
.pn-legenda__ponto--ativo      { background: var(--verde-500); }
.pn-legenda__ponto--pendente   { background: var(--aviso-600); }
.pn-legenda__ponto--trial      { background: var(--info-600); }
.pn-legenda__ponto--bloqueado  { background: var(--erro-600); }
.pn-legenda__ponto--desativado { background: var(--cinza-400); }

/* --- listas de dados --- */

.pn-lista-dados { margin: 0; padding: 0; list-style: none; font-size: var(--t-sm); }
.pn-lista-dados li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    padding: var(--e-2) 0;
    border-bottom: 1px solid var(--borda);
}
.pn-lista-dados li:last-child { border-bottom: 0; }
/* Par nome + código à esquerda, ação à direita, no mesmo item da lista. */
.pn-lista-dados__par { display: flex; align-items: center; gap: var(--e-2); min-width: 0; flex-wrap: wrap; }
.pn-lista-dados__acao { flex: none; margin: 0; }
/* Abas de app (ERP): uma fileira de botões, o ativo cheio e os outros secundários. */
.pn-app-abas { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-3); }
/* Versão mínima por app dentro de uma célula: uma linha por app, compacto. */
.pn-versoes-app { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: var(--t-xs); }
.pn-versoes-app__nome { color: var(--texto-suave); }
.pn-lista-dados a { color: var(--texto); text-decoration: none; font-weight: 600; }
.pn-lista-dados a:hover { color: var(--acao-forte); text-decoration: underline; }
.pn-lista-dados strong { font-variant-numeric: tabular-nums; }
.pn-lista-dados__meta {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    font-size: var(--t-xs);
    color: var(--texto-suave);
    white-space: nowrap;
}

/* --- painel do gestor: saúde de produção ------------------------------ */
/* KPI colorido: verde quando tudo está no ar, vermelho quando há queda. */
.pn-numero--ok .pn-numero__valor { color: var(--verde-600); }
.pn-numero--alerta { border-color: var(--erro-200); background: var(--erro-50); }
.pn-numero--alerta .pn-numero__valor { color: var(--erro-600); }

/* Herói (as máquinas) largo; o panorama de negócio, estreito ao lado. */
.pn-grade--painel {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--e-4);
    align-items: start;
}
@media (max-width: 900px) { .pn-grade--painel { grid-template-columns: 1fr; } }

.pn-saude__cabecalho {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--e-3); flex-wrap: wrap;
}
.pn-saude__meta { font-size: var(--t-xs); color: var(--texto-suave); }
.pn-saude__meta a { color: var(--acao-forte); }

/* Ponto de status, verde ou vermelho. */
.pn-ponto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.pn-ponto--noar { background: var(--verde-500); }
.pn-ponto--fora { background: var(--erro-600); }
.pn-ponto--aviso { background: var(--aviso-600); }

/* Quem caiu: cada máquina fora do ar em destaque. */
.pn-caiu { list-style: none; margin: 0; padding: 0; }
.pn-caiu__item {
    display: flex; align-items: center; gap: var(--e-2);
    padding: var(--e-2) var(--e-3);
    border: 1px solid var(--erro-200); background: var(--erro-50);
    border-radius: var(--raio-1); margin-bottom: var(--e-2);
}
.pn-caiu__nome { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pn-caiu__desc { font-size: var(--t-xs); color: var(--texto-suave); }
.pn-caiu__quando {
    margin-left: auto; font-size: var(--t-xs); color: var(--erro-700);
    font-weight: 600; white-space: nowrap;
}
.pn-caiu__item--aviso { border-color: var(--aviso-200); background: var(--aviso-50); }
.pn-caiu__quando--aviso { color: var(--aviso-700); }

.pn-saude__tudo-bem {
    display: flex; align-items: center; gap: var(--e-2);
    padding: var(--e-3); border-radius: var(--raio-1);
    background: var(--verde-50); border: 1px solid var(--verde-200); color: var(--verde-700);
}

.pn-saude__resumo { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-3); }
.pn-saude__selo {
    font-size: var(--t-xs); font-weight: 600; padding: 2px var(--e-2);
    border-radius: var(--raio-1); border: 1px solid var(--borda); color: var(--texto-suave);
}
.pn-saude__selo--noar { color: var(--verde-700); border-color: var(--verde-200); background: var(--verde-50); }
.pn-saude__selo--fora { color: var(--erro-700); border-color: var(--erro-200); background: var(--erro-50); }
.pn-saude__selo--sem  { color: var(--aviso-700); border-color: var(--aviso-200); background: var(--aviso-50); }

.pn-mini-rotulo {
    font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em;
    color: var(--texto-suave); font-weight: 600; margin: var(--e-4) 0 var(--e-2);
}
.pn-mini-rotulo:first-child { margin-top: 0; }
.pn-lista-dados--compacta li { padding: var(--e-1) 0; }

/* --- preparar máquina: toggle e lista de tarefas ---------------------- */
.pn-prep__toggle {
    display: inline-flex; gap: 2px; margin-bottom: var(--e-3); padding: 3px;
    background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio-1);
}
.pn-prep__botao {
    font: inherit; font-size: var(--t-sm); padding: var(--e-1) var(--e-3);
    border: 0; background: transparent; color: var(--texto-suave);
    border-radius: calc(var(--raio-1) - 2px); cursor: pointer;
}
.pn-prep__botao--ativo {
    background: var(--superficie); color: var(--texto); font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

.pn-checklist { list-style: none; margin: 0; padding: 0; }
.pn-checklist__item {
    display: flex; align-items: center; gap: var(--e-3);
    padding: var(--e-3) 0; border-bottom: 1px solid var(--borda);
}
.pn-checklist__item:last-child { border-bottom: 0; }
.pn-checklist__marca {
    width: 26px; height: 26px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; font-weight: 700; font-size: var(--t-sm);
}
.pn-checklist__item--ok .pn-checklist__marca { background: var(--verde-50); color: var(--verde-700); border: 1px solid var(--verde-200); }
.pn-checklist__item--falta .pn-checklist__marca { background: var(--aviso-50); color: var(--aviso-700); border: 1px solid var(--aviso-200); }
.pn-checklist__item--neutro .pn-checklist__marca { background: var(--superficie-2); color: var(--texto-suave); border: 1px solid var(--borda); }
.pn-checklist__titulo { font-weight: 600; }
.pn-checklist__estado { margin-left: auto; font-size: var(--t-xs); color: var(--texto-suave); }
.pn-checklist__item--ok .pn-checklist__estado { color: var(--verde-700); }
.pn-checklist__item--falta .pn-checklist__estado { color: var(--aviso-700); }

/* =========================================================================
   busca do topo
   ========================================================================= */

.pn-topo__busca {
    position: relative;
    flex: 1 1 260px;
    min-width: 0;
    max-width: 420px;
}
.pn-topo__busca .pn-campo__controle { padding-right: 40px; }

.pn-atalho {
    position: absolute;
    top: 50%;
    right: var(--e-2);
    transform: translateY(-50%);
    padding: 1px 6px;
    border: 1px solid var(--borda);
    border-bottom-width: 2px;
    border-radius: var(--raio-1);
    background: var(--superficie-2);
    font-family: var(--fonte-mono);
    font-size: var(--t-xs);
    color: var(--texto-suave);
    pointer-events: none;
}

@media (max-width: 900px) {
    /* Em tela estreita a busca ganha a linha inteira, abaixo do título. */
    .pn-topo__busca { order: 3; flex-basis: 100%; max-width: none; }
    .pn-atalho { display: none; }
}

/* =========================================================================
   empresa agrupada por CNPJ
   ========================================================================= */

.pn-grade--empresas { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }

.pn-empresa__nome { font-size: var(--t-md); }
.pn-empresa__razao {
    margin-top: 2px;
    font-size: var(--t-xs);
    color: var(--texto-suave);
    /* Razão social longa não pode esticar o cartão. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pn-empresa__dados {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--e-1) var(--e-3);
    margin: var(--e-4) 0 0;
    font-size: var(--t-sm);
}
.pn-empresa__dados dt { color: var(--texto-suave); }
.pn-empresa__dados dd { margin: 0; font-variant-numeric: tabular-nums; }

.pn-empresa__apps { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-4); }

.pn-empresa__rodape {
    margin-top: var(--e-3);
    padding-top: var(--e-3);
    border-top: 1px solid var(--borda);
    font-size: var(--t-xs);
    color: var(--texto-suave);
}

/* --- detalhe do grupo --- */

.pn-migalha { margin-bottom: var(--e-4); font-size: var(--t-sm); color: var(--texto-suave); }
.pn-migalha a { color: var(--acao-forte); }

.pn-ficha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: var(--e-4);
    margin: 0 0 var(--e-4);
}
.pn-ficha dt { font-size: var(--t-xs); color: var(--texto-suave); text-transform: uppercase; letter-spacing: .04em; }
.pn-ficha dd { margin: var(--e-1) 0 0; font-size: var(--t-sm); }

.pn-host__titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2); font-size: var(--t-md); font-weight: 600; }

/* O nome da máquina, ao lado do endereço. É o que a pessoa reconhece primeiro, então
   vem em texto normal enquanto o endereço fica no monoespaçado. */
.pn-host__descricao { font-weight: 500; color: var(--texto-suave); font-size: var(--t-sm); }
.pn-host__contagem { margin-left: auto; }
.pn-host__observacao {
    margin: 0;
    padding: 0 var(--e-5) var(--e-3);
    color: var(--texto-suave);
    font-size: var(--t-sm);
}

/* Endereço de servidor é longo e não deve empurrar a tabela: quebra onde der. */
.pn-endereco {
    max-width: 32ch;
    font-family: var(--fonte-mono);
    font-size: var(--t-xs);
    overflow-wrap: anywhere;
}
/* O host se repete em todas as linhas do bloco; a porta ou o caminho é que muda.
   Um é fundo, o outro é o que se lê. */
.pn-endereco__host { color: var(--texto-suave); }
.pn-endereco__parte { color: var(--texto); font-weight: 700; }

.pn-classificar { display: flex; align-items: center; gap: var(--e-2); }
.pn-classificar .pn-campo__controle { min-height: 32px; font-size: var(--t-xs); width: auto; }

.pn-cartao__rodape { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }

.pn-campo-com-acao { display: flex; align-items: flex-end; gap: var(--e-2); }
.pn-campo-com-acao .pn-campo { flex: 1 1 auto; margin-bottom: var(--e-4); }
.pn-campo-com-acao .pn-botao { margin-bottom: var(--e-4); white-space: nowrap; }
/* montador do endereço do servidor -------------------------------------- */
/* O bloco fica destacado do resto do formulário porque não é um campo: é uma
   ferramenta que escreve no campo logo abaixo dele. */
.pn-montador__modo {
    margin: 0 0 var(--e-4);
    padding: var(--e-3);
    border: 1px dashed var(--borda-forte);
    border-radius: var(--raio-1);
    background: var(--superficie-2);
}
.pn-montador__modo > legend { padding: 0 var(--e-1); }
.pn-montador__modo > .pn-campo__ajuda { display: block; margin-bottom: var(--e-3); }

.pn-montador__opcoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: var(--e-2);
}
.pn-montador__opcao {
    display: flex;
    gap: var(--e-2);
    align-items: flex-start;
    padding: var(--e-2) var(--e-3);
    border: 1px solid var(--borda);
    border-radius: var(--raio-1);
    background: var(--superficie);
    cursor: pointer;
}
.pn-montador__opcao:hover { border-color: var(--borda-forte); }
.pn-montador__opcao:has(input:checked) { border-color: var(--acao); background: var(--verde-50); }
.pn-montador__opcao:has(input:focus-visible) { border-color: var(--acao); box-shadow: var(--anel-foco); }
.pn-montador__opcao input { margin-top: 0.2em; flex: none; }
.pn-montador__opcao span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pn-montador__opcao strong { font-size: var(--t-sm); }
.pn-montador__opcao code { font-size: var(--t-xs); color: var(--texto-suave); overflow-wrap: anywhere; }

/* O tipo de aplicação abre o montador: escolhê-lo preenche porta e caminho. */
.pn-montador__tipo { max-width: 340px; margin-bottom: var(--e-3); }

.pn-montador__campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 0 var(--e-4);
}
.pn-montador__esquema { max-width: 140px; }
.pn-montador__host { grid-column: 1 / -1; }
.pn-montador__campos > [hidden] { display: none; }

/* Empresa sem nenhuma aplicação ativa: a borda e o rodapé avisam antes de ler o texto.
   A cor não carrega a informação sozinha -- o selo de status e o rodapé dizem em palavras. */
.pn-empresa--inativa { border-color: var(--erro-200); background: var(--erro-50); }
.pn-empresa--inativa:hover { border-color: var(--erro-600); }
.pn-empresa__rodape--alerta { color: var(--erro-700); font-weight: 600; }

.pn-empresa__cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-3); }
.pn-empresa__cabecalho .pn-badge { flex: none; }

/* Alarme no nível da empresa. Mais forte que o `--desativado` do item porque aqui a
   informação é "esta empresa inteira está desativada". */
.pn-badge--inativo {
    background: var(--erro-600);
    border-color: var(--erro-700);
    color: #fff;
}

/* Aplicação desativada. Vermelho como o selo da empresa, mas em tom claro: no cartão
   ela aparece ao lado do selo forte, e dois vermelhos cheios competiriam entre si. */
.pn-badge--inativo-suave {
    background: var(--erro-50);
    border-color: var(--erro-200);
    color: var(--erro-700);
}

/* Chave pública: monoespaçada e sem quebra de palavra, para o duplo clique pegar a
   linha inteira na hora de colar no authorized_keys. */
.pn-chave-publica {
    font-family: var(--fonte-mono);
    font-size: var(--t-xs);
    white-space: pre;
    overflow-x: auto;
}

/* Um arquivo de configuração dentro do cartão: título com o caminho e o estado, e o
   que foi lido dele logo abaixo. */
.pn-arquivo { padding: var(--e-4) 0; border-top: 1px solid var(--borda); }
.pn-arquivo:first-child { padding-top: 0; border-top: 0; }
.pn-arquivo__remover { margin-top: var(--e-2); }

/* Bloco de campos com um assunto próprio dentro do formulário. */
.pn-bloco {
    margin: var(--e-4) 0;
    padding: var(--e-3) var(--e-4) var(--e-1);
    border: 1px solid var(--borda);
    border-radius: var(--raio-1);
    background: var(--superficie-2);
}
.pn-bloco > legend { padding: 0 var(--e-1); }
.pn-bloco > .pn-campo__ajuda { display: block; margin-bottom: var(--e-3); }

.pn-arquivo__titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-2);
    margin-bottom: var(--e-3);
    font-size: var(--t-sm);
    font-weight: 600;
}

/* Valor que não se edita, exibido no lugar onde estaria o campo. */
.pn-valor-fixo { padding: var(--e-2) 0; }

.pn-secao__cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-2) var(--e-3);
    margin-bottom: var(--e-3);
}
.pn-secao__cabecalho .pn-secao__titulo { margin-bottom: 0; }
.pn-secao__acoes { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--e-2); }

.pn-mover { display: inline-flex; align-items: center; gap: var(--e-1); }
.pn-mover .pn-campo__controle { width: auto; min-height: 32px; font-size: var(--t-xs); }

/* Preparar máquina: cada passo é um cartão com o comando pronto e o botão de executar. */
.pn-passo__cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-2);
    margin-bottom: var(--e-2);
}
.pn-passo__titulo { margin: 0; font-size: var(--t-md); font-weight: 600; }
.pn-passo__empresa { margin-top: var(--e-3); max-width: 22rem; }
.pn-passo__form { margin-top: var(--e-3); }

/* Comando pronto e saída da máquina: monospaçado, rola sozinho e não estoura a largura. */
.pn-saida-comando {
    margin: var(--e-3) 0 0;
    padding: var(--e-3);
    border: 1px solid var(--borda);
    border-radius: var(--raio-1);
    background: var(--fundo);
    color: var(--texto);
    font-family: var(--fonte-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: var(--t-xs);
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    overflow-x: auto;
    max-height: 22rem;
    overflow-y: auto;
}