:root {
  --fundo: #1c1c1e;
  --fundo-2: #202022;
  --fundo-3: #2a2a2d;
  --borda: #35353a;
  --texto: #e6e6e8;
  --texto-fraco: #8d8d94;
  --destaque: #6c8cff;
  --destaque-fraco: #6c8cff22;
  --perigo: #e05a58;
  --ok: #4caf50;
  --grade: #ffffff0a;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 14px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden;
}

body { display: grid; grid-template-columns: 270px 1fr; }

/* Lista minimizada: a coluna some inteira e sobra só o ☰ flutuando no canto,
   para o mapa ocupar a tela toda sem perder o caminho de volta. */
body.sem-lateral { grid-template-columns: 0 1fr; }
/* `display:none` aqui tira a barra do grid e o palco herda a coluna de 0px.
   Encolher para zero mantém cada um na sua coluna. */
body.sem-lateral #lateral {
  width: 0;
  min-width: 0;
  overflow: hidden;
  border-right: 0;
  visibility: hidden;
}
body.sem-lateral.com-arsenal { grid-template-columns: 0 1fr 310px; }

#btAbrirLateral {
  display: none;
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 40;
  width: 30px;
  height: 30px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--fundo-2);
  color: var(--texto);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
#btAbrirLateral:hover { border-color: var(--destaque); color: var(--destaque); }
body.sem-lateral #btAbrirLateral { display: block; }
/* O ☰ mora onde a barra de cima começa, então ela abre espaço para ele. */
body.sem-lateral .barra { padding-left: 48px; }

/* ---------------- barra lateral ---------------- */

#lateral {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--fundo-2);
  border-right: 1px solid var(--borda);
}

.lateral-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 12px 12px 16px;
  border-bottom: 1px solid var(--borda);
}
.lateral-topo h1 { margin: 0; font-size: 15px; letter-spacing: .3px; }
.lateral-topo p { margin: 2px 0 0; font-size: 12px; color: var(--texto-fraco); }

.lateral-acoes { display: flex; gap: 8px; padding: 12px 14px 8px; }
.lateral-acoes button { flex: 1; }

.busca {
  margin: 4px 14px 10px;
  padding: 7px 10px;
  background: var(--fundo-3);
  border: 1px solid var(--borda);
  border-radius: 6px;
  color: var(--texto);
  font: inherit; font-size: 13px;
}
.busca:focus { outline: none; border-color: var(--destaque); }

.arvore { flex: 1; min-height: 0; overflow-y: auto; padding: 0 6px 20px; }
.arvore.alvo { background: var(--destaque-fraco); border-radius: 8px; }

.no-linha {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}
.no-linha:hover { background: var(--fundo-3); }
.no.arrastando > .no-linha { opacity: .4; }
.no.pasta.alvo > .no-linha { background: var(--destaque-fraco); outline: 1px solid var(--destaque); }

.no .seta { font-size: 9px; color: var(--texto-fraco); width: 10px; transition: transform .15s; }
.no.pasta.fechada > .no-linha .seta { transform: rotate(-90deg); }
.no.pasta.fechada > .filhos { display: none; }
.no .icone { font-size: 12px; opacity: .85; }

.no .nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.no .nome.editando {
  outline: 1px solid var(--destaque);
  border-radius: 3px;
  padding: 0 3px;
  overflow: visible;
  text-overflow: clip;
  cursor: text;
}
.no.pasta > .no-linha .nome { font-weight: 600; }
.no.mapa > .no-linha { color: var(--texto-fraco); }
.no.mapa:hover > .no-linha { color: var(--texto); }
.no.mapa.ativo > .no-linha { background: var(--destaque-fraco); color: var(--destaque); font-weight: 600; }

.no .contagem { color: var(--texto-fraco); font-size: 11px; font-weight: 400; }

.mini {
  padding: 0 3px;
  border: none;
  background: none;
  color: var(--texto-fraco);
  font-size: 12px;
  line-height: 1;
  opacity: 0;
}
.no-linha:hover .mini { opacity: 1; }
.mini:hover { color: var(--texto); }
.mini.perigo:hover { color: var(--perigo); }

