/* ============================================================
   Painel Nexo · estilos próprios do portal
   Carregue DEPOIS de ds/tokens.css, ds/foundations.css, ds/core.css e
   tema-escuro.css.
   ============================================================

   ESCOPO DESTE ARQUIVO
   Só o que o Design System deliberadamente não cobre. O CONTEXTO_DO_PROJETO.md
   do DS lista como fora do Core v1.2: "shells específicos de dashboard",
   Toolbar, Segmented Control e Metric Card. O shell do portal e o layout da
   tela de entrada são, portanto, legitimamente nossos.

   Tudo aqui consome token do DS. Nenhuma cor literal, exceto onde o próprio DS
   não oferece token — e nesse caso vem do tema-escuro.css como --pn-*.
   Prefixo das classes próprias: pn-*, para nunca colidir com nexo-*.
   ============================================================ */

html,body{margin:0;padding:0}
body{
  background:var(--pn-fundo-pagina);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:var(--type-body-size);
  line-height:var(--type-body-line);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-display); margin:0}
[hidden]{display:none !important}

/* ---------- tela de entrada: marca à esquerda, formulário à direita ---------- */
.pn-porta{min-height:100vh; display:grid; grid-template-columns:minmax(0,420px) 1fr}
.pn-porta__marca{
  background:var(--brand-wine-700);
  color:var(--text-inverse);
  padding:var(--space-10);
  display:flex; flex-direction:column; justify-content:space-between; gap:var(--space-8);
}
/* o painel da marca é sempre vinho, nos dois temas: o texto nele é sempre claro */
.pn-porta__marca,
.pn-porta__marca h2{color:#fff}
.pn-porta__marca img{width:154px; height:auto}
.pn-porta__marca h2{font-size:var(--type-h2-size); line-height:var(--type-h2-line)}
.pn-porta__marca p{color:rgba(255,255,255,.84); font-size:var(--type-body-sm-size); max-width:34ch; margin:var(--space-2) 0 0}
.pn-porta__rodape{font-size:var(--type-caption-size); color:rgba(255,255,255,.72)}

.pn-porta__conteudo{display:flex; align-items:center; justify-content:center; padding:var(--space-10) var(--space-6)}
.pn-entrada{
  width:100%; max-width:430px; background:var(--surface-default);
  border:1px solid var(--border-default); border-radius:var(--radius-lg);
  padding:var(--space-8); box-shadow:var(--shadow-elevated);
}
.pn-entrada h1{font-size:var(--type-h3-size); line-height:var(--type-h3-line); margin-bottom:var(--space-2)}
.pn-entrada__sub{color:var(--text-muted); font-size:var(--type-body-sm-size); margin:0 0 var(--space-4)}
.pn-entrada .nexo-field{margin-top:var(--space-4)}
.pn-entrada .nexo-tabs{margin-top:0; margin-bottom:var(--space-2)}

.pn-acoes{display:flex; gap:var(--space-2); flex-wrap:wrap; align-items:center; margin-top:var(--space-5)}
/* Duas colunas de campo lado a lado.
   align-items:start é obrigatório: sem ele a grade estica os filhos à mesma
   altura e, como .nexo-field também é grade, a coluna SEM dica (<small>)
   distribui a sobra entre as próprias linhas — o campo desce e fica mais alto
   que o vizinho. Foi o desalinhamento visto em "Senha / Repita a senha". */
.pn-par{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); align-items:start}
.pn-link{
  background:none; border:0; padding:var(--space-1) 0; cursor:pointer;
  color:var(--action-primary); font:600 var(--type-body-sm-size) var(--font-body);
  text-decoration:underline; text-underline-offset:3px;
}

