/* ══════════════════════════════════════════════════════════════════
   ESTILO DA AREA DOS MODULOS NOVOS
   ──────────────────────────────────────────────────────────────────
   Folha unica de escuta.html e agua.html. Carregue com
   <link rel="stylesheet" href="estilo.css">, que a CSP permite
   (style-src 'self').

   ESTE ARQUIVO NAO E FONTE DE COR. Os tokens do bloco :root abaixo
   sao COPIA do :root de index.html (linhas 15 a 93), trazida para ca
   porque as paginas dos modulos nao carregam o index e nao podem
   edita-lo. Quando a marca mudar, ela muda LA e volta para ca a mao.
   Nao invente cor de marca aqui: --navy e --teal vem da logo.

   O QUE --teal PODE E O QUE NAO PODE.
   --teal tem 2,12 de contraste sobre branco, medido e anotado no
   index. Entao ele BRILHA: borda, halo, linha sobre fundo escuro. Ele
   nunca carrega texto sobre claro e nunca e, sozinho, o anel de foco
   sobre claro, porque 2,12 tambem reprova no minimo de 3 para 1 que
   um indicador de foco precisa ter contra o que esta em volta. Quem
   carrega texto e anel sobre claro e --accent, com 6,02.

   PREFIXO bvm-.
   Toda classe daqui comeca com bvm-. As paginas dos modulos vivem em
   arquivos proprios, mas o prefixo deixa obvio, em qualquer busca no
   repositorio, o que e da area nova e o que e do app que ja existe.
   Nenhuma regra deste arquivo alcanca index.html, coleta.html,
   anamnese.html ou admin.html.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ── COPIA DOS TOKENS DE index.html:16-93 ──────────────────────── */
  /* Marca. Vem da logo, nao se mexe. */
  --navy: #10306E;
  --navy2: #16408C;
  --navy3: #1A46A0;
  --accent: #0A6E73;
  --accent2: #06484C;
  --teal: #1FC5C9;
  --teal-claro: #5EE9ED;   /* o turquesa que serve sobre fundo escuro */

  /* Chao escuro: tinta, e nao preto. Preto puro faz o turquesa
     parecer adesivo colado na tela. */
  --tinta: #071229;
  --tinta2: #0A1B3D;

  /* Texto e superficie. */
  --text: #1A202C;
  --soft: #4A5568;
  --gray: #5A6577;
  --grayBg: #F8F9FA;
  --border: #E2E8F0;
  --white: #fff;
  --fundo: #f0f4f8;

  /* Estado. */
  --green: #1e7e44;
  --greenBg: #eaf5ee;
  --okBorda: #A7D7B5;
  --red: #b91c1c;
  --redBg: #fef2f2;

  /* Familia unica de aviso. Antes da unificacao eram quatro beges
     parecidos mas diferentes no mesmo documento. */
  --avisoBg: #FBF6EC;
  --avisoBorda: #EBD9BA;
  --avisoLinha: #8A5311;
  --avisoTexto: #6B4A12;
  --erroLinha: #9A2C2C;
  --erroBorda: #E8C4C4;
  --erroTexto: #7A2020;

  /* Forma: quatro raios e nada entre eles. */
  --r-selo: 6px;
  --r-campo: 12px;
  --r-cartao: 18px;
  --r-pilula: 999px;
  --sombra-cartao: 0 2px 18px rgba(16, 48, 110, .05);
  --sombra-foco: 0 10px 30px rgba(31, 197, 201, .18);
  --grad-topo: linear-gradient(110deg, var(--tinta) 0%, var(--navy) 62%, var(--navy3) 100%);

  /* Letra. Sora assina, Manrope carrega texto e numero. As duas ja
     chegam pelo Google Fonts nas duas paginas, que a CSP permite em
     style-src e font-src. A pilha de reserva segura a tela quando a
     fonte nao chega. */
  --fonte-titulo: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --fonte-corpo: 'Manrope', 'Segoe UI', system-ui, sans-serif;

  /* ── SO DESTE ARQUIVO ───────────────────────────────────────────
     O respiro lateral da area. 16px e o que mantem o texto longe da
     borda em 360px sem estreitar demais a coluna. */
  --bvm-gutter: 16px;
}

/* ══ BASE ══════════════════════════════════════════════════════════ */

.bvm *,
.bvm *::before,
.bvm *::after { box-sizing: border-box; }

