/* Painel da mesa — story 004.2.
 *
 * A tela mora fora da SPA (decisão do dono, D-3): `app.js` já estava com 2.365
 * linhas, e o épico 003 recusou portar o admin.js do projeto irmão por ser um
 * monolito de 2.670. Construir o painel dentro da SPA chegaria no mesmo lugar
 * por outro caminho.
 *
 * Tokens: nenhum novo. Tudo sai de site.css e vidro.css, e é por isso que o
 * modo noturno funciona aqui sem uma linha de JavaScript. */

.painel-pagina { background: var(--fundo); color: var(--tinta); }
.pn-pagina { max-width: var(--shell, 1180px); margin: 0 auto; padding: 40px var(--gutter, 24px) 80px; }

/* ── O portão ─────────────────────────────────────────────────────────────
   O documento é público; quem barra é o dado. Enquanto a resposta não chega,
   esta caixa é a única coisa na tela — e ela nunca mostra número nenhum. */
.pn-portao { max-width: 560px; margin: 72px auto; padding: 30px 32px; background: var(--fundo-2); border-left: 2px solid var(--linha-forte); }
.pn-portao[data-estado="negado"] { border-left-color: var(--ambar-tinta); }
.pn-portao__texto { font-size: 16.5px; line-height: 1.6; color: var(--tinta-2); margin: 0; }
.pn-portao__volta { display: inline-block; margin-top: 20px; font-size: 14px; padding-bottom: 4px; border-bottom: 1px solid var(--linha-forte); }

/* ── Topo e seções ───────────────────────────────────────────────────────── */
.pn-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-bottom: 1px solid var(--linha); padding-bottom: 18px; }
.pn-sobrenome { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: .2em; opacity: .68; }
.pn-titulo { font-family: Newsreader, Georgia, serif; font-weight: 400; font-size: clamp(19px, 2.36vw, 40px); margin: 12px 0 0; }

.pn-secoes { display: flex; gap: 6px; flex-wrap: wrap; }
.pn-secao {
  font: inherit; font-size: 12.5px; letter-spacing: .1em; font-family: 'JetBrains Mono', monospace;
  background: none; border: 1px solid transparent; border-radius: 2px;
  padding: 9px 14px; cursor: pointer; color: var(--tinta-2); text-transform: uppercase;
}
.pn-secao:hover { border-color: var(--linha-forte); }
.pn-secao[aria-selected="true"] { color: var(--fundo); background: var(--tinta); }
.pn-conta { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--ambar-tinta); color: var(--fundo); font-size: 11px; }

/* ── O filtro de período ──────────────────────────────────────────────────
   `aria-pressed` e não `aria-selected`: são botões de alternância dentro de um
   grupo, não abas. Um leitor de tela anuncia "ativado", que é o certo. */
.pn-periodo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 26px; }
.pn-periodo button {
  font: inherit; font-size: 12.5px; font-family: 'JetBrains Mono', monospace; letter-spacing: .08em;
  background: none; border: 1px solid var(--linha-forte); border-radius: 2px;
  padding: 7px 13px; cursor: pointer; color: var(--tinta-2);
}
.pn-periodo button[aria-pressed="true"] { background: var(--tinta); color: var(--fundo); border-color: var(--tinta); }
.pn-periodo__recorte { font-size: 12.5px; opacity: .68; margin-left: 8px; }

/* ── Cartões de número ────────────────────────────────────────────────────
   A BASE vai junto do número, sempre. É a terceira das cinco ideias que valeu
   copiar do projeto irmão, e a mais importante: um número sem metodologia ao
   lado é um número que alguém vai usar para decidir sem saber o que ele conta.
   Lá isso salvou a casa de vender audiência inflada. */
.pn-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-top: 26px; }
.pn-cartao { border: 1px solid var(--linha); padding: 20px 20px 18px; }
.pn-cartao__valor { font-family: Newsreader, Georgia, serif; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.pn-cartao__rotulo { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .14em; opacity: .68; margin-top: 12px; }
.pn-cartao__base { font-size: 12px; line-height: 1.45; opacity: .6; margin-top: 8px; }

/* ── Caixas e grade ───────────────────────────────────────────────────────── */
.pn-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.pn-caixa { position: relative; border: 1px solid var(--linha); padding: 20px; min-height: 200px; }
.pn-caixa__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.pn-caixa__titulo { font-family: Newsreader, Georgia, serif; font-weight: 400; font-size: 19px; margin: 0; }
.pn-caixa__base { font-size: 12px; opacity: .6; }
.pn-espera { font-size: 14.5px; opacity: .6; font-style: italic; }

/* ── Estado vazio: CAMADA sobre a caixa, não substituição ─────────────────
   Quarta ideia copiada. Substituir o conteúdo faria a altura da página pular
   quando o dado chegasse; a camada mantém o layout parado. E o texto diz o que
   FAZER, nunca "sem dados". */
.pn-vazio {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  padding: 24px; text-align: center; background: color-mix(in srgb, var(--fundo) 92%, transparent);
}
.pn-vazio[hidden] { display: none !important; }
.pn-vazio p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--tinta-2); max-width: 44ch; }

