/* ============================================================================
   DNA 2026 · Painel: telas Visão geral, Prazos, Cliente e Atividade (T6).
   Carregado DEPOIS de painel.css: usa os mesmos tokens (--dna-*, --p-*).
   Hierarquia por tamanho e posição, não por cartões iguais em grade:
   progresso e bloqueios à esquerda em superfície própria; o resto em coluna.
   ========================================================================== */

.vg-apoio { font-size: 13px; line-height: 1.5; color: var(--dna-cinza-1); }
.vg-mais {
  display: inline-flex; align-items: center; min-height: var(--p-alvo); justify-self: start;
  font: 600 13px/1.2 var(--dna-f-texto); color: var(--dna-offwhite);
  text-decoration: underline; text-decoration-color: var(--dna-filete); text-underline-offset: 4px;
  transition: text-decoration-color var(--dna-d-1) var(--dna-ease);
}
.vg-mais:hover { text-decoration-color: var(--dna-vermelho); }

/* etiqueta de coluna: ponto na cor da coluna + rótulo */
.vg-coluna { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.vg-coluna::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 2px; background: var(--cor-coluna); }

.vg-conta {
  min-width: 22px; height: 22px; padding: 0 7px; display: inline-grid; place-items: center;
  border-radius: var(--dna-raio-pilula); font: 500 12px/1 var(--dna-f-mono); font-variant-numeric: tabular-nums;
}
.vg-conta--espera { background: var(--p-espera-veu); box-shadow: inset 0 0 0 1px var(--p-espera-filete); color: var(--p-espera); }

/* --- Visão geral ---------------------------------------------------------- */

.vg { max-width: 1320px; }
.vg-cabeca {
  display: grid; gap: var(--dna-e-3);
  padding: var(--dna-e-4) 0 var(--dna-e-6); margin-bottom: var(--dna-e-6);
  border-bottom: 1px solid var(--dna-filete-suave);
}
.vg-cabeca .contexto { max-width: 70ch; }

.vg-grade {
  display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
  gap: var(--dna-e-7) var(--dna-e-8); align-items: start;
}
.vg-principal { display: grid; gap: var(--dna-e-5); min-width: 0; }
.vg-lateral { display: grid; min-width: 0; }
.vg-lateral > .vg-bloco + .vg-bloco { margin-top: var(--dna-e-6); padding-top: var(--dna-e-6); border-top: 1px solid var(--dna-filete-suave); }
.vg-bloco { display: grid; gap: var(--dna-e-4); min-width: 0; align-content: start; }
.vg-subtitulo { display: flex; align-items: center; gap: var(--dna-e-2); font: 600 13px/1.3 var(--dna-f-texto); color: var(--dna-cinza-1); }
.vg-subtitulo__n { font: 500 12px/1 var(--dna-f-mono); color: var(--dna-cinza-2); }

/* progresso: a única superfície elevada da tela */
.vg-progresso {
  gap: var(--dna-e-5);
  padding: var(--dna-e-5) var(--dna-e-6) var(--dna-e-4);
  border: 1px solid var(--dna-filete-suave); border-radius: var(--dna-raio-4);
  background: var(--p-raia);
}
.vg-progresso__linha { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--dna-e-3) var(--dna-e-6); }
.vg-pct { display: flex; align-items: baseline; font: 500 96px/.86 var(--dna-f-mono); letter-spacing: -.04em; color: var(--dna-branco); font-variant-numeric: tabular-nums; }
.vg-pct__sinal { margin-left: 4px; font-size: 40px; letter-spacing: 0; color: var(--dna-cinza-1); }
.vg-progresso__texto { padding-bottom: 6px; font-size: 15px; line-height: 1.55; color: var(--dna-offwhite); }
.vg-progresso__texto b { font-weight: 600; color: var(--dna-branco); }
.vg-progresso__texto .vg-apoio { font-size: 13.5px; }
.vg-barra { height: 14px; }

.vg-legenda { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px var(--dna-e-3); margin: 0 calc(var(--dna-e-3) * -1); }
.vg-legenda__item {
  display: flex; align-items: center; gap: var(--dna-e-2);
  min-height: var(--p-alvo); padding: 0 var(--dna-e-3);
  border-radius: var(--dna-raio-2); text-decoration: none;
  transition: background-color var(--dna-d-1) var(--dna-ease);
}
.vg-legenda__item:hover { background: var(--p-campo-hover); }
.vg-legenda__cor { width: 10px; height: 10px; flex: none; border-radius: 2px; background: var(--cor-coluna); }
.vg-legenda__rotulo { min-width: 0; font-size: 13.5px; color: var(--dna-cinza-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--dna-d-1) var(--dna-ease); }
.vg-legenda__item:hover .vg-legenda__rotulo { color: var(--dna-offwhite); }
.vg-legenda__n { margin-left: auto; font-size: 13px; color: var(--dna-offwhite); }