body.bvm {
  margin: 0;
  background: var(--fundo);
  color: var(--text);
  font-family: var(--fonte-corpo);
  font-size: 15px;
  line-height: 1.6;
  -webkit-tap-highlight-color: transparent;
  /* O aparelho com recorte na tela: o conteudo comeca abaixo dele e
     termina acima da barra de gestos. */
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

.bvm h1, .bvm h2, .bvm h3 { font-family: var(--fonte-titulo); margin: 0; }

/* Numero que muda no lugar (tempo, hertz, pico) nao pode dancar de
   largura a cada quadro. Manrope tem algarismo tabular de verdade. */
.bvm-num { font-variant-numeric: tabular-nums; }

/* Rotulo que existe so para quem usa leitor de tela. */
.bvm-so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ══ FOCO ══════════════════════════════════════════════════════════
   Um anel so, em todo lugar, e ele e visivel.
   Duas camadas: o traco de 2px em --accent, que tem 6,02 sobre branco
   e passa com folga no minimo de 3 para 1 de indicador, mais o halo
   turquesa que e a assinatura da casa. O offset de 2px impede que o
   anel encoste na borda do proprio campo e vire uma borda mais grossa,
   que e o jeito de ter foco e ninguem notar.
   Sobre fundo escuro o mesmo anel viraria mancha: la o traco troca
   para o turquesa claro e o halo sai. */
.bvm a:focus-visible,
.bvm button:focus-visible,
.bvm input:focus-visible,
.bvm select:focus-visible,
.bvm textarea:focus-visible,
.bvm canvas:focus-visible,
.bvm [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(31, 197, 201, .22);
}

.bvm-topo a:focus-visible,
.bvm-topo button:focus-visible,
.bvm-topo select:focus-visible,
.bvm-palco a:focus-visible,
.bvm-palco button:focus-visible {
  outline-color: var(--teal-claro);
  box-shadow: none;
}

/* ══ MOVIMENTO ═════════════════════════════════════════════════════
   Quem pediu menos movimento ao sistema recebe menos movimento, e a
   pagina continua inteira: nada aqui depende de transicao para
   aparecer. Vale tambem para o desenho do canvas, que tem o proprio
   portao em agua.js: esta regra cobre so o que e CSS. */
@media (prefers-reduced-motion: reduce) {
  .bvm *,
  .bvm *::before,
  .bvm *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══ CABECALHO DA PAGINA DO MODULO ═════════════════════════════════
   Estatico, nao fixo. A pagina da agua abre um palco de tela cheia e a
   da escuta tem formulario longo: uma barra grudada no topo do celular
   come altura justamente onde ela falta. Quem quiser voltar rola ate o
   topo, que e curto, ou usa o botao de voltar do navegador. */
.bvm-topo {
  background: var(--grad-topo);
  color: #fff;
  padding: 14px var(--bvm-gutter);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}

/* O halo do cabecalho. Centro acima da barra, entao so o rabo da luz
   aparece. Decoracao pura, fora do fluxo do ponteiro. */
.bvm-topo::after {
  content: "";
  position: absolute;
  top: -190px; right: 14%;
  width: 420px; height: 420px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(31, 197, 201, .34) 0%, rgba(31, 197, 201, 0) 70%);
}

.bvm-topo > * { position: relative; z-index: 1; }

.bvm-topo-marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bvm-topo-marca .bvm-marca { width: 30px; height: 30px; flex: none; }

.bvm-topo-nome {
  font-family: var(--fonte-titulo);
  font-size: 18px;
  font-weight: 200;
  letter-spacing: .04em;
  white-space: nowrap;
}
.bvm-topo-nome b { font-weight: 200; color: var(--teal-claro); }

.bvm-topo-tit {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
  min-width: 0;
}
.bvm-topo-sub { font-size: 12.5px; color: #C9DBF2; margin-top: 2px; }

/* Empurra o que vier depois para a direita. */
.bvm-topo-fim { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.bvm-topo-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1.5px solid rgba(255, 255, 255, .34);
  border-radius: var(--r-campo);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font: 600 13.5px/1.2 var(--fonte-corpo);
  cursor: pointer;
}
/* O :hover deste botao mora no bloco de ponteiro fino, no fim do arquivo. */

/* ══ ENVELOPE E RITMO ══════════════════════════════════════════════ */

.bvm-env {
  max-width: 900px;
  margin: 0 auto;
  padding: 22px var(--bvm-gutter) 56px;
}

/* O espaco entre os blocos mora aqui, e nao no painel: painel sem
   margem propria deixa cada tela decidir o proprio ritmo. */
.bvm-pilha { display: flex; flex-direction: column; gap: 20px; }

/* Grade de cartao. minmax de 200px cabe em uma coluna a 360px sem
   estourar e vira duas assim que houver largura. */
.bvm-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

/* Linha de botoes. Quebra em vez de espremer. */
.bvm-acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ══ PAINEL E CARTAO ═══════════════════════════════════════════════
   Painel e a superficie de um passo inteiro da tela. Cartao e a
   unidade que se repete dentro dele: uma coleta da lista, uma paleta,
   uma base sonora. Sao dois papeis, por isso sao duas classes. */

.bvm-painel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-cartao);
  padding: 24px;
  box-shadow: var(--sombra-cartao);
}

/* O cabecalho do painel e um bloco proprio, e e ELE que carrega a
   distancia ate o miolo. Pendurar essa margem no subtitulo daria dois
   resultados diferentes conforme o painel tivesse ou nao subtitulo. */
