/* t70 — Projetos e entregas: painel lateral de operação e ajustes do quadro.
   O quadro em si (colunas, cartões, arraste, altura medida) mora em
   overview.css desde a t63, e não foi movido: mudar de folha só para arrumar
   a casa quebraria a cascata em telas que dividem essas classes.

   ⚠️ Tokens desta folha: --ink, --muted, --line, --paper, --surface, --accent,
   --accent-soft, --accent-ink, --green. Nome fora dessa lista não existe e o
   navegador resolve `var()` sem alternativa para `currentColor`, que pinta
   borda preta sem ninguém pedir. */

/* ---------- painel lateral ---------- */
.painel-projeto{inline-size:min(96vw,620px);padding:0;gap:0;display:flex;flex-direction:column}
.painel-projeto .painel-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
 padding:18px 20px 12px;border-bottom:1px solid var(--line);block-size:auto;flex:0 0 auto}
.painel-projeto .painel-identidade{min-inline-size:0}
.painel-projeto .painel-marcas{display:flex;flex-wrap:wrap;gap:6px;margin-block-end:6px}
.painel-projeto .painel-identidade h2{font-size:20px;line-height:1.25;margin:0}
.painel-projeto .painel-identidade p{margin:4px 0 0;font-size:12px}
.painel-projeto .marca.situacao-etapa{background:var(--accent-soft);color:var(--accent-ink);border-color:transparent}

.painel-projeto .painel-abas{display:flex;gap:4px;padding:0 20px;border-bottom:1px solid var(--line);flex:0 0 auto}
.painel-projeto .painel-abas button{appearance:none;background:none;border:0;border-bottom:2px solid transparent;
 padding:10px 12px;font:inherit;font-size:13px;color:var(--muted);cursor:pointer}
.painel-projeto .painel-abas button.ativa{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}
.painel-projeto .painel-abas button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* O corpo rola; topo, abas e rodapé ficam alcançáveis o tempo todo. */
.painel-projeto .painel-corpo{flex:1 1 0;min-block-size:0;overflow-y:auto;padding:16px 20px;
 display:flex;flex-direction:column;gap:14px}
.painel-projeto .painel-rodape{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
 padding:12px 20px;border-top:1px solid var(--line);background:var(--surface)}

.painel-bloco{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface)}
.painel-bloco h3{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.painel-bloco p{margin:6px 0 0}
.painel-bloco .small{font-size:11px;line-height:1.35}
/* Subtarefas e conferência lado a lado quando cabe, empilhadas quando não. */
.painel-par{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.painel-dados{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:0}
.painel-dados dt{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.painel-dados dd{margin:2px 0 0;font-size:14px}

.etapas-faixa{display:flex;gap:8px;overflow-x:auto;padding-block-end:4px;scroll-snap-type:x proximity}
.etapa-card{flex:0 0 auto;max-inline-size:190px;text-align:start;border:1px solid var(--line);border-radius:10px;
 background:var(--paper);padding:8px 10px;cursor:pointer;font:inherit;display:flex;flex-direction:column;gap:2px;scroll-snap-align:start}
.etapa-card small{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.etapa-card strong{font-size:13px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.etapa-card.selecionada{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.etapa-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.subtarefas-lista{display:flex;flex-direction:column;gap:10px}
.subtarefa{display:flex;flex-direction:column;gap:3px}
.subtarefa-marcas{display:flex;flex-wrap:wrap;gap:4px}
.subtarefa small{font-size:11px}
.criterios li{display:flex;gap:6px;font-size:13px;padding-block:2px}
.criterios li.ok{color:var(--green)}
.equipe-lista li{font-size:13px;padding-block:1px}

/* ---------- painel acoplado ---------- */
/* Acoplado, o painel não é gaveta sobreposta: o quadro perde a largura dele e
   continua inteiro visível. A sombra sai, porque não há nada embaixo. */
.painel-projeto.acoplado{box-shadow:none}
.painel-acoplado .quadro-area,
.painel-acoplado .quadro-topo,
.painel-acoplado .quadro-filtros,
.painel-acoplado .metricas{max-inline-size:calc(100% - min(96vw,620px));padding-inline-end:0}

@media (max-width:900px){
 /* Celular: painel em tela inteira, blocos empilhados, rodapé com botões largos. */
 .painel-projeto{inline-size:100%}
 .painel-projeto .painel-corpo{padding:12px 14px}
 .painel-projeto .painel-topo{padding:14px 14px 10px}
 .painel-projeto .painel-abas{padding:0 14px}
 .painel-projeto .painel-rodape{padding:10px 14px}
 .painel-projeto .painel-rodape>*{flex:1 1 100%;text-align:center}
 .painel-par{grid-template-columns:minmax(0,1fr)}
}

/* ---------- visão em lista ---------- */
.visao-alternar{display:inline-flex;gap:4px}
.visao-alternar button{padding:6px 12px;font-size:13px}
.lista-projetos{padding:0;overflow:hidden}
.tabela-projetos{inline-size:100%;border-collapse:collapse;font-size:13px}
.tabela-projetos th,.tabela-projetos td{text-align:start;padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.tabela-projetos thead th{font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);
 position:sticky;inset-block-start:0;background:var(--surface);z-index:1}
.tabela-projetos tbody th{font-weight:600}
.tabela-projetos tbody th small{display:block;font-weight:400;font-variant-numeric:tabular-nums}
.tabela-projetos .numero{text-align:end;font-variant-numeric:tabular-nums}
.tabela-projetos .prazo-grave{color:#a8321c}
.lista-projetos .paginacao{padding:10px 12px}
/* Em telas estreitas a tabela rola na horizontal DENTRO do painel, em vez de
   espremer seis colunas ou empurrar a página inteira para o lado. */
.lista-projetos .tabela-rolagem{overflow-x:auto}
@media (max-width:900px){
 .tabela-projetos th,.tabela-projetos td{padding:6px 8px}
 .visao-alternar{inline-size:100%}
 .visao-alternar button{flex:1 1 0}
}