/* ---------- shell da aplicação ---------- */
.pn-app{display:grid; grid-template-columns:254px 1fr; min-height:100vh}
.pn-lateral{
  background:var(--surface-default); border-right:1px solid var(--border-default);
  padding:var(--space-6) var(--space-4);
  display:flex; flex-direction:column; gap:var(--space-6);
}
.pn-lateral__marca{width:120px; height:auto}
.pn-lateral nav{display:flex; flex-direction:column; gap:2px}
.pn-lateral nav button{
  text-align:left; background:none; border:0; cursor:pointer;
  font:500 var(--type-body-sm-size) var(--font-body); color:var(--text-secondary);
  padding:var(--space-2) var(--space-3); border-radius:var(--radius-sm);
}
.pn-lateral nav button:hover{background:var(--surface-subtle); color:var(--text-primary)}
.pn-lateral nav button[aria-current="page"]{
  background:var(--pn-tenue); color:var(--action-primary); font-weight:700;
}
.pn-lateral__rodape{
  margin-top:auto; border-top:1px solid var(--border-default);
  padding-top:var(--space-4); font-size:var(--type-caption-size); color:var(--text-muted);
}
.pn-lateral__rodape strong{
  display:block; color:var(--text-primary);
  font-size:var(--type-body-sm-size); word-break:break-word;
}

.pn-principal{padding:var(--space-6) var(--space-8) var(--space-16); min-width:0}
.pn-titulo{font-size:var(--type-h2-size); line-height:var(--type-h2-line)}
.pn-subtitulo{color:var(--text-muted); font-size:var(--type-body-sm-size); margin:var(--space-1) 0 var(--space-6)}

/* ---------- bloco de conteúdo (o DS tem card, mas sem cabeçalho de seção) ---------- */
.pn-bloco{
  background:var(--surface-default); border:1px solid var(--border-default);
  border-radius:var(--radius-lg); padding:var(--space-5); margin-bottom:var(--space-5);
}
.pn-bloco h3{font-size:var(--type-h4-size); line-height:var(--type-h4-line)}
.pn-bloco__dica{color:var(--text-muted); font-size:var(--type-body-sm-size); margin:var(--space-1) 0 var(--space-4)}

/* ---------- dado cru ---------- */
.pn-dado{
  background:var(--surface-subtle); border:1px solid var(--border-default);
  border-radius:var(--radius-md); padding:var(--space-4); margin:0;
  font:13px/1.5 ui-monospace,"Cascadia Mono",Consolas,monospace;
  color:var(--text-secondary); overflow-x:auto; white-space:pre-wrap; word-break:break-word;
}

/* ---------- linha de resultado de teste ---------- */
.pn-teste{
  display:flex; gap:var(--space-3); padding:var(--space-3) 0;
  border-bottom:1px solid var(--border-default);
}
.pn-teste:last-child{border-bottom:0}
.pn-teste__marca{flex:none; width:22px; text-align:center; font-size:17px; line-height:1.4}
.pn-teste__corpo{min-width:0; flex:1}
.pn-teste__corpo b{font-size:var(--type-body-sm-size)}
.pn-teste__corpo p{margin:2px 0 0; font-size:var(--type-caption-size); color:var(--text-muted)}

/* ---------- celular ---------- */
@media (max-width:860px){
  .pn-porta{grid-template-columns:1fr}
  .pn-porta__marca{padding:var(--space-6); gap:var(--space-4)}
  .pn-porta__marca p,.pn-porta__rodape{display:none}
  .pn-porta__conteudo{padding:var(--space-6) var(--space-4)}
  .pn-entrada{padding:var(--space-5)}
  .pn-app{grid-template-columns:1fr}
  .pn-lateral{
    border-right:0; border-bottom:1px solid var(--border-default);
    flex-direction:row; align-items:center; flex-wrap:wrap; gap:var(--space-4);
    padding:var(--space-3) var(--space-4);
  }
  .pn-lateral nav{flex-direction:row; flex-wrap:wrap; flex:1}
  .pn-lateral__rodape{margin:0; border-top:0; padding-top:0; flex-basis:100%}
  .pn-principal{padding:var(--space-5) var(--space-4) var(--space-12)}
  .pn-par{grid-template-columns:1fr}
}