.bvm-painel-cab { margin-bottom: 18px; }

/* PARAGRAFO SOLTO DENTRO DO PAINEL. Nao havia reset de <p>, entao o
   primeiro paragrafo ficava 18 px do cabecalho MAIS 15 px da margem do
   navegador, e cada paragrafo seguinte decidia o proprio vao. Agora o
   painel manda: 12 px entre paragrafos, nada acima do primeiro, nada
   abaixo do ultimo. A dica logo depois de um paragrafo encosta nele,
   porque ela complementa a frase de cima. */
.bvm-painel > p { margin: 0 0 12px; }
.bvm-painel > p:last-child { margin-bottom: 0; }
.bvm-painel-cab + p { margin-top: 0; }
.bvm-painel > p + p.bvm-dica { margin-top: -6px; }
/* Dica dentro do painel e seguida de outra coisa, como os botoes da
   triagem: sem estes 12 px, o p.bvm-dica de margem zero la de baixo
   deixava a frase encostada no botao. */
.bvm-painel > p.bvm-dica { margin-bottom: 12px; }
.bvm-painel > p.bvm-dica:last-child { margin-bottom: 0; }

.bvm-painel-tit {
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.01em;
}
/* SUBTITULO DE PAINEL, hoje sem nenhum usuario. Em 19/10/2026 as duas
   telas desta area perderam todos os seus: o subtitulo virou o lugar
   onde cada painel explicava a si mesmo, e a tela do profissional
   abria com tres paragrafos antes da primeira escolha. A regra fica
   porque a classe continua valendo para um painel que precise mesmo de
   uma linha de apoio; o criterio de quando ela se justifica esta no
   cabecalho de modulos/escuta.html. */
.bvm-painel-sub { font-size: 13px; color: var(--gray); margin-top: 3px; }

.bvm-cartao {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-cartao);
  padding: 16px;
  box-shadow: var(--sombra-cartao);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
/* display:block nos dois porque eles empilham SEMPRE, venham como
   <span>, <div> ou <p> na marcacao. Sem isto, dois <span> seguidos
   viram uma linha so e a data encosta no detalhe. */
.bvm-cartao-tit { display: block; font-size: 15px; font-weight: 700; color: var(--navy); }
.bvm-cartao-det { display: block; font-size: 12.5px; color: var(--soft); margin-top: 4px; }

/* Cartao que e botao de escolha. E <button> na marcacao, nao uma
   <div> com onclick: botao ja nasce com Tab, Enter e Espaco. */
button.bvm-cartao {
  width: 100%;
  min-height: 44px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
/* O :hover e o :active do cartao moram no bloco de ponteiro, no fim do
   arquivo: ver la por que o realce de passar o mouse nao vale no toque. */

/* Escolhido. A cor sozinha nao pode ser o unico sinal, entao vem
   junto a borda de 2px e o ponto da esquerda. */
.bvm-cartao[aria-pressed="true"],
.bvm-cartao.bvm-escolhido {
  border: 2px solid var(--accent);
  box-shadow: inset 4px 0 0 var(--teal), var(--sombra-cartao);
  padding: 15px;
}

/* ══ BOTOES ════════════════════════════════════════════════════════
   min-height de 44px em todos, que e o alvo de toque minimo. O
   primario carrega a acao da tela, o secundario tudo o mais. */

.bvm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 22px;
  border-radius: var(--r-campo);
  font: 700 14px/1.2 var(--fonte-corpo);
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background .15s, border-color .15s, color .15s, transform .08s, filter .08s;
}

.bvm-btn-primario {
  background: linear-gradient(120deg, var(--navy) 0%, var(--accent) 100%);
  color: #fff;
  box-shadow: 0 8px 22px rgba(10, 110, 115, .30);
}

.bvm-btn-secundario {
  background: #fff;
  border-color: var(--border);
  color: var(--soft);
  font-weight: 600;
}

/* Botao so com simbolo tambem precisa dos 44 por 44, e precisa de
   aria-label na marcacao: sem texto visivel, o rotulo e o unico nome
   que ele tem. */
.bvm-btn-icone { min-width: 44px; padding: 10px; }

/* LINK VESTIDO DE BOTAO. Ele e <a> de verdade, e nao botao com
   onclick: link abre em outra aba, copia endereco e responde ao
   teclado sem codigo nenhum. So o sublinhado sai, porque sublinhado
   dentro de um botao parece defeito de renderizacao. O anel de foco
   nao depende dele: vem da regra de :focus-visible deste arquivo.
   A regra morava no <style> de agua.html ate 19/10/2026, e nesse dia
   se descobriu que escuta.html tem quatro links desses, todos
   sublinhados: o de voltar no cabecalho, os dois de abrir o Biovoxis e
   o de baixar a faixa pronta. */
.bvm a.bvm-topo-btn,
.bvm a.bvm-btn { text-decoration: none; }

