/* VC Call — sala de controle: ardósia, tally vermelho, talkback âmbar */
:root {
  --fundo: #1d252e;
  --painel: #27313c;
  --painel-2: #303b48;
  --linha: #3b4757;
  --texto: #e9eef2;
  --suave: #9aa7b4;
  --noar: #e23b2e;
  --talkback: #f0a830;
  --ok: #3db37a;
  --ensaio: #4c8ddb;
  --raio: 6px;
  --fonte: "Barlow", "Segoe UI", system-ui, sans-serif;
  --fonte-tally: "Barlow Semi Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--fundo);
  color: var(--texto);
  font: 400 15px/1.5 var(--fonte);
}
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.2; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.05rem; }
p { margin: 0; }
.suave { color: var(--suave); }
[hidden] { display: none !important; }

/* ---------- controles ---------- */
label { display: block; font-size: 0.85rem; color: var(--suave); margin-bottom: 4px; }
select, input[type="text"], input[type="password"], input[type="number"], textarea {
  width: 100%;
  background: var(--fundo);
  color: var(--texto);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 9px 10px;
  font: inherit;
}
textarea { min-height: 110px; resize: vertical; }
button {
  font: 600 0.95rem var(--fonte);
  border: 1px solid var(--linha);
  background: var(--painel-2);
  color: var(--texto);
  border-radius: var(--raio);
  padding: 10px 16px;
  cursor: pointer;
}
button:hover { border-color: var(--suave); }
button.principal { background: var(--ok); border-color: var(--ok); color: #06140d; }
button.perigo { background: transparent; border-color: var(--noar); color: #ff8c82; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--ensaio); outline-offset: 2px; }
input[type="range"] { width: 100%; accent-color: var(--ensaio); }
.campo { margin-bottom: 14px; }
.linha-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.alternar { display: flex; gap: 8px; align-items: flex-start; font-size: 0.9rem; color: var(--texto); }
.alternar input { margin-top: 4px; }

/* ---------- tally ---------- */
.tally {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  background: var(--painel);
  border-bottom: 4px solid var(--linha);
  transition: background-color 0.25s, border-color 0.25s;
}
.tally .estado {
  font: 700 1.9rem/1 var(--fonte-tally);
  letter-spacing: 0.02em;
  min-width: 9ch;
}
.tally .detalhe { color: var(--suave); font-size: 0.9rem; }
.tally .direita { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.tally[data-status="no-ar"] { background: var(--noar); border-color: #ff6a5c; }
.tally[data-status="no-ar"] .detalhe { color: #ffe3df; }
.tally[data-status="intervalo"] { border-color: var(--talkback); }
.tally[data-status="intervalo"] .estado { color: var(--talkback); }
.tally[data-status="ensaio"] { border-color: var(--ensaio); }
.tally[data-status="ensaio"] .estado { color: #8fbaf0; }

.selo {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8rem; padding: 3px 10px; border-radius: 99px;
  background: var(--fundo); border: 1px solid var(--linha); color: var(--suave);
  white-space: nowrap;
}
.selo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.selo.bom { color: var(--ok); }
.selo.regular { color: var(--talkback); }
.selo.ruim { color: var(--noar); }
.talkback-ativo {
  font: 700 1rem var(--fonte-tally);
  background: var(--talkback); color: #2a1a00;
  padding: 6px 14px; border-radius: var(--raio);
}

/* ---------- layout ---------- */
.pagina { min-height: 100%; display: flex; flex-direction: column; }
.conteudo { flex: 1; padding: 20px; display: grid; gap: 20px; }
.painel { background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; }
.painel > h2 { margin-bottom: 12px; }

.cabine { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
@media (max-width: 900px) { .cabine { grid-template-columns: 1fr; } }

.video {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #000; border-radius: var(--raio); overflow: hidden;
}
.video video { width: 100%; height: 100%; object-fit: contain; display: block; }
.video .vazio {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--suave); font-size: 0.95rem; text-align: center; padding: 20px;
}
.video .nome {
  position: absolute; left: 8px; bottom: 8px;
  background: rgba(0, 0, 0, 0.6); padding: 2px 8px; border-radius: 4px; font-size: 0.8rem;
}
.espelho video { transform: scaleX(-1); }
.falando { box-shadow: 0 0 0 3px var(--ok); }

.grade-colegas { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }

.medidor { height: 8px; background: var(--fundo); border-radius: 4px; overflow: hidden; border: 1px solid var(--linha); }
.medidor > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--ok) 70%, var(--talkback) 85%, var(--noar)); transition: width 60ms linear; }

.botao-tosse { width: 100%; padding: 14px; font-size: 1rem; user-select: none; touch-action: none; }
.botao-tosse.ativo { background: var(--talkback); color: #2a1a00; border-color: var(--talkback); }
.ptt {
  width: 100%; padding: 26px 16px; font: 700 1.4rem var(--fonte-tally);
  user-select: none; touch-action: none;
}
.ptt.aberto { background: var(--talkback); border-color: var(--talkback); color: #2a1a00; }

.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lista li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--fundo); border-radius: var(--raio); }
.lista li .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- pré-entrada ---------- */
.preentrada { max-width: 980px; margin: 0 auto; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 800px) { .preentrada { grid-template-columns: 1fr; } }
.aviso { border-left: 4px solid var(--talkback); padding: 10px 12px; background: var(--fundo); border-radius: 0 var(--raio) var(--raio) 0; font-size: 0.9rem; }
.erro { border-left-color: var(--noar); }

.tela-cheia-msg { min-height: 100vh; display: grid; place-items: center; padding: 24px; text-align: center; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }