/* ============================================================
   CAA Adulto — css/base.css
   Estrutura e componentes. Não tem cor crua, só var().
   ============================================================ */

/* --- reset mínimo --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ============================================================
   FONTES DA MARCA, EM ARQUIVO LOCAL
   As mesmas do site filipesilvestrefono (Sora + Inter). ⛔ Nunca pelo
   Google Fonts: este app tem que abrir sem internet. `font-display: swap`
   faz o texto aparecer na hora com a fonte do sistema e trocar depois,
   então nada some enquanto carrega.
   ============================================================ */
@font-face {
  font-family: 'Sora'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fontes/sora-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fontes/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fontes/inter-600.woff2') format('woff2');
}

html {
  font-family: var(--fonte-familia);
  font-size: var(--fonte-tamanho-base);
  color: var(--cor-tinta);
}

body {
  background: var(--cor-fundo);
  /* altura TRAVADA, não mínima: com min-height o corpo crescia junto com a
     tela de Frases e empurrava a navegação de baixo para fora da vista.
     Quem tem que rolar é o conteúdo de dentro, nunca a página. */
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* --- foco visível (acessibilidade) --- */
*:focus-visible {
  outline: 3px solid var(--cor-acao);
  outline-offset: 2px;
}

/* --- cada tela é um <main> oculto por padrão --- */
/* `min-height: 0` é obrigatório: sem ele o flex se recusa a encolher abaixo do
   conteúdo, a tela cresce e a navegação de baixo some da vista. */
main { display: none; flex-direction: column; flex: 1 1 0; min-height: 0;
       overflow-y: auto; overflow-x: hidden; }
main.ativa { display: flex; }

/* ============================================================
   BARRA DE FRASE (topo fixo)
   ============================================================ */
#barra-frase {
  border-bottom: var(--borda);
  padding: var(--esp-8);
  display: flex;
  align-items: center;
  gap: var(--esp-8);
  min-height: var(--toque-grande);
  flex-shrink: 0;
}
#txt-frase {
  flex: 1;
  font-size: var(--fonte-tamanho-base);
  border: var(--borda);
  border-radius: var(--raio);
  padding: var(--esp-8) var(--esp-12);
  background: var(--cor-fundo);
  color: var(--cor-tinta);
  min-height: var(--toque-min);
  display: flex;
  align-items: center;
  word-break: break-word;
}
#txt-frase:empty::before {
  content: "Toque nos botões para montar a frase";
  color: var(--cor-placeholder);
}
.barra-btns { display: flex; gap: var(--esp-4); flex-shrink: 0; }

/* ============================================================
   BOTÕES GENÉRICOS
   ============================================================ */
.btn {
  font-family: var(--fonte-familia);
  font-size: 16px;
  font-weight: 700;
  border: var(--borda);
  border-radius: var(--raio);
  background: var(--cor-fundo);
  color: var(--cor-tinta);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-4);
  padding: var(--esp-8) var(--esp-16);
  min-height: var(--toque-min);
  white-space: nowrap;
}
.btn:active { background: var(--cor-superficie); }

.btn-primaria {
  background: var(--cor-acao);
  color: var(--cor-texto-botao);
  border-color: var(--cor-acao);
}
.btn-primaria:active { filter: brightness(0.85); }

.btn-gravar {
  background: var(--cor-gravar);
  color: var(--cor-texto-botao);
  border-color: var(--cor-gravar);
}
.btn-gravar:active { filter: brightness(0.85); }

.btn-icone { padding: var(--esp-8); min-width: var(--toque-min); min-height: var(--toque-min); font-size: 24px; }

.btn-grande {
  min-height: var(--toque-grande);
  min-width: var(--toque-grande);
  font-size: 20px;
  padding: var(--esp-12) var(--esp-24);
}

/* ============================================================
   NAVEGAÇÃO INFERIOR
   ============================================================ */
#nav-inferior {
  display: flex;
  border-top: var(--borda);
  flex-shrink: 0;
}
#nav-inferior button {
  flex: 1;
  font-family: var(--fonte-familia);
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-right: var(--borda);
  background: var(--cor-fundo);
  color: var(--cor-tinta);
  cursor: pointer;
  padding: var(--esp-12) var(--esp-8);
  min-height: var(--toque-grande);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-4);
}
#nav-inferior button:last-child { border-right: none; }
#nav-inferior button.ativo { color: var(--cor-acao); border-bottom: 3px solid var(--cor-acao); }
#nav-inferior button:active { background: var(--cor-superficie); }
#nav-inferior .nav-emoji { font-size: 24px; }

/* ============================================================
   PRANCHA (tela principal)
   ============================================================ */
#prancha-header {
  display: flex;
  align-items: center;
  gap: var(--esp-8);
  padding: var(--esp-8);
  border-bottom: var(--borda);
  flex-shrink: 0;
  overflow-x: auto;
}
.cat-tab {
  font-family: var(--fonte-familia);
  font-size: 16px;
  border: var(--borda);
  border-radius: var(--raio);
  background: var(--cor-fundo);
  color: var(--cor-tinta);
  padding: var(--esp-8) var(--esp-12);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.cat-tab.ativo { background: var(--cor-acao); color: var(--cor-texto-botao); border-color: var(--cor-acao); }
.cat-tab:active { background: var(--cor-superficie); }

#grade-prancha {
  flex: 1;
  overflow-y: auto;
  padding: var(--esp-8);
  display: grid;
  gap: var(--esp-8);
  align-content: start;
}