/* o que trava: tingido de ouro (esperando alguém) */
.vg-trava {
  padding: var(--dna-e-5) var(--dna-e-6);
  border: 1px solid var(--p-espera-filete); border-radius: var(--dna-raio-4);
  background: var(--p-espera-veu);
}
.vg-trava .secao-titulo .icone { color: var(--p-espera); }
.vg-trava .vg-apoio { margin-top: calc(var(--dna-e-2) * -1); }
.vg-trava .vazio { border-color: var(--p-espera-filete); }
.vg-trava__lista { display: grid; }
.vg-trava__linha {
  display: grid; grid-template-columns: minmax(120px, 13em) minmax(0, 1fr) auto; align-items: center; gap: var(--dna-e-4);
  min-height: 52px; padding: 0 var(--dna-e-3); margin: 0 calc(var(--dna-e-3) * -1);
  border-top: 1px solid var(--p-espera-filete); text-decoration: none;
  transition: background-color var(--dna-d-1) var(--dna-ease);
}
.vg-trava__lista li:last-child .vg-trava__linha { border-bottom: 1px solid var(--p-espera-filete); }
.vg-trava__linha:hover { background: rgba(204,154,87,.08); }
.vg-trava__quem { font-weight: 600; font-size: 14px; color: var(--dna-offwhite); }
.vg-trava__pergunta { min-width: 0; font-size: 13.5px; color: var(--dna-cinza-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-trava__n {
  min-width: 26px; height: 24px; padding: 0 8px; display: inline-grid; place-items: center;
  border-radius: var(--dna-raio-pilula); background: rgba(204,154,87,.14);
  font: 600 12.5px/1 var(--dna-f-mono); color: var(--p-espera);
}
.vg-trava__acao { justify-self: start; }
.vg-trava__acao .icone { color: var(--p-espera); }

/* prazos */
.vg-prazos { padding: var(--dna-e-2) 0 0; }
.vg-prazos__grupo { display: grid; gap: var(--dna-e-2); min-width: 0; }
.vg-prazos__grupo--atrasado .vg-subtitulo { color: var(--p-perigo); }
.vg-prazos__grupo--atrasado .vg-subtitulo__n { color: var(--p-perigo); }
.vg-prazos__vazio { padding: var(--dna-e-2) 0; }
.vg-prazos__ok { margin-left: auto; font: 500 12.5px/1 var(--dna-f-texto); color: var(--p-ok); }
.vg-prazos__lista { display: grid; }
.vg-prazo {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: var(--dna-e-3);
  min-height: 56px; padding: 8px var(--dna-e-2); margin: 0 calc(var(--dna-e-2) * -1);
  border-top: 1px solid var(--dna-filete-suave); border-radius: var(--dna-raio-1); text-decoration: none;
  transition: background-color var(--dna-d-1) var(--dna-ease);
}
.vg-prazo:hover { background: var(--p-campo-hover); }
.vg-prazo__data { font-size: 12.5px; color: var(--dna-cinza-1); }
.vg-prazo__corpo { display: grid; gap: 3px; min-width: 0; }
.vg-prazo__titulo { font-weight: 600; font-size: 14px; line-height: 1.35; color: var(--dna-offwhite); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-prazo__meta { display: flex; flex-wrap: wrap; gap: 2px var(--dna-e-3); font-size: 12.5px; color: var(--dna-cinza-2); }
.vg-prazo__dias { font-size: 12.5px; color: var(--dna-cinza-1); white-space: nowrap; }
.vg-prazo[data-situacao="hoje"] .vg-prazo__dias { color: var(--dna-branco); }
.vg-prazo[data-situacao="atrasado"] .vg-prazo__dias,
.vg-prazo[data-situacao="atrasado"] .vg-prazo__data { color: var(--p-perigo); }

/* por frente */
.vg-frentes__lista { display: grid; }
.vg-frente {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(56px, auto); align-items: center; gap: 6px var(--dna-e-3);
  min-height: var(--p-alvo); padding: 8px var(--dna-e-2); margin: 0 calc(var(--dna-e-2) * -1);
  border-radius: var(--dna-raio-2); text-decoration: none;
  transition: background-color var(--dna-d-1) var(--dna-ease);
}
.vg-frente:hover { background: var(--p-campo-hover); }
.vg-frente__nome { min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--dna-offwhite); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-frente__n { font-size: 12.5px; color: var(--dna-cinza-1); }
.vg-frente__prazo { font-size: 12px; color: var(--dna-cinza-2); text-align: right; white-space: nowrap; }
.vg-frente__barra { grid-column: 1 / -1; grid-row: 2; }
.vg-frente[data-completa] .vg-frente__nome { color: var(--dna-cinza-1); font-weight: 500; }
.vg-frente[data-completa] .barra-fina > span { background: var(--p-ok); }
.vg-frente[data-completa] .vg-frente__prazo { color: var(--p-ok); }

/* comercial */
.vg-comercial__lista { display: grid; }
.vg-comercial__linha {
  display: flex; align-items: center; justify-content: space-between; gap: var(--dna-e-3);
  min-height: 56px; padding: 8px 0; border-top: 1px solid var(--dna-filete-suave);
}
.vg-comercial__linha:first-child { border-top: 0; padding-top: 0; }
.vg-comercial__linha dt { display: grid; gap: 2px; min-width: 0; }
.vg-comercial__rotulo { font-size: 13.5px; font-weight: 600; color: var(--dna-offwhite); }
.vg-comercial__linha dt .vg-apoio { font-size: 12px; color: var(--dna-cinza-2); }
.vg-comercial__linha dd { margin: 0; display: flex; align-items: center; gap: var(--dna-e-3); flex: none; }
.vg-comercial__valor { font-size: 14.5px; color: var(--dna-branco); }
.vg-status {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px;
  border-radius: var(--dna-raio-pilula); font: 600 12px/1 var(--dna-f-texto);
  background: var(--p-espera-veu); box-shadow: inset 0 0 0 1px var(--p-espera-filete); color: var(--p-espera);
}
.vg-status[data-status="pago"] { background: rgba(138,255,120,.08); box-shadow: inset 0 0 0 1px rgba(138,255,120,.28); color: var(--p-ok); }
.vg-status-sel { min-width: 116px; color: var(--p-espera); font-weight: 600; }
.vg-status-sel[data-status="pago"] { color: var(--p-ok); }

/* ritmo (gamificação leve) */
.vg-ritmo { gap: var(--dna-e-3); }
.vg-ritmo__nivel { display: flex; align-items: baseline; justify-content: space-between; gap: var(--dna-e-3); }
.vg-ritmo__n { font: 700 18px/1.2 var(--dna-f-texto); color: var(--dna-branco); }
.vg-ritmo__n .dado { font-weight: 600; }
.vg-ritmo__xp { font-size: 13px; color: var(--dna-cinza-1); }
.vg-ritmo__barra { height: 6px; }
.vg-ritmo__seq { display: flex; align-items: center; gap: var(--dna-e-2); margin-top: var(--dna-e-2); font-size: 13.5px; color: var(--dna-cinza-1); }
.vg-ritmo__seq .icone { width: 18px; height: 18px; color: var(--dna-cinza-3); }
.vg-ritmo__seq[data-ativa] { color: var(--dna-offwhite); }
.vg-ritmo__seq[data-ativa] .icone { color: var(--p-espera); }
.vg-conquistas { display: grid; margin-top: var(--dna-e-1); }
.vg-conquistas li { display: flex; align-items: center; gap: var(--dna-e-3); min-height: 40px; border-top: 1px solid var(--dna-filete-suave); font-size: 13.5px; color: var(--dna-offwhite); }
.vg-conquistas .icone { width: 17px; height: 17px; color: var(--p-espera); }
.vg-conquistas__titulo { flex: 1; min-width: 0; }
.vg-conquistas time { font-size: 12px; }
.vg-ritmo__regra { font-size: 12px; color: var(--dna-cinza-2); }

/* --- Prazos: linha do tempo dinâmica ---------------------------------------- */
/* Eixo horizontal de datas, uma raia por frente, ponto por dia com cor + ícone +
   forma do estado, marcos fixos e HOJE em vermelho. No celular vira lista por semana. */

.pz-contexto__atraso { color: var(--p-perigo) !important; }
.at { max-width: 920px; }

.lt-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dna-e-2) var(--dna-e-3); margin-bottom: var(--dna-e-3); }
.lt-segmentos { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--dna-filete); border-radius: var(--dna-raio-2); }
.lt-alternar {
  min-height: 36px; padding: 0 12px; border: 0; border-radius: calc(var(--dna-raio-2) - 2px);
  background: transparent; cursor: pointer;
  font: 600 13px/1 var(--dna-f-texto); color: var(--dna-cinza-1);
  transition: background-color var(--dna-d-1) var(--dna-ease), color var(--dna-d-1) var(--dna-ease);
}
.lt-alternar:hover { color: var(--dna-offwhite); background: var(--p-campo); }
.lt-alternar[aria-pressed="true"] { background: var(--dna-offwhite); color: var(--dna-preto); }
.lt-alternar:focus-visible { outline: 2px solid var(--dna-vermelho-vivo); outline-offset: 2px; }
.lt-hoje-botao { min-height: 42px; }