/* ── Barras (G2 da arquitetura) ───────────────────────────────────────────
   Cada barra é um NÓ do documento com aria-label própria. É a vantagem que o
   <canvas> não tem como oferecer, e o painel é a tela onde a mesa decide sobre
   gente, operada todo dia. `--h` vem do JS; a cor vem do token e por isso o
   modo noturno funciona sozinho. */
.pn-serie { display: flex; align-items: flex-end; gap: 2px; height: 140px; }
.pn-barra { flex: 1 1 0; height: var(--h, 0%); background: var(--tinta-3); min-height: 1px; border-radius: 1px 1px 0 0; }
.pn-barra:hover { background: var(--tinta); }

/* Linha (G3). `currentColor` no traço: o SVG herda a cor do texto. */
.pn-linha { display: block; width: 100%; height: 140px; color: var(--tinta-3); }

/* ── Listas de gente ─────────────────────────────────────────────────────── */
.pn-lista { list-style: none; margin: 0; padding: 0; }
.pn-lista li { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--linha); font-size: 14px; }
.pn-lista li:last-child { border-bottom: 0; }
.pn-lista__quando { font-family: 'JetBrains Mono', monospace; font-size: 12px; opacity: .65; white-space: nowrap; }

/* 900 desde a story 006.5 (era 860): régua de pontos, spec layout-celular §3.2. */
@media (max-width: 900px) {
  .pn-grade { grid-template-columns: 1fr; }
  .pn-topo { align-items: flex-start; }
}

/* ── Busca e tabelas das seções ─────────────────────────────────────────── */
.pn-busca { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.pn-busca label { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .14em; opacity: .68; }
.pn-busca input {
  font: inherit; font-size: 14px; flex: 1 1 260px; max-width: 380px;
  padding: 9px 12px; background: var(--fundo); color: var(--tinta);
  border: 1px solid var(--linha-forte); border-radius: 2px;
}

.pn-linha-tabela {
  display: grid; gap: 14px; align-items: center;
  padding: 13px 4px; border-bottom: 1px solid var(--linha); font-size: 14px;
}
/* A coluna de ações leva «Link de senha» ao lado de Revogar/Reativar (010.4):
   200 cabe os dois numa linha; com 150, o par quebrava em duas. */
.pn-linha-tabela--contas { grid-template-columns: 1.2fr 1.5fr 110px 100px 100px 200px; }
.pn-linha-tabela--fila   { grid-template-columns: 1.2fr 1.5fr 130px 100px 190px; }
/* A coluna de ações das publicações leva só o «Editar» (011.6). */
.pn-linha-tabela--posts  { grid-template-columns: 2.4fr 110px 140px 110px 80px; }
.pn-cabecalho-tabela {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .14em;
  opacity: .68; border-bottom: 1px solid var(--linha-forte);
}
.pn-mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; opacity: .72; }
.pn-selo { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .12em; }
.pn-acoes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pn-acao {
  font: inherit; font-size: 12.5px; padding: 6px 12px; cursor: pointer; border-radius: 2px;
  border: 1px solid var(--linha-forte); background: none; color: var(--tinta-2);
}
.pn-acao:hover { border-color: var(--tinta); color: var(--tinta); }
.pn-acao--forte { background: var(--tinta); color: var(--fundo); border-color: var(--tinta); }
.pn-acao[disabled] { opacity: .5; cursor: default; }
/* O «Editar» das publicações é link (011.6): sem isto, a altura mínima do
   toque e o centro do rótulo não valeriam para ele, como no «Enviar no
   WhatsApp» do modal do link. */
a.pn-acao { display: inline-flex; align-items: center; text-decoration: none; }

/* 900 desde a story 006.5 (era 860), como a grade acima. */
@media (max-width: 900px) {
  .pn-linha-tabela { grid-template-columns: 1fr !important; gap: 4px; padding: 14px 4px; }
  .pn-cabecalho-tabela { display: none; }
  .pn-acoes { justify-content: flex-start; margin-top: 8px; }
}