/* grid dinâmico por classe */
.grid-2x2 { grid-template-columns: repeat(2, 1fr); }
.grid-3x3 { grid-template-columns: repeat(3, 1fr); }
.grid-4x4 { grid-template-columns: repeat(4, 1fr); }
.grid-4x6 { grid-template-columns: repeat(4, 1fr); }

.celula-prancha {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--esp-4);
  border: var(--borda);
  border-radius: var(--raio);
  background: var(--cor-fundo);
  cursor: pointer;
  padding: var(--esp-8);
  min-height: var(--toque-grande);
  text-align: center;
  word-break: break-word;
  position: relative;
  overflow: hidden;
}
.celula-prancha:active { background: var(--cor-superficie); }
.celula-prancha .emoji { font-size: 32px; line-height: 1.2; }
.celula-prancha .palavra { font-size: 16px; font-weight: 700; }
.celula-prancha .foto-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.3;
  border-radius: var(--raio);
}

/* selo de áudio real na célula */
.celula-prancha .selo-audio {
  position: absolute;
  top: var(--esp-4);
  left: var(--esp-4);
  font-size: 14px;
  background: var(--cor-acento);
  color: var(--cor-texto-botao);
  border-radius: var(--esp-4);
  padding: 1px 6px;
  pointer-events: none;
  font-weight: 700;
}

/* varredura */
.celula-prancha.scan-linha,
.celula-prancha.scan-celula {
  outline: 4px solid var(--cor-acento);
  outline-offset: -2px;
}

/* cuidador — modo edição */
.celula-prancha.modo-edicao { border-style: dashed; }
.celula-prancha .btn-editar-celula {
  position: absolute;
  top: var(--esp-4);
  right: var(--esp-4);
  width: 24px;
  height: 24px;
  font-size: 14px;
  padding: 0;
  min-height: 0;
  border-radius: var(--esp-4);
  background: var(--cor-acao);
  color: var(--cor-texto-botao);
  border: none;
  cursor: pointer;
  display: none;
}
.modo-edicao .btn-editar-celula { display: flex; align-items: center; justify-content: center; }

.cabecalho-secao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--esp-8) var(--esp-8) var(--esp-4) var(--esp-8);
  flex-shrink: 0;
}
.cabecalho-secao h2 { font-size: 20px; font-weight: 700; }

/* ============================================================
   FRASES RÁPIDAS / FAVORITOS / HISTÓRICO
   ============================================================ */
#tela-frases { overflow-y: auto; }
#tela-frases .cabecalho-secao { position: sticky; top: 0; background: var(--cor-fundo); z-index: 1; }

.lista-frases { list-style: none; padding: 0 var(--esp-8) var(--esp-8) var(--esp-8); }
.lista-frases li {
  display: flex;
  align-items: center;
  gap: var(--esp-8);
  padding: var(--esp-8) 0;
  border-bottom: var(--borda);
}
.lista-frases li:last-child { border-bottom: none; }
.lista-frases .frase-texto {
  flex: 1;
  font-size: var(--fonte-tamanho-base);
  cursor: pointer;
  padding: var(--esp-8);
  border-radius: var(--raio);
  min-height: var(--toque-min);
  display: flex;
  align-items: center;
}
.lista-frases .frase-texto:active { background: var(--cor-superficie); }

/* ============================================================
   TECLADO
   ============================================================ */
#tela-teclado { padding: var(--esp-8); gap: var(--esp-8); }
#teclado-display {
  border: var(--borda);
  border-radius: var(--raio);
  padding: var(--esp-8) var(--esp-12);
  font-size: var(--fonte-tamanho-base);
  min-height: var(--toque-min);
  background: var(--cor-fundo);
  color: var(--cor-tinta);
  word-break: break-word;
}
#teclado-display:empty::before {
  content: "Digite aqui…";
  color: var(--cor-placeholder);
}
#predicoes { display: flex; gap: var(--esp-4); flex-wrap: wrap; min-height: 40px; }
.pred-item {
  font-family: var(--fonte-familia);
  font-size: 16px;
  border: var(--borda);
  border-radius: var(--raio);
  background: var(--cor-fundo);
  color: var(--cor-tinta);
  padding: var(--esp-4) var(--esp-12);
  cursor: pointer;
}
.pred-item:active { background: var(--cor-superficie); }
.teclado-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: var(--esp-4); }
.tecla {
  font-family: var(--fonte-familia);
  font-size: var(--fonte-tamanho-base);
  font-weight: 700;
  border: var(--borda);
  border-radius: var(--raio);
  background: var(--cor-fundo);
  color: var(--cor-tinta);
  cursor: pointer;
  padding: var(--esp-12) var(--esp-4);
  min-height: var(--toque-min);
  text-align: center;
}
.tecla:active { background: var(--cor-superficie); }
.tecla.espaco { grid-column: span 4; }
.tecla.falar-teclado {
  grid-column: span 2;
  background: var(--cor-acao);
  color: var(--cor-texto-botao);
  border-color: var(--cor-acao);
}

