/* GRW Coordenação Demandas — só os controles próprios da aba.
A tabela reaproveita as classes .gantt-* da aba Demandas. */
#coord-controls{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
/* Seletor de squad */
.coord-squads{display:flex;flex-wrap:wrap;gap:8px}
.coord-squad-pill{display:flex;flex-direction:column;align-items:flex-start;gap:1px;
padding:9px 14px;border:1px solid var(--border);border-radius:10px;
background:var(--surface);color:var(--muted);cursor:pointer;
font-family:var(--ws-font,inherit);text-align:left;
transition:border-color .18s var(--ws-ease,ease),color .18s,background .18s}
.coord-squad-pill strong{font-size:12px;font-weight:700;letter-spacing:.01em}
.coord-squad-pill span{font-size:10px;opacity:.75;white-space:nowrap}
.coord-squad-pill:hover{color:var(--text);border-color:var(--ws-accent,var(--neon))}
.coord-squad-pill.active{background:var(--ws-accent,var(--neon));
border-color:var(--ws-accent,var(--neon));color:var(--ws-on-accent,#fff)}
.coord-squad-pill.active span{opacity:.85}
.coord-squad-pill:focus-visible{outline:2px solid var(--ws-accent,var(--neon));outline-offset:2px}
/* Barra de navegação + opções */
.coord-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.coord-nav{display:flex;align-items:center;gap:8px}
.coord-nav button{padding:6px 12px;border:1px solid var(--border);border-radius:8px;
background:var(--surface);color:var(--text);cursor:pointer;font-size:11px;
font-family:'JetBrains Mono',monospace;transition:border-color .18s,color .18s}
.coord-nav button:hover{border-color:var(--ws-accent,var(--neon));color:var(--ws-accent,var(--neon))}
.coord-nav button:focus-visible{outline:2px solid var(--ws-accent,var(--neon));outline-offset:2px}
.coord-range{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);
padding:0 4px;white-space:nowrap}
/* Segmentados: Semana⇄Dia e Postagem⇄Prazo */
.coord-modes{display:flex;flex-wrap:wrap;gap:8px}
.coord-seg{display:inline-flex;border:1px solid var(--border);border-radius:8px;
overflow:hidden;background:var(--surface)}
.coord-seg button{padding:6px 13px;border:0;background:none;color:var(--muted);
cursor:pointer;font-size:11px;font-family:'JetBrains Mono',monospace;
transition:background .18s,color .18s}
.coord-seg button+button{border-left:1px solid var(--border)}
.coord-seg button:hover{color:var(--text)}
.coord-seg button.active{background:var(--ws-accent,var(--neon));
color:var(--ws-on-accent,#fff)}
.coord-seg button:focus-visible{outline:2px solid var(--ws-accent,var(--neon));
outline-offset:-2px}
/* Fim de semana na visão por dia — hachura discreta, como no Monday */
.coord-tbl th.coord-weekend{color:var(--muted);opacity:.7}
.coord-tbl td.coord-weekend{background:repeating-linear-gradient(45deg,
transparent,transparent 5px,rgba(127,127,127,.07) 5px,rgba(127,127,127,.07) 10px)}
.coord-opts{display:flex;flex-wrap:wrap;gap:14px}
.coord-opts label{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);
cursor:pointer;user-select:none}
.coord-opts input{cursor:pointer;accent-color:var(--ws-accent,var(--neon))}
.coord-opts label:hover{color:var(--text)}
/* Card compacto: tudo numa linha só.
Antes o badge de SLA vinha depois de um
, dobrando a altura de cada card —
numa célula com 20+ itens isso estica a linha e empurra as outras pessoas para
fora da tela. O texto usa ellipsis do CSS (que se adapta à largura da coluna)
em vez de corte no JS, que truncava cedo demais. */
.coord-pill{display:flex;align-items:center;gap:4px;padding:2px 5px;line-height:1.5;
/* O texto NÃO usa a cor do cliente. O .gantt-item-pill recebe `color:` inline, e a mesma cor clareada vira o fundo do card — ou seja,
texto colorido sobre fundo da mesma cor. Medido: 15 das 16 cores da paleta
reprovam no contraste 4.5:1 (a pior, #caf0f8, fica em 1.18:1, ilegível).
O cliente continua identificado pela borda esquerda, pelo fundo e pela
legenda; o nome usa a cor de texto normal e é legível nos dois temas. */
color:var(--text);
/* Fonte e largura andam juntas: medido em navegador, subir a fonte de 10px
para 12px sem mexer na largura derruba o texto visível de 20 para 15
caracteres, porque o .gantt-item-pill trava max-width:150px. Com o card
liberado e a coluna em 230px, dá 12px E 25 caracteres. O custo é mais
rolagem horizontal. */
font-size:12px;max-width:none;width:100%;box-sizing:border-box}
#coord-wrap{cursor:default} /* o grab é do pan da aba Demandas */
.coord-tbl .gantt-week-cell{min-width:230px;max-width:230px}
.coord-view-dia .gantt-week-cell{min-width:190px;max-width:190px}
.coord-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.coord-cli{opacity:.62}
/* Dia da semana no card (visão de semana). Sem caixa de fundo: a caixa comia
largura e competia visualmente com o chip de prazo. */
.coord-dia{flex:none;min-width:1.4em;text-align:right;font-weight:700;
font-size:.82em;opacity:.55}
/* Prazo em chip curto, no lugar do "🚨 vencido" de linha inteira.
Cores fixas e medidas: o âmbar sobre âmbar translúcido dava 1.58:1 e o branco
sobre #e5484d dava 3.91:1 — ambos abaixo de 4.5:1. Agora 5.62:1 e 7.44:1. */
.coord-sla{flex:none;padding:0 3px;border-radius:3px;font-size:.82em;font-weight:700;
line-height:1.4}
.coord-sla.over{background:#c62828;color:#fff}
.coord-sla.warn{background:#ffb020;color:#3d2b00}
/* Recolher pessoa.
ATENÇÃO: não usar position aqui. O .gantt-person-td já é position:sticky —
é o que mantém a coluna da pessoa visível ao rolar as semanas na horizontal.
Um `position:relative` para ancorar o botão anulava o sticky e o avatar sumia.
O botão entra como item do flex do .gantt-person-info. */
.coord-toggle{flex:none;border:0;background:none;color:var(--muted);cursor:pointer;
font-size:11px;padding:2px 1px;line-height:1;border-radius:4px;margin-left:-4px}
.coord-toggle:hover{color:var(--text)}
.coord-toggle:focus-visible{outline:2px solid var(--ws-accent,var(--neon));outline-offset:1px}
.coord-row-fechada .gantt-week-cell{height:34px}
.coord-row-fechada .gantt-count-dot{position:static;margin:0 auto}
/* Recolhida precisa se distinguir à primeira vista: só a altura menor confundia
com uma linha expandida que por acaso tem pouca coisa.
ATENÇÃO ao tema: este app NÃO usa `data-theme` nem segue o
`prefers-color-scheme` — ele alterna com a classe `body.light`, e o padrão é
escuro. Uma primeira versão daqui trocava a cor por media query do sistema e
pintava a linha de azul-escuro no tema claro de quem usa o macOS no escuro.
Por isso a cor aqui é um VÉU CINZA TRANSLÚCIDO: escurece de leve o fundo
claro e clareia de leve o escuro, sem precisar saber qual é o tema.
Vai em `background-image`, não em `background`, justamente para NÃO apagar o
`background-color` opaco da célula — a coluna da pessoa é sticky, e se ficar
transparente os cards passam por baixo dela ao rolar. */
.coord-row-fechada .gantt-week-cell,
.coord-row-fechada .gantt-person-td{
background-image:linear-gradient(rgba(127,127,127,.16),rgba(127,127,127,.16))}
.coord-row-fechada .gantt-person-name{opacity:.8}
.coord-row-fechada .coord-toggle{color:var(--ws-accent,var(--neon));opacity:.9}
/* O fim de semana tem hachura própria; as duas camadas convivem. */
.coord-row-fechada td.coord-weekend{background-image:
repeating-linear-gradient(45deg,transparent,transparent 5px,
rgba(127,127,127,.07) 5px,rgba(127,127,127,.07) 10px),
linear-gradient(rgba(127,127,127,.16),rgba(127,127,127,.16))}
/* "+N mais" dentro da célula */
.coord-mais{width:100%;margin-top:1px;padding:2px 4px;border:1px dashed var(--border);
border-radius:4px;background:none;color:var(--muted);cursor:pointer;
font-size:9px;font-family:'JetBrains Mono',monospace}
.coord-mais:hover{color:var(--text);border-color:var(--ws-accent,var(--neon))}
.coord-todas{padding:6px 12px;border:1px solid var(--border);border-radius:8px;
background:var(--surface);color:var(--muted);cursor:pointer;font-size:11px;
font-family:'JetBrains Mono',monospace}
.coord-todas:hover{color:var(--text);border-color:var(--ws-accent,var(--neon))}
/* Legenda de clientes — cor é por cliente, não por quadro: os 3 quadros
(Pauta, Conteúdo, Tráfego) compartilham a mesma cor. Clicar filtra. */
.coord-legenda{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.coord-cliente{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;
border:1px solid var(--border);border-radius:20px;background:var(--surface);
color:var(--muted);cursor:pointer;font-size:10.5px;
transition:color .15s,border-color .15s}
.coord-cliente:hover{color:var(--text)}
.coord-cliente.active{color:var(--text);border-color:currentColor;font-weight:600}
.coord-cliente:focus-visible{outline:2px solid var(--ws-accent,var(--neon));outline-offset:1px}
.coord-limpar{font-style:italic;opacity:.8}
.coord-bolinha{width:9px;height:9px;border-radius:50%;flex:none}
/* Tooltip próprio: o title nativo demora ~500ms e é texto puro */
.coord-tip{position:absolute;z-index:9999;max-width:340px;padding:9px 11px;
border:1px solid var(--border);border-radius:9px;background:var(--surface);
box-shadow:0 8px 24px rgba(0,0,0,.18);pointer-events:none;
font-family:var(--ws-font,inherit);line-height:1.45}
.coord-tip-nome{font-size:13px;font-weight:600;color:var(--text);margin-bottom:3px}
.coord-tip-cli{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.coord-tip-meta{font-size:11px;color:var(--muted);margin-top:3px;
font-family:'JetBrains Mono',monospace}
.coord-tip-meta .over{color:var(--danger,#e5484d)}
.coord-tip-meta .warn{color:var(--warn,#ffb020)}
.coord-tip-meta .ok{color:var(--ok,#5dcc8a)}
.coord-tip-dica{font-size:10px;color:var(--muted);opacity:.7;margin-top:5px;
padding-top:5px;border-top:1px solid var(--border)}
/* Dica de arrastar */
.coord-hint{font-size:10px;color:var(--muted);opacity:.85;line-height:1.5}
/* Aviso de demandas sem data */
.coord-nodate{font-size:11px;color:var(--warn);background:rgba(255,176,32,.08);
border:1px solid rgba(255,176,32,.28);border-radius:8px;padding:7px 12px;
font-family:'JetBrains Mono',monospace}
/* Arrastar cards (só admin/coordenador) */
.coord-draggable{cursor:grab}
.coord-draggable:active{cursor:grabbing}
.gantt-item-pill.coord-dragging{opacity:.4}
td.gantt-week-cell.coord-drop-target{outline:2px dashed var(--ws-accent,var(--neon));
outline-offset:-2px;background:rgba(1,67,95,.08)}
a.gantt-item-pill.coord-drop-target{box-shadow:0 -2px 0 0 var(--ws-accent,var(--neon))}
/* Enquanto a escrita no Monday está em curso */
.coord-busy{opacity:.6;pointer-events:none}
/* Papel da pessoa, abaixo do nome na coluna fixa */
.coord-role{display:block;font-size:9px;font-weight:400;color:var(--muted);
letter-spacing:.02em;margin-top:1px}
@media (max-width:720px){
.coord-bar{flex-direction:column;align-items:stretch}
.coord-squad-pill span{display:none}
}
/* Card cuja escrita no Monday ainda não confirmou. O arraste é otimista: o card
vai para o lugar novo na hora e a confirmação vem depois, então vale sinalizar
que ainda está em trânsito — se falhar, ele volta sozinho. */
.coord-emvoo{opacity:.55;font-style:italic}
/* Status do Monday no tooltip */
.coord-tip-status{display:inline-block;margin-top:4px;padding:1px 7px;border-radius:20px;
background:var(--surface2,rgba(127,127,127,.14));color:var(--text);
font-size:10.5px;font-weight:600}
/* Esforço estimado pela tag de tamanho (PP .5h · P 1h · M 3h · G 5h · GG 6h) */
.coord-horas{position:absolute;top:2px;right:4px;font-size:9px;font-weight:700;
color:var(--muted);font-family:'JetBrains Mono',monospace;opacity:.75}
.gantt-week-cell{position:relative}
.coord-horas-pessoa{opacity:.85}
.coord-tip-linha{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:4px}
.coord-tip-tam{display:inline-block;padding:1px 7px;border-radius:20px;
border:1px solid var(--border);color:var(--muted);font-size:10.5px;font-weight:600}
/* Meta de planejamento: carga estimada até a meta vs. capacidade restante.
A capacidade conta dias ÚTEIS de hoje até a meta × 8h, então encolhe sozinha
ao longo da semana — na quinta sobram 2 dias, não 5. */
.coord-meta{display:block;font-size:9px;font-weight:400;letter-spacing:.02em;
margin-top:2px;color:var(--muted);font-family:'JetBrains Mono',monospace}
.coord-meta b{font-weight:700;color:var(--text)}
.coord-meta span{opacity:.7}
.coord-meta.apertado b{color:var(--warn,#ffb020)}
.coord-meta.estourou b{color:var(--danger,#e5484d)}
.coord-meta.estourou{font-weight:600}
/* Coluna onde a meta cai */
.coord-col-meta{box-shadow:inset 2px 0 0 var(--ws-accent,var(--neon))}
.coord-meta-tag{display:block;font-size:8px;font-weight:700;letter-spacing:.04em;
text-transform:uppercase;color:var(--ws-accent,var(--neon));opacity:.9}
/* Coluna da pessoa: o texto transbordava.
A célula tem max-width:170px e nenhum overflow, e o avatar + o botão de
recolher são irmãos de flex — sobravam ~96px para um texto que precisa de
~135px. Correções: um pouco mais de largura, o bloco de texto podendo
encolher (min-width:0) e a meta em duas linhas em vez de uma longa. */
.coord-tbl .gantt-person-td{min-width:196px;max-width:196px;vertical-align:top;
/* A coluna da pessoa é sticky e os cards passam POR BAIXO dela ao rolar na
horizontal. Dois reforços, porque o sintoma (cards aparecendo sobre o nome)
tem duas causas possíveis e ambas são baratas de fechar:
1) fundo opaco explícito — `background-color`, e não `background`, para não
apagar o véu da linha recolhida, que vai em `background-image`;
2) empilhamento acima do conteúdo das células (que não declara z-index) e
ainda abaixo do cabeçalho, que é sticky no topo com z-index 8. */
background-color:var(--bg);
z-index:7}
.coord-tbl .gantt-person-info{align-items:flex-start;padding-top:2px}
.coord-tbl .gantt-person-name{flex:1;min-width:0;overflow-wrap:anywhere}
.coord-meta span{display:block;opacity:.7} /* "restam 8h" em linha própria */
/* Atualizar só este squad (mais rápido que o sync completo do header) */
.coord-nav button[data-coord-atualizar]{font-size:13px;line-height:1;padding:5px 9px}
.coord-nav button.girando{opacity:.5;pointer-events:none}
.coord-nav button.girando{animation:coord-gira 1s linear infinite}
@keyframes coord-gira{to{transform:rotate(360deg)}}
/* Tela cheia — o container inteiro da aba, para os controles irem junto.
O elemento em fullscreen fica preto por padrão em alguns navegadores, daí o
fundo explícito. A tabela ganha a altura toda menos o espaço dos controles. */
#tab-coordenacao:fullscreen,
#tab-coordenacao:-webkit-full-screen{
background:var(--bg,#f8fafc);padding:18px 20px;overflow-y:auto}
#tab-coordenacao:fullscreen .gantt-wrap,
#tab-coordenacao:-webkit-full-screen .gantt-wrap{max-height:calc(100vh - 210px)}
/* Com a legenda recolhida sobra mais altura ainda para o calendário */
#tab-coordenacao:fullscreen .coord-legenda,
#tab-coordenacao:-webkit-full-screen .coord-legenda{max-height:56px;overflow-y:auto}
/* Tipo do quadro (Pauta / Conteúdos / Tráfego Pago) no tooltip. Os 3 quadros de
um cliente dividem a mesma cor, então a cor não distingue de qual card veio. */
.coord-tip-quadro{margin-left:6px;padding:1px 6px;border-radius:20px;
border:1px solid var(--border);font-size:10px;opacity:.85;white-space:nowrap}
/* "⇄ N fora" — a pessoa também tem demanda em outro squad no mesmo período.
Os designers e editores são emprestados entre squads, e sem isto a agenda
deles parece folgada vista de dentro de um squad só. */
.coord-emprestado{display:inline-block;margin-top:2px;padding:1px 6px;border-radius:20px;
background:#ffb02022;border:1px solid #ffb02066;color:var(--text);
font-size:10px;font-weight:600;white-space:nowrap;cursor:help}
/* Atalho de visita: o coordenador abre outro squad para ver UMA pessoa do time
dele que foi emprestada. Visual distinto das pílulas de squad, porque não é
"outro squad que eu comando" — é uma espiada numa linha só. */
.coord-visita{border-style:dashed}
.coord-visita strong{font-weight:600}
.coord-voltar{border-style:dashed;opacity:.85}
.coord-emprestado{font-family:inherit}
button.coord-emprestado:hover{background:#ffb02038;border-color:#ffb020}
/* Check pessoal: "já fiz esta". É organização interna — não mexe no status do
Monday. Quadradinho antes do texto, do tamanho da fonte para não engordar o
card (uma célula chega a ter 20 deles empilhados). */
.coord-check{flex:none;width:13px;height:13px;border:1.5px solid var(--border);
border-radius:3px;display:inline-flex;align-items:center;justify-content:center;
font-size:10px;line-height:1;cursor:pointer;background:var(--surface);
color:var(--text);transition:background .15s,border-color .15s}
.coord-check:hover{border-color:var(--ws-accent,var(--neon))}
.coord-check.marcado{background:#2e9e5b;border-color:#2e9e5b;color:#fff;font-weight:700}
.coord-check:focus-visible{outline:2px solid var(--ws-accent,var(--neon));outline-offset:1px}
/* Feito continua visível (a pessoa quer ver o que já saiu), mas recua. */
.coord-pill[data-feito] .coord-txt{text-decoration:line-through;opacity:.55}
.coord-pill[data-feito]{opacity:.75}
/* Log de mudanças — quem mexeu em data, ordem ou check. Visível só para admin e
para a gerência (gestor sem carteira); a restrição real está nas regras do
RTDB, esta aqui é só a interface. */
.coord-log{margin-bottom:14px;border:1px solid var(--border);border-radius:10px;
background:var(--surface);overflow:hidden}
.coord-log-topo{display:flex;align-items:center;gap:14px;padding:9px 12px;
border-bottom:1px solid var(--border);font-size:12px}
.coord-log-topo strong{flex:1}
.coord-log-topo label{display:flex;align-items:center;gap:6px;color:var(--muted);
font-size:11px;cursor:pointer}
.coord-log-topo button{border:0;background:none;color:var(--muted);cursor:pointer;
font-size:13px;padding:2px 4px;border-radius:4px}
.coord-log-topo button:hover{color:var(--text)}
.coord-log-lista{max-height:260px;overflow-y:auto}
.coord-log-item{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;
padding:6px 12px;border-bottom:1px solid var(--border);font-size:11.5px}
.coord-log-item:last-child{border-bottom:0}
.coord-log-quando{flex:none;font-family:'JetBrains Mono',monospace;color:var(--muted);
font-size:10.5px}
.coord-log-quem{font-weight:700}
.coord-log-acao{padding:1px 7px;border-radius:20px;background:rgba(127,127,127,.14);
font-size:10px;white-space:nowrap}
.coord-log-data .coord-log-acao{background:#4da6ff2e}
.coord-log-check .coord-log-acao{background:#2e9e5b2e}
.coord-log-alvo{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.coord-log-det{color:var(--muted);font-size:10.5px}
.coord-log-squad{flex:none;color:var(--muted);font-size:10px;opacity:.8}
.coord-log-vazio{padding:14px 12px;color:var(--muted);font-size:11.5px}
.coord-todas.coord-log-on{border-color:var(--ws-accent,var(--neon));color:var(--text)}
.coord-log-alvo a{color:inherit;text-decoration:none;border-bottom:1px dotted var(--border)}
.coord-log-alvo a:hover{color:var(--ws-accent,var(--neon));border-bottom-color:currentColor}
.coord-log-cli{color:var(--muted)}
/* Bolinha de "está com o dash aberto". Fica na borda do avatar, com um anel da
cor do fundo para se destacar de qualquer foto. */
.coord-avatar{position:relative;display:inline-flex;flex:none}
.coord-avatar.online::after{content:'';position:absolute;right:-1px;bottom:-1px;
width:9px;height:9px;border-radius:50%;background:#22c55e;
border:2px solid var(--bg);box-sizing:content-box}
/* Demanda que já saiu do Monday mas continua na fila da pessoa até o
coordenador fechar o dia dela. Borda tracejada para dizer "não está mais
atribuída", sem sumir. */
.coord-pill[data-solto]{border-left-style:dashed}
.coord-soltar{flex:none;width:13px;height:13px;display:inline-flex;align-items:center;
justify-content:center;border-radius:3px;font-size:10px;line-height:1;cursor:pointer;
color:var(--muted);border:1px solid transparent;margin-left:2px;opacity:.5}
.coord-pill:hover .coord-soltar{opacity:1}
.coord-soltar:hover{color:#c62828;border-color:#c6282855;background:#c6282814}
.coord-soltar:focus-visible{outline:2px solid var(--ws-accent,var(--neon));outline-offset:1px}