/* Vertex — CSS da página dashboard (spec 162, fase 4 · T038–T040b).
   Classes que substituem os style="…" de cor/fundo/borda/sombra/fonte do markup.
   Regra: zero hex, zero rgb()/rgba(), zero definição de custom property — só var(--token).
   Candidatas a subir para vertex-ui.css: as utilitárias de texto/fundo/caixa (genéricas). */

/* texto/fundo/caixa/divisa por papel: subiram para vertex-ui.css (spec 335). */

/* interruptor (toggle) — a alça; o trilho tem a cor trocada pelo JS */
.chave-botao { background:var(--card); box-shadow:var(--sombra-alca); }

/* ══ spec 335 — markup estático do dashboard (antes: style="…" no HTML) ══════════════════════
   Utilitárias de escala e componentes vêm de vertex-ui.css; aqui só o que é próprio da página
   (blocos com nome) e reforços de especificidade quando um componente antigo (.form-grid label,
   .sh-table td, .pj-table th) venceria a utilitária de 1 classe. Só var(--token). */

/* Utilitárias que faltam na escala de vertex-ui.css (candidatas a subir) */
.px-8{padding-left:8px;padding-right:8px}
.px-10{padding-left:10px;padding-right:10px}
.pt-12{padding-top:12px}.pt-14{padding-top:14px}.pt-16{padding-top:16px}.pt-20{padding-top:20px}
.pre-quebra{white-space:pre-wrap}
.rolagem-x{overflow-x:auto}
.campo.larg-90{width:90px}.campo.larg-100{width:100px}.campo.larg-110{width:110px}.campo.larg-120{width:120px}

/* Reforços de especificidade sobre componentes antigos */
.pj-table th.ta-c{text-align:center}
.pj-table th.ta-d{text-align:right}
.form-grid label.fs-12{font-size:12px}
/* checkbox dentro da grade: .form-grid label empilharia (coluna, 14px) */
.form-grid label.checkbox{display:inline-flex;flex-direction:row;align-items:center;gap:8px;font-weight:400}

/* Casca e páginas */
.app-casca{display:flex;min-height:100vh}
.pagina-dash{padding:28px 32px}

/* Login: família .acesso em vertex-ui.css (spec 363) */

/* Acompanhamento */
.acomp-abas{display:inline-flex;flex-shrink:0;gap:2px;padding:3px;border-radius:8px}
.acomp-busca{position:relative;flex:1;max-width:320px}
.acomp-busca-icone{position:absolute;left:10px;top:50%;transform:translateY(-50%);pointer-events:none}
.acomp-busca .sh-input{padding-left:32px}
.acomp-filtro{width:auto;min-width:160px}
.acomp-filtro-largo{min-width:180px}
.acomp-pendentes{padding:20px;border:1px solid var(--info-borda);border-radius:var(--raio-lg);background:var(--card);box-shadow:var(--sombra-xs)}
.acomp-pendentes-total{font-size:32px;font-weight:700}
.acomp-tabela-cartao{overflow:hidden}
.acomp-col-32{width:32px}
.acomp-col-48{width:48px}
.sh-table td.acomp-celula-aviso{padding:40px;text-align:center;font-size:13px;color:var(--tinta-3)}

/* Lista de projetos / Origem & Satisfação */
.lista-vazia{padding:48px;text-align:center}
.os-periodo .btn{height:38px}
.os-outros{margin:0;padding-left:18px;font-size:13px;line-height:1.7}

/* Detalhe do projeto — cabeçalho das seções */
.detalhe-carregando{margin-top:60px}
.secao-cabeca{display:flex;align-items:center;gap:10px}
/* spec 350: seção recolhível — recolhida mostra só o cabeçalho (o !important vence os display inline que o JS põe nos blocos) */
/* spec 351: o clique é na faixa inteira do cabeçalho; a seta só indica o estado */
.secao-cabeca[data-recolher]{cursor:pointer;user-select:none;border-radius:var(--raio-md)}
.secao-cabeca[data-recolher]:focus-visible{outline:none;box-shadow:var(--foco)}
.secao-seta{flex-shrink:0;color:var(--tinta-3);transition:transform .18s,color .15s}
.secao-cabeca[data-recolher]:hover .secao-seta{color:var(--tinta)}
.detalhe-secao.recolhida .secao-seta{transform:rotate(-90deg)}
.detalhe-secao.recolhida > :not(.secao-cabeca){display:none !important}
.detalhe-secao.recolhida > .secao-cabeca{margin-bottom:0}