/* ============================================================
   BANCO DE VOZ (Minha Voz)
   ============================================================ */
#tela-voz-banco { overflow-y: auto; }
#tela-voz-banco .cabecalho-secao { position: sticky; top: 0; background: var(--cor-fundo); z-index: 1; }
#progresso-voz { font-size: 16px; color: var(--cor-acao); font-weight: 700; padding: var(--esp-8); }
#lista-gravacoes { list-style: none; padding: 0 var(--esp-8); }
#lista-gravacoes li {
  display: flex;
  align-items: center;
  gap: var(--esp-8);
  padding: var(--esp-8) 0;
  border-bottom: var(--borda);
}
#lista-gravacoes li:last-child { border-bottom: none; }
#lista-gravacoes .grav-frase { flex: 1; font-size: var(--fonte-tamanho-base); }
.grav-indicador {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.grav-indicador.feito { background: var(--cor-acao); }
.grav-indicador.faltando { background: var(--cor-superficie); }

.gravador-overlay {
  position: fixed;
  inset: 0;
  background: var(--cor-fundo);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--esp-24);
  padding: var(--esp-32);
}
.gravador-overlay .grav-frase-destaque { font-size: 24px; font-weight: 700; text-align: center; }
.gravador-overlay .grav-timer { font-size: var(--esp-48); font-weight: 700; color: var(--cor-gravar); }
.gravador-overlay .grav-btns { display: flex; gap: var(--esp-8); flex-wrap: wrap; justify-content: center; }
.gravando-pulso {
  animation: pulso 0.8s ease-in-out infinite alternate;
}
@keyframes pulso {
  from { opacity: 1; }
  to   { opacity: 0.4; }
}

/* ============================================================
   MODO CUIDADOR (PIN + editor)
   ============================================================ */
.pin-teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-8); width: 240px; }
.pin-teclado .tecla-pin {
  font-size: 24px;
  font-weight: 700;
  border: var(--borda);
  border-radius: var(--raio);
  background: var(--cor-fundo);
  color: var(--cor-tinta);
  cursor: pointer;
  padding: var(--esp-16);
  min-height: var(--toque-grande);
}
.pin-teclado .tecla-pin:active { background: var(--cor-superficie); }
.pin-display {
  font-size: var(--esp-32);
  letter-spacing: var(--esp-12);
  text-align: center;
  min-height: var(--toque-min);
}

.pin-overlay, .editor-overlay, .modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--cor-fundo);
  z-index: 90;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.pin-overlay { align-items: center; justify-content: center; gap: var(--esp-24); }
.editor-overlay, .modal-overlay { padding: var(--esp-16); gap: var(--esp-12); }
.editor-overlay h2, .modal-overlay h2 { font-size: 20px; font-weight: 700; }

.editor-lista { list-style: none; display: flex; flex-direction: column; gap: var(--esp-4); }
.editor-lista li {
  display: flex;
  align-items: center;
  gap: var(--esp-8);
  padding: var(--esp-8);
  border: var(--borda);
  border-radius: var(--raio);
}
.editor-lista li .info { flex: 1; font-size: var(--fonte-tamanho-base); display: flex; align-items: center; gap: var(--esp-8); }
.editor-lista li .info .emoji { font-size: 24px; }
.editor-btns { display: flex; gap: var(--esp-4); }

.form-linha {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}
.form-linha label { font-size: 16px; font-weight: 700; }
.form-linha input, .form-linha select {
  font-family: var(--fonte-familia);
  font-size: var(--fonte-tamanho-base);
  border: var(--borda);
  border-radius: var(--raio);
  padding: var(--esp-12) var(--esp-16);
  background: var(--cor-fundo);
  color: var(--cor-tinta);
  min-height: var(--toque-min);
}

/* ============================================================
   AJUSTES
   ============================================================ */
#tela-ajustes { overflow-y: auto; padding: var(--esp-8); gap: var(--esp-16); }
.ajuste-grupo { border: var(--borda); border-radius: var(--raio); padding: var(--esp-16); }
.ajuste-grupo h3 { font-size: 16px; font-weight: 700; margin-bottom: var(--esp-12); }
.ajuste-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--esp-8) 0;
  gap: var(--esp-8);
}
.ajuste-linha + .ajuste-linha { border-top: var(--borda); }
.ajuste-linha label { font-size: var(--fonte-tamanho-base); }
.ajuste-linha input[type="range"] { flex: 1; max-width: 160px; accent-color: var(--cor-acao); }
.ajuste-linha select {
  font-family: var(--fonte-familia);
  font-size: var(--fonte-tamanho-base);
  border: var(--borda);
  border-radius: var(--raio);
  padding: var(--esp-8) var(--esp-12);
  background: var(--cor-fundo);
  color: var(--cor-tinta);
}

