/* Layout e peças desta plataforma. Só tokens do kit (galeria-tokens.css); nenhum valor solto.
   As classes do kit (g-*) não são reescritas aqui: quem precisa complementar leva uma classe própria. */

body{margin:0;background:var(--surface-ground)}
/* o kit dá display a .g-loading e .g-status; o atributo hidden precisa vencer */
[hidden]{display:none !important}

/* ---------- moldura e etapas */
.tela{display:grid;grid-template-columns:var(--nav-w) minmax(0,1fr);min-height:calc(100vh - var(--bar-h))}
/* tabela larga: rola de lado só em tela estreita, onde o cabeçalho do kit deixa de ser fixo */
/* números e datas nas tabelas: alinhados com o cabeçalho (à esquerda), como o resto; o g-num do kit alinha à direita */
.celula-numero{white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:900px){.rolagem{overflow-x:auto}.rolagem th{position:static}}
.secoes{padding:var(--space-24) var(--space-16);box-shadow:inset -1px 0 0 var(--line-structure);display:flex;flex-direction:column;gap:var(--space-4)}
.secoes a{display:flex;align-items:center;min-height:var(--touch-min);padding:0 var(--space-16);border-radius:var(--radius-pill);color:var(--text-primary);text-decoration:none;transition:background var(--duration-fast)}
.secoes a:hover{background:var(--surface-hover)}
.secoes a[aria-current="page"]{background:var(--platform-highlight);color:var(--platform-on-highlight)}
.secoes a[aria-disabled="true"]{color:var(--disabled-text);pointer-events:none}
.secoes a:focus-visible{outline:none;box-shadow:0 0 0 2px var(--focus-ring-inner),0 0 0 4px var(--focus-ring-outer)}

.trabalho{padding:var(--space-32) var(--space-48);display:flex;flex-direction:column;gap:var(--space-32);min-width:0}
.etapa{display:flex;flex-direction:column;gap:var(--space-32)}
.etapa[hidden]{display:none}
.topo{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:var(--space-24)}
.topo p{margin:0}
.topo h1{margin:var(--space-4) 0}
.esmaecido{opacity:var(--step-inactive);pointer-events:none}

/* ---------- etapa 1 */
.formulario{display:flex;flex-direction:column;gap:var(--space-32);max-width:var(--measure-max)}
.campo-texto{resize:vertical;font:inherit}
/* resposta curta: começa com uma linha e cresce com o texto */
textarea.campo-curto{min-height:var(--touch-min);field-sizing:content;max-height:calc(var(--touch-min) * 5)}
.documentos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.documentos li{display:flex;justify-content:space-between;gap:var(--space-16);padding:var(--space-16) 0;box-shadow:inset 0 -1px 0 var(--line-structure)}
.acoes{display:flex;gap:var(--space-16);align-items:center}
/* escolha de arquivo: o input nativo fica só para o leitor de tela e o teclado; o rótulo vira o botão */
.arquivo{display:flex;align-items:center;gap:var(--space-16);flex-wrap:wrap}
.arquivo__botao{display:inline-flex;align-items:center;min-height:var(--touch-min);padding:0 var(--space-24);border-radius:var(--radius-pill);box-shadow:inset 0 0 0 1px var(--line-strong);cursor:pointer;transition:background var(--duration-fast)}
.arquivo__botao:hover{background:var(--surface-hover)}
.arquivo input:focus-visible + .arquivo__botao{box-shadow:0 0 0 2px var(--focus-ring-inner),0 0 0 4px var(--focus-ring-outer)}

/* ---------- etapa 2 */
.regras{display:flex;flex-direction:column;gap:var(--space-48)}
.numeros{display:grid;gap:var(--space-8);grid-template-columns:repeat(auto-fit,minmax(calc(var(--nav-w) - var(--space-96)),1fr))}
.numeros .g-card{display:flex;flex-direction:column;gap:var(--space-8)}
.bloco{display:flex;flex-direction:column;gap:var(--space-16)}
.bloco h2{margin:0}
.lista{margin:0;padding-left:var(--space-24);display:flex;flex-direction:column;gap:var(--space-8);max-width:var(--measure-max)}
.criterio__titulo{font-weight:500}
.criterio__desc{margin:var(--space-4) 0 0}
.citacao{margin:var(--space-4) 0 0;color:var(--text-support)}
.tabela-regras td{vertical-align:top;padding-top:var(--space-16);padding-bottom:var(--space-16)}

/* ---------- área com painel lateral (critérios e publicações): o painel empurra o conteúdo */
.area-lateral{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-24);align-items:start}
.area-lateral.com-painel{grid-template-columns:minmax(0,1fr) min(42vw,var(--measure-max))}

