/* #155 · Torre de controle (molde dashboard). Só tokens; prefixo torre-. */
.torre-dev .torre-h { font-size: var(--ds-fs-md); margin: var(--ds-s4) 0 var(--ds-s2); }
.torre-dev p { overflow-wrap: anywhere; }
.torre-dev .torre-aviso { color: var(--ink-ok); }
.torre-dev .torre-erro { color: var(--ink-err); margin: var(--ds-s1) 0 0; }
.torre-dev :focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 3px; }
.torre-dev .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* gargalos: o que grita */
.torre-dev .torre-gargalos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-s2);
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.torre-dev .torre-gargalo button { width: 100%; min-height: 96px; text-align: left; display: flex; flex-direction: column;
  gap: var(--ds-s1); padding: var(--ds-s3); background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--ds-r); cursor: pointer; transition: border-color var(--ds-dur) var(--ds-ease); }
.torre-dev .torre-gargalo button:hover { border-color: var(--ds-accent); }
.torre-dev .torre-gargalo button:disabled { cursor: default; color: var(--muted); }
.torre-dev .torre-gargalo .num { font-size: var(--ds-fs-xl); font-variant-numeric: tabular-nums; }
.torre-dev .torre-gargalo small { color: var(--muted); font-size: var(--ds-fs-xs); }
.torre-dev .torre-gargalo.topo button { border-color: var(--ds-err); }
.torre-dev .torre-gargalo.topo .num { color: var(--ink-err); }
.torre-dev .torre-gargalo.aberto button { background: var(--panel-2); border-color: var(--ds-accent); }