/* toggle switch */
.toggle {
  width: var(--esp-48);
  height: 28px;
  border-radius: 14px;
  background: var(--cor-superficie);
  cursor: pointer;
  position: relative;
  border: var(--borda);
  flex-shrink: 0;
}
.toggle.ativo { background: var(--cor-acao); border-color: var(--cor-acao); }
.toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cor-toggle-bolinha);
  transition: left 0.15s;
}
.toggle.ativo::after { left: 23px; }

/* ============================================================
   MODO ALTO CONTRASTE
   ============================================================ */
body.alto-contraste {
  --cor-fundo:      var(--cor-tinta);
  --cor-tinta:      var(--cor-fundo);
  --cor-superficie: color-mix(in srgb, var(--cor-tinta) 27%, transparent);
  --cor-acao:       var(--cor-acento);
  --cor-acento:     var(--cor-acento);
  --cor-gravar:     var(--cor-gravar);
}
body.alto-contraste .btn-primaria { color: var(--cor-tinta); }
body.alto-contraste .btn-gravar { color: var(--cor-tinta); }
body.alto-contraste .cat-tab.ativo { color: var(--cor-tinta); }

/* ============================================================
   MODO CANHOTO
   ============================================================ */
body.canhoto .barra-btns { order: -1; }

/* ============================================================
   UTILITÁRIOS
   ============================================================ */
.flex-row { display: flex; gap: var(--esp-8); align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.mt-8 { margin-top: var(--esp-8); }
.mb-8 { margin-bottom: var(--esp-8); }
.gap-8 { gap: var(--esp-8); }
.text-center { text-align: center; }
.vazio { padding: var(--esp-32) var(--esp-16); text-align: center; font-size: var(--fonte-tamanho-base); color: var(--cor-placeholder); }

/* ============================================================
   CONSENTIMENTO ELEVENLABS
   ============================================================ */
.consent-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--cor-tinta) 70%, transparent);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.consent-card {
  background: var(--cor-fundo);
  border-radius: var(--raio);
  padding: var(--esp-24);
  max-width: 400px;
  margin: var(--esp-16);
  font-family: var(--fonte-familia);
  font-size: var(--fonte-tamanho-base);
  text-align: center;
}
.consent-titulo {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: var(--esp-16);
}
.consent-texto {
  margin-bottom: var(--esp-12);
}
.consent-aviso {
  margin-bottom: var(--esp-16);
  font-size: 16px;
}
.consent-botoes {
  display: flex;
  gap: var(--esp-8);
  justify-content: center;
}
.consent-btn-sim {
  font-family: var(--fonte-familia);
  font-size: var(--fonte-tamanho-base);
  font-weight: 700;
  border: none;
  border-radius: var(--raio);
  background: var(--cor-acao);
  color: var(--cor-texto-botao);
  padding: var(--esp-12) var(--esp-24);
  cursor: pointer;
  min-height: var(--toque-min);
}
.consent-btn-nao {
  font-family: var(--fonte-familia);
  font-size: var(--fonte-tamanho-base);
  font-weight: 700;
  border: var(--borda);
  border-radius: var(--raio);
  background: var(--cor-fundo);
  color: var(--cor-tinta);
  padding: var(--esp-12) var(--esp-24);
  cursor: pointer;
  min-height: var(--toque-min);
}

/* ============================================================
   INDICADOR DE CÂMERA (acionador por piscada)
   ============================================================ */
#camera-indicador {
  position: fixed;
  top: var(--esp-8);
  right: var(--esp-8);
  z-index: 250;
  display: flex;
  align-items: center;
  gap: var(--esp-8);
  background: var(--cor-fundo);
  border: var(--borda);
  border-radius: var(--raio);
  padding: var(--esp-4) var(--esp-8);
  opacity: 0.85;
}
.camera-bolinha {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cor-acento);
  flex-shrink: 0;
}
.camera-bolinha.camera-detectou {
  background: var(--cor-acao);
}
#camera-indicador.camera-acionado .camera-bolinha {
  background: var(--cor-gravar);
}
.camera-barra-fundo {
  width: 48px;
  height: 6px;
  border-radius: 3px;
  background: var(--cor-superficie);
  overflow: hidden;
}
.camera-barra-preenchimento {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: var(--cor-acao);
  transition: width 0.1s linear;
}
#camera-indicador.camera-acionado .camera-barra-preenchimento {
  background: var(--cor-gravar);
}

/* ============================================================
   CAMADA VISUAL — redesign de 10/08/2026
   Escrita à mão pelo Claude, não pelo estagiário.
   Regra: nenhuma cor crua aqui, tudo vem de css/tema.css.
   ============================================================ */

/* ---------- O VISOR: a frase é a estrela da tela ----------
   Fundo escuro é decisão clínica: o cuidador precisa ler a frase do
   outro lado do quarto sem chegar perto. */
