/* ---------- Telas ---------- */
.tela { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.tela[hidden] { display: none !important; }

.seletor-partida {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  max-width: 260px;
  padding: 3px 6px;
  border: 1px solid #4a5b6e;
  border-radius: 6px;
  background: #2c3a4a;
  color: #ffd180;
}
.seletor-partida[hidden] { display: none; }
.topo .bt.bt-teste { background: #ffb300; border-color: #ffb300; color: #1d2733; }
.topo .bt.bt-destaque, .bt.bt-destaque { background: #2e9e44; border-color: #2e9e44; color: #fff; }
.topo .bt.bt-destaque:hover:not(:disabled), .bt.bt-destaque:hover:not(:disabled) { background: #247f36; }
.topo .bt:disabled { opacity: 0.4; }
.sep { width: 1px; height: 22px; background: #4a5b6e; }
.topo-editor .topo-sim { flex: 1; min-width: 0; justify-content: flex-end; }
.ed-status {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: #cfd8e3;
}
.ed-status.erro { color: #ffab91; font-weight: 600; }

/* ---------- Estrutura do editor ---------- */
.ed-corpo {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr) 268px;
}

.ed-paleta {
  overflow-y: auto;
  padding: 8px;
  background: var(--painel);
  border-right: 1px solid var(--borda);
}
.ed-ferramentas { display: flex; gap: 6px; margin-bottom: 10px; }
.ed-ferr {
  flex: 1;
  padding: 6px 4px;
  border: 1px solid #aeb5c0;
  border-radius: 6px;
  background: #f7f8fa;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto);
  cursor: pointer;
}
.ed-ferr:hover { background: #e9ecf1; }
.ed-ferr[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: #fff; }
.ed-titulo-paleta {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--texto-2);
}
.ed-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ed-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 3px 5px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 11px;
  line-height: 1.15;
  text-align: center;
  color: var(--texto);
  cursor: pointer;
}
.ed-item:hover { border-color: var(--acento); background: #f0f6ff; }
.ed-item.ativo { border-color: var(--acento); background: #e3f0ff; box-shadow: inset 0 0 0 1px var(--acento); }
.ed-item .mini.diagrama { flex: none; width: 100%; height: 46px; pointer-events: none; }
.mini text.num, .mini text.rpm-motor, .mini text.contagem { display: none; }
.mini .seta-giro { display: none; }

.ed-area { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ed-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  background: var(--painel);
  border-bottom: 1px solid var(--borda);
}
.ed-abas { display: flex; }
.ed-aba {
  padding: 5px 14px;
  border: 1px solid #aeb5c0;
  background: #f7f8fa;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--texto);
  cursor: pointer;
}
.ed-aba:first-child { border-radius: 6px 0 0 6px; }
.ed-aba:last-child { border-radius: 0 6px 6px 0; margin-left: -1px; }
.ed-aba[aria-selected="true"] { background: #1d2733; border-color: #1d2733; color: #fff; }
.ed-dica {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--texto-2);
}
.ed-zoom { display: flex; gap: 4px; }

.ed-svg {
  flex: 1;
  min-height: 0;
  width: 100%;
  height: 100%;
  background: #fbfcfd;
  outline: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.ed-svg[data-ferr="fio"], .ed-svg[data-ferr="colocar"] { cursor: crosshair; }
.ed-svg[data-ferr="selecionar"] .elem { cursor: move; }
.ed-svg.pan, .ed-svg.pan .elem { cursor: grab; }
.ed-svg .ed-fundo { stroke: none; }
.ed-svg .grade-fina { stroke: #e9ecf1; stroke-width: 1; fill: none; }
.ed-svg .grade-grossa { stroke: #d3d9e1; stroke-width: 1; fill: none; }
.ed-svg .fio.sel { stroke: var(--acento); stroke-width: 4.5; }
.ed-svg .fio-alvo { stroke: transparent; stroke-width: 12; fill: none; }
.ed-svg[data-ferr="selecionar"] .fio-alvo { cursor: pointer; }
.ed-svg .elem .alvo { fill: transparent; stroke: none; }
.ed-svg .elem.sel .alvo { fill: rgba(21, 101, 192, 0.1); stroke: var(--acento); stroke-width: 1.5; stroke-dasharray: 5 3; }
.ed-svg .term { fill: #fff; stroke: #78909c; stroke-width: 1.2; pointer-events: none; }
.ed-svg .term.solto { fill: #ffebee; stroke: #d32f2f; stroke-width: 2; }
.ed-svg .ed-overlay, .ed-svg .ed-terminais, .ed-svg .juncoes { pointer-events: none; }
.ed-svg .fantasma { opacity: 0.45; }
.ed-svg .fio-previa { stroke: var(--acento); stroke-width: 2.6; stroke-dasharray: 6 4; fill: none; }
.ed-svg .cursor-fio { fill: none; stroke: var(--acento); stroke-width: 1.5; }
.ed-svg .cursor-fio.liga { fill: rgba(46, 158, 68, 0.25); stroke: #2e9e44; stroke-width: 2; }
.ed-svg .laco { fill: rgba(21, 101, 192, 0.08); stroke: var(--acento); stroke-width: 1; stroke-dasharray: 4 3; }

/* ---------- Painel lateral ---------- */
.ed-lateral {
  overflow-y: auto;
  padding: 10px 12px;
  background: var(--painel);
  border-left: 1px solid var(--borda);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ed-lateral h2 { margin: 0 0 8px; font-size: 14px; }
.ed-campo { display: flex; flex-direction: column; gap: 3px; margin-bottom: 9px; font-size: 13px; }
.ed-campo > span { font-size: 12px; font-weight: 600; color: var(--texto-2); }
.ed-campo input, .ed-campo select, .ed-campo textarea {
  width: 100%;
  padding: 5px 7px;
  border: 1px solid #aeb5c0;
  border-radius: 5px;
  font: inherit;
  font-size: 14px;
}
.ed-campo textarea { resize: vertical; font-size: 13px; }
.ed-campo small { font-size: 11.5px; color: var(--texto-2); }
.ed-terms { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 4px; }
.ed-terms.seis { grid-template-columns: repeat(3, 1fr); }
.ed-terms input { text-align: center; }
.ed-check { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; font-size: 13px; }
.ed-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.bt.bt-perigo-leve { color: var(--perigo); border-color: #e3a8a8; }
.ed-rotulo { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 6px; margin-top: 4px; }
.ed-info { margin: 0; font-size: 13px; color: var(--texto-2); }
.ed-avisos ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ed-aviso {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid #ffe082;
  border-radius: 5px;
  background: #fff8e1;
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  color: #5d4300;
  cursor: pointer;
}
.ed-aviso:hover { background: #ffecb3; }
.ed-aviso em { font-style: normal; font-weight: 700; }
.contador { padding: 0 7px; border-radius: 9px; background: var(--atencao); color: #fff; font-size: 12px; }
.ed-ok { margin: 0; font-size: 13px; color: #2e7d32; }

/* ---------- Modal do código ---------- */
.modal-caixa.modal-pequeno { width: min(92vw, 380px); height: auto; gap: 8px; padding: 18px; }
.modal-pequeno h2 { margin: 0; font-size: 18px; }
.modal-pequeno p { margin: 0; font-size: 14px; color: var(--texto-2); }
.modal-pequeno input { padding: 8px 10px; border: 1px solid #aeb5c0; border-radius: 6px; font: inherit; font-size: 18px; }
.modal-pequeno .erro { color: var(--perigo); font-weight: 600; }
.modal-botoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }