/* ====================================================================== */
/* ADMINISTRACAO > Roteador da Naia (Jev) — monitor em tempo real.          */
/* Montado por js/jevmon.js. Cores dos tokens do tema (--primary,          */
/* --card-bg, --text...), entao a Personalizacao muda o monitor junto.     */
/* ====================================================================== */

.jm-off { display: none !important; }

.jm, .jm-bloqueio {
  --jm-ok: var(--success, #22c55e);
  --jm-warn: var(--warning, #f59e0b);
  --jm-err: var(--danger, #ef4444);
  --jm-run: var(--primary);
  --jm-skip: color-mix(in srgb, var(--text-muted) 55%, transparent);
  --jm-pend: color-mix(in srgb, var(--text-muted) 30%, transparent);
  --jm-panel: color-mix(in srgb, var(--primary) 4%, var(--card-bg));
  --jm-borda: var(--card-border, color-mix(in srgb, var(--text) 12%, transparent));
  color: var(--text);
}

/* ---- bloqueio (antes da senha de suporte) ---- */
.jm-bloqueio {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  padding: 3rem 1rem; text-align: center;
  background: var(--card-bg); border: 1px solid var(--jm-borda); border-radius: 12px;
}
.jm-bloqueio > i { font-size: 2.4rem; color: var(--primary); }
.jm-bloqueio strong { font-size: 1.1rem; }
.jm-bloqueio span { color: var(--text-muted); max-width: 32rem; }

/* ---- botoes / campos ---- */
.jm-btn {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  padding: .5rem .9rem; border-radius: 8px; font: inherit; font-size: .9rem;
  border: 1px solid var(--jm-borda); background: var(--card-bg); color: var(--text);
}
.jm-btn:hover { border-color: var(--primary); }
.jm-btn-pri { background: var(--primary); border-color: var(--primary); color: #fff; }
.jm-btn-pri:hover { filter: brightness(1.08); }
.jm-in, .jm-sel {
  font: inherit; font-size: .95rem; padding: .5rem .7rem; border-radius: 8px;
  border: 1px solid var(--jm-borda); background: var(--card-bg); color: var(--text); min-width: 0;
}
.jm-in { flex: 1 1 18rem; }
.jm-in:focus, .jm-sel:focus { outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 1px; }

/* ---- topo: teste + estatisticas ---- */
.jm-topo {
  background: var(--card-bg); border: 1px solid var(--jm-borda); border-radius: 12px;
  padding: .9rem; margin-bottom: .9rem; display: flex; flex-direction: column; gap: .6rem;
}
.jm-teste { display: flex; flex-wrap: wrap; gap: .5rem; }
.jm-stats { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .85rem; color: var(--text-muted); }
.jm-stats b { color: var(--text); font-variant-numeric: tabular-nums; }
.jm-s-ok b { color: var(--jm-ok); }
.jm-s-warn b { color: var(--jm-warn); }
.jm-s-err b { color: var(--jm-err); }
.jm-cfg { margin-left: auto; }
.jm-legenda { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .75rem; color: var(--text-muted); }
.jm-legenda span::before {
  content: ""; display: inline-block; width: .6rem; height: .6rem; border-radius: 50%;
  margin-right: .3rem; vertical-align: -1px; background: var(--c);
}
.jm-legenda .jm-ok { --c: var(--jm-ok); }
.jm-legenda .jm-run { --c: var(--jm-run); }
.jm-legenda .jm-warn { --c: var(--jm-warn); }
.jm-legenda .jm-err { --c: var(--jm-err); }
.jm-legenda .jm-skip { --c: var(--jm-skip); }

/* ---- cartao de uma pergunta ---- */
.jm-lista { display: flex; flex-direction: column; gap: .8rem; }
.jm-card {
  background: var(--card-bg); border: 1px solid var(--jm-borda); border-radius: 12px;
  padding: .8rem .9rem; border-left: 4px solid var(--jm-pend);
  animation: jm-entra .25s ease-out;
}
.jm-card-run { border-left-color: var(--jm-run); }
.jm-card-ok { border-left-color: var(--jm-ok); }
.jm-card-warn { border-left-color: var(--jm-warn); }
.jm-card-err { border-left-color: var(--jm-err); }
@keyframes jm-entra { from { opacity: 0; transform: translateY(-4px); } }

.jm-card-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .6rem; margin-bottom: .7rem; }
.jm-hora { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: .8rem; }
.jm-chip {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; padding: .1rem .45rem;
  border-radius: 999px; background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary);
}
.jm-chip-admin { background: color-mix(in srgb, var(--jm-warn) 18%, transparent); color: var(--jm-warn); }
.jm-user { font-size: .8rem; color: var(--text-muted); }
.jm-pedido { flex: 1 1 100%; font-size: 1.02rem; font-weight: 600; quotes: "“" "”"; }
.jm-ant { flex: 1 1 100%; font-size: .78rem; color: var(--text-muted); }

/* ---- pipeline de luzes ---- */
.jm-pipe {
  list-style: none; margin: 0 0 .5rem; padding: .2rem 0 .4rem;
  display: flex; flex-wrap: wrap; align-items: flex-start; row-gap: .7rem;
}
.jm-et {
  --c: var(--jm-pend);
  flex: 0 0 auto; width: 6rem; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: .15rem;
}
.jm-luz {
  width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center;
  font-size: .85rem; color: var(--c); border: 2px solid var(--c);
  background: color-mix(in srgb, var(--c) 10%, var(--card-bg));
  transition: background .3s, box-shadow .3s, color .3s;
}
.jm-et-nome { font-size: .74rem; font-weight: 600; line-height: 1.15; }
.jm-et-tempo { font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--c); font-weight: 700; min-height: 1.1em; }
.jm-et-sub { font-size: .68rem; color: var(--text-muted); line-height: 1.2; max-width: 100%; overflow-wrap: anywhere; }

.jm-ok { --c: var(--jm-ok); }
.jm-warn { --c: var(--jm-warn); }
.jm-err { --c: var(--jm-err); }
.jm-run { --c: var(--jm-run); }
.jm-skip { --c: var(--jm-skip); }
.jm-et.jm-ok .jm-luz, .jm-et.jm-warn .jm-luz, .jm-et.jm-err .jm-luz {
  background: var(--c); color: #fff; box-shadow: 0 0 10px color-mix(in srgb, var(--c) 55%, transparent);
}
.jm-et.jm-skip .jm-luz { border-style: dashed; }
.jm-et.jm-skip .jm-et-nome, .jm-et.jm-pend .jm-et-nome { color: var(--text-muted); }
.jm-et.jm-run .jm-luz { animation: jm-pulsa 1s ease-in-out infinite; }
@keyframes jm-pulsa {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 55%, transparent); }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--c) 0%, transparent); background: color-mix(in srgb, var(--c) 30%, var(--card-bg)); }
}
.jm-et-total .jm-et-tempo { font-size: .92rem; }