#barra-frase {
  background: var(--cor-visor);
  border: none;
  border-radius: 0 0 var(--raio-grande) var(--raio-grande);
  padding: var(--esp-16);
  position: relative;
  overflow: hidden;
  /* ⛔ Não pode ser flex em linha: a frase vira um item espremido ao lado
     dos botões e o texto quebra letra por letra. Aqui é empilhado:
     frase em cima, onda no meio, botões embaixo. */
  display: block;
}
#barra-frase::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 12% 0%, rgba(70,200,190,.16), transparent 60%);
}
#txt-frase {
  background: transparent;
  border: none;
  color: var(--cor-visor-texto);
  font-size: var(--fonte-frase);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  min-height: 84px;
  max-height: 30vh;
  overflow-y: auto;
  /* ⛔ Nada de flex aqui: o texto do placeholder vira um item flex estreito
     e quebra letra por letra, na vertical. Bloco simples com palavras
     inline resolve e ainda deixa a frase quebrar linha do jeito certo. */
  display: block;
  padding-top: var(--esp-8);
}
#txt-frase:empty::before {
  display: block;
  color: var(--cor-visor-vazio);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0;
  line-height: 1.4;
}
#txt-frase .palavra { position: relative; display: inline-block; margin-right: 14px; }
#txt-frase .palavra::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 3px;
  background: var(--cor-acento); border-radius: 2px; opacity: .55;
}

#onda-voz {
  display: block; width: 100%; height: 30px;
  margin: var(--esp-8) 0 var(--esp-12);
  opacity: .45;
}
#onda-voz path { fill: none; stroke: url(#grad-marca); stroke-width: 3; stroke-linecap: round; }
body.falando #onda-voz { opacity: 1; animation: onda-pulsa 1.1s ease-in-out infinite; }
@keyframes onda-pulsa { 0%,100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  body.falando #onda-voz { animation: none; opacity: 1; }
}

.barra-btns { gap: var(--esp-8); }
.barra-btns .btn-icone {
  background: rgba(255,255,255,.08);
  color: var(--cor-visor-texto);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--raio);
  min-height: 56px; min-width: 60px;
}
.barra-btns .btn-icone:active { background: rgba(255,255,255,.18); }
#btn-falar {
  background: linear-gradient(100deg, var(--cor-acao), var(--cor-acento));
  color: var(--cor-texto-botao);
  border: none;
  border-bottom: 4px solid rgba(0,0,0,.3);
  border-radius: var(--raio);
  min-height: 56px;
  font-size: 21px; font-weight: 700; letter-spacing: .06em;
}
#btn-falar:active { transform: translateY(2px); border-bottom-width: 2px; }

/* ---------- categorias: pílulas com a cor da categoria ---------- */
.cat-tab {
  border-radius: var(--raio-pilula);
  border: 2px solid var(--cor-superficie);
  background: var(--cor-cartao);
  min-height: 52px;
  padding: 0 var(--esp-16);
  font-weight: 600;
  color: var(--cor-tinta-fraca);
}
.cat-tab:nth-child(1) { --c: var(--cat-1); }
.cat-tab:nth-child(2) { --c: var(--cat-2); }
.cat-tab:nth-child(3) { --c: var(--cat-3); }
.cat-tab:nth-child(4) { --c: var(--cat-4); }
.cat-tab:nth-child(5) { --c: var(--cat-5); }
.cat-tab:nth-child(6) { --c: var(--cat-6); }
.cat-tab.ativo {
  background: var(--cor-visor);
  border-color: var(--cor-visor);
  color: var(--cor-visor-texto);
  box-shadow: inset 0 -4px 0 var(--c, var(--cat-1));
}

/* ---------- as teclas ----------
   Borda de baixo grossa no lugar de sombra: dá sensação de tecla física e
   afunda ao apertar. Mão com tremor precisa saber que acertou. */
.celula-prancha {
  background: var(--cor-cartao);
  border: 1px solid var(--cor-superficie);
  border-bottom: var(--tecla-base) solid var(--cat-ativa);
  border-radius: var(--raio);
  gap: var(--esp-4);
  padding: var(--esp-12) var(--esp-8) var(--esp-8);
}
.celula-prancha:active {
  background: var(--cor-cartao);
  transform: translateY(2px);
  border-bottom-width: 3px;
}
.celula-prancha .emoji { font-size: 34px; }
.celula-prancha .palavra { font-size: var(--fonte-palavra); letter-spacing: -.01em; }
.celula-prancha .selo-audio {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cat-ativa); background: transparent; border: none;
}
.celula-prancha.scan-linha,
.celula-prancha.scan-celula {
  box-shadow: inset 0 0 0 4px var(--cor-acento);
  border-color: var(--cor-acento);
}

/* ---------- navegação de baixo ---------- */
#nav-inferior {
  background: var(--cor-cartao);
  border-top: 1px solid var(--cor-superficie);
}
#nav-inferior button.ativo {
  color: var(--cor-acao);
  border-bottom: 3px solid var(--cor-acao);
  background: transparent;
}

/* ============================================================
   POLIMENTO VISUAL — 10/08/2026 noite
   Motivo: "está parecendo amador". Os quatro culpados eram: emoji solto
   na interface, botão branco sem sistema, palavra picada no meio e metade
   da tela vazia. Nada aqui usa sombra, degradê ou fonte baixada.
   ============================================================ */