.lt-legenda { display: flex; flex-wrap: wrap; gap: 6px var(--dna-e-4); margin-bottom: var(--dna-e-4); font-size: 12.5px; color: var(--dna-cinza-1); }
.lt-legenda li { display: inline-flex; align-items: center; gap: 6px; }
.lt-legenda__hoje { width: 2px; height: 16px; border-radius: 1px; background: var(--dna-vermelho); }

/* marca do estado: cor, ícone e forma (atrasado é quadrado; entregue é só contorno) */
.lt-marca { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; transition: transform var(--dna-d-1) var(--dna-ease); }
.lt-marca .icone { width: 13px; height: 13px; stroke-width: 2.4; }
.lt-marca[data-estado="atrasado"] { border-radius: 5px; background: var(--p-perigo); color: var(--dna-branco); }
.lt-marca[data-estado="semana"] { background: var(--p-espera); color: var(--dna-preto); }
.lt-marca[data-estado="ok"] { background: var(--p-cartao-hover); color: var(--dna-offwhite); box-shadow: inset 0 0 0 1.5px var(--dna-cinza-3); }
.lt-marca[data-estado="entregue"] { background: transparent; color: var(--p-ok); box-shadow: inset 0 0 0 1.5px var(--p-ok); }
.lt-marca[data-estado="sem-prazo"] { background: transparent; color: var(--dna-cinza-2); box-shadow: inset 0 0 0 1.5px var(--dna-filete); }

.lt--linha .lt-vista-lista { display: none; }
.lt-vazio { max-width: 60ch; }

.lt-rolagem {
  --nome: 156px;
  position: relative; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  border: 1px solid var(--dna-filete-suave); border-radius: var(--dna-raio-4);
  background: var(--p-raia); cursor: grab;
  scrollbar-color: var(--dna-cinza-4) transparent;
}
.lt-rolagem:focus-visible { outline: 2px solid var(--dna-vermelho-vivo); outline-offset: 2px; }
.lt-rolagem.e-arrastando { cursor: grabbing; user-select: none; }
.lt-tela { position: relative; width: calc(var(--nome) + var(--dias) * var(--px)); min-width: 100%; }

