/* ═══════════════════════════════════════════════════════════════════════
   MYDESK — ROADMAPS
   ═══════════════════════════════════════════════════════════════════════
   A tela é uma CAMADA sobre o quadro do grupo: o papel de parede continua
   aparecendo ATRAVÉS dos painéis, e é isso que a liga ao workspace em vez de
   parecer outro aplicativo.

   O PAINEL É VIDRO FOSCO, e levou três tentativas para chegar aqui:

     1. camada e painéis translúcidos, sem desfoque no painel — sobre um fundo
        em VÍDEO, o movimento passava nítido sob as letras e tudo ficou lavado;
     2. tudo opaco — o texto ficou legível e o workspace sumiu, o que não era o
        pedido: sobravam 18px de moldura, já cobertos de tinta;
     3. o desfoque DENTRO do painel. Nas duas primeiras havia `backdrop-filter`,
        mas na camada de fora, atrás de painéis opacos — onde ele não filtrava
        nada. É a peça que faltava.

   Assim o papel de parede chega como MANCHA DE COR, não como detalhe brigando
   com o texto. O tingimento roxo é o que faz um pôr do sol, uma foto azul ou
   um vídeo qualquer chegarem com a mesma temperatura.

   Referência: na arte conceitual, a "montanha" laranja atrás da linha do tempo
   não é um desenho — é o próprio papel de parede passando pelo vidro.

   A identidade é a mesma dos outros painéis: Syne nos títulos, Inter no texto,
   raio de 12–16px, borda de 1px em branco a 8%, e a cor do painel no selo.
   O roxo é dos Roadmaps, como o verde é do Estoque e o teal dos Clientes.
   ═══════════════════════════════════════════════════════════════════════ */

#rd-view{
  position:fixed;inset:0;z-index:1500;display:none;
  /* ── O DESFOQUE VAI NO PAINEL, NAO NA CAMADA ─────────────────────────
     Errei isto três vezes, e sempre pelo mesmo motivo: eu tratava
     "ver o workspace" e "ler o texto" como uma escolha entre dois, quando são
     duas camadas diferentes.

     Camada translúcida + painel translúcido: o vídeo do papel de parede passa
     nítido por baixo das letras e tudo fica lavado. Camada opaca: o workspace
     some — e some de verdade, porque o único lugar por onde ele apareceria
     eram os 18px de moldura, já cobertos por 82% de tinta.

     O que resolve é VIDRO FOSCO: o painel é translúcido E tem o desfoque nele
     próprio. Aí o papel de parede continua visível e colorido através do
     painel, mas chega como mancha suave em vez de detalhe competindo com o
     texto. Enquanto o `backdrop-filter` esteve só aqui, ele não filtrava nada
     do que estava atrás dos painéis — porque os painéis eram opacos.

     Aqui em cima fica só um véu leve, para o quadro não brigar com a leitura. */
  background:
    radial-gradient(80% 55% at 50% 0%, rgba(124,58,237,.13), transparent 70%),
    rgba(6,6,10,.5);
  padding:18px;box-sizing:border-box;
  animation:rdEntra .22s cubic-bezier(.16,1,.3,1) both;
}
#rd-view.visible{display:flex;}
@keyframes rdEntra{from{opacity:0;}to{opacity:1;}}

.rd-painel{
  display:flex;gap:14px;width:100%;height:100%;min-height:0;
  font-family:'Inter',sans-serif;color:rgba(240,240,240,.82);
}

/* ── Barra lateral ─────────────────────────────────────────────────────── */
/* A lateral é a parte MAIS FECHADA da arte: quase sólida, porque é texto denso
   e listas curtas. O papel de parede aparece por ela só como um fundo de cor,
   sem forma. É o corpo, ao lado, que é vidro de verdade. */
