/* ==========================================================================
   TELEMETRIA — rodapé de monitoramento e a lista de métricas do painel
   (js/components/RodapeTelemetria.js · js/cv/runtime/telemetria.js)

   Rodapé: linha fina, mono, baixo contraste, presa à base da tela.
   z-index 310: acima das colunas (120) e da linha de atalhos (200), abaixo
   da barra de vídeo (320), dos popovers das Ferramentas (340) e dos Studios
   (5000+), que cobrem a tela inteira e escondem o rodapé por baixo deles.
   ========================================================================== */

.rodape-tel {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 310;
  height: calc(18px + env(safe-area-inset-bottom, 0px));
  padding: 0 10px env(safe-area-inset-bottom, 0px);
  display: flex;
  align-items: center;
  gap: 0;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 18px;
  color: var(--ink-3);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  border-top: 1px solid var(--line-2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.rodape-tel::-webkit-scrollbar { display: none; }

.rodape-tel .rt-i {
  flex: none;
  padding: 0 3px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 16px;
  cursor: pointer;
}
.rodape-tel span.rt-i { cursor: default; }
.rodape-tel button.rt-i:hover { color: var(--ink); background: var(--line-2); }
.rodape-tel button.rt-i:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
.rodape-tel .rt-i.warn { color: var(--warn); }
.rodape-tel .rt-i.err { color: var(--err); font-weight: 600; }
.rodape-tel .rt-sep { flex: none; padding: 0 2px; opacity: .55; }

/*
 * O rodapé ocupa o lugar da linha de atalhos (que passaria por trás da barra de
 * vídeo se subisse): ela some enquanto o rodapé está ligado — os atalhos seguem
 * no menu da tela. A barra de vídeo já fica a 26 px da base no computador.
 */
body.com-rodape-tel .hotkeys { display: none; }
@media (max-width: 640px) {
  /* celular e janela estreita: a barra de vídeo encosta na base (10–14 px) — sobe a altura do rodapé */
  body.com-rodape-tel .vctl:not(.moved) { margin-bottom: 14px; }
}

/* ---------------------------------------------------------------- painel */

.tel-mon { margin: 0 0 12px; }
.tel-mon .tel-chave { margin-bottom: 6px; }
.tel-mon .tel-sub { margin-left: 22px; font-size: 11px; color: var(--ink-2); }

.tel-lista { display: flex; flex-direction: column; gap: 1px; margin: 4px 0 10px; }
.tel-m {
  display: grid;
  grid-template-columns: 10px minmax(0, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: 7px;
  width: 100%;
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-3);
  font: inherit;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}
.tel-m:hover { background: var(--line-2); }
.tel-m:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
.tel-m i {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1px solid var(--ink-3);
  align-self: center;
}
.tel-m.on { color: var(--ink-2); }
.tel-m.on i { background: var(--accent); border-color: var(--accent); }
.tel-m span { white-space: nowrap; }
.tel-m b {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-2);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tel-m b.warn { color: var(--warn); }
.tel-m b.err { color: var(--err); font-weight: 600; }

.tel-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.tel-acoes .btn:disabled { opacity: .7; cursor: progress; }