/* ---------- navegação de baixo: ícone desenhado, não emoji ---------- */
#nav-inferior {
  padding: var(--esp-4) 0 max(var(--esp-4), env(safe-area-inset-bottom));
  gap: 0;
}
#nav-inferior button {
  flex-direction: column;
  gap: 2px;
  padding: var(--esp-8) var(--esp-4);
  font-size: var(--fonte-rotulo);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--cor-tinta-fraca);
  background: transparent;
  border: none;
  border-radius: var(--esp-8);
  position: relative;
}
.nav-ico {
  width: 26px; height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* com 5 abas o rótulo precisa caber em ~75px de largura no celular */
#nav-inferior button span {
  font-size: 11px;
  line-height: 1.1;
  text-align: center;
  word-break: normal;
  hyphens: none;
}
/* "Minha Voz" é o diferencial do produto, então não entra como mais um item
   igual aos outros: fica com a cor de destaque da marca o tempo todo. */
#nav-inferior button.nav-destaque { color: var(--cor-acao); }
#nav-inferior button.nav-destaque .nav-ico { stroke-width: 2.2; }

/* A aba ativa não muda só de cor: ganha uma barra em cima. Nada aqui pode
   depender só de cor (tem gente daltônica e tem o modo alto contraste). */
#nav-inferior button.ativo {
  color: var(--cor-acao);
  border-bottom: none;
  background: color-mix(in srgb, var(--cor-acao) 8%, transparent);
}
#nav-inferior button.ativo::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 28px; height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--cor-acao);
}

/* ---------- categoria: chip que carrega a cor da própria categoria ---------- */
#prancha-header {
  padding: var(--esp-12) var(--esp-12) var(--esp-8);
  gap: var(--esp-8);
  /* 🐛 A barra tinha 834px numa tela de 375 e NÃO rolava: as três últimas
     categorias (Pessoas, Emoções, Lugares) eram inalcançáveis no celular.
     Faltava a rolagem; o corte vinha do `overflow-x: hidden` da tela. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
  flex-shrink: 0;
  /* `min-width: 0` é irmão do `min-height: 0` do main: sem ele o item flex
     se recusa a encolher abaixo do conteúdo, a barra fica com 837px numa
     tela de 375 e a rolagem nunca acontece. */
  min-width: 0;
  width: 100%;
  /* o fade na direita avisa que tem mais categoria para o lado. Antes a
     última ficava cortada sem nenhum sinal e ninguém descobria as outras. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.cat-tab {
  font-size: var(--fonte-palavra);
  font-weight: 700;
  border: 1px solid var(--cor-superficie);
  border-radius: var(--raio-pilula);
  background: var(--cor-cartao);
  color: var(--cor-tinta-fraca);
  padding: var(--esp-8) var(--esp-16);
  display: inline-flex;
  align-items: center;
  gap: var(--esp-8);
  min-height: var(--toque-min);
}
/* a bolinha da cor da categoria aparece SEMPRE, inclusive na inativa:
   é assim que a pessoa aprende que "vermelho = saúde" antes de ler. */
#prancha-header::-webkit-scrollbar { display: none; }
.cat-tab { scroll-snap-align: start; }
.cat-tab::before {
  content: '';
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--cat-cor, var(--cor-superficie));
  flex-shrink: 0;
}
.cat-tab.ativo {
  background: var(--cat-cor, var(--cor-acao));
  border-color: var(--cat-cor, var(--cor-acao));
  color: var(--cor-texto-botao);
}
.cat-tab.ativo::before { background: var(--cor-texto-botao); }

/* ---------- a tecla da prancha ---------- */
#grade-prancha {
  padding: var(--esp-12);
  gap: var(--esp-12);
  /* A grade ocupa a tela e fica centrada: sobrava metade em branco embaixo,
     o que fazia o app parecer inacabado. Centrar distribui a folga em cima
     e embaixo em vez de deixar um buraco só. */
  align-content: center;
  grid-auto-rows: minmax(var(--toque-grande), 1fr);
}
.celula-prancha {
  background: var(--cor-cartao);
  border: 1px solid var(--cor-superficie);
  border-bottom: var(--tecla-base) solid var(--cat-ativa, var(--cor-acao));
  border-radius: var(--raio);
  gap: var(--esp-8);
  padding: var(--esp-12) var(--esp-8);
  transition: transform .06s ease-out;
  /* teto de altura: sem ele a linha esticava e o botão virava uma tira
     alta e fina (79 de largura por 179 de altura), que fica feio e ainda
     afasta o símbolo do rótulo. */
  max-height: clamp(112px, 32vw, 200px);
}
.celula-prancha:active {
  transform: translateY(2px);
  border-bottom-width: 3px;
  background: var(--cor-cartao);
}
/* O símbolo mora num disco tingido com a cor da categoria. É o que
   transforma emoji solto (cara de colagem) em sistema visual: todos os
   botões passam a ter a mesma massa e o mesmo peso na tela. */