/* ---------- etapa 3: mural de publicações
/* cards de ~216px: quantos couberem na largura, inclusive com o painel aberto */
.mural{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--nav-w) - var(--space-64)),1fr));gap:var(--space-16);align-items:start}

.pub{display:flex;flex-direction:column;gap:var(--space-8);padding:var(--space-16);border:0;border-radius:var(--radius-s);background:var(--surface-hover);color:var(--text-primary);text-align:left;font:inherit;cursor:pointer;transition:background var(--duration-fast)}
.pub:hover{background:var(--surface-hover-deep)}
.pub:focus-visible{outline:none;box-shadow:0 0 0 2px var(--focus-ring-inner),0 0 0 4px var(--focus-ring-outer)}
.pub[aria-current="true"]{background:var(--platform-highlight);color:var(--platform-on-highlight)}
/* cabeçalho em grade, não em flex: o Safari 18 não encolhe o nome dentro de um botão em flex (mesmo com
   min-width:0) e os dias saíam do cartão; minmax(0,1fr) obriga o nome a caber, com reticências */
.pub{min-width:0}
.pub__topo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-8);align-items:baseline}
.pub__topo .g-support{white-space:nowrap}
.pub__autor{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pub__midia{position:relative;aspect-ratio:1/1;border-radius:var(--radius-s);overflow:hidden;background:var(--surface-raised)}
.pub__midia img{width:100%;height:100%;object-fit:cover;display:block}
.pub__play{position:absolute;inset:auto auto var(--space-8) var(--space-8);padding:var(--space-4) var(--space-8);border-radius:var(--radius-pill);background:var(--surface-float);color:var(--text-on-float)}
/* overflow-wrap: uma URL longa na legenda deixava a caixa mais larga que o cartão no Safari 18 */
.pub__texto{width:100%;aspect-ratio:1/1;box-sizing:border-box;padding:var(--space-16);border-radius:var(--radius-s);background:var(--surface-raised);display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.pub__pe{display:flex;justify-content:space-between;align-items:center;gap:var(--space-8);flex-wrap:wrap}

/* grau: três barras verticais em tinta (livro, camada 2; g-level só na 1.3.0) */
.grau{display:inline-flex;align-items:center;gap:var(--space-8)}
.grau__barras{display:inline-flex;align-items:flex-end;gap:var(--space-4)}
.grau__barras i{width:var(--space-4);height:calc(var(--space-8) + var(--space-4));box-shadow:inset 0 0 0 1px var(--line-control)}
.grau__barras i.cheia{background:var(--text-primary);box-shadow:none}

/* painel de detalhe: empurra o mural; superfície sólida para o texto de apoio continuar legível */
.painel{position:sticky;top:calc(var(--bar-h) + var(--space-16));max-height:calc(100vh - var(--bar-h) - var(--space-32));overflow:auto;background:var(--surface-raised);border-radius:var(--radius-l);box-shadow:var(--elevation-2);padding:var(--space-24);display:flex;flex-direction:column;gap:var(--space-24)}
.painel[hidden]{display:none}
.painel__topo{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-16)}
.painel__topo h2{margin:0}
.painel video,.painel img{width:100%;max-height:60vh;object-fit:contain;border-radius:var(--radius-s);background:var(--surface-hover);display:block}
.painel__imagens{display:flex;flex-direction:column;gap:var(--space-8)}
.painel a{color:var(--platform-text)}
.painel .g-ai{grid-template-columns:1fr}
.painel details summary{cursor:pointer;min-height:var(--touch-min);display:flex;align-items:center}
.triagem{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-8) var(--space-16);margin:0}
.triagem dt{color:var(--text-support)}
.triagem dd{margin:0}
.aponta{display:flex;flex-direction:column;gap:var(--space-8);padding:var(--space-16) 0;box-shadow:inset 0 -1px 0 var(--line-structure)}
.aponta p{margin:0}
.evidencias{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-8)}
.tempo{border:0;background:var(--surface-hover);color:var(--text-primary);border-radius:var(--radius-pill);padding:0 var(--space-8);min-height:var(--touch-min);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer}
.tempo:hover{background:var(--surface-hover-deep)}
.tempo:focus-visible{outline:none;box-shadow:0 0 0 2px var(--focus-ring-inner),0 0 0 4px var(--focus-ring-outer)}

/* ---------- ação principal com a frase de apoio (custo e tempo previstos) */
.acao-com-frase{display:flex;flex-direction:column;gap:var(--space-8);max-width:var(--measure-max)}
.acao-com-frase p{margin:0}
.acao-com-frase--fim{align-items:flex-end;text-align:right;max-width:calc(var(--nav-w) * 1.6)}
.acao-com-frase .acoes{flex-wrap:wrap;justify-content:flex-end}
.bloco__topo{display:flex;justify-content:space-between;align-items:center;gap:var(--space-16);flex-wrap:wrap}
/* desfazer e reabrir: ação dentro da frase, com cara de link */
.link{border:0;background:none;padding:0;font:inherit;color:var(--platform-text);text-decoration:underline;cursor:pointer}
.link:focus-visible{outline:none;box-shadow:0 0 0 2px var(--focus-ring-inner),0 0 0 4px var(--focus-ring-outer)}