/* Desligado precisa PARECER desligado. Sem isto o botao continua
   colorido e clicavel a vista, e o clique sem efeito e lido como
   "nao funcionou". */
.bvm-btn:disabled,
.bvm-btn[aria-disabled="true"] {
  opacity: .45;
  cursor: default;
  filter: grayscale(.35);
  box-shadow: none;
  transform: none;
}

/* ══ CAMPO COM ROTULO ══════════════════════════════════════════════
   O rotulo e sempre <label for="...">, nunca um paragrafo acima do
   campo: so o for liga os dois para o leitor de tela e so ele faz o
   clique no rotulo levar o cursor para dentro do campo. */

.bvm-campo { display: block; margin-bottom: 18px; }

/* O corte da margem final e do ULTIMO campo do painel, nao de
   qualquer campo que calhe de ser o ultimo do pai. Um `:last-child`
   solto zerava a margem do segundo campo do par lado a lado, e ai, no
   celular, onde o par empilha, o botao encostava no campo de cima. */
.bvm-painel > .bvm-campo:last-child,
.bvm-painel > form > .bvm-campo:last-child { margin-bottom: 0; }

.bvm-rotulo {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
}

.bvm-entrada,
.bvm-seletor {
  width: 100%;
  min-height: 48px;
  padding: 12px 15px;
  border: 1.5px solid #DCE4EF;
  border-radius: var(--r-campo);
  background: #fff;
  color: var(--text);
  /* 16px nao e escolha estetica, e a mesma razao escrita em
     anamnese.html:120: abaixo disso o Safari do iPhone da zoom sozinho
     ao focar o campo, e quem esta no telefone perde o enquadramento da
     tela inteira. Aqui o campo e de largura 100%, entao subir a fonte
     so mexe na altura: medido a 360 px, 49 px viraram 51. */
  font: 16px/1.4 var(--fonte-corpo);
  outline: none;
}

/* A borda turquesa marca o campo ativo. Ela nao substitui o anel de
   foco: o anel vem da regra global de :focus-visible e e ele que
   carrega o contraste. */
.bvm-entrada:focus,
.bvm-seletor:focus { border-color: var(--teal); }

.bvm-entrada:disabled,
.bvm-seletor:disabled { background: var(--grayBg); color: var(--gray); cursor: default; }

/* A seta do seletor e desenho nosso, em data URI, e nao um caractere
   de texto: o mesmo caractere sai diferente em cada sistema. data:
   passa na CSP porque img-src a permite, e background-image cai em
   img-src. `appearance:none` tira a seta nativa; o padding da direita
   abre o lugar da nossa. */
.bvm-seletor {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%234A5568' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

/* Linha de ajuda embaixo do campo. Fica ligada pelo aria-describedby,
   senao ela existe so para quem enxerga. */
.bvm-dica { font-size: 13px; color: var(--gray); margin-top: 6px; line-height: 1.55; }
/* A dica e <p> numa tela e <div> na outra. Sem este corte, o mesmo
   componente ganhava 15 px de margem do navegador embaixo quando vinha
   como paragrafo, e zero quando vinha como div. */
p.bvm-dica { margin-bottom: 0; }

/* Dois campos lado a lado no computador, empilhados no celular. */
.bvm-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

/* Campo que nao se edita aqui. Parece campo, para manter o
   alinhamento, mas tracejado e sem fundo branco: a diferenca tem de
   ser visivel antes do clique, nao depois. */
.bvm-leitura {
  font-size: 14px;
  color: var(--soft);
  padding: 12px 15px;
  background: var(--grayBg);
  border: 1.5px dashed var(--border);
  border-radius: var(--r-campo);
  word-break: break-word;
  /* Vem como <p> na marcacao, e a margem de paragrafo do navegador
     somava 15 px ao vao entre o rotulo e o valor. */
  margin: 0;
}

/* ══ FAIXA DE AVISO ════════════════════════════════════════════════
   Tres estados e uma familia so. A barra colorida da esquerda e
   SOMBRA INTERNA, nao borda: borda de 4px de um lado deslocaria o
   texto em 3px em relacao aos blocos vizinhos, e o acerto do padding
   muda junto com a largura da tela. inset nao ocupa espaco.

   Cor nunca e o unico sinal: a marcacao poe role="status" no aviso
   neutro e role="alert" no de erro, e cada faixa comeca com uma
   palavra em <strong> que diz o que ela e. */

.bvm-aviso {
  border-radius: var(--r-campo);
  padding: 12px 15px;
  font-size: 13.5px;
  line-height: 1.65;
  background: var(--grayBg);
  border: 1px solid var(--border);
  color: var(--soft);
  box-shadow: inset 4px 0 0 var(--gray);
}
.bvm-aviso strong { color: var(--text); }
.bvm-aviso ul { margin: 7px 0 0; padding-left: 19px; }
.bvm-aviso li { margin-bottom: 4px; }

.bvm-aviso.bvm-atencao {
  background: var(--avisoBg);
  border-color: var(--avisoBorda);
  color: var(--avisoTexto);
  box-shadow: inset 4px 0 0 var(--avisoLinha);
}
.bvm-aviso.bvm-atencao strong { color: var(--avisoLinha); }

.bvm-aviso.bvm-erro {
  background: var(--redBg);
  border-color: var(--erroBorda);
  color: var(--erroTexto);
  box-shadow: inset 4px 0 0 var(--erroLinha);
}
.bvm-aviso.bvm-erro strong { color: var(--erroLinha); }

/* O desfecho que deu certo. Existe porque pintar de vermelho uma
   resposta normal faz refazer o que ja estava feito. */
.bvm-aviso.bvm-ok {
  background: var(--greenBg);
  border-color: var(--okBorda);
  color: var(--green);
  box-shadow: inset 4px 0 0 var(--green);
}
.bvm-aviso.bvm-ok strong { color: var(--green); }

/* O BLOCO DE PROCEDENCIA (.bvm-proc) morava aqui. Saiu em 05/11/2026,
   junto com os dois ultimos blocos que o usavam em agua.html, por decisao
   do Davi. */

/* ══ AREA DE REPRODUCAO DE AUDIO ═══════════════════════════════════
   O <audio controls> nativo e de proposito: ele ja vem com teclado,
   com leitor de tela, com a barra de tempo do sistema e com o menu de
   velocidade do navegador. Uma barra desenhada por nos comecaria sem
   nada disso. */

.bvm-audio {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-cartao);
  padding: 16px;
  box-shadow: var(--sombra-cartao);
}