.celula-prancha .emoji,
.celula-prancha img {
  /* ⚠️ `cqmin` + `container-type: size` colapsaram a célula para 18px de
     largura. Unidade de viewport é previsível e não depende de contenção. */
  width: clamp(40px, 14vmin, 76px);
  height: clamp(40px, 14vmin, 76px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cat-ativa, var(--cor-acao)) 12%, var(--cor-cartao));
  font-size: clamp(22px, 7.5vmin, 38px);
  line-height: 1;
  object-fit: contain;
  padding: var(--esp-8);
  flex-shrink: 0;
}
/* ⛔ Sem `break-word`: era ele que picava "banheiro" em "banheir/o".
   Hifenização é o certo — se não couber, quebra na sílaba, não no meio. */
.celula-prancha .palavra {
  font-size: clamp(13px, 4.4vmin, 20px);
  font-weight: 700;
  line-height: 1.15;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: auto;
  text-wrap: balance;
  max-width: 100%;
}
.celula-prancha { word-break: normal; }

/* ---------- o desenho dentro do disco ---------- */
/* O Mulberry é traço fino sem preenchimento: solto no branco ele some. No
   disco tingido ele ganha massa e fica no mesmo peso visual do resto. */
.celula-prancha .simbolo-img {
  padding: var(--esp-12);
  mix-blend-mode: multiply; /* casa o branco do SVG com o disco de cor */
}

/* ---------- resposta ao toque e ao mouse ---------- */
/* Quem usa isto pode ter tremor ou pouca visão: a peça tem que reagir de
   forma ÓBVIA. ⛔ Nada de efeito decorativo que não sirva de resposta. */
@media (hover: hover) {
  .celula-prancha:hover {
    border-color: var(--cat-ativa, var(--cor-acao));
    box-shadow: var(--sombra-alta);
    transform: translateY(-2px);
  }
  .celula-prancha:hover .emoji,
  .celula-prancha:hover .simbolo-img {
    background: color-mix(in srgb, var(--cat-ativa, var(--cor-acao)) 22%, var(--cor-cartao));
  }
  .cat-tab:hover { border-color: var(--cat-cor, var(--cor-acao)); }
  #faixa-sim-nao button:hover { box-shadow: var(--sombra-alta); transform: translateY(-2px); }
  #nav-inferior button:hover { background: color-mix(in srgb, var(--cor-acao) 6%, transparent); }
}
.celula-prancha, #faixa-sim-nao button {
  transition: transform .08s ease-out, box-shadow .12s ease-out, border-color .12s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .celula-prancha, #faixa-sim-nao button { transition: none; }
  .celula-prancha:hover, #faixa-sim-nao button:hover { transform: none; }
}

/* ---------- aviso de cópia da voz ---------- */
.aviso-backup {
  margin: 0 var(--esp-8);
  padding: var(--esp-12) var(--esp-16);
  border-radius: var(--raio);
  border: 1px solid var(--cor-superficie);
  border-left: 4px solid var(--cor-acento);
  background: var(--cor-cartao);
  font-size: 16px;
  line-height: 1.45;
  color: var(--cor-tinta);
}
/* ⛔ o urgente não muda SÓ de cor: muda a espessura da barra e o peso do
   texto, porque tem gente daltônica e tem o modo alto contraste. */
.aviso-backup.urgente {
  border-left: 6px solid var(--cor-gravar);
  font-weight: 700;
}

/* ============================================================
   ACABAMENTO — o que separa "funciona" de "uau"
   Tirado do que o site da clínica e o Balbuu já fazem bem: profundidade
   suave em vez de borda seca, tipografia com hierarquia de verdade, e
   fundo que não é branco chapado.
   ============================================================ */

/* fundo em dois tons, bem de leve. O branco chapado era metade da cara de
   página sem estilo. ⛔ Um degradê só, e só aqui. */
body {
  background:
    radial-gradient(120% 80% at 100% 0%, #EAF3F8 0%, transparent 55%),
    var(--cor-fundo);
}

/* Sora só onde é título: a frase do visor, os rótulos dos botões e os
   cabeçalhos. O texto corrido fica na Inter, que lê melhor em bloco. */
#txt-frase, .celula-prancha .palavra, #faixa-sim-nao button,
h1, h2, h3, #nav-inferior button span {
  font-family: var(--fonte-titulo);
  letter-spacing: -.01em;
}
#txt-frase { font-weight: 700; }

/* profundidade nas peças que "flutuam" */
.celula-prancha { box-shadow: var(--sombra-marca); }
.celula-prancha:active { box-shadow: none; }
#faixa-sim-nao button { box-shadow: var(--sombra-marca); }
.cat-tab { box-shadow: 0 2px 8px rgba(0,110,180,.06); }
.cat-tab.ativo { box-shadow: var(--sombra-marca); }
#barra-frase { box-shadow: var(--sombra-alta); position: relative; z-index: 2; }
.aviso-backup { box-shadow: var(--sombra-marca); }

/* o visor ganha canto de baixo arredondado: vira um objeto, não uma faixa */
#barra-frase { border-radius: 0 0 var(--raio-grande) var(--raio-grande); }

