/* ============================================================
   MISSAO — painel do exercicio, firmware e museu (Fase 2)
   ============================================================ */

.janela-larga { width: min(760px, 100%); }

/* --- painel da missao no alto do movel de pecas ---------------- */

#missao-caixa {
  border-bottom: var(--borda);
  background: var(--bancada);
  padding: var(--e2);
}

.missao-topo {
  display: flex; align-items: center; gap: var(--e2);
  margin-bottom: var(--e2);
}
.missao-topo b { flex: 1; font-size: var(--t-min); font-weight: 500; }

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
  display: flex; gap: var(--e2);
  padding: 4px 0;
  font-size: var(--t-min); color: var(--grafite);
  line-height: 1.4;
}
.checklist .marca {
  flex: none; width: 20px;
  color: var(--poeira); font-size: var(--t-micro);
}
.checklist li.feito { color: var(--fosforo); }
.checklist li.feito .marca { color: var(--fosforo); }

.missao-base {
  display: flex; align-items: center; gap: var(--e2);
  margin-top: var(--e2);
}
.orcamento { margin-left: auto; color: var(--grafite); font-size: var(--t-micro); }
.orcamento.estourado { color: var(--brasa); }

/* --- seletor de missoes --------------------------------------- */

.grade-missoes {
  display: grid; gap: var(--e2);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.cartao-missao {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--e3);
  background: var(--casco-alto);
  border: var(--borda); border-radius: var(--raio);
  color: var(--luz); font: inherit; text-align: left;
  cursor: pointer;
}
.cartao-missao:hover { border-color: var(--fosforo); }
.cartao-missao b { font-size: var(--t-base); font-weight: 500; }
.cartao-missao small { color: var(--poeira); font-size: var(--t-micro); line-height: 1.5; }

.etiquetas { display: flex; flex-wrap: wrap; gap: 4px; }
.etq {
  font-style: normal; font-size: 10px;
  padding: 2px 6px; border-radius: 2px;
  background: var(--vacuo); color: var(--grafite);
  border: var(--borda);
}
.etq-novato { color: var(--fosforo); border-color: var(--fosforo); }
.etq-facil { color: var(--gelo); border-color: var(--gelo); }
.etq-intermediario { color: var(--ambar); border-color: var(--ambar); }
.etq-hacker { color: var(--brasa); border-color: var(--brasa); }

/* --- firmware de teste ---------------------------------------- */

.grade-pinos { display: grid; gap: 2px; }

.linha-pino {
  display: grid;
  grid-template-columns: 92px 1fr 110px 34px;
  align-items: center; gap: var(--e2);
  padding: 3px 0;
  border-bottom: 1px solid var(--linha);
}
.linha-pino .nome-pino { color: var(--luz); font-size: var(--t-min); }
.linha-pino .nome-pino b { color: var(--fosforo); }
.linha-pino .nome-pino i { color: var(--gelo); font-style: normal; font-size: 10px; }
.linha-pino .valor-duty { color: var(--grafite); font-size: var(--t-micro); text-align: right; }
.linha-pino.morto .nome-pino { color: var(--poeira); text-decoration: line-through; }
.etiqueta-morta { grid-column: 2 / -1; color: var(--brasa); font-size: var(--t-micro); }

@media (max-width: 620px) {
  .linha-pino { grid-template-columns: 80px 1fr; }
  .linha-pino input[type="range"], .linha-pino .valor-duty { grid-column: 1 / -1; }
}

/* --- museu dos desastres -------------------------------------- */

.museu-conta {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--brasa);
}

.lista-museu { list-style: none; margin: 0; padding: 0; }
.lista-museu li {
  padding: var(--e2) 0;
  border-bottom: 1px solid var(--linha);
  font-size: var(--t-min);
}
.lista-museu b { color: var(--brasa); font-weight: 500; }
.lista-museu small { display: block; color: var(--poeira); font-size: var(--t-micro); margin-top: 2px; }

/* --- alerta de dano ------------------------------------------- */

.alarme {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  max-width: min(420px, 86%);
  padding: var(--e3) var(--e4);
  background: var(--casco);
  border: 2px solid var(--brasa);
  border-radius: var(--raio);
  color: var(--luz); font-size: var(--t-min); line-height: 1.6;
  text-align: center;
}
.alarme h3 { color: var(--brasa); margin-bottom: var(--e2); }
.alarme .btn { margin-top: var(--e3); }

