/* t80, reforma de 20/09: "Publicações e acesso do cliente". Prefixo `.pu-`.
   ⚠️ `.por-` é da página PÚBLICA que o cliente abre pelo link, e `.pk-` é do
   painel de links. Três coisas vizinhas, três prefixos, nenhum reuso.

   ⚠️ Tokens: o projeto define APENAS --accent --accent-ink --accent-soft
   --display --green --ink --line --muted --paper --radius --s1..--s6
   --surface. Token inventado sem fallback vira currentColor e a borda sai
   preta, sem a captura denunciar. */

.pu-pagina{min-width:0;display:flex;flex-direction:column;gap:16px}
.pu-acoes-topo{display:flex;gap:10px;flex-wrap:wrap}

/* Contexto do projeto: substitui o <select> cru de 243 opções pelo seletor
   aprovado, o mesmo do Memorial, Arquivos, Cronograma, Tarefas e Catálogo. */
.pu-contexto{display:flex;align-items:center;gap:14px;background:var(--surface);
 border:1px solid var(--line);border-radius:8px;padding:14px 16px;min-width:0}
.pu-contexto-dados{flex:1 1 auto;min-width:0;display:grid;gap:2px}
.pu-contexto-dados strong{font-size:15px;overflow-wrap:anywhere}
.pu-contexto-dados span{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.pu-contexto-acoes{flex:0 0 auto;display:flex;gap:8px;flex-wrap:wrap}
.pu-capa{flex:0 0 auto;width:56px;height:56px;border-radius:8px;object-fit:cover;background:var(--paper)}
.pu-monograma{flex:0 0 auto;width:56px;height:56px;border-radius:8px;display:grid;place-items:center;
 background:var(--accent-soft);color:var(--accent-ink);font-weight:700;font-size:18px}

.pu-cartoes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pu-cartao{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:18px;min-width:0}
.pu-cartao>span{display:block;color:var(--muted);font-size:11px}
.pu-cartao strong{display:block;font-size:30px;font-weight:500;margin:10px 0 6px;letter-spacing:-1px;overflow-wrap:anywhere}
/* ⚠️ Cartão sem número não recebe "0" grande: recebe a frase do que é
   verdade. Um zero enorme parece defeito; "Nenhum link gerado" informa. */
.pu-cartao strong.pu-frase{font-size:15px;letter-spacing:0;line-height:1.35;margin:8px 0 6px}
.pu-cartao small{display:block;color:var(--muted);font-size:11px;line-height:1.5}
.pu-cartao .text-button{margin-top:8px;padding:0}
.pu-nota{font-size:12px;color:var(--muted);margin:0;line-height:1.5}

/* Abas: uma região montada por vez, no lugar de dez painéis empilhados. */
.pu-abas{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:0}
.pu-aba{border:0;border-bottom:2px solid transparent;background:none;padding:10px 14px;font:inherit;
 font-size:13px;color:var(--muted);cursor:pointer;margin-bottom:-1px}
.pu-aba[aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}
.pu-aba:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pu-aba span{color:var(--muted);font-weight:400}
[role=tabpanel]{min-width:0}

/* Publicar: cinco cartões-tipo no lugar de cinco formulários abertos. É isto
   que tira a maior parte dos 3.224 px. */
.pu-tipos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.pu-tipo{display:flex;flex-direction:column;gap:6px;text-align:left;background:var(--surface);
 border:1px solid var(--line);border-radius:8px;padding:14px 16px;min-width:0;font:inherit;cursor:pointer}
.pu-tipo:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft)}
.pu-tipo:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pu-tipo:disabled{cursor:not-allowed;opacity:.85;background:var(--paper)}
.pu-tipo strong{font-size:13px}
.pu-tipo span{font-size:11px;color:var(--muted);line-height:1.45;overflow-wrap:anywhere}