.lt-cabeca { display: flex; height: 46px; border-bottom: 1px solid var(--dna-filete-suave); }
.lt-raia__nome {
  position: sticky; left: 0; z-index: 4; flex: none; width: var(--nome); min-width: 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--dna-e-2);
  padding: 0 var(--dna-e-3); border-right: 1px solid var(--dna-filete-suave); background: var(--p-raia);
  font: 600 13px/1.25 var(--dna-f-texto); color: var(--dna-offwhite); overflow-wrap: anywhere;
}
.lt-raia__nome .dado { flex: none; font: 500 12px/1 var(--dna-f-mono); color: var(--dna-cinza-2); }
.lt-regua { position: relative; flex: 1; }
.lt-regua__dia {
  position: absolute; bottom: 8px; left: calc(var(--x) * var(--px)); width: var(--px);
  display: grid; justify-items: center; gap: 3px;
  font: 500 11px/1 var(--dna-f-mono); color: var(--dna-cinza-2); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lt-regua__dia--semana { color: var(--dna-cinza-1); }
.lt-regua__dia--mes b { font: 700 10.5px/1 var(--dna-f-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--dna-offwhite); }

.lt-corpo { position: relative; padding-top: 104px; }
.lt-marcos { position: absolute; inset: 0 0 0 var(--nome); z-index: 1; pointer-events: none; }
.lt-marco { position: absolute; top: 0; bottom: 0; left: calc(var(--x) * var(--px) + var(--px) / 2); border-left: 1px dashed rgba(255,255,255,.16); }
.lt-marco--cliente { border-left-color: var(--p-espera-filete); }
.lt-marco--entrega { border-left-color: rgba(255,255,255,.3); }
.lt-marco--evento { left: calc(var(--x) * var(--px)); width: calc(var(--largura) * var(--px)); border-left: 0; background: rgba(232,53,53,.09); box-shadow: inset 1px 0 0 var(--dna-filete-vermelho), inset -1px 0 0 var(--dna-filete-vermelho); }
.lt-marco--hoje { z-index: 2; border-left: 2px solid var(--dna-vermelho); margin-left: -1px; }
.lt-marco__rotulo {
  position: absolute; top: calc(8px + var(--linha, 0) * 22px); left: 6px;
  padding: 3px 7px; border-radius: var(--dna-raio-1); background: var(--p-cartao);
  font: 600 11.5px/1.2 var(--dna-f-texto); color: var(--dna-cinza-1); white-space: nowrap;
}
.lt-marco--cliente .lt-marco__rotulo { color: var(--p-espera); }
.lt-marco--evento .lt-marco__rotulo { color: var(--dna-offwhite); background: var(--dna-vermelho-cheio, var(--dna-vermelho)); }
.lt-marco--hoje .lt-marco__rotulo { left: 0; translate: -50% 0; background: var(--dna-vermelho); color: var(--dna-branco); }

.lt-raias { position: relative; z-index: 2; }
.lt-raia { display: flex; border-top: 1px solid var(--dna-filete-suave); }
.lt-raia__trilho { position: relative; flex: 1; min-height: calc(58px + var(--extra, 0px)); }
.lt-raia:hover .lt-raia__trilho { background: rgba(255,255,255,.015); }

.lt-grupo {
  position: absolute; top: 14px; left: calc(var(--x) * var(--px) + var(--px) / 2); z-index: 2;
  translate: -50% 0;
  animation: lt-entra 240ms var(--dna-ease) both; animation-delay: calc(var(--i, 0) * 16ms);
}
.lt-grupo.e-expandido, .lt-grupo:hover, .lt-grupo:focus-within { z-index: 8; }
@keyframes lt-entra { from { opacity: 0; transform: translateY(6px); } }
.lt-ponto {
  position: relative; display: inline-flex; align-items: center; gap: 3px;
  min-width: 30px; min-height: 30px; padding: 4px; border: 0; border-radius: var(--dna-raio-pilula);
  background: transparent; cursor: pointer;
}
.lt-ponto::before { content: ""; position: absolute; inset: -7px; } /* alvo de 44 px */
.lt-ponto:hover .lt-marca, .lt-ponto:focus-visible .lt-marca { transform: scale(1.18); }
.lt-ponto:focus-visible { outline: 2px solid var(--dna-vermelho-vivo); outline-offset: 2px; }
.lt-ponto__mais { padding: 3px 5px; border-radius: var(--dna-raio-pilula); background: var(--p-cartao-hover); font: 600 11px/1 var(--dna-f-mono); color: var(--dna-offwhite); }
.lt-dica {
  position: absolute; bottom: calc(100% + 6px); left: 50%; z-index: 9;
  display: grid; gap: 3px; width: max-content; max-width: 260px; padding: 8px 10px;
  border: 1px solid var(--dna-filete); border-radius: var(--dna-raio-2); background: var(--p-painel); box-shadow: var(--p-sombra-flutua);
  font: 400 12.5px/1.4 var(--dna-f-texto); color: var(--dna-cinza-1); text-align: left; white-space: normal;
  opacity: 0; translate: -50% 4px; pointer-events: none;
  transition: opacity 150ms var(--dna-ease), translate 150ms var(--dna-ease);
}
.lt-dica b { font-weight: 600; color: var(--dna-offwhite); }
.lt-ponto:hover .lt-dica, .lt-ponto:focus-visible .lt-dica { opacity: 1; translate: -50% 0; }
.lt-grupo.e-expandido .lt-dica { display: none; }
.lt-grupo__lista {
  position: absolute; top: calc(100% + 6px); left: 50%; translate: -50% 0; z-index: 9;
  display: grid; gap: 2px; width: 260px; padding: 6px;
  border: 1px solid var(--dna-filete); border-radius: var(--dna-raio-3); background: var(--p-painel); box-shadow: var(--p-sombra-flutua);
}
.lt-grupo__lista a {
  display: flex; align-items: center; gap: var(--dna-e-2); min-height: 40px; padding: 6px 8px;
  border-radius: var(--dna-raio-2); text-decoration: none;
  font-size: 13px; line-height: 1.3; color: var(--dna-offwhite); overflow-wrap: anywhere;
}
.lt-grupo__lista a:hover { background: var(--p-campo-hover); }
.lt-grupo__lista a:focus-visible { outline: 2px solid var(--dna-vermelho-vivo); outline-offset: -2px; }

/* lista por semana: alternativa acessível e a vista do celular */
.lt-lista { display: grid; gap: var(--dna-e-6); max-width: 820px; }
.lt-semana__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dna-e-2); margin-bottom: var(--dna-e-2); font: 700 15px/1.3 var(--dna-f-texto); color: var(--dna-offwhite); }
.lt-semana__hoje { padding: 3px 8px; border-radius: var(--dna-raio-pilula); background: var(--dna-vermelho); font: 600 11px/1.2 var(--dna-f-texto); letter-spacing: .05em; text-transform: uppercase; color: var(--dna-branco); }
.lt-semana__n { margin-left: auto; font: 500 12px/1 var(--dna-f-mono); color: var(--dna-cinza-2); }
.lt-lista__itens { position: relative; display: grid; gap: 2px; padding-left: 22px; }
.lt-lista__itens::before { content: ""; position: absolute; left: 10px; top: 10px; bottom: 10px; width: 1px; background: var(--dna-filete); }
.lt-lista__link {
  position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: var(--dna-e-3);
  min-height: 52px; margin-left: -22px; padding: 8px 10px 8px 0;
  border-radius: var(--dna-raio-2); text-decoration: none;
  transition: background-color var(--dna-d-1) var(--dna-ease);
}
.lt-lista__link:hover { background: var(--p-campo-hover); }
.lt-lista__link:focus-visible { outline: 2px solid var(--dna-vermelho-vivo); outline-offset: 2px; }
.lt-lista__corpo { display: grid; gap: 3px; min-width: 0; }
.lt-lista__titulo { font-weight: 600; font-size: 14px; line-height: 1.35; color: var(--dna-offwhite); overflow-wrap: anywhere; }
.lt-lista__meta { display: flex; flex-wrap: wrap; gap: 2px var(--dna-e-3); font-size: 12.5px; color: var(--dna-cinza-2); }
.lt-lista__estado { font: 500 12.5px/1.2 var(--dna-f-mono); color: var(--dna-cinza-1); white-space: nowrap; }
.lt-lista__item[data-estado="atrasado"] .lt-lista__estado { color: var(--p-perigo); }
.lt-lista__item[data-estado="semana"] .lt-lista__estado { color: var(--p-espera); }
.lt-lista__item[data-estado="entregue"] .lt-lista__estado { color: var(--p-ok); }
.lt-lista__marco { position: relative; display: flex; align-items: center; gap: var(--dna-e-3); min-height: 40px; margin-left: -22px; font-size: 13px; color: var(--dna-cinza-1); }
.lt-lista__marco .icone { flex: none; width: 22px; height: 16px; padding: 2px 0; background: var(--p-pagina); color: var(--p-espera); }
.lt-lista__marco--entrega .icone { color: var(--dna-offwhite); }
.lt-lista__marco--evento .icone { color: var(--dna-vermelho-vivo); }
.lt-lista__marco b { font-weight: 600; color: var(--dna-offwhite); }
.lt-semana--hoje .lt-lista__itens::before { background: linear-gradient(var(--dna-vermelho), var(--dna-filete)); }

/* --- Pendências do cliente ---------------------------------------------------- */

.cl-cabeca { justify-content: space-between; align-items: flex-end; }
.cl-cabeca__texto { display: grid; gap: var(--dna-e-1); min-width: 0; max-width: 70ch; }
.cl { display: grid; gap: var(--dna-e-6); }

.cl-resumo { display: grid; gap: 10px; padding: var(--dna-e-5); border: 1px solid var(--dna-filete-suave); border-radius: var(--dna-raio-4); background: var(--p-raia); }
.cl-resumo__linha { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 15px; color: var(--dna-cinza-1); }
.cl-resumo__n b { margin-right: 3px; font: 600 24px/1 var(--dna-f-mono); color: var(--dna-offwhite); font-variant-numeric: tabular-nums; }
.cl-resumo__n[data-tom="semana"] b { color: var(--p-espera); }
.cl-resumo__n[data-tom="vencida"] b { color: var(--p-perigo); }
.cl-resumo__n[data-tom="ok"] b { color: var(--p-ok); }
.cl-resumo__sep { color: var(--dna-cinza-3); }
.cl-resumo__barra { height: 6px; }
.cl-resumo__barra > span { background: var(--p-ok); }