/* O e-mail na tabela (901 para cima, onde ela tem colunas). Um item de grade
   não encolhe abaixo do próprio conteúdo (`min-width: auto`), e um e-mail
   longo, sem espaço para quebrar, empurrava a linha para fora da caixa entre
   ~901 e ~1000px, com a página rolando de lado (story 006.5, item herdado do
   orquestrador). A coluna corta com reticências e o e-mail inteiro fica na
   dica (`title`). Abaixo de 901 a linha vira cartão e o e-mail fica como era. */
@media (min-width: 901px) {
  .pn-email { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* A saída para a redação, no cabeçalho da caixa de Publicações — ao lado da
   lista que ela alimenta. Já sumiu uma vez (com o painel antigo) e já ficou
   solta no topo do painel; este é o lugar em que ela não parece avulsa. */
a.pn-escrever {
  display: inline-flex; align-items: center; text-decoration: none;
  padding: 9px 16px; white-space: nowrap;
}
a.pn-escrever:hover { color: var(--fundo); opacity: .9; }
/* O cabeçalho da caixa passa a ter um bloco de texto e uma ação: alinhados pelo
   topo, não pela linha de base, senão o botão flutua no meio do subtítulo. */
.pn-caixa__topo { align-items: flex-start; }

/* ── O fluxo de investidores (story 011.1) ────────────────────────────────
   Uma caixa da Visão geral, logo abaixo dos cartões: a linha de estado, o
   botão e a mensagem. Sem a altura mínima das caixas de gráfico: aqui não há
   camada de vazio a cobrir, e 200px para três linhas seriam um buraco.

   O selo é texto com um ponto, e não pílula: o de falha é longo («2 falhas
   seguidas: a fonte recusou o acesso (HTTP 403)») e quebra em duas linhas a
   320, o que uma pílula de borda redonda não faz bem. A cor de cada estado é
   a de texto da casa (as mesmas de APROVADA, PENDENTE e REVOGADA). */
.pn-fluxo { min-height: 0; margin-top: 16px; }
.pn-fluxo .pn-caixa__topo { margin-bottom: 12px; }
.pn-fluxo__estado { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--tinta-2); }
.pn-fluxo__selo { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .04em; color: var(--tinta-3); }
.pn-fluxo__selo::before {
  content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px;
  border-radius: 50%; background: currentColor; vertical-align: 1px;
}
.pn-fluxo__selo[data-estado="ok"] { color: var(--verde); }
.pn-fluxo__selo[data-estado="fonte_atrasada"] { color: var(--ambar-tinta); }
.pn-fluxo__selo[data-estado="pipeline_parado"] { color: var(--coral); }
.pn-fluxo__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 16px; }
.pn-fluxo__botao { font-size: 13.5px; padding: 9px 16px; }
/* O `.pn-acao:hover` pinta o texto com a tinta, que no botão forte é a cor do
   fundo dele: o rótulo sumia sob o cursor. Aqui o texto fica no papel. */
.pn-fluxo__botao:hover { color: var(--fundo); }
/* Consultando, o botão está desligado mas o rótulo é a notícia («Consultando a
   fonte…»): a 50% do `.pn-acao[disabled]`, ele dava 3,85:1 no tema Dia; a 75%,
   9,6:1 no Dia e 9,9:1 na Noite. O «Aguarde» fica com os 50% de botão desligado. */
.pn-fluxo__botao[aria-busy="true"] { cursor: progress; opacity: .75; }
.pn-fluxo__abrir { font-size: 13.5px; text-decoration: underline; text-decoration-color: var(--linha-forte); text-underline-offset: 4px; }
/* A faixa abraça a frase: no desktop, uma frase curta numa faixa de 1.200px
   lia como aviso do sistema inteiro, e não da caixa. */
.pn-fluxo__msg { width: fit-content; max-width: 100%; box-sizing: border-box; margin: 14px 0 0; padding: 10px 14px; font-size: 14px; line-height: 1.5; }

/* Rodapé do painel: só o que precisa estar em toda página. */
.pn-rodape {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  max-width: var(--shell, 1180px); margin: 0 auto;
  padding: 22px var(--gutter, 24px) 40px;
  border-top: 1px solid var(--linha);
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .14em; opacity: .6;
}
.pn-rodape a:hover { opacity: 1; }

/* ── O link de senha (story 010.4) ────────────────────────────────────────
   O modal é o da casa: .md-fundo, .md-caixa, .md-selo, .md-titulo, .md-texto
   e .md-acoes de site.css, com os botões .ed-btn e as faixas .ed-msg. Daqui
   saem só os ajustes de um modal mais comprido que os da SPA.

   A caixa pode passar da altura da tela (no celular, com os dois avisos): o
   fundo rola, e a caixa fica centrada por margem automática. Com o
   `place-items: center` da casa, o topo de uma caixa mais alta que a janela
   ficaria cortado, fora do alcance da rolagem. */
