/* ===========================================================================
   DEMONSTRAÇÃO PÚBLICA — selo "só leitura", rodapé de ações.
   Reutiliza o layout do monitor do formando (formando.css) e ajusta o espaço
   para o cabeçalho de demo e o rodapé com chamadas à ação.
   =========================================================================== */
.demo-layout {
  grid-template-rows: auto auto 1fr auto !important;  /* cabeçalho · guião · monitor · rodapé */
}

/* Selo "demonstração / só leitura" no cabeçalho */
.demo-selo {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--co2, #F5D33D);
  background: rgba(245,211,61,0.10); border: 1px solid rgba(245,211,61,0.30);
  border-radius: 999px; padding: 5px 12px;
}
.demo-selo-ponto {
  width: 8px; height: 8px; border-radius: 50%; background: var(--co2, #F5D33D);
  box-shadow: 0 0 0 0 rgba(245,211,61,0.6); animation: demoPulso 1.8s infinite;
}
@keyframes demoPulso {
  0%   { box-shadow: 0 0 0 0 rgba(245,211,61,0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(245,211,61,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,211,61,0); }
}

/* Rodapé com chamadas à ação públicas */
.demo-rodape {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line, #1c2530);
  background: rgba(10,14,20,0.6);
}
.demo-rodape .btn { min-height: 46px; }

/* O monitor de demo nunca é interativo (reforço visual de "só leitura") */
.demo-layout .fm-monitor { pointer-events: none; }

/* O canvas da demo tem de preencher o contentor (o id é diferente do formando,
   por isso não apanhava a regra width/height:100% e ficava só numa parte). */
.demo-layout .fm-canvas-wrap canvas,
#demo-canvas { display: block; width: 100%; height: 100%; }

/* Azulejos de vitais da demo em telemóvel deitado: layout próprio, simples e
   legível (rótulo em cima + número por baixo), sobrepondo as regras compactas
   do monitor do formando que escondem os rótulos das caixas grandes. */
@media (orientation: landscape) and (max-height: 560px) {
  .demo-layout .fm-vitais .vital-tile.fm-tile {
    display: flex !important; flex-direction: column !important;
    align-items: flex-start !important; justify-content: center !important;
    padding: 6px 14px !important; gap: 2px !important; overflow: visible !important;
  }
  .demo-layout .fm-vitais .vital-tile.fm-tile .rotulo {
    display: block !important; position: static !important; flex: 0 0 auto !important;
    font-size: 11px !important; opacity: 0.9 !important; white-space: nowrap !important; margin: 0 0 2px 0 !important;
  }
  .demo-layout .fm-vitais .vital-tile.fm-tile .valor { font-size: 30px !important; flex: 0 0 auto !important; }
  .demo-layout .fm-vitais .vital-tile.fm-tile.t-fc .valor { font-size: 36px !important; }
  .demo-layout .fm-vitais .vital-tile.fm-tile.t-pa .valor { font-size: 26px !important; }
}

@media (max-width: 560px) {
  .demo-rodape { flex-direction: column-reverse; }
  .demo-rodape .btn { width: 100%; }
  .demo-selo { font-size: 10.5px; padding: 4px 9px; }
}

/* ===========================================================================
   FAIXA DO GUIÃO — mostra que a demo NÃO está parada
   Problema que resolve: quem chegava via um ritmo fixo, não percebia que ia
   mudar sozinho, e saía antes de ver a taquicardia, a FA, a TV e a FV.
   =========================================================================== */
.demo-guiao {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 16px; min-width: 0;
  border-bottom: 1px solid var(--line, #1c2530);
  background: rgba(10,14,20,0.5);
}
.demo-guiao-rot, .demo-guiao-fim {
  flex-shrink: 0; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-lo);
}
.demo-guiao-fim { margin-left: auto; }
.demo-guiao-lista {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  list-style: none; margin: 0; padding: 0; overflow-x: auto;
  scrollbar-width: none;
}
.demo-guiao-lista::-webkit-scrollbar { display: none; }
.demo-passo {
  position: relative; flex-shrink: 0; overflow: hidden;
  padding: 5px 12px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  color: var(--text-lo); background: var(--surface-2, #141A24);
  border: 1px solid var(--line, #1c2530);
  transition: color .25s, border-color .25s, background .25s;
}
.demo-passo.is-feito { color: var(--text-mid); border-color: var(--line-strong, #2A3441); }
.demo-passo.is-ativo {
  color: var(--bg-sunken, #05070B); font-weight: 700;
  background: var(--ecg, #3DF58A); border-color: var(--ecg, #3DF58A);
  box-shadow: 0 0 18px rgba(61,245,138,0.35);
}
.demo-passo-txt { position: relative; z-index: 1; }
/* barrinha que enche durante o passo: dá a sensação de "vem aí o próximo" */
.demo-passo-barra {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: rgba(5,7,11,0.55); z-index: 2;
}
.demo-passo.is-ativo .demo-passo-barra { animation: demoBarra var(--dur, 6000ms) linear forwards; }
@keyframes demoBarra { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 560px) {
  .demo-guiao { gap: 8px; padding: 7px 12px; }
  .demo-guiao-rot { display: none; }   /* no telemóvel os chips falam por si */
  .demo-passo { font-size: 10.5px; padding: 4px 10px; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .demo-guiao { padding: 5px 12px; }
  .demo-guiao-rot, .demo-guiao-fim { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-passo.is-ativo .demo-passo-barra { animation: none; transform: scaleX(1); }
  .demo-selo-ponto { animation: none; }
}