/* ---------------------------------------------------------------------------
   Monitor 01V96
   Tema escuro monocromatico. Sem gradiente e sem cor de enfeite: no palco o
   que importa e bater o olho e saber onde esta cada fader.
   --------------------------------------------------------------------------- */

:root {
  --fundo: #0a0a0c;
  --superficie: #131317;
  --superficie-2: #1b1b20;
  --superficie-3: #24242b;
  --linha: #2a2a32;
  --linha-forte: #3d3d47;

  --texto: #f6f6f8;
  --texto-2: #adadb8;
  --texto-3: #7a7a86;

  --largura-fader: 62px;
  --largura-mestre: 80px;
  --punho: 32px;
  --vao: 6px;

  --raio-g: 20px;
  --raio-m: 12px;
  --raio-p: 9px;

  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Sem isto, qualquer classe com "display" vence o atributo hidden e o elemento
   continua na tela. Vale para as etapas do assistente e para o aviso de vazio. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior: none;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* minmax(0,...) nas duas direcoes: sem isso a faixa de canais empurraria a
     pagina inteira para o lado em vez de rolar dentro da propria faixa. */
  grid-template-columns: minmax(0, 1fr);
  height: 100dvh;
  overflow: hidden;
  background: var(--fundo);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  touch-action: manipulation;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

button, input, select { font-family: inherit; }

/* ------------------------------- topo ------------------------------------ */

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  padding-top: calc(11px + env(safe-area-inset-top));
  padding-left: calc(14px + env(safe-area-inset-left));
  padding-right: calc(14px + env(safe-area-inset-right));
  background: rgba(19, 19, 23, 0.86);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--linha);
}

.marca {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.marca__icone {
  width: 19px;
  height: 19px;
  flex: none;
  align-self: center;
  fill: none;
  stroke: var(--texto);
  stroke-width: 1.4;
  stroke-linecap: round;
}

.marca__icone rect {
  fill: var(--texto);
  stroke: none;
}

.marca__texto {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.marca__sub {
  font-size: 10px;
  font-weight: 600;
  color: var(--texto-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.topo__acoes {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
}

.conexao {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px 0 11px;
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  border-radius: 999px;
  color: var(--texto-2);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  cursor: pointer;
}

.conexao:active { background: var(--superficie-3); }

.conexao__ponto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--texto-3);
  flex: none;
}

body[data-conexao="online"] .conexao__ponto {
  background: var(--texto);
  box-shadow: 0 0 0 3px rgba(246, 246, 248, 0.14);
}

body[data-conexao="online"] .conexao__texto { color: var(--texto); }

body[data-conexao="offline"] .conexao__ponto,
body[data-conexao="ligando"] .conexao__ponto {
  background: transparent;
  border: 1.5px solid var(--texto-2);
  animation: pulsar 1.2s ease-in-out infinite;
}

@keyframes pulsar {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

.icone-botao {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  border-radius: 999px;
  cursor: pointer;
}

.icone-botao:active { background: var(--superficie-3); }

.icone-botao:disabled { opacity: 0.4; cursor: default; }

.icone-botao--apagado { opacity: 0.45; }

.icone-botao svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--texto-2);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------ palco ------------------------------------ */

.palco {
  position: relative;
  display: flex;
  min-height: 0;
  min-width: 0;
}

/* Sem bridge, os faders ficam apagados e travados: mexer neles nao mudaria
   nada no seu fone, e pior, daria a impressao de que mudou. */
body[data-conexao="offline"] .canais,
body[data-conexao="offline"] .mestre,
body[data-conexao="ligando"] .canais,
body[data-conexao="ligando"] .mestre {
  opacity: 0.2;
  pointer-events: none;
}

.canais {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: var(--vao);
  padding: 14px 10px;
  padding-left: calc(10px + env(safe-area-inset-left));
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.canais::-webkit-scrollbar { display: none; }

.mestre {
  flex: none;
  display: flex;
  padding: 14px 10px;
  padding-right: calc(10px + env(safe-area-inset-right));
  background: var(--superficie);
  border-left: 1px solid var(--linha);
}

/* ------------------------------ fader ------------------------------------ */

.fader {
  --v: 0;
  flex: none;
  width: var(--largura-fader);
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 0;
}

.mestre .fader { width: var(--largura-mestre); }

.fader__valor {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--texto);
}

.fader__trilho {
  position: relative;
  flex: 1;
  min-height: 140px;
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
  touch-action: none;
  cursor: grab;
  overflow: hidden;
}

.fader__trilho:focus-visible {
  outline: 2px solid var(--texto);
  outline-offset: 2px;
}

.fader[data-arrastando="1"] .fader__trilho {
  border-color: var(--linha-forte);
  cursor: grabbing;
}

.fader__marca {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: #34343e;
}

.fader__nivel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--punho) / 2 + var(--v) * (100% - var(--punho)));
  /* Precisa dar para ver o nivel de longe, sem precisar ler o numero. */
  background: #303039;
  border-top: 1px solid #50505d;
}

.fader__punho {
  position: absolute;
  left: 4px;
  right: 4px;
  height: var(--punho);
  bottom: calc(var(--v) * (100% - var(--punho)));
  background: var(--texto);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  transition: background 0.15s ease;
}

.fader__risco {
  width: 46%;
  height: 1.5px;
  border-radius: 1px;
  background: var(--fundo);
  opacity: 0.35;
}

.fader__risco + .fader__risco { opacity: 0.35; }

.fader__mudo {
  height: 30px;
  padding: 0;
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  background: var(--superficie-2);
  color: var(--texto-3);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.fader__mudo:active { background: var(--superficie-3); }

.fader__mudo[aria-pressed="true"] {
  background: var(--texto);
  border-color: var(--texto);
  color: var(--fundo);
}

.fader__rotulo {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texto-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A classe vem do "tipo" do controle (canal, reverb, master), do jeito que o
   bridge manda no protocolo. */
.fader--master .fader__rotulo,
.fader--master .fader__valor { color: var(--texto); }

.fader--master .fader__rotulo {
  font-size: 9px;
  letter-spacing: 0.02em;
}

.fader--master .fader__trilho { border-color: var(--linha-forte); }

.fader--reverb .fader__trilho { border-style: dashed; }

/* Canal mudo: o fader continua na posicao, mas fica claro que nao sai som. */
.fader[data-mudo="1"] .fader__nivel { opacity: 0.3; }
.fader[data-mudo="1"] .fader__punho { background: var(--texto-3); }
.fader[data-mudo="1"] .fader__valor { color: var(--texto-3); }

/* Controle ainda nao calibrado: mexe so na tela, nao chega na mesa. */
.fader--cru .fader__punho { background: var(--texto-2); }
.fader--cru .fader__rotulo::after {
  content: " *";
  color: var(--texto-3);
}

/* --------------------------- tela de aviso ------------------------------- */

.vazio {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px;
  text-align: center;
  background: var(--fundo);
}

.vazio__arte {
  width: 62px;
  height: 62px;
  margin-bottom: 4px;
  fill: none;
  stroke: var(--linha-forte);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.vazio__titulo {
  margin: 0;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--texto);
}

.vazio__texto {
  margin: 0;
  max-width: 32ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--texto-2);
}

.vazio .botao { margin-top: 8px; }

/* ------------------------------ rodape ----------------------------------- */

.rodape {
  padding: 10px 14px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: var(--superficie);
  border-top: 1px solid var(--linha);
  font-size: 11px;
  color: var(--texto-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------- folhas (dialogos) ----------------------------- */

/* No celular sobem de baixo, como folha de app. No computador viram cartao. */
.painel {
  margin: auto auto 0;
  width: 100%;
  max-width: 100%;
  padding: 0;
  border: none;
  border-top: 1px solid var(--linha);
  border-radius: var(--raio-g) var(--raio-g) 0 0;
  background: var(--superficie);
  color: var(--texto);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.7);
}

.painel::backdrop {
  background: rgba(0, 0, 0, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.painel[open] { animation: subir 0.24s cubic-bezier(0.2, 0.9, 0.3, 1); }

@keyframes subir {
  from { transform: translateY(24px); opacity: 0; }
}

.painel__conteudo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 18px 18px;
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
  max-height: 86dvh;
  overflow-y: auto;
}

/* Folha com lista comprida: so a lista rola, os botoes ficam sempre a mao. */
.painel__conteudo--folha {
  overflow: hidden;
  height: 86dvh;
}

.painel__corpo {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px;
  margin: 0 -2px;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* A alcinha de cima, que diz "isto sobe e desce". */
.painel__conteudo::before {
  content: "";
  width: 36px;
  height: 4px;
  margin: 0 auto 6px;
  border-radius: 99px;
  background: var(--linha-forte);
  flex: none;
}

.painel__titulo {
  margin: 0;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.painel__linha {
  margin: 0;
  font-size: 13px;
  color: var(--texto-2);
  white-space: pre-line;
}

.painel__rotulo {
  margin: 4px 0 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.painel__campo {
  width: 100%;
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  padding: 13px 13px;
  color: var(--texto);
  font-size: 16px; /* 16px evita o zoom automatico do iPhone ao focar */
  user-select: text;
  -webkit-user-select: text;
}

.painel__campo:focus {
  outline: none;
  border-color: var(--linha-forte);
  background: var(--superficie-3);
}

select.painel__campo {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23adadb8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 15px;
}

.painel__ajuda {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--texto-3);
}

.painel__erro {
  margin: 0;
  padding: 11px 13px;
  background: var(--superficie-2);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-p);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--texto);
}

.painel__acoes {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.painel__acoes .botao { flex: 1; }

/* ------------------------------ botoes ----------------------------------- */

.botao {
  padding: 13px 18px;
  border-radius: var(--raio-p);
  border: 1px solid var(--texto);
  background: var(--texto);
  color: var(--fundo);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
}

.botao:active { opacity: 0.85; }

.botao--fantasma {
  background: transparent;
  border-color: var(--linha);
  color: var(--texto-2);
  font-weight: 500;
}

.botao--pequeno {
  padding: 9px 13px;
  font-size: 13px;
}

.botao--largo { width: 100%; }

.botao:disabled { opacity: 0.4; cursor: default; }

/* ------------------------------ bloco da mesa ---------------------------- */

.bloco {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 13px;
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
}

.bloco__titulo {
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.bloco__estado {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--texto);
}

.bloco__estado--alerta { color: var(--texto-2); }

/* background-color, e nao background: o atalho apagaria a seta do select. */
.bloco .painel__campo { background-color: var(--superficie); }

/* ---------------------- lista de controles (ajustes) --------------------- */

.lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lista__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 13px;
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
}

.lista__info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.lista__nome {
  font-size: 15px;
  font-weight: 550;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lista__estado {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.lista__estado--pendente { color: var(--texto-2); }

.lista__acoes {
  display: flex;
  gap: 6px;
  flex: none;
}

.lista__vazio {
  padding: 18px 12px;
  font-size: 13px;
  color: var(--texto-3);
  text-align: center;
  border: 1px dashed var(--linha);
  border-radius: var(--raio-m);
}

/* ------------------------- assistente de calibracao ---------------------- */

.etapa {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.etapa__instrucao {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--texto);
}

.etapa__ok {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--texto);
}

.etapa__ok::after {
  content: attr(data-detalhe);
  display: block;
  margin-top: 7px;
  font-size: 11px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0;
  color: var(--texto-3);
}

/* Escolha de tipo, em segmentos colados. */
.opcoes {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  border-radius: 11px;
}

.opcoes__item {
  flex: 1;
  padding: 9px 4px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--texto-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.opcoes__item[aria-pressed="true"] {
  background: var(--texto);
  color: var(--fundo);
  font-weight: 600;
}

/* Medidor ao vivo: mostra que a mesa esta mesmo mandando mensagem. */
.medidor {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 13px;
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  min-height: 66px;
}

.medidor__texto {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--texto-3);
}

.medidor__texto::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--linha-forte);
  flex: none;
}

.medidor__texto--ativo {
  color: var(--texto);
  font-weight: 500;
}

.medidor__texto--ativo::before {
  background: var(--texto);
  animation: bater 0.7s ease-in-out infinite;
}

@keyframes bater {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.45; }
}

.medidor__hex {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--texto-3);
  word-break: break-all;
}

/* ---------------------------- tela grande -------------------------------- */

@media (min-width: 760px) {
  :root {
    --largura-fader: 88px;
    --largura-mestre: 108px;
    --punho: 36px;
    --vao: 10px;
  }

  .canais { padding: 22px 18px; }
  .mestre { padding: 22px 18px; }
  .fader__valor { font-size: 19px; }
  .fader__rotulo { font-size: 11px; }
  .fader--master .fader__rotulo { font-size: 10px; }

  .painel {
    margin: auto;
    width: min(440px, calc(100vw - 40px));
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
  }

  .painel__conteudo { padding: 20px; }
  .painel__conteudo--folha { height: auto; max-height: 82dvh; }
  .painel__conteudo::before { display: none; }
  .painel__acoes { justify-content: flex-end; }
  .painel__acoes .botao { flex: 0 0 auto; }
}

@media (max-height: 620px) {
  .fader__trilho { min-height: 100px; }
  .fader__mudo { height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .conexao__ponto,
  .medidor__texto--ativo::before,
  .painel[open] { animation: none; }
}