/* Central: artefato (fix/central-ui-bento, 2026-11-02). Carregado depois de styles.css: as regras daqui sobrepõem as de lá. */

/* ===== o artefato aberto (bento): barra de ações compacta, popovers e grade =====
   Antes, o painel Exportar e publicar ocupava o topo e empurrava o documento. Agora a
   barra tem Ler | PDF, Copiar, Baixar e Compartilhar (botões pequenos com menus), o
   documento vem primeiro num cartão, e a coluna da direita tem cartões pequenos
   (Sobre, Versões, Quem vê, Links públicos). Desktop: 2 colunas (documento e 300px).
   Abaixo de 1100px: uma coluna, e os cartões viram grade de 2 (sem sticky). Abaixo de
   640px: 1 coluna, e os popovers viram folha de baixo. Nenhum scroll horizontal em 390px. */

/* a barra: "← Artefatos" à esquerda; as ações à direita, quebrando linha sem rolagem */
.art-barra{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-bottom:18px;min-width:0}
.art-barra > .btn.q{padding-left:0}
.art-acoes{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;margin-left:auto;min-width:0;max-width:100%}
.art-acoes .art-modo{margin:0}
.art-acoes .seg{padding:3px;gap:2px}
.art-acoes .seg button{height:28px;min-height:0;padding:0 12px;font-size:13px}
.art-acoes .btn{height:36px;min-height:36px;padding:0 14px;font-size:13.5px;gap:6px}
.art-acoes .btn svg{flex:none}
/* o botão do popover aberto fica marcado (aria-expanded): o cue de qual menu está na tela */
.art-acoes .btn.g[aria-expanded="true"]{background:var(--verde-ativo);border-color:var(--verde-escuro);color:var(--destaque)}
.art-acoes .btn[aria-expanded="true"]:not(.g){filter:brightness(.92)}
.art-acao-w{position:relative}
.art-demora{margin:-6px 0 14px;font-size:13px}

/* o cabeçalho: eyebrow, título e meta; "Quem vê" saiu para o cartão da direita */
.cabeca-artefato{margin:0 0 20px;padding:0}

/* a grade: documento à esquerda, cartões à direita */
.art-bento{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.art-bento > *{min-width:0}
.art-doc{background:var(--cartao);border:1px solid var(--borda);border-radius:20px;padding:28px 32px}
/* dentro do cartão do documento, o texto e o PDF não ganham outra moldura (nada de cartão em cartão) */
.art-doc .art-texto{background:none;border:0;border-radius:0;padding:0;max-width:none}
.art-doc .pdf-caixa{margin-top:0}
.art-doc .pdf-visor{border:0;border-radius:var(--raio-controle)}
.art-doc .panel{background:none;border:0;padding:0}
/* a barra do visualizador de PDF (pdfviewer.js) dentro do documento: botões do início, sem a faixa escura */
.art-doc .pdf-barra{justify-content:flex-start;gap:8px 14px;padding:0 0 12px;margin:0 0 12px;background:none;border:0;border-bottom:1px solid var(--borda)}
/* enquanto o PDF carrega, o contador de página está vazio: sem a largura mínima, os botões não espalham (o zoom já mostra 100%) */
.art-doc .pdf-pag:empty{min-width:0}
.art-lado{position:sticky;top:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.art-cartao{background:var(--cartao);border:1px solid var(--borda);border-radius:var(--raio-cartao);padding:14px 16px;min-width:0}
.art-cartao-tit{margin:0 0 10px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--apagado)}
.art-cartao-txt{margin:0;font-size:14px;line-height:1.5;color:var(--texto-2);overflow-wrap:anywhere}
/* o título do cartão e, à direita dele, o botão pequeno (Mudar, Criar link, Gerenciar): 32px de altura */
.art-cartao-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;margin-bottom:10px}
.art-cartao-cab .art-cartao-tit{margin:0;min-width:0}
.art-cartao .art-cartao-btn{height:32px;min-height:32px;padding:0 12px;font-size:13px;flex:none}
.art-cartao .chips{gap:6px}
.art-cartao .chip{padding:4px 12px;font-size:13px}
.art-dot{display:flex;align-items:center;gap:10px;margin-bottom:10px;min-width:0}
.art-dot b{font-size:15px;overflow-wrap:anywhere}
.art-fatos{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13.5px;color:var(--texto-2)}
.art-fatos li{display:flex;justify-content:space-between;gap:12px;min-width:0}
.art-fatos li span{color:var(--apagado);flex:none}
.art-fatos li{overflow-wrap:anywhere;text-align:right}