.jm-seta {
  --c: var(--jm-pend);
  flex: 1 0 .6rem; min-width: .6rem; max-width: 2.5rem; height: 2px; margin-top: 1.1rem; background: var(--c); opacity: .7;
}
.jm-seta-ok, .jm-seta-warn, .jm-seta-err { --c: color-mix(in srgb, var(--text-muted) 60%, transparent); }
.jm-seta-run {
  --c: var(--jm-run);
  background: linear-gradient(90deg, transparent, var(--c), transparent) 0 0 / 200% 100%;
  animation: jm-flui 1s linear infinite;
}
.jm-seta-skip { background: none; border-top: 2px dashed var(--jm-skip); height: 0; }
@keyframes jm-flui { to { background-position: -200% 0; } }

/* ---- detalhes ---- */
.jm-det { display: flex; flex-direction: column; gap: .35rem; }
.jm-sec { border: 1px solid var(--jm-borda); border-radius: 8px; background: var(--jm-panel); }
.jm-sec > summary { cursor: pointer; padding: .4rem .6rem; font-size: .85rem; font-weight: 600; }
.jm-sec > summary i { color: var(--primary); width: 1.1rem; }
.jm-sec-corpo { padding: .2rem .7rem .7rem; font-size: .85rem; }
.jm-sec-corpo h5 { margin: .5rem 0 .3rem; font-size: .78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.jm-pt { margin: .2rem 0; }
.jm-en { margin: .2rem 0; font-style: italic; color: var(--primary); }
.jm-en::before { content: "EN  "; font-style: normal; font-size: .7rem; font-weight: 700; opacity: .7; }
.jm-desc, .jm-alt { color: var(--text-muted); font-size: .8rem; }
.jm-extra { margin: .25rem 0; }
.jm-extra em, .jm-barra-rot em { color: var(--text-muted); font-style: normal; font-size: .75rem; }
.jm-motivo { margin: .1rem 0; font-size: .82rem; color: var(--jm-warn); }
.jm-resp { margin: .2rem 0; white-space: pre-wrap; line-height: 1.45; }
.jm-erro { color: var(--jm-err); }
.jm-vazio { color: var(--text-muted); font-size: .85rem; }
.jm-vazio-grande { text-align: center; padding: 2rem 1rem; }
.jm-vazio-grande i { display: block; font-size: 1.8rem; margin-bottom: .5rem; color: var(--primary); }

.jm-barras { display: flex; flex-direction: column; gap: .25rem; }
.jm-barra { display: grid; grid-template-columns: minmax(8rem, 16rem) 1fr 3rem; align-items: center; gap: .5rem; }
.jm-barra-rot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jm-barra-trilho { height: .5rem; border-radius: 99px; background: var(--jm-pend); overflow: hidden; }
.jm-barra-trilho span { display: block; height: 100%; background: color-mix(in srgb, var(--primary) 55%, transparent); border-radius: 99px; }
.jm-barra-1 .jm-barra-trilho span { background: var(--primary); }
.jm-barra-1 .jm-barra-rot { font-weight: 700; }
.jm-barra-pct { text-align: right; font-variant-numeric: tabular-nums; }

.jm-sec pre {
  margin: .3rem 0; padding: .6rem; border-radius: 6px; max-height: 22rem; overflow: auto;
  background: color-mix(in srgb, var(--text) 6%, var(--card-bg)); font-size: .75rem; line-height: 1.35;
  white-space: pre;
}
.jm-tab { overflow-x: auto; margin-top: .3rem; }
.jm-tab table { border-collapse: collapse; font-size: .75rem; }
.jm-tab th, .jm-tab td { border: 1px solid var(--jm-borda); padding: .2rem .45rem; text-align: left; white-space: nowrap; }
.jm-tab th { background: color-mix(in srgb, var(--primary) 8%, var(--card-bg)); }
.jm-passos { margin: .2rem 0; padding-left: 1rem; }
.jm-passos em { color: var(--text-muted); font-style: normal; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .jm-barra { grid-template-columns: 1fr 3rem; }
  .jm-barra-trilho { grid-column: 1 / -1; grid-row: 2; }
  .jm-cfg { margin-left: 0; }
}

/* resposta sendo escrita (streaming): cursor piscando */
.jm-escrevendo::after { content: "8D"; margin-left: 2px; color: var(--primary); animation: jm-cursor 1s steps(2) infinite; }
@keyframes jm-cursor { 50% { opacity: 0; } }