/* drill-down */
.torre-dev .torre-drill { margin: var(--ds-s3) 0; padding: var(--ds-s3); border: 1px solid var(--line); border-radius: var(--ds-r); background: var(--panel); }
.torre-dev .torre-drill > header { display: flex; justify-content: space-between; align-items: center; gap: var(--ds-s2); flex-wrap: wrap; }
.torre-dev .torre-drill h2 { font-size: var(--ds-fs-md); margin: 0; }
.torre-dev .torre-missao { display: flex; flex-direction: column; min-width: 0; }
.torre-dev .torre-missao small { color: var(--muted); font-size: var(--ds-fs-xs); max-width: 36ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.torre-dev .torre-texto { display: block; max-width: 48ch; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.torre-dev .torre-responder { display: flex; flex-direction: column; gap: var(--ds-s1); min-width: 220px; }
.torre-dev .torre-responder textarea { min-height: 44px; width: 100%; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--ds-r-sm); padding: var(--ds-s2); font: inherit; }
.torre-dev .btn { min-height: 44px; }

.torre-dev .torre-kpis { margin: var(--ds-s4) 0 var(--ds-s2); }

/* fluxo */
.torre-dev .torre-fluxo { border: 1px solid var(--line); border-radius: var(--ds-r); background: var(--panel); padding: var(--ds-s3); }
.torre-dev .torre-fluxo-svg { width: 100%; height: auto; display: block; }
.torre-dev .torre-no { cursor: pointer; }
.torre-dev .torre-no rect { fill: var(--panel-2); stroke: var(--line); stroke-width: 1.5; transition: stroke var(--ds-dur) var(--ds-ease); }
.torre-dev .torre-no:hover rect, .torre-dev .torre-no:focus-visible rect { stroke: var(--ds-accent); }
.torre-dev .torre-no:focus-visible { outline: none; }
.torre-dev .torre-no.trav rect { stroke: var(--ds-err); stroke-width: 2.5; }
.torre-dev .torre-no.janela rect { stroke-dasharray: 4 3; }
.torre-dev .torre-no text { fill: var(--ink); font-family: var(--ds-font); }
.torre-dev .torre-no .num { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.torre-dev .torre-no.trav .num { fill: var(--ink-err); }
.torre-dev .torre-no .rot { font-size: 12px; }
.torre-dev .torre-no .sus { font-size: 10px; fill: var(--muted); }
.torre-dev .torre-aresta path { fill: none; stroke-linecap: round; opacity: .8; }
.torre-dev .torre-aresta text { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.torre-dev .torre-aresta-avanca path { stroke: var(--ds-accent); }
.torre-dev .torre-aresta-volta path { stroke: var(--ds-warn); stroke-dasharray: 6 4; }
.torre-dev .torre-seta-avanca { fill: var(--ds-accent); }
.torre-dev .torre-seta-volta { fill: var(--ds-warn); }
.torre-dev .torre-legenda { display: flex; gap: var(--ds-s3); align-items: center; flex-wrap: wrap; color: var(--muted); font-size: var(--ds-fs-sm); margin: var(--ds-s2) 0 0; }
.torre-dev .torre-legenda .l::before { content: ""; display: inline-block; width: 18px; height: 0; border-top: 3px solid var(--muted); vertical-align: middle; margin-right: var(--ds-s1); }
.torre-dev .torre-legenda .avanca::before { border-top-color: var(--ds-accent); }
.torre-dev .torre-legenda .volta::before { border-top: 3px dashed var(--ds-warn); }
.torre-dev .torre-fases-lista { display: none; list-style: none; margin: 0; padding: 0; gap: var(--ds-s2); grid-template-columns: 1fr 1fr; }
.torre-dev .torre-fase { width: 100%; min-height: 64px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: var(--ds-s2); background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--ds-r-sm); text-align: left; }
.torre-dev .torre-fase b { font-size: var(--ds-fs-lg); font-variant-numeric: tabular-nums; }
.torre-dev .torre-fase small { color: var(--muted); font-size: var(--ds-fs-xs); }
.torre-dev .torre-fase.trav { border-color: var(--ds-err); }
.torre-dev .torre-det { margin: var(--ds-s4) 0 var(--ds-s2); }
.torre-dev .torre-det summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }

@media (max-width: 720px) {
  .torre-dev .torre-fluxo-svg { display: none; }
  .torre-dev .torre-fases-lista { display: grid; }
  .torre-dev .torre-gargalos { grid-template-columns: 1fr 1fr; }
}

/* ── adendo 08/11: abas, quadro (Jira Board) e linha do tempo (Jira Timeline) ── */
.torre-dev .torre-abas { display: flex; gap: var(--ds-s1); border-bottom: 1px solid var(--line); margin: 0 0 var(--ds-s3); flex-wrap: wrap; }
.torre-dev .torre-abas button { min-height: 44px; padding: 0 var(--ds-s3); background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--muted); font: inherit; cursor: pointer; }
.torre-dev .torre-abas button.ativa { color: var(--ink); border-bottom-color: var(--ds-accent); }
.torre-dev .torre-filtros { display: flex; flex-wrap: wrap; gap: var(--ds-s2); align-items: flex-end; margin: 0 0 var(--ds-s2); }
.torre-dev .torre-filtro { display: flex; flex-direction: column; gap: 2px; font-size: var(--ds-fs-xs); color: var(--muted); }
.torre-dev .torre-filtro select, .torre-dev .torre-filtro input { min-height: 44px; min-width: 140px; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--ds-r-sm); padding: 0 var(--ds-s2); font: inherit; font-size: var(--ds-fs-sm); }
.torre-dev .torre-filtro.texto input { min-width: 220px; }
.torre-dev .torre-lido { margin: 0 0 var(--ds-s3); font-size: var(--ds-fs-xs); }

.torre-dev .torre-quadro { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(176px, 1fr); gap: var(--ds-s2);
  overflow-x: auto; align-items: start; padding-bottom: var(--ds-s2); }