.vazio-pasta { padding: 4px 8px; color: #5a5a60; font-size: 11px; font-style: italic; }
.vazio-lateral { padding: 28px 16px; color: var(--texto-fraco); font-size: 13px; text-align: center; }

.lateral-rodape {
  padding: 9px 16px;
  border-top: 1px solid var(--borda);
  font-size: 12px;
  min-height: 34px;
}
.lateral-rodape .salvando { color: var(--destaque); }
.lateral-rodape .salvo { color: var(--ok); }
.lateral-rodape .erro { color: var(--perigo); }

/* ---------------- área principal ---------------- */

#principal {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 16px;
  background: var(--fundo-2);
  border-bottom: 1px solid var(--borda);
}
.barra[hidden] { display: none; }
/* `wrap` aqui é o que impede a barra de engolir botão: numa janela estreita,
   ou com a lista e o Arsenal abertos, os últimos botões desciam para fora da
   tela em vez de pular para a linha de baixo. */
.barra-grupo { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }

/* ---------------- baixar o mapa ---------------- */

.exp-fundo {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: #000000a8;
}
.exp-caixa {
  width: min(460px, 100%);
  padding: 18px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: var(--fundo-2);
  box-shadow: 0 20px 60px #000a;
}
.exp-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.exp-nota { margin: 10px 0 0; color: var(--texto-fraco); font-size: 12.5px; }
.exp-nota--fraca { margin-top: 14px; font-size: 12px; }
.exp-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  font-size: 13px;
}
.exp-linha select {
  padding: 7px 10px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--fundo-3);
  color: var(--texto);
  font: inherit;
}
.exp-bts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.exp-bts button { flex: 1 1 auto; }
.exp-bts button[disabled] { opacity: .5; cursor: progress; }
.exp-estado:empty { display: none; }
.exp-estado {
  margin-top: 14px;
  padding: 9px 11px;
  border-radius: 8px;
  background: var(--destaque-fraco);
  color: var(--texto);
  font-size: 12.5px;
  line-height: 1.45;
}
.exp-estado--erro { background: #e05a5822; color: #ff9b99; }

.titulo-mapa { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; font-size: 14px; }
.caminho-mapa { color: var(--texto-fraco); font-size: 12px; }
.divisor { width: 1px; height: 20px; background: var(--borda); }

button { font: inherit; cursor: pointer; }

.bt-primario, .bt-secundario {
  padding: 7px 12px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  font-size: 13px;
}
.bt-primario { background: var(--destaque); border-color: var(--destaque); color: #fff; font-weight: 600; }
.bt-primario:hover { filter: brightness(1.1); }
.bt-secundario { background: var(--fundo-3); color: var(--texto); }
.bt-secundario:hover { background: #383840; }

.bt-icone {
  width: 30px; height: 30px;
  background: var(--fundo-3);
  border: 1px solid var(--borda);
  border-radius: 5px;
  color: var(--texto);
  font-size: 14px; line-height: 1;
}
.bt-icone:hover { background: #383840; }

.palco-hosp { flex: 1; min-height: 0; display: none; }
.palco-hosp.ativo { display: block; }

/* ---------------- canvas ---------------- */

.palco {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Puxar no vazio faz o laço de seleção, então a mira é a cruz. A mãozinha
     só aparece com a barra de espaço segurada (classe .mao). */
  cursor: crosshair;
  background-color: var(--fundo);
  background-image:
    linear-gradient(var(--grade) 1px, transparent 1px),
    linear-gradient(90deg, var(--grade) 1px, transparent 1px);
}
.palco.mao, .palco.mao * { cursor: grab; }
.palco.mao:active, .palco.mao:active * { cursor: grabbing; }

.mundo { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.ligacoes { position: absolute; top: 0; left: 0; pointer-events: none; }
.cartoes { position: absolute; top: 0; left: 0; }

.aresta {
  fill: none;
  stroke-width: 2;
  pointer-events: stroke;
  cursor: pointer;
}
.aresta:hover { stroke-width: 3.5; }
.aresta.selecionada { stroke-width: 4; filter: drop-shadow(0 0 5px currentColor); }

/* Faixa invisível de 20px que torna a seta fácil de acertar com o mouse. */
.aresta-toque { cursor: pointer; pointer-events: stroke; }

/* Os dois pontos de agarrar, recuados para dentro da curva. Quem decide se
   pegam o clique é a conta de distância no JS, não o navegador — por isso eles
   mesmos não recebem evento nenhum. */
/* Nascem apagados e só acendem com a classe. O atributo `hidden` NÃO funciona
   dentro de SVG — foi assim que as bolinhas ficavam presas no mapa depois de
   apagar a seta, e só sumiam recarregando a página. */
.ponta-viva { display: none; }
.ponta-viva.acesa { display: block; }

.ponta-viva {
  fill: var(--destaque);
  stroke: #fff;
  stroke-width: 2;
  pointer-events: none;
  filter: drop-shadow(0 0 6px var(--destaque));
}

.fio-novo { stroke: var(--destaque); stroke-width: 2; stroke-dasharray: 6 4; opacity: 0; }
.fio-novo.ativo { opacity: 1; }

/* ---- cartão ---- */

.cartao {
  position: absolute;
  border-radius: 8px;
  border: 1.5px solid var(--tom, #7d8590);
  background: color-mix(in srgb, var(--tom, #7d8590) 13%, #232326);
  cursor: default;
  transition: box-shadow .12s;
}
.cartao:hover { box-shadow: 0 0 0 1px var(--tom), 0 4px 14px #0006; }
.cartao.selecionado { box-shadow: 0 0 0 2px var(--destaque), 0 6px 20px #0007; }

/* Post-it: papel de verdade — cor pastel, canto dobrado, sombra baixa
   e uma inclinação de meio grau para não parecer um retângulo de sistema. */
.cartao[data-estilo="postit"] {
  border: none;
  border-radius: 0 0 2px 2px;
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--tom, #e0de71) 82%, #fffdf0) 0%,
      color-mix(in srgb, var(--tom, #e0de71) 62%, #fffdf0) 55%,
      color-mix(in srgb, var(--tom, #e0de71) 74%, #e8e2c8) 100%);
  color: #2a2617;
  transform: rotate(-.7deg);
  box-shadow:
    0 1px 1px #0004,
    0 8px 18px -6px #0009,
    inset 0 14px 22px -18px #fff;
  transition: transform .12s, box-shadow .12s;
}
.cartao[data-estilo="postit"]::before {
  /* fitinha de cola no topo */
  content: '';
  position: absolute;
  left: 14%; right: 14%; top: 0; height: 13px;
  background: linear-gradient(#ffffff30, #ffffff00);
  pointer-events: none;
}
.cartao[data-estilo="postit"]::after {
  /* canto dobrado embaixo à direita */
  content: '';
  position: absolute;
  right: 0; bottom: 0;
  border-width: 0 0 20px 20px;
  border-style: solid;
  border-color: transparent transparent #00000026 transparent;
  filter: drop-shadow(-2px -2px 2px #0003);
  pointer-events: none;
}
.cartao[data-estilo="postit"]:hover {
  transform: rotate(-.7deg) translateY(-2px);
  box-shadow: 0 2px 2px #0004, 0 14px 26px -8px #000b;
}
.cartao[data-estilo="postit"] .conteudo {
  color: #2a2617;
  padding: 16px 16px 20px;
}
.cartao[data-estilo="postit"] .conteudo .t1,
.cartao[data-estilo="postit"] .conteudo .t2,
.cartao[data-estilo="postit"] .conteudo .t3 { color: #17150c; }
.cartao[data-estilo="postit"] mark { background: #00000018; color: inherit; }

/* Imagem colada: sem moldura, sem preenchimento, só o desenho. */
.cartao[data-estilo="imagem"] {
  background: none;
  border-color: transparent;
  border-radius: 6px;
  overflow: hidden;
}
.cartao[data-estilo="imagem"]:hover { border-color: var(--tom); }
.cartao[data-estilo="imagem"] .conteudo { padding: 0; }
.cartao[data-estilo="imagem"] img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* ------------------------- cartão de link ------------------------- */

.cartao[data-estilo="link"] {
  background: #10121a;
  border-color: color-mix(in srgb, var(--tom, #7d8590) 40%, transparent);
  border-radius: 12px;
  overflow: hidden;
}
.cartao[data-estilo="link"]:hover,
.cartao[data-estilo="link"].selecionado { border-color: var(--tom, var(--destaque)); }
.cartao[data-estilo="link"] .conteudo {
  padding: 0; overflow: hidden; position: relative;
  display: flex; flex-direction: column; height: 100%;
}

.link__quadro {
  width: 100%; height: 100%; border: 0; display: block; background: #fff;
  /* Sem isto o quadro do site engole o mouse e o cartão não se arrasta mais.
     Ele só ganha o mouse depois que você seleciona o cartão — aí dá play. */
  pointer-events: none;
}
.cartao[data-estilo="link"].selecionado .link__quadro { pointer-events: auto; }

.link__capa {
  width: 100%; flex: 0 0 55%; min-height: 0;
  object-fit: cover; display: block; user-select: none; -webkit-user-drag: none;
}
.link__capa--sem {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--tom, #7d8590) 35%, #10121a),
    #10121a);
}
.link__ficha {
  flex: 1 1 auto; min-height: 0;
  padding: 9px 11px 10px; display: flex; flex-direction: column; gap: 4px;
}
.link__titulo {
  font-size: 13px; font-weight: 650; line-height: 1.25; color: var(--texto);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.link__desc {
  font-size: 11.5px; line-height: 1.35; color: var(--texto-fraco, #a5adba);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.link__site {
  margin-top: auto; font-size: 11px; letter-spacing: .2px;
  color: var(--tom, var(--destaque));
}
.link__vazio {
  margin: auto; text-align: center; font-size: 12px; line-height: 1.6;
  color: var(--texto-fraco, #a5adba);
}

/* Abrir de verdade no navegador. Fica no canto para não tapar a prévia. */
.link__abrir {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 24px; height: 24px; border-radius: 7px;
  display: grid; place-items: center;
  font-size: 13px; text-decoration: none; color: #e8eaf0;
  background: #000000a8; border: 1px solid #ffffff26;
  opacity: 0; transition: opacity .12s;
}
.cartao[data-estilo="link"]:hover .link__abrir { opacity: 1; }
.link__abrir:hover { background: var(--destaque); border-color: transparent; }

.palco.recebendo { outline: 2px dashed var(--destaque); outline-offset: -6px; }

.cartao[data-estilo="destaque"] {
  border-width: 3px;
  background: color-mix(in srgb, var(--tom, #7d8590) 26%, #232326);
  font-weight: 600;
}

.cartao .conteudo {
  height: 100%;
  padding: 12px 14px;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.5;
  color: var(--texto);
  word-break: break-word;
  white-space: pre-wrap;
  cursor: default;
}
.cartao .conteudo .t1 { font-size: 19px; font-weight: 700; }
.cartao .conteudo .t2 { font-size: 16px; font-weight: 700; }
.cartao .conteudo .t3 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.cartao .conteudo mark { background: var(--tom); color: #16161a; border-radius: 2px; padding: 0 2px; }

.cartao .conteudo.editando {
  outline: none;
  overflow: auto;
  cursor: text;
  white-space: pre-wrap;
}
.cartao.em-edicao { box-shadow: 0 0 0 2px var(--destaque), 0 8px 26px #0008; }

/* alças de redimensionar */
.alca {
  position: absolute;
  width: 10px; height: 10px;
  background: var(--destaque);
  border: 1.5px solid #fff;
  border-radius: 2px;
  opacity: 0;
  transition: opacity .12s;
}
.cartao.selecionado .alca, .cartao:hover .alca { opacity: 1; }
.cartao.em-edicao .alca { opacity: 0; pointer-events: none; }

.c-n  { top: -6px; left: 50%; margin-left: -5px; cursor: ns-resize; width: 26px; margin-left: -13px; border-radius: 5px; }
.c-s  { bottom: -6px; left: 50%; margin-left: -13px; cursor: ns-resize; width: 26px; border-radius: 5px; }
.c-l  { right: -6px; top: 50%; margin-top: -13px; cursor: ew-resize; height: 26px; border-radius: 5px; }
.c-o  { left: -6px; top: 50%; margin-top: -13px; cursor: ew-resize; height: 26px; border-radius: 5px; }
.c-no { top: -6px; left: -6px; cursor: nwse-resize; }
.c-ne { top: -6px; right: -6px; cursor: nesw-resize; }
.c-so { bottom: -6px; left: -6px; cursor: nesw-resize; }
.c-se { bottom: -6px; right: -6px; cursor: nwse-resize; }

/* bolinhas de puxar seta */
.fio {
  position: absolute;
  width: 13px; height: 13px;
  background: var(--fundo-2);
  border: 2px solid var(--tom, #7d8590);
  border-radius: 50%;
  opacity: 0;
  cursor: crosshair;
  transition: opacity .12s, transform .12s;
}
.cartao:hover .fio { opacity: 1; }
.fio:hover { transform: scale(1.35); background: var(--destaque); border-color: var(--destaque); }
.cartao.em-edicao .fio { opacity: 0; pointer-events: none; }

.f-n { top: -20px; left: 50%; margin-left: -6.5px; }
.f-s { bottom: -20px; left: 50%; margin-left: -6.5px; }
.f-l { right: -20px; top: 50%; margin-top: -6.5px; }
.f-o { left: -20px; top: 50%; margin-top: -6.5px; }

/* laço de seleção */
.laco {
  position: absolute;
  border: 1px solid var(--destaque);
  background: var(--destaque-fraco);
  border-radius: 3px;
  pointer-events: none;
}
.laco[hidden] { display: none; }

/* menu flutuante do cartão */
.menu-cartao {
  position: absolute;
  z-index: 20;
  transform: translateX(-50%);
  padding: 6px 8px;
  background: #2c2c31;
  border: 1px solid var(--borda);
  border-radius: 9px;
  box-shadow: 0 10px 30px #000a;
}
.menu-cartao[hidden] { display: none; }
.menu-linha { display: flex; align-items: center; gap: 4px; }

.menu-cartao button {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--texto);
  font-size: 13px;
  padding: 0;
}
.menu-cartao button:hover { background: #3a3a42; }
.menu-cartao button.perigo:hover { background: var(--perigo); color: #fff; }

.menu-cartao .cor {
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--tom);
  border: 1.5px solid #ffffff22;
}
.menu-cartao .cor:hover { transform: scale(1.15); background: var(--tom); }
.menu-cartao .cor.sem {
  background: #55555c;
  position: relative;
  overflow: hidden;
}
.menu-cartao .cor.sem::after {
  content: '';
  position: absolute;
  left: -2px; top: 7px;
  width: 22px; height: 1.5px;
  background: var(--perigo);
  transform: rotate(-45deg);
}
.menu-cartao .sep { width: 1px; height: 18px; background: var(--borda); margin: 0 3px; }

.zoom-info {
  position: absolute;
  right: 12px; bottom: 10px;
  padding: 3px 9px;
  background: #2c2c31cc;
  border: 1px solid var(--borda);
  border-radius: 20px;
  color: var(--texto-fraco);
  font-size: 11px;
  pointer-events: none;
}

/* ---------------- estado vazio ---------------- */

.vazio { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; }
.vazio[hidden] { display: none; }
.vazio-caixa { max-width: 460px; text-align: center; }
.vazio-caixa h2 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.vazio-caixa p { margin: 0 0 8px; color: var(--texto-fraco); }
.dica {
  margin-top: 22px;
  padding: 16px 18px;
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: 8px;
  font-size: 13px;
  line-height: 2;
  text-align: left;
  color: var(--texto-fraco);
}
.dica b { color: var(--texto); font-weight: 600; }

/* ---------------- avisos ---------------- */

#aviso {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 50;
  max-width: 340px;
  padding: 11px 15px;
  background: var(--fundo-3);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--destaque);
  border-radius: 6px;
  box-shadow: 0 8px 24px #0008;
  font-size: 13px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s, transform .18s;
  pointer-events: none;
}
#aviso.visivel { opacity: 1; transform: none; }
#aviso.erro { border-left-color: var(--perigo); }

/* ---------------- cartão de etapa (peça do Arsenal) ---------------- */

/* Sem quadro e sem fundo: no mapa fica só o desenho e o nome, soltos sobre a
   grade. É o que se enxerga de longe — moldura só atrapalhava. */
.cartao[data-estilo="etapa"] {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 14px;
  box-shadow: none;
}
/* A moldura só reaparece quando você passa por cima ou seleciona — aí ela é
   informação (dá pra ver onde clicar e o que está pego), não decoração. */
.cartao[data-estilo="etapa"]:hover {
  border-color: color-mix(in srgb, var(--tom, #7d8590) 45%, transparent);
  background: #ffffff08;
}
.cartao[data-estilo="etapa"].selecionado {
  border-color: var(--tom, var(--destaque));
  background: #ffffff0d;
}
/* `overflow: visible` deixava o ícone vazar para fora da caixa e se misturar
   com as alças de seleção. Ele fica dentro. */
.cartao[data-estilo="etapa"] .conteudo { padding: 0; overflow: hidden; position: relative; }

/* Presa nos quatro cantos da caixa. Antes ela seguia o fluxo do texto do
   cartão comum e nascia 42px abaixo do lugar — era o ícone descendo para fora
   da moldura e se misturando com as alças de seleção. */
.etapa {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.etapa__corpo {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 5px 6px;
  text-align: center;
}

/* O nome é legenda, não manchete: pequeno, para o ícone continuar sendo o herói. */
.etapa__nome {
  width: 100%;
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: .1px;
  color: var(--texto);
  /* Sem fundo atrás, o nome precisa da sombra para não sumir na grade. */
  text-shadow: 0 1px 2px #000000cc, 0 0 6px #000000aa;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.etapa__nome .t1,
.etapa__nome .t2,
.etapa__nome .t3 { font-size: 12px; letter-spacing: .1px; text-transform: none; }

/* Sem plaqueta: o desenho fica solto. Só um espaço fixo para ele, para o nome
   de uma linha e o de duas linha alinharem o ícone na mesma altura. */
.etapa__plaqueta {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
}

/* Máscara: o desenho vem do arquivo, a cor vem do cartão. */
.etapa__icone {
  width: 44px;
  height: 44px;
  /* A sombra é da própria máscara, então acompanha o contorno do desenho. */
  filter: drop-shadow(0 1px 3px #000000cc);
  background: var(--tom, #c9ced6);
  -webkit-mask-image: var(--icone);
  mask-image: var(--icone);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.etapa__nums {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #00000040;
  border-top: 1px solid color-mix(in srgb, var(--tom, #7d8590) 25%, transparent);
  flex: 0 0 auto;
}
.etapa__campo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 3px 6px;
  background: #17171a;
  min-width: 0;
}
.etapa__campo span {
  font-size: 8px;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--texto-fraco);
  white-space: nowrap;
}
.etapa__campo input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--texto);
  font: 600 12px/1.2 inherit;
  text-align: center;
  padding: 0;
  outline: none;
}
.etapa__campo input::placeholder { color: #55555c; font-weight: 400; }
.etapa__campo:focus-within { background: var(--destaque-fraco); }

/* A etapa que mais perde gente. Vermelho é aviso, não decoração. */
.cartao.gargalo { box-shadow: 0 0 0 2px var(--perigo), 0 6px 20px #0007; }
.cartao.gargalo.selecionado { box-shadow: 0 0 0 2px var(--perigo), 0 0 0 5px var(--destaque-fraco); }

/* ---------------- etiquetas de conversão nas setas ---------------- */

.etiqueta { pointer-events: none; }
.etiqueta rect { fill: #16161a; stroke: var(--borda); }
.etiqueta text {
  fill: var(--texto);
  font: 600 11px/1 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.etiqueta-gargalo rect { stroke: var(--perigo); fill: #2a1618; }
.etiqueta-gargalo text { fill: #ff9d9b; }
.aresta-gargalo { stroke-width: 3.5; }

/* ---------------- barra do Arsenal ---------------- */

body.com-arsenal { grid-template-columns: 270px 1fr 310px; }

/* Em janela estreita as três colunas espremem o palco (a 900px sobravam
   320px e o mapa só cabia a 37% de zoom). Aqui a lista de mapas e o
   Arsenal encolhem para o palco continuar sendo o maior. */
@media (max-width: 1180px) {
  body { grid-template-columns: 210px 1fr; }
  body.com-arsenal { grid-template-columns: 210px 1fr 240px; }
  body.sem-lateral.com-arsenal { grid-template-columns: 0 1fr 240px; }
  .ars-grade { grid-template-columns: 1fr; }
}

#arsenal {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--fundo-2);
  border-left: 1px solid var(--borda);
}
#arsenal[hidden] { display: none; }

.ars-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--borda);
}
.ars-topo strong { font-size: 14px; letter-spacing: .3px; }
.ars-topo-bts { display: flex; gap: 4px; }
#btEditarArsenal.ligado { background: var(--destaque-fraco); color: var(--destaque); }

#buscaArsenal { margin: 10px 12px 6px; }

.ars-migalha {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 8px;
  border-bottom: 1px solid var(--borda);
  min-height: 30px;
}
.ars-mig-txt { font-size: 11px; color: var(--texto-fraco); line-height: 1.3; }
.ars-voltar {
  flex: 0 0 auto;
  border: 1px solid var(--borda);
  background: var(--fundo-3);
  color: var(--texto);
  border-radius: 6px;
  cursor: pointer;
  padding: 1px 7px;
  font-size: 12px;
}
.ars-voltar:hover { border-color: var(--destaque); color: var(--destaque); }

.ars-lista { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 10px 12px 14px; }
.ars-nada { color: var(--texto-fraco); font-size: 12px; padding: 10px 2px; }
.ars-nota {
  margin: 0 0 10px;
  padding: 8px 10px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--texto-fraco);
  background: var(--fundo-3);
  border-left: 2px solid var(--destaque);
  border-radius: 0 6px 6px 0;
}

.ars-pastas { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.ars-pasta {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--fundo-3);
  color: var(--texto);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.ars-pasta { border-left: 3px solid color-mix(in srgb, var(--tom, #7d8590) 70%, transparent); }
.ars-pasta:hover { border-color: var(--tom, var(--destaque)); background: color-mix(in srgb, var(--tom, #7d8590) 12%, transparent); }
.ars-pasta.nova { justify-content: center; color: var(--texto-fraco); border-style: dashed; }
.ars-conta {
  margin-left: auto;
  font-size: 10px;
  color: var(--texto-fraco);
  background: #ffffff10;
  border-radius: 8px;
  padding: 1px 6px;
}

.ars-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ars-peca {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  padding: 10px 7px 12px;
  border: 1px solid color-mix(in srgb, var(--tom, #3a3a40) 22%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--tom, #7d8590) 7%, transparent);
  color: var(--texto);
  font: inherit;
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
  cursor: grab;
}
.ars-peca:hover {
  border-color: var(--tom, var(--destaque));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tom, #7d8590) 40%, transparent);
}
.ars-peca:active { cursor: grabbing; }
.ars-nome { word-break: break-word; }
.ars-peca .ars-nome {
  font-weight: 620;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ars-onde { font-size: 9.5px; color: var(--texto-fraco); }

/* Igual ao mapa: ícone solto, sem plaqueta. O que você vê na barra é
   exatamente o que cai no quadro. */
.ars-plaqueta {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
}
.ars-plaqueta .ars-ico {
  width: 36px;
  height: 36px;
  background: var(--tom, #c9ced6);
  filter: drop-shadow(0 1px 2px #000000aa);
}
.ars-num {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 8px;
  letter-spacing: .5px;
  color: var(--texto-fraco);
  border: 1px solid var(--borda);
  border-radius: 4px;
  padding: 0 3px;
}

/* O desenho vem do arquivo, a cor vem do tema — mesma máscara do cartão. */
.ars-ico {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background: var(--texto);
  -webkit-mask: var(--icone) center / contain no-repeat;
  mask: var(--icone) center / contain no-repeat;
}
.ars-ico.pasta { background: var(--texto-fraco); }
.ars-pasta .ars-ico { background: var(--tom, var(--texto)); }

.ars-edicao { position: absolute; top: 4px; right: 4px; display: flex; gap: 2px; }
.ars-pasta .ars-edicao { position: static; margin-left: 6px; }
.ars-mini {
  border: 0;
  background: #00000055;
  color: var(--texto-fraco);
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 3px 5px;
}
.ars-mini:hover { color: var(--texto); background: #000000aa; }
.ars-mini.perigo:hover { color: #fff; background: var(--perigo); }
#arsenal.editando .ars-peca { cursor: default; }

.ars-restaurar {
  margin-top: 14px;
  width: 100%;
  padding: 8px;
  border: 1px dashed var(--borda);
  border-radius: 8px;
  background: transparent;
  color: var(--texto-fraco);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.ars-restaurar:hover { color: var(--texto); border-color: var(--destaque); }

.ars-rodape { padding: 10px 12px; border-top: 1px solid var(--borda); }
.ars-rodape .bt-primario { width: 100%; }