.cl-chips { display: flex; flex-wrap: wrap; gap: var(--dna-e-2); }
.cl-chip {
  display: inline-flex; align-items: center; max-width: 100%; height: 22px; padding: 0 8px;
  border-radius: var(--dna-raio-pilula); background: rgba(255,255,255,.06);
  font: 600 11.5px/1 var(--dna-f-texto); color: var(--dna-cinza-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cl-chip--filtro {
  height: 36px; padding: 0 14px; border: 1px solid var(--dna-filete); background: transparent; cursor: pointer;
  font-size: 13px; transition: background-color var(--dna-d-1) var(--dna-ease), color var(--dna-d-1) var(--dna-ease);
}
.cl-chip--filtro:hover { color: var(--dna-offwhite); background: var(--p-campo); }
.cl-chip--filtro[aria-pressed="true"] { border-color: var(--dna-offwhite); background: var(--dna-offwhite); color: var(--dna-preto); }
.cl-chip--filtro:focus-visible { outline: 2px solid var(--dna-vermelho-vivo); outline-offset: 2px; }

.cl-grupo { display: grid; gap: var(--dna-e-3); }
.cl-grupo__titulo { display: flex; align-items: center; gap: var(--dna-e-2); font: 700 16px/1.3 var(--dna-f-texto); color: var(--dna-offwhite); }
.cl-grupo__titulo .icone { width: 18px; height: 18px; color: var(--dna-cinza-2); }
.cl-grupo[data-grupo="vencidas"] .cl-grupo__titulo .icone { color: var(--p-perigo); }
.cl-grupo[data-grupo="semana"] .cl-grupo__titulo .icone { color: var(--p-espera); }
.cl-grupo__n { font: 500 12.5px/1 var(--dna-f-mono); color: var(--dna-cinza-2); }

.cl-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--dna-e-3); align-items: start; }
.cl-pergunta {
  display: grid; gap: 10px; align-content: start; min-width: 0;
  padding: var(--dna-e-4); border: 1px solid var(--dna-filete-suave); border-radius: var(--dna-raio-3); background: var(--p-cartao);
  transition: border-color var(--dna-d-1) var(--dna-ease), opacity 200ms var(--dna-ease), transform 200ms var(--dna-ease);
}
.cl-pergunta[data-prazo="vencida"] { border-color: var(--dna-filete-vermelho); }
.cl-pergunta.e-aberta { border-color: var(--dna-filete); background: var(--p-cartao-hover); }
.cl-pergunta.e-saindo { opacity: 0; transform: translateY(-6px) scale(.98); }
.cl-pergunta__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px var(--dna-e-2); min-width: 0; }
.cl-pergunta__prazo { display: inline-flex; align-items: center; gap: 5px; font: 500 12px/1 var(--dna-f-mono); color: var(--dna-cinza-1); white-space: nowrap; }
.cl-pergunta__prazo .icone { width: 14px; height: 14px; }
.cl-pergunta__prazo[data-estado="vencida"] { color: var(--p-perigo); }
.cl-pergunta__prazo[data-estado="semana"] { color: var(--p-espera); }
.cl-pergunta__texto { font: 600 15px/1.45 var(--dna-f-texto); color: var(--dna-offwhite); overflow-wrap: anywhere; text-wrap: pretty; }
.cl-pergunta__origem { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; font-size: 12.5px; line-height: 1.45; color: var(--dna-cinza-2); }
.cl-pergunta__origem .icone { width: 14px; height: 14px; margin-right: -6px; color: var(--p-espera); }
.cl-pergunta__quem { font-weight: 600; color: var(--dna-offwhite); }
.cl-pergunta__origem a { min-width: 0; overflow-wrap: anywhere; color: var(--dna-cinza-1); text-decoration: underline; text-decoration-color: var(--dna-filete); text-underline-offset: 3px; }
.cl-pergunta__origem a:hover { color: var(--dna-offwhite); text-decoration-color: var(--dna-vermelho); }
.cl-pergunta__abrir { justify-self: start; min-height: 40px; }
.cl-pergunta__form { display: grid; gap: var(--dna-e-2); }
.cl-pergunta__campo { min-height: 88px; }
.cl-pergunta__acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--dna-e-2); }

.cl-vazio { display: flex; align-items: center; gap: var(--dna-e-4); padding: var(--dna-e-6) var(--dna-e-5); border: 1px dashed var(--dna-filete); border-radius: var(--dna-raio-4); }
.cl-vazio__selo { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: rgba(110,231,128,.1); color: var(--p-ok); }
.cl-vazio__selo .icone { width: 24px; height: 24px; }
.cl-vazio__titulo { font: 700 20px/1.25 var(--dna-f-texto); color: var(--dna-offwhite); }

.cl-msg {
  display: grid; gap: var(--dna-e-3);
  padding: var(--dna-e-5);
  border: 1px solid var(--dna-filete); border-radius: var(--dna-raio-4);
  background: var(--p-raia);
}
.cl-msg__cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--dna-e-3); margin: -8px -8px 0 0; }
.cl-msg__texto { min-height: 240px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; field-sizing: content; max-height: 60vh; }
.cl-msg__acoes { display: flex; flex-wrap: wrap; gap: var(--dna-e-2); }
.cl-msg__acoes .botao--contorno .icone { color: var(--p-ok); }

.cl-respondidas { display: grid; gap: var(--dna-e-3); min-width: 0; padding-top: var(--dna-e-3); border-top: 1px solid var(--dna-filete-suave); }
.cl-respondidas__resumo { display: flex; align-items: center; gap: var(--dna-e-2); min-height: var(--p-alvo); cursor: pointer; list-style: none; font: 700 16px/1.3 var(--dna-f-texto); color: var(--dna-offwhite); }
.cl-respondidas__resumo::-webkit-details-marker { display: none; }
.cl-respondidas__resumo::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--dna-cinza-2); border-bottom: 2px solid var(--dna-cinza-2); rotate: -45deg; transition: rotate var(--dna-d-1) var(--dna-ease); }
.cl-respondidas[open] .cl-respondidas__resumo::after { rotate: 45deg; }
.cl-respondidas__resumo .icone { width: 18px; height: 18px; color: var(--p-ok); }
.cl-respondidas__resumo:focus-visible { outline: 2px solid var(--dna-vermelho-vivo); outline-offset: 2px; }
.cl-respondidas__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 0 var(--dna-e-6); }
.cl-respondidas__lista li { display: grid; gap: 4px; align-content: start; min-width: 0; padding: var(--dna-e-3) 0; border-top: 1px solid var(--dna-filete-suave); }
.cl-respondidas__pergunta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; line-height: 1.45; }
.cl-respondidas__pergunta a { min-width: 0; overflow-wrap: anywhere; color: var(--dna-cinza-1); text-decoration: none; }
.cl-respondidas__pergunta a:hover { color: var(--dna-offwhite); text-decoration: underline; text-underline-offset: 3px; }
.cl-respondidas__resposta { font-size: 14px; line-height: 1.5; color: var(--dna-offwhite); overflow-wrap: anywhere; }
.cl-respondidas .vg-apoio { font-size: 12px; color: var(--dna-cinza-2); }