.torre-dev .torre-coluna { background: var(--panel); border: 1px solid var(--line); border-radius: var(--ds-r); padding: var(--ds-s2); min-width: 0; }
.torre-dev .torre-coluna.fechada { align-self: start; }
.torre-dev .torre-coluna header { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ds-s1); justify-content: space-between; margin-bottom: var(--ds-s2); }
.torre-dev .torre-coluna h3 { margin: 0; font-size: var(--ds-fs-sm); }
.torre-dev .torre-coluna h3 .num { color: var(--muted); font-variant-numeric: tabular-nums; margin-left: var(--ds-s1); }
.torre-dev .torre-coluna header small { flex-basis: 100%; font-size: var(--ds-fs-xs); }
.torre-dev .torre-mais { width: 100%; margin-top: var(--ds-s2); }
.torre-dev .torre-coluna .vazio { font-size: var(--ds-fs-xs); }
.torre-dev .torre-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ds-s2);
  max-height: 72vh; overflow-y: auto; }
.torre-dev .torre-card button { width: 100%; text-align: left; display: flex; flex-direction: column; gap: var(--ds-s1); padding: var(--ds-s2);
  background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--ds-r-sm); cursor: pointer; font: inherit;
  transition: border-color var(--ds-dur) var(--ds-ease); }