.bvm-audio-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

/* A nota e o numero que ela vale. O numero sai do FREQ_NOTA do
   nucleo, que usa a conta do motor: anunciar outra casa decimal seria
   anunciar uma medida diferente da que foi gravada. */
.bvm-audio-nota {
  font-family: var(--fonte-titulo);
  font-size: 26px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.1;
}

.bvm-audio audio {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 4px 0 12px;
}

.bvm-audio-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 12.5px;
  color: var(--soft);
  font-variant-numeric: tabular-nums;
}
.bvm-audio-meta b { color: var(--text); font-weight: 700; }

/* Medidor de pico, lido de picoDe() antes de codificar. Verde ate o
   teto, ambar perto dele, vermelho quando houve amostra ceifada. */
.bvm-medidor {
  height: 10px;
  border-radius: var(--r-selo);
  background: var(--grayBg);
  border: 1px solid var(--border);
  overflow: hidden;
  margin: 10px 0 6px;
}
.bvm-medidor-in {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width .12s linear;
}
.bvm-medidor.bvm-alto .bvm-medidor-in { background: #b45309; }
.bvm-medidor.bvm-ceifou .bvm-medidor-in { background: var(--red); }

/* ══ PALCO DO CANVAS ═══════════════════════════════════════════════
   O desenho mora sobre o chao de tinta, que e onde a cor da paleta
   tem onde acontecer.

   SOBRE O position:fixed DA TELA CHEIA.
   Ele so existe com a classe bvm-cheia, que a pessoa liga clicando, e
   dentro de :fullscreen, que so o navegador liga a pedido dela. Ou
   seja, ele cobre a tela porque foi isso que pediram, e nao por
   iniciativa do desenho. Nada neste arquivo fica fixo por conta
   propria sobre o conteudo do celular. A saida acompanha o recorte da
   tela e tem alvo de 44 por 44, entao ela nunca fica embaixo da
   camera nem da barra de gestos. */

/* Quadrado, centrado, e a altura de quem e limitada pela ALTURA DA
   TELA, nao pela largura da coluna. O teto vai em max-width porque,
   com aspect-ratio, limitar a altura deixaria o palco retangular; com
   min() o lado e o menor entre a largura disponivel e 72vh, e o
   quadrado sobrevive nas duas.
   E o `width:100%` e obrigatorio, nao enfeite: dentro de uma pilha
   flex, a margem lateral `auto` desliga o estiramento e a caixa passa
   a medir pelo conteudo. Como o conteudo e um canvas de altura em
   porcentagem, o palco encolhia para um retangulo pequeno no meio da
   coluna. Medido: 300px de altura numa coluna de 900. */
.bvm-palco {
  position: relative;
  width: 100%;
  max-width: min(100%, 72vh);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  background: var(--tinta);
  border-radius: var(--r-cartao);
  overflow: hidden;
}

.bvm-palco-tela {
  display: block;
  width: 100%;
  height: 100%;
}

/* As tres escritas da tela cheia vao em regras SEPARADAS, de
   proposito. Num seletor agrupado, uma pseudo-classe que o navegador
   nao conhece invalida a regra INTEIRA: bastaria um motor sem
   :fullscreen para a classe bvm-cheia, que e nossa e nao depende de
   API nenhuma, parar de valer junto. Separadas, cada uma cai sozinha. */
.bvm-palco.bvm-cheia {
  position: fixed;
  inset: 0;
  z-index: 200;
  border-radius: 0;
  aspect-ratio: auto;
  max-width: none;
  width: 100%;
  height: 100%;
}

.bvm-palco:fullscreen {
  position: fixed;
  inset: 0;
  z-index: 200;
  border-radius: 0;
  aspect-ratio: auto;
  max-width: none;
  width: 100%;
  height: 100%;
}

.bvm-palco:-webkit-full-screen {
  position: fixed;
  z-index: 200;
  border-radius: 0;
  max-width: none;
  width: 100%;
  height: 100%;
}

.bvm-palco-sair {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  z-index: 2;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1.5px solid rgba(255, 255, 255, .42);
  border-radius: var(--r-pilula);
  background: rgba(7, 18, 41, .62);
  color: #fff;
  font: 600 13.5px/1.2 var(--fonte-corpo);
  cursor: pointer;
}

/* ══ RELOGIO DO PALCO, pequeno e de canto ══════════════════════════
   ELE JA FOI GRANDE E CENTRADO, e encolheu em 08/10/2026. O que havia
   antes era um cronometro de 38 a 72 px no meio de baixo, sobre uma
   placa de veu que atravessava o palco inteiro, mais uma frase de
   rodape por baixo. Tudo isso e TINTA ACESA em cima de um padrao que
   foi desenhado, de proposito, com teto de luminancia de 0,36 pelo
   LIMITE 5 de agua.js. Numa tela de 1280 por 800 a placa comia 124 px
   da altura do palco com branco puro, que e luminancia 1: a interface
   acendia mais do que o proprio padrao, e era ela que o olho pegava
   primeiro. O relogio nao e o assunto desta tela.

   Agora ele e uma pilula no canto de baixo e a esquerda, longe dos
   dois botoes, que moram em cima. A frase de rodape saiu do palco e
   ficou LOGO ABAIXO dele, em texto escuro sobre o fundo claro da
   pagina, onde ela nao emite nada por cima do desenho.

   O CONTRASTE, refeito para a pilula. O palco inteiro e canvas, e
   agua.js pinta cada pixel dele dentro da faixa de luminancia de 0,14
   a 0,36. O pior caso para o texto e o pixel mais claro possivel,
   0,36, que em cinza equivalente da #A2A2A2. Compondo a pilula em
   cima dele, com alfa 0,72:
     canal = 0,72 * (7, 18, 41) + 0,28 * (162, 162, 162) = (50, 58, 75)
     luminancia relativa desse composto .......... 0,0425
     contra branco: (1,00 + 0,05) / (0,0425 + 0,05) = 11,3 para 1
   Ou seja o dobro largo dos 4,5 exigidos, e isso NO PIOR PIXEL: sobre
   o fundo da paleta, que e 0,14, a razao fica ainda maior. Mexer no
   alfa da pilula sem refazer esta conta e o jeito de devolver o furo
   que a placa antiga ja tinha tido uma vez. */
.bvm-palco-relogio {
  position: absolute;
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  z-index: 2;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 13px;
  border-radius: var(--r-pilula);
  background: rgba(7, 18, 41, .72);
  pointer-events: none;
}

/* Algarismo tabular continua: sem ele, cada troca de digito muda a
   largura e o numero treme, e num numero pequeno isso incomoda mais
   do que num grande. */
.bvm-cronometro {
  font-family: var(--fonte-corpo);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.bvm-cronometro-rot {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
}

/* ══ CAIXA DE MARCAR COM A FRASE DENTRO ═══════════════════════════
   Ela morava dentro do <style> de modulos/escuta.html, onde e a caixa
   de aceite da gravacao de voz, com um comentario dizendo que ficava
   la por ser de uma tela so. Em 08/10/2026 deixou de ser: a escolha de
   som de agua.html usa o mesmo desenho. Duas copias da mesma caixa em
   duas telas da mesma area e o comeco de duas caixas diferentes, entao
   ela subiu para ca inteira.

   O ROTULO INTEIRO E CLICAVEL, e isso nao e enfeite: alvo de 18 px
   sozinho reprova no toque, e quem precisa ler a frase e a mesma
   pessoa que vai marcar a caixa. */
.bvm-aceite {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-campo);
  background: var(--grayBg);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  cursor: pointer;
}
/* Caixa de marcar logo abaixo de um campo. Sem isto sao os 18px de
   baixo do campo MAIS os 14 de cima da caixa, e o par fica com mais ar
   entre si do que o campo tem com o proprio rotulo. */
.bvm-campo + .bvm-aceite { margin-top: 0; }

.bvm-aceite input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ══ ESTADO VAZIO ══════════════════════════════════════════════════
   Vazio por escolha e vazio por recusa de leitura sao coisas
   diferentes, e a tela tem de poder contar a diferenca: o nucleo
   devolve array vazio com .erro quando o banco recusou. Lista vazia
   usa esta classe; leitura recusada usa .bvm-aviso.bvm-erro, e nunca
   o contrario. Dizer "nao ha nada aqui" quando a consulta foi
   recusada ja fez refazer coleta que estava gravada. */

.bvm-vazio {
  text-align: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-cartao);
  padding: 40px 20px;
  color: var(--gray);
}
.bvm-vazio-tit {
  font-family: var(--fonte-titulo);
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
}
.bvm-vazio-txt { font-size: 13.5px; line-height: 1.7; max-width: 46ch; margin: 0 auto; }
.bvm-vazio .bvm-acoes { justify-content: center; margin-top: 16px; }