/* checklist agora mora no painel do GabuTRON, embaixo da fala dele */
#painel-robo #missao-caixa {
  margin: 0 var(--e3) var(--e3);
  padding: var(--e2);
  background: var(--bancada);
  border: 1px solid var(--linha-viva);
  border-radius: var(--raio);
  max-height: 40%;
  overflow-y: auto;
}
.missao-controles { display: flex; gap: 4px; }
.missao-controles .btn { padding: 4px 7px; }
.pausado #obra::after {
  content: "missao pausada";
  position: absolute; inset: 0; z-index: 7;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5,6,10,.82); color: var(--fosforo);
  font-size: var(--t-alto); letter-spacing: .1em;
}

/* ---------- multimetro ---------- */
#ferramenta-caixa { margin: 0 var(--e3) var(--e2); }

#fonte-painel { background: var(--casco); border: 2px solid var(--linha-viva); border-radius: var(--raio); margin-bottom: 8px; }
#fonte-painel .mm-visor { font-size: 20px; }

#multimetro {
  background: var(--casco);
  border: 2px solid var(--linha-viva); border-radius: var(--raio);
}

/* Com o multimetro aberto o retrato encolhe e a fala fica baixinha:
   o aparelho e que precisa de espaco na hora de medir. */
#painel-robo.com-ferramenta #retrato { display: none; }
#painel-robo.com-ferramenta .fala { max-height: 120px; }
#painel-robo.com-ferramenta .abas-info { display: none; }
#painel-robo.com-ferramenta #missao-caixa { max-height: 26%; }
.mm-topo {
  display: flex; align-items: center; gap: var(--e2);
  padding: 6px var(--e2); border-bottom: var(--borda);
  background: var(--casco-alto); font-size: var(--t-min);
}
.mm-topo b { flex: 1; font-weight: 500; }
.mm-visor {
  margin: var(--e2);
  padding: 10px var(--e2);
  background: #0F1A12; border: 1px solid var(--linha);
  border-radius: var(--raio);
  text-align: right;
  font-size: 22px; letter-spacing: .04em; color: #7CFF9B;
}
.mm-seletor { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 0 var(--e2); }
.mm-seletor .btn { justify-content: flex-start; font-size: 11px; padding: 5px 6px; }
.mm-simbolo { color: var(--fosforo); min-width: 22px; }
.mm-pontas {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: var(--e2); font-size: var(--t-micro);
}
.mm-ponta { display: inline-flex; align-items: center; gap: 4px; color: var(--poeira); }
.mm-ponta i { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.mm-ponta.vez { color: var(--fosforo); }
.mm-recado {
  margin: 0; padding: 0 var(--e2) var(--e2);
  color: var(--poeira); font-size: var(--t-micro); line-height: 1.5;
}


/* ---------- deck de scripts ---------- */
.abas-firmware { display: flex; gap: 4px; padding: var(--e2) var(--e3) 0; }
.abas-firmware .btn { flex: 1; justify-content: center; }

.grade-scripts { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.cartao-script {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--e2) var(--e3);
  background: var(--casco-alto); border: var(--borda); border-radius: var(--raio);
  color: var(--luz); font: inherit; text-align: left; cursor: pointer;
}
.cartao-script:hover { border-color: var(--fosforo); }
.cartao-script.on { border-color: var(--fosforo); background: var(--fosforo-op); }
.cartao-script b { font-size: var(--t-min); font-weight: 500; }
.cartao-script small { color: var(--poeira); font-size: var(--t-micro); line-height: 1.5; }
.pecas-script { color: var(--gelo); font-size: 10px; }

.ligacoes-script {
  margin-top: var(--e3); padding: var(--e2) var(--e3);
  border: 1px solid var(--fosforo); border-radius: var(--raio);
}
.ligacoes-script ul { margin: 0 0 var(--e2); padding-left: 18px; color: var(--luz); font-size: var(--t-min); line-height: 1.7; }
.ligacoes-script p { margin: 0; color: var(--poeira); font-size: var(--t-micro); }

/* filtro da janela de missoes */
.filtros-missao { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: var(--e3); }
.filtros-missao .btn { font-size: var(--t-micro); padding: 4px 9px; }
.etq-hacking { color: #C77DFF; border-color: #C77DFF; }

.etq-placa { color: var(--gelo); border-color: var(--gelo); }