.rd-lado{
  width:264px;flex-shrink:0;display:flex;flex-direction:column;gap:12px;
  background:rgba(13,13,19,.86);
  backdrop-filter:blur(24px) saturate(130%);
  -webkit-backdrop-filter:blur(24px) saturate(130%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;padding:16px 14px;overflow-y:auto;
}
.rd-lado-topo{padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.06);}
.rd-grupo-nome{font-family:'Syne',sans-serif;font-size:.98rem;font-weight:800;color:#f0f0f0;}
.rd-grupo-papel{font-size:.68rem;color:rgba(240,240,240,.35);margin-top:2px;}
.rd-avatares{display:flex;gap:-4px;margin-top:9px;}
.rd-av{
  width:26px;height:26px;border-radius:50%;margin-right:-6px;
  background:linear-gradient(135deg,#a855f7,#6366f1);border:2px solid #15151a;
  display:flex;align-items:center;justify-content:center;
  font-size:.68rem;font-weight:700;color:#fff;
}
.rd-av-mais{background:rgba(255,255,255,.12);color:rgba(240,240,240,.6);}
/* A FOTO DE PERFIL quando existe; o gradiente com a inicial é o que sobra sem
   ela. `object-fit:cover` porque foto de perfil raramente é quadrada, e
   esticar deforma o rosto. */
.rd-av{overflow:hidden;}
.rd-av img{width:100%;height:100%;object-fit:cover;display:block;}
.rd-av-mini{
  width:18px;height:18px;margin-right:-5px;border-width:1.5px;
  border-color:rgba(20,20,24,.9);font-size:.55rem;
}
.rd-av-mini.on{border-color:#10b981;}

/* O distintivo do mês de destino, enquanto se arrasta. */
.rd-destino{
  position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);
  font-size:.6rem;font-weight:700;white-space:nowrap;pointer-events:none;
  background:rgba(20,20,26,.97);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:2px 9px;color:#f0f0f0;
  font-variant-numeric:tabular-nums;z-index:6;
}

.rd-lado-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.rd-lado-cab h3{margin:0;font-family:'Syne',sans-serif;font-size:.92rem;font-weight:800;color:#f0f0f0;}

.rd-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;flex:1;}
.rd-item{
  display:flex;align-items:center;gap:8px;padding:10px 11px;border-radius:11px;
  background:rgba(255,255,255,.03);border:1px solid transparent;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.rd-item:hover{background:rgba(255,255,255,.06);}
/* O aberto usa a cor do painel, e não só um fundo mais claro: com cinco
   roadmaps parecidos, "qual está aberto" precisa ser lido de relance. */
.rd-item.ativo{background:rgba(168,85,247,.13);border-color:rgba(168,85,247,.34);}
.rd-item-txt{flex:1;min-width:0;}
.rd-item-nome{font-size:.79rem;font-weight:600;color:#f0f0f0;overflow-wrap:anywhere;}
.rd-item-sub{font-size:.67rem;color:rgba(240,240,240,.34);margin-top:2px;overflow-wrap:anywhere;}

.rd-selo{
  flex-shrink:0;font-size:.62rem;font-weight:600;padding:3px 8px;border-radius:999px;
  background:color-mix(in srgb,var(--c) 18%,transparent);color:var(--c);
  border:1px solid color-mix(in srgb,var(--c) 34%,transparent);white-space:nowrap;
}
/* Reserva para navegador sem color-mix: o selo perde a cor própria e fica
   neutro, mas continua legível — nunca invisível. */
@supports not (background:color-mix(in srgb,red 10%,transparent)){
  .rd-selo{background:rgba(255,255,255,.08);color:rgba(240,240,240,.7);border-color:rgba(255,255,255,.14);}
}

.rd-sobre{
  border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:11px 12px;
  background:rgba(255,255,255,.02);
}
.rd-sobre-tit{font-size:.72rem;font-weight:600;color:rgba(240,240,240,.6);margin-bottom:5px;}
.rd-sobre p{margin:0;font-size:.68rem;line-height:1.55;color:rgba(240,240,240,.35);}

/* ── Corpo ─────────────────────────────────────────────────────────────── */
/* ── O CORPO É VIDRO, E É AQUI QUE O WORKSPACE APARECE ──────────────────
   Levei três tentativas para enxergar isto na arte conceitual: aquela
   "montanha" laranja atrás da linha do tempo NÃO é um enfeite desenhado — é o
   papel de parede do quadro passando pelo painel. O fundo do workspace é o
   elemento visual dominante da tela, e eu vinha pintando por cima dele.

   Por isso o corpo é translúcido de verdade (62%) com um tingimento ROXO: o
   roxo é a cor do painel, e é ele que faz um pôr do sol, uma foto azul ou um
   vídeo qualquer chegarem com a mesma temperatura — sem ele, cada papel de
   parede daria uma tela de uma cor.

   O desfoque fica AQUI, no painel, e não na camada de fora: é o que transforma
   o vídeo em mancha de cor em vez de detalhe competindo com o texto. Foi a
   peça que faltou nas versões anteriores — havia blur, mas atrás de um painel
   opaco, onde ele não filtrava nada. */
.rd-corpo{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:12px;
  background:
    linear-gradient(165deg, rgba(88,28,135,.30), rgba(24,10,44,.44) 55%, rgba(10,8,20,.52)),
    rgba(18,12,30,.42);
  backdrop-filter:blur(15px) saturate(150%);
  -webkit-backdrop-filter:blur(15px) saturate(150%);
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;padding:16px 18px;overflow-y:auto;
}

.rd-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;}
.rd-topo-txt{min-width:0;}
.rd-topo h2{
  margin:0;font-family:'Syne',sans-serif;font-size:1.28rem;font-weight:800;color:#f0f0f0;
  display:flex;align-items:center;gap:8px;overflow-wrap:anywhere;
}
.rd-topo p{margin:4px 0 0;font-size:.76rem;color:rgba(240,240,240,.4);overflow-wrap:anywhere;}
.rd-topo-acoes{display:flex;gap:7px;flex-shrink:0;}
.rd-estrela{
  background:none;border:0;cursor:pointer;font-size:1rem;line-height:1;
  color:rgba(240,240,240,.22);transition:color .15s;padding:0;
}
.rd-estrela:hover,.rd-estrela.on{color:#fcd34d;}

.rd-btn{
  border:1px solid rgba(255,255,255,.1);border-radius:9px;padding:7px 13px;
  background:rgba(255,255,255,.04);color:rgba(240,240,240,.72);
  font-family:'Inter',sans-serif;font-size:.75rem;font-weight:600;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;white-space:nowrap;
}
.rd-btn:hover{background:rgba(255,255,255,.09);color:#f0f0f0;}
.rd-btn.primario{background:rgba(168,85,247,.18);border-color:rgba(168,85,247,.38);color:#e9d5ff;}
.rd-btn.primario:hover{background:rgba(168,85,247,.3);}
.rd-btn.perigo{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.22);color:#fca5a5;}
.rd-btn.perigo:hover{background:rgba(239,68,68,.2);}
.rd-btn.pequeno{padding:5px 10px;font-size:.7rem;}

.rd-barra{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.rd-vistas{display:flex;gap:4px;background:rgba(255,255,255,.04);border-radius:10px;padding:3px;}
.rd-vista{
  border:0;background:none;border-radius:8px;padding:6px 13px;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.73rem;font-weight:600;
  color:rgba(240,240,240,.42);transition:background .15s,color .15s;
}
.rd-vista.ativo{background:rgba(168,85,247,.2);color:#e9d5ff;}
.rd-barra-acoes{display:flex;gap:7px;}

/* ── A LINHA DO TEMPO ──────────────────────────────────────────────────
   `--rd-raia` é a largura da coluna dos nomes, e vale para o cabeçalho, para
   cada raia e para os marcos: três medidas separadas desalinhariam a régua na
   primeira mudança de fonte. */
.rd-linha{--rd-raia:132px;display:flex;flex-direction:column;min-width:0;}
/* A régua gruda no alto ao rolar, e por isso precisa de fundo próprio — mas
   um `#101014` chapado aqui abriria uma tira opaca atravessando o vidro. */
.rd-linha-cab{display:flex;gap:10px;position:sticky;top:0;z-index:2;
  background:linear-gradient(180deg, rgba(20,14,32,.92), rgba(20,14,32,.72));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding-bottom:8px;}
.rd-linha-cab .rd-raia-nome{width:var(--rd-raia);flex-shrink:0;}

/* ── A RÉGUA ────────────────────────────────────────────────────────────
   Uma BARRA, e não uma fileira de rótulos soltos. Ela virou um controle — gira
   com a roda do mouse, arrasta com o dedo — e precisa parecer uma superfície
   onde se pode pegar: sem a moldura, ninguém tenta girar nada ali.

   Duas fileiras dentro dela: a grossa em cima (o pai — "T3 2026", "13/set/26")
   e a fina embaixo (a divisão do momento). */
.rd-regua{
  flex:1;min-width:0;position:relative;height:42px;overflow:hidden;
  border-radius:10px;border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.03);
  cursor:grab;user-select:none;-webkit-user-select:none;
  /* O dedo arrasta a régua; sem isto ele rolaria a página no meio do gesto. */
  touch-action:none;
}
.rd-regua:focus-visible{outline:2px solid rgba(168,85,247,.7);outline-offset:2px;}
/* A classe do arrasto vive na RAIZ: a régua é refeita a cada quadro do gesto,
   e uma classe nela morreria no primeiro pixel. */
#rd-view.rd-pan .rd-regua{cursor:grabbing;background:rgba(255,255,255,.055);}
.rd-regua-fila{position:absolute;left:0;right:0;height:21px;}
.rd-regua-topo{top:0;border-bottom:1px solid rgba(255,255,255,.07);}
.rd-regua-base{bottom:0;}
/* Coluna ABSOLUTA, com left e width em % — a mesma conta das barras. Célula de
   flex não serviria: a vista quase nunca começa numa borda de mês, e a
   primeira coluna teria de mentir a largura para caber. */
.rd-col{
  position:absolute;top:0;bottom:0;box-sizing:border-box;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  border-left:1px solid rgba(255,255,255,.06);
  font-size:.66rem;font-weight:600;color:rgba(240,240,240,.5);white-space:nowrap;
}
.rd-regua-topo .rd-col{font-size:.7rem;font-weight:700;color:rgba(240,240,240,.66);}
/* Cortada pela borda: o rótulo encosta à esquerda em vez de se centralizar num
   mês que só aparece pela metade — centralizado, ele apontaria para o lugar
   errado justamente na coluna que já está incompleta. */
.rd-col.cortada{justify-content:flex-start;padding-left:6px;}
/* Sábado e domingo sombreados: numa régua de dias é o que dá o ritmo da
   leitura — sem eles são catorze letras iguais. */
.rd-col.fds{background:rgba(255,255,255,.035);}
.rd-col.hoje{background:rgba(168,85,247,.18);color:#e9d5ff;}

/* ── O COMANDO DA RÉGUA ─────────────────────────────────────────────────
   Vive no canto que sobra à esquerda do cabeçalho, o único pedaço dele que não
   mede tempo. Existe porque a roda do mouse não é a resposta para todo mundo:
   no celular não há roda, e no teclado o alvo precisa ser clicável. */
.rd-zoom{gap:4px !important;}
.rd-zoom-esc{
  font-size:.6rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(240,240,240,.4);
}
.rd-zoom-bts{display:flex;flex-wrap:wrap;gap:3px;}
.rd-zoom-bt{
  width:22px;height:22px;border-radius:6px;padding:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04);
  color:rgba(240,240,240,.6);font:inherit;font-size:.74rem;line-height:1;
  cursor:pointer;transition:background .14s,color .14s,border-color .14s;
}
.rd-zoom-bt:hover:not(:disabled){
  background:rgba(168,85,247,.2);border-color:rgba(168,85,247,.45);color:#e9d5ff;
}
.rd-zoom-bt:disabled{opacity:.3;cursor:default;}

.rd-linha-corpo{display:flex;flex-direction:column;gap:9px;position:relative;}
/* ── A GRADE ────────────────────────────────────────────────────────────
   A régua desenhando para baixo. UMA camada para todas as raias, e não uma por
   raia: parando em cada borda, o olho perde a vertical justamente no vão entre
   duas — que é onde ele mais precisa dela para comparar duas barras distantes.
   Ela desce da fileira DE CIMA; um risco por dia deixaria a pista rajada. */
.rd-grade{
  position:absolute;top:0;bottom:0;left:calc(var(--rd-raia) + 10px);right:0;
  pointer-events:none;
}
.rd-grade i{
  position:absolute;top:0;bottom:0;width:0;
  border-left:1px solid rgba(255,255,255,.045);
}
.rd-raia{display:flex;gap:10px;align-items:stretch;min-width:0;}
.rd-raia-nome{
  width:var(--rd-raia);flex-shrink:0;display:flex;flex-direction:column;
  justify-content:center;gap:1px;padding:6px 0;
}
/* O ícone leva a cor da raia, e é o que amarra o nome às barras dela — na arte
   é assim que se lê "esta faixa é Plataforma" sem passar pelo texto. */
.rd-raia-ico{font-size:.86rem;color:var(--c,#c4b5fd);line-height:1.2;}
.rd-raia-nome b{font-size:.75rem;color:rgba(240,240,240,.78);}
.rd-raia-nome small{font-size:.63rem;color:rgba(240,240,240,.3);}

/* A pista é o sistema de coordenadas das barras: `relative` aqui é o que faz o
   `left:%` de cada iniciativa medir a janela, e não a tela. */
.rd-pista{
  position:relative;flex:1;min-width:0;min-height:38px;
  display:flex;flex-direction:column;gap:5px;justify-content:center;
  border-radius:10px;background:rgba(255,255,255,.02);padding:5px 0;
}
/* ── A FILA ────────────────────────────────────────────────────────────
   Cada andar é uma faixa própria, e as barras dele são ABSOLUTAS dentro dela:
   é isso que as deixa lado a lado. Antes cada barra era um item de coluna e
   ocupava uma linha inteira só para si — uma raia com quatro iniciativas
   virava quatro andares, mesmo com prazos que não se cruzam.
   Quantos andares existem é decisão do motor (`empilharRaia`). */
/* `min-height` e não `height`: a barra é absoluta e não empurra a fila, então
   quem dá a altura final é `ajustarAlturas`, depois de medir o texto quebrado.
   Com altura fixa aqui, um título de três linhas ficaria recortado. */
.rd-fila{position:relative;min-height:30px;width:100%;}
/* O risco do "hoje" atravessa a raia inteira, atrás das barras. */
.rd-hoje{
  position:absolute;top:0;bottom:0;width:0;
  border-left:1px dashed rgba(255,255,255,.28);pointer-events:none;
}
.rd-ini{
  position:absolute;top:0;min-height:30px;border-radius:8px;overflow:hidden;
  /* Estreita demais deixa de ser alvo: um mês numa janela de doze dá 8%, e em
     tela pequena isso é um risco de poucos pixels que ninguém acerta. */
  min-width:30px;
  border:1px solid color-mix(in srgb,var(--c) 46%,transparent);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--c) 30%,transparent),
    color-mix(in srgb,var(--c) 17%,transparent));
  display:flex;align-items:center;padding:4px 9px;box-sizing:border-box;
  font-family:'Inter',sans-serif;text-align:left;
  /* `grab` porque a barra se arrasta para replanejar; `touch-action` impede o
     dedo de rolar a página no meio do gesto. */
  cursor:grab;touch-action:none;
  transition:filter .15s,box-shadow .15s;
}
.rd-ini:hover{filter:brightness(1.22);box-shadow:0 4px 16px rgba(0,0,0,.45);}
.rd-ini.arrastando{
  cursor:grabbing;z-index:5;transition:none;
  filter:brightness(1.3);box-shadow:0 8px 24px rgba(0,0,0,.6);
}
/* O preenchimento é o progresso, e fica ATRÁS do texto: por cima ele apagaria
   metade do título justamente nas iniciativas mais adiantadas. */
.rd-ini-fill{
  position:absolute;left:0;top:0;bottom:0;
  background:color-mix(in srgb,var(--c) 34%,transparent);pointer-events:none;
}
/* ── O TÍTULO INTEIRO, DENTRO DA BARRA ─────────────────────────────────
   A largura é o PRAZO e não pode crescer para o texto caber. A ALTURA não
   significa nada na régua — então é ela que cede: o título quebra em linhas e
   a barra engorda. Quem mede e iguala as alturas da fila é `ajustarAlturas`.

   Jogar o rótulo para FORA quando não cabia (o que muitos Gantt fazem) ficou
   pior de ler: na mesma raia, uma barra com o texto dentro e outra com o texto
   ao lado não deixam saber de relance a que barra cada nome pertence.

   `anywhere` e não `break-word` porque a barra pode ficar com 30px: sem ele,
   uma palavra longa transbordaria em vez de quebrar. */
.rd-ini-corpo{
  position:relative;display:flex;flex-direction:column;justify-content:center;
  gap:2px;flex:1;min-width:0;
}
.rd-ini-txt{
  min-width:0;font-size:.72rem;font-weight:600;color:#f5f5f7;line-height:1.3;
  overflow-wrap:anywhere;
}
/* A faixa de indicadores. A porcentagem vai para a DIREITA (`margin-left:auto`)
   e as etiquetas ficam à esquerda: com tudo colado no começo, o olho tinha de
   ler a linha inteira para achar o número que ele procura. */
.rd-ini-meta{
  display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap;
  margin-top:1px;
}
.rd-ini-pct{margin-left:auto;}

.rd-ini-gente{position:relative;display:flex;flex-shrink:0;}
.rd-ini-gente i{
  width:18px;height:18px;border-radius:50%;margin-right:-5px;font-style:normal;
  background:linear-gradient(135deg,#a855f7,#6366f1);border:1.5px solid rgba(20,20,24,.9);
  display:flex;align-items:center;justify-content:center;font-size:.55rem;font-weight:700;color:#fff;
}
.rd-ini-pct{
  position:relative;flex-shrink:0;font-size:.64rem;font-weight:700;
  color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums;
}
@supports not (background:color-mix(in srgb,red 10%,transparent)){
  .rd-ini{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);}
  .rd-ini-fill{background:rgba(255,255,255,.13);}
}

/* ── Marcos ────────────────────────────────────────────────────────────── */
.rd-marcos{display:flex;gap:10px;margin-top:14px;padding-top:12px;
  border-top:1px solid rgba(255,255,255,.07);}
.rd-marcos .rd-raia-nome{width:var(--rd-raia);flex-shrink:0;}
.rd-marcos .rd-pista{min-height:44px;background:none;}
.rd-marco{
  position:absolute;transform:translateX(-50%);display:flex;align-items:center;gap:5px;
  background:none;border:0;cursor:pointer;padding:0;color:rgba(240,240,240,.7);
  font-family:'Inter',sans-serif;white-space:nowrap;
}
.rd-marco:hover{color:#f0f0f0;}
.rd-marco-flag{font-size:.9rem;color:#a855f7;}
.rd-marco-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25;}
.rd-marco-txt b{font-size:.68rem;font-weight:600;}
.rd-marco-txt small{font-size:.6rem;color:rgba(240,240,240,.32);}

/* ── Lista ─────────────────────────────────────────────────────────────── */
.rd-tabela-wrap{overflow-x:auto;}
.rd-tabela{width:100%;border-collapse:collapse;font-size:.75rem;min-width:640px;}
.rd-tabela th{
  text-align:left;font-size:.63rem;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:rgba(240,240,240,.3);
  padding:0 10px 8px;border-bottom:1px solid rgba(255,255,255,.07);
}
.rd-tabela th.num,.rd-tabela td.num{text-align:right;font-variant-numeric:tabular-nums;}
.rd-tabela td{padding:10px;border-bottom:1px solid rgba(255,255,255,.04);}
.rd-tabela tbody tr{cursor:pointer;transition:background .13s;}
.rd-tabela tbody tr:hover{background:rgba(255,255,255,.04);}
.rd-atraso{
  font-size:.6rem;font-weight:700;color:#fca5a5;background:rgba(239,68,68,.14);
  border-radius:999px;padding:2px 7px;
}

/* ── A INICIATIVA ATRASADA, NA LINHA DO TEMPO ────────────────────────────
   A barra continua sendo da cor da RAIA — pintá-la de vermelho apagaria a que
   raia ela pertence, que é a informação que a linha do tempo existe para dar.
   O atraso entra pela BORDA e por uma etiqueta, que são camadas livres. É de
   propósito que sejam duas: a cor sozinha exclui quem não a distingue, e a
   etiqueta sozinha some numa barra estreita.

   O vermelho é o mesmo do `.rd-atraso` da aba Lista — duas telas dizendo a
   mesma coisa com cores diferentes parecem duas coisas diferentes. */
.rd-ini.atrasada{
  border-color:rgba(239,68,68,.72);
  box-shadow:0 0 0 1px rgba(239,68,68,.26),0 4px 14px rgba(239,68,68,.14);
}
.rd-ini-atraso{
  flex-shrink:0;font-size:.6rem;font-weight:700;color:#fca5a5;
  background:rgba(239,68,68,.18);border-radius:999px;padding:1px 6px;
  white-space:nowrap;
}

/* ── O DESFAZER DO ARRASTO ───────────────────────────────────────────────
   Flutua sobre o painel, ancorado embaixo e ao centro: é resposta a um gesto
   que acabou de acontecer e precisa ser visto sem tirar os olhos da linha do
   tempo. Fica ACIMA do rodapé de KPIs em vez de cobri-lo — é justamente o
   placar que a pessoa confere depois de mexer num prazo. */
.rd-desfazer{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:6;display:flex;align-items:center;gap:12px;max-width:min(560px,86vw);
  padding:9px 10px 9px 15px;border-radius:12px;
  background:rgba(18,14,28,.94);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 44px rgba(0,0,0,.6);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  animation:rdDesfazerEntra .2s cubic-bezier(.16,1,.3,1) both;
}
@keyframes rdDesfazerEntra{
  from{opacity:0;transform:translate(-50%,8px);}
  to{opacity:1;transform:translate(-50%,0);}
}
.rd-desfazer-txt{
  font-size:.74rem;color:rgba(240,240,240,.72);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rd-desfazer-btn{
  flex-shrink:0;border:1px solid rgba(168,85,247,.4);border-radius:9px;
  background:rgba(168,85,247,.18);color:#e9d5ff;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.73rem;font-weight:700;padding:6px 13px;
  transition:background .15s;
}
.rd-desfazer-btn:hover{background:rgba(168,85,247,.34);}
@media (prefers-reduced-motion:reduce){.rd-desfazer{animation:none;}}

/* ── Rodapé de progresso ───────────────────────────────────────────────── */
.rd-rodape{
  display:grid;gap:10px;margin-top:auto;padding-top:14px;
  grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
  border-top:1px solid rgba(255,255,255,.07);
}
.rd-kpi{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  border-radius:12px;padding:11px 13px;display:flex;flex-direction:column;gap:2px;min-width:0;
}
.rd-kpi span{font-size:.65rem;color:rgba(240,240,240,.36);}
.rd-kpi b{font-family:'Syne',sans-serif;font-size:1.32rem;font-weight:800;color:#f0f0f0;line-height:1.1;}
.rd-kpi small{font-size:.62rem;color:rgba(240,240,240,.28);}
.rd-kpi-largo{grid-column:span 2;}
.rd-prog{height:5px;border-radius:99px;background:rgba(255,255,255,.07);margin-top:6px;overflow:hidden;}
.rd-prog i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#a855f7,#6366f1);transition:width .3s;}
.rd-dica{
  grid-column:span 2;background:rgba(168,85,247,.07);border:1px solid rgba(168,85,247,.15);
  border-radius:12px;padding:11px 13px;
}
.rd-dica-tit{font-size:.7rem;font-weight:600;color:rgba(240,240,240,.6);margin-bottom:3px;}
.rd-dica p{margin:0;font-size:.66rem;line-height:1.5;color:rgba(240,240,240,.36);}

/* ── Vazios ────────────────────────────────────────────────────────────── */
.rd-vazio{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;padding:40px 20px;
}
.rd-vazio-ico{font-size:2.4rem;opacity:.5;}
.rd-vazio h3{margin:0;font-family:'Syne',sans-serif;font-size:1.1rem;color:#f0f0f0;}
.rd-vazio p{margin:0 auto;max-width:400px;font-size:.78rem;line-height:1.6;color:rgba(240,240,240,.38);}
.rd-vazio-min{padding:26px 6px;text-align:center;font-size:.74rem;color:rgba(240,240,240,.3);}
/* O aviso de "sem iniciativa" OCUPA o espaço da linha do tempo em vez de ficar
   uma tira fina no alto: a captura mostrava meia tela vazia embaixo dele, o
   que parece tela quebrada e não roadmap novo. `flex:1` sobre o corpo em
   coluna é o que estica; centralizar dentro é o que põe a frase onde o olho
   já está procurando. */
.rd-sem-ini{
  flex:1;display:flex;align-items:center;justify-content:center;
  border:1px dashed rgba(255,255,255,.1);border-radius:12px;min-height:180px;
}

/* ── Modal ─────────────────────────────────────────────────────────────── */
.rd-modal{width:min(460px,94vw);padding:0 !important;max-height:calc(100dvh - 32px);overflow-y:auto;}
.rd-modal-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 10px;}
.rd-modal-topo h3{margin:0;font-family:'Syne',sans-serif;font-size:1rem;font-weight:800;color:#f0f0f0;}
.rd-modal-x{
  width:28px;height:28px;border:0;border-radius:8px;cursor:pointer;flex-shrink:0;
  background:rgba(255,255,255,.05);color:rgba(240,240,240,.4);font-size:.78rem;
}
.rd-modal-x:hover{background:rgba(255,255,255,.1);color:#f0f0f0;}
.rd-modal-corpo{padding:0 20px 4px;}
.rd-modal-pe{
  display:flex;justify-content:flex-end;gap:8px;padding:14px 20px 18px;margin-top:12px;
  border-top:1px solid rgba(255,255,255,.05);
}
.rd-campo{display:block;margin-bottom:10px;}
.rd-campo > span{display:block;margin-bottom:5px;font-size:.68rem;color:rgba(240,240,240,.42);}
.rd-campo input,.rd-campo select{
  width:100%;box-sizing:border-box;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);border-radius:9px;padding:9px 11px;
  font-family:'Inter',sans-serif;font-size:.78rem;color:#f0f0f0;outline:0;transition:border-color .16s;
}
.rd-campo input:focus,.rd-campo select:focus{border-color:rgba(168,85,247,.55);}
.rd-grade2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.rd-nota{margin:8px 0 0;font-size:.7rem;line-height:1.55;color:rgba(240,240,240,.35);}
.rd-perigo{color:#fca5a5 !important;font-weight:600;}

/* ── Delegar: escolher, não digitar ────────────────────────────────────── */
.rd-gente{
  display:flex;flex-direction:column;gap:4px;max-height:184px;overflow-y:auto;
  border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:5px;
  background:rgba(255,255,255,.02);
}
.rd-gente-op{
  display:flex;align-items:center;gap:9px;width:100%;box-sizing:border-box;
  padding:6px 9px;border-radius:8px;cursor:pointer;text-align:left;
  background:none;border:1px solid transparent;color:rgba(240,240,240,.62);
  font-family:'Inter',sans-serif;font-size:.75rem;transition:background .13s,border-color .13s;
}
.rd-gente-op:hover{background:rgba(255,255,255,.05);}
.rd-gente-op.on{
  background:rgba(168,85,247,.14);border-color:rgba(168,85,247,.34);color:#f0f0f0;
}
.rd-gente-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rd-gente-tag{
  flex-shrink:0;font-size:.58rem;padding:1px 6px;border-radius:999px;
  background:rgba(255,255,255,.07);color:rgba(240,240,240,.42);
}
.rd-gente-tag.fora{background:rgba(245,158,11,.14);color:#fcd34d;}
/* O ✓ ocupa lugar sempre, mesmo invisível: aparecendo só quando marcado, ele
   empurraria o nome e a linha inteira dançaria a cada clique. */
.rd-gente-check{flex-shrink:0;font-size:.72rem;color:#c4b5fd;opacity:0;}
.rd-gente-op.on .rd-gente-check{opacity:1;}
.rd-gente .rd-av{width:24px;height:24px;margin-right:0;font-size:.64rem;}

/* ── Checklist, o mesmo gesto da nota ──────────────────────────────────── */
.rd-cl-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.rd-cl-cab b{font-size:.65rem;font-weight:700;color:rgba(240,240,240,.5);
  font-variant-numeric:tabular-nums;}
.rd-cl{display:flex;flex-direction:column;gap:3px;margin-bottom:7px;}
.rd-cl-item{display:flex;align-items:center;gap:7px;}
.rd-cl-box{
  flex-shrink:0;width:19px;height:19px;border-radius:6px;cursor:pointer;padding:0;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.03);
  color:transparent;font-size:.66rem;line-height:1;transition:background .13s,color .13s;
}
.rd-cl-box:hover{border-color:rgba(168,85,247,.5);}
.rd-cl-item.feito .rd-cl-box{background:#a855f7;border-color:#a855f7;color:#fff;}
.rd-cl-item .rd-cl-txt{flex:1;min-width:0;padding:6px 9px;font-size:.75rem;}
/* Riscado E apagado: só o risco some numa lista longa, e só a opacidade não diz
   "concluído" — as duas juntas é como a nota já mostra. */
.rd-cl-item.feito .rd-cl-txt{text-decoration:line-through;color:rgba(240,240,240,.36);}
.rd-cl-x{
  flex-shrink:0;width:22px;height:22px;border:0;border-radius:6px;cursor:pointer;padding:0;
  background:none;color:rgba(240,240,240,.24);font-size:.68rem;transition:background .13s,color .13s;
}
.rd-cl-x:hover{background:rgba(239,68,68,.16);color:#fca5a5;}

/* ── O contador de etapas, na barra e na lista ─────────────────────────
   Etiqueta com fundo próprio, e não texto solto: sobre uma barra colorida o
   texto solto some, e o `☑` que havia antes era um emoji do sistema — desenho
   diferente em cada plataforma, sempre maior que o resto da linha. O ✓ agora é
   um traço em SVG, que herda a cor e acompanha o tamanho da fonte. */
.rd-ini-cl,.rd-cl-selo{
  display:inline-flex;align-items:center;gap:4px;flex-shrink:0;
  font-size:.6rem;font-weight:700;white-space:nowrap;line-height:1;
  padding:2px 6px;border-radius:5px;
  background:rgba(0,0,0,.26);color:rgba(255,255,255,.8);
  font-variant-numeric:tabular-nums;
}
.rd-ini-cl svg,.rd-cl-selo svg{
  width:9px;height:9px;flex-shrink:0;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.rd-cl-selo{background:rgba(255,255,255,.08);border-radius:999px;padding:2px 7px;}
.rd-ini-cl.completo,.rd-cl-selo.completo{
  background:rgba(16,185,129,.22);color:#6ee7b7;
}

/* ── A equipe na barra lateral ─────────────────────────────────────────── */
.rd-equipe{display:flex;align-items:center;gap:9px;margin-top:9px;flex-wrap:wrap;}
.rd-equipe-txt{font-size:.63rem;color:rgba(240,240,240,.34);}
/* Anel verde para quem está online, e transparente para quem não está — a
   largura da borda não muda, senão os avatares pulam quando alguém entra. */
.rd-av{border-color:#15151a;}
.rd-av.on{border-color:#10b981;}

/* O DISTINTIVO NÃO PODE CRESCER AO VIRAR BOTÃO.
   `<span>` não tem estilo próprio; `<button>` tem — fonte do sistema, padding e
   line-height do navegador. Trocar a tag sem desfazer isso engordou o
   distintivo na barra. `font:inherit` traz a tipografia do `.ws-active-badge`
   de volta, e `line-height:1.35` casa com a altura dos outros botões da barra. */
.ws-badge-btn{
  border:1px solid rgba(20,184,166,.35);cursor:pointer;
  font:inherit;font-size:.7rem;font-weight:600;line-height:1.35;
  padding:3px 10px;margin:0;
}

/* ═══════════════════════════════════════════════════════════════════════
   TABLET E CELULAR
   ═══════════════════════════════════════════════════════════════════════
   A barra lateral vira uma faixa em cima: em 900px ela come metade da tela e
   a linha do tempo, que é o conteúdo, fica sem espaço para comparar prazos. */
@media (max-width:900px){
  #rd-view{padding:10px;}
  .rd-painel{flex-direction:column;gap:10px;}
  .rd-lado{width:auto;max-height:38dvh;}
  .rd-linha{--rd-raia:96px;}
  .rd-kpi-largo,.rd-dica{grid-column:span 2;}
}
@media (max-width:560px){
  /* Abaixo disto a raia com nome ao lado não cabe: o nome vai para cima da
     pista, que passa a usar a largura inteira. */
  .rd-linha{--rd-raia:0px;}
  .rd-raia{flex-direction:column;gap:3px;}
  .rd-raia-nome{width:auto;flex-direction:row;align-items:center;gap:6px;padding:0;}
  .rd-linha-cab .rd-raia-nome,.rd-marcos .rd-raia-nome{display:none;}
  /* Sem coluna de nomes, a grade começa na borda. */
  .rd-grade{left:0;}
  /* O comando fica: sem roda de mouse, ele é o único caminho para o zoom.
     Vira uma faixa em cima da régua, deitado. */
  .rd-linha-cab{flex-direction:column;gap:6px;}
  .rd-linha-cab .rd-zoom{
    display:flex;flex-direction:row;align-items:center;justify-content:space-between;
    width:100%;padding:0;
  }
  .rd-rodape{grid-template-columns:1fr 1fr;}
  .rd-topo{flex-direction:column;gap:10px;}
  .rd-topo-acoes{width:100%;}
}

/* ── QUEM CUIDA E ATÉ QUANDO ───────────────────────────────────────────────
   Os dois campos ficam na mesma linha do item e encolhem antes do texto: o
   que se lê primeiro é o que precisa ser feito, não quem foi marcado. */
.rd-cl-quem{flex:0 0 auto;width:26px;height:26px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.22);
  color:rgba(240,240,240,.45);font-size:.62rem;font-weight:700;letter-spacing:.02em;
  display:flex;align-items:center;justify-content:center;
  transition:background .14s,border-color .14s,color .14s;}
.rd-cl-quem:hover{border-color:rgba(168,85,247,.6);color:#e9d5ff;
  background:rgba(168,85,247,.18);}
.rd-cl-quem.on{border-style:solid;border-color:rgba(168,85,247,.75);
  background:rgba(168,85,247,.26);color:#f3e8ff;}

/* O TEXTO TEM PISO. Ele é `flex:1`, e `flex:1` com `min-width:0` encolhe até
   sumir quando um vizinho reivindica a linha — foi exatamente o que aconteceu
   quando havia um campo de data aqui: 20px de texto contra 414px de data,
   medidos no navegador. Regra escrita não é regra aplicada; o piso é o que
   garante que o item continue legível aconteça o que acontecer ao lado. */
.rd-cl-item .rd-cl-txt{flex:1 1 auto;min-width:120px;}

/* Z-INDEX ACIMA DO MODAL. Medido no navegador: o popup nascia com 70 e o
   modal da iniciativa vive em 1500 — ele era criado no lugar certo, com o
   tamanho certo, e ficava ATRÁS. O clique parecia não fazer nada, que é a
   pior forma de um recurso falhar: sem erro, sem aviso, sem pista.
   1600 é acima do modal e abaixo da janela de chat, que é 1600 também e
   nunca divide a tela com este popup. */
.rd-cl-pop{position:fixed;z-index:1600;width:182px;max-height:250px;overflow:auto;
  padding:5px;border-radius:11px;
  background:#1b1030;border:1px solid rgba(168,85,247,.3);
  box-shadow:0 16px 44px rgba(0,0,0,.55);}
.rd-cl-pop button{display:block;width:100%;padding:7px 9px;border:none;cursor:pointer;
  border-radius:7px;background:none;color:#e7e7ef;font:inherit;font-size:.74rem;
  text-align:left;}
.rd-cl-pop button:hover{background:rgba(168,85,247,.22);}
.rd-cl-pop button.on{background:rgba(168,85,247,.32);color:#fff;}
.rd-cl-pop i{display:block;padding:7px 9px;color:rgba(240,240,240,.45);
  font-size:.7rem;font-style:normal;}

/* O selo do cartão avisa que existe item vencido lá dentro — sem isso é
   preciso abrir cada iniciativa para descobrir. */
.rd-cl-selo.vencido{border-color:rgba(239,68,68,.55);background:rgba(239,68,68,.16);
  color:#fecaca;}
@media (max-width:620px){
  /* Espremido, o prazo vira só o campo e o item quebra em duas linhas — o que
     não pode é o texto do item sumir para caber a data. */
  .rd-cl-item{flex-wrap:wrap;}
  .rd-cl-item .rd-cl-txt{flex:1 1 100%;order:-1;}
}

/* ── O CARTÃO MÍNIMO ───────────────────────────────────────────────────────
   Toda barra é um cartão com o título dentro, como as de cima. Abaixo de
   190px o título de duas palavras quebrava uma letra por linha e esticava a
   raia inteira — 30px de largura por 278px de altura, medido.

   Quando o cartão precisa crescer para caber o rótulo, ele passa a ocupar
   mais espaço do que a iniciativa dura. O traço marca onde a duração
   VERDADEIRA termina: gráfico que estica uma barra sem avisar mente sobre o
   dado, e a dica do ponteiro continua trazendo o período exato. */
.rd-ini{min-width:190px;}
.rd-ini.esticada::after{content:'';position:absolute;top:5px;bottom:5px;
  left:var(--fim-real,100%);width:2px;border-radius:2px;
  background:color-mix(in srgb,var(--c) 55%,#fff);
  box-shadow:0 0 7px color-mix(in srgb,var(--c) 70%,transparent);
  opacity:.85;pointer-events:none;}
@media (max-width:620px){
  /* Numa tela estreita a pista inteira tem pouco mais que 300px: 190 de
     mínimo empilhariam as barras umas sobre as outras. */
  .rd-ini{min-width:140px;}
}