.pn-link-fundo { overflow-y: auto; place-items: start center; }
.pn-link-caixa { margin-block: auto; }
.pn-link-cliente { margin-top: 18px; }
.pn-link-dado { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 6px 0 0; font-size: 14.5px; }
.pn-link-dado__rotulo { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .14em; opacity: .68; min-width: 72px; }
/* Um e-mail longo não tem onde quebrar e empurraria a caixa para fora da tela. */
.pn-link-dado__valor { font-family: 'JetBrains Mono', monospace; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.pn-link-nota { font-size: 13.5px; line-height: 1.5; color: var(--tinta-2); margin: 8px 0 0; }
/* O número que o wa.me abre de fato (NUM-001 do gate), em tinta cheia: é com
   ele que a mesa compara o número de quem pediu. */
.pn-link-destino .pn-link-dado__valor { color: var(--tinta); }
.pn-link-caixa .ed-msg { margin-top: 14px; padding: 10px 14px; font-size: 13.5px; line-height: 1.5; }
.pn-link-rotulo {
  display: block; margin-top: 20px;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .14em; opacity: .68;
}
.pn-link-campo {
  display: block; width: 100%; box-sizing: border-box; margin-top: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px;
  padding: 10px 12px; background: var(--fundo-2); color: var(--tinta);
  border: 1px solid var(--linha-forte); border-radius: 2px;
  text-overflow: ellipsis;
}
.pn-link-validade { font-size: 13.5px; color: var(--tinta-2); margin: 8px 0 0; }
.pn-link-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
/* O «Enviar no WhatsApp» é um <a>: sem isto, a altura mínima do toque (e o
   centro do rótulo) não valeriam para ele. */
.pn-link-acoes .ed-btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; }
.pn-link-unica { font-size: 14px; margin-top: 18px; }
.pn-link-caixa .md-acoes { margin-top: 22px; }
/* O recado do link (conta da mesa, rede), logo abaixo da linha que o pediu. */
.pn-link-recado { margin: 8px 0 10px; padding: 10px 14px; font-size: 13.5px; }

@media (max-width: 560px) {
  .pn-link-caixa { padding: 26px 20px 22px; }
  .pn-link-caixa .md-titulo { font-size: 24px; }
  .pn-link-acoes .ed-btn { flex: 1 1 100%; }
  /* 011.1: no celular o botão do fluxo ocupa a linha (é o alvo do polegar), e
     o «Abrir o Fluxo →» desce para a de baixo. A 320 os dois lado a lado já
     não cabiam (150 + 22 + 91px numa caixa de 238). */
  .pn-fluxo__botao { flex: 1 1 100%; }
}

/* ── Área de toque (spec layout-celular §7.2, E2 da story 006.5) ───────────
   O link do rodapé tem 14px de altura: abaixo de 24 em toda largura (WCAG
   2.5.8). Ele cresce por um `::before` transparente centrado, que não entra no
   fluxo, e por isso o desktop fica igual; o toque no pseudo-elemento é do dono.
   É a receita do rodapé da SPA (`site.css`, 006.2), com `--alvo` de 24 por
   padrão e 44 com o dedo até 560. */
.pn-rodape a { position: relative; }
.pn-rodape a::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  min-width: var(--alvo, 24px);
  min-height: var(--alvo, 24px);
  transform: translate(-50%, -50%);
}

/* Com o dedo e até 560px, 44 para todo controle. As abas (37) e os botões de
   período (33) quebram em mais de uma linha a 320-414, com 6px de vão: uma
   área invisível de 44 cobriria a fileira de baixo, então aqui quem cresce é
   o próprio botão, por altura mínima. */
@media (max-width: 560px) and (pointer: coarse) {
  .pn-rodape { --alvo: 44px; }
  .pn-secao, .pn-periodo button { min-height: 44px; }
  /* 010.4: os botões das linhas (Revogar, Reativar, Aprovar, Recusar e o
     «Link de senha»), que mediam 29, e os controles do modal do link. O campo
     do link vai a 16px, para o iOS não aproximar a tela no toque. */
  .pn-acao { min-height: 44px; }
  .pn-link-caixa .ed-btn { min-height: 44px; }
  .pn-link-campo { min-height: 44px; font-size: 16px; }
  /* 011.1: o botão do fluxo já ganha os 44 pelo `.pn-acao`; o link para o
     /fluxo, de 13,5px, cresce por altura mínima. */
  .pn-fluxo__abrir { display: inline-flex; align-items: center; min-height: 44px; }
}