/* Geral — Operações do projeto (rótulo 12px sobre o campo de tabela) */
.gd-rotulo-area{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:12px;color:var(--tinta-corpo)}
/* Geral — campos em linha (projeção, piscina, pergolado, calçada): o JS mostra com display:'' */
.gd-campo-linha{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--tinta-corpo)}
.gd-aviso-terrea{color:var(--alerta-borda)}
.gd-btn-mini{align-self:flex-start;margin-top:4px;padding:2px 8px;border:1px solid var(--borda);border-radius:var(--raio-sm);background:var(--tela);color:var(--tinta-corpo);font-size:11px;cursor:pointer}
.fin-rotulo{text-transform:uppercase}

/* Documentos */
.docs-grade{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.docs-coluna{display:flex;flex-direction:column;gap:6px}
.docs-coluna > .upload-zone{flex:1}
/* spec 350/351: card com arquivo no tom claro da cor de destaque da paleta (--sinal-*), no lugar do
   verde antigo do .upload-zone.done (no V3 verde é estado, não "arquivo enviado") */
#detalhe-conteudo .upload-zone.done{border:1px solid var(--sinal-borda);background:var(--sinal-tint)}
#detalhe-conteudo .upload-zone.done > .ic{color:var(--sinal-texto)}
#detalhe-conteudo .upload-zone.done:hover{border-color:var(--sinal)}
/* spec 350: documentos de apoio — .chip-arquivo em grade, nome inteiro em até 3 linhas */
.apoio-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.apoio-cartao{align-items:flex-start}
.apoio-cartao > .ic{margin-top:1px}
.apoio-nome{flex:1;padding:0;border:0;text-align:left;white-space:normal;overflow-wrap:anywhere;cursor:pointer;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.apoio-nome:hover{text-decoration:underline;text-underline-offset:2px}
.docs-nota{padding:0 2px;font-size:10px}
.docs-nota-bombeiros{grid-column:span 3;padding:10px;font-size:11px;line-height:1.4}
.rastreios{margin-top:16px;border:1px solid var(--borda);border-radius:8px;overflow:hidden}
.rastreios-resumo{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--superficie-2);color:var(--tinta-corpo);font-size:13px;list-style:none;cursor:pointer;user-select:none}

/* Análise */
.analise-vazio{align-items:center;gap:10px;padding:16px;border:1px dashed var(--borda);border-radius:var(--raio-sm);background:var(--superficie-2)}
.analise-lista{display:flex;flex-direction:column;gap:5px}

/* Protocolo */
.form-grid.proto-grade{margin-bottom:18px}
.form-grid.proto-grade-2{grid-template-columns:1fr 1fr}
.form-grid.proto-grade-3{grid-template-columns:repeat(3,1fr)}
/* área construída: só leitura, derivada do painel Geral */
.form-grid input.campo-calculado[readonly],
.form-grid input.campo-calculado[readonly]:focus{background:var(--superficie-2);color:var(--tinta-2);cursor:not-allowed}
.separador-forte{margin:20px 0;border:none;border-top:2px solid var(--borda)}

/* Trâmites */
.tramite-chips{flex-wrap:wrap;gap:6px;padding:8px 14px 0}
.tramite-doc-picker{position:fixed;z-index:200;min-width:280px;max-width:380px;max-height:300px;overflow:auto;border:1px solid var(--borda);border-radius:10px;background:var(--card);box-shadow:var(--sombra-modal)}

/* Zona destrutiva + modal de exclusão */
.zona-destrutiva{margin-top:32px;padding-top:20px;border-top:1px solid var(--erro-borda)}
.modal-excluir-fundo{position:fixed;inset:0;z-index:300;align-items:center;justify-content:center;background:var(--overlay)}
.modal-excluir-caixa{width:90%;max-width:440px;padding:24px;border-radius:8px}
.modal-excluir-ref{margin-bottom:12px;padding:8px 12px;border-radius:4px;font-size:13px}
.modal-excluir-campo{display:block;width:100%;margin-bottom:16px;padding:8px 10px;border:1px solid var(--input-borda);border-radius:var(--raio-sm);font-size:13px}

/* spec 342 — selos do detalhe (protocolo manual, projetista divergente do CAD) */
.det342-selos{gap:8px;flex-wrap:wrap;margin-top:6px}
.det342-selos[hidden],.det342-selos [hidden]{display:none !important}

/* spec 389: lista de projetos em seções recolhíveis (linhas de cabeçalho no mesmo tbody) + Arquivo */
.pj-table tr.pj-secao-cabeca td{padding:10px 12px;background:var(--superficie-2);border-top:1px solid var(--borda-2);cursor:pointer;user-select:none}
.pj-table tr.pj-secao-cabeca:focus-visible{outline:none;box-shadow:var(--foco)}
.pj-table tr.pj-secao-cabeca .pj-secao-faixa{display:flex;align-items:center;gap:8px}
.pj-table tr.pj-secao-cabeca .secao-seta{color:var(--tinta-3)}
.pj-table tr.pj-secao-cabeca[aria-expanded="false"] .secao-seta{transform:rotate(-90deg)}
.pj-table tr.pj-secao-cabeca:hover .secao-seta{color:var(--tinta)}
.pj-secao-titulo{font-weight:600;color:var(--tinta)}
.pj-secao-contagem{font-family:var(--fonte-mono);font-size:12px;color:var(--tinta-2)}
.pj-secao-dica{margin-left:auto;font-size:12px;color:var(--tinta-3)}
.pj-table tr.pj-secao-notificados td{background:var(--sinal-tint);box-shadow:var(--trilho-sinal)}
.pj-table tr.pj-secao-vazia td{padding:10px 12px;color:var(--tinta-3);font-size:13px}
.pj-table tr.pj-secao-arquivo td{padding:8px 12px;font-size:13px}
.pj-table tr.pj-secao-arquivo a{color:var(--sinal-texto);font-weight:500;text-decoration:underline;text-underline-offset:2px}
.pj-acao-finalizado{background:var(--ok-tint);color:var(--ok-texto)}   /* spec 398: igual ao Finalizado do Painel Geral */
.pj-table .pj-mover-lista{margin-left:8px}
.pj-voltar-lista{margin-left:auto;margin-right:16px;font-size:13px;color:var(--tinta-2);text-decoration:none}
.pj-voltar-lista:hover{color:var(--tinta)}

/* spec 378 — aba Produção do detalhe (static/producao-detalhe.js). Só tokens. */
.prod-topo{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:10px}
.prod-etapas{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 10px;padding:0;list-style:none}
.prod-etapa{padding:4px 10px;border:1px solid var(--borda);border-radius:var(--raio-full);font-size:11.5px;color:var(--tinta-3);background:var(--card)}
.prod-etapa-feito{background:var(--ok-tint);border-color:var(--ok-borda);color:var(--ok)}
.prod-etapa-atual{background:var(--nav-ativo-bg);border-color:var(--nav-ativo-bg);color:var(--nav-ativo-texto);font-weight:600}
.prod-prazo{margin:6px 0 10px}
.prod-acoes,.prod-subir{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0}
.prod-situacao{width:auto;min-width:160px}
.prod-subtitulo{margin:16px 0 6px;font-size:13px;font-weight:600;color:var(--tinta)}
.prod-revisoes{margin:0;padding-left:18px;color:var(--tinta-2);font-size:12px}

/* spec 379 (US4): briefing (static/briefing-form.js) — orçamento, aba Produção e proposta */
.bf-secao{border:1px solid var(--borda);border-radius:var(--raio-md);padding:6px 10px;margin-bottom:8px;background:var(--card)}
.bf-secao>summary{cursor:pointer;font-weight:600;padding:4px 0}
.bf-lista{display:grid;gap:4px;margin:6px 0 0}
.bf-linha{display:grid;grid-template-columns:minmax(140px,1fr) 2fr;gap:4px 12px;align-items:center}
.bf-linha dt{color:var(--tinta-3)}
.bf-linha dd{margin:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.bf-conf{width:auto}
.bf-nota{flex:1 1 200px}
@media (max-width:640px){.bf-linha{grid-template-columns:1fr}}