/* ══ SELO ══════════════════════════════════════════════════════════
   Pilula curta de estado, ao lado de um titulo. */

.bvm-selo {
  display: inline-block;
  padding: 4px 11px;
  border-radius: var(--r-pilula);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--grayBg);
  color: var(--soft);
  border: 1px solid var(--border);
}
.bvm-selo.bvm-plena { background: var(--greenBg); color: var(--green); border-color: var(--okBorda); }
.bvm-selo.bvm-parcial { background: var(--avisoBg); color: var(--avisoTexto); border-color: var(--avisoBorda); }

/* ══ TELA ESTREITA, DE 360px PARA CIMA ═════════════════════════════ */

@media (max-width: 640px) {
  body.bvm { font-size: 14.5px; }
  .bvm-env { padding: 18px var(--bvm-gutter) 44px; }
  .bvm-pilha { gap: 16px; }
  .bvm-painel { padding: 18px; }
  .bvm-dupla { grid-template-columns: 1fr; }
  /* O TETO DO PALCO E DE LARGURA, nunca de altura. Com aspect-ratio
     de 1/1, limitar a altura encolhe so um lado: medido em 640 por
     360, um max-height de 62vh deixava o palco em 259 por 223 e os
     aneis concentricos saiam elipse. Em largura, o quadrado sobrevive
     nas duas orientacoes. */
  .bvm-palco { max-width: min(100%, 62vh); }
  /* Botao de largura inteira no celular: dois botoes lado a lado a
     360px viram dois alvos estreitos, e o polegar erra. */
  .bvm-acoes .bvm-btn { width: 100%; }
  .bvm-acoes .bvm-btn-icone { width: auto; }
}

