/* Mapa do Trabalho — tema escuro. Cores de tipo/status/relação vêm do modelo.js via --cor. */
:root {
  color-scheme: dark;
  --fundo: #101014;
  --quadro: #131318;
  --ponto: #26262f;
  --sup: #17171d;
  --sup-2: #1d1d25;
  --sup-3: #25252f;
  --sup-4: #2d2d39;
  --borda: #2a2a35;
  --borda-forte: #3a3a48;
  --texto: #ececf1;
  --texto-2: #b3b3c1;
  --texto-3: #8c8c9c;
  --acento: #ff7a59;
  --acento-forte: #ff916f;
  --acento-fundo: rgba(255, 122, 89, 0.14);
  --perigo: #ff5c72;
  --perigo-fundo: rgba(255, 92, 114, 0.12);
  --ok: #46d68c;
  --aviso: #f5b83d;
  --aviso-fundo: rgba(245, 184, 61, 0.12);
  --info: #5aa7ff;
  --raio: 10px;
  --lateral: 320px;
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
  --painel: 430px;
  --topo: 54px;
  --fonte: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Code", "Cascadia Mono", Consolas, "SFMono-Regular", monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 13.5px/1.45 var(--fonte);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
kbd {
  font: 11px var(--mono);
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid var(--borda-forte);
  border-bottom-width: 2px;
  color: var(--texto-2);
  background: var(--sup-2);
}
code { font-family: var(--mono); font-size: 12px; background: var(--sup-3); padding: 1px 5px; border-radius: 4px; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
::selection { background: rgba(255, 122, 89, 0.35); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--sup-4); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- estrutura ---------- */
.app {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: var(--topo) auto 1fr;
  height: 100vh;
}
.app.menu-fixo { grid-template-columns: var(--lateral) 1fr; }
.topo {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-inline: 14px;
  background: var(--sup);
  border-bottom: 1px solid var(--borda);
  min-width: 0;
  z-index: 30;
}
.btn-menu {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px 0 10px;
  border-radius: 9px; border: 1px solid var(--borda-forte);
  background: var(--sup-2); color: var(--texto);
  font-weight: 550; white-space: nowrap;
  transition: background 0.12s, border-color 0.12s;
}
.btn-menu:hover { background: var(--sup-3); border-color: #4a4a5a; }
.btn-menu[aria-expanded="true"] { background: var(--acento-fundo); border-color: rgba(255,122,89,0.45); }
.contador.acento { background: var(--acento); color: #1a0d08; font-weight: 700; }
.busca-topo { flex: 0 1 320px; min-width: 150px; }
.busca-topo input { height: 34px; }
.busca-gaveta { display: none; margin-bottom: 4px; }
.marca { display: flex; align-items: center; gap: 9px; font-weight: 650; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; }
.marca-logo { width: 26px; height: 26px; }
.trilha { display: flex; align-items: center; gap: 6px; color: var(--texto-2); min-width: 0; white-space: nowrap; overflow: hidden; }
.trilha button { background: none; border: 0; padding: 3px 6px; border-radius: 6px; color: var(--texto-2); }
.trilha button:hover { background: var(--sup-3); color: var(--texto); }
.trilha .atual { color: var(--texto); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.trilha .sep { color: var(--texto-3); }

.abas { display: flex; gap: 2px; background: var(--fundo); border: 1px solid var(--borda); padding: 3px; border-radius: 9px; margin-left: auto; }
.aba { border: 0; background: none; color: var(--texto-2); padding: 5px 12px; border-radius: 6px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.aba:hover { color: var(--texto); }
.aba[aria-selected="true"] { background: var(--sup-3); color: var(--texto); box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset; }
.contador { font-size: 11px; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--sup-4); color: var(--texto-2); text-align: center; }
.contador:empty { display: none; }
.contador.alerta { background: var(--aviso-fundo); color: var(--aviso); }

.topo-acoes { display: flex; align-items: center; gap: 8px; }
.estado-salvo { color: var(--texto-3); font-size: 12px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.estado-salvo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--texto-3); }
.estado-salvo.disco::before { background: var(--ok); }
.estado-salvo.navegador::before { background: var(--aviso); }
.estado-salvo.salvando::before { background: var(--info); animation: pulsar 0.8s ease-in-out infinite alternate; }
.estado-salvo.erro { color: var(--perigo); }
.estado-salvo.erro::before { background: var(--perigo); }
@keyframes pulsar { to { opacity: 0.3; } }

.faixa {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  background: linear-gradient(90deg, rgba(90,167,255,0.14), rgba(90,167,255,0.04));
  border-bottom: 1px solid rgba(90,167,255,0.25);
  color: #cfe3ff;
}
.faixa > svg { color: var(--info); }
.faixa span { flex: 1; }

/* ---------- botões e campos ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--borda-forte);
  background: var(--sup-2);
  color: var(--texto);
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s;
}
.btn:hover { background: var(--sup-3); border-color: #4a4a5a; }
.btn.primario { background: var(--acento); border-color: var(--acento); color: #1a0d08; font-weight: 600; }
.btn.primario:hover { background: var(--acento-forte); border-color: var(--acento-forte); }
.btn.perigo { color: var(--perigo); border-color: rgba(255,92,114,0.4); background: var(--perigo-fundo); }
.btn.perigo:hover { background: rgba(255,92,114,0.2); }
.btn.fantasma { background: transparent; border-color: transparent; color: var(--texto-2); }
.btn.fantasma:hover { background: var(--sup-3); color: var(--texto); }
.btn.pequeno { padding: 4px 9px; font-size: 12.5px; border-radius: 7px; }
.btn.largo { width: 100%; justify-content: center; margin-top: 6px; }
.btn .seta { width: 14px; height: 14px; }
.btn:disabled { opacity: 0.45; cursor: default; }
.link { background: none; border: 0; color: var(--acento); padding: 0; font-size: 12px; }
.link:hover { text-decoration: underline; }
.icone-btn {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 7px; border: 1px solid transparent;
  background: transparent; color: var(--texto-2);
}
.icone-btn:hover { background: var(--sup-3); color: var(--texto); }
.icone-btn.mini { width: 22px; height: 22px; }
.icone-btn.mini svg { width: 13px; height: 13px; }
.so-estreito { display: none; }

input[type="text"], input[type="search"], input[type="url"], select, textarea {
  width: 100%;
  background: var(--fundo);
  border: 1px solid var(--borda-forte);
  border-radius: 8px;
  padding: 7px 10px;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
input:focus, select:focus, textarea:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-fundo); }
textarea { resize: vertical; min-height: 64px; line-height: 1.5; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--texto-2) 50%), linear-gradient(135deg, var(--texto-2) 50%, transparent 50%); background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 28px; }
.campo { display: grid; gap: 5px; margin-bottom: 12px; }
.campo > span { color: var(--texto-2); font-size: 12px; }
.obrig { color: var(--acento); font-weight: 500; font-size: 11px; }
.linha-campos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.alternar { display: flex; align-items: center; gap: 9px; padding: 5px 0; color: var(--texto-2); cursor: pointer; user-select: none; }
.alternar:hover { color: var(--texto); }
.alternar input { position: absolute; opacity: 0; pointer-events: none; }
.alternar span { width: 28px; height: 16px; border-radius: 9px; background: var(--sup-4); position: relative; flex: none; transition: background 0.15s; }
.alternar span::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #8b8b9a; transition: transform 0.15s, background 0.15s; }
.alternar input:checked + span { background: rgba(255,122,89,0.45); }
.alternar input:checked + span::after { transform: translateX(12px); background: #fff; }
.alternar input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------- gaveta (menu de projetos e filtros) ---------- */
/* Fechada por padrão, abre por cima do mapa; fixada, vira coluna ao lado dele. */
.lateral {
  position: fixed; top: var(--topo); left: 0; bottom: 0;
  width: min(var(--lateral), 92vw);
  background: var(--sup);
  border-right: 1px solid var(--borda-forte);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 0 14px 30px;
  z-index: 28;
  transform: translateX(-104%);
  visibility: hidden;
  transition: transform 0.24s var(--curva), visibility 0s linear 0.24s, box-shadow 0.24s;
}
.app.com-faixa .lateral { top: calc(var(--topo) + 41px); }
.app.menu-aberto .lateral {
  transform: none; visibility: visible;
  box-shadow: 24px 0 60px rgba(0,0,0,0.5);
  transition: transform 0.24s var(--curva), visibility 0s, box-shadow 0.24s;
}
.app.menu-fixo .lateral {
  position: relative; top: 0; grid-row: 3; width: auto;
  transform: none; visibility: visible; box-shadow: none; transition: none;
  border-right-color: var(--borda);
}
.gaveta-cabeca {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: flex-start; gap: 4px;
  margin: 0 -14px 6px; padding: 14px 10px 10px 16px;
  background: var(--sup);
  border-bottom: 1px solid var(--borda);
}
.gaveta-cabeca > div { flex: 1; min-width: 0; }
.gaveta-titulo { margin: 0; font-size: 14px; font-weight: 650; color: var(--texto); letter-spacing: -0.005em; }
#btnFixarMenu[aria-pressed="true"] { color: var(--acento); background: var(--acento-fundo); }
.busca { position: relative; display: flex; align-items: center; }
.busca > svg { position: absolute; left: 10px; color: var(--texto-3); }
.busca input { padding-left: 32px; padding-right: 34px; background: var(--sup-2); }
.busca kbd { position: absolute; right: 8px; pointer-events: none; }
.busca input:focus ~ kbd, .busca input:not(:placeholder-shown) ~ kbd { display: none; }
.resumo-filtro { color: var(--texto-3); font-size: 12px; margin-top: 2px; }
.secao-lateral { padding: 14px 0 8px; border-top: 1px solid var(--borda); margin-top: 6px; }
.secao-lateral > header, .secao-lateral > summary { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.secao-lateral h2 { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--texto-3); margin: 0; }
.legenda summary { cursor: pointer; list-style: none; }
.legenda summary::-webkit-details-marker { display: none; }
.legenda summary::after { content: "▾"; color: var(--texto-3); font-size: 11px; }
.legenda:not([open]) summary::after { content: "▸"; }

.grupo-projetos { font-size: 10.5px; color: var(--texto-3); letter-spacing: 0.06em; text-transform: uppercase; padding: 10px 8px 4px; }
.grupo-projetos:first-child { padding-top: 0; }
.proj {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  grid-template-areas: "caixa nome acoes" "caixa barra barra";
  column-gap: 8px; row-gap: 5px;
  align-items: center;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
}
.proj:hover { background: var(--sup-2); }
.proj.ativo { background: var(--acento-fundo); border-color: rgba(255,122,89,0.3); }
.proj.focado { border-color: var(--acento); }
.proj .caixa { grid-area: caixa; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--borda-forte); align-self: start; margin-top: 2px; display: grid; place-items: center; }
.proj.ativo .caixa { background: var(--acento); border-color: var(--acento); }
.proj.ativo .caixa::after { content: ""; width: 7px; height: 4px; border: 2px solid #1a0d08; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.proj .nome { grid-area: nome; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj .acoes { grid-area: acoes; display: flex; align-items: center; gap: 6px; color: var(--texto-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.proj .travas { color: var(--perigo); display: inline-flex; align-items: center; gap: 2px; }
.proj .entrar { opacity: 0; border: 0; background: var(--sup-4); color: var(--texto); border-radius: 6px; font-size: 11.5px; padding: 2px 8px; }
.proj .entrar:hover { background: var(--acento); color: #1a0d08; }
.proj:hover .entrar, .proj .entrar:focus-visible { opacity: 1; }
@media (hover: none) { .proj .entrar { opacity: 1; } }
.proj .barra { grid-area: barra; }
.barra { height: 4px; border-radius: 3px; background: var(--sup-4); overflow: hidden; display: flex; }
.barra i { display: block; height: 100%; }
.barra i.ok { background: var(--ok); }
.barra i.and { background: var(--info); opacity: 0.8; }
.barra i.trv { background: var(--perigo); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--borda-forte); background: transparent;
  color: var(--texto-2);
  border-radius: 999px; padding: 3px 10px 3px 8px; font-size: 12px;
}
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cor, var(--texto-3)); }
.chip b { font-weight: 500; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.chip:hover { color: var(--texto); border-color: #4a4a5a; }
.chip[aria-pressed="true"] { color: var(--texto); border-color: var(--cor); background: color-mix(in srgb, var(--cor) 16%, transparent); }

.leg { display: grid; grid-template-columns: 38px 1fr; gap: 8px; align-items: center; padding: 3px 0; color: var(--texto-2); font-size: 12px; }
.leg svg { width: 38px; height: 12px; stroke-width: 2; }
.leg b { color: var(--texto); font-weight: 600; }

/* ---------- área principal ---------- */
.principal { grid-row: 3; grid-column: 1 / -1; position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.app.menu-fixo .principal { grid-column: 2; }
.principal.com-filtros .vista-lista, .principal.com-filtros .vista-passos, .principal.com-filtros .vista-revisao { padding-top: 64px; }

/* filtros ativos ficam visíveis sobre o mapa mesmo com o menu fechado */
.barra-filtros {
  position: absolute; left: 16px; top: 14px; right: 16px; z-index: 12;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  pointer-events: none;
}
.barra-filtros > * { pointer-events: auto; }
.app.menu-aberto:not(.menu-fixo) .barra-filtros { left: calc(min(var(--lateral), 92vw) + 16px); transition: left 0.24s var(--curva); }
.barra-filtros .enquadrar { height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--borda-forte); background: rgba(33,33,42,0.96); color: var(--texto); font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; }
.barra-filtros .enquadrar:hover { border-color: var(--acento); color: var(--acento); }
.barra-filtros .enquadrar svg { width: 14px; height: 14px; }
.barra-filtros .total { color: var(--texto-2); font-size: 12.5px; padding: 0 6px 0 2px; font-variant-numeric: tabular-nums; text-shadow: 0 1px 6px #000; }
.etiqueta {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 6px 0 11px;
  background: rgba(33,33,42,0.96); color: var(--texto);
  border: 1px solid var(--borda-forte); border-radius: 999px;
  font-size: 12.5px; box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}
.etiqueta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cor, var(--acento)); }
.etiqueta.sem-ponto::before { display: none; }
.etiqueta i { font-style: normal; color: var(--texto-3); }
.etiqueta button { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 0; background: transparent; color: var(--texto-2); }
.etiqueta button:hover { background: var(--sup-4); color: var(--texto); }
.etiqueta button svg { width: 12px; height: 12px; stroke-width: 2.4; }
.barra-filtros .limpar { height: 30px; padding: 0 10px; border-radius: 999px; border: 0; background: rgba(33,33,42,0.96); color: var(--acento); font-weight: 600; font-size: 12.5px; }
.barra-filtros .limpar:hover { background: var(--acento-fundo); }
.vista { position: absolute; inset: 0; }
.vista-lista, .vista-passos, .vista-revisao { overflow: auto; padding: 22px 26px 60px; }

/* ---------- mapa ---------- */
.quadro {
  position: absolute; inset: 0;
  overflow: hidden;
  background-color: var(--quadro);
  background-image: radial-gradient(circle, var(--ponto) 1.2px, transparent 1.3px);
  background-size: 22px 22px;
  cursor: grab;
  touch-action: none;
  outline: none;
}
.quadro.arrastando, .quadro.modo-mao.arrastando { cursor: grabbing; }
.quadro.modo-mao, .quadro.modo-mao .no, .quadro.modo-mao .aresta .toque { cursor: grab; }
.quadro.sem-pontos { background-image: none; }
.quadro.arrastando .no, .quadro.arrastando .aresta .toque, .quadro.arrastando .resumo .toque { pointer-events: none; }
.quadro.conectando { cursor: crosshair; }
/* will-change só durante o movimento: parado, o Chrome redesenha o texto na escala certa (sem borrão) */
.palco { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.palco.em-movimento { will-change: transform; }
.camada-molduras, .camada-blocos { position: absolute; left: 0; top: 0; }
.camada-arestas { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; stroke: none; fill: none; }
.camada-arestas marker path { stroke: none; }
.rotulo text { stroke: none; }

.moldura {
  position: absolute;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.085);
  background: rgba(255,255,255,0.022);
}
.palco.muito-longe .moldura { border-width: calc(1px / var(--z, 1)); background: rgba(255,255,255,0.035); }
/* o título mora fora da moldura (acima) e cresce quando o zoom diminui, para continuar legível */
.moldura-cabeca {
  position: absolute; left: 6px; bottom: calc(100% + 6px);
  width: max-content; max-width: calc(100% + 120px);
  display: flex; align-items: baseline; gap: 0.7em;
  white-space: nowrap; overflow: hidden;
  font-size: clamp(13px, calc(13px / var(--z, 1)), 88px);
}
.moldura-nome { font-size: 1.45em; font-weight: 650; color: #ececf3; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; background: none; border: 0; padding: 0; flex: 0 1 auto; min-width: 0; }
.moldura-nome:hover { color: var(--acento); }
.moldura-meta { color: var(--texto-2); font-size: 1em; display: flex; align-items: center; gap: 0.8em; flex: none; }
.moldura-meta .barra { width: 6em; height: 0.35em; }
.moldura-meta .trv { color: var(--perigo); }
.moldura.grupo-demo { border-style: dashed; border-color: rgba(245,184,61,0.3); background: rgba(245,184,61,0.02); }
.palco.muito-longe .moldura-meta { display: none; }

.no {
  position: absolute; left: 0; top: 0;
  width: 250px; height: 88px;
  display: flex;
  background: #21212b;
  border: 1px solid #3a3a48;
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 6px 18px rgba(0,0,0,0.32);
  cursor: pointer;
  user-select: none;
  transition: opacity 0.18s, border-color 0.12s, box-shadow 0.12s;
}
.no:hover { border-color: #5a5a6c; }
.no.selecionado { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(255,122,89,0.28), 0 10px 26px rgba(0,0,0,0.4); z-index: 3; }
.no.arrastado { z-index: 5; box-shadow: 0 16px 36px rgba(0,0,0,0.5); transition: none; }
.no-trilho {
  width: 46px; flex: none;
  display: grid; place-items: center;
  border-right: 1px solid #2e2e39;
  border-radius: 11px 0 0 11px;
  background: color-mix(in srgb, var(--cor) 11%, transparent);
  color: var(--cor);
}
.no-trilho svg { width: 22px; height: 22px; stroke-width: 1.8; }
.no-corpo { flex: 1; min-width: 0; padding: 9px 12px 8px 11px; display: flex; flex-direction: column; justify-content: space-between; }
.no-tipo { font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--texto-3); display: flex; gap: 6px; align-items: center; }
.no-titulo { font-weight: 600; font-size: 14px; line-height: 1.25; color: #f3f3f7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.no-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--texto-2); min-width: 0; }
.pill-status { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; color: var(--cor); }
.pill-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cor); }
.pill-status.inferido::after { content: "?"; font-size: 10px; color: var(--texto-3); margin-left: -2px; }
.no-proj { color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.no .barra { position: absolute; left: 58px; right: 12px; bottom: 7px; height: 3px; }
.tipo-projeto { border-color: #47406e; background: linear-gradient(180deg, #221f33, #1d1d27); }
.tipo-projeto .no-titulo { font-size: 14.5px; }
.tipo-projeto .no-meta { margin-bottom: 5px; }

.selos { position: absolute; top: -9px; right: 10px; display: flex; gap: 4px; }
.selo { height: 18px; min-width: 18px; padding: 0 6px; border-radius: 9px; font-size: 10.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; border: 1px solid; background: var(--sup); white-space: nowrap; }
.selo.trava { color: var(--perigo); border-color: rgba(255,92,114,0.55); }
.selo.revisar { color: var(--aviso); border-color: rgba(245,184,61,0.5); }
.selo.demo { color: #d9b56a; border-color: rgba(245,184,61,0.35); letter-spacing: 0.05em; }
.selo.manual { color: #c9c9d6; border-color: var(--borda-forte); }
.selo.fora { color: var(--texto-3); border-color: var(--borda-forte); }
.selo svg { width: 10px; height: 10px; stroke-width: 2.6; }

.no.travado { border-color: rgba(255,92,114,0.75); box-shadow: 0 0 0 1px rgba(255,92,114,0.35), 0 0 22px rgba(255,92,114,0.16); }
.no.status-entregue .no-titulo { color: #dde4e0; }
.no.status-descontinuado { opacity: 0.55; }
.no.status-descontinuado .no-titulo { text-decoration: line-through; text-decoration-color: var(--texto-3); }
.no.demo { background-image: repeating-linear-gradient(135deg, rgba(245,184,61,0.035) 0 8px, transparent 8px 16px); }
.no.contexto { opacity: 0.6; border-style: dashed; }
.no.esmaecido, .no.fora-caminho { opacity: 0.12; }
.no.esmaecido:hover, .no.fora-caminho:hover { opacity: 0.5; }
.no.no-caminho { border-color: #8fb8ff; }
.no.alvo-conexao { border-color: var(--ok); box-shadow: 0 0 0 3px rgba(70,214,140,0.3); }
.no.piscar { animation: piscar 0.9s ease-out 2; }
@keyframes piscar { 50% { box-shadow: 0 0 0 10px rgba(255,122,89,0.35); } }

.porta {
  position: absolute; top: 50%;
  width: 14px; height: 14px; margin-top: -7px;
  border-radius: 50%;
  background: var(--sup);
  border: 2px solid #5a5a6a;
  cursor: crosshair;
  opacity: 0; transition: opacity 0.12s, transform 0.12s, border-color 0.12s;
}
.porta.entrada { left: -8px; }
.porta.saida { right: -8px; }
.no:hover .porta, .no.selecionado .porta, .quadro.conectando .porta { opacity: 1; }
.porta:hover { transform: scale(1.35); border-color: var(--acento); background: var(--acento); }

/* longe: só ícone e título, em corpo maior, com a faixa de status embaixo */
.palco.longe .no-meta, .palco.longe .no-tipo, .palco.longe .porta, .palco.longe .no .barra { display: none; }
.palco.longe .no-corpo { justify-content: center; padding: 4px 12px 9px; }
.palco.longe .no-titulo { font-size: 21px; font-weight: 650; line-height: 1.12; -webkit-line-clamp: 3; letter-spacing: -0.01em; }
.palco.longe .no-trilho svg { width: 30px; height: 30px; stroke-width: 2.2; }
.palco.longe .no { box-shadow: none; }
.palco.longe .no::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 7px; border-radius: 0 0 12px 12px; background: var(--st); }
.palco.longe .selo:not(.trava) { display: none; }
.palco.longe .selo.trava { height: 34px; font-size: 20px; padding: 0 12px; border-radius: 17px; top: -18px; }
/* muito longe: placa colorida pelo tipo; o nome aparece no cartão ao passar o mouse */
.palco.muito-longe .no-corpo { display: none; }
.palco.muito-longe .no { background: color-mix(in srgb, var(--cor) 24%, #1b1b23); border-color: color-mix(in srgb, var(--cor) 60%, #1b1b23); border-width: 3px; }
.palco.muito-longe .no-trilho { width: 100%; border: 0; border-radius: 10px; background: transparent; }
.palco.muito-longe .no-trilho svg { width: 44px; height: 44px; stroke-width: 2.6; }
.palco.muito-longe .no::after { height: 16px; }
.palco.muito-longe .no.travado { box-shadow: 0 0 0 10px rgba(255,92,114,0.55); }
.palco.muito-longe .no.selecionado { box-shadow: 0 0 0 12px rgba(255,122,89,0.7); }
.palco.muito-longe .selo.trava { height: 48px; font-size: 28px; padding: 0 16px; border-radius: 24px; top: -26px; }

/* arestas */
.aresta .linha { fill: none; stroke: var(--cor); stroke-width: 2.25; opacity: 0.88; }
.aresta .toque { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; }
.aresta:hover .linha { stroke-width: 3; opacity: 1; }
.aresta.sugerida .linha { stroke-dasharray: 7 6; opacity: 0.75; }
.aresta.selecionada .linha { stroke-width: 3.5; opacity: 1; filter: drop-shadow(0 0 6px var(--cor)); }
.aresta.pendente .linha { stroke-dasharray: 10 7; animation: correr 0.9s linear infinite; opacity: 1; }
.aresta.no-caminho .linha { stroke-width: 3; opacity: 1; }
.aresta.esmaecida { opacity: 0.07; }
.aresta.esmaecida .toque { pointer-events: none; }
@keyframes correr { to { stroke-dashoffset: -17; } }
.rotulo rect { fill: #17171e; stroke: var(--cor); stroke-opacity: 0.55; }
.rotulo text { fill: var(--cor); font: 600 11px var(--fonte); }
.aresta.sugerida .rotulo rect { stroke-dasharray: 3 2; }
.palco.medio .rotulo { display: none; }
.palco.medio .aresta:hover .rotulo, .palco.medio .aresta.selecionada .rotulo, .palco.medio .aresta.no-caminho .rotulo { display: inline; }
.palco.longe .rotulo { display: none; }
.palco.longe .aresta .linha { stroke-width: 4; }
.palco.muito-longe .aresta .linha { stroke-width: 7; }
.aresta.do-selecionado .linha { stroke-width: 3; opacity: 1; }
.palco.medio .aresta.do-selecionado .rotulo { display: inline; }
.palco.longe .aresta.do-selecionado .linha { stroke-width: 6; }
.resumo .linha { fill: none; stroke: #9a9eb3; opacity: 0.4; stroke-linecap: round; }
.resumo .toque { fill: none; stroke: transparent; stroke-width: 40; pointer-events: stroke; cursor: pointer; }
.resumo:hover .linha { opacity: 0.75; stroke: var(--acento); }
.resumo text { fill: #e2e3ec; font: 700 clamp(11px, calc(12px / var(--z, 1)), 70px) var(--fonte); paint-order: stroke; stroke: #131318; stroke-width: calc(5px / var(--z, 1)); stroke-linejoin: round; pointer-events: none; }
.resumo.esmaecida { opacity: 0.25; }
.aresta-temporaria { fill: none; stroke: var(--acento); stroke-width: 2.5; stroke-dasharray: 6 5; }

.barra-mapa {
  position: absolute; left: 16px; bottom: 28px;
  display: flex; align-items: center; gap: 4px;
  background: rgba(23,23,29,0.92);
  border: 1px solid var(--borda);
  border-radius: 11px;
  padding: 4px;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  z-index: 10;
}
.zoom-valor { border: 0; background: none; color: var(--texto-2); font-size: 12px; min-width: 46px; font-variant-numeric: tabular-nums; padding: 5px 2px; border-radius: 6px; }
.zoom-valor:hover { background: var(--sup-3); color: var(--texto); }
.divisor { width: 1px; height: 20px; background: var(--borda); margin: 0 4px; }

.dica-mapa {
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  background: rgba(23,23,29,0.92);
  border: 1px solid var(--borda);
  color: var(--texto-2); font-size: 12px;
  padding: 5px 6px 5px 14px; border-radius: 20px;
  max-width: calc(100% - 32px);
  z-index: 10;
}

.minimapa {
  position: absolute; right: 30px; bottom: 28px;
  background: rgba(20,20,26,0.94);
  border: 1px solid var(--borda);
  border-radius: 11px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  z-index: 10;
  cursor: pointer;
}
.minimapa canvas { display: block; width: 220px; height: 140px; }
.app.painel-aberto .minimapa { right: calc(var(--painel) + 30px); }

/* barras de rolagem do mapa */
.rolagem { position: absolute; z-index: 11; background: #15151b; }
.rolagem-h { left: 0; right: 16px; bottom: 0; height: 16px; border-top: 1px solid var(--borda-forte); }
.rolagem-v { top: 0; right: 0; bottom: 16px; width: 16px; border-left: 1px solid var(--borda-forte); }
.app.painel-aberto .rolagem-v { right: var(--painel); }
.app.painel-aberto .rolagem-h { right: calc(var(--painel) + 16px); }
.polegar {
  position: absolute; left: 0; top: 0;
  border-radius: 7px;
  background: #7b7b8f;
  cursor: grab; touch-action: none;
  transition: background 0.15s, height 0.12s, width 0.12s, top 0.12s, left 0.12s;
}
.rolagem-h .polegar { top: 3px; height: 9px; }
.rolagem-v .polegar { left: 3px; width: 9px; }
.rolagem:hover .polegar { background: #a9a9bd; }
.rolagem-h:hover .polegar, .rolagem-h .polegar.ativo { top: 2px; height: 11px; }
.rolagem-v:hover .polegar, .rolagem-v .polegar.ativo { left: 2px; width: 11px; }
.polegar.ativo { background: var(--acento); cursor: grabbing; }
.rolagem.sem-rolagem .polegar { opacity: 0.3; }
.barra-filtros { right: 30px; }
.app.painel-aberto .dica-mapa { display: none; }
.dica-mapa kbd { font-size: 10.5px; }
@media (max-width: 1280px) { .dica-mapa { display: none; } }

/* cartão do bloco sob o mouse (nítido em qualquer zoom) */
.dica-bloco {
  position: fixed; z-index: 45; pointer-events: none;
  max-width: 300px; padding: 10px 12px;
  background: #262631; color: var(--texto);
  border: 1px solid var(--borda-forte); border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.5);
  font-size: 12.5px; line-height: 1.4;
}
.dica-bloco b { display: block; font-size: 13.5px; font-weight: 650; margin-bottom: 4px; }
.dica-bloco .linha-dica { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--texto-2); font-size: 11.5px; }
.dica-bloco .linha-dica span { display: inline-flex; align-items: center; gap: 5px; }
.dica-bloco .linha-dica span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.dica-bloco p { margin: 6px 0 0; color: var(--texto-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dica-bloco .trava-dica { color: #ffb3bd; margin-top: 6px; }

.vazio {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  text-align: center; color: var(--texto-2);
  background: var(--sup); border: 1px solid var(--borda); border-radius: 14px; padding: 22px 28px;
  z-index: 9;
}
.vazio h3 { margin: 0 0 6px; color: var(--texto); }

/* ---------- painel de detalhes ---------- */
.painel {
  position: fixed; top: var(--topo); right: 0; bottom: 0;
  width: var(--painel); max-width: 100vw;
  background: var(--sup);
  border-left: 1px solid var(--borda);
  box-shadow: -18px 0 40px rgba(0,0,0,0.35);
  overflow-y: auto;
  z-index: 25;
  animation: entrar 0.16s ease-out;
}
.app.com-faixa .painel { top: calc(var(--topo) + 41px); }
@keyframes entrar { from { transform: translateX(24px); opacity: 0; } }
.painel-cabeca {
  position: sticky; top: 0; z-index: 2;
  background: var(--sup);
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--borda);
}
.painel-linha { display: flex; align-items: center; gap: 8px; }
.painel-linha .espaco { flex: 1; }
.painel-tipo { display: inline-flex; align-items: center; gap: 8px; color: var(--cor); font-size: 12px; font-weight: 600; }
.painel-tipo .icone { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, var(--cor) 16%, transparent); }
.painel-tipo select { width: auto; padding: 3px 26px 3px 8px; font-size: 12px; background-color: transparent; border-color: transparent; color: var(--cor); font-weight: 600; }
.painel-tipo select:hover { border-color: var(--borda-forte); }
.titulo-edit {
  width: 100%; margin-top: 8px;
  font-size: 18px; font-weight: 650; line-height: 1.3;
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  padding: 4px 6px; margin-left: -7px;
  resize: none; overflow: hidden; min-height: 0;
}
.titulo-edit:hover { border-color: var(--borda); }
.painel-props { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.painel-props label { display: grid; gap: 3px; font-size: 11px; color: var(--texto-3); }
.painel-props select { padding: 5px 26px 5px 9px; font-size: 12.5px; }
.selo-origem { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--borda-forte); color: var(--texto-2); }
.selo-origem.sincronizado { color: #9cc9ff; border-color: rgba(90,167,255,0.4); background: rgba(90,167,255,0.08); }
.selo-origem.manual { color: #e0e0ea; }
.selo-origem.demonstracao { color: #e2c27d; border-color: rgba(245,184,61,0.4); background: var(--aviso-fundo); }
.painel-selos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.painel-corpo { padding: 4px 16px 30px; }
.bloco-painel { padding: 14px 0 8px; border-bottom: 1px solid var(--borda); }
.bloco-painel:last-child { border-bottom: 0; }
.bloco-painel > h3 { margin: 0 0 9px; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--texto-3); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.bloco-painel > h3 .espaco { flex: 1; }
.bloco-painel textarea { background: var(--sup-2); }
.nota-campo { color: var(--texto-3); font-size: 11.5px; margin-top: 4px; }

.alerta-trava { border: 1px solid rgba(255,92,114,0.4); background: var(--perigo-fundo); border-radius: 10px; padding: 10px 12px; margin-top: 14px; }
.alerta-trava h4 { margin: 0 0 6px; color: var(--perigo); font-size: 13px; display: flex; gap: 6px; align-items: center; }
.alerta-trava ul { margin: 0; padding-left: 18px; color: #f3c3ca; }
.alerta-trava li { margin: 3px 0; }
.alerta-aviso { border: 1px solid rgba(245,184,61,0.35); background: var(--aviso-fundo); color: #f0d9a4; border-radius: 10px; padding: 8px 12px; margin-top: 10px; font-size: 12.5px; }

.ref-bloco { background: none; border: 0; padding: 0; color: var(--texto); text-decoration: underline; text-decoration-color: var(--borda-forte); text-underline-offset: 3px; text-align: left; }
.ref-bloco:hover { color: var(--acento); text-decoration-color: var(--acento); }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.checklist li { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: start; padding: 5px 4px; border-radius: 7px; }
.checklist li:hover { background: var(--sup-2); }
.checklist input[type="checkbox"] { margin: 2px 0 0; accent-color: var(--acento); width: 15px; height: 15px; }
.checklist li.feito .texto { color: var(--texto-3); text-decoration: line-through; }
.checklist .origem-mini { font-size: 10px; color: var(--texto-3); margin-left: 6px; }
.checklist .remover { opacity: 0; }
.checklist li:hover .remover { opacity: 1; }
.adicionar-linha { display: flex; gap: 6px; margin-top: 6px; }
.adicionar-linha input { padding: 5px 9px; background: var(--sup-2); }

.lista-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.lista-links li { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; padding: 6px 8px; border-radius: 8px; background: var(--sup-2); border: 1px solid var(--borda); }
.lista-links a { color: #9cc9ff; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-links a:hover { text-decoration: underline; }
.lista-links .url { display: block; font: 11px var(--mono); color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-links .acoes-link { display: flex; gap: 2px; }
.form-link { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 6px; margin-top: 6px; }
.form-link input { padding: 5px 9px; background: var(--sup-2); }

.conexoes-painel { display: grid; gap: 4px; }
.conexao-linha { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--borda); background: var(--sup-2); }
.conexao-linha.chega { grid-template-columns: 1fr auto auto; }
.conexao-linha .ref-bloco { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.conexao-linha.sugerida { border-style: dashed; border-color: rgba(245,184,61,0.45); }
.conexao-linha .rel { font-size: 11.5px; font-weight: 600; color: var(--cor); white-space: nowrap; }
.conexao-linha .rel::before { content: ""; display: inline-block; width: 14px; height: 2px; background: var(--cor); vertical-align: middle; margin-right: 6px; }
.conexao-linha .acoes-conexao { display: flex; gap: 2px; }
.subtitulo-painel { font-size: 11.5px; color: var(--texto-3); margin: 8px 0 4px; }
.nova-conexao { display: grid; grid-template-columns: 1fr 1.3fr auto; gap: 6px; margin-top: 8px; }
.nova-conexao select, .nova-conexao input { padding: 5px 9px; font-size: 12.5px; background-color: var(--sup-2); }

.trilha-caminho { display: grid; gap: 3px; margin-top: 6px; }
.passo-caminho { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 7px; font-size: 12.5px; }
.passo-caminho:hover { background: var(--sup-2); }
.passo-caminho .ponto { width: 9px; height: 9px; border-radius: 3px; background: var(--cor); flex: none; }
.passo-caminho .prof { color: var(--texto-3); font-size: 11px; width: 26px; text-align: right; font-variant-numeric: tabular-nums; flex: none; }
.passo-caminho.atual { background: var(--acento-fundo); font-weight: 600; }
.passo-caminho .st { margin-left: auto; font-size: 11px; color: var(--cor-st); white-space: nowrap; }

.origem-caixa { background: var(--sup-2); border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; color: var(--texto-2); display: grid; gap: 4px; }
.origem-caixa b { color: var(--texto); font-weight: 600; }
.origem-caixa q { color: var(--texto); font-style: italic; }
.historico { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.historico li { display: grid; grid-template-columns: auto 1fr; gap: 8px; font-size: 12px; color: var(--texto-2); }
.historico time { color: var(--texto-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tag { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 0 6px; border-radius: 4px; margin-right: 5px; vertical-align: 1px; }
.tag.manual { background: var(--sup-4); color: #ddd; }
.tag.sincronizado { background: rgba(90,167,255,0.18); color: #9cc9ff; }
.tag.demonstracao { background: var(--aviso-fundo); color: var(--aviso); }

.painel-rodape { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px 20px; border-top: 1px solid var(--borda); }
.painel-rodape .espaco { flex: 1; }

.progresso-grande { display: grid; gap: 8px; }
.progresso-grande .barra { height: 8px; border-radius: 5px; }
.progresso-grande .numeros { display: flex; justify-content: space-between; color: var(--texto-2); font-size: 12.5px; }
.progresso-grande .numeros b { color: var(--texto); font-size: 20px; font-weight: 650; }
.contagem-status { display: flex; flex-wrap: wrap; gap: 5px; }

/* aresta selecionada: cartão flutuante */
.cartao-aresta { position: fixed; z-index: 40; width: 330px; background: var(--sup); border: 1px solid var(--borda-forte); border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,0.5); padding: 12px 14px; }
.cartao-aresta .frase { font-size: 14px; line-height: 1.45; margin: 2px 0 10px; }
.cartao-aresta .frase .rel { color: var(--cor); font-weight: 650; }
.cartao-aresta .meta { color: var(--texto-3); font-size: 12px; margin-bottom: 10px; display: grid; gap: 3px; }
.cartao-aresta .linha-botoes { display: flex; flex-wrap: wrap; gap: 6px; }
.cartao-aresta select { margin-bottom: 8px; }

/* ---------- lista ---------- */
.cabeca-vista { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.cabeca-vista h1 { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -0.01em; }
.cabeca-vista p { margin: 4px 0 0; color: var(--texto-2); }
.cabeca-vista .espaco { flex: 1; }
.tabela-wrap { overflow-x: auto; border: 1px solid var(--borda); border-radius: 12px; background: var(--sup); }
table.tabela { border-collapse: collapse; width: 100%; min-width: 980px; }
.tabela th { position: sticky; top: 0; background: var(--sup-2); text-align: left; font-size: 11.5px; font-weight: 600; color: var(--texto-2); padding: 9px 12px; border-bottom: 1px solid var(--borda); white-space: nowrap; user-select: none; }
.tabela th[data-ordem] { cursor: pointer; }
.tabela th[data-ordem]:hover { color: var(--texto); }
.tabela th .ind { color: var(--acento); margin-left: 4px; }
.tabela td { padding: 9px 12px; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr { cursor: pointer; }
.tabela tbody tr:hover td { background: var(--sup-2); }
.tabela tbody tr.selecionado td { background: var(--acento-fundo); }
.tabela tr.esmaecido { display: none; }
.tabela .tit { font-weight: 600; }
.tabela .desc { color: var(--texto-3); font-size: 12px; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; max-width: 420px; }
.tabela .tipo-cel { display: inline-flex; align-items: center; gap: 6px; color: var(--cor); font-size: 12px; white-space: nowrap; }
.tabela .tipo-cel svg { width: 15px; height: 15px; }
.tabela select.status-rapido { width: auto; padding: 3px 24px 3px 8px; font-size: 12px; color: var(--cor); background-color: transparent; border-color: transparent; font-weight: 600; }
.tabela select.status-rapido:hover { border-color: var(--borda-forte); }
.tabela .pend { color: var(--perigo); font-size: 12px; }
.tabela .muted { color: var(--texto-3); font-size: 12px; }
.tabela .prox { font-size: 12.5px; color: var(--texto-2); max-width: 280px; }

/* ---------- próximos passos e revisão ---------- */
.colunas-passos { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; align-items: start; }
.cartao { background: var(--sup); border: 1px solid var(--borda); border-radius: 14px; padding: 14px 16px; }
.cartao > header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cartao > header h2 { margin: 0; font-size: 15px; font-weight: 650; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao > header .barra { width: 70px; }
.cartao.travas { border-color: rgba(255,92,114,0.35); background: linear-gradient(180deg, rgba(255,92,114,0.06), var(--sup) 120px); }
.item-passo { display: grid; grid-template-columns: 18px 1fr; gap: 9px; padding: 7px 4px; border-top: 1px solid var(--borda); }
.item-passo:first-of-type { border-top: 0; }
.item-passo input { accent-color: var(--acento); margin-top: 3px; width: 15px; height: 15px; }
.item-passo .texto { color: var(--texto); }
.item-passo.feito .texto { color: var(--texto-3); text-decoration: line-through; }
.item-passo .de { font-size: 12px; color: var(--texto-3); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.item-trava { padding: 8px 4px; border-top: 1px solid var(--borda); }
.item-trava:first-of-type { border-top: 0; }
.item-trava .motivos { margin: 4px 0 0; padding-left: 18px; color: #f3c3ca; font-size: 12.5px; }
.mini-status { font-size: 11px; color: var(--cor); display: inline-flex; align-items: center; gap: 4px; }
.mini-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cor); }
.faixa-filtros { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.grade-revisao { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; align-items: start; }
.item-revisao { padding: 10px 2px; border-top: 1px solid var(--borda); display: grid; gap: 6px; }
.item-revisao:first-of-type { border-top: 0; }
.item-revisao .frase { font-size: 13.5px; }
.item-revisao .frase .rel { color: var(--cor); font-weight: 650; }
.item-revisao .evid { color: var(--texto-2); font-size: 12.5px; border-left: 2px solid var(--borda-forte); padding-left: 9px; }
.item-revisao .fonte { color: var(--texto-3); font-size: 11.5px; font-family: var(--mono); }
.item-revisao .linha-botoes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.item-revisao select { width: auto; padding: 3px 26px 3px 8px; font-size: 12px; }
.vazio-cartao { color: var(--texto-3); padding: 6px 0; }
.mais { margin-top: 8px; }

/* ---------- diálogos, menu e aviso ---------- */
.menu-wrap { position: relative; }
.grupo-btn { display: inline-flex; }
.grupo-btn > .btn:first-child { border-radius: 8px 0 0 8px; }
.grupo-btn > .seta-split { border-radius: 0 8px 8px 0; padding-inline: 6px; border-left: 1px solid rgba(26,13,8,0.25); }
.menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 260px; background: var(--sup-2);
  border: 1px solid var(--borda-forte); border-radius: 11px;
  padding: 5px; box-shadow: 0 16px 40px rgba(0,0,0,0.5); z-index: 50;
}
.menu kbd { margin-left: auto; }
.menu button { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: 0; padding: 7px 10px; border-radius: 7px; }
.menu button:hover { background: var(--sup-4); }
.menu button.perigo { color: var(--perigo); }
.menu hr { border: 0; border-top: 1px solid var(--borda); margin: 5px 2px; }

.dialogo {
  background: var(--sup); color: var(--texto);
  border: 1px solid var(--borda-forte); border-radius: 16px;
  padding: 20px 22px; width: min(480px, calc(100vw - 32px));
  box-shadow: 0 30px 70px rgba(0,0,0,0.6);
}
.dialogo.largo { width: min(680px, calc(100vw - 32px)); }
.dialogo::backdrop { background: rgba(6,6,10,0.6); backdrop-filter: blur(3px); }
.dialogo h3 { margin: 0 0 10px; font-size: 17px; }
.dialogo footer { display: flex; gap: 8px; align-items: center; margin-top: 16px; }
.dialogo footer .espaco { flex: 1; }
.dialogo .ajuda { color: var(--texto-2); font-size: 12.5px; margin: 0 0 12px; }
.frase-relacao { background: var(--sup-2); border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; font-size: 14px; margin: 0 0 12px; }
.frase-relacao .rel { color: var(--cor); font-weight: 650; }
.opcoes-relacao { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.opcao-rel { display: grid; gap: 1px; text-align: left; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--borda-forte); background: var(--sup-2); }
.opcao-rel b { color: var(--cor); font-weight: 650; }
.opcao-rel span { color: var(--texto-3); font-size: 11.5px; }
.opcao-rel[aria-pressed="true"] { border-color: var(--cor); background: color-mix(in srgb, var(--cor) 13%, var(--sup-2)); }
.opcoes-importar { display: grid; gap: 8px; }
.opcao { display: grid; grid-template-columns: 18px 1fr; gap: 8px; padding: 10px 12px; border: 1px solid var(--borda-forte); border-radius: 10px; cursor: pointer; color: var(--texto-2); }
.opcao b { color: var(--texto); }
.opcao input { accent-color: var(--acento); margin-top: 3px; }
.atalhos { width: 100%; border-collapse: collapse; }
.atalhos td { padding: 6px 4px; border-bottom: 1px solid var(--borda); }
.atalhos td:first-child { white-space: nowrap; width: 40%; }
.resumo-sinc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0 12px; }
.resumo-sinc div { background: var(--sup-2); border: 1px solid var(--borda); border-radius: 10px; padding: 9px 10px; }
.resumo-sinc b { display: block; font-size: 20px; }
.resumo-sinc span { color: var(--texto-3); font-size: 11.5px; }
.lista-sinc { max-height: 260px; overflow: auto; border: 1px solid var(--borda); border-radius: 10px; padding: 6px 10px; font-size: 12.5px; color: var(--texto-2); }
.lista-sinc li { margin: 3px 0; }

.aviso {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: #2a2a35; color: var(--texto);
  border: 1px solid var(--borda-forte); border-radius: 10px;
  padding: 9px 14px; z-index: 60;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
  display: flex; gap: 12px; align-items: center;
  max-width: calc(100vw - 32px);
}
.aviso button { background: none; border: 0; color: var(--acento); font-weight: 600; padding: 0; }

/* ---------- telas estreitas ---------- */
@media (max-width: 1360px) {
  .marca span { display: none; }
}
@media (max-width: 1100px) {
  .estado-salvo span.texto { display: none; }
  .trilha { display: none; }
  .btn-menu .rotulo-menu { display: none; }
}
@media (max-width: 900px) {
  :root { --topo: 52px; }
  .app, .app.menu-fixo { grid-template-columns: 1fr; }
  .app.menu-fixo .principal { grid-column: 1 / -1; }
  .app.menu-fixo .lateral { position: fixed; top: var(--topo); width: min(var(--lateral), 92vw); transform: translateX(-104%); visibility: hidden; }
  .app.menu-fixo.menu-aberto .lateral { transform: none; visibility: visible; box-shadow: 24px 0 60px rgba(0,0,0,0.5); }
  #btnFixarMenu { display: none; }
  .marca { display: none; }
  .busca-topo { display: none; }
  .busca-gaveta { display: flex; }
  .topo { gap: 8px; padding-inline: 10px; }
  .abas { overflow-x: auto; margin-left: 0; flex: 1; }
  .btn#btnNovo span { display: none; }
  .barra-filtros, .app.menu-aberto:not(.menu-fixo) .barra-filtros { left: 10px; right: 10px; top: 10px; }
  .painel { width: 100vw; }
  .minimapa, .dica-mapa { display: none; }
  .vista-lista, .vista-passos, .vista-revisao { padding: 16px 16px 60px; }
  .linha-campos { grid-template-columns: 1fr; }
  .colunas-passos, .grade-revisao { grid-template-columns: 1fr; }
  .opcoes-relacao { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  #btnDados { padding-inline: 8px; }
  .estado-salvo { display: none; }
  .resumo-sinc { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1101px) { .etiqueta-foco { display: none; } }

/* ---------- ramos e posições feitas à mão ---------- */
.no .pino { display: none; margin-left: auto; color: var(--texto-3); }
.no .pino svg { width: 12px; height: 12px; stroke-width: 2.2; }
.no.fixado .pino { display: inline-flex; }
.palco.longe .no .pino { display: none; }
.no.no-ramo { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(255,122,89,0.3), 0 10px 26px rgba(0,0,0,0.4); }
.moldura-nome { cursor: grab; }
.moldura-nome::before {
  content: ""; display: inline-block; width: 0.5em; height: 0.8em; margin-right: 0.45em; vertical-align: -0.02em;
  background: radial-gradient(circle, currentColor 1.2px, transparent 1.5px) 0 0 / 0.25em 0.27em;
  opacity: 0.45;
}
.moldura-nome:active { cursor: grabbing; }
.selo-origem .link { font-size: 11.5px; margin-left: 2px; }
.selo-origem svg { width: 12px; height: 12px; }
.aviso button + button { margin-left: 2px; padding-left: 12px; border-left: 1px solid var(--borda-forte); }

.aviso-copia { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; white-space: nowrap; padding: 2px 8px; border-radius: 999px; color: var(--aviso); border: 1px solid rgba(245,184,61,0.4); }
.aviso-copia svg { width: 13px; height: 13px; }
@media (max-width: 1100px) { .aviso-copia .texto { display: none; } }
@media (max-width: 560px) { .aviso-copia { display: none; } }

/* ---------- estruturas dos projetos ---------- */
.vista-estruturas { overflow: auto; padding: 22px 26px 60px; }
.principal.com-filtros .vista-estruturas { padding-top: 64px; }
.contador.erro { background: var(--perigo-fundo); color: var(--perigo); }
.estado-leitura { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.pulsando { width: 8px; height: 8px; border-radius: 50%; background: var(--info); animation: pulsar 0.8s ease-in-out infinite alternate; }
.tabela-estruturas { min-width: 1100px; }
.tabela-estruturas tbody tr { cursor: default; }
.tabela-estruturas tr.com-erro td:first-child { box-shadow: inset 3px 0 0 var(--perigo); }
.tabela-estruturas .mono { font-family: var(--mono); font-size: 11px; }
.stack-mini { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.stack-mini span { font-size: 10.5px; padding: 0 6px; border-radius: 4px; background: var(--sup-3); color: var(--texto-2); }
.saude-cel { max-width: 380px; }
.saude-proj { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12.5px; color: var(--texto-2); }
.saude-proj::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--texto-3); }
.saude-proj.sp-ok { color: var(--ok); } .saude-proj.sp-ok::before { background: var(--ok); }
.saude-proj.sp-aviso { color: var(--aviso); } .saude-proj.sp-aviso::before { background: var(--aviso); }
.saude-proj.sp-erro { color: var(--perigo); } .saude-proj.sp-erro::before { background: var(--perigo); }
.saude-proj.sp-lendo { color: var(--info); } .saude-proj.sp-lendo::before { background: var(--info); animation: pulsar 0.8s ease-in-out infinite alternate; }
.prob-curto { margin-top: 4px; font-size: 12px; color: var(--texto-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prob-curto code { font-size: 11px; }
.tabela-estruturas select.vinculo { padding: 4px 26px 4px 8px; font-size: 12px; max-width: 220px; }
.acoes-estr { white-space: nowrap; }
.acoes-estr .btn { margin: 2px 0; }
.acoes-estr a.btn { text-decoration: none; }
.selo.codigo { color: var(--texto-2); border-color: var(--borda-forte); }
.selo.codigo.sc-ok { color: var(--ok); border-color: rgba(70,214,140,0.45); }
.selo.codigo.sc-aviso { color: var(--aviso); border-color: rgba(245,184,61,0.5); }
.selo.codigo.sc-erro { color: var(--perigo); border-color: rgba(255,92,114,0.6); }
.palco.longe .selo.codigo.sc-erro { display: inline-flex; height: 34px; font-size: 20px; padding: 0 12px; border-radius: 17px; top: -18px; }
.codigo-linha { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--sup-2); border: 1px solid var(--borda); margin-bottom: 6px; }
.codigo-linha.cl-erro { border-color: rgba(255,92,114,0.45); }
.codigo-linha.cl-ok { border-color: rgba(70,214,140,0.3); }
.codigo-texto { display: grid; gap: 2px; min-width: 0; font-size: 12.5px; color: var(--texto-2); }
.codigo-texto b { color: var(--texto); }
.codigo-texto .url { font: 11px var(--mono); color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.codigo-prob { color: #ffc2ca; font-size: 12px; }
.codigo-linha a.btn { text-decoration: none; }

/* grafos: a fonte do mapa ao lado da marca */
.marca-fonte { font-size: 0.78em; font-weight: 500; color: var(--texto-3); white-space: nowrap; }
@media (max-width: 900px) { .marca-fonte { display: none; } }

/* grafos: levar um bloco de uma moldura para outra */
.moldura.alvo-soltar {
  border-style: dashed;
  border-width: clamp(2px, calc(2px / var(--z, 1)), 24px);
  border-color: var(--acento);
  background: color-mix(in srgb, var(--acento) 11%, transparent);
}
.moldura.alvo-recusado {
  border-style: dashed;
  border-width: clamp(2px, calc(2px / var(--z, 1)), 24px);
  border-color: var(--perigo);
  background: rgba(255, 92, 114, 0.06);
}
.moldura-soltar {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  max-width: 90%; padding: 0.5em 0.9em; border-radius: 0.7em;
  font-size: clamp(13px, calc(14px / var(--z, 1)), 96px); font-weight: 600; text-align: center;
  background: rgba(16, 16, 22, 0.88); color: #fff; pointer-events: none; white-space: normal;
}
.moldura.alvo-soltar .moldura-soltar { box-shadow: 0 0 0 1px var(--acento); }
.moldura.alvo-recusado .moldura-soltar { box-shadow: 0 0 0 1px var(--perigo); }
.no.pego { box-shadow: 0 0 0 clamp(3px, calc(4px / var(--z, 1)), 40px) var(--acento); }
.quadro.pegando, .quadro.pegando * { cursor: grabbing !important; }