/* ==========================================================================
   AURA · Design System (fonte: lemmon-agentes/design_system.html)
   Central de Aprovação · tema claro
   Paleta stone + UM acento âmbar (#f59e0b), com parcimônia.
   Inter (corpo) · Space Grotesk (display) · JetBrains Mono (dados)
   ========================================================================== */

:root{
  --stone-50:#fafaf9; --stone-100:#f5f5f4; --stone-200:#e7e5e4;
  --stone-300:#d6d3d1; --stone-400:#a8a29e; --stone-500:#78716c;
  --stone-600:#57534e; --stone-700:#44403c; --stone-800:#292524;
  --stone-900:#1c1917; --stone-950:#0c0a09;

  --bg:var(--stone-50);
  --surface:#ffffff;
  --surface-2:var(--stone-100);
  --ink:var(--stone-900);
  --muted:var(--stone-500);
  --line:var(--stone-200);
  --line-forte:var(--stone-300);

  --accent:#f59e0b;              /* âmbar AURA: só onde pede ação */
  --accent-ink:#92400e;          /* texto sobre âmbar claro */
  --accent-soft:#fef3c7;
  --accent-linha:#fcd34d;

  /* superfície sólida de contraste (botão principal, carimbo, barra cheia) */
  --forte:var(--stone-900);
  --forte-hover:var(--stone-800);
  --forte-ink:#ffffff;
  --forte-badge:rgba(255,255,255,.18);
  --texto-2:var(--stone-600);    /* texto secundário legível nos dois temas */

  /* escala tipográfica: 6 degraus, nada de meio pixel entre níveis */
  --t1:11px; --t2:12.5px; --t3:13.5px; --t4:15.5px; --t5:20px; --t6:30px;
  /* escala de espaço: todo gap e padding sai desta lista */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px;

  --font-display:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:"Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --radius-sm:8px; --radius:12px; --radius-lg:16px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(12,10,9,.04), 0 1px 3px rgba(12,10,9,.06);
  --shadow:0 8px 24px -12px rgba(12,10,9,.18);
  --ease:cubic-bezier(.16,1,.3,1);
  --dur:.28s;      /* layout e entrada */
  --dur-1:.12s;    /* cor, borda, pressão: o cursor não pode chegar antes da resposta */
  --foco:var(--stone-900);
  --foco-fundo:var(--surface);
  --tap:46px;

  color-scheme:light;   /* barra de rolagem e campos nativos no tom certo */
  accent-color:var(--stone-900);   /* caixa de seleção e calendário deixam de vir azuis */
}