.torre-dev .torre-card button:hover, .torre-dev .torre-card.aberto button { border-color: var(--ds-accent); }
.torre-dev .torre-card.travado button { border-color: var(--ds-warn); }
.torre-dev .torre-card .topo { display: flex; flex-wrap: wrap; gap: var(--ds-s1); align-items: center; font-size: var(--ds-fs-xs); }
.torre-dev .torre-card .topo b { font-variant-numeric: tabular-nums; }
.torre-dev .torre-card .titulo { font-size: var(--ds-fs-sm); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.torre-dev .torre-card .agora { font-size: var(--ds-fs-xs); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.torre-dev .torre-card .agora i { font-style: normal; color: var(--muted-2); }
.torre-dev .torre-card .rodape { display: flex; justify-content: space-between; gap: var(--ds-s1); align-items: center; font-size: var(--ds-fs-xs); }
.torre-dev .torre-card .robo { display: inline-flex; gap: var(--ds-s1); align-items: center; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.torre-dev .torre-card .rodape .sub { white-space: nowrap; }
.torre-dev .torre-prio { font-size: var(--ds-fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.torre-dev .torre-prio.p1 { color: var(--ink-err); }
.torre-dev .torre-prio.p2 { color: var(--ink-warn); }
.torre-dev .torre-pct { display: flex; align-items: center; gap: var(--ds-s1); }
.torre-dev .torre-pct .barra { flex: 1; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.torre-dev .torre-pct .barra span { display: block; height: 100%; background: var(--ds-accent); }
.torre-dev .torre-pct small { font-size: var(--ds-fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }

.torre-detalhe h4 { margin: var(--ds-s3) 0 var(--ds-s1); font-size: var(--ds-fs-sm); }
.torre-detalhe p { margin: 0; overflow-wrap: anywhere; }
.torre-detalhe .sub, .torre-detalhe i { color: var(--muted); font-size: var(--ds-fs-xs); font-style: normal; }
.torre-detalhe .torre-log code { font-size: var(--ds-fs-xs); white-space: pre-wrap; overflow-wrap: anywhere; }
.torre-detalhe .torre-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--ds-s1) var(--ds-s3); margin: var(--ds-s3) 0 0; font-size: var(--ds-fs-sm); }
.torre-detalhe .torre-dl dt { color: var(--muted); }
.torre-detalhe .torre-dl dd { margin: 0; overflow-wrap: anywhere; }
.torre-detalhe .torre-pct { display: flex; align-items: center; gap: var(--ds-s1); margin-top: var(--ds-s2); }
.torre-detalhe .torre-pct .barra { flex: 1; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.torre-detalhe .torre-pct .barra span { display: block; height: 100%; background: var(--ds-accent); }
.torre-detalhe .torre-responder { display: flex; flex-direction: column; gap: var(--ds-s1); margin-top: var(--ds-s2); }
.torre-detalhe .torre-responder textarea { min-height: 44px; width: 100%; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--ds-r-sm); padding: var(--ds-s2); font: inherit; }

/* linha do tempo: cor = fase (mesma família do fluxo) */
.torre-dev .f-fila { --fase: var(--muted-2); }
.torre-dev .f-rodando { --fase: var(--ds-accent); }
.torre-dev .f-aguardando_vegas { --fase: var(--ds-warn); }
.torre-dev .f-revisao, .torre-dev .f-merge { --fase: var(--ds-ok); }
.torre-dev .f-pausada { --fase: var(--muted); }
.torre-dev .f-caiu { --fase: var(--ds-err); }
.torre-dev .f-fechada { --fase: var(--ink-ok); }
.torre-dev .l-fase::before { content: ""; display: inline-block; width: 12px; height: 8px; border-radius: 2px; background: var(--fase); margin-right: var(--ds-s1); vertical-align: middle; }
.torre-dev .f-merge.seg { opacity: .7; }
.torre-dev .torre-gantt { border: 1px solid var(--line); border-radius: var(--ds-r); background: var(--panel); padding: var(--ds-s2); overflow-x: auto; }
.torre-dev .torre-gantt .eixo, .torre-dev .torre-gantt .linha { display: grid; grid-template-columns: minmax(180px, 28%) 1fr; gap: var(--ds-s2); align-items: center; min-width: 640px; }
.torre-dev .torre-gantt .eixo .trilho { height: 20px; }
.torre-dev .torre-gantt .marca { position: absolute; transform: translateX(-50%); font-size: var(--ds-fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.torre-dev .torre-gantt .trilho { position: relative; height: 14px; background: var(--panel-2); border-radius: 3px; }
.torre-dev .torre-gantt .seg { position: absolute; top: 0; bottom: 0; background: var(--fase); border-radius: 2px; }
.torre-dev .torre-gantt .previsto { position: absolute; right: 0; top: -2px; font-size: var(--ds-fs-xs); color: var(--muted); background: var(--panel); padding: 0 var(--ds-s1); }
.torre-dev .torre-gantt .grupo h4 { margin: var(--ds-s3) 0 var(--ds-s1); font-size: var(--ds-fs-sm); }
.torre-dev .torre-gantt .linha { min-height: 32px; }
.torre-dev .torre-gantt .linha .rot { min-height: 32px; background: none; border: 0; color: var(--ink); text-align: left; font: inherit; font-size: var(--ds-fs-xs);
  cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; }
.torre-dev .torre-gantt .linha .rot:hover { color: var(--ds-accent); }
.torre-dev .torre-gantt .linha.travado .rot b { color: var(--ink-warn); }

@media (max-width: 720px) {
  /* skin "b" fixa a altura da célula (ds.css :root[data-skin="b"] .ds-tabela td)
     e, no cartão do celular, o formulário de resposta vazava por cima da linha
     seguinte; aqui a célula cresce com o conteúdo */
  .torre-dev.wrap .torre-drill .ds-tabela td, .torre-dev.wrap .torre-linha .ds-tabela td { height: auto; }
  .torre-dev .torre-responder { min-width: 0; flex: 1; }
  .torre-dev .torre-quadro { grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; }
  .torre-dev .torre-cards { max-height: none; }
  .torre-dev .torre-filtro select, .torre-dev .torre-filtro input, .torre-dev .torre-filtro.texto input { min-width: 0; width: 100%; }
  .torre-dev .torre-filtro { flex: 1 1 45%; }
  .torre-dev .torre-gantt .eixo, .torre-dev .torre-gantt .linha { grid-template-columns: 1fr; min-width: 0; gap: 2px; }
  .torre-dev .torre-gantt .eixo .rot { display: none; }
  .torre-dev .torre-gantt .linha { margin-bottom: var(--ds-s2); }
  .torre-dev .torre-gantt .linha .rot { min-height: 44px; }
}