/* os popovers: ancorados no botão (.art-acao-w), com a mesma pele do menu do DOT */
.art-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:50;background:var(--realce);border:1px solid var(--borda-campo);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.55);padding:6px;animation:art-pop-entra 140ms ease-out both}
@keyframes art-pop-entra{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.art-pop-menu{min-width:260px}
.art-pop-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:10px 12px;border:0;border-radius:10px;background:none;color:var(--texto);font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.art-pop-item:hover{background:var(--hover)}
.art-pop-item b{font-size:14px;font-weight:600;color:inherit}
.art-pop-item small{font-size:12.5px;line-height:1.35;color:var(--apagado)}
.art-pop-item:focus-visible,.art-pop-x:focus-visible,.art-pop-compartilhar:focus-visible{outline:2px solid var(--destaque);outline-offset:2px}

/* o diálogo Compartilhar: 400px, com rolagem própria se a altura não couber */
.art-pop-compartilhar{width:400px;max-width:calc(100vw - 32px);max-height:70vh;overflow:auto;padding:16px}
.art-pop-compartilhar:focus{outline:none}
.art-pop-cab{display:flex;align-items:center;justify-content:space-between;gap:12px}
.art-pop-tit{margin:0;font-size:16px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--texto)}
/* o × do Compartilhar: área de 32px, ícone SVG (o padding zerado vence o do .btn.q) */
.art-pop-cab .art-pop-x{width:32px;height:32px;min-width:32px;min-height:32px;padding:0;justify-content:center;color:var(--apagado);border-radius:999px}
.art-pop-cab .art-pop-x:hover{color:var(--texto);background:var(--hover)}
.art-pop-corpo .art-sub{margin:14px 0 6px}
.art-pop-corpo .art-ajuda{margin:0 0 8px;font-size:12.5px;line-height:1.4}
.art-pop-corpo .art-niveis{grid-template-columns:minmax(0,1fr);gap:4px;grid-auto-rows:auto;margin-top:6px}
/* os níveis: uma lista compacta de opções; o radio fica visível à esquerda */
.nivel-visibilidade{display:grid;grid-template-columns:16px minmax(0,1fr);column-gap:10px;row-gap:2px;align-items:start;min-height:0;padding:9px 12px;border-radius:var(--raio-controle);border:1px solid transparent;background:none;color:var(--texto-corpo);text-align:left;cursor:pointer}
.nivel-visibilidade input{position:static;width:16px;height:16px;margin:3px 0 0;padding:0;border:0;clip:auto;overflow:visible;accent-color:var(--destaque);grid-column:1;grid-row:1 / span 2}
.nivel-visibilidade b{grid-column:2;grid-row:1;font-size:14px;font-weight:600;color:inherit;overflow-wrap:anywhere}
.nivel-visibilidade small{grid-column:2;grid-row:2;font-size:12.5px;line-height:1.35;color:var(--apagado);white-space:normal}
.nivel-visibilidade:hover{background:var(--hover)}
.nivel-visibilidade:has(input:checked){background:var(--verde-ativo);border-color:var(--verde-escuro);color:var(--destaque)}
.nivel-visibilidade:has(input:checked) small{color:#b6d9c8}
.nivel-visibilidade:has(input:disabled){opacity:.5;cursor:not-allowed}
.nivel-visibilidade:has(input:focus-visible){outline:2px solid var(--destaque);outline-offset:2px}
.art-pop-corpo .chip{min-height:36px;max-width:100%;overflow-wrap:anywhere;white-space:normal;text-align:left}
.art-pop-corpo .chip small{font-size:12px;color:var(--apagado)}
.art-divisor{height:1px;background:var(--borda);margin:14px 0}
/* os menus Copiar e Baixar: o cabeçalho ("Copiar como" e o ×) só existe para a folha de baixo do celular */
.art-pop-menu .art-pop-cab{display:none}
/* Validade: o rótulo fica à esquerda do seletor de dias, sem a margem de subtítulo */
.art-criar .art-validade{margin:0;flex:none}
.art-criar .seg{flex:none}

/* dentro do documento: o PDF (enquanto abre, na proporção da página, e a barra sem o duplicado) e o marca-texto */
/* enquanto o PDF abre, uma folha em esqueleto (pdfviewer.js: .pdf-esq), na proporção de uma página e com o brilho do esqueleto */
.art-doc .pdf-paginas:has(> .pdf-esq){background:var(--fundo);align-content:start}
.art-doc .pdf-esq{width:min(100%,520px);max-width:100%;aspect-ratio:1/1.414;box-sizing:border-box;padding:28px 32px;margin:0 auto}
/* a barra do PDF quebra por grupo, da esquerda, sem espalhar o zoom no celular */
.art-doc .pdf-grupo{width:auto;justify-content:flex-start}
/* o zoom é um segmento só, [−][100%][+], com a altura dos botões; "Ajustar à largura" fica de fora (o grupo é o mesmo, no DOM) */
.art-doc .pdf-grupo:has(> .pdf-zoom){gap:0}
.art-doc .pdf-grupo:has(> .pdf-zoom) > .pdf-btn[data-pdf="menos"]{border-radius:999px 0 0 999px;border-right-width:0}
.art-doc .pdf-grupo:has(> .pdf-zoom) > .pdf-zoom{display:inline-flex;align-items:center;min-height:38px;padding:0 10px;background:var(--verde-ativo);border:1px solid var(--borda-verde);border-left-width:0;border-right-width:0;color:var(--texto-corpo)}
.art-doc .pdf-grupo:has(> .pdf-zoom) > .pdf-btn[data-pdf="mais"]{border-radius:0 999px 999px 0;border-left-width:0}
.art-doc .pdf-grupo:has(> .pdf-zoom) > .pdf-btn[data-pdf="largura"]{margin-left:8px}
/* "Baixar PDF" repete o Baixar do cabeçalho: sai da barra (o botão segue no DOM, só escondido) */
.art-doc .pdf-btn[data-pdf="baixar"]{display:none}
/* a tela cheia: o ícone com o rótulo ao lado (no celular só o ícone; o aria-label dá o nome) */
.art-doc .pdf-btn[data-pdf="tela"]{display:inline-flex;align-items:center;gap:6px}
/* o erro do PDF (pdfviewer.js): não abriu aqui, com "Baixar o PDF" e "Tentar de novo". Sem moldura própria: já está no cartão do documento */
.art-doc .pdf-erro{display:grid;gap:8px;justify-items:start;min-width:0;padding:28px 20px}
.art-doc .pdf-erro-tit{margin:0;font-size:16px;font-weight:600;color:var(--texto)}
.art-doc .pdf-erro-txt{margin:0;font-size:14px;line-height:1.5;color:var(--texto-2);overflow-wrap:anywhere}
.art-doc .pdf-erro-acoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
/* o destaque do texto: um marca-texto só, na metade de baixo da letra, sem sublinhado */
.art-texto .md-doc mark{background:linear-gradient(rgba(255,171,0,.42),rgba(255,171,0,.42)) 0 75%/100% 45% no-repeat;text-decoration:none;color:#fff4d6;padding:0 3px;border-radius:4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* o Compartilhar é o mesmo popover, e no celular sobe como folha de baixo */
/* abaixo de 1100px a lateral vira alvenaria de 2 colunas (cartões de altura variável, sem buraco embaixo): Sobre numa coluna, Quem vê e Links na outra */
@media (max-width:1099px){
  .art-bento{grid-template-columns:minmax(0,1fr)}
  .art-lado{position:static;display:block;columns:2 260px;column-gap:12px}
  .art-lado > *{break-inside:avoid;margin:0 0 12px}
}
@media (max-width:639px){
  .art-doc{padding:18px 16px}
  .art-lado{columns:auto}
  /* a barra vira grade: "← Artefatos" e Ler | Ver como PDF na 1ª linha; Copiar, Baixar e Compartilhar
     (o primário, mais largo) na 2ª. Os gatilhos ficam com 40px. display:contents deixa os filhos da barra */
  .art-barra{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.6fr);gap:8px;align-items:center;margin-bottom:16px}
  .art-barra > .btn.q{grid-column:1;grid-row:1;justify-self:start}
  .art-acoes{display:contents}
  .art-acoes .art-modo{grid-column:2 / span 2;grid-row:1;justify-self:end}
  .art-acao-w{min-width:0}
  .art-acao-w > .btn{width:100%;height:40px;min-height:40px;padding:0 10px;font-size:13px;justify-content:center}
  .art-pop-menu .art-pop-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 4px 10px}
  .art-pop-cab .art-pop-x{width:40px;height:40px;min-width:40px;min-height:40px}
  /* o link público: validade em cima, o seletor e o botão de criar com a largura toda */
  .art-criar{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:8px 0 0}
  .art-criar .seg{display:flex;width:100%}
  .art-criar .seg button{flex:1 1 0;justify-content:center}
  .art-criar > .btn{width:100%;min-height:44px}
  .art-doc .pdf-visor .pdf-btn{min-height:40px}
  .art-doc .pdf-grupo:has(> .pdf-zoom) > .pdf-zoom{min-height:40px}
  /* a barra do PDF no celular: navegação e tela cheia na 1ª linha, o zoom e o "Ajustar" na 2ª (não três linhas soltas).
     As duas linhas começam da mesma margem: a navegação, o zoom e o "Ajustar" andam da esquerda (sem space-between) */
  .art-doc .pdf-barra{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}
  .art-doc .pdf-grupo:has(> .pdf-pag){grid-column:1;grid-row:1;justify-content:flex-start;gap:8px;flex-wrap:nowrap}
  .art-doc .pdf-grupo:has(> [data-pdf="tela"]){grid-column:2;grid-row:1;flex-wrap:nowrap}
  .art-doc .pdf-grupo:has(> .pdf-zoom){grid-column:1 / -1;grid-row:2;flex-wrap:nowrap}
  .art-doc .pdf-visor .pdf-btn{padding-left:11px;padding-right:11px}
  .art-doc .pdf-btn[data-pdf="tela"]{width:40px;min-width:40px;padding:0;justify-content:center}
  .art-doc .pdf-grupo:has(> .pdf-zoom) > .pdf-btn{min-width:40px}
  .art-doc .pdf-btn[data-pdf="tela"] .pdf-btn-txt{display:none}
  /* a folha sobe com véu: a sombra de 100vmax escurece o resto da tela (Copiar, Baixar, Compartilhar), o mesmo 55% do gaveta */
  .art-pop{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;min-width:0;max-height:80vh;overflow:auto;border-radius:20px 20px 0 0;animation-name:art-pop-sobe;box-shadow:0 0 0 100vmax rgb(0 0 0 / .55)}
  .art-pop-menu{min-width:0;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .art-pop-compartilhar{width:100%;max-width:none;max-height:80vh;padding:16px 16px calc(24px + env(safe-area-inset-bottom))}
  /* alvos de toque de pelo menos 40px: Ler/Ver como PDF, chips de versão, níveis, seg de dias */
  .seg.art-modo button,.art-pop .seg button{height:40px;min-height:40px}
  .art-cartao .chip{min-height:40px}
  .art-pop-corpo .nivel-visibilidade{min-height:44px}
}
@keyframes art-pop-sobe{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .art-pop{animation:none}
}