/* ---- Tema escuro: só remapeia os tokens semânticos ----------------------- */
:root[data-tema="escuro"]{
  --bg:var(--stone-950);
  --surface:#161311;
  --surface-2:var(--stone-800);
  --ink:var(--stone-50);
  --muted:var(--stone-400);
  --line:#2a2522;
  --line-forte:var(--stone-700);

  --accent-ink:#fcd34d;
  --accent-soft:rgba(245,158,11,.14);
  --accent-linha:rgba(245,158,11,.45);

  --forte:var(--stone-100);
  --forte-hover:#ffffff;
  --forte-ink:var(--stone-950);
  --forte-badge:rgba(12,10,9,.12);
  --texto-2:var(--stone-300);

  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow:0 12px 32px -16px rgba(0,0,0,.6);
  --foco:var(--stone-100);
  --foco-fundo:var(--stone-950);

  color-scheme:dark;
  accent-color:var(--stone-100);
}
:root[data-tema="escuro"] .topo{background:rgba(12,10,9,.92)}
/* no escuro a sombra some: o relevo passa a vir da borda e de um fundo mais claro */
:root[data-tema="escuro"] .card,
:root[data-tema="escuro"] .num,
:root[data-tema="escuro"] .grafico-cartao,
:root[data-tema="escuro"] .tabela,
:root[data-tema="escuro"] .feed-item,
:root[data-tema="escuro"] .comentario,
:root[data-tema="escuro"] .popover-novidades,
:root[data-tema="escuro"] .menu-card,
:root[data-tema="escuro"] dialog,
:root[data-tema="escuro"] .acesso-cartao{border-color:#332d29; background:#1a1613}
:root[data-tema="escuro"] .coluna{background:rgba(255,255,255,.03)}
:root[data-tema="escuro"] .card:hover{border-color:var(--stone-500)}
:root[data-tema="escuro"] .card-thumb.com-play::before{background:var(--stone-100)}
:root[data-tema="escuro"] .pop-item.nova:hover{background:rgba(245,158,11,.2)}
:root[data-tema="escuro"] .palco.palco-simples,
:root[data-tema="escuro"] .palco.palco-slides{background:var(--surface)}
:root[data-tema="escuro"] .lp-frame{background:#fff}
/* contraste: no escuro, cinza fraco vira texto ilegível */
:root[data-tema="escuro"] .g-pedaco.aprovado,
:root[data-tema="escuro"] .g-marca.aprovado{background:var(--stone-400)}
:root[data-tema="escuro"] .trilha-btn,
:root[data-tema="escuro"] .icone-btn,
:root[data-tema="escuro"] .pop-aba{color:var(--texto-2)}
:root[data-tema="escuro"] dialog::backdrop{background:rgba(0,0,0,.62)}
:root[data-tema="escuro"] .card-fantasma{box-shadow:0 18px 44px -10px rgba(0,0,0,.8)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font-body); font-size:15px; line-height:1.55;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
button,input,textarea,select{font:inherit; color:inherit}
img,video,iframe{max-width:100%; display:block}
a{color:inherit}
::selection{background:var(--line-forte); color:var(--ink)}
::-moz-selection{background:var(--line-forte); color:var(--ink)}

.btn:active, .btn-voltar:active, .icone-btn:active, .chip-filtro:active,
.mini-acao:active, .sugestao:active, .lateral-linha:active{
  transform:scale(.975); transition-duration:.09s;
}

/* Todo número que muda de valor usa figura tabular: sem isso o contador treme */
.num .valor, .g-destaque-valor, .g-col-valor, .g-linha-valor, .coluna-cab .conta,
.lateral-conta, .card-progresso-valor, .linha-proj .conta, .slide-contador,
.tempo-chip, .tempo-atual, .contador-sino, .card-abertos{
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1;
}

/* ---- Topo ---------------------------------------------------------------- */
.topo{
  display:flex; align-items:center; gap:14px;
  padding:14px 20px; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:rgba(250,250,249,.92);
  backdrop-filter:blur(10px); z-index:40;
}
.topo .marca{
  font-family:var(--font-display); font-weight:600; font-size:15px;
  letter-spacing:.01em; white-space:nowrap;
}
.topo .marca span{color:var(--muted); font-weight:400}
.titulo-peca{flex:1; min-width:0}
.topo .titulo-video{
  min-width:0; font-family:var(--font-display); font-weight:600;
  font-size:var(--t4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.25;
}
.peca-sub{
  font-size:var(--t1); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.topo .sigla{
  width:28px; height:28px; border-radius:8px; flex:none;
  background:var(--forte); color:var(--forte-ink);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:13px;
}
.topo .btn.primario{margin-left:auto}
.btn-voltar{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:1px solid var(--line-forte); border-radius:var(--radius-pill);
  color:var(--muted); padding:7px 14px; cursor:pointer; text-decoration:none; font-size:13px;
  transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.btn-voltar:hover{color:var(--ink); border-color:var(--stone-400); background:var(--surface)}

/* ---- Status: quatro tratamentos bem diferentes entre si ------------------- */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  border-radius:var(--radius-pill); padding:4px 11px;
  font-size:12px; font-weight:600; white-space:nowrap; border:1px solid transparent;
}
/* precisa de ação: o mais alto da tela */
.pill.revisao{background:var(--accent-soft); border-color:var(--accent-linha); color:var(--accent-ink)}
/* em obra, comigo: contorno firme, sem preenchimento */
.pill.ajustes{background:var(--surface); border-color:var(--ink); color:var(--ink)}
/* fechado: carimbo sólido */
.pill.aprovado{background:var(--forte); border-color:var(--forte); color:var(--forte-ink)}
/* histórico: apagado */
.pill.substituido{background:var(--surface-2); border-color:var(--line); color:var(--texto-2)}

/* ---- Layout da revisão ---------------------------------------------------- */
.rev{
  display:grid; grid-template-columns:minmax(0,1fr) 400px;
  gap:0; min-height:calc(100dvh - 61px);
}
.rev-video{
  padding:24px; display:flex; flex-direction:column; gap:14px;
  align-items:stretch; justify-content:flex-start;
}
.palco{
  background:var(--stone-950); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow); position:relative;
}
.palco video{width:100%; aspect-ratio:16/9; max-height:calc(100dvh - 240px); background:#000; object-fit:contain}
.palco iframe{width:100%; aspect-ratio:16/9; border:0; background:#000}
.palco.vertical video{aspect-ratio:9/16; max-height:calc(100dvh - 200px); margin:0 auto; width:auto; max-width:100%}
.palco.v916 iframe{aspect-ratio:9/16; height:70dvh; width:auto; max-width:100%; margin:0 auto}
.palco.palco-simples,.palco.palco-slides{background:var(--surface); border:1px solid var(--line)}

/* Marcadores sob o vídeo */
.marcadores{position:relative; height:26px; margin:2px 6px 0}
.marcadores .linha-tempo{
  position:absolute; left:0; right:0; top:12px; height:2px;
  background:var(--line-forte); border-radius:2px;
}
.marcador{
  position:absolute; top:2px; width:19px; height:19px; margin-left:-9.5px;
  border-radius:50%; border:1.5px solid var(--accent); cursor:pointer; padding:0;
  background:var(--surface); color:var(--accent-ink);
  font-family:var(--font-mono); font-size:10px; line-height:16px; text-align:center;
  transition:transform var(--dur-1) var(--ease);
}
.marcador.resolvido{border-color:var(--line-forte); color:var(--muted)}
.marcador:hover{transform:scale(1.2)}
.aviso-player{
  font-size:13px; color:var(--muted); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 16px; line-height:1.5;
}
.aviso-player b{color:var(--ink)}
.palco.bufferando::after{
  content:"Carregando… conexão lenta";
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:rgba(12,10,9,.82); color:#fff; font-size:13px;
  padding:10px 16px; border-radius:var(--radius-pill); pointer-events:none;
}
.lp-nota{font-size:12px; color:var(--muted); padding:10px 16px; border-top:1px solid var(--line)}

/* ---- Painel de anotações --------------------------------------------------- */
.rev-painel{
  border-left:1px solid var(--line); background:var(--surface);
  display:flex; flex-direction:column; min-height:0; max-height:calc(100dvh - 61px);
  position:sticky; top:61px;
}
.painel-cab{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 18px; border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.painel-cab h2{margin:0; font-family:var(--font-display); font-size:15px; font-weight:600}
.painel-cab .acoes{display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:flex-end}
.entregue{
  display:inline-flex; align-items:center; font-size:12.5px; color:var(--muted); margin-right:auto;
}

.lista-comentarios{
  flex:1; overflow-y:auto; padding:12px 14px 16px; display:flex;
  flex-direction:column; gap:8px; scroll-behavior:smooth; background:var(--bg);
}
.vazio{color:var(--muted); text-align:center; padding:40px 20px; font-size:14px}
.vazio b{color:var(--ink); display:block; margin-bottom:6px; font-family:var(--font-display)}

.comentario{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:12px 14px;
  display:flex; flex-direction:column; gap:8px;
  animation:entrar var(--dur) var(--ease);
}
@keyframes entrar{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.comentario.resolvido{opacity:.6; box-shadow:none}
.comentario.resolvido .texto{text-decoration:line-through; text-decoration-color:var(--stone-400)}
.comentario .linha1{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.tempo-chip{
  font-family:var(--font-mono); font-size:12px; font-weight:500;
  background:var(--surface-2); border:1px solid var(--line);
  color:var(--texto-2); border-radius:8px; padding:3px 8px; cursor:pointer;
  transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.tempo-chip:hover{border-color:var(--stone-400); color:var(--ink)}
.tempo-chip.geral{color:var(--texto-2); cursor:default}
.tag{font-size:11px; font-weight:600; border-radius:6px; padding:3px 8px}
.tag.alteracao{background:transparent; border:1px solid var(--line-forte); color:var(--ink)}
.tag.legenda{background:var(--forte); color:var(--forte-ink)}
.tag.obs{background:var(--surface-2); color:var(--texto-2)}
.tag.tipo{background:var(--surface-2); color:var(--texto-2)}
.comentario .autor{margin-left:auto; font-size:11.5px; color:var(--muted)}
.comentario .texto{font-size:14px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere}
.comentario .linha3{display:flex; gap:14px}
.mini-acao{
  background:none; border:0; padding:6px 0; min-height:32px; color:var(--muted);
  font-size:12px; cursor:pointer; transition:color var(--dur) var(--ease);
}
.mini-acao:hover{color:var(--ink)}
@media (pointer: coarse){
  .mini-acao{min-height:var(--tap); display:inline-flex; align-items:center}
}

/* ---- Compositor ------------------------------------------------------------ */
.compositor{
  border-top:1px solid var(--line); padding:14px 16px 16px; background:var(--surface);
  display:flex; flex-direction:column; gap:10px;
}
.comp-linha{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.tempo-atual{
  font-family:var(--font-mono); font-size:13px; font-weight:500;
  background:var(--surface); border:1px solid var(--line-forte);
  color:var(--texto-2); border-radius:8px; padding:6px 10px; cursor:pointer;
  min-width:74px; text-align:center; transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.tempo-atual:hover{border-color:var(--stone-400)}
.tempo-atual.fixado{background:var(--accent-soft); border-color:var(--accent-linha); color:var(--accent-ink)}
input.tempo-manual{
  font-family:var(--font-mono); font-size:13px; font-weight:500; width:84px;
  background:var(--surface); border:1px solid var(--line-forte); color:var(--texto-2);
  border-radius:8px; padding:6px 10px; text-align:center; outline:none;
}
input.tempo-manual:focus{border-color:var(--stone-500)}
.seg{
  display:flex; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--radius-pill); padding:3px; gap:2px;
}
.seg button{
  background:none; border:0; border-radius:var(--radius-pill);
  color:var(--texto-2); font-size:12px; font-weight:600; padding:5px 12px;
  cursor:pointer; transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.seg button.ativo{background:var(--forte); color:var(--forte-ink)}
.check-geral{
  display:inline-flex; align-items:center; gap:6px; font-size:13px;
  color:var(--texto-2); cursor:pointer; user-select:none; margin-left:auto; padding:8px 0;
}
.check-geral input{accent-color:var(--forte)}
.compositor textarea{
  width:100%; min-height:64px; resize:vertical;
  background:var(--surface); border:1px solid var(--line-forte);
  border-radius:var(--radius); padding:11px 14px; outline:none;
  font-size:14px; line-height:1.5; color:var(--ink);
  transition:border-color var(--dur) var(--ease);
}
.compositor textarea:focus{border-color:var(--stone-500)}
.compositor textarea::placeholder{color:var(--muted)}
.comp-rodape{display:flex; align-items:center; gap:10px}
.assinatura{font-size:12px; color:var(--muted)}
.assinatura button{
  background:none; border:0; padding:0; color:var(--texto-2); cursor:pointer;
  font-size:12px; text-decoration:underline; text-underline-offset:3px;
}

/* ---- Botões ---------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; border-radius:var(--radius-pill); cursor:pointer;
  font-weight:600; font-size:13.5px; padding:10px 20px; min-height:40px;
  transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.btn.primario{background:var(--forte); color:var(--forte-ink)}
.btn.primario:hover{background:var(--forte-hover)}
.btn.primario:disabled{opacity:.4; cursor:default}
.btn.fantasma{
  background:var(--surface); border:1px solid var(--line-forte); color:var(--texto-2);
  padding:8px 14px; min-height:36px; font-size:12.5px;
}
.btn.fantasma:hover{border-color:var(--stone-400); color:var(--ink)}
.btn.aprovar{background:var(--forte); color:var(--forte-ink)}
.btn.aprovar:hover{background:var(--forte-hover)}
.btn.perigo{background:var(--surface); border:1px solid var(--line-forte); color:var(--texto-2)}
.btn.perigo:hover{border-color:var(--stone-500); color:var(--ink)}
.btn.enviar{margin-left:auto}

/* ==========================================================================
   Layout com menu lateral de dois níveis
   ========================================================================== */
.layout{
  /* a trilha some no desktop (display:none), entao o grid e de 2 colunas */
  display:grid; grid-template-columns:276px minmax(0,1fr);
  min-height:100dvh; background:var(--bg);
  transition:grid-template-columns var(--dur) var(--ease);
}
.layout.recolhida{grid-template-columns:0 minmax(0,1fr)}
.layout.recolhida .lateral{opacity:0; pointer-events:none; padding-left:0; padding-right:0}

/* Trilha: icone COM nome, para ninguem precisar adivinhar o que e cada botao */
.trilha{
  display:none;   /* no desktop o menu e um so: a lateral */
  flex-direction:column; align-items:stretch; gap:4px;
  padding:14px 10px 16px; background:var(--surface); border-right:1px solid var(--line);
  position:sticky; top:0; height:100dvh;
}
.trilha-topo{display:flex; align-items:center; gap:6px; margin-bottom:12px}
.trilha-marca{
  flex:1; min-width:0; height:40px; border-radius:10px; border:0; cursor:pointer;
  background:none; color:var(--ink); display:flex; align-items:center; gap:9px; padding:0 6px;
  font-family:var(--font-display); font-weight:600; font-size:15px; text-align:left;
  transition:background var(--dur) var(--ease);
}
.trilha-marca:hover{background:var(--surface-2)}
.trilha-marca .sigla{
  width:28px; height:28px; border-radius:8px; flex:none;
  background:var(--forte); color:var(--forte-ink);
  display:flex; align-items:center; justify-content:center; font-size:13px;
}
.recolher-menu{flex:none}
.recolher-menu.fechado svg{transform:rotate(180deg)}
.trilha-rotulo{
  font-size:13px; font-weight:600; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1;
}
.trilha-rotulo.forte{font-size:14px}
.trilha-lista{display:flex; flex-direction:column; gap:4px; align-items:stretch; width:100%}
.trilha-espaco{flex:1}
.trilha-btn{
  position:relative; min-height:40px; border-radius:10px; border:0; cursor:pointer;
  background:none; color:var(--stone-500);
  display:flex; align-items:center; gap:10px; padding:0 10px; text-align:left;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.trilha-btn svg{flex:none}
.trilha-btn:hover{background:var(--surface-2); color:var(--ink)}
.trilha-btn.ativo{background:var(--forte); color:var(--forte-ink)}
/* o rótulo tem cor própria: sem esta linha ele fica claro sobre claro no tema escuro */
.trilha-btn.ativo .trilha-rotulo{color:var(--forte-ink)}
.trilha-btn .sigla{
  font-family:var(--font-display); font-size:13px; font-weight:600;
  width:30px; height:30px; border-radius:50%; background:var(--surface-2); color:var(--texto-2);
  display:flex; align-items:center; justify-content:center;
}
.contador-sino{
  position:absolute; top:-2px; right:-2px; min-width:17px; height:17px; padding:0 4px;
  border-radius:999px; background:var(--accent); color:var(--stone-950);
  font-size:10.5px; font-weight:700; line-height:17px; text-align:center;
  border:2px solid var(--surface); box-sizing:content-box;
}

/* Painel de navegação */
.lateral{
  display:flex; flex-direction:column; gap:12px; padding:16px 14px;
  background:var(--surface); border-right:1px solid var(--line);
  position:sticky; top:0; height:100dvh; overflow:hidden;
  transition:opacity var(--dur) var(--ease);
}
.lateral-cab{display:flex; align-items:center; gap:6px}
.lateral-marca{
  flex:1; min-width:0; display:flex; align-items:center; gap:9px;
  background:none; border:0; cursor:pointer; padding:4px 6px; border-radius:10px; text-align:left;
}
.lateral-marca:hover{background:var(--surface-2)}
.lateral-marca .sigla{
  width:28px; height:28px; border-radius:8px; flex:none;
  background:var(--forte); color:var(--forte-ink);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:13px;
}
.lateral-titulo{
  font-family:var(--font-display); font-size:15px; font-weight:600; line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.icone-btn{
  width:32px; height:32px; border-radius:8px; border:0; background:none; cursor:pointer;
  color:var(--stone-500); display:flex; align-items:center; justify-content:center; flex:none;
  transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.icone-btn:hover{background:var(--surface-2); color:var(--ink)}
.icone-btn.fechar-drawer,.icone-btn.abrir-drawer{display:none}
/* só existe para trazer o menu de volta: fica escondido enquanto o menu está aberto */
.icone-btn.abrir-menu{display:none; border:1px solid var(--line-forte); background:var(--surface)}
.layout.recolhida .icone-btn.abrir-menu{display:flex}

.lateral-busca{
  display:flex; align-items:center; gap:8px; padding:0 10px;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); height:38px;
  color:var(--stone-400);
}
.lateral-busca input{
  flex:1; min-width:0; border:0; background:none; outline:none; font-size:13.5px; color:var(--ink);
}
.lateral-busca input::placeholder{color:var(--muted)}
.lateral-busca:focus-within{
  border-color:var(--line-forte);
  box-shadow:0 0 0 2px var(--foco-fundo), 0 0 0 4px var(--foco);
}
/* foco sempre visível, nos dois temas, sem tocar no raio do elemento
   (o border-radius que morava aqui quadrava todo botão pill no teclado) */
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:none; box-shadow:0 0 0 2px var(--foco-fundo), 0 0 0 4px var(--foco);
}
.btn.largo{width:100%}

.lateral-nav{display:flex; flex-direction:column; gap:2px}
.lateral-linha.nav{font-size:14px; font-weight:600; color:var(--texto-2); padding:9px 10px}
.lateral-linha.nav svg{flex:none}
.lateral-rotulo{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.lateral-secao.grupo{gap:0}
.grupo-titulo{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  background:none; border:0; cursor:pointer; border-radius:8px; padding:8px 10px;
  color:var(--texto-2); font-size:13px; font-weight:600;
  transition:background var(--dur) var(--ease);
}
.grupo-titulo:hover{background:var(--surface-2); color:var(--ink)}
.grupo-titulo svg{flex:none; transform:rotate(-90deg); transition:transform var(--dur) var(--ease); opacity:.7}
.lateral-secao.grupo.aberto .grupo-titulo svg{transform:rotate(-90deg) scaleX(-1)}
.grupo-nome{flex:1; min-width:0}
.grupo-itens{display:flex; flex-direction:column; gap:1px; padding:2px 0 6px 8px; animation:abrirGrupo var(--dur) var(--ease)}
@keyframes abrirGrupo{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:none}}

.lateral-corpo{flex:1; overflow-y:auto; margin:0 -6px; padding:0 6px; display:flex; flex-direction:column; gap:18px}
.lateral-secao{display:flex; flex-direction:column; gap:1px}
.lateral-secao-titulo{
  font-size:11px; font-weight:600; color:var(--texto-2);
  padding:0 10px 6px; letter-spacing:.02em;
}
.lateral-linha{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:none; border:0; cursor:pointer; border-radius:8px; padding:8px 10px;
  color:var(--texto-2); font-size:13.5px;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lateral-linha:hover{background:var(--surface-2); color:var(--ink)}
.lateral-linha.ativo{background:var(--forte); color:var(--forte-ink)}
.lateral-rotulo{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lateral-conta{
  font-family:var(--font-mono); font-size:11.5px; color:var(--texto-2);
  background:var(--surface-2); border-radius:6px; padding:1px 6px;
}
.lateral-linha.ativo .lateral-conta{background:var(--forte-badge); color:var(--forte-ink)}
.lateral-nota{font-size:11px; color:var(--texto-2)}
.lateral-linha.destaque .lateral-conta{background:var(--accent-soft); color:var(--accent-ink)}

/* Conteúdo */
.conteudo{padding:26px 28px 70px; width:100%}
.conteudo > *{max-width:1440px}
/* monitor largo: o conteúdo não fica jogado no canto */
@media (min-width: 1700px){
  .conteudo{padding-left:48px; padding-right:48px}
  .conteudo > *{margin-left:auto; margin-right:auto}
  .rev{max-width:1900px; margin:0 auto}
}
.conteudo-topo{display:flex; align-items:flex-start; gap:12px; margin-bottom:20px}
/* botão principal sempre visível no topo, ao lado do sino */
.novo-topo{flex:none; min-height:40px; padding:0 16px; font-size:13.5px; gap:6px}
@media (max-width: 640px){
  .novo-topo .texto-novo{display:none}
  .novo-topo{padding:0 12px}
}

/* sino no canto superior direito, onde todo mundo procura */
.sino-topo{
  position:relative; width:40px; height:40px; border-radius:var(--radius-pill); flex:none;
  border:1px solid var(--line-forte); background:var(--surface); color:var(--texto-2);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.sino-topo:hover{border-color:var(--stone-400); color:var(--ink)}
.sino-topo.ativo{background:var(--forte); border-color:var(--forte); color:var(--forte-ink)}
.sino-topo .contador-sino{border-color:var(--bg)}
.conteudo-titulo{flex:1; min-width:0}
.conteudo-titulo h1{
  margin:0; font-family:var(--font-display); font-size:clamp(1.6rem,4vw,1.9rem);
  font-weight:600; letter-spacing:-.01em;
}
.conteudo-titulo p{margin:5px 0 0; color:var(--muted); font-size:13.5px}

.filtros-ativos{display:flex; gap:8px; flex-wrap:wrap; margin:-6px 0 18px}
.chip-filtro{
  display:inline-flex; align-items:center; gap:7px; background:var(--surface);
  border:1px solid var(--line-forte); border-radius:var(--radius-pill);
  padding:5px 12px; font-size:12.5px; color:var(--texto-2); cursor:pointer;
}
.chip-filtro:hover{border-color:var(--stone-400)}
.chip-filtro .x{color:var(--muted); font-size:15px; line-height:1}

.veu{display:none}

/* ---- Popover de novidades ------------------------------------------------- */
.popover-novidades{
  position:fixed; z-index:80; width:min(380px, calc(100vw - 24px));
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden;
  animation:surgir .18s var(--ease);
}
@keyframes surgir{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:none}}
.pop-cab{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; border-bottom:1px solid var(--line);
}
.pop-abas{display:flex; gap:2px; background:var(--surface-2); border-radius:var(--radius-pill); padding:3px}
.pop-aba{
  display:inline-flex; align-items:center; gap:6px; border:0; background:none; cursor:pointer;
  border-radius:var(--radius-pill); padding:5px 12px; font-size:12.5px; font-weight:600; color:var(--stone-500);
}
.pop-aba.ativo{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm)}
.pop-badge{
  background:var(--accent); color:var(--stone-950); border-radius:999px;
  font-size:10.5px; font-weight:700; padding:1px 6px;
}
.pop-marcar{background:none; border:0; cursor:pointer; font-size:12px; color:var(--muted)}
.pop-marcar:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
.pop-lista{max-height:min(58dvh, 420px); overflow-y:auto}
.pop-item{
  display:flex; align-items:flex-start; gap:10px; width:100%; text-align:left;
  background:none; border:0; border-bottom:1px solid var(--line); cursor:pointer;
  padding:11px 12px; transition:background var(--dur) var(--ease);
}
.pop-item:hover{background:var(--bg)}
.pop-item.nova{background:var(--accent-soft)}
.pop-item.nova:hover{background:#fde9b3}
.pop-texto{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.pop-frase{font-size:13px; color:var(--texto-2); line-height:1.35}
.pop-frase b{color:var(--ink); font-weight:600}
.pop-quando{font-size:11.5px; color:var(--muted)}
.pop-vazio{padding:26px 16px; text-align:center; font-size:13px; color:var(--muted)}
.pop-rodape{padding:10px 12px}
.sigla-mini{
  width:26px; height:26px; border-radius:50%; flex:none;
  background:var(--surface-2); color:var(--texto-2);
  font-family:var(--font-display); font-size:12px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}

/* ---- Tela de acesso (pedir entrada) ---------------------------------------- */
.acesso-tela{
  min-height:100dvh; display:flex; align-items:center; justify-content:center;
  padding:24px; background:var(--bg);
}
.acesso-cartao{
  width:min(420px, 100%); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:34px 30px 28px;
}
.acesso-marca{
  font-family:var(--font-display); font-size:13px; font-weight:600; color:var(--muted);
  margin-bottom:18px;
}
.acesso-cartao h1{
  margin:0 0 8px; font-family:var(--font-display); font-size:1.6rem; font-weight:600;
  letter-spacing:-.01em; line-height:1.2;
}
.acesso-texto{margin:0 0 22px; color:var(--muted); font-size:14px; line-height:1.5}
.acesso-cartao label{display:block; font-size:12px; font-weight:600; color:var(--texto-2); margin:14px 0 6px}
.acesso-cartao input{
  width:100%; background:var(--surface); border:1px solid var(--line-forte);
  border-radius:var(--radius-sm); padding:11px 14px; outline:none; color:var(--ink); font-size:14px;
}
.acesso-cartao input:focus{border-color:var(--stone-500)}
.acesso-cartao .btn{margin-top:22px}
.acesso-rodape{margin:16px 0 0; font-size:12px; color:var(--muted); text-align:center}

/* ---- Entrar (nome e senha) --------------------------------------------------- */
.acesso-form{display:block}
.acesso-form .btn{margin-top:22px}
/* o aviso ocupa lugar só quando existe, senão o botão dança na tela */
.acesso-erro:empty{display:none}
.acesso-erro{
  margin:14px 0 0; font-size:13px; line-height:1.45; color:var(--ink);
  background:var(--surface-2); border-left:2px solid var(--accent);
  border-radius:var(--radius-sm); padding:10px 12px;
}
.acesso-rodape-link{
  display:block; width:100%; margin:18px 0 0; padding:0; background:none; border:0;
  font:inherit; font-size:13px; color:var(--texto-2); text-align:center; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-forte);
  transition:color var(--dur-1) var(--ease);
}
.acesso-rodape-link:hover{color:var(--ink)}
.acesso-rodape-link:focus-visible{
  outline:none; border-radius:var(--radius-sm);
  box-shadow:0 0 0 2px var(--foco-fundo), 0 0 0 4px var(--foco);
}

/* ---- Sua conta ---------------------------------------------------------------- */
.conta-cabeca{display:flex; align-items:center; gap:12px; margin:4px 0 20px}
.conta-cabeca .sigla{
  width:40px; height:40px; border-radius:50%; flex:none;
  background:var(--surface-2); color:var(--texto-2);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:15px;
}
.conta-cabeca strong{display:block; font-size:15px; line-height:1.3}
.conta-papel{font-size:12px; color:var(--muted)}
.conta-acoes{display:flex; flex-direction:column; gap:8px}
.conta-acoes .btn{margin:0; justify-content:flex-start}

/* ---- Fila de acessos --------------------------------------------------------- */
dialog.dialogo-largo{width:min(620px, calc(100vw - 32px))}
.acessos-lista{display:flex; flex-direction:column; gap:2px; max-height:min(60dvh,460px); overflow-y:auto}
.acessos-titulo{
  font-size:11px; font-weight:600; color:var(--texto-2);
  padding:16px 0 6px;
}
.acessos-vazio{font-size:13px; color:var(--muted); padding:6px 0 4px}
.acesso-linha{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:11px 12px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); margin-bottom:6px;
}
.acesso-quem{flex:1; min-width:150px; display:flex; flex-direction:column; gap:2px}
.acesso-quem b{font-size:13.5px}
.acesso-detalhe{font-size:12px; color:var(--muted)}
.acesso-linha select{
  background:var(--surface); border:1px solid var(--line-forte); border-radius:var(--radius-sm);
  padding:8px 10px; font-size:13px; color:var(--ink); outline:none; max-width:190px;
}
.acesso-linha .btn{min-height:34px; padding:7px 16px; font-size:12.5px}

/* ---- Menu do card ---------------------------------------------------------- */
.menu-card{
  position:fixed; z-index:80; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:6px; min-width:190px;
  display:flex; flex-direction:column; animation:surgir .16s var(--ease);
}
.menu-card button{
  background:none; border:0; text-align:left; cursor:pointer; border-radius:8px;
  padding:9px 10px; font-size:13px; color:var(--texto-2);
}
.menu-card button:hover{background:var(--surface-2); color:var(--ink)}

/* ---- Quadro (kanban de verdade, colunas lado a lado) ------------------------ */
.quadro{
  display:grid; grid-auto-flow:column; grid-auto-columns:320px;
  gap:16px; align-items:stretch;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity; padding-bottom:var(--e2);
  scrollbar-width:thin;
}
.coluna{scroll-snap-align:start}
.coluna{background:var(--surface-2); border-radius:var(--radius-lg); padding:var(--e3); min-height:120px; min-width:0}
.coluna-cab{
  display:flex; align-items:baseline; gap:var(--e2); padding:var(--e1) var(--e2) var(--e3);
}
/* placar: o número manda, o nome apoia. Sem quadradinho de status, que é bolinha disfarçada */
.coluna-cab .conta{
  font-family:var(--font-display); font-size:var(--t5); font-weight:600; color:var(--ink); line-height:1;
}
.coluna-cab h2{margin:0; font-size:var(--t3); font-weight:500; color:var(--texto-2)}
.coluna.aprovado .coluna-cab{opacity:.6}
.col-atraso{
  margin-left:auto; font-size:var(--t1); font-weight:600;
  color:var(--accent-ink); background:var(--accent-soft); border-radius:6px; padding:2px 8px;
}
.coluna-lista{display:flex; flex-direction:column; gap:10px; min-height:60px; min-width:0}
/* arrastar card entre colunas (mouse e dedo) */
.card.arrastando{opacity:.35}
.coluna.recebendo{outline:2px dashed var(--line-forte); outline-offset:2px}
.card.card-fantasma{
  position:fixed; z-index:95; pointer-events:none; margin:0;
  box-shadow:0 18px 40px -12px rgba(12,10,9,.45);
  transform:rotate(1.5deg) scale(1.02); opacity:.96;
  transition:none; cursor:grabbing;
}
body.arrastando-card{user-select:none; -webkit-user-select:none; cursor:grabbing}
body.arrastando-card .card{cursor:grabbing}
.card{touch-action:manipulation; -webkit-touch-callout:none}
body.arrastando-card{-webkit-user-select:none}
.menu-sep{height:1px; background:var(--line); margin:5px 2px}
.menu-vazio{font-size:12.5px; color:var(--muted); padding:8px 10px}
.coluna-vazia{
  border:1px dashed var(--line-forte); border-radius:var(--radius);
  padding:var(--e5) var(--e3); color:var(--muted); font-size:var(--t3);
  text-align:center; line-height:1.5;
}
.coluna-vazia .mini-acao{margin-top:var(--e2)}

/* ---- Card (peça) --------------------------------------------------------------- */
.card{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); cursor:pointer;
  display:flex; flex-direction:column; overflow:hidden; width:100%; min-width:0; text-align:left;
  transition:border-color var(--dur-1) var(--ease), transform .09s var(--ease);
}
/* nem faixa de cor no topo do card nem sombra: o relevo vem do fundo da coluna.
   Doze faixas âmbar numa coluna cheia matavam a escassez do acento. */
@media (hover:hover){
  .card:hover{border-color:var(--line-forte)}
}
.card:active{transform:scale(.995)}
.card.arrastando{transform:none}
.card:focus-visible{box-shadow:0 0 0 2px var(--foco-fundo), 0 0 0 4px var(--foco)}

.card-topo{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e2);
  padding:var(--e3) var(--e3) 0;
}
.card-data{font-size:var(--t1); color:var(--muted)}
.card-menu{
  width:28px; height:28px; border-radius:8px; border:0; background:none; cursor:pointer;
  color:var(--muted); display:flex; align-items:center; justify-content:center; flex:none;
  transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.card-menu:hover{background:var(--surface-2); color:var(--ink)}
.tres-pontos{font-size:15px; line-height:1; letter-spacing:1px; transform:translateY(-3px)}

/* a capa sangra nas bordas do card e respeita a proporção da peça:
   cortar Reels em 16/9 mostrava só o torso da pessoa */
.card .card-thumb{
  margin:0; border-radius:0; aspect-ratio:var(--capa,16/9); overflow:hidden;
  max-height:220px; background:var(--surface-2) center/cover no-repeat; position:relative;
}
.card .card-thumb.retrato{--capa:4/5}
.card .card-thumb.com-play::before{
  content:""; position:absolute; z-index:1; left:50%; top:50%; width:34px; height:34px; margin:-17px 0 0 -17px;
  border-radius:50%; background:#fff; box-shadow:var(--shadow);
  transition:transform var(--dur) var(--ease);
}
.card .card-thumb.com-play .seta-play{
  position:absolute; z-index:2; left:50%; top:50%; margin:-6px 0 0 -3px;
  border-left:11px solid var(--stone-900); border-top:6.5px solid transparent; border-bottom:6.5px solid transparent;
  transition:transform var(--dur) var(--ease);
}
@media (hover:hover){
  .card:hover .card-thumb.com-play::before,
  .card:hover .card-thumb.com-play .seta-play{transform:scale(1.07)}
}

.card .card-corpo{padding:var(--e3); display:flex; flex-direction:column; gap:var(--e1); min-width:0}
.card .card-corpo h3{
  margin:0; font-family:var(--font-display); font-size:var(--t4); font-weight:600;
  line-height:1.3; letter-spacing:-.01em; overflow-wrap:break-word;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* nível 3: uma linha só de dado, nome em Inter e data em mono (mono é para dado) */
.card-meta-linha{
  font-size:var(--t1); color:var(--muted); line-height:1.4;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card-meta-linha .mono{font-family:var(--font-mono)}
.card-meta-linha .sep{opacity:.5; padding:0 5px}
.card-progresso{display:flex; align-items:center; gap:8px; margin-top:3px}
.card-progresso-rotulo{font-size:11px; color:var(--muted); white-space:nowrap}
/* estado sem anotação: classe própria, senão herdava o padding de 40px do vazio de tela cheia */
.card-progresso.sem-nota{margin-top:2px}
.card-progresso-valor{font-family:var(--font-mono); font-size:11px; color:var(--texto-2)}
.mini-barra{flex:1; min-width:30px; height:5px; background:var(--surface-2); border-radius:3px; overflow:hidden}
.mini-barra i{display:block; height:100%; background:var(--forte); border-radius:3px; transition:width var(--dur) var(--ease)}
.card.aprovado .mini-barra i{background:var(--stone-400)}

.card-rodape{
  display:flex; align-items:center; gap:var(--e2); padding:var(--e2) var(--e3);
  border-top:1px solid var(--line); background:var(--bg);
}
.card-quem{display:flex; align-items:center; gap:8px; min-width:0; flex:1}
.card-quem-txt{font-size:var(--t1); color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.card-rodape.parado .card-quem-txt{color:var(--accent-ink); font-weight:600}
.card-abertos{
  font-size:var(--t1); font-weight:600; color:var(--texto-2); background:var(--surface-2);
  border:1px solid var(--line); border-radius:6px; padding:1px 7px; white-space:nowrap;
}

/* ---- Card (versão antiga, ainda usada em telas legadas) ------------------------ */
.card-video{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; cursor:pointer; text-align:left; padding:0;
  box-shadow:var(--shadow-sm);
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  display:block; width:100%;
}
.card-video:hover{transform:translateY(-2px); border-color:var(--stone-300); box-shadow:var(--shadow)}
.card-thumb{
  aspect-ratio:16/9; background:var(--stone-100) center/cover no-repeat;
  display:flex; align-items:center; justify-content:center; position:relative;
}
.card-thumb .play{
  width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.9);
  display:flex; align-items:center; justify-content:center; color:var(--stone-900);
  box-shadow:var(--shadow-sm);
}
.card-thumb .play svg{margin-left:2px}
.card-corpo{padding:12px 14px 14px; display:flex; flex-direction:column; gap:8px}
.card-corpo h3{
  margin:0; font-family:var(--font-display); font-size:14.5px; font-weight:600;
  line-height:1.35; overflow-wrap:anywhere;
}
.card-projeto{font-size:11.5px; color:var(--muted)}
.card-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:var(--muted)}
.card-cliente{font-size:12px; color:var(--texto-2)}
.card-captado{font-size:11.5px; color:var(--muted); font-family:var(--font-mono)}
.chip-captado{
  display:inline-flex; align-items:center; font-size:11.5px; color:var(--texto-2);
  background:var(--surface-2); border-radius:var(--radius-sm); padding:3px 9px; white-space:nowrap;
}
.card-vez{font-size:12px; color:var(--texto-2); display:flex; align-items:center; gap:6px}
.card-mexido{font-size:11.5px; color:var(--muted); border-top:1px solid var(--line); padding-top:8px}
.card-mexido.parado{color:var(--accent-ink)}
.card-acoes{display:flex; gap:14px; border-top:1px solid var(--line); padding-top:6px}

/* Prazo */
.prazo{
  display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600;
  border-radius:var(--radius-sm); padding:2px 8px; background:var(--surface-2); color:var(--texto-2);
  white-space:nowrap;
}
.prazo.perto{background:var(--accent-soft); color:var(--accent-ink)}
.prazo.vencido{background:var(--forte); color:var(--forte-ink)}

/* ---- Painel de números -------------------------------------------------------- */
.dash-nums{
  display:grid; grid-template-columns:1.35fr 1fr 1fr 1fr; gap:0; margin-bottom:var(--e5);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
}
.num{background:none; border:0; border-radius:0; padding:var(--e4) var(--e5); position:relative}
.num + .num::before{
  content:""; position:absolute; left:0; top:var(--e4); bottom:var(--e4); width:1px; background:var(--line);
}
.num .valor{font-family:var(--font-display); font-size:var(--t6); font-weight:600; line-height:1}
.num.heroi .valor{font-size:42px; letter-spacing:-.02em}
.num .rotulo{font-size:var(--t2); color:var(--texto-2); margin-top:var(--e2)}
.num .nota{font-size:var(--t1); color:var(--muted); margin-top:3px; font-variant-numeric:tabular-nums}
.num.destaque .valor{color:var(--accent-ink)}

/* ---- Gráficos do painel ------------------------------------------------------ */
.dash-graficos{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:14px; margin-bottom:26px;
}
.grafico-cartao{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:18px; display:flex; flex-direction:column; gap:14px;
}
.grafico-cab{display:flex; flex-direction:column; gap:3px}
.grafico-cab h2{margin:0; font-family:var(--font-display); font-size:14px; font-weight:600}
.grafico-sub{font-size:12px; color:var(--muted)}
.g-vazio{font-size:13px; color:var(--muted); padding:14px 0}

/* colunas por semana */
.g-colunas{display:flex; align-items:flex-end; gap:6px; height:132px}
.g-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; height:100%; justify-content:flex-end}
.g-col-valor{font-family:var(--font-mono); font-size:11px; color:var(--texto-2); height:14px}
.g-barra-v{
  width:100%; min-height:3px; background:var(--line-forte); border-radius:4px 4px 0 0;
  transition:height var(--dur) var(--ease);
}
.g-col:hover .g-barra-v{background:var(--muted)}
.g-barra-v.atual{background:var(--forte)}
.g-col-rotulo{font-size:10.5px; color:var(--muted); font-family:var(--font-mono)}

/* faixa de status */
.g-faixa{display:flex; height:12px; border-radius:999px; overflow:hidden; background:var(--surface-2)}
.g-pedaco{height:100%}
.g-pedaco.revisao{background:var(--accent)}
.g-pedaco.ajustes{background:var(--forte)}
.g-pedaco.aprovado{background:var(--stone-400)}
.g-pedaco.producao{background:var(--stone-600)}
.g-pedaco.standby{background:var(--stone-200)}
.g-legenda{display:flex; flex-direction:column; gap:7px; margin-top:14px}
.g-legenda-item{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--texto-2)}
.g-legenda-item b{margin-left:auto; font-family:var(--font-mono); font-size:12px; color:var(--ink)}
.g-marca{width:9px; height:9px; border-radius:3px; flex:none}
.g-marca.revisao{background:var(--accent)}
.g-marca.ajustes{background:var(--forte)}
.g-marca.aprovado{background:var(--stone-400)}
.g-marca.producao{background:var(--stone-600)}
.g-marca.standby{background:var(--stone-200)}

/* tempo até aprovar */
.g-destaque{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:6px}
.g-destaque-valor{font-family:var(--font-display); font-size:28px; font-weight:600; line-height:1}
.g-destaque-rotulo{font-size:12px; color:var(--muted)}
.g-linha-h{display:flex; align-items:center; gap:10px; font-size:12.5px; width:100%; padding:4px 0}
button.g-linha-h{background:none; border:0; cursor:pointer; text-align:left; border-radius:6px}
button.g-linha-h:hover{background:var(--surface-2)}
button.g-linha-h:hover .g-linha-nome{color:var(--ink)}
.g-linha-nome{width:78px; flex:none; color:var(--texto-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.g-barra-h{flex:1; height:8px; background:var(--surface-2); border-radius:4px; overflow:hidden}
.g-barra-h i{display:block; height:100%; background:var(--forte); border-radius:4px}
.g-linha-valor{
  font-family:var(--font-mono); font-size:11.5px; color:var(--muted);
  width:66px; text-align:right; flex:none; white-space:nowrap;
}

.dash-secao{margin-bottom:30px}
.dash-secao h2{
  margin:0 0 12px; font-family:var(--font-display); font-size:15px; font-weight:600;
}
.tabela{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden;
}
.linha-proj{
  display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) 120px 92px;
  gap:14px; align-items:center; padding:13px 18px; border-top:1px solid var(--line);
  font-size:13.5px;
}
.linha-proj:first-child{border-top:0}
.linha-proj.cab{
  background:var(--surface); font-size:var(--t2); color:var(--muted); font-weight:500;
  padding-top:10px; padding-bottom:10px; border-bottom:1px solid var(--line-forte);
}
.linha-proj.clicavel{cursor:pointer; position:relative; padding-right:34px}
.linha-proj.clicavel:hover{background:var(--surface-2)}
.linha-proj.clicavel::after{
  content:""; position:absolute; right:16px; top:50%; width:6px; height:6px; margin-top:-4px;
  border-right:1.5px solid var(--muted); border-top:1.5px solid var(--muted);
  transform:rotate(45deg); opacity:0;
  transition:opacity var(--dur-1) var(--ease), right var(--dur-1) var(--ease);
}
.linha-proj.clicavel:hover::after{opacity:1; right:13px}
.linha-proj .nome{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.linha-proj .sub{font-size:12px; color:var(--muted); font-weight:400}
.barra{height:6px; background:var(--surface-2); border-radius:3px; overflow:hidden}
.barra i{display:block; height:100%; background:var(--forte); border-radius:3px}
.barra.completo i{background:var(--forte)}
.linha-proj .conta{font-family:var(--font-mono); font-size:12.5px; color:var(--texto-2)}
.linha-proj .direita{text-align:right}

/* ---- Feed --------------------------------------------------------------------- */
.feed{display:flex; flex-direction:column; gap:8px; max-width:760px}
.feed-item{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:12px 16px; cursor:pointer; text-align:left;
  display:flex; flex-direction:column; gap:4px; width:100%;
  transition:border-color var(--dur) var(--ease);
}
.feed-item:hover{border-color:var(--stone-300)}
.feed-linha{display:flex; align-items:baseline; gap:10px}
.feed-frase{flex:1; min-width:0; font-size:14px; color:var(--texto-2)}
.feed-frase b{color:var(--ink); font-weight:600}
.feed-quando{font-size:12px; color:var(--muted); white-space:nowrap}
.feed-detalhe{
  font-size:12.5px; color:var(--muted); overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-clamp:2;
}

/* ---- Versões e barra do editor --------------------------------------------------- */
.banner-versao{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  background:var(--accent-soft); color:var(--accent-ink); font-size:13.5px;
  border:1px solid var(--accent-linha); border-radius:var(--radius);
  padding:12px 16px; margin-bottom:14px;
}
details.anterior{
  border-bottom:1px solid var(--line); padding:10px 14px 12px; background:var(--surface);
  display:flex; flex-direction:column; gap:8px;
}
details.anterior summary{
  cursor:pointer; font-size:13px; font-weight:600; color:var(--muted); padding:4px 0; user-select:none;
}
details.anterior summary:hover{color:var(--ink)}
details.anterior[open] summary{margin-bottom:8px}
details.anterior .comentario{margin-bottom:8px}
.barra-editor{display:flex; gap:16px; padding:9px 18px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.criados{display:flex; flex-direction:column; gap:6px; margin-top:14px}
.criado{
  display:flex; align-items:center; gap:12px;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:9px 12px; font-size:13px;
}
.criado-titulo{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---- Carrossel / página --------------------------------------------------------- */
.palco-slides{display:flex; flex-direction:column}
.slide-img{width:100%; max-height:calc(100dvh - 280px); object-fit:contain; background:var(--stone-100)}
.slide-nav{
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:10px; background:var(--surface); border-top:1px solid var(--line);
}
.slide-contador{font-family:var(--font-mono); font-size:12.5px; color:var(--muted); min-width:56px; text-align:center}
.simples{display:flex; flex-direction:column; align-items:center; gap:14px; padding:36px 24px; text-align:center}
.simples-tipo{font-family:var(--font-mono); font-size:12px; color:var(--muted)}
.simples p{margin:0; color:var(--muted); font-size:13.5px; max-width:380px}
.lp-frame{width:100%; height:60dvh; border:0; border-top:1px solid var(--line); background:#fff}

/* ---- Carregando ------------------------------------------------------------------ */
.carregando{
  color:var(--muted); text-align:center; padding:70px 20px; font-size:14px;
  animation:pulsar 1.2s ease-in-out infinite alternate;
}
@keyframes pulsar{from{opacity:.45}to{opacity:1}}

/* ---- Diálogos --------------------------------------------------------------------- */
dialog{
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:26px; width:min(460px, calc(100vw - 40px)); box-shadow:var(--shadow);
}
dialog::backdrop{background:rgba(12,10,9,.32); backdrop-filter:blur(2px)}
dialog h3{margin:0 0 6px; font-family:var(--font-display); font-size:18px; font-weight:600}
dialog p{margin:0 0 16px; color:var(--muted); font-size:13.5px; line-height:1.5}
dialog label{display:block; font-size:12px; font-weight:600; color:var(--texto-2); margin:14px 0 6px}
dialog input[type=text], dialog input[type=url], dialog input[type=password], dialog input[type=date],
dialog select, dialog textarea.midia{
  width:100%; background:var(--surface); border:1px solid var(--line-forte);
  border-radius:var(--radius-sm); padding:11px 14px; outline:none; color:var(--ink); font-size:14px;
}
dialog input:focus, dialog select:focus, dialog textarea.midia:focus{border-color:var(--stone-500)}
dialog select{
  appearance:none; -webkit-appearance:none; padding-right:38px; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--stone-500) 50%),
                   linear-gradient(135deg,var(--stone-500) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
}
dialog textarea.midia{resize:vertical; line-height:1.5}
.dialog-acoes{display:flex; justify-content:flex-end; gap:10px; margin-top:22px; flex-wrap:wrap}
dialog .drive-btn{margin-top:14px; min-height:40px; font-size:13px}
dialog .drive-btn svg{opacity:.7}
.atalhos-nome{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap}

/* ---- Toast ------------------------------------------------------------------------- */
.toast{
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--forte); color:var(--forte-ink); font-weight:600; font-size:13.5px;
  border-radius:var(--radius-pill); padding:11px 20px; box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); z-index:90;
  max-width:calc(100vw - 40px); text-align:center;
}
.toast.visivel{opacity:1; transform:translateX(-50%) translateY(0)}

.faixa-demo{
  background:var(--accent-soft); color:var(--accent-ink); font-size:12.5px; text-align:center;
  padding:7px 14px; border-bottom:1px solid var(--accent-linha);
}

/* ---- Modo cliente ------------------------------------------------------------------- */
.modo-cliente .so-editor{display:none !important}

/* ---- Responsivo --------------------------------------------------------------------- */
@media (max-width: 1280px){
  /* a trilha é display:none acima de 820px, então a grade tem DOIS filhos:
     com três faixas, a lateral caía na faixa de 0 e o conteúdo na de 252px */
  .layout{grid-template-columns:252px minmax(0,1fr)}
  .layout.recolhida{grid-template-columns:0 minmax(0,1fr)}
  .conteudo{padding:22px 20px 60px}
}

@media (max-width: 1000px){
  .quadro{grid-auto-columns:min(320px, 84vw); gap:12px}
  .coluna{background:none; padding:0}
  .coluna-lista{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px}
  .linha-proj{grid-template-columns:minmax(0,1.4fr) 1fr 84px}
  .linha-proj .esconde-mobile{display:none}
}

/* Celular: a trilha vira barra, o painel vira gaveta */
@media (max-width: 820px){
  .layout, .layout.recolhida{grid-template-columns:1fr}
  .so-desktop{display:none !important}
  .trilha{
    display:flex; position:fixed; bottom:0; left:0; right:0; top:auto; z-index:50;
    height:auto; flex-direction:row; justify-content:space-around; align-items:center;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    border-right:0; border-top:1px solid var(--line);
  }
  .trilha-topo{display:none}
  .trilha-espaco{display:none}
  .trilha-lista{flex-direction:row; gap:4px; width:auto}
  /* barra de baixo: ícone em cima, nome miúdo embaixo */
  .trilha-btn{
    flex-direction:column; gap:2px; padding:4px 8px; min-height:auto;
    justify-content:center; align-items:center;
  }
  .trilha-rotulo{font-size:10px; font-weight:500; max-width:64px; text-align:center}
  .lateral{
    position:fixed; top:0; bottom:0; left:0; z-index:70; width:min(300px, 86vw);
    transform:translateX(-102%); transition:transform var(--dur) var(--ease);
    box-shadow:var(--shadow); height:100dvh;
  }
  .layout.recolhida .lateral{opacity:1; pointer-events:auto; padding:16px 14px}
  body.lateral-aberta .lateral{transform:none}
  body.lateral-aberta .veu{
    display:block; position:fixed; inset:0; z-index:60; background:rgba(12,10,9,.35);
  }
  .icone-btn.fechar-drawer{display:flex}
  .icone-btn.abrir-drawer{display:flex; margin-top:2px}
  .icone-btn.recolher-menu{display:none}
  .conteudo{padding:18px 16px 90px; min-width:0; overflow-x:hidden}
  /* painel não pode estourar a largura do celular */
  .dash-nums{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .num{padding:14px}
  .num .valor{font-size:26px}
  .dash-graficos{grid-template-columns:1fr}
  .tabela{overflow-x:auto}
  .linha-proj{grid-template-columns:minmax(0,1fr) 92px; gap:10px; padding:12px 14px}
  .linha-proj .direita{text-align:right}
  .g-colunas{height:110px}
  .g-linha-nome{width:64px}
  .g-linha-valor{width:56px}
}
@media (max-width: 960px){
  .rev{grid-template-columns:1fr; min-height:0}
  .rev-video{padding:14px}
  .palco video{max-height:56dvh}
  .rev-painel{border-left:0; border-top:1px solid var(--line); position:static; max-height:none}
  .lista-comentarios{max-height:none; overflow:visible}
  .painel-cab{position:sticky; top:57px; z-index:25; background:var(--surface)}
  .topo{padding:12px 14px; gap:8px; flex-wrap:wrap}
  /* o título não pode ser esmagado pelos chips: ganha a linha inteira de baixo */
  .titulo-peca{order:9; flex:1 0 100%; min-width:100%}
  .topo .btn.primario{margin-left:0}
  /* no celular o topo é estreito: o status e o prazo mandam mais que o resto */
  .topo .chip-captado{display:none}
  .topo .pill.substituido{display:none}
  .topo .titulo-video{font-size:14px}
  .home{padding:22px 16px 70px}
  .compositor{
    position:sticky; bottom:0; z-index:30;
    padding-bottom:calc(16px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 24px -14px rgba(12,10,9,.25);
  }
}

/* ---- Seleção em lote e projeto compartilhado ------------------------------------ */
.btn.sel-topo.ativo{background:var(--forte); color:var(--forte-ink); border-color:var(--forte)}

.card.selecionavel{cursor:pointer}
.card.selecionavel:hover{border-color:var(--stone-400)}
.card.marcado{border-color:var(--forte); box-shadow:0 0 0 2px var(--forte) inset, var(--shadow-sm)}
.card-marca{
  position:absolute; top:10px; right:10px; z-index:3;
  width:20px; height:20px; border-radius:6px;
  border:1.5px solid var(--stone-400); background:var(--surface);
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card-marca.on{
  background:var(--forte); border-color:var(--forte);
  background-image:linear-gradient(var(--forte),var(--forte));
}
.card-marca.on::after{
  content:""; position:absolute; left:6px; top:2px;
  width:5px; height:10px; border:solid var(--forte-ink);
  border-width:0 2px 2px 0; transform:rotate(42deg);
}

.barra-selecao{
  position:sticky; bottom:0; z-index:40;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:16px -2px 0; padding:12px 14px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:0 -10px 24px -14px rgba(12,10,9,.3);
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.barra-selecao.visivel{opacity:1; transform:none; pointer-events:auto}
.sel-conta{flex:1; min-width:140px; font-size:13.5px; font-weight:600; color:var(--ink)}

.lateral-linha .linha-compartilhar{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:6px; flex:none;
  color:var(--muted); opacity:0;
  transition:opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}
.lateral-linha:hover .linha-compartilhar,
.lateral-linha .linha-compartilhar:focus-visible{opacity:1}
.lateral-linha .linha-compartilhar:hover{background:var(--surface-2); color:var(--ink)}
.lateral-linha.ativo .linha-compartilhar{color:var(--forte-ink); opacity:.75}
@media (hover:none){ .lateral-linha .linha-compartilhar{opacity:.6} }

@media (max-width: 820px){
  .barra-selecao{
    position:fixed; left:12px; right:12px; bottom:calc(62px + env(safe-area-inset-bottom));
    margin:0; box-shadow:0 12px 32px -12px rgba(12,10,9,.45);
  }
  .barra-selecao .btn{flex:1; min-width:120px; justify-content:center}
}

.barra-selecao .rot-curto{display:none}
@media (max-width: 820px){
  .barra-selecao{gap:8px; padding:10px 12px}
  .barra-selecao .rot-longo{display:none}
  .barra-selecao .rot-curto{display:inline}
  .barra-selecao .btn{flex:1 1 0; min-width:0; padding:9px 10px; font-size:13px; justify-content:center}
  .sel-conta{flex:1 0 100%; min-width:0; font-size:12.5px; color:var(--muted); font-weight:500}
  .barra-selecao .mini-acao{flex:none}
}

/* no modo seleção o card só marca: o menu de ações sai da frente */
.card.selecionavel .card-menu{display:none}

/* ---- Topo do conteúdo em tela estreita ------------------------------------------ */
/* com muitos botões o título era espremido e quebrava letra por letra.
   Abaixo de 720px os botões ficam numa linha e o título ganha a largura toda. */
@media (max-width: 720px){
  .conteudo-topo{flex-wrap:wrap; align-items:center; row-gap:10px}
  .conteudo-topo .abrir-drawer{margin-right:auto}
  .conteudo-titulo{order:9; flex:1 0 100%; min-width:100%}
  .conteudo-titulo h1{font-size:1.5rem}
  .conteudo-titulo p{margin-top:4px}
  .conteudo-topo .btn{min-height:38px; padding:0 14px; font-size:13px}
  .conteudo-topo .pill{align-self:center}
}
@media (max-width: 640px){
  /* no celular o quadro é uma coluna só: o modo compacto não paga o espaço no topo */
  .densidade-topo{display:none}
}
@media (max-width: 420px){
  .conteudo-topo{gap:8px}
  .conteudo-topo .pill.substituido{display:none}   /* o selo Demo rouba a linha */
  .conteudo-titulo h1{font-size:1.4rem}
}

.anterior .abrir-anterior{margin:2px 0 10px}

/* atalhos de projeto no diálogo de nova peça */
.sugestoes{display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 2px}
.sugestao{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-pill);
  padding:5px 12px; font-size:12.5px; color:var(--texto-2); cursor:pointer;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.sugestao:hover{border-color:var(--stone-400); color:var(--ink)}
.sugestao.ativa{background:var(--forte); border-color:var(--forte); color:var(--forte-ink)}

/* ---- Quem pediu menos movimento recebe menos movimento -------------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .carregando{animation:none; opacity:.7}
}

/* ---- Esqueleto de carregamento ------------------------------------------- */
.esqueleto{
  border-radius:var(--radius-lg); border:1px solid var(--line);
  background:linear-gradient(100deg, var(--surface-2) 30%, var(--line) 50%, var(--surface-2) 70%);
  background-size:220% 100%; animation:brilho 1.4s var(--ease) infinite;
}
.card.esqueleto{height:184px}
.card.esqueleto.baixo{height:120px}
.esqueleto-palco{aspect-ratio:16/9; width:100%}
.esqueleto-linha{height:58px; margin-bottom:10px}
@keyframes brilho{ from{background-position:180% 0} to{background-position:-40% 0} }

/* ---- Recibo de aprovação -------------------------------------------------- */
.recibo{
  background:var(--surface-2); border:1px solid var(--forte); border-radius:var(--radius);
  padding:var(--e3); display:flex; flex-direction:column; gap:2px;
}
.recibo-titulo{font-family:var(--font-display); font-size:var(--t4); font-weight:600}
.recibo-nome{font-size:var(--t3); font-weight:600}
.recibo-data{font-family:var(--font-mono); font-size:var(--t1); color:var(--texto-2)}

/* Número que amarra a anotação ao marcador da linha do tempo */
.anot-num{
  font-family:var(--font-mono); font-size:10px; font-weight:500;
  width:19px; height:19px; line-height:17px; text-align:center; flex:none;
  border:1px solid var(--line-forte); border-radius:50%; color:var(--texto-2);
}
.comentario.resolvido .anot-num{opacity:.6}
.lista-comentarios details.anterior{margin-top:var(--e3)}

/* ---- Seletor de período do painel ---------------------------------------- */
.painel-periodo{display:flex; justify-content:flex-end; margin:-6px 0 var(--e3)}
.seg-periodo{background:var(--surface); border-color:var(--line)}
.seg-periodo button{padding:5px 14px}

/* ---- Selo de versão -------------------------------------------------------- */
.selo-versao{
  display:inline-block; vertical-align:2px; margin-left:7px;
  font-family:var(--font-mono); font-size:10px; font-weight:500;
  color:var(--texto-2); background:var(--surface-2);
  border:1px solid var(--line); border-radius:5px; padding:1px 6px;
}
.sigla-logo{object-fit:contain; background:var(--surface); border:1px solid var(--line)}

/* ---- Impressão: o resumo da revisão vira PDF pelo próprio navegador -------- */
@media print{
  .trilha, .lateral, .toast, .compositor, .comp-rodape, .linha3,
  .sino-topo, .novo-topo, .sel-topo, .abrir-drawer, .abrir-menu,
  .btn-voltar, .painel-cab .btn, .acoes-rapidas, .barra-selecao, .menu-card{display:none !important}
  .layout{grid-template-columns:1fr !important}
  body{background:#fff; font-size:11pt}
  .rev{display:block}
  .rev-video .palco{box-shadow:none; border:1px solid #ddd}
  .rev-painel{border:0; max-height:none; overflow:visible}
  .lista-comentarios{max-height:none; overflow:visible}
  .comentario{break-inside:avoid; border:1px solid #ddd; box-shadow:none}
  details.anterior{display:block}
  details.anterior[open], details.anterior{border:0}
  details.anterior > *{display:block}
  .card, .coluna{break-inside:avoid; box-shadow:none}
  a{text-decoration:none}
}

/* ---- Quadro compacto: cabe um dia de trabalho na tela ---------------------- */
.quadro.compacta .card-thumb{display:none}
.quadro.compacta .card-progresso{display:none}
.quadro.compacta .card-rodape{padding:5px var(--e3)}
.quadro.compacta .card-topo{padding:var(--e2) var(--e3) 0}
.quadro.compacta .card .card-corpo{padding:var(--e2) var(--e3)}
.quadro.compacta .card .card-corpo h3{font-size:var(--t3); -webkit-line-clamp:1}
.quadro.compacta .coluna-lista{gap:6px}

/* ---- Rolagem por coluna no desktop: a página para de crescer para sempre --- */
.coluna{display:flex; flex-direction:column; max-height:calc(100dvh - 210px)}
.coluna-cab{flex:none}
.coluna-lista{overflow-y:auto; flex:1; padding:2px; margin:-2px; scrollbar-width:thin}
@media (max-width: 820px){
  .coluna{max-height:calc(100dvh - 230px)}
}
.ver-todas{width:100%; text-align:center; padding:10px}

/* ---- Toast com Desfazer ---------------------------------------------------- */
.toast-acao{
  margin-left:14px; background:var(--forte-badge); border:0; cursor:pointer;
  color:var(--forte-ink); font-weight:700; font-size:13px; padding:4px 12px;
  border-radius:var(--radius-pill);
}

/* ---- Visão Lista ----------------------------------------------------------- */
.tabela-lista{margin-top:2px}
.linha-peca{
  display:grid; grid-template-columns:minmax(0,2fr) 150px 130px minmax(0,1fr);
  gap:14px; align-items:center; padding:12px 18px; border-top:1px solid var(--line);
  font-size:var(--t3); width:100%; text-align:left; background:none; border-left:0; border-right:0; border-bottom:0;
}
.linha-peca:first-child{border-top:0}
.linha-peca.cab{
  background:var(--surface); font-size:var(--t2); color:var(--muted); font-weight:500;
  padding-top:10px; padding-bottom:10px; border-bottom:1px solid var(--line-forte);
}
.linha-peca.clicavel{cursor:pointer; transition:background var(--dur-1) var(--ease)}
.linha-peca.clicavel:hover{background:var(--surface-2)}
.lp-nome{min-width:0}
.lp-nome b{display:inline; font-weight:600}
.lp-nome .lp-sub{display:block; font-size:var(--t1); color:var(--muted); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lp-quem{font-size:var(--t2); color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lp-vazio{color:var(--stone-300)}
@media (max-width: 820px){
  .linha-peca{grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:12px 14px}
}

/* ---- Visão A fazer --------------------------------------------------------- */
.afazer-grupo{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  margin-bottom:var(--e4); overflow:hidden;
}
.afazer-cab{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:var(--e3) var(--e4); background:none; border:0; cursor:pointer;
  border-bottom:1px solid var(--line);
}
.afazer-cab b{font-family:var(--font-display); font-size:var(--t4); font-weight:600}
.afazer-cab:hover{background:var(--surface-2)}
.afazer-sub{flex:1; min-width:0; font-size:var(--t1); color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.afazer-linha{
  display:flex; align-items:flex-start; gap:12px;
  padding:10px var(--e4); border-top:1px solid var(--line);
}
.afazer-linha:first-of-type{border-top:0}
.afazer-texto{flex:1; min-width:0; font-size:var(--t3); color:var(--ink); line-height:1.5}
.afazer-autor{font-size:var(--t1); color:var(--muted); white-space:nowrap; padding-top:3px}
.afazer-linha .mini-acao{flex:none}

/* ---- Folha de atalhos ------------------------------------------------------ */
.atalho-grade{display:grid; grid-template-columns:64px 1fr; gap:8px 14px; align-items:center; margin:6px 0 4px}
.atalho-grade kbd{
  font-family:var(--font-mono); font-size:var(--t2); text-align:center;
  background:var(--surface-2); border:1px solid var(--line-forte); border-bottom-width:2px;
  border-radius:6px; padding:3px 6px;
}
.atalho-grade span{font-size:var(--t3); color:var(--texto-2)}

/* ---- Seletor de versões no topo da peça ------------------------------------ */
.versoes{display:inline-flex; gap:4px; margin-top:3px}
.versao-chip{
  font-family:var(--font-mono); font-size:10px; font-weight:500;
  border:1px solid var(--line-forte); background:var(--surface); color:var(--texto-2);
  border-radius:5px; padding:1px 7px; cursor:pointer;
  transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.versao-chip:hover{background:var(--surface-2); color:var(--ink)}
.versao-chip.atual{background:var(--forte); border-color:var(--forte); color:var(--forte-ink); cursor:default}

/* visto pelo cliente: informação de editor, discreta no rodapé do card */
.card-visto{font-size:var(--t1); color:var(--muted); white-space:nowrap}
.card-visto.nunca{color:var(--texto-2); font-weight:600}

/* ---- Filtros do painel ------------------------------------------------------ */
.painel-filtros{
  display:flex; align-items:center; gap:var(--e2); flex-wrap:wrap;
  margin:-6px 0 var(--e4);
}
.painel-filtros .seg{margin-left:auto}
.filtro-sel{
  appearance:none; -webkit-appearance:none;
  background:var(--surface); border:1px solid var(--line-forte); border-radius:var(--radius-pill);
  color:var(--texto-2); font-size:var(--t2); font-weight:600;
  padding:7px 30px 7px 14px; cursor:pointer; max-width:220px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2378716c'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center; background-size:16px;
  transition:border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.filtro-sel:hover{border-color:var(--stone-400); color:var(--ink)}
.filtro-sel.ativo{background-color:var(--forte); border-color:var(--forte); color:var(--forte-ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E")}
:root[data-tema="escuro"] .filtro-sel.ativo{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230c0a09'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E")}
@media (max-width: 820px){
  .painel-filtros{gap:6px}
  .painel-filtros .seg{margin-left:0; flex:1 0 100%}
  .filtro-sel{flex:1; min-width:0; max-width:none}
}

/* ---- Folha de compartilhar -------------------------------------------------- */
.dialogo-compartilhar{width:min(480px, calc(100vw - 32px))}
.msg-preview{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--e3) var(--e4); margin:4px 0 6px;
}
.msg-texto{margin:0 0 6px; font-size:var(--t3); line-height:1.55; white-space:pre-line}
.msg-link{
  font-family:var(--font-mono); font-size:var(--t2); word-break:break-all;
  color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px;
}
:root[data-tema="escuro"] .msg-link{color:var(--accent-linha)}
.dialogo-compartilhar .dialog-acoes{flex-wrap:wrap}

/* ---- No ar: o rastro do pós-aprovação -------------------------------------- */
.pill.no-ar{background:var(--surface); border:1px solid var(--forte); color:var(--ink); font-weight:600}
.pill.no-ar.mini{font-size:10px; padding:1px 8px; white-space:nowrap}
.no-ar-linha{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.no-ar-info{font-size:var(--t2); color:var(--texto-2)}

/* ---- Visão Clientes --------------------------------------------------------- */
.clientes-acoes{display:flex; justify-content:flex-end; margin:-6px 0 var(--e4)}
.cliente-grupo{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  margin-bottom:var(--e4); overflow:hidden;
}
.cliente-cab{
  display:flex; align-items:center; gap:var(--e3); padding:var(--e3) var(--e4);
  border-bottom:1px solid var(--line);
}
.cliente-cab .sigla{
  width:32px; height:32px; border-radius:9px; flex:none;
  background:var(--forte); color:var(--forte-ink);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:14px;
}
.cliente-nome{flex:1; min-width:0}
.cliente-nome b{display:block; font-family:var(--font-display); font-size:var(--t4); font-weight:600}
.cliente-grupo .acesso-linha{border-top:1px solid var(--line); padding:10px var(--e4)}
.cliente-grupo .acesso-linha:first-of-type{border-top:0}
.cliente-grupo.pendencias{border-color:var(--accent-linha)}
.cliente-grupo .acessos-vazio{padding:var(--e3) var(--e4)}
@media (max-width: 640px){
  .cliente-cab{flex-wrap:wrap}
  .cliente-nome{flex:1 1 60%}
}

.btn.desativado{opacity:.55; cursor:help}
.btn.desativado:active{transform:none}

/* ---- Cinco colunas: produção e standby entram no fluxo ---------------------- */
.coluna.producao .coluna-cab, .coluna.standby .coluna-cab{opacity:.85}
.coluna.standby{background:transparent; border:1px dashed var(--line-forte)}
.pill.producao{background:var(--surface-2); border-color:var(--line-forte); color:var(--texto-2)}
.pill.standby{background:transparent; border:1px dashed var(--line-forte); color:var(--texto-2)}

/* botão de criar peça dentro da coluna */
.add-na-coluna{
  display:flex; align-items:center; justify-content:center; gap:6px;
  width:100%; padding:10px; border:0; border-radius:var(--radius);
  background:none; color:var(--muted); font-size:var(--t3); font-weight:600; cursor:pointer;
  transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.add-na-coluna:hover{background:var(--surface); color:var(--ink)}
.coluna-vazia.clicavel{cursor:pointer; width:100%; background:none}
.coluna-vazia.clicavel:hover{border-color:var(--stone-400); color:var(--ink)}
.vazio-cta{margin-top:8px; font-weight:600; color:var(--texto-2)}
.coluna-vazia.clicavel:hover .vazio-cta{color:var(--ink)}

/* bastão: quem cuida do card agora */
.card-resp{
  font-size:var(--t1); font-weight:600; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:6px; padding:1px 7px; white-space:nowrap;
  max-width:110px; overflow:hidden; text-overflow:ellipsis;
}

/* chips vazios do card: convite discreto de prazo e pessoa */
.chip-vazio{
  border:1px dashed var(--line-forte); background:none; border-radius:var(--radius-sm);
  color:var(--muted); font-size:var(--t1); font-weight:600; padding:2px 8px; cursor:pointer;
  transition:color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.chip-vazio:hover{color:var(--ink); border-color:var(--stone-400)}
.card-resp{cursor:pointer}
.card-resp.vazio{
  background:none; border-style:dashed; color:var(--muted); font-weight:600;
}
.card-resp.vazio:hover{color:var(--ink); border-color:var(--stone-400)}
.prazo.clicavel{cursor:pointer}
.prazo.clicavel:hover{border-color:var(--stone-400)}

.fechar-peca{flex:none; margin-left:2px}

/* Aprovado e Standby não podem ter a mesma cor no escuro */
:root[data-tema="escuro"] .g-pedaco.standby,
:root[data-tema="escuro"] .g-marca.standby{background:var(--stone-600)}
:root[data-tema="escuro"] .g-pedaco.producao,
:root[data-tema="escuro"] .g-marca.producao{background:var(--stone-300)}

/* 4. Visão Lista no celular: só as duas colunas que cabem */
@media (max-width: 820px){
  .linha-peca .esconde-mobile{display:none}
}

/* 17. Imprimir o Quadro: as colunas não podem ser cortadas */
@media print{
  .quadro{display:block; overflow:visible}
  .coluna{max-height:none; break-inside:avoid; margin-bottom:14px}
  .coluna-lista{overflow:visible; max-height:none}
  .add-na-coluna, .coluna-vazia.clicavel{display:none}
}

/* 20. alvo de toque dos chips novos */
@media (pointer: coarse){
  .chip-vazio, .card-resp, .versao-chip, .sugestao{min-height:32px; display:inline-flex; align-items:center}
}

/* selecionar a coluna inteira, no modo seleção */
.sel-coluna{
  margin-left:auto; background:none; border:1px solid var(--line-forte); border-radius:var(--radius-pill);
  color:var(--texto-2); font-size:var(--t1); font-weight:600; padding:3px 10px; cursor:pointer;
  transition:color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.sel-coluna:hover{color:var(--ink); border-color:var(--stone-400)}