/* --- Atividade -------------------------------------------------------------- */

.at-cabeca { justify-content: space-between; }
.at-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dna-e-2); min-width: 0; }
.at-filtros .campo--compacto { min-width: 180px; }
.at-dia { display: grid; gap: var(--dna-e-2); margin-bottom: var(--dna-e-6); }
.at-dia__titulo { display: flex; align-items: baseline; gap: var(--dna-e-3); font: 700 16px/1.3 var(--dna-f-texto); color: var(--dna-offwhite); }
.at-dia__data { font: 400 12.5px/1 var(--dna-f-mono); color: var(--dna-cinza-2); }
.at-lista { display: grid; }
.at-item {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: start; gap: var(--dna-e-4);
  padding: 12px 0; border-top: 1px solid var(--dna-filete-suave);
}
.at-item__hora { padding-top: 2px; font-size: 12.5px; color: var(--dna-cinza-2); }
.at-item__corpo { display: grid; gap: 4px; min-width: 0; }
.at-item__resumo { font-size: 14px; line-height: 1.5; color: var(--dna-offwhite); overflow-wrap: anywhere; text-decoration: none; }
a.at-item__resumo:hover { text-decoration: underline; text-decoration-color: var(--dna-vermelho); text-underline-offset: 3px; }
.at-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--dna-e-3); font-size: 12.5px; color: var(--dna-cinza-2); }
.at-autor { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--dna-cinza-1); }
.at-autor::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dna-vermelho); }
.at-autor[data-autor="Cliente"]::before { background: var(--p-espera); }
.at-item__xp { padding-top: 2px; font-size: 12px; color: var(--dna-vermelho-vivo); white-space: nowrap; }
.at-tentar { justify-self: start; margin-top: var(--dna-e-2); }

/* --- responsivo ------------------------------------------------------------- */

@media (max-width: 1100px) {
  .vg-grade, .cl-grade { grid-template-columns: minmax(0, 1fr); }
  .vg-lateral { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 var(--dna-e-7); }
  .vg-lateral > .vg-bloco + .vg-bloco { margin-top: 0; }
  .vg-lateral > .vg-bloco { padding-top: var(--dna-e-6); border-top: 1px solid var(--dna-filete-suave); }
}

@media (max-width: 900px) {
  .vg-cabeca { padding-top: 0; padding-bottom: var(--dna-e-5); margin-bottom: var(--dna-e-5); }
  .vg-lateral { grid-template-columns: minmax(0, 1fr); }
  .vg-lateral > .vg-bloco + .vg-bloco { margin-top: var(--dna-e-6); }
  .vg-progresso, .vg-trava { padding: var(--dna-e-4); }
  .vg-pct { font-size: 72px; }
  .vg-pct__sinal { font-size: 32px; }
  .vg-legenda { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vg-legenda__rotulo { white-space: normal; line-height: 1.25; }
  .vg-trava__linha { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "quem n" "pergunta pergunta"; gap: 2px var(--dna-e-3); padding-block: 10px; }
  .vg-trava__quem { grid-area: quem; }
  .vg-trava__pergunta { grid-area: pergunta; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .vg-trava__n { grid-area: n; }
  .vg-trava__acao { justify-self: stretch; white-space: normal; text-align: center; }
  .vg-prazo__titulo { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

  /* celular: a linha do tempo vira a lista por semana (nada de rolagem lateral obrigatória) */
  .lt-so-largo, .lt-vista-linha { display: none !important; }
  .lt--linha .lt-vista-lista { display: block; }

  .cl-cabeca { align-items: stretch; }
  .cl-cabeca #cl-gerar { width: 100%; }
  .cl-resumo { padding: var(--dna-e-4); }
  .cl-pergunta__abrir { justify-self: stretch; }
  .cl-pergunta__acoes .botao { flex: 1 1 0; }

  .at-filtros { width: 100%; }
  .at-filtros .filtro { flex: 1 1 0; }
  .at-filtros .campo--compacto { min-width: 0; width: 100%; }
  .at-item { grid-template-columns: 44px minmax(0, 1fr); }
  .at-item__xp { grid-column: 2; padding-top: 0; }
}

@media (max-width: 520px) {
  .lt-lista__link { grid-template-columns: 22px minmax(0, 1fr); }
  .lt-lista__estado { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .lt-grupo { animation: none; }
  .lt-dica, .lt-marca, .cl-pergunta { transition: none; }
}

/* --- pendências: grade de cartões do mesmo tamanho, kanban, linha do tempo (05/10) --- */

.cl-controles { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dna-e-3); }
.cl-modos .lt-alternar { min-height: 40px; }

/* tags: frente com a cor própria da frente (a mesma em todo o painel); responsável neutro */
.cl-tag {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; height: 24px; padding: 0 9px;
  border-radius: var(--dna-raio-pilula); font: 600 11.5px/1 var(--dna-f-texto);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex: 0 1 auto;
}
.cl-tag > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cl-tag--frente {
  color: var(--cor-frente); background: color-mix(in srgb, var(--cor-frente) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cor-frente) 38%, transparent);
}
.cl-tag--frente::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 2px; background: var(--cor-frente); }
.cl-tag--quem { background: rgba(255,255,255,.06); color: var(--dna-offwhite); }
.cl-tag--quem .icone { flex: none; width: 13px; height: 13px; color: var(--p-espera); }

/* selo de prioridade: cor E ícone E texto */
.cl-selo {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 7px; flex: none;
  border-radius: var(--dna-raio-1); font: 700 11px/1 var(--dna-f-texto); letter-spacing: .04em; text-transform: uppercase;
}
.cl-selo .icone { width: 14px; height: 14px; stroke-width: 2.2; }
.cl-selo[data-prioridade="urgente"] { background: var(--p-perigo); color: var(--dna-branco); }
.cl-selo[data-prioridade="semana"] { background: var(--p-espera); color: var(--dna-preto); }
.cl-selo[data-prioridade="depois"] { background: transparent; color: var(--dna-cinza-1); box-shadow: inset 0 0 0 1px var(--dna-filete); }
.cl-selo[data-prioridade="ok"] { background: transparent; color: var(--p-ok); box-shadow: inset 0 0 0 1px var(--p-ok); }
.cl-bloqueio { display: inline-flex; align-items: center; gap: 4px; min-width: 0; font-size: 12px; color: var(--dna-cinza-1); white-space: nowrap; }
.cl-bloqueio .icone { width: 13px; height: 13px; color: var(--dna-cinza-2); }
.cl-bloqueio .dado { font-weight: 600; color: var(--dna-offwhite); }

.cl-grupo[data-grupo="urgente"] .cl-grupo__titulo .icone { color: var(--p-perigo); }
.cl-grupo[data-grupo="semana"] .cl-grupo__titulo .icone { color: var(--p-espera); }

/* grade: todas as linhas com a mesma altura; o rodapé ("Responder") sempre no mesmo lugar */
.cl-cartoes { grid-auto-rows: 268px; align-items: stretch; }
.cl-pergunta { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; overflow: hidden; cursor: pointer; }
.cl-pergunta:hover { border-color: var(--dna-filete); background: var(--p-cartao-hover); }
.cl-pergunta:has(.cl-pergunta__alvo:focus-visible) { outline: 2px solid var(--dna-vermelho-vivo); outline-offset: 2px; }
.cl-pergunta__alvo { position: absolute; inset: 0; z-index: 0; width: 100%; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.cl-pergunta__alvo:focus-visible { outline: 0; }
.cl-pergunta > :not(.cl-pergunta__alvo) { position: relative; z-index: 1; pointer-events: none; }
.cl-pergunta a, .cl-pergunta .botao { pointer-events: auto; }
.cl-pergunta__topo { flex-wrap: nowrap; }
.cl-pergunta__meta { display: flex; align-items: center; gap: var(--dna-e-2); min-width: 0; }
.cl-pergunta__texto {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  min-height: calc(1.45em * 3); flex: none;
}
.cl-pergunta__origem { flex-wrap: nowrap; gap: 8px; overflow: hidden; white-space: nowrap; }
.cl-pergunta__origem .icone { margin-right: 0; }
.cl-pergunta__origem a { min-width: 0; flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; overflow-wrap: normal; }
.cl-pergunta__rodape { margin-top: auto; display: flex; align-items: center; justify-content: flex-end; }
.cl-pergunta__abrir { min-height: 40px; }

/* detalhe (dialog) */
.cl-detalhe { width: min(620px, calc(100% - 24px)); max-height: min(86vh, 900px); overflow: auto; }
.cl-detalhe__corpo { display: grid; gap: var(--dna-e-4); padding: var(--dna-e-5); }
.cl-detalhe__barra { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--dna-e-3); }
.cl-detalhe__barra .cl-pergunta__topo { justify-content: flex-start; flex-wrap: wrap; }
.cl-detalhe__fechar { margin: -8px -8px 0 0; }
.cl-detalhe__pergunta { font: 700 20px/1.35 var(--dna-f-texto); color: var(--dna-branco); overflow-wrap: anywhere; text-wrap: pretty; }
.cl-detalhe__dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--dna-e-3) var(--dna-e-4); }
.cl-detalhe__dados dt { font: 600 11.5px/1.2 var(--dna-f-texto); letter-spacing: .06em; text-transform: uppercase; color: var(--dna-cinza-2); margin-bottom: 4px; }
.cl-detalhe__dados dd { min-width: 0; font-size: 14px; color: var(--dna-offwhite); overflow-wrap: anywhere; }
.cl-detalhe__dados a { color: var(--dna-offwhite); text-decoration: underline; text-decoration-color: var(--dna-filete); text-underline-offset: 3px; }
.cl-detalhe__resposta p, .cl-detalhe__nota { font-size: 14.5px; line-height: 1.55; color: var(--dna-offwhite); white-space: pre-wrap; overflow-wrap: anywhere; }
.cl-detalhe__lista { display: grid; gap: var(--dna-e-3); }
.cl-detalhe__lista li { display: grid; gap: 4px; padding-bottom: var(--dna-e-3); border-bottom: 1px solid var(--dna-filete-suave); }