@media (max-width: 400px) {
  .bvm-topo { padding: 12px 14px; gap: 10px; }
  .bvm-topo-sub { display: none; }
  .bvm-painel { padding: 16px; border-radius: var(--r-campo); }
  .bvm-audio-nota { font-size: 22px; }
  .bvm-grade { grid-template-columns: 1fr; }
}

/* ══ ESQUELETO DE CARGA ════════════════════════════════════════════
   O estado Abrindo era um cartao com uma palavra e nada mais, e em rede
   lenta de celular cartao parado parece travamento. Duas barras que
   pulsam dizem que algo esta em curso sem prometer prazo. A pulsacao e
   so de opacidade, e o bloco de movimento reduzido la de cima a corta
   para quem pediu menos movimento. */
.bvm-esqueleto { display: grid; gap: 10px; margin-top: 14px; }
.bvm-esqueleto span {
  display: block;
  height: 12px;
  border-radius: var(--r-selo);
  background: var(--grayBg);
  border: 1px solid var(--border);
  animation: bvm-pulsa 1.4s ease-in-out infinite;
}
.bvm-esqueleto span:nth-child(2) { width: 62%; }
@keyframes bvm-pulsa { 50% { opacity: .45; } }

/* ══ BOTAO DE TEXTO ═══════════════════════════════════════════════
   A saida de quem abriu a ficha errada, igual nas duas telas. Morava
   em duas copias, .bvm-ag-trocar em agua.html e .bvm-es-trocar em
   escuta.html, que ja diferiam no :hover. As classes antigas ficam na
   marcacao, e esta e a regra que vale.
   DISCRETO NAO E PEQUENO: 44 px de altura, que e o alvo minimo de
   toque, e 13,5 px de letra, que e o minimo de leitura confortavel de
   um link de acao no celular. A cor e --accent, com 6,02 sobre branco,
   e nunca --teal, que tem 2,12. */
/*  O atributo hidden perde para qualquer display de classe. Sem esta
    regra, o "Escolher outra pessoa" escondido em 05/11/2026 continuava
    na tela vinculada da escuta, e so a agua o escondia, por acaso de
    ordem de folha. */
.bvm .bvm-link-acao[hidden] { display: none; }
.bvm .bvm-link-acao {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 2px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--accent);
  font: 600 13.5px/1.4 var(--fonte-corpo);
  text-decoration: underline;
  cursor: pointer;
}

/* ══ BUSCA NA LISTA DE PESSOAS ═════════════════════════════════════
   Aparece so quando a lista passa de uma dezena de nomes. A contagem
   fica na mesma linha da dica, em algarismo tabular para nao dancar a
   cada letra digitada. */