.pu-selo{display:inline-block;align-self:flex-start;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600}
.pu-selo[data-tom=ok]{background:#eaf3ec;color:#2f5c3a}
.pu-selo[data-tom=espera]{background:var(--accent-soft);color:var(--accent-ink)}
.pu-selo[data-tom=nada]{background:var(--paper);color:var(--muted)}
.pu-selo[data-tom=fora]{background:#fdeceb;color:#7d2f20}

/* Corpo em duas colunas no desktop largo, com o painel lateral à direita. */
.pu-corpo{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start;min-width:0}
/* ⚠️ Duas colunas a partir de 1180 px. A regra antes dependia de uma classe
   que nada adicionava, e por isso a coluna lateral caía embaixo e a página
   ficava com 1.957 px onde cabia bem menos. */
@media (min-width:1180px){
 .pu-pagina.pu-com-lado .pu-corpo{grid-template-columns:minmax(0,1fr) minmax(360px,420px)}
}
.pu-bloco{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:18px 20px;min-width:0}
.pu-bloco>h2{margin:0 0 4px;font-size:16px}
.pu-bloco>p{margin:0 0 14px;font-size:13px;color:var(--muted);line-height:1.5}

/* O que o cliente vê e o que não vê. Não depende de dado nenhum, então é
   honesto com o acervo vazio, e é a pergunta que se faz antes de compartilhar. */
.pu-visivel{display:grid;gap:12px}
.pu-lista{margin:0;padding:0;list-style:none;display:grid;gap:7px;font-size:12px;line-height:1.45}
.pu-lista li{display:flex;gap:8px;align-items:flex-start;overflow-wrap:anywhere}
.pu-lista li::before{flex:0 0 auto;font-weight:700}
.pu-sim{border:1px solid #cfe3d5;background:#eaf3ec;border-radius:8px;padding:12px 14px}
.pu-sim li{color:#2f5c3a}
.pu-sim li::before{content:"✓"}
.pu-nao{border:1px solid #f0d3cf;background:#fdeceb;border-radius:8px;padding:12px 14px}
.pu-nao li{color:#7d2f20}
.pu-nao li::before{content:"✕"}
.pu-grupo-titulo{margin:0 0 8px;font-size:12px;font-weight:600}

/* ⚠️ ALTURA: `flex:1 1 0` sob um pai que só tem `max-height` nasce com ZERO
   pixels, o conteúdo fica no DOM, a asserção por texto passa e a tela aparece
   vazia. Aconteceu na t81 e na t83. A altura é declarada NESTA caixa. */
.pu-rolagem{max-height:min(460px,calc(100vh - 360px));min-height:140px;overflow-y:auto;
 overflow-x:auto;min-inline-size:0;contain:layout paint}
.pu-tabela{width:100%;border-collapse:collapse;font-size:13px;text-align:left}
.pu-tabela th{color:#949b92;font-size:10px;font-weight:500;padding:12px 10px;border-bottom:1px solid var(--line);
 white-space:nowrap;position:sticky;top:0;background:var(--surface);z-index:1}
.pu-tabela td{padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.pu-tabela tr:last-child td{border-bottom:0}
.pu-tabela .pu-titulo{font-weight:600;overflow-wrap:anywhere}
.pu-acoes-linha{white-space:nowrap}
.pu-acoes-linha .text-button{padding:4px 0;margin-right:10px}
.pu-vazio-bloco{color:var(--muted);font-size:13px;margin:0;padding:26px 0;text-align:center}
.pu-filtros{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin:0 0 12px;min-width:0}
.pu-filtros label{margin:0;flex:0 1 180px;min-width:0}
.pu-filtros .pu-busca{flex:1 1 260px}
.pu-filtros input,.pu-filtros select{margin-top:6px}

/* O painel lateral do Portal não foi construído nesta leva: as regras dele
   foram removidas em 21/09 porque nenhum JS aplicava a classe, ou seja, o
   CSS nunca renderizou e só enganaria quem fosse mexer depois. */

.pu-regras{margin:0;padding:0;list-style:none;display:grid;gap:10px;counter-reset:pu}
.pu-regras li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;font-size:12px;line-height:1.45}
.pu-regras li::before{counter-increment:pu;content:counter(pu);display:grid;place-items:center;
 width:22px;height:22px;border-radius:6px;background:var(--accent-soft);color:var(--accent-ink);font-weight:700;font-size:11px}
.pu-regras strong{display:block;font-size:12px}
.pu-regras span{color:var(--muted)}

/* O link revelado. ⚠️ `overflow-wrap` NÃO tem efeito em <input> de linha
   única: 64 hexadecimais rolam em vez de quebrar, e no celular o campo fica
   inútil. Por isso é um bloco de texto, não um input. */
.pu-link{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:12px 14px;
 font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.5;
 overflow-wrap:anywhere;word-break:break-all;margin:0}

@media (max-width:900px){
 .pu-cartoes{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pu-tipos{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
 .pu-contexto{flex-wrap:wrap}
 .pu-contexto-acoes{width:100%}
}
@media (max-width:600px){
 .pu-cartoes{gap:10px}
 .pu-cartao{padding:14px}
 .pu-cartao strong{font-size:24px}
 /* Ação de cartão é toque, não texto corrido: 16px de altura era alvo
    pequeno demais no celular. */
 .pu-cartao .text-button,.pu-cartao a{min-height:44px;display:inline-flex;align-items:center}
 .pu-abas{display:grid;grid-template-columns:1fr 1fr;gap:0;border-bottom:0}
 .pu-aba{border:1px solid var(--line);border-radius:8px;margin:0 0 8px}
 .pu-aba[aria-selected=true]{border-color:var(--accent);background:var(--accent-soft)}
 .pu-filtros{display:block}
 .pu-filtros label{margin-bottom:10px;flex:none}
 /* No celular a lista rola com a página: caixa rolável dentro de outra é o
    que faz o dedo prender. A tabela mantém a própria rolagem lateral, com
    `contain`, senão ela empurra a página inteira. */
 .pu-rolagem{max-height:none;overflow-y:visible}
 .pu-tabela{min-width:620px}
 .pu-tabela th{position:static}
 .pu-acoes-topo button,.pu-contexto-acoes button,.pu-painel-acoes button{flex:1 1 140px;min-height:44px}
}
/* Revisão do Codex (23/09): páginas da tabela e da lista de links. Alvo de
   toque de 44px, e quebra de linha no celular em vez de rolar de lado. */
.pu-paginacao{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:12px}
.pu-paginacao button{min-height:44px;min-width:44px}
.pu-paginacao span{font-size:13px;color:var(--muted)}
/* Achado 1 de 23/09: quais parcelas cada link e cada conta vê. `.pp-` é o
   bloco compartilhado por portal-link-ui.js e pelas contas vinculadas. */
.pp-detalhe{margin-top:12px;border-top:1px solid var(--line);padding-top:10px;min-width:0}
.pp-detalhe>summary{cursor:pointer;color:var(--accent);font-size:12px;font-weight:600;min-height:32px;display:flex;align-items:center}
.pp-detalhe>button{margin-top:10px}
.pp-parcelas{border:1px solid var(--line);border-radius:6px;padding:12px 14px;margin:12px 0 0;min-width:0}
.pp-parcelas legend{font-size:12px;color:var(--muted);padding:0 6px}
.pp-parcelas .warning{margin:0 0 10px}
.pp-modos{display:flex;flex-wrap:wrap;gap:4px 20px;margin-bottom:8px}
.pp-modos .checkbox{margin:4px 0}
.pp-lista{display:grid;gap:8px;margin:6px 0 10px}
.pp-item{align-items:flex-start;margin:0;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--paper)}
.pp-item input{margin-top:2px;flex:none}
.pp-item span{min-width:0;overflow-wrap:anywhere}
.pp-item strong{display:block;font-size:13px;color:var(--ink)}
.pp-item small{margin-top:2px}
.pp-item:has(input:disabled){opacity:.6}
.pu-instantaneo{display:block;font-weight:400;color:var(--muted);margin-top:4px}
.pu-instantaneo[data-tom=espera]{color:#9d7425}
@media (max-width:600px){
 .pp-modos{display:block}
 .pp-item{min-height:44px}
 .pp-detalhe>summary{min-height:44px}
 .pp-detalhe>button{width:100%;min-height:44px}
 .pu-acoes-linha .text-button{display:block;min-height:44px;margin:0}
}
/* Duas ações na linha do honorário: uma embaixo da outra, senão a segunda
   ("Atualizar publicação") sai cortada pela rolagem da tabela em 1440. */
.pu-acoes-linha .text-button{display:block;margin:0 0 4px;text-align:left}
.pu-tabela .pu-acoes-linha{white-space:normal;min-width:96px}