/* kanban */
.cl-kanban { display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: var(--dna-e-3); align-items: start; overflow-x: auto; padding-bottom: var(--dna-e-2); }
.cl-kb-coluna { display: grid; gap: var(--dna-e-2); align-content: start; min-width: 0; padding: var(--dna-e-2); border-radius: var(--dna-raio-4); background: var(--p-raia); transition: background-color var(--dna-d-1) var(--dna-ease), box-shadow var(--dna-d-1) var(--dna-ease); }
.cl-kb-coluna.e-alvo { background: rgba(232,53,53,.05); box-shadow: inset 0 0 0 1px var(--dna-filete-vermelho); }
.cl-kb-coluna__titulo { display: flex; align-items: center; gap: var(--dna-e-2); min-height: 40px; padding: 0 var(--dna-e-2); font: 700 13.5px/1.25 var(--dna-f-texto); color: var(--dna-offwhite); }
.cl-kb-coluna__titulo .icone { width: 16px; height: 16px; color: var(--dna-cinza-2); }
.cl-kb-coluna[data-estado="aguardando"] .cl-kb-coluna__titulo .icone { color: var(--p-espera); }
.cl-kb-coluna[data-estado="resolvido"] .cl-kb-coluna__titulo .icone { color: var(--p-ok); }
.cl-kb-coluna__titulo .cl-grupo__n { margin-left: auto; }
.cl-kb-lista { display: grid; gap: var(--dna-e-2); min-height: 72px; }
.cl-kb-cartao {
  display: grid; gap: 8px; min-width: 0; padding: var(--dna-e-3); cursor: grab; touch-action: manipulation; user-select: none;
  border: 1px solid var(--dna-filete-suave); border-radius: var(--dna-raio-3); background: var(--p-cartao);
}
.cl-kb-cartao:hover { border-color: var(--dna-filete); background: var(--p-cartao-hover); }
.cl-kb-cartao:focus-visible { outline: 2px solid var(--dna-vermelho-vivo); outline-offset: 2px; }
.cl-kb-cartao.e-origem { opacity: .35; }
.cl-kb-cartao__texto { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; font: 600 14px/1.45 var(--dna-f-texto); color: var(--dna-offwhite); overflow-wrap: anywhere; }
.cl-kb-cartao .cl-pergunta__topo { flex-wrap: nowrap; }
.cl-kb-cartao .cl-pergunta__origem { overflow: hidden; }
.cl-kb-fantasma { position: fixed; z-index: 95; pointer-events: none; rotate: 1.5deg; box-shadow: 0 18px 40px -16px rgba(0,0,0,.9); border-color: var(--dna-filete-vermelho); }