/* ---------- faixa fixa de SIM e NÃO ---------- */
/* As duas palavras mais usadas em leito de hospital. Ficavam escondidas
   dentro de uma categoria: quem precisa responder "não" com urgência não
   pode ter que procurar em aba nenhuma. */
#faixa-sim-nao {
  display: flex;
  gap: var(--esp-12);
  padding: 0 var(--esp-12) var(--esp-12);
  flex-shrink: 0;
}
#faixa-sim-nao button {
  flex: 1;
  font-family: var(--fonte-familia);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .04em;
  min-height: var(--toque-grande);
  border-radius: var(--raio);
  border: 1px solid var(--cor-superficie);
  background: var(--cor-cartao);
  color: var(--cor-tinta);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-8);
  transition: transform .06s ease-out;
}
#faixa-sim-nao button:active { transform: translateY(2px); border-bottom-width: 3px; }
#btn-sim { border-bottom: var(--tecla-base) solid var(--cat-6); color: var(--cat-6); }
#btn-nao { border-bottom: var(--tecla-base) solid var(--cor-gravar); color: var(--cor-gravar); }
#faixa-sim-nao .ico { width: 24px; height: 24px; fill: none; stroke: currentColor;
                      stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
   COMPUTADOR (>= 900px) — 10/08/2026 noite
   O app nasceu para celular, mas o fono usa no notebook e o quarto de
   hospital às vezes tem uma TV ou um monitor. Esticar o layout de celular
   numa tela de 1500px é o que fazia parecer site amador: botão largo demais,
   navegação de rodapé perdida lá embaixo e conteúdo nadando na largura.
   Aqui a navegação vira COLUNA na lateral, que é o que app de verdade faz.
   ============================================================ */
@media (min-width: 900px) {
  body {
    display: grid;
    grid-template-columns: 116px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "nav visor"
      "nav tela";
  }
  #barra-frase { grid-area: visor; }
  main         { grid-area: tela; }
  #nav-inferior {
    grid-area: nav;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--esp-4);
    padding: var(--esp-12) var(--esp-8);
    border-top: none;
    border-right: 1px solid var(--cor-superficie);
  }
  #nav-inferior button { flex: 0 0 auto; padding: var(--esp-12) var(--esp-4); }
  #nav-inferior button span { font-size: 13px; }
  .nav-ico { width: 28px; height: 28px; }
  /* a barra do item ativo passa da horizontal para a vertical, na esquerda */
  #nav-inferior button.ativo::before {
    top: 50%; left: 0; transform: translateY(-50%);
    width: 3px; height: 28px;
    border-radius: 0 3px 3px 0;
  }

  /* Largura de leitura: sem teto, quatro botões numa tela de 1500px viram
     quatro tijolos de 350px, o que é feio e ainda piora a mira. */
  #grade-prancha, #faixa-sim-nao, #prancha-header {
    width: 100%;
    max-width: 960px;
    margin-inline: auto;
  }
  #prancha-header { -webkit-mask-image: none; mask-image: none; flex-wrap: wrap; }
  .celula-prancha { max-height: 190px; }
  #barra-frase { padding-inline: var(--esp-32); }
  .lista-frases, .ajuste-grupo, .cabecalho-secao { max-width: 960px; margin-inline: auto; }
}

/* foco sempre visível: muita gente aqui navega por teclado ou acionador */
.celula-prancha:focus-visible, .cat-tab:focus-visible,
#btn-falar:focus-visible, .barra-btns .btn-icone:focus-visible,
#nav-inferior button:focus-visible {
  outline: 3px solid var(--cor-acento);
  outline-offset: 3px;
}

/* ---------- ajustes de proporção (10/08, depois de ver na tela grande) ---------- */

/* O visor não precisa de 220px pra mostrar uma frase vazia. */
#txt-frase { min-height: 56px; }
#barra-frase { padding: var(--esp-12) var(--esp-16) var(--esp-16); }
#onda-voz { height: 22px; margin: var(--esp-4) 0 var(--esp-12); }

/* Em tela grande, 4 colunas viravam tiras de 300px de largura. A prancha
   é feita para tablet: acima disso, segura a largura e centraliza. */
#barra-frase > *, #prancha-header, #grade-prancha {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 900px) {
  .grid-4x4, .grid-4x6 { grid-template-columns: repeat(4, minmax(0, 210px)); justify-content: center; }
  .grid-3x3 { grid-template-columns: repeat(3, minmax(0, 240px)); justify-content: center; }
  .grid-2x2 { grid-template-columns: repeat(2, minmax(0, 280px)); justify-content: center; }
}
.celula-prancha { min-height: 118px; }

/* A prancha some no fundo cinza quando a grade é pequena: dá um piso branco. */
#tela-prancha { background: var(--cor-fundo); }

/* Símbolo em imagem (Mulberry). Acompanha o tamanho da fonte escolhida
   nos ajustes, em vez de tamanho fixo. */
.celula-prancha .simbolo-img {
  width: 2.1em;
  height: 2.1em;
  object-fit: contain;
  display: block;
}