.bvm-busca-conta { font-weight: 700; color: var(--soft); }

/* ══ GRADE CURTA ═══════════════════════════════════════════════════
   Escolha de um toque com rotulo curto, como a duracao da faixa. A
   grade comum vira uma coluna abaixo de 400 px, e tres cartoes de 70 px
   empilhados empurravam o botao principal para fora da tela. Aqui os
   tres ficam lado a lado em qualquer largura, com o alvo de 44 px
   mantido pelo button.bvm-cartao. Fica DEPOIS do bloco de 400 px de
   proposito, para vencer a regra de uma coluna dele. */
.bvm-grade.bvm-grade-curta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bvm-grade-curta .bvm-cartao { padding: 12px 10px; }
.bvm-grade-curta .bvm-cartao[aria-pressed="true"] { padding: 11px 9px; }
.bvm-grade-curta .bvm-cartao-tit { font-size: 14px; }

/* ══ RITMO SEM style= NA MARCACAO ══════════════════════════════════
   As telas decidiam o proprio espaco em style="margin-top:18px" solto,
   cada uma com um numero. Tres degraus, e so tres: 6 para o que
   complementa o de cima, 12 para o que vem junto, 18 para o que abre
   assunto novo. O prefixo .bvm da a estas regras o peso de vencer a
   margem de componente (.bvm-dica, .bvm-campo) sem !important.
   O display:none de escuta.html NAO vira classe: ele e o estado que a
   funcao mostrar() daquela tela le e escreve. */
.bvm .bvm-mt-s { margin-top: 6px; }
.bvm .bvm-mt-m { margin-top: 12px; }
.bvm .bvm-mt-l { margin-top: 18px; }
.bvm .bvm-mb-0 { margin-bottom: 0; }
.bvm .bvm-mb-s { margin-bottom: 6px; }
.bvm .bvm-mb-m { margin-bottom: 12px; }
.bvm .bvm-mt-rodape { margin-top: 28px; }
.bvm .bvm-centro { text-align: center; }

/* ══ PONTEIRO E TOQUE ══════════════════════════════════════════════
   O realce de passar o mouse so vale onde existe mouse. Em tela de
   toque o navegador simula o :hover no toque e o deixa GRUDADO depois,
   e o cartao ficava levantado 2 px ate o proximo toque em outro lugar.
   Em troca, o toque ganha o :active logo abaixo: o destaque nativo do
   navegador esta desligado em body.bvm, e sem isto o dedo nao tinha
   retorno nenhum ate a acao terminar, que em Montar a faixa leva
   alguns segundos de aba parada. O bloco de movimento reduzido zera a
   transicao dos dois. */
@media (hover: hover) {
  .bvm-topo-btn:hover { background: rgba(255, 255, 255, .18); }
  button.bvm-cartao:hover { border-color: var(--teal); box-shadow: var(--sombra-foco); transform: translateY(-2px); }
  .bvm-btn-primario:hover { background: linear-gradient(120deg, var(--navy2) 0%, var(--accent) 100%); }
  .bvm-btn-secundario:hover { border-color: var(--accent); color: var(--accent); }
  .bvm-entrada:hover,
  .bvm-seletor:hover { border-color: #C3D2E6; }
  .bvm-palco-sair:hover { background: rgba(7, 18, 41, .86); }
  .bvm .bvm-link-acao:hover { color: var(--accent2); }
}

.bvm-btn:active:not(:disabled) { transform: translateY(1px); filter: brightness(.95); }
button.bvm-cartao:active:not(:disabled) { border-color: var(--accent); }
.bvm-topo-btn:active { background: rgba(255, 255, 255, .22); }

/* ══ CABECALHO NO CELULAR ══════════════════════════════════════════
   Com flex-wrap, marca, titulo e o par idioma mais voltar quebravam em
   tres linhas a 360 px, e o cabecalho comia de 130 a 170 px justo onde
   falta altura. Em grade, a primeira linha leva a marca a esquerda e as
   acoes a direita, e o titulo ganha a segunda linha inteira. escuta.html
   embrulha o h1 numa div, que carrega a classe .bvm-topo-tit-env para
   cair na mesma area que o titulo de agua.html. */
@media (max-width: 480px) {
  .bvm-topo {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "marca fim" "tit tit";
    row-gap: 8px;
  }
  .bvm-topo-marca { grid-area: marca; }
  .bvm-topo-fim { grid-area: fim; justify-content: flex-end; margin-left: 0; min-width: 0; }
  .bvm-topo > .bvm-topo-tit,
  .bvm-topo > .bvm-topo-tit-env { grid-area: tit; }
}

/* Abaixo de 400 px o nome escrito da marca sai e fica so o simbolo,
   que segura a identidade no canto sem disputar a linha com o seletor
   de idioma e com o botao de voltar. */
@media (max-width: 400px) {
  .bvm-topo-nome { display: none; }
}