/* linha do tempo das pendências (reaproveita a régua e os marcos de Prazos) */
.cl-linha { display: grid; gap: var(--dna-e-3); min-width: 0; }
.cl-lt__corpo { position: relative; height: calc(var(--faixas) * 64px + 56px); }
.cl-lt__marcos { inset: 0; }
.cl-lt__marcos .lt-marco__rotulo { top: 6px; }
.cl-lt__blocos { position: absolute; inset: 40px 0 0 0; z-index: 2; }
.cl-lt__item { display: contents; }
.cl-lt-bloco {
  position: absolute; left: calc(var(--x) * var(--px) + var(--px) / 2 - 10px); top: calc(var(--faixa) * 64px);
  display: grid; gap: 3px; width: 172px; min-height: 52px; padding: 7px 10px 7px 12px; text-align: left;
  border: 1px solid color-mix(in srgb, var(--cor-frente) 45%, transparent); border-left: 4px solid var(--cor-frente); border-radius: var(--dna-raio-2);
  background: color-mix(in srgb, var(--cor-frente) 12%, var(--p-cartao)); color: var(--dna-offwhite); cursor: pointer;
  animation: cl-lt-entra 320ms var(--dna-ease) both; animation-delay: calc(var(--i) * 28ms);
  transition: transform var(--dna-d-1) var(--dna-ease), box-shadow var(--dna-d-1) var(--dna-ease);
}
.cl-lt-bloco[data-prioridade="urgente"] { box-shadow: 0 0 0 1px var(--p-perigo); }
.cl-lt-bloco:hover, .cl-lt-bloco:focus-visible { z-index: 6; transform: translateY(-2px); box-shadow: 0 12px 28px -14px rgba(0,0,0,.9), 0 0 0 1px var(--cor-frente); }
.cl-lt-bloco:focus-visible { outline: 2px solid var(--dna-vermelho-vivo); outline-offset: 2px; }
.cl-lt-bloco__frente { font: 700 10.5px/1 var(--dna-f-texto); letter-spacing: .05em; text-transform: uppercase; color: var(--cor-frente); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cl-lt-bloco__texto { font: 600 12.5px/1.3 var(--dna-f-texto); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cl-lt-bloco:hover .lt-dica, .cl-lt-bloco:focus-visible .lt-dica { opacity: 1; translate: -50% 0; }
.cl-lt-sem__lista { display: grid; gap: var(--dna-e-2); }
.cl-lt-sem__item { display: flex; align-items: center; gap: var(--dna-e-2); width: 100%; min-height: var(--p-alvo); padding: 0 var(--dna-e-3); border: 1px solid var(--dna-filete-suave); border-radius: var(--dna-raio-2); background: var(--p-cartao); color: var(--dna-offwhite); text-align: left; cursor: pointer; }
.cl-lt-sem__item > span:last-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@keyframes cl-lt-entra { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .cl-lt-bloco { animation: none; transition: none; }
  .cl-kb-fantasma { rotate: none; }
}
@media (max-width: 720px) {
  .cl-kanban { grid-template-columns: repeat(3, minmax(78vw, 1fr)); scroll-snap-type: x mandatory; }
  .cl-kb-coluna { scroll-snap-align: start; }
  .cl-cartoes { grid-auto-rows: 268px; }
}
.lt-raia__nome[style*="--cor-frente"] { box-shadow: inset 3px 0 0 var(--cor-frente); }
.cl-pergunta__origem .cl-tag--quem { flex: 0 0 auto; max-width: 62%; }
.cl-pergunta__origem a { flex: 1 1 0; }
.cl-cartoes { grid-auto-rows: 248px; }
@media (max-width: 720px) { .cl-cartoes { grid-auto-rows: 248px; } }

/* --- polish 05/10: escala 4/8/12/16/24 em todas as listas e cartões das três visões --- */
.cl { gap: var(--dna-e-5); }
.cl-grupo { gap: var(--dna-e-3); }
.cl-pergunta { padding: var(--dna-e-4); gap: var(--dna-e-3); }
.cl-pergunta__topo, .cl-pergunta__meta { gap: var(--dna-e-3); }
.cl-pergunta__origem { gap: var(--dna-e-2); }
.cl-kb-coluna { padding: var(--dna-e-3); gap: var(--dna-e-3); }
.cl-kb-coluna__titulo { padding: 0 var(--dna-e-1); }
.cl-kb-lista { gap: var(--dna-e-3); }
.cl-kb-cartao { padding: var(--dna-e-3) var(--dna-e-4); gap: var(--dna-e-3); }
.cl-kb-lista > .vazio { padding: var(--dna-e-3) var(--dna-e-4); }
.cl-lt-sem { display: grid; gap: var(--dna-e-3); min-width: 0; }
.cl-lt-sem__lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dna-e-2); }
.cl-lt-sem__lista li { min-width: 0; }
.cl-lt-sem__item { gap: var(--dna-e-3); padding: var(--dna-e-3) var(--dna-e-4); }
.cl-linha { grid-template-columns: minmax(0, 1fr); }
.cl-lt-bloco { padding: var(--dna-e-2) var(--dna-e-3) var(--dna-e-2) var(--dna-e-3); }

/* linha do tempo: uma linha por dia (fim de semana diferente) e HOJE pela hora de SP */
.cl-lt__dias { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cl-lt__dia { position: absolute; top: 0; bottom: 0; left: calc(var(--x) * var(--px)); width: var(--px); border-left: 1px solid rgba(255,255,255,.07); }
.cl-lt__dia[data-fds] { border-left-style: dashed; border-left-color: rgba(255,255,255,.06); background: rgba(255,255,255,.018); }
.cl-lt-hoje { left: calc(var(--x) * var(--px)); transition: left 400ms var(--dna-ease); }
@media (prefers-reduced-motion: reduce) { .cl-lt-hoje { transition: none; } }

/* detalhe: sem o glow vermelho; fundo escurecido com desfoque */
.cl-detalhe { box-shadow: 0 32px 80px -28px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.04); }
.cl-detalhe::backdrop { background: rgba(3,3,3,.88); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cl-detalhe::backdrop { background: rgba(3,3,3,.6); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); }
}
@media (prefers-reduced-transparency: reduce) {
  .cl-detalhe::backdrop { background: rgba(3,3,3,.92); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.cl-detalhe__corpo { gap: var(--dna-e-5); padding: var(--dna-e-5); }
.cl-detalhe__dados { gap: var(--dna-e-4); margin: 0; }
.cl-detalhe__dados dd { margin: 0; }
.cl-detalhe__dados dd .cl-tag--quem { margin-left: 0; }
.cl-detalhe__notas, .cl-detalhe__resposta { display: grid; gap: var(--dna-e-3); }
.cl-detalhe .cl-pergunta__form { gap: var(--dna-e-2); }
.cl-detalhe .cl-pergunta__enviar:not(:disabled) { background: var(--p-acao); color: var(--dna-branco); }
.cl-detalhe .cl-pergunta__enviar:disabled {
  background: transparent; color: var(--dna-cinza-2); box-shadow: inset 0 0 0 1px var(--dna-filete); border: 0; cursor: not-allowed;
}
.cl-detalhe__dica { font-size: 12.5px; color: var(--dna-cinza-2); }
.cl-lt-sem__item .cl-tag { flex: none; max-width: 45%; }
.at-item--teste { opacity: .6; } .at-item--teste .at-autor { font-style: italic; }