/* ---------- etapa 2: perguntas, proposta do modelo e critérios */
.perguntas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-24);max-width:var(--measure-max)}
.pergunta{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-8)}
.pergunta p{margin:0}
.pergunta .g-field{align-self:stretch}
.pergunta--recolhida{flex-direction:row;align-items:baseline;flex-wrap:wrap}
.pedido{max-width:var(--measure-max)}

.proposta{display:flex;flex-direction:column;gap:var(--space-16)}
.proposta h2,.proposta p{margin:0}
.mudancas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mudanca{display:flex;flex-direction:column;gap:var(--space-8);padding:var(--space-16) 0;box-shadow:inset 0 -1px 0 var(--line-structure)}
.mudanca p{margin:0}
.mudanca__escolha{display:flex;align-items:center;gap:var(--space-8);min-height:var(--touch-min);cursor:pointer}
.diff{display:flex;flex-direction:column;gap:var(--space-4)}
.diff__antes{color:var(--text-support)}
.diff__antes .lista{text-decoration:line-through}
.diff__depois{align-self:flex-start;background:var(--platform-highlight);color:var(--platform-on-highlight);border-radius:var(--radius-s);padding:var(--space-4) var(--space-8)}
.diff__depois .lista{padding-left:var(--space-16)}

.linha-criterio{cursor:pointer;transition:background var(--duration-fast)}
.linha-criterio:hover{background:var(--surface-hover)}
.linha-criterio[aria-current="true"]{background:var(--platform-highlight);color:var(--platform-on-highlight)}
.linha-criterio:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--focus-ring-outer)}
.linha-desligada .criterio__titulo,.linha-desligada .criterio__desc{color:var(--disabled-text)}
.linha-recolhida td{padding-top:var(--space-8);padding-bottom:var(--space-8)}
.marcas{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4)}

.formulario-painel{display:flex;flex-direction:column;gap:var(--space-24)}
.grupo{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-16)}
.checks{display:flex;flex-wrap:wrap;gap:0 var(--space-24)}
.check{display:inline-flex;align-items:center;gap:var(--space-8);min-height:var(--touch-min);cursor:pointer}

/* ---------- etapa 3: voto do CONAR */
.voto{display:flex;flex-direction:column;gap:var(--space-8)}
.voto p{margin:0}
.voto__botoes{display:flex;gap:var(--space-8);flex-wrap:wrap}
.voto__btn{display:inline-flex;align-items:center;gap:var(--space-8)}
.voto__icone{width:var(--space-16);height:var(--space-16);fill:currentColor}
.voto__btn--nao .voto__icone{transform:rotate(180deg)}
.revisao{padding-top:var(--space-16);box-shadow:inset 0 1px 0 var(--line-structure)}
.revisao h3{margin:0}

/* ---------- diálogos (nível 3, sobre o véu) */
.dialogo{border:0;padding:0;border-radius:var(--radius-l);background:var(--surface-raised);color:var(--text-primary);box-shadow:var(--elevation-3);width:min(100% - var(--space-32),var(--measure-max))}
.dialogo::backdrop{background:var(--surface-scrim)}
.dialogo__corpo{display:flex;flex-direction:column;gap:var(--space-24);padding:var(--space-32)}
.dialogo__corpo h2,.dialogo__corpo p{margin:0}

@media (max-width:900px){.tela{grid-template-columns:1fr}.secoes{display:none}.trabalho{padding:var(--space-24) var(--space-16)}.area-lateral.com-painel{grid-template-columns:1fr}.topo{grid-template-columns:1fr}.acao-com-frase--fim{align-items:flex-start;text-align:left;max-width:none}.acao-com-frase .acoes{justify-content:flex-start}}

/* ---------- marca no cabeçalho: o logo do CONAR (como nas outras ferramentas da família) e o Monitor com o olho.
   O logo escuro (texto claro) entra no tema escuro, pelo sistema ou por data-theme, como o kit faz com os tokens. */
.g-frame .conar-lockup{height:var(--space-24)}
.marca-monitor{display:inline-flex;align-items:center;gap:var(--space-8)}
.marca-monitor svg{width:var(--space-24);height:var(--space-24);flex:none}
:root[data-theme="dark"] .conar-lockup--light{display:none}
:root[data-theme="dark"] .conar-lockup--dark{display:block}
:root[data-theme="light"] .conar-lockup--light{display:block}
:root[data-theme="light"] .conar-lockup--dark{display:none}