/* area.css - estilo da Area do Paciente (todas as paginas de /paciente/).
 *
 * Segue o visual do site: fundo do cosmos (/assets/css/cosmos.css), Montserrat, ouro e tinta.
 * Todas as classes comecam com "area-" (as do painel da equipe, secao 15, com "painel-") para nunca
 * esbarrar no CSS do resto do site.
 *
 * Tamanhos de letra (especificacao, secao 9). Valores em rem; 1rem = 16px com a configuracao padrao.
 *                               celular          computador (a partir de 768px)
 *   Titulo da pagina            28px (1.75rem)   36px (2.25rem)
 *   Nome do protocolo           18px (1.125rem)  20px (1.25rem)
 *   Subtitulo do protocolo      16px (1rem)      14px (0.875rem)
 *   Texto normal e campos       16px (1rem)      17px (1.0625rem)
 *   Botoes                      16px (1rem)      16px (1rem)
 *   Ajuda e aviso               16px (1rem)      16px (1rem)  (30/09/2026: era 14px no computador)
 *   Titulo compacto (entrar e   24px (1.5rem)    24px (1.5rem)
 *   cadastro)
 *   Titulo "Crie sua conta"     26px (1.625rem)  28px (1.75rem)
 *   Passo, apoio do Google,     16px (1rem)      16px (1rem)
 *   regra da senha
 *   Frase dos obrigatorios e    16px (1rem)      17px (1.0625rem)
 *   erro embaixo do campo
 *   Botao do Google             16px (1rem)      16px (1rem)
 * Nada abaixo de 14px. Celular (04/10/2026, ordem dele): texto normal 15px, texto auxiliar 14px, titulo 22px;
 * campo de digitar sempre 16px (abaixo disso o iPhone aproxima a tela ao tocar no campo). A tabela acima
 * e a base; o bloco de ate 559px do fim do arquivo manda no celular. Os subtitulos do protocolo (vitrine)
 * seguem 14px no computador porque a altura dos cartoes da vitrine e calculada com --fs-ajuda.
 *
 * Regras que este arquivo cumpre:
 *   - Campo de digitar e botao com 48px de altura; dentro do cartao e no celular pode ter a largura toda; fora de
 *     cartao, no computador, no maximo 280 a 360px.
 *   - Formulario (bloco 34): cartao de entrar com no maximo 400px e de cadastro com no maximo 760px,
 *     compactos para caberem na tela sem rolar (entrar a partir de 1280x650; cadastro a partir de
 *     1280x720). Botao desligado ate tudo estar certo (aria-disabled + area-botao--desligado).
 *   - Sem caixa com barra de rolagem e sem rolagem para os lados.
 *   - html nao tem fundo e body nao cria camada propria: o fundo do cosmos (position: fixed com
 *     z-index negativo) precisa aparecer atras do conteudo.
 */

/* ---------- 1. medidas e cores ---------- */

:root {
  --ouro: #c9a84c;
  --ouro-claro: #e7cd7f;
  --tinta: #f4f1e8;
  --fundo: #0a0a14;
  --tinta-suave: rgba(244, 241, 232, 0.78);
  --erro: #ff8f80;
  --linha: rgba(244, 241, 232, 0.08);
  --borda-cartao: rgba(201, 168, 76, 0.22);
  --borda-campo: rgba(244, 241, 232, 0.32);
  --fundo-cartao: rgba(255, 255, 255, 0.03);
  --fundo-campo: rgba(255, 255, 255, 0.05);
  --raio-botao: 12px;
  --raio-cartao: 20px;
  --fume-capa: rgba(8, 8, 18, 0.55);
  --lateral: 16px;

  --fs-titulo: 1.75rem;
  --fs-nome-protocolo: 1.125rem;
  --fs-texto: 1rem;
  --fs-botao: 1rem;
  --fs-ajuda: 1rem;
}

@media (min-width: 768px) {
  :root {
    --lateral: 24px;
    --fs-titulo: 2.25rem;
    --fs-nome-protocolo: 1.25rem;
    --fs-texto: 1.0625rem;
    --fs-ajuda: 0.875rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --lateral: 32px;
  }
}

/* ---------- 2. base ---------- */

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

html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Trava final (09/10/2026): nada empurra a pagina para o lado. Cada tela ja e feita para caber na largura.
 * O painel da equipe fica de fora: as tabelas dele rolam dentro da propria caixa. */
html:has(body.area-pagina:not(.pn-pagina)),
body.area-pagina:not(.pn-pagina) {
  overflow-x: clip;
}

body.area-pagina {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--fundo);
  color: var(--tinta);
  font-family: 'Montserrat', sans-serif;
  font-size: var(--fs-texto);
  font-weight: 400;
  line-height: 1.6;
}

.area-pagina h1,
.area-pagina h2,
.area-pagina h3,
.area-pagina p,
.area-pagina ul,
.area-pagina figure {
  margin: 0;
  padding: 0;
}

.area-pagina ul {
  list-style: none;
}

.area-pagina img {
  display: block;
  max-width: 100%;
}

/* Forca zero (:where): so troca a fonte e a cor padrao do navegador; qualquer classe da area
 * (.area-botao, .area-botao-google, .area-link, campos) vence, em qualquer ordem. */
:where(.area-pagina) button,
:where(.area-pagina) input,
:where(.area-pagina) select {
  font: inherit;
  color: inherit;
}

[hidden] {
  display: none !important;
}

/* ---------- 3. cabecalho da area ---------- */

.area-topo {
  position: relative;
  z-index: 100;
  padding: 12px var(--lateral);
  background: rgba(10, 10, 20, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linha);
}

.area-topo__interno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  max-width: 1240px;
  margin: 0 auto;
}

.area-topo__logo {
  display: flex;
  align-items: center;
  min-height: 48px;
  margin-right: auto;
}

.area-topo__logo img {
  height: 44px;
  width: auto;
}

.area-topo__saudacao {
  order: 3;
  flex: 1 0 100%;
  color: var(--tinta-suave);
  font-size: var(--fs-texto);
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.area-topo__menu {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Atalho "Home" (11/10/2026, pedido do Rogerio): link simples para a pagina principal, ao lado do menu, em todas as
 * paginas da Area do Paciente. Fica a direita, antes do botao Menu (celular) ou dos links da conta (computador). */
.area-topo__home {
  margin-left: auto;
}

.area-topo__link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--tinta);
  font-size: var(--fs-botao);
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.area-topo__link:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Icones do menu de cima (Meus Protocolos = grade de cards, Pagamentos = cedula; pedido do Rogerio). No computador so
 * aparece o icone, com 48px de area de toque; o nome fica no atributo title e no aria-label. No celular o nome aparece
 * na lista (regra mais abaixo). A pagina atual fica em dourado (cor do texto), sem a moldura de foco. */
.area-topo__icone {
  justify-content: center;
  min-width: 48px;
  padding: 0 12px;
}

.area-topo__svg {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.area-topo__rotulo {
  display: none;
}

.area-topo__link--atual {
  color: var(--ouro-claro);
}

/* Botao Menu: so existe no celular (ate 559px). A partir de 560px os links aparecem direto no cabecalho. */
.area-topo__menu-botao {
  display: none;
}

@media (min-width: 640px) {
  .area-topo__saudacao {
    order: 0;
    flex: 0 1 auto;
  }
}

@media (min-width: 768px) {
  .area-topo {
    position: sticky;
    top: 0;
  }

  .area-topo__logo img {
    height: 52px;
  }

  /* Links do menu de cima (Pagamentos, Meus dados, Sair): 18px no computador (06/10/2026). No celular ficam como estavam. */
  .area-topo__link {
    font-size: 1.125rem;
  }
}

/* ---------- 4. conteudo da pagina ---------- */

.area-principal {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 32px var(--lateral) 64px;
}

@media (min-width: 768px) {
  .area-principal {
    padding-top: 48px;
    padding-bottom: 80px;
  }
}

/* ---------- 5. espera e falha de carregamento ----------
 * A pagina nasce com a classe "area-aguardando" no body. O codigo da pagina tira essa classe quando
 * sabe o que mostrar (mostrarPagina em conta.js). Se o codigo nao rodar (internet caiu, arquivo
 * bloqueado), depois de 6 segundos o proprio CSS mostra o conteudo e a frase de falha. Essa parte
 * usa so "animation-delay" de 6s e nao pode ser desligada pela regra de movimento reduzido. */

.area-aguardando .area-conteudo {
  visibility: hidden;
  animation: area-revelar 0s linear 6s forwards;
}

@keyframes area-revelar {
  to {
    visibility: visible;
  }
}

.area-falha-carga {
  display: none;
  margin: 0 0 24px;
  padding: 16px 20px;
  border: 1px solid rgba(255, 143, 128, 0.55);
  border-radius: var(--raio-botao);
  background: rgba(255, 143, 128, 0.08);
  color: var(--erro);
  font-size: var(--fs-texto);
  line-height: 1.5;
}

.area-falha-carga--visivel {
  display: block;
}

.area-aguardando .area-falha-carga {
  display: block;
  visibility: hidden;
  max-height: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  overflow: hidden;
  animation: area-mostrar-falha 0s linear 6s forwards;
}

@keyframes area-mostrar-falha {
  to {
    visibility: visible;
    max-height: 400px;
    margin-bottom: 24px;
    padding-top: 16px;
    padding-bottom: 16px;
    border-width: 1px;
  }
}

.area-espera {
  display: none;
  padding: 40px 0;
  color: var(--tinta-suave);
  font-size: var(--fs-texto);
  text-align: center;
}

.area-aguardando .area-espera {
  display: block;
  animation: area-esconder-espera 0s linear 6s forwards;
}

@keyframes area-esconder-espera {
  to {
    visibility: hidden;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
  }
}

/* ---------- 6. titulos e textos ---------- */

.area-titulo {
  color: var(--ouro);
  font-size: var(--fs-titulo);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.02em;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.area-texto {
  color: var(--tinta-suave);
  font-size: var(--fs-texto);
  line-height: 1.6;
  text-wrap: pretty;
}

/* ---------- 7. cartao ---------- */

.area-cartao {
  height: auto;
  padding: 24px 20px;
  border: 1px solid var(--borda-cartao);
  border-radius: var(--raio-cartao);
  background: var(--fundo-cartao);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.28);
}

.area-cartao--estreito {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .area-cartao {
    padding: 40px;
  }
}

/* Coluna: filhos um embaixo do outro com espaco igual entre eles. */
.area-pilha {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.area-pilha > * {
  min-width: 0;
}

.area-cartao__cabeca {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Cartao compacto (entrar e cadastro): margens e espacos menores para o cartao inteiro caber na
 * tela sem rolar. Vem depois das regras de .area-cartao, .area-principal e .area-titulo para
 * valer no celular e no computador. */
.area-principal--compacto {
  padding-top: 20px;
  padding-bottom: 32px;
}

.area-titulo--compacto {
  font-size: 1.5rem;
  line-height: 1.2;
}

.area-cartao--compacto {
  padding: 20px 16px;
}

.area-cartao--compacto.area-pilha,
.area-cartao--compacto .area-pilha {
  gap: 12px;
}

.area-cartao--compacto .area-cartao__cabeca {
  gap: 4px;
}

.area-cartao--compacto .area-texto {
  line-height: 1.5;
}

.area-cartao--compacto .area-campo {
  gap: 6px;
}

.area-cartao--compacto .area-divisor {
  margin: 0;
}

@media (min-width: 768px) {
  .area-cartao--compacto {
    padding: 20px 28px;
  }
}

/* Frase do topo de todo formulario com asterisco. */
.area-formulario__aviso {
  color: var(--tinta-suave);
  font-size: var(--fs-texto);
  line-height: 1.4;
}

/* ---------- 8. botoes ---------- */

.area-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 24px;
  border: 2px solid transparent;
  border-radius: var(--raio-botao);
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-botao);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease,
    border-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.area-botao--cheio {
  width: 100%;
}

.area-botao--principal {
  background: linear-gradient(135deg, var(--ouro), var(--ouro-claro));
  color: #1a1400;
  box-shadow: 0 10px 30px rgba(201, 168, 76, 0.28);
}

.area-botao--secundario {
  border-color: rgba(201, 168, 76, 0.55);
  color: var(--ouro-claro);
}

.area-botao:disabled,
.area-botao[aria-disabled='true'],
.area-botao--desligado {
  opacity: 0.5;
  box-shadow: none;
  cursor: not-allowed;
}

/* Botao desligado de verdade (bloco 34): cinza, sem dourado e sem sombra, para nao parecer aceso.
 * O clique continua chegando; a pagina leva a pessoa ao primeiro campo que falta. */
.area-botao.area-botao--desligado,
.area-botao[aria-disabled='true'] {
  background: rgba(244, 241, 232, 0.1);
  border-color: rgba(244, 241, 232, 0.22);
  color: rgba(244, 241, 232, 0.62);
  opacity: 1;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

/* Botao oficial "Continuar com o Google" (tema claro das regras do Google, conferidas em
 * developers.google.com/identity/branding-guidelines): fundo #FFFFFF, borda #747775 de 1px, texto
 * #1F1F1F, o "G" sempre colorido e sobre fundo branco, 12px antes do "G", 10px depois e 12px no fim.
 * A altura de 48px e a escala do botao de 40px deles, sem esticar o "G". */
.area-botao-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid #747775;
  border-radius: 999px;
  background: #ffffff;
  color: #1f1f1f;
  font-family: 'Google Sans', Roboto, 'Montserrat', sans-serif;
  font-size: var(--fs-botao);
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.area-botao-google__logo {
  flex: none;
  width: 20px;
  height: 20px;
}

.area-botao-google:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (hover: hover) {
  .area-botao--principal:not(:disabled):not(.area-botao--desligado):hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(201, 168, 76, 0.42);
  }

  .area-botao--secundario:not(:disabled):not(.area-botao--desligado):hover {
    background: rgba(201, 168, 76, 0.12);
    border-color: var(--ouro-claro);
  }

  .area-botao-google:not(:disabled):hover {
    background: #f1f1f1;
  }

  .area-topo__link:not(:disabled):hover {
    color: var(--ouro-claro);
  }
}

/* ---------- 9. links ---------- */

.area-links {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.area-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--ouro-claro);
  font-family: inherit;
  font-size: var(--fs-texto);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.area-link:disabled {
  opacity: 0.5;
  cursor: default;
}

@media (hover: hover) {
  .area-link:not(:disabled):hover {
    color: var(--tinta);
  }
}

/* Tela de entrar (04/10/2026): "Esqueci minha senha" discreto, embaixo da senha, na direita. */
.area-link.area-link--discreto {
  align-self: flex-end;
  min-height: 48px;
  padding: 0 8px;
  color: var(--tinta-suave);
  font-size: 0.875rem;
  font-weight: 500;
}

@media (hover: hover) {
  .area-link.area-link--discreto:not(:disabled):hover {
    color: var(--ouro-claro);
  }
}

/* Botao CRIAR CONTA: contorno dourado com brilho suave, na largura do cartao. */
.area-botao.area-botao--criar {
  border-color: rgba(201, 168, 76, 0.85);
  background: rgba(201, 168, 76, 0.06);
  color: var(--ouro-claro);
  box-shadow: 0 0 18px rgba(201, 168, 76, 0.22), inset 0 0 12px rgba(201, 168, 76, 0.08);
}

.area-botao.area-botao--criar:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (hover: hover) {
  .area-botao.area-botao--criar:not(:disabled):hover {
    background: rgba(201, 168, 76, 0.14);
    border-color: var(--ouro-claro);
    box-shadow: 0 0 26px rgba(201, 168, 76, 0.34), inset 0 0 14px rgba(201, 168, 76, 0.12);
  }
}

/* Mensagem de andamento ou de erro da tela de entrar: so texto, sem caixa, no meio. Sem texto, nao ocupa lugar
 * (a regra :empty acima). */
.area-mensagem.area-mensagem--texto,
.area-pagina .area-mensagem.area-mensagem--texto {
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
}

.area-principal--entrar {
  padding-top: 12px;
  padding-bottom: 12px;
}

.area-separador--ou {
  margin: 0;
}

/* ---------- 10. campos ---------- */

.area-campo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.area-campo__rotulo {
  color: var(--tinta);
  font-size: var(--fs-texto);
  font-weight: 600;
  line-height: 1.4;
}

.area-campo__entrada {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid var(--borda-campo);
  border-radius: var(--raio-botao);
  background-color: var(--fundo-campo);
  color: var(--tinta);
  font-family: inherit;
  font-size: var(--fs-texto);
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
}

.area-campo__entrada::placeholder {
  color: rgba(244, 241, 232, 0.55);
  opacity: 1;
}

.area-campo__entrada:focus {
  border-color: var(--ouro-claro);
}

.area-campo__entrada[aria-invalid='true'] {
  border-color: var(--erro);
}

.area-campo__entrada:disabled {
  opacity: 0.6;
}

/* Preenchimento automatico do navegador: mantem o fundo escuro e a letra clara. */
.area-campo__entrada:-webkit-autofill,
.area-campo__entrada:-webkit-autofill:hover,
.area-campo__entrada:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--tinta);
  caret-color: var(--tinta);
  box-shadow: 0 0 0 1000px #161620 inset;
  -webkit-box-shadow: 0 0 0 1000px #161620 inset;
}

.area-campo__ajuda {
  color: var(--tinta-suave);
  font-size: 1rem;
  line-height: 1.5;
}

.area-campo__erro {
  color: var(--erro);
  font-size: var(--fs-texto);
  line-height: 1.4;
}

.area-campo__erro:empty {
  display: none;
}

/* ---------- 11. mensagens e aviso ---------- */

.area-mensagem {
  padding: 12px 16px;
  border: 1px solid rgba(244, 241, 232, 0.16);
  border-radius: var(--raio-botao);
  background: rgba(255, 255, 255, 0.04);
  color: var(--tinta);
  font-size: var(--fs-texto);
  line-height: 1.5;
}

/* A regra de reinicio das paginas da Area (".area-pagina p", la em cima) zera a margem interna de todo paragrafo e e mais
 * forte que ".area-mensagem" sozinha. Este seletor iguala a forca e, por vir depois, vence. Leva so a margem interna:
 * a cor e a borda do erro (.area-mensagem--erro) continuam valendo. */
.area-pagina .area-mensagem {
  padding: 12px 16px;
}

.area-mensagem:empty {
  display: none;
}

.area-mensagem--erro {
  border-color: rgba(255, 143, 128, 0.55);
  background: rgba(255, 143, 128, 0.08);
  color: var(--erro);
}

.area-aviso {
  padding: 16px;
  border-left: 4px solid var(--ouro);
  border-radius: 0 var(--raio-botao) var(--raio-botao) 0;
  background: rgba(201, 168, 76, 0.1);
  color: var(--tinta);
  font-size: 1rem;
  line-height: 1.5;
}

.area-divisor {
  height: 1px;
  margin: 4px 0;
  border: 0;
  background: var(--linha);
}

/* ---------- 11b. criar conta (PROJETO-TELA-CRIAR-CONTA.md, 30/09/2026) ----------
 * Passo 1 de 2 (criar conta) e Passo 2 de 2 (cadastro). Tudo com 16px ou mais. Titulo "Crie sua conta":
 * 26px no celular e 28px no computador. */

.area-pagina .area-passo {
  color: var(--ouro-claro);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.area-titulo--conta {
  font-size: 1.625rem;
}

@media (min-width: 768px) {
  .area-titulo--conta {
    font-size: 1.75rem;
  }
}

/* Botao do Google com a linha de apoio embaixo. */
.area-google-bloco {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.area-pagina .area-apoio {
  color: var(--tinta-suave);
  font-size: 1rem;
  line-height: 1.4;
  text-align: center;
}

/* Separador com texto no meio: uma linha de cada lado. */
.area-separador {
  display: flex;
  align-items: center;
  color: var(--tinta-suave);
  font-size: 1rem;
  line-height: 1.4;
}

.area-separador::before,
.area-separador::after {
  content: '';
  flex: 1 1 0;
  height: 1px;
  background: var(--linha);
}

.area-separador__texto {
  padding: 0 12px;
}

/* Rotulo da senha com a regra ao lado ("Pelo menos 8 caracteres"). */
.area-campo__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
}

.area-pagina .area-regra {
  color: var(--tinta-suave);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
}

.area-pagina .area-regra.area-regra--ok {
  color: #7fdc9a;
  font-weight: 700;
}

/* Campo da senha com o botao de olho dentro, na direita. */
.area-campo__senha {
  position: relative;
}

.area-campo__entrada--olho {
  padding-right: 52px;
}

.area-olho {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--raio-botao);
  background: none;
  color: var(--ouro-claro);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.area-olho svg {
  width: 24px;
  height: 24px;
}

.area-olho[aria-pressed='true'] {
  color: var(--tinta);
}

.area-pagina .area-olho:focus-visible {
  outline-offset: -3px;
}

@media (hover: hover) {
  .area-olho:hover {
    color: var(--tinta);
  }
}

/* ---------- 12. foco visivel ---------- */

.area-pagina a:focus-visible,
.area-pagina button:focus-visible,
.area-pagina input:focus-visible,
.area-pagina select:focus-visible,
.area-pagina [tabindex]:focus-visible {
  outline: 3px solid var(--ouro-claro);
  outline-offset: 3px;
}

/* ---------- 13. cadastro: cartao medio e campos em grade ----------
 * No celular cada campo ocupa a linha inteira. A partir de 768px a grade tem 12 colunas e cada campo
 * ocupa o numero de colunas da sua classe (area-campo--<nome>, posta em formulario.js):
 *   linha 1: nome 8 + nascimento 4            = 12
 *   linha 2: whatsapp 4 + email 8             = 12
 *   linha 3: cpf 4 (sozinho, logo acima do CEP)
 *   linha 4: cep 3 + rua 6 + numero 3         = 12
 *   linha 5: complemento 3 + bairro 3 + cidade 3 + uf 3 = 12  (uf com 3 colunas para "Estado" caber)
 * A ordem na tela e a mesma do teclado (Tab). */

.area-cartao--medio {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

.area-campo__ajuda:empty {
  display: none;
}

.area-formulario__campos {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.area-formulario__campos > * {
  min-width: 0;
}

/* A frase dos obrigatorios ocupa a linha inteira da grade. */
.area-formulario__campos > .area-formulario__aviso {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .area-formulario__campos {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    gap: 12px;
  }

  .area-campo--nome {
    grid-column: span 8;
  }

  .area-campo--nascimento,
  .area-campo--whatsapp,
  .area-campo--cpf {
    grid-column: span 4;
  }

  .area-campo--email {
    grid-column: span 8;
  }

  /* O CEP abre a linha de baixo: o CPF fica logo acima dele. */
  .area-campo--cep {
    grid-column: 1 / span 3;
  }

  .area-campo--rua {
    grid-column: span 6;
  }

  .area-campo--numero,
  .area-campo--complemento,
  .area-campo--bairro {
    grid-column: span 3;
  }

  .area-campo--cidade {
    grid-column: span 3;
  }

  .area-campo--uf {
    grid-column: span 3;
  }
}

/* Lista de estados: seta desenhada pelo CSS e lista aberta com fundo escuro. */
.area-campo__seletor {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23e7cd7f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
}

.area-campo__seletor option {
  background: #161620;
  color: var(--tinta);
}

/* Botao de salvar: largura toda no celular; no computador entre 280 e 360px, encostado a esquerda. */
.area-formulario__acoes {
  display: flex;
}

.area-formulario__acoes .area-botao {
  width: 100%;
}

@media (min-width: 768px) {
  .area-formulario__acoes .area-botao {
    width: auto;
    min-width: 280px;
    max-width: 360px;
  }
}

/* ---------- 14. vitrine de protocolos ----------
 * Cartao padronizado (06/10/2026): os 12 protocolos tem a MESMA estrutura e os mesmos tamanhos, liberados ou nao.
 * Ordem dentro do cartao: capa (planeta menor) > nome > subtitulo (so se o protocolo tem) > link Saiba mais (so se
 * a pagina do protocolo esta pronta) > valor > descricao (so se tem texto) > botao. O valor aparece em todos.
 * Colunas: 1 no celular (ate 599px), 2 de 600px, 3 de 900px e 4 de 1280px.
 * Capa: caixa de 168px de altura, mesmo fundo escuro. A imagem (720 x 900) fica com a altura da caixa, centrada, e uma
 * mascara redonda esconde o fundo da imagem, para o planeta ficar inteiro e sem emenda.
 *   Nao liberado: camada escura sobre a capa (--fume-capa) e cadeado fechado no canto de cima, a esquerda. Mais nada
 *                 cobre a imagem. O Saiba mais e um link pequeno sob o titulo. O CONTRATAR fica no fim do cartao.
 *   Liberado:     capa sem camada, selo LIBERADO no canto de cima, a esquerda, e o botao ACESSAR (ou EM BREVE, desligado).
 * Alinhamento: cada cartao ocupa 5 linhas da grade e as linhas sao as mesmas para os cartoes da mesma fileira
 * (subgrid): capa, cabeca (nome + subtitulo + Saiba mais num bloco so), valor, descricao e botao ficam nas mesmas
 * alturas; o botao fica sempre no fim. A altura da cabeca e a do cartao mais alto da fileira; dentro dela o link
 * fica logo abaixo do titulo (ou do subtitulo), sem espaco vazio no meio.
 * Sem subgrid (navegador antigo), o cartao vira uma coluna e o botao desce para o fim.
 * Tamanhos (celular e computador iguais): nome 22px; subtitulo 16px; valor 24px; descricao 16px; botao 16px com
 * 52px de altura; selo 16px; Saiba mais 16px com 48px de altura de toque. */

.area-vitrine-secao {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.area-vitrine {
  display: grid;
  /* Cada coluna tem no minimo 15,5rem (248px): cabe a maior palavra do nome (Reprogramacao, 22px) sem quebrar no
   * meio. O numero de colunas sai da largura da tela: 1 no celular estreito, 2 a partir de ~540px, 3 a partir de
   * ~810px, 4 a partir de ~1130px. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  align-items: stretch;
  column-gap: 24px;
  row-gap: 0;
}

.area-protocolo {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid var(--borda-cartao);
  border-radius: 18px;
  background: var(--fundo-cartao);
  color: var(--tinta);
  transition: transform 220ms ease;
}

@media (min-width: 768px) {
  .area-protocolo {
    margin-bottom: 32px;
  }
}

/* Sem subgrid: o cartao e uma coluna; o texto cresce e o botao fica no fim. */
.area-protocolo__face {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.area-protocolo__textos {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

/* Titulo, subtitulo e Saiba mais num bloco so; o link fica logo abaixo, sem vazio no meio. */
.area-protocolo__cabeca {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.area-protocolo__cabeca > .area-protocolo__nome,
.area-protocolo__cabeca > .area-protocolo__subtitulo {
  align-self: stretch;
}

/* Com subgrid: as linhas de cada cartao sao as da fileira. face e textos somem do desenho (display: contents)
 * e os cinco blocos viram itens do cartao, cada um na sua linha. */
@supports (grid-template-rows: subgrid) {
  .area-protocolo {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .area-protocolo__face,
  .area-protocolo__textos {
    display: contents;
  }

  .area-protocolo__capa-caixa {
    grid-row: 1;
  }

  .area-protocolo__cabeca {
    grid-row: 2;
  }

  .area-protocolo__valor {
    grid-row: 3;
  }

  .area-protocolo__descricao {
    grid-row: 4;
  }

  .area-protocolo__acoes {
    grid-row: 5;
  }

  /* O valor comeca na mesma altura em todos os cartoes da fileira, com ou sem Saiba mais: a folga de 12px acima
   * dele nao e margem do valor (que mudaria de cartao para cartao), e sim o fim da cabeca dos cartoes que tem valor
   * e nao tem o link. O espaco visto continua o mesmo de antes (12px sem link, 0 com link, pois o link ja tem 48px). */
  .area-protocolo .area-protocolo__valor {
    margin-top: 0;
  }

  .area-protocolo:not([data-com-saiba-mais]):not([data-em-breve]) .area-protocolo__cabeca {
    padding-bottom: 12px;
  }
}

/* Cartao que cresce quando o mouse passa por cima (ou quando o teclado esta num botao dele). So
 * transform: a grade nao muda de lugar. Nenhum pai da lista corta o cartao ampliado (nao ha overflow
 * na lista, na secao nem no main). O z-index poe o cartao ampliado acima dos vizinhos. Em celular sem
 * mouse (hover: none) nada disto vale. Movimento reduzido: ver a secao 16. */
@media (hover: hover) {
  .area-protocolo:hover,
  .area-protocolo:focus-within {
    z-index: 2;
    transform: scale(1.02);
  }

  .area-protocolo:hover .area-protocolo__capa-caixa,
  .area-protocolo:focus-within .area-protocolo__capa-caixa {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.7);
  }
}

/* Cartao contratado com ACESSAR: o cartao todo e clicavel (vitrine.js). */
.area-protocolo--clicavel {
  cursor: pointer;
}

.area-protocolo__capa-caixa {
  position: relative;
  display: block;
  width: 100%;
  height: 168px;
  margin-bottom: 16px;
  overflow: hidden;
  border: 2px solid rgba(201, 168, 76, 0.42);
  border-radius: 14px;
  background: #05060d;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
  transition: border-color 0.2s ease, box-shadow 220ms ease;
}

/* Volume de borracha: luz fina no alto e sombra no pe, por dentro da borda. Fica numa camada por cima da
 * imagem (sombra por dentro de caixa com imagem fica escondida atras da imagem), abaixo do cadeado, do
 * selo. Nao pega clique. */
.area-protocolo__capa-caixa::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12), inset 0 -4px 8px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

/* O planeta inteiro, com a altura da caixa, no centro. A imagem tem proporcao 4:5, entao a largura sai de 80% da altura.
 * A mascara redonda (a borda da imagem em circulo) tira o fundo da imagem, que muda de uma capa para outra. */
.area-protocolo__capa {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: auto;
  height: 100%;
  margin: 0 auto;
  object-fit: cover;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 96%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000 96%, transparent 100%);
}

/* Camada escura sobre a capa colorida. O cadeado vem depois e fica por cima dela. */
.area-protocolo--bloqueado .area-protocolo__capa-caixa::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--fume-capa);
}

/* Cadeado no canto de cima, a esquerda, dentro da capa. */
.area-protocolo__cadeado {
  position: absolute;
  z-index: 1;
  top: 8px;
  left: 8px;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border: 2px solid var(--ouro-claro);
  border-radius: 50%;
  background: rgba(10, 10, 20, 0.85)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23e7cd7f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E")
    center / 50% 50% no-repeat;
}

.area-protocolo__saiba {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  align-self: start;
  justify-self: start;
  min-height: 48px;
  max-width: 100%;
  padding: 0 16px 0 0;
  color: var(--ouro-claro);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.area-protocolo__saiba:hover {
  color: var(--tinta);
}

/* O link ja tem 48px de altura de toque: o valor logo abaixo nao precisa da folga de 12px. */
.area-protocolo[data-com-saiba-mais] .area-protocolo__valor {
  margin-top: 0;
}

.area-protocolo__saiba:focus-visible {
  color: var(--tinta);
  outline: 2px solid var(--tinta);
  outline-offset: 2px;
}

.area-protocolo__nome {
  display: block;
  color: var(--tinta);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  -webkit-hyphens: none;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
}

.area-protocolo__subtitulo {
  display: block;
  margin-top: 4px;
  color: var(--tinta-suave);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  -webkit-hyphens: none;
  hyphens: none;
  overflow-wrap: break-word;
}

.area-protocolo__valor {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  margin-top: 12px;
}

.area-protocolo__preco {
  color: var(--ouro-claro);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
}

.area-protocolo__periodo {
  color: var(--tinta-suave);
  font-size: 1rem;
  line-height: 1.4;
}

.area-protocolo__descricao {
  display: block;
  margin-top: 8px;
  color: var(--tinta-suave);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  -webkit-hyphens: none;
  hyphens: none;
  overflow-wrap: break-word;
}

/* O selo fica sobre a capa, para nao empurrar o nome e os botoes para baixo. */
.area-protocolo__selo {
  position: absolute;
  z-index: 1;
  top: 8px;
  left: 8px;
  padding: 4px 12px;
  border: 1px solid rgba(201, 168, 76, 0.7);
  border-radius: 999px;
  background: rgba(10, 10, 20, 0.78);
  color: var(--ouro-claro);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
}

.area-protocolo--liberado .area-protocolo__capa-caixa {
  border-color: rgba(201, 168, 76, 0.55);
}

.area-protocolo__acoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.area-protocolo__acoes .area-botao {
  min-height: 52px;
  padding: 10px 16px;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-align: center;
}

/* ---------- 15. painel da equipe ----------
 * Pagina /paciente/painel/ (so a equipe). As classes desta secao comecam com "painel-".
 *   Lista:      um botao por paciente, com nome, contato e situacao do cadastro. No celular os tres ficam
 *               um embaixo do outro; a partir de 768px ficam lado a lado, em tres colunas. Nao ha caixa
 *               com rolagem: a lista cresce com a pagina e a busca diminui o que aparece.
 *   Ficha:      cartao medio com o botao de voltar, o nome, os protocolos e o cadastro.
 *   Protocolos: um botao de liga e desliga por protocolo. Liberado = fundo dourado e selo LIBERADO.
 * Tamanhos de letra: so os da secao 1 (nada abaixo de 14px; no celular campo de digitar 16px). */

.painel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.painel > * {
  min-width: 0;
}

.painel-secao {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.painel-secao__cabeca {
  display: flex;
  align-items: center;
  gap: 12px;
}

.painel-subtitulo {
  color: var(--ouro);
  font-size: var(--fs-nome-protocolo);
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.painel-total {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 2px 12px;
  border: 1px solid rgba(201, 168, 76, 0.55);
  border-radius: 999px;
  background: rgba(201, 168, 76, 0.12);
  color: var(--ouro-claro);
  font-size: var(--fs-texto);
  font-weight: 700;
  line-height: 1.3;
}

.painel-total:empty {
  display: none;
}

.painel-busca {
  width: 100%;
  max-width: 560px;
}

.painel-vazio:empty {
  display: none;
}

/* Lista de pacientes */

.painel-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.painel-lista__item {
  min-width: 0;
}

.painel-paciente {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  padding: 16px 20px;
  border: 1px solid var(--borda-cartao);
  border-radius: var(--raio-botao);
  background: var(--fundo-cartao);
  color: var(--tinta);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.painel-paciente__nome {
  color: var(--tinta);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.painel-paciente__contato {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.painel-paciente__dado {
  color: var(--tinta-suave);
  font-size: 1rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* E-mail: uma linha so, cortado com reticencias no fim. min-width 0 deixa o corte funcionar dentro do
 * grid e do flex; o endereco inteiro esta no title. */
.painel-paciente__dado--email {
  min-width: 0;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Situacao do cadastro. Vale na lista e no alto da ficha (o texto diz "completo" ou "incompleto"; o
 * desenho e so um reforco). */
.painel-paciente__estado {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--tinta-suave);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.painel-paciente__estado::before {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23f4f1e8' stroke-opacity='0.6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-dasharray='4 3'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E")
    center / 18px 18px no-repeat;
}

.painel-paciente__estado--completo {
  color: var(--ouro-claro);
}

.painel-paciente__estado--completo::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23e7cd7f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l3 3 5-6'/%3E%3C/svg%3E");
}

/* Colunas da lista (protocolo, inicio, pagamento) e cartao no celular: ver a secao 18. */

/* Ficha do paciente */

.painel-ficha {
  margin: 0;
}

.painel-voltar::before {
  content: '';
  flex: none;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23e7cd7f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E")
    center / 20px 20px no-repeat;
}

@media (min-width: 768px) {
  .painel-voltar {
    align-self: flex-start;
  }
}

.painel-bloco {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.painel-bloco + .painel-bloco {
  padding-top: 24px;
  border-top: 1px solid var(--borda-cartao);
}

.painel-secao__titulo {
  color: var(--tinta);
  font-size: var(--fs-texto);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

/* Botoes de liberar e bloquear protocolo */

.painel-protocolos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.painel-protocolos__item {
  min-width: 0;
}

.painel-protocolo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px 16px;
  border: 2px solid var(--borda-campo);
  border-radius: var(--raio-botao);
  background: var(--fundo-campo);
  color: var(--tinta);
  font-family: inherit;
  font-size: var(--fs-texto);
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.painel-protocolo__nome {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}

.painel-protocolo__selo {
  flex: none;
  padding: 2px 10px;
  border: 1px solid rgba(201, 168, 76, 0.55);
  border-radius: 999px;
  background: rgba(201, 168, 76, 0.16);
  color: var(--ouro-claro);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
}

.painel-protocolo--ligado {
  border-color: var(--ouro);
  background: rgba(201, 168, 76, 0.14);
}

/* Enquanto o banco nao respondeu, os botoes ficam mais fracos e tocar neles nao faz nada. */
.painel-protocolos--ocupado .painel-protocolo {
  opacity: 0.6;
  cursor: progress;
}

@media (min-width: 640px) {
  .painel-protocolos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
  }
}

@media (hover: hover) {
  .painel-paciente:hover {
    border-color: var(--ouro-claro);
    background: rgba(201, 168, 76, 0.08);
  }

  .painel-protocolo:hover {
    border-color: var(--ouro-claro);
  }
}

/* ---------- 16. movimento reduzido ----------
 * So tira o que e enfeite (deslizar de botao, troca suave de cor). As regras da secao 5 usam
 * "animation-delay" como rede de seguranca e ficam de fora de proposito. */

@media (prefers-reduced-motion: reduce) {
  .area-botao,
  .area-topo__link,
  .area-protocolo,
  .area-protocolo__capa-caixa,
  .painel-paciente,
  .painel-protocolo,
  .painel-filtro,
  .painel-pag__opcao {
    transition: none;
  }

  .area-botao--principal:not(:disabled):not(.area-botao--desligado):hover {
    transform: none;
  }

  .area-protocolo:hover,
  .area-protocolo:focus-within {
    transform: none;
  }

  .area-botao-google {
    transition: none;
  }
}

/* ---------- 17. Codigo FQN (pagina do paciente e blocos do painel) ----------
 * Linha do tempo em forma de conversa (PROJETO-LINHA-DO-TEMPO-CONVERSA, 03/10/2026): Rogerio na DIREITA em
 * dourado, paciente na ESQUERDA em azul. Cada acontecimento e uma linha: quadro (no maximo 85% da largura,
 * encostado no seu lado) e, embaixo, uma so frase de dia e hora.
 * Tamanhos (celular / computador): titulo da pagina 26px / 26px; titulo do quadro 16px / 18px;
 * frases de dia e hora ("postou", "leu", "respondeu") 14px nos dois; pergunta do termometro 18px / 20px;
 * alternativa 16px / 17px com 48px de altura minima; "Pergunta N de 7" 14px / 16px; botoes 16px com 48px de altura.
 * Nada abaixo de 14px nesta secao (os 14px sao so as duas frases de data, o contador e a nota do termometro).
 * Linha central em neon (04/10/2026): tubo aceso com miolo quase branco e brilho em 4 camadas (4, 10, 22 e 40px), dourado em
 * cima e azul embaixo, do meio da marca "Hoje" ate o fim do ultimo item. Cada item tem um ponto de luz na linha, ligado ao
 * quadro. O brilho respira (3,6s) e um pulso de luz desce de tempos em tempos; com movimento reduzido tudo fica parado e aceso.
 * So CSS: o JS grava apenas --fqn-linha-inicio no .fqn-trilho. O atalho REPROGRAMACAO fica na faixa do "Voltar", a direita.
 * Computador (768px ou mais): quadro e frases ocupam no maximo metade da area menos 32px, cada um no seu lado.
 * Celular: quadro ate 85% (com fundo opaco, por cima da linha); frases ate metade menos 12px.
 * Sem caixa de rolagem na linha. A janela da atividade rola so se o texto da tarefa for maior que a tela;
 * o termometro cabe sem rolar em 375x667 e em 1366x768. */

.fqn {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  min-width: 0;
}

.fqn__cabeca {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

/* Faixa do topo: "Voltar" na esquerda, atalho REPROGRAMACAO no canto direito, na mesma linha. */
.fqn__faixa {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.fqn__voltar {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
}

/* No computador o botao mostra so o texto longo. A seta e o texto curto "Voltar" so aparecem no celular. */
.fqn__voltar-seta,
.fqn__voltar-curto {
  display: none;
}

.fqn__titulo {
  color: var(--tinta);
  font-size: 1.625rem;
  font-weight: 800;
  line-height: 1.2;
}

.fqn__subtitulo {
  color: var(--tinta-suave);
  font-size: var(--fs-texto);
  line-height: 1.5;
}

/* A conversa: cada linha encosta no seu lado (direita = Rogerio, esquerda = paciente), com a linha central
 * em neon no meio. O .fqn-trilho guarda a luz (.fqn-neon, atras) e a lista (por cima). Sem a medida do JS
 * (--fqn-linha-inicio), a luz fica fora do quadro e nada aparece. */
.fqn-trilho {
  position: relative;
  isolation: isolate;
}

.area-pagina .fqn-linha {
  --fqn-azul: #4fb3ff;
  --fqn-azul-fundo: rgba(79, 179, 255, 0.1);
  --fqn-azul-brilho: rgba(79, 179, 255, 0.4);
  --fqn-neon-ouro: #ffd25a;
  --fqn-neon-azul: #4fb3ff;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* O tubo: caixa sem largura no meio do trilho, do inicio medido ate o fim da lista. Cada camada abaixo e uma
 * faixa centrada nela, com o mesmo degrade (dourado em cima, azul embaixo) e um desfoque diferente. */
.fqn-neon {
  position: absolute;
  z-index: 0;
  top: var(--fqn-linha-inicio, 100%);
  bottom: 0;
  left: 50%;
  width: 0;
  pointer-events: none;
}

.fqn-neon > span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--fqn-camada);
  margin-left: calc(var(--fqn-camada) / -2);
  border-radius: 999px;
  background: linear-gradient(
    to bottom,
    #ffd25a 0,
    #ffd25a 18%,
    #fff1c9 48%,
    #bfe4ff 58%,
    #4fb3ff 82%,
    #4fb3ff 100%
  );
}

.fqn-neon__aura {
  --fqn-camada: 40px;
  filter: blur(14px);
  opacity: 0.5;
  will-change: opacity;
  animation: fqn-respira 3.6s ease-in-out infinite alternate;
}

.fqn-neon__brilho {
  --fqn-camada: 22px;
  filter: blur(7px);
  opacity: 0.7;
  will-change: opacity;
  animation: fqn-respira 3.6s ease-in-out infinite alternate-reverse;
}

.fqn-neon__halo {
  --fqn-camada: 10px;
  filter: blur(3px);
  opacity: 0.95;
}

/* O miolo: fino, quase branco com um tom de ouro, com o brilho curto de 4px ao redor. */
.fqn-neon > .fqn-neon__nucleo {
  --fqn-camada: 3px;
  background: linear-gradient(#fffbe9, #fff4cf);
  box-shadow: 0 0 4px #fff6d6, 0 0 2px #ffffff;
}

/* O pulso: uma faixa de luz que desce pela linha e some no fim, depois uma pausa. */
.fqn-neon > .fqn-neon__pulso {
  --fqn-camada: 7px;
  overflow: hidden;
  background: none;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.9));
}

.fqn-neon__pulso::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) calc(50% - 70px),
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 255, 255, 0) calc(50% + 70px)
  );
  transform: translateY(-100%);
  animation: fqn-pulso 9s ease-in-out 1.5s infinite;
}

@keyframes fqn-respira {
  from {
    opacity: 0.4;
  }

  to {
    opacity: 0.9;
  }
}

@keyframes fqn-pulso {
  0% {
    transform: translateY(-100%);
  }

  45%,
  100% {
    transform: translateY(100%);
  }
}

/* Ponto de luz de cada item, na linha e na altura do quadro: dourado para a equipe, azul para o paciente.
 * Quadro de tarefa que ainda nao abriu (acima de "Hoje") nao tem ponto: a linha so existe de "Hoje" para baixo. */
.fqn-item--quadro:not([data-fqn-linha='futura'])::before,
.fqn-item--quadro:not([data-fqn-linha='futura']) .fqn-quadro::before,
.fqn-item--quadro:not([data-fqn-linha='futura']) .fqn-quadro::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.fqn-item--direita {
  --fqn-ponto: #ffd25a;
  --fqn-ponto-claro: #fff1c9;
}

.fqn-item--esquerda {
  --fqn-ponto: #4fb3ff;
  --fqn-ponto-claro: #d6ecff;
}

/* Celular: o quadro cruza a linha (fica por cima, opaco); o ponto fica na linha, sobre a borda de cima do quadro. */
.fqn-item--quadro:not([data-fqn-linha='futura'])::before {
  z-index: 2;
  top: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  box-sizing: border-box;
  border: 2px solid var(--fqn-ponto);
  border-radius: 50%;
  background: var(--fqn-ponto-claro);
  box-shadow: 0 0 6px var(--fqn-ponto), 0 0 14px var(--fqn-ponto);
}

.fqn-item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.fqn-item--direita {
  align-items: flex-end;
  text-align: right;
}

.fqn-item--esquerda {
  align-items: flex-start;
  text-align: left;
}

/* Frase solta do paciente (esquerda: "ouviu", "leu a atividade"): o mesmo tracinho e o mesmo ponto que os quadros
 * tem, espelhados. A caixa termina a 12px da linha central; o texto encosta no tracinho. */
.fqn-item--frase {
  width: calc(50% - 12px);
  align-items: flex-end;
  text-align: right;
}

.fqn-item--frase .fqn-marca {
  max-width: 100%;
}

.fqn-item--frase::before,
.fqn-item--frase::after {
  content: '';
  position: absolute;
  top: 50%;
  pointer-events: none;
}

.fqn-item--frase::before {
  left: 100%;
  width: 12px;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--fqn-azul), #4fb3ff);
  box-shadow: 0 0 6px var(--fqn-ponto);
}

.fqn-item--frase::after {
  z-index: 2;
  left: calc(100% + 12px);
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  box-sizing: border-box;
  border: 2px solid var(--fqn-ponto);
  border-radius: 50%;
  background: var(--fqn-ponto-claro);
  box-shadow: 0 0 6px var(--fqn-ponto), 0 0 14px var(--fqn-ponto);
}

/* Quadro encostado no seu lado: no maximo 85% da largura. */
.fqn-item .fqn-quadro {
  width: 85%;
  max-width: 460px;
  text-align: left;
}

.fqn-item--direita .fqn-quadro__acao,
.fqn-item--direita .fqn-quadro__selo {
  align-self: flex-start;
}

.fqn-hoje {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ouro-claro);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}

.fqn-hoje::before,
.fqn-hoje::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: rgba(201, 168, 76, 0.55);
}

/* Pilula opaca: cobre o comeco da linha de luz, que nasce no meio dela. */
.fqn-hoje__texto {
  position: relative;
  z-index: 2;
  padding: 6px 18px;
  border: 1px solid rgba(255, 210, 90, 0.75);
  border-radius: 999px;
  background: linear-gradient(rgba(255, 210, 90, 0.1), rgba(255, 210, 90, 0.1)), var(--fundo);
  box-shadow: 0 0 8px rgba(255, 210, 90, 0.45), 0 0 18px rgba(255, 210, 90, 0.2);
  font-size: 1rem;
}

/* Quadro: dourado (Rogerio) ou azul (paciente). O titulo e um botao que cobre o quadro inteiro. */
.fqn-quadro {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px;
  border: 1px solid var(--borda-cartao);
  border-radius: var(--raio-cartao);
  background: var(--fundo-cartao);
  color: var(--tinta);
  min-width: 0;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.fqn-quadro--rogerio {
  border-color: var(--ouro);
  background: rgba(201, 168, 76, 0.08);
}

.fqn-quadro--futura {
  border-style: dashed;
  border-color: rgba(201, 168, 76, 0.55);
  background: var(--fundo-cartao);
  opacity: 0.88;
}

.fqn-quadro--paciente {
  border-color: var(--fqn-azul);
  background: var(--fqn-azul-fundo);
  box-shadow: 0 0 18px var(--fqn-azul-brilho);
}

.fqn-quadro__titulo {
  color: var(--tinta);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.fqn-quadro__abrir {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.fqn-quadro__abrir::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.fqn-quadro__abrir:focus-visible {
  outline: none;
}

.fqn-quadro__abrir:focus-visible::after {
  outline: 3px solid var(--ouro-claro);
  outline-offset: 3px;
}

.fqn-quadro__abrir:disabled {
  cursor: progress;
}

.fqn-quadro__selo {
  align-self: flex-start;
  padding: 2px 12px;
  border: 1px solid var(--borda-campo);
  border-radius: 999px;
  color: var(--tinta-suave);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.fqn-quadro__quando {
  color: var(--tinta-suave);
  font-size: 1rem;
  line-height: 1.5;
}

.fqn-quadro__acao {
  align-self: flex-start;
  color: var(--ouro-claro);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.fqn-quadro--paciente .fqn-quadro__acao {
  color: var(--fqn-azul);
}

/* Segunda linha do quadro da resposta (14/10/2026): "ATIVIDADE 2", entre o titulo e o "ver resposta". Texto de 16px; no celular 15px (como a acao). */
.fqn-quadro__atividade {
  align-self: flex-start;
  color: var(--tinta-suave);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}

/* A mensagem "Salvo as ..." dentro do quadro: margem interna de 12px 14px e texto de 16px (so aqui; nas outras telas ela segue a regra geral). */
.fqn-quadro .area-mensagem {
  padding: 12px 14px;
  font-size: 16px;
}

/* A mesma mensagem dentro da janela do Mapa das Crencas: igual a do quadro. */
.area-mensagem.fqn-janela__mensagem {
  padding: 12px 14px;
  font-size: 16px;
}

/* A frase de dia e hora, uma so por linha, do lado de quem fez. */
.fqn-marca {
  margin: 0;
  padding: 0 4px;
  max-width: calc(50% - 12px);
  overflow-wrap: anywhere;
  font-size: 1rem;
  line-height: 1.4;
}

.fqn-marca--paciente {
  color: var(--fqn-azul);
}

.fqn-marca--rogerio {
  color: var(--ouro-claro);
}

.fqn-texto {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.fqn-texto__corpo {
  color: var(--tinta);
  font-size: var(--fs-texto);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.fqn-texto__espera {
  color: var(--tinta-suave);
  font-size: var(--fs-texto);
  line-height: 1.5;
}

/* Linhas de evento do painel da equipe (painel-tarefas.js). */
.area-pagina .fqn-eventos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fqn-eventos__linha {
  position: relative;
  padding-left: 20px;
  color: var(--tinta-suave);
  font-size: 1rem;
  line-height: 1.5;
}

.fqn-eventos__linha::before {
  content: '';
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ouro);
}

.fqn-eventos__linha--lida::before {
  background: var(--ouro-claro);
}

.fqn-resposta {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.fqn-resposta__aviso {
  color: var(--tinta-suave);
  font-size: 1rem;
  line-height: 1.5;
}

.fqn-resposta__campo {
  min-height: 144px;
  resize: vertical;
  line-height: 1.5;
}

.fqn-botao {
  width: 100%;
  min-height: 48px;
  font-size: var(--fs-botao);
}

.fqn-aviso-relogio {
  font-size: 1rem;
}

.fqn-vazio {
  color: var(--tinta-suave);
  font-size: var(--fs-texto);
}

/* Janela da atividade: por cima da pagina. Celular = tela toda. Computador = quase a tela toda. */
html.fqn-sem-rolagem,
body.fqn-sem-rolagem {
  overflow: hidden;
}

.fqn-janela {
  --fqn-azul: #4fb3ff;
  --fqn-azul-fundo: rgba(79, 179, 255, 0.14);
  --fqn-azul-brilho: rgba(79, 179, 255, 0.4);
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: stretch;
  justify-content: center;
  height: 100vh;
  height: 100dvh;
  background: rgba(8, 8, 18, 0.94);
}

.fqn-janela__painel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  height: 100%;
  padding: 12px 16px 16px;
  background: #11111d;
  color: var(--tinta);
  min-width: 0;
}

.fqn-janela__cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: none;
}

.fqn-janela__titulo {
  min-width: 0;
  color: var(--tinta);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.fqn-janela__titulo:focus {
  outline: none;
}

/* O titulo so recebe foco por programa (tabindex -1, para o leitor de tela anunciar a janela): nao e um botao, entao nunca
 * ganha moldura. A regra "[tabindex]:focus-visible" da secao 12 ganhava desta e desenhava um retangulo amarelo em volta do
 * titulo. O contorno de foco dos botoes e dos campos continua. */
.area-pagina .fqn-janela .fqn-janela__titulo:focus-visible,
.fqn-janela .fqn-janela__titulo:focus-visible {
  outline: none;
}

.fqn-janela__fechar {
  flex: none;
  min-height: 48px;
  min-width: 96px;
  font-size: 1rem;
}

.fqn-janela__corpo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.fqn-janela__corpo--termo {
  overflow-y: visible;
}

.fqn-janela__mensagem {
  flex: none;
  margin: 0;
}

.fqn-janela__mensagem:empty {
  display: none;
}

.fqn-janela__rotulo-tarefa {
  color: var(--tinta-suave);
  font-size: 1rem;
  line-height: 1.5;
}

.fqn-janela__subtitulo {
  color: var(--fqn-azul);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

.area-pagina .fqn-detalhe {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fqn-detalhe__item {
  padding-left: 12px;
  border-left: 3px solid var(--fqn-azul, #4fb3ff);
}

.fqn-detalhe__pergunta {
  color: var(--tinta-suave);
  font-size: 1rem;
  line-height: 1.5;
}

.fqn-detalhe__frase {
  color: var(--tinta);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Termometro da Prosperidade: uma pergunta por vez. */
.fqn-termo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
}

.fqn-termo__contador {
  color: var(--fqn-azul);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}

.fqn-termo__pergunta {
  color: var(--tinta);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.fqn-termo__pergunta:focus {
  outline: none;
}

.fqn-termo__alternativas {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fqn-alt {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 2px solid var(--borda-campo);
  border-radius: var(--raio-botao);
  background: var(--fundo-campo);
  color: var(--tinta);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.fqn-alt__letra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--borda-campo);
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 800;
}

.fqn-alt__texto {
  min-width: 0;
  overflow-wrap: anywhere;
}

.fqn-alt--marcada {
  border-color: var(--fqn-azul);
  background: var(--fqn-azul-fundo);
  box-shadow: 0 0 14px var(--fqn-azul-brilho);
}

.fqn-alt--marcada .fqn-alt__letra {
  border-color: var(--fqn-azul);
  background: var(--fqn-azul);
  color: #04121f;
}

.fqn-alt:focus-visible {
  outline: 3px solid var(--ouro-claro);
  outline-offset: 3px;
}

.fqn-alt:disabled {
  cursor: progress;
  opacity: 0.7;
}

.fqn-termo__aviso {
  margin: 0;
  line-height: 1.4;
}

.fqn-termo__rodape {
  display: flex;
  flex: none;
  gap: 12px;
  margin-top: auto;
}

.fqn-termo__rodape .fqn-botao {
  flex: 1 1 0;
  min-width: 0;
}

.fqn-termo__nota {
  flex: none;
  color: var(--tinta-suave);
  font-size: 1rem;
  line-height: 1.4;
}

/* Mensagem que vem antes da Pergunta 1. Titulo 20px no celular e 24px no computador (ver mais abaixo);
   mensagem 16px no celular e 18px no computador; botao 16px com 48px de altura. */
.fqn-janela__titulo--inicio {
  font-size: 1.25rem;
}

.fqn-termo__mensagem {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fqn-termo__paragrafo {
  margin: 0;
  color: var(--tinta);
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.fqn-termo__abertura {
  margin: 0;
  color: var(--tinta-suave);
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Tela da mensagem inicial, a partir de 560px: o COMECAR fica a direita, como o AVANCAR das perguntas.
   Dois nomes de classe no seletor para valer sobre a regra generica do rodape (space-between), que vem depois. */
@media (min-width: 560px) {
  .fqn-termo__rodape.fqn-termo__rodape--inicio {
    justify-content: flex-end;
  }

  .fqn-termo__rodape.fqn-termo__rodape--inicio .fqn-botao {
    flex: 0 0 auto;
    width: auto;
    min-width: 220px;
    max-width: 360px;
  }
}


/* Botoes do termometro (COMECAR, VOLTAR, AVANCAR): 16px em qualquer largura, como no projeto da mensagem inicial.
   O bloco do celular (max-width 559px) baixa --fs-botao para 15px; estes tres ficam fora dessa regra. */
.fqn-termo__rodape .fqn-botao {
  font-size: 1rem;
}

/* Celular baixo (375x667): a nota some para as 4 alternativas e os botoes caberem sem rolar. */
@media (max-height: 740px) {
  .fqn-termo__nota {
    display: none;
  }
}

.area-pagina textarea:focus-visible {
  outline: 3px solid var(--ouro-claro);
  outline-offset: 3px;
}

/* Painel da equipe: respostas para ler */

.painel-naolidas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.area-pagina .painel-naolidas__lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.painel-naolidas__lista:empty {
  display: none;
}

.painel-naolida {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--ouro);
  border-radius: var(--raio-botao);
  background: rgba(201, 168, 76, 0.08);
  color: var(--tinta);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.painel-naolida__nome {
  color: var(--tinta);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.painel-naolida__tarefa,
.painel-naolida__quando {
  color: var(--tinta-suave);
  font-size: 1rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Painel da equipe: frequencias que o paciente ouviu por 5 minutos ou mais (PROJETO-diario-de-frequencias) */

.area-pagina .painel-diario {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.painel-diario__linha {
  margin: 0;
  color: var(--tinta);
  font-size: 1rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Painel da equipe: tarefas da ficha */

.painel-tarefas__conteudo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.area-pagina .painel-tarefas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.painel-tarefa {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--borda-cartao);
  border-radius: var(--raio-botao);
  background: var(--fundo-cartao);
  min-width: 0;
}

.painel-tarefa--respondida {
  border-color: var(--ouro);
}

.painel-tarefa__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.area-pagina .painel-tarefa__rotulo {
  margin: 0;
  color: var(--tinta);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.painel-tarefa__estado {
  display: inline-flex;
  align-items: center;
  padding: 2px 12px;
  border: 1px solid rgba(201, 168, 76, 0.55);
  border-radius: 999px;
  color: var(--ouro-claro);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.painel-tarefa__quando {
  color: var(--tinta-suave);
  font-size: 1rem;
  line-height: 1.5;
}

.painel-tarefa__acoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.painel-tarefa__acoes:empty {
  display: none;
}

.painel-tarefa__detalhe {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--borda-cartao);
}

.painel-tarefa__parte {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.painel-tarefa__parte--resposta {
  padding-top: 12px;
  border-top: 1px solid var(--linha);
}

.area-pagina .painel-tarefa__subtitulo {
  margin: 0;
  color: var(--ouro-claro);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.painel-tarefa__titulo-tarefa {
  color: var(--tinta);
  font-size: var(--fs-texto);
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.painel-tarefa__corpo {
  color: var(--tinta);
  font-size: var(--fs-texto);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.area-pagina .painel-nova__titulo {
  margin: 8px 0 0;
  color: var(--tinta);
  font-size: var(--fs-texto);
  font-weight: 700;
  line-height: 1.3;
}

.painel-nova {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.painel-nova__aviso {
  color: var(--tinta-suave);
  font-size: 1rem;
  line-height: 1.5;
}

.painel-nova__quando {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.painel-nova__texto {
  min-height: 144px;
  resize: vertical;
  line-height: 1.5;
}

.painel-tipo__botoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.painel-tipo__botao {
  width: 100%;
  min-height: 48px;
  padding: 10px 16px;
  border: 2px solid var(--borda-campo);
  border-radius: var(--raio-botao);
  background: var(--fundo-campo);
  color: var(--tinta);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

.painel-tipo__botao--marcado {
  border-color: var(--ouro);
  background: rgba(201, 168, 76, 0.16);
  color: var(--ouro-claro);
}

.painel-tipo__botao:focus-visible {
  outline: 3px solid var(--ouro-claro);
  outline-offset: 3px;
}

.painel-tipo__botao:disabled {
  cursor: default;
  opacity: 0.75;
}

.area-pagina .painel-escolhas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.painel-escolhas__item {
  padding-left: 12px;
  border-left: 3px solid var(--ouro);
}

.painel-escolhas__pergunta {
  color: var(--tinta-suave);
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.painel-escolhas__frase {
  color: var(--tinta);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.painel-nova__botoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.painel-nova__botao,
.painel-nova__cancelar {
  width: 100%;
  min-height: 48px;
  font-size: 1rem;
}

.painel-nova__cancelar[hidden] {
  display: none;
}

.painel-nova--edicao {
  border-left: 4px solid var(--ouro-claro);
  padding-left: 12px;
}

.painel-tarefa--editando {
  border-color: var(--ouro-claro);
}

.painel-tarefa__fixa {
  color: var(--tinta-suave);
  font-size: 1rem;
  line-height: 1.5;
}

/* Celular: o quadro cruza o centro (ate 85%), entao o fundo e opaco para a linha nao aparecer atraves dele.
 * Cores iguais as de antes, assentadas sobre o fundo da pagina. */
@media (max-width: 767px) {
  .fqn-quadro {
    background: linear-gradient(var(--fundo-cartao), var(--fundo-cartao)), var(--fundo);
  }

  .fqn-quadro--rogerio {
    background: linear-gradient(rgba(201, 168, 76, 0.08), rgba(201, 168, 76, 0.08)), var(--fundo);
  }

  .fqn-quadro--futura {
    background: linear-gradient(var(--fundo-cartao), var(--fundo-cartao)), var(--fundo);
    border-color: rgba(201, 168, 76, 0.48);
    opacity: 1;
  }

  .fqn-quadro--futura > * {
    opacity: 0.88;
  }

  .fqn-quadro--paciente {
    background: linear-gradient(var(--fqn-azul-fundo), var(--fqn-azul-fundo)), var(--fundo);
  }
}

@media (min-width: 768px) {
  .fqn__titulo {
    font-size: 2rem;
  }

  .fqn__voltar {
    max-width: 360px;
  }

  .fqn-marca {
    font-size: 0.875rem;
  }

  /* O ponto de luz sai da borda do quadro e vai ate a linha central (33px: 32px de vao mais 1px da borda). */
  .fqn-item--quadro:not([data-fqn-linha='futura'])::before {
    display: none;
  }

  .fqn-item--quadro:not([data-fqn-linha='futura']) .fqn-quadro::before {
    top: 50%;
    width: 33px;
    height: 2px;
    margin-top: -1px;
    border-radius: 2px;
    box-shadow: 0 0 6px var(--fqn-ponto);
  }

  .fqn-item--quadro:not([data-fqn-linha='futura']) .fqn-quadro::after {
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    box-sizing: border-box;
    border: 2px solid var(--fqn-ponto);
    border-radius: 50%;
    background: var(--fqn-ponto-claro);
    box-shadow: 0 0 6px var(--fqn-ponto), 0 0 14px var(--fqn-ponto);
  }

  .fqn-item--direita.fqn-item--quadro .fqn-quadro::before {
    right: 100%;
    background: linear-gradient(to left, var(--ouro), #ffd25a);
  }

  .fqn-item--direita.fqn-item--quadro .fqn-quadro::after {
    left: -33px;
    margin-left: -6px;
  }

  .fqn-item--esquerda.fqn-item--quadro .fqn-quadro::before {
    left: 100%;
    background: linear-gradient(to right, var(--fqn-azul), #4fb3ff);
  }

  .fqn-item--esquerda.fqn-item--quadro .fqn-quadro::after {
    right: -33px;
    margin-right: -6px;
  }

  .fqn-quadro {
    padding: 20px 24px;
  }

  .fqn-quadro__titulo {
    font-size: 1.125rem;
  }

  /* Frase solta do paciente: a caixa termina a 32px da linha central e o tracinho fecha os 32px. */
  .fqn-item--frase {
    width: calc(50% - 32px);
  }

  .fqn-item--frase::before {
    width: 32px;
  }

  .fqn-item--frase::after {
    left: calc(100% + 32px);
  }

  /* Nada encosta na linha central: cada item ocupa no maximo a metade da area menos 32px. */
  .fqn-item .fqn-quadro {
    width: calc(50% - 32px);
    max-width: calc(50% - 32px);
  }

  .fqn-marca {
    max-width: calc(50% - 32px);
  }

  .fqn-janela {
    align-items: center;
  }

  .fqn-janela__painel {
    width: 92vw;
    max-width: 1000px;
    height: 92vh;
    height: 92dvh;
    padding: 20px 28px 24px;
    border: 1px solid var(--borda-cartao);
    border-radius: var(--raio-cartao);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  }

  .fqn-janela__titulo {
    font-size: 1.25rem;
  }

  .fqn-termo__contador {
    font-size: 1rem;
  }

  .fqn-janela__titulo--inicio {
    font-size: 1.5rem;
  }

  .fqn-termo__paragrafo {
    font-size: 1.125rem;
  }

  .fqn-termo__abertura {
    font-size: 1.125rem;
  }

  .fqn-termo__pergunta {
    font-size: 1.25rem;
  }

  .fqn-alt {
    font-size: 1.0625rem;
  }

  .fqn-termo__rodape {
    justify-content: space-between;
  }

  .fqn-termo__rodape .fqn-botao {
    flex: 0 0 auto;
    min-width: 220px;
  }

  .fqn-botao {
    width: auto;
    max-width: 360px;
    min-width: 220px;
    align-self: flex-start;
  }

  .painel-nova__quando {
    grid-template-columns: repeat(2, minmax(0, 220px));
  }

  .painel-tipo__botoes {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .painel-tipo__botao {
    width: auto;
    min-width: 220px;
  }

  .painel-nova__botoes {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .painel-nova__botao,
  .painel-nova__cancelar {
    width: auto;
    max-width: 360px;
    min-width: 220px;
  }

  .painel-tarefa__acoes {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .painel-tarefa__acoes .fqn-botao {
    width: auto;
  }
}

@media (hover: hover) {
  .painel-naolida:hover {
    border-color: var(--ouro-claro);
    background: rgba(201, 168, 76, 0.16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .painel-naolida,
  .fqn-quadro,
  .fqn-alt {
    transition: none;
  }
}

/* ---------- 17b. Onda da semana e Atividade Complementar (linha do tempo, 07/10/2026) ----------
 * Tamanhos (celular / computador): texto do quadro 16 / 17px; rotulo, legenda, aviso, frase de erro e botao 16px;
 * titulo do quadro 16 / 18px; frase de data e hora 14px (texto auxiliar, igual as outras frases da linha).
 * Campo e botao com no minimo 48px de altura. Sem caixa de rolagem: o campo cresce com o texto. */

.fqn-quadro__texto {
  margin: 0;
  color: var(--tinta);
  font-size: 1rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.fqn-onda {
  gap: 12px;
}

.fqn-onda .fqn-resposta__aviso,
.fqn-onda .area-campo__ajuda,
.fqn-onda .area-campo__erro {
  font-size: 1rem;
  line-height: 1.5;
}

.fqn-onda__campo {
  min-height: 120px;
  font-size: 1rem;
}

.fqn-onda .fqn-botao {
  min-height: 48px;
  font-size: 1rem;
}

/* Onda da semana recolhida (09/10/2026): so o botao aparece; o campo e o ENVIAR ONDA ficam dentro do corpo, que o paciente
 * abre e fecha quantas vezes quiser. Botao com a largura do conteudo, 48px de altura, 16px no computador e 15px no celular. */
.fqn-onda__abrir {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  max-width: 100%;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--fqn-azul-brilho, rgba(79, 179, 255, 0.4));
  border-radius: 12px;
  background: var(--fqn-azul-fundo, rgba(79, 179, 255, 0.1));
  color: var(--fqn-azul, #4fb3ff);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  cursor: pointer;
}

.fqn-onda__abrir::after {
  content: '';
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

.fqn-onda__abrir[aria-expanded='true']::after {
  transform: translateY(2px) rotate(-135deg);
}

.fqn-onda__abrir:focus-visible {
  outline: 2px solid var(--fqn-azul, #4fb3ff);
  outline-offset: 3px;
}

.fqn-onda__corpo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.fqn-onda__corpo[hidden] {
  display: none;
}

@media (max-width: 559px) {
  .fqn-onda__abrir {
    font-size: 0.9375rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fqn-onda__abrir::after {
    transition: none;
  }
}

@media (min-width: 768px) {
  .fqn-quadro__texto {
    font-size: 1.0625rem;
  }
}

/* ---------- 18. Lista com protocolo e pagamento, filtro e formulario de pagamento (painel) ----------
 * Tamanhos: nome do paciente 18px; WhatsApp, e-mail, protocolo, inicio e pagamento 16px; "Pago em" e
 * "Em aberto" 16px em negrito; titulos das colunas, rotulos, campos, botoes e mensagens 16px.
 * Campos e botoes com 48px de altura. Nada abaixo de 16px nesta secao. Sem caixa de rolagem. */

.painel-ferramentas {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.painel-ferramentas .painel-busca {
  flex: 1 1 auto;
}

.painel-filtro {
  flex: none;
  min-height: 48px;
  padding: 10px 20px;
  border: 2px solid var(--borda-campo);
  border-radius: var(--raio-botao);
  background: var(--fundo-campo);
  color: var(--tinta);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.painel-filtro--ligado {
  border-color: var(--ouro);
  background: var(--ouro);
  color: var(--fundo);
}

/* Titulos das colunas: so no computador. No celular cada paciente e um cartao com os rotulos dentro. */
.painel-colunas {
  display: none;
}

.painel-paciente__quem {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.painel-paciente__linhas {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.painel-paciente__linha {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 10px 0;
  border-top: 1px solid var(--linha);
}

.painel-paciente__celula {
  display: flex;
  gap: 8px;
  min-width: 0;
  font-size: 1rem;
  line-height: 1.4;
}

.painel-paciente__rotulo {
  flex: none;
  color: var(--tinta-suave);
}

.painel-paciente__rotulo::after {
  content: ':';
}

.painel-paciente__valor {
  min-width: 0;
  overflow-wrap: anywhere;
}

.painel-paciente__protocolo .painel-paciente__valor {
  font-weight: 600;
}

.painel-paciente__sem {
  padding-top: 10px;
  border-top: 1px solid var(--linha);
  color: var(--tinta-suave);
  font-size: 1rem;
  line-height: 1.4;
}

.painel-paciente__pagamento .painel-paciente__valor {
  font-weight: 700;
}

.painel-paciente__pagamento--pago .painel-paciente__valor {
  color: #7be0a0;
}

.painel-paciente__pagamento--aberto .painel-paciente__valor {
  color: var(--erro);
}

.painel-paciente__pagamento--naoinformado .painel-paciente__valor {
  color: var(--tinta-suave);
  font-weight: 600;
}

/* Formulario de pagamento de cada protocolo, na ficha */

.painel-pag__aviso {
  color: var(--tinta-suave);
  font-size: 1rem;
  line-height: 1.5;
}

.painel-pag__lista {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.painel-pag__lista:empty {
  display: none;
}

.painel-pag {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--borda-cartao);
  border-radius: var(--raio-botao);
  background: var(--fundo-cartao);
}

.painel-pag__nome {
  color: var(--ouro);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.painel-pag__linha {
  display: contents;
}

.painel-pag__opcoes {
  display: flex;
  gap: 12px;
}

.painel-pag__opcao {
  flex: 1 1 0;
  min-height: 48px;
  padding: 10px 16px;
  border: 2px solid var(--borda-campo);
  border-radius: var(--raio-botao);
  background: var(--fundo-campo);
  color: var(--tinta);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.painel-pag__opcao:disabled {
  opacity: 0.6;
  cursor: progress;
}

.painel-pag__opcao--pago.painel-pag__opcao--ligada {
  border-color: #7be0a0;
  background: rgba(123, 224, 160, 0.16);
}

.painel-pag__opcao--aberto.painel-pag__opcao--ligada {
  border-color: var(--erro);
  background: rgba(255, 143, 128, 0.14);
}

.painel-pag__opcoes[aria-invalid='true'] .painel-pag__opcao {
  border-color: var(--erro);
}

@media (min-width: 640px) {
  .painel-pag {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }

  .painel-pag__nome,
  .painel-pag .area-mensagem {
    grid-column: 1 / -1;
  }

  .painel-pag__salvar {
    grid-column: 1 / -1;
    justify-self: start;
    min-width: 280px;
  }
}

@media (min-width: 768px) {
  .painel-ferramentas {
    flex-direction: row;
    align-items: flex-end;
    gap: 16px;
  }

  .painel-colunas {
    display: grid;
    grid-template-columns: 280px minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 1fr);
    gap: 24px;
    padding: 0 25px;
  }

  .painel-colunas__titulo {
    color: var(--ouro);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
  }

  .painel-paciente {
    grid-template-columns: 280px minmax(0, 1fr);
    align-items: start;
    gap: 24px;
    padding: 16px 24px;
  }

  .painel-paciente__linha {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 1fr);
    gap: 24px;
    padding: 6px 0;
    border-top: 0;
  }

  .painel-paciente__sem {
    padding-top: 6px;
    border-top: 0;
  }

  /* No computador o titulo da coluna fica acima da lista; o rotulo de cada celula so serve para a
   * leitura de tela (fica fora da vista, mas continua na pagina). */
  .painel-paciente__rotulo {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .painel-paciente__rotulo::after {
    content: none;
  }
}

/* ---------- 19. Adicionar paciente: pre-cadastro por e-mail (painel) ----------
 * PROJETO-LIBERAR-POR-EMAIL.md, 01/10/2026. Tamanhos: titulo 22px no celular e 24px no computador;
 * rotulos, campos, erros, etiqueta "Aguardando cadastro", selo e botoes 16px; campos e botoes com 48px
 * de altura. Nada abaixo de 16px. No computador o formulario usa duas colunas (campos de um lado,
 * protocolos do outro) para caber na tela sem rolar. Sem caixa de rolagem. */

.painel-adicionar {
  align-self: stretch;
}

@media (min-width: 768px) {
  .painel-adicionar {
    align-self: flex-start;
    min-width: 280px;
  }
}

.painel-novo__titulo-principal {
  color: var(--ouro);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .painel-novo__titulo-principal {
    font-size: 1.5rem;
  }
}

.painel-novo__campos {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.painel-novo__protocolos {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.painel-novo__protocolos .painel-protocolos {
  grid-template-columns: minmax(0, 1fr);
}

.painel-novo__corpo > * {
  min-width: 0;
}

@media (min-width: 768px) {
  .painel-novo__corpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 28px;
    row-gap: 12px;
    align-items: start;
  }

  .painel-novo__corpo > .area-formulario__aviso {
    grid-column: 1 / -1;
  }
}

/* No computador o cartao fica mais largo e os protocolos ficam em duas colunas, para o formulario
 * inteiro caber na altura da tela sem rolar (bloco 34, item 5). Abaixo de 1024px nada muda. */
@media (min-width: 1024px) {
  .painel-novo.area-cartao--medio {
    max-width: 1000px;
  }

  .painel-novo__protocolos .painel-protocolos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* Janela do link de cadastro (aparece no lugar do formulario depois de gerar o link do Codigo FQN).
 * Texto 16px; o link quebra dentro da janela e nunca sai dela; botoes de 48px, um embaixo do outro no celular. */
.painel-novo__link {
  min-width: 0;
}

.painel-novo__link-texto {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(201, 168, 76, 0.45);
  border-radius: 12px;
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: break-all;
  user-select: all;
}

.painel-novo__link-acoes {
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 768px) {
  .painel-novo__link-acoes {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* Etiqueta da lista e do alto da ficha: o paciente ainda nao criou a conta. */
.painel-paciente__estado--aguardando {
  color: var(--ouro);
}

.painel-paciente__estado--aguardando::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c9a84c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

.painel-ficha__contato {
  overflow-wrap: anywhere;
}

/* ---------- 20. Aviso de confirmacao do e-mail (cadastro e protocolos) ----------
 * PROJETO-LIBERAR-POR-EMAIL.md, 01/10/2026. Frase, botao de pedir o link de novo e resposta do pedido.
 * Texto 16px, botao 16px com 48px de altura. Largura toda no celular; no computador o botao tem 280 a 360px. */

.area-confirmar:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 24px;
}

.area-confirmar p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

.area-confirmar .area-botao {
  align-self: stretch;
}

.area-confirmar__retorno:empty {
  display: none;
}

@media (min-width: 768px) {
  .area-confirmar .area-botao {
    align-self: flex-start;
    min-width: 280px;
    max-width: 360px;
  }
}

/* ---------- 21. Painel da equipe: mensalidades, Valor por mes e Avisos de hoje ----------
 * PROJETO-AREA-DE-PAGAMENTO.md, 01/10/2026. Texto 16px; botoes e campos com 48px de altura.
 * Sem caixa de rolagem: a lista cresce com a pagina. Situacao: verde = paga, vermelho = em aberto, cinza = a vencer. */

.painel-mens {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--borda-cartao);
  border-radius: var(--raio-botao);
  background: var(--fundo-cartao);
}

.painel-mens__titulo-bloco {
  margin: 8px 0 0;
  color: var(--ouro);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
}

.area-pagina .painel-mens__lista {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.painel-mens__linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px 16px;
  padding: 12px 0;
  border-top: 1px solid var(--linha);
  font-size: 1rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.painel-mens__cabeca {
  display: none;
}

.painel-mens__titulo {
  color: var(--ouro);
  font-weight: 700;
}

.painel-mens__vencimento {
  font-weight: 700;
}

.painel-mens__valor {
  text-align: right;
}

.painel-mens__situacao {
  font-weight: 700;
}

.painel-mens__situacao--paga {
  color: #7be0a0;
}

.painel-mens__situacao--aberta {
  color: var(--erro);
}

.painel-mens__situacao--a_vencer {
  color: var(--tinta-suave);
}

.painel-mens__link {
  text-align: right;
}

.painel-mens__link--vazio {
  color: var(--tinta-suave);
}

.painel-mens__ancora {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--ouro-claro);
  font-weight: 600;
  text-decoration: underline;
}

.painel-paciente__pagamento--proximo .painel-paciente__valor {
  color: var(--tinta-suave);
  font-weight: 600;
}

@media (min-width: 768px) {
  .painel-mens__cabeca {
    display: grid;
    border-top: 0;
    padding-top: 0;
  }

  .painel-mens__linha {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }

  .painel-mens__valor,
  .painel-mens__link {
    text-align: left;
  }
}

/* Valor e Cobranca: um formulario por protocolo, dentro de uma caixa que abre e fecha */

.painel-precos__resumo {
  display: flex;
  align-items: center;
  min-height: 48px;
  color: var(--ouro);
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
}

.painel-precos[open] > .painel-precos__resumo {
  margin-bottom: 12px;
}

.painel-precos > .painel-pag__aviso {
  margin: 0 0 8px;
}

.painel-preco {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--borda-cartao);
  border-radius: var(--raio-botao);
  background: var(--fundo-cartao);
}

.painel-preco .area-campo__entrada,
.painel-preco__salvar {
  min-height: 48px;
}

/* Valor e Cobranca lado a lado (no celular, um embaixo do outro) */
.painel-preco__campos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

@media (min-width: 640px) {
  .painel-preco__campos {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (min-width: 640px) {
  .painel-preco__salvar {
    justify-self: start;
    min-width: 280px;
  }
}

/* Avisos de hoje: quem recebe o aviso e o botao que abre o WhatsApp com o texto pronto */

.area-pagina .painel-avisos__lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.painel-avisos__lista:empty {
  display: none;
}

.painel-aviso {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--ouro);
  border-radius: var(--raio-botao);
  background: rgba(201, 168, 76, 0.08);
}

.painel-aviso__texto {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.painel-aviso__nome {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.painel-aviso__detalhe,
.painel-aviso__quando {
  color: var(--tinta-suave);
  font-size: 1rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.painel-aviso__quando--hoje {
  color: var(--erro);
  font-weight: 700;
}

.painel-aviso__botao {
  min-height: 48px;
}

.painel-aviso__sem {
  color: var(--tinta-suave);
  font-size: 1rem;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .painel-aviso {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .painel-aviso__botao {
    min-width: 280px;
  }
}

/* ---------- 22. Area do Paciente: pagina Pagamentos (antes um bloco de Protocolos) e botao CONTRATAR ----------
 * PROJETO-AREA-DE-PAGAMENTO.md, 01/10/2026. Texto 16px; PAGAR com 48px de altura, largura toda no celular e
 * 280 a 360px no computador. Sem caixa de rolagem. Cada protocolo aparece com as mensalidades vencidas e a proxima. */

.pagamentos {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 32px;
}

.pagamentos[hidden] {
  display: none;
}

.pagamentos__titulo {
  margin: 0;
  color: var(--ouro);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
}

.area-pagina .pagamentos__lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagamentos__cabeca {
  display: none;
}

/* Ate 1099px cada pagamento e um cartao: o protocolo em cima, depois Vencimento e Valor (cada um com o rotulo
 * em cima e o dado embaixo), a Situacao e o botao PAGAR. Data, valor e "Paga em dd/mm/aaaa" nunca quebram de
 * linha (nowrap). A partir de 1100px vira tabela de cinco colunas com a mesma regra. */
.pagamentos__linha {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px 16px;
  padding: 16px;
  border: 1px solid var(--borda-cartao);
  border-radius: var(--raio-botao);
  background: var(--fundo-cartao);
  font-size: 1rem;
  line-height: 1.4;
}

.pagamentos__linha > * {
  min-width: 0;
}

/* Linha sem botao PAGAR: o espaco vazio no fim nao ocupa lugar nem abre folga. */
.pagamentos__linha > span:empty {
  display: none;
}

.pagamentos__protocolo {
  grid-column: 1 / -1;
  color: var(--ouro);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.pagamentos__vencimento,
.pagamentos__valor,
.pagamentos__situacao {
  white-space: nowrap;
}

.pagamentos__situacao {
  grid-column: 1 / -1;
}

.pagamentos__rotulo {
  display: block;
  margin: 0 0 2px;
  color: var(--tinta-suave);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.3;
}

.pagamentos__valor {
  font-weight: 700;
}

.pagamentos__situacao {
  font-weight: 700;
}

.pagamentos__situacao--paga {
  color: #7be0a0;
}

.pagamentos__situacao--aberta {
  color: var(--erro);
}

.pagamentos__situacao--a_vencer {
  color: var(--tinta-suave);
}

.pagamentos__botao {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 48px;
}

.pagamentos__mensagem:empty {
  display: none;
}

.pagamentos__mensagem {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

@media (min-width: 640px) {
  .pagamentos__linha {
    grid-template-columns: max-content max-content minmax(0, 1fr);
    column-gap: 32px;
  }

  .pagamentos__situacao {
    grid-column: auto;
  }

  .pagamentos__botao {
    justify-self: start;
    max-width: 360px;
  }
}

@media (min-width: 1100px) {
  .pagamentos__cabeca {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7.5rem 8rem 12.5rem 17.5rem;
    gap: 16px;
    padding: 0 16px;
    color: var(--ouro);
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
  }

  .pagamentos__linha {
    grid-template-columns: minmax(0, 1fr) 7.5rem 8rem 12.5rem 17.5rem;
    align-items: center;
    gap: 16px;
  }

  .pagamentos__protocolo {
    grid-column: auto;
  }

  .pagamentos__situacao {
    grid-column: auto;
  }

  .pagamentos__rotulo {
    display: none;
  }

  .pagamentos__botao {
    grid-column: auto;
    justify-self: end;
    width: 100%;
    max-width: 17.5rem;
  }
}

/* ---------- 23. Reprogramacao Quantica (PROJETO-REPROGRAMACAO.md, 03/10/2026) ----------
 * Pagina /paciente/reprogramacao (venda e area de quem contratou) e botao REPROGRAMACAO no topo do Codigo FQN.
 * Tamanhos (celular / computador):
 *   titulo da pagina 30px / 44px; titulo de secao 24px / 32px; texto normal 16px / 18px;
 *   frase de abertura 18px / 20px; nome da frequencia 18px / 20px (peso 600); nome do som 18px / 18px;
 *   frase do som 15px / 16px; contagem do som 18px / 18px; faixa em Hz e "Ouvido em" 14px / 16px;
 *   preco 32px / 40px (rotulo 16px); botoes 16px com 48px de altura / 18px com 52px;
 *   botao do Codigo FQN: nome 18px / 20px, linha 14px / 16px. Nada abaixo de 14px.
 * Efeitos (bloco 35 do web-architect): ondas neon por frequencia, brilho que pulsa, entrada ao rolar,
 *   abrir e fechar animado, anel que gira enquanto o som carrega. So transform, opacity e a altura da frequencia
 *   (grid 0fr -> 1fr); a entrada ao rolar leva 300 ms; a frequencia abre em 500 ms e fecha em 350 ms (ordem
 *   dele, 04/10/2026: abertura premium e suave). O brilho que pulsa (ciclo de 3 a 4 s) e o unico efeito que se repete, pedido no projeto
 *   aprovado. Tudo desliga com prefers-reduced-motion (bloco no fim desta secao).
 * Sem caixa de rolagem: a pagina cresce para baixo. Uma frequencia aberta por vez.
 * Largura: pagina com no maximo 760px; botao CONTRATAR com no maximo 360px. */

.area-pagina .rq {
  --rq-titulo: 1.875rem;
  --rq-secao: 1.5rem;
  --rq-texto: 1rem;
  --rq-lead: 1.125rem;
  --rq-freq: 1.125rem;
  --rq-nome: 1.125rem;
  --rq-frase: 0.9375rem;
  --rq-contagem: 1.125rem;
  --rq-baixo: 0.875rem;
  --rq-preco: 2rem;
  --rq-botao: 1rem;
  --rq-botao-altura: 48px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  min-width: 0;
}

.area-pagina .rq[hidden] {
  display: none;
}

@media (min-width: 768px) {
  .area-pagina .rq {
    --rq-titulo: 2.75rem;
    --rq-secao: 2rem;
    --rq-texto: 1.125rem;
    --rq-lead: 1.25rem;
    --rq-freq: 1.25rem;
    --rq-frase: 1rem;
    --rq-baixo: 1rem;
    --rq-preco: 2.5rem;
    --rq-botao: 1.125rem;
    --rq-botao-altura: 52px;
  }
}

.rq-titulo {
  color: var(--tinta);
  font-size: var(--rq-titulo);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.01em;
  overflow-wrap: normal;
  text-wrap: balance;
}

.rq-secao {
  color: var(--ouro-claro);
  font-size: var(--rq-secao);
  font-weight: 800;
  line-height: 1.2;
}

.rq-texto {
  color: var(--tinta);
  font-size: var(--rq-texto);
  line-height: 1.65;
}

.rq-bloco {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#rq-venda,
#rq-area {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

/* ---- abertura ---- */

.rq-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 40px 20px 32px;
  border: 1px solid var(--borda-cartao);
  border-radius: var(--raio-cartao);
  background: rgba(10, 10, 20, 0.55);
  text-align: center;
  overflow: hidden;
}

.rq-hero > * {
  position: relative;
  z-index: 1;
}

.area-pagina .rq-hero > .rq-hero__ondas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 0;
  pointer-events: none;
}

.rq-hero__ondas .rq-onda {
  width: 100%;
  height: 32px;
  opacity: 0.15;
  animation: rq-brilho-fraco 4s ease-in-out infinite;
}

.rq-hero__ondas .rq-onda:nth-child(2) { animation-delay: -0.8s; }
.rq-hero__ondas .rq-onda:nth-child(3) { animation-delay: -1.6s; }
.rq-hero__ondas .rq-onda:nth-child(4) { animation-delay: -2.4s; }
.rq-hero__ondas .rq-onda:nth-child(5) { animation-delay: -3.2s; }

.rq-onda {
  display: block;
  width: 100%;
  height: 40px;
  color: var(--cor, var(--ouro));
  overflow: visible;
}

.rq-onda path {
  stroke: var(--cor, var(--ouro));
  filter: drop-shadow(0 0 4px var(--cor, var(--ouro)));
}

.rq-hero__frase {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 560px;
  color: var(--tinta);
  font-size: var(--rq-lead);
  line-height: 1.5;
}

.rq-hero__frase1 {
  font-weight: 700;
}

.rq-hero__frase2 {
  color: var(--tinta-suave);
}

/* Aviso de acesso vencido (Seu acesso terminou em dd/mm. Para continuar, renove.). Cor da casa, nunca vermelho. */
.rq-vencido {
  max-width: 560px;
  margin: 0;
  padding: 12px 16px;
  border-left: 4px solid var(--ouro);
  border-radius: 0 var(--raio-botao) var(--raio-botao) 0;
  background: rgba(201, 168, 76, 0.1);
  color: var(--tinta);
  font-size: var(--rq-lead);
  font-weight: 700;
  line-height: 1.45;
  text-align: left;
}

/* Som de exemplo de 7 segundos (assets/js/exemplo-som.js). Nada toca sozinho: so ao apertar o botao. */
.rq-exemplo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 20px;
  border: 1px solid rgba(201, 168, 76, 0.45);
  border-radius: var(--raio-botao);
  background: rgba(201, 168, 76, 0.08);
}

.rq-exemplo__titulo {
  margin: 0;
  color: var(--ouro-claro);
  font-size: var(--rq-lead);
  font-weight: 800;
  line-height: 1.3;
}

.rq-exemplo__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 200px;
  padding: 10px 24px;
  border: 2px solid var(--ouro);
  border-radius: var(--raio-botao);
  background: transparent;
  color: var(--ouro-claro);
  font-family: inherit;
  font-size: var(--fs-botao);
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.rq-exemplo__botao[aria-pressed='true'] {
  background: linear-gradient(135deg, var(--ouro), var(--ouro-claro));
  color: #1a1400;
}

/* Medidor do som saindo (11/10/2026): barra dourada que acompanha o nivel enquanto o exemplo toca. */
.rq-exemplo__medidor {
  width: 100%;
  max-width: 320px;
  height: 8px;
  margin: 14px auto 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.rq-exemplo__medidor-barra {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--ouro), var(--ouro-claro));
  transition: width 0.1s linear;
}

.rq-exemplo__nota {
  margin: 0;
  color: var(--tinta-suave);
  font-size: var(--rq-texto);
  line-height: 1.5;
}

.rq-exemplo__aviso {
  margin: 0;
  color: var(--tinta);
  font-size: var(--rq-texto);
  line-height: 1.5;
}

.rq-exemplo__aviso:empty {
  display: none;
}

/* ---- preco e CONTRATAR ---- */

.rq-contratar-caixa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin-top: 8px;
}

.rq-preco {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.rq-preco__rotulo {
  color: var(--tinta-suave);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.rq-preco__valor {
  color: var(--ouro-claro);
  font-size: var(--rq-preco);
  font-weight: 800;
  line-height: 1.1;
  text-shadow: 0 0 18px rgba(201, 168, 76, 0.45);
}

.area-pagina .rq-contratar {
  width: 100%;
  max-width: 360px;
  min-height: var(--rq-botao-altura);
  font-size: var(--rq-botao);
}

.rq-mensagem {
  align-self: center;
  width: 100%;
  max-width: 560px;
  text-align: center;
}

/* ---- as cinco frequencias na venda ---- */

.rq-freq {
  --cor: var(--ouro);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--borda-cartao);
  border-left: 4px solid var(--cor);
  border-radius: var(--raio-cartao);
  background: var(--fundo-cartao);
  box-shadow: 0 0 22px -10px var(--cor);
}

/* Titulo do cartao com tamanho de subtitulo (18px celular / 20px computador, peso 600); a faixa em Hz e texto
 * auxiliar (14px / 16px, peso normal). Palavra nunca quebra no meio. */
.rq-freq__titulo {
  color: var(--tinta);
  font-size: var(--rq-freq);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: normal;
  text-wrap: balance;
}

.rq-freq__faixa {
  color: var(--cor);
  font-size: var(--rq-baixo);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.rq-freq__sons-titulo {
  color: var(--ouro-claro);
  font-size: var(--rq-texto);
  font-weight: 700;
}

.rq-freq__sons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Cada som: nome, finalidade e horario, um embaixo do outro. */
.rq-freq__som {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--tinta-suave);
  font-size: var(--rq-texto);
  line-height: 1.45;
}

.rq-freq__som-nome {
  color: var(--tinta);
  font-weight: 700;
}

.rq-freq__som-horario {
  font-size: var(--rq-baixo);
}

/* ---- ritual ---- */

.rq-passos {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rq-passo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  border: 1px solid var(--borda-cartao);
  border-radius: var(--raio-botao);
  background: var(--fundo-cartao);
}

.rq-passo__titulo {
  color: var(--ouro-claro);
  font-size: var(--rq-texto);
  font-weight: 800;
}

/* ---- aviso do Codigo FQN, cuidados, chamada final ---- */

.rq-aviso-fqn {
  padding: 20px;
  border: 1px solid rgba(197, 139, 255, 0.5);
  border-radius: var(--raio-cartao);
  background: rgba(197, 139, 255, 0.08);
  box-shadow: 0 0 22px -10px #c58bff;
}

.rq-cuidados {
  padding: 20px;
  border-left: 4px solid var(--ouro);
  border-radius: 0 var(--raio-botao) var(--raio-botao) 0;
  background: rgba(201, 168, 76, 0.08);
}

.area-pagina .rq-cuidados__lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0 0 0 20px;
  list-style: disc;
}

.rq-cuidados__item {
  color: var(--tinta);
  font-size: var(--rq-texto);
  line-height: 1.55;
}

.rq-final {
  align-items: center;
  padding: 32px 20px;
  border: 1px solid var(--borda-cartao);
  border-radius: var(--raio-cartao);
  background: rgba(10, 10, 20, 0.55);
  text-align: center;
}

/* ---- entrada ao rolar ---- */

.rq-entra {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.rq-entra.rq-visivel {
  opacity: 1;
  transform: none;
}

@keyframes rq-brilho {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.85;
  }
}

@keyframes rq-brilho-fraco {
  0%,
  100% {
    opacity: 0.12;
  }
  50% {
    opacity: 0.4;
  }
}

/* ---- area de quem contratou: a linha vertical neon ---- */

.rq-area {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 8px;
}

.area-pagina .rq-linha {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rq-linha::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 15px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #c58bff, var(--ouro));
  box-shadow: 0 0 10px rgba(197, 139, 255, 0.75), 0 0 22px rgba(201, 168, 76, 0.35);
  pointer-events: none;
}

.rq-banda {
  --cor: var(--ouro);
  /* Abrir e fechar a frequencia: a altura cresce de forma continua (grid 0fr -> 1fr). Fechar e mais rapido.
     O tempo de abrir tambem esta em ABRIR_MS de reprogramacao-tela.js (espera a altura assentar para rolar). */
  --rq-curva: cubic-bezier(0.22, 0.61, 0.36, 1);
  --rq-abrir: 500ms;
  --rq-fechar: 350ms;
  position: relative;
  min-width: 0;
  padding-left: 48px;
  /* Ao abrir, o cartao sobe ate 12px do topo da tela. A partir de 768px o cabecalho fica preso no topo, entao a tela
     soma a altura real dele a esta folga (reprogramacao-tela.js, rolarParaOTopo). */
  scroll-margin-top: 12px;
}

.rq-banda__no {
  position: absolute;
  top: 24px;
  left: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cor);
  box-shadow: 0 0 12px var(--cor), 0 0 0 4px var(--fundo);
}

.area-pagina .rq-banda__cabeca {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 12px 16px;
  border: 1px solid var(--borda-cartao);
  border-left: 4px solid var(--cor);
  border-radius: var(--raio-botao);
  background: rgba(10, 10, 20, 0.82);
  color: var(--tinta);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  /* isolation: o brilho (::before) fica atras do texto e na frente do fundo do botao. */
  position: relative;
  isolation: isolate;
  transition: transform 0.2s ease, border-color var(--rq-fechar) var(--rq-curva);
  -webkit-tap-highlight-color: transparent;
}

.rq-banda__cabeca:hover {
  transform: translateX(2px);
}

/* Brilho da cor da banda: so a opacidade muda (a sombra em si e fixa). */
.rq-banda__cabeca::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 0 22px -6px var(--cor), inset 0 0 28px -14px var(--cor);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--rq-fechar) var(--rq-curva);
}

.rq-banda--aberta .rq-banda__cabeca {
  border-color: var(--cor);
  transition: transform 0.2s ease, border-color var(--rq-abrir) var(--rq-curva);
}

.rq-banda--aberta .rq-banda__cabeca::before {
  opacity: 1;
  transition: opacity var(--rq-abrir) var(--rq-curva);
}

.rq-banda__textos {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rq-banda__titulo {
  font-size: var(--rq-freq);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: normal;
  text-wrap: balance;
}

.rq-banda__faixa {
  color: var(--cor);
  font-size: var(--rq-baixo);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.rq-banda__seta {
  flex: none;
  align-self: center;
  width: 12px;
  height: 12px;
  margin-right: 4px;
  border-right: 3px solid var(--ouro-claro);
  border-bottom: 3px solid var(--ouro-claro);
  transform: rotate(45deg);
  transition: transform var(--rq-fechar) var(--rq-curva);
}

.rq-banda--aberta .rq-banda__seta {
  transform: rotate(-135deg);
  transition: transform var(--rq-abrir) var(--rq-curva);
}

/* O corpo fechado ocupa altura zero e fica invisivel (visibility tira do foco e do leitor de tela depois
   de fechar). Aberto, a linha do grid vai de 0fr a 1fr. O overflow escondido fica no "interno". */
.rq-banda__corpo {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--rq-fechar) var(--rq-curva), visibility 0s linear var(--rq-fechar);
}

.rq-banda__corpo--aberto {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows var(--rq-abrir) var(--rq-curva), visibility 0s;
}

/* A folga lateral deixa o brilho do som escolhido aparecer inteiro dentro do corte. */
.rq-banda__interno {
  min-height: 0;
  margin: 0 -14px;
  padding: 0 14px;
  overflow: hidden;
}

.rq-banda__conteudo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 0 14px;
}

/* Conteudo: sobe 10px e aparece. Texto, onda e hora entram juntos; os sons entram um depois do outro
   (40 ms entre eles, a partir do quarto todos juntos): o ultimo termina em 400 ms. Ao fechar, some rapido. */
.rq-banda__conteudo > :not(.rq-sons),
.rq-banda__conteudo .rq-som-linha {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 150ms ease, transform 150ms ease;
}

.rq-banda__corpo--aberto .rq-banda__conteudo > :not(.rq-sons),
.rq-banda__corpo--aberto .rq-banda__conteudo .rq-som-linha {
  opacity: 1;
  transform: none;
  transition: opacity 240ms var(--rq-curva), transform 240ms var(--rq-curva);
}

.rq-banda__corpo--aberto .rq-banda__conteudo .rq-som-linha {
  transition-delay: calc(var(--i, 0) * 40ms);
}

.area-pagina .rq-sons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rq-som-linha {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* A linha do som (04/10/2026, ordem dele: nenhuma janela abre ao clicar). Cada som toca na propria linha:
 *   [botao redondo] [nome e frase] [contagem regressiva] [reiniciar]
 * Antes do clique a linha mostra so o nome e a frase. Quem mostra o resto e o data-estado do cartao:
 * parado, carregando, tocando, pausa, fim, erro. Nome 18px; frase 15px no celular e 16px no computador; contagem 18px. */
.area-pagina .rq-som {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 10px 14px 10px 16px;
  border: 2px solid var(--borda-cartao);
  border-radius: var(--raio-botao);
  background: var(--fundo-cartao);
  color: var(--tinta);
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.rq-som:hover {
  transform: translateX(2px);
  border-color: var(--cor);
}

.rq-som--escolhido,
.rq-som--escolhido:hover {
  border-color: var(--cor);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 18px -6px var(--cor);
}

.area-pagina .rq-som__texto {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  border-radius: 8px;
}

.area-pagina .rq-som__texto:focus-visible {
  outline: 2px solid var(--ouro-claro);
  outline-offset: 4px;
}

.area-pagina .rq-som__nome {
  color: var(--cor, var(--tinta));
  font-size: var(--rq-nome);
  font-weight: 700;
  line-height: 1.3;
}

.area-pagina .rq-som__frase {
  color: var(--tinta-suave);
  font-size: var(--rq-frase);
  line-height: 1.4;
}

.area-pagina .rq-som__horario {
  color: var(--tinta-suave);
  font-size: var(--rq-frase);
  line-height: 1.4;
}

.area-pagina .rq-som__marca {
  color: var(--ouro-claro);
  font-size: var(--rq-baixo);
  font-weight: 700;
}

.area-pagina .rq-som__marca:empty {
  display: none;
}

.area-pagina .rq-som__erro {
  color: var(--erro);
  font-size: var(--rq-frase);
  font-weight: 600;
  line-height: 1.4;
}

.area-pagina .rq-som__erro:empty {
  display: none;
}

/* O botao redondo dourado, na frente do nome. Antes do clique ele nao aparece. */
.area-pagina .rq-som__botao {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  order: -1;
  width: 44px;
  height: 44px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ouro);
  color: #0a0a14;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 0 14px -4px var(--ouro);
  transition: transform 0.2s ease, background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.area-pagina .rq-som__botao:not(:disabled):hover {
  background: var(--ouro-claro);
  transform: scale(1.06);
}

.area-pagina .rq-som__botao:focus-visible,
.area-pagina .rq-som__reiniciar:focus-visible {
  outline: 2px solid var(--ouro-claro);
  outline-offset: 3px;
}

.area-pagina .rq-som__botao:disabled {
  cursor: default;
}

.area-pagina .rq-som:not([data-estado='parado']) .rq-som__botao {
  display: inline-flex;
}

/* Um icone por vez, conforme o estado. */
.area-pagina .rq-som__botao .rq-icone {
  display: none;
  width: 22px;
  height: 22px;
}

.area-pagina .rq-som[data-estado='tocando'] .rq-icone--pausar,
.area-pagina .rq-som[data-estado='pausa'] .rq-icone--tocar,
.area-pagina .rq-som[data-estado='fim'] .rq-icone--tocar,
.area-pagina .rq-som[data-estado='erro'] .rq-icone--tocar,
.area-pagina .rq-som[data-estado='carregando'] .rq-icone--carregando {
  display: block;
}

/* Esperando o som comecar: um anel gira no lugar do icone. */
.area-pagina .rq-som[data-estado='carregando'] .rq-icone--carregando {
  animation: rq-girar 0.9s linear infinite;
}

@keyframes rq-girar {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* A contagem regressiva dos 15 minutos: numeros de largura fixa, nunca quebram. */
.area-pagina .rq-som__tempo {
  display: none;
  flex: none;
  min-width: 5ch;
  margin-left: 4px;
  color: var(--tinta);
  font-size: var(--rq-contagem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

.area-pagina .rq-som[data-estado='carregando'] .rq-som__tempo,
.area-pagina .rq-som[data-estado='tocando'] .rq-som__tempo,
.area-pagina .rq-som[data-estado='pausa'] .rq-som__tempo,
.area-pagina .rq-som[data-estado='fim'] .rq-som__tempo {
  display: block;
}

/* O botao de reiniciar: seta circular de "atualizar", redonda e discreta. */
.area-pagina .rq-som__reiniciar {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--borda-cartao);
  border-radius: 50%;
  background: transparent;
  color: var(--tinta-suave);
  font-family: inherit;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.area-pagina .rq-som__reiniciar:not(:disabled):hover {
  border-color: var(--ouro);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ouro-claro);
}

.area-pagina .rq-som__reiniciar:disabled {
  cursor: default;
  opacity: 0.5;
}

.area-pagina .rq-som__reiniciar .rq-icone {
  display: block;
  width: 24px;
  height: 24px;
}

.area-pagina .rq-som[data-estado='carregando'] .rq-som__reiniciar,
.area-pagina .rq-som[data-estado='tocando'] .rq-som__reiniciar,
.area-pagina .rq-som[data-estado='pausa'] .rq-som__reiniciar,
.area-pagina .rq-som[data-estado='fim'] .rq-som__reiniciar {
  display: inline-flex;
}

@media (max-width: 559px) {
  .rq-banda {
    padding-left: 36px;
  }

  .rq-banda__no {
    left: 4px;
  }

  .area-pagina .rq-banda__cabeca {
    gap: 8px;
    padding: 12px 12px;
  }

  .area-pagina .rq-som {
    gap: 8px;
    padding: 10px 10px 10px 12px;
  }

  .area-pagina .rq-som__tempo {
    margin-left: 0;
  }
}

/* Celular estreito: o texto nao pode ficar espremido entre os botoes. Quando a linha toca, a contagem e o
 * reiniciar descem para uma segunda fileira, embaixo do nome; o botao redondo continua na frente do nome. */
@media (max-width: 479px) {
  .area-pagina .rq-som {
    flex-wrap: wrap;
  }

  .area-pagina .rq-som__texto {
    flex: 1 1 0;
    min-width: 160px;
  }

  .area-pagina .rq-som__tempo {
    margin-left: 52px;
  }

  .area-pagina .rq-som__reiniciar {
    margin-left: auto;
  }
}

/* ---- atalho REPROGRAMACAO no canto direito da faixa do topo do Codigo FQN (04/10/2026) ----
 * Botao em pilula com contorno: a palavra "Reprogramacao" e o circulo com o icone das ondas ficam DENTRO dele.
 * Pulsa com um brilho suave (2 s, em ciclo); com movimento reduzido ele fica parado. A frase "Ouvir 15min..."
 * fica embaixo, fora do botao. No celular a pilula continua com a palavra e o icone (bloco "Codigo FQN no celular"). */

.area-pagina .fqn-reprog {
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  margin-left: auto;
  color: var(--tinta);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* A pilula: contorno, texto de 16px e o circulo do icone no fim. Altura 48px. */
.fqn-reprog__linha {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 6px 0 18px;
  border: 1.5px solid rgba(197, 139, 255, 0.75);
  border-radius: 999px;
  background: rgba(197, 139, 255, 0.1);
  box-shadow: 0 0 0 0 rgba(197, 139, 255, 0.55), 0 0 10px rgba(197, 139, 255, 0.35);
  white-space: nowrap;
  animation: fqn-reprog-pulso 2s ease-in-out infinite;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.fqn-reprog__texto {
  color: var(--tinta);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

/* Frase embaixo do botao, alinhada a direita no computador. No celular fica a esquerda, em uma linha. */
.fqn-reprog__nota {
  display: block;
  color: rgba(244, 241, 232, 0.66);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.3;
  text-align: right;
}

@media (min-width: 560px) {
  .fqn-reprog__nota {
    white-space: nowrap;
  }
}

/* Celular (ate 559px): a palavra e o icone ficam visiveis e a nota vai para a esquerda, em uma linha. Essas regras
 * estao no bloco "Codigo FQN no celular", mais abaixo (09/10/2026). */

/* Circulo do icone, dentro da pilula. */
.fqn-reprog__botao {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(197, 139, 255, 0.2);
  color: #c58bff;
}

.area-pagina .fqn-reprog:hover .fqn-reprog__linha,
.area-pagina .fqn-reprog:focus-visible .fqn-reprog__linha {
  border-color: rgba(201, 168, 76, 0.9);
  background: rgba(197, 139, 255, 0.18);
}

.area-pagina .fqn-reprog:focus-visible {
  outline: 2px solid var(--ouro-claro);
  outline-offset: 3px;
  border-radius: 999px;
}

.fqn-reprog__icone {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

/* Brilho que cresce e some em volta do botao, em ciclo de 2 s. */
@keyframes fqn-reprog-pulso {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(197, 139, 255, 0.55), 0 0 10px rgba(197, 139, 255, 0.35);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(197, 139, 255, 0), 0 0 18px rgba(197, 139, 255, 0.6);
  }
}

/* ---- movimento reduzido: nenhum efeito animado, tudo aparece de uma vez ---- */

@media (prefers-reduced-motion: reduce) {
  .rq-entra,
  .rq-entra.rq-visivel {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .rq-hero__ondas .rq-onda,
  .area-pagina .rq-som[data-estado='carregando'] .rq-icone--carregando,
  .fqn-neon__aura,
  .fqn-neon__brilho,
  .fqn-neon__pulso::before {
    animation: none;
  }

  /* Botao Reprogramacao: sem pulso. */
  .fqn-reprog__linha {
    animation: none;
  }

  /* Linha de luz parada e acesa: o pulso fica escondido, o brilho num ponto fixo. */
  .fqn-neon__aura {
    opacity: 0.65;
  }

  .fqn-neon__brilho {
    opacity: 0.8;
  }

  .fqn-neon__pulso {
    display: none;
  }

  .rq-hero__ondas .rq-onda {
    opacity: 0.25;
  }

  /* Abrir e fechar sem animacao: a altura muda de uma vez, o conteudo ja aparece inteiro. */
  .area-pagina .rq-banda__cabeca,
  .rq-banda--aberta .rq-banda__cabeca,
  .rq-banda__cabeca::before,
  .rq-banda--aberta .rq-banda__cabeca::before,
  .rq-banda__seta,
  .rq-banda--aberta .rq-banda__seta,
  .rq-banda__corpo,
  .rq-banda__corpo--aberto,
  .rq-banda__conteudo > :not(.rq-sons),
  .rq-banda__conteudo .rq-som-linha,
  .rq-banda__corpo--aberto .rq-banda__conteudo > :not(.rq-sons),
  .rq-banda__corpo--aberto .rq-banda__conteudo .rq-som-linha,
  .area-pagina .rq-som,
  .area-pagina .rq-som__botao,
  .area-pagina .rq-som__reiniciar,
  .fqn-reprog__linha {
    transition: none;
    transition-delay: 0s;
  }

  .rq-banda__cabeca:hover,
  .rq-som:hover,
  .area-pagina .rq-som__botao:not(:disabled):hover {
    transform: none;
  }

  .rq-banda__conteudo > :not(.rq-sons),
  .rq-banda__conteudo .rq-som-linha {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 24. Celular (menos de 560px), em todas as paginas da area (04/10/2026) ----------
 * Ordem do Rogerio: texto menor no celular, para caber mais na tela. Piso de 14px.
 * Tamanhos neste bloco (celular):
 *   texto normal (cartoes, caixas da linha do tempo, rotulos, botoes)  15px
 *   texto auxiliar (datas, "Rogerio leu a atividade em...", subtitulos, avisos, selos)  14px
 *   titulo da pagina  22px; titulo de cartao ou de caixa  16px
 *   campo de digitar  16px (abaixo disso o iPhone aproxima a tela sozinho)
 * Cabecalho: uma linha de no maximo 64px, logo a esquerda, "Meus dados" e "Sair" a direita; "Ola, ..." some.
 * Meus Protocolos (vitrine): no celular o cartao tem capa, nome, subtitulo, Saiba mais e valor numa linha, e o botao (09/10/2026, mais abaixo neste bloco).
 * Linha do tempo (Codigo FQN): a linha neon vai para a esquerda e todas as caixas e frases ficam a direita dela. */

@media (max-width: 559px) {
  :root {
    --fs-titulo: 1.375rem;
    --fs-nome-protocolo: 1rem;
    --fs-texto: 0.9375rem;
    --fs-botao: 0.9375rem;
    --fs-ajuda: 0.875rem;
  }

  /* Cabecalho em uma linha: logo a esquerda e botao Menu a direita, 60px de altura no total
     (5px + 48px + 6px + 1px da linha de baixo). Os links da conta ficam numa lista que abre embaixo do botao. */
  .area-topo {
    padding: 5px var(--lateral) 6px;
  }

  .area-topo__interno {
    /* nowrap permitido: cabecalho de uma linha, o logo e o botao Menu sao duas pecas curtas de largura fixa */
    flex-wrap: nowrap;
    gap: 8px;
  }

  .area-topo__logo {
    flex: 0 0 auto;
    min-height: 48px;
  }

  .area-topo__logo img {
    height: 40px;
  }

  .area-topo__saudacao {
    display: none;
  }

  .area-topo__menu {
    flex: 0 0 auto;
    gap: 0;
  }

  .area-topo__link {
    padding: 0 10px;
    font-size: 0.875rem;
  }

  .area-topo__menu-botao {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 48px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid rgba(244, 241, 232, 0.28);
    border-radius: 8px;
    background: none;
    color: var(--tinta);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* Icone de tres linhas, desenhado so com CSS (18px por 14px). */
  .area-topo__menu-botao::before {
    content: "";
    flex: 0 0 auto;
    width: 18px;
    height: 14px;
    background:
      linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) 0 50% / 100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
  }

  .area-topo--aberto .area-topo__menu-botao {
    border-color: var(--ouro-claro);
    color: var(--ouro-claro);
  }

  /* Sem nenhum link visivel (ninguem entrou ainda) nao ha o que abrir, entao o botao some. */
  .area-topo__interno:not(:has(.area-topo__lista > :not([hidden]))) .area-topo__menu-botao {
    display: none;
  }

  /* Lista aberta pelo botao: fundo opaco (nada do fundo aparece atras do texto), uma linha de 48px por link. */
  .area-topo__lista {
    display: none;
    position: absolute;
    top: 100%;
    right: var(--lateral);
    z-index: 110;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 200px;
    max-width: calc(100vw - (2 * var(--lateral)));
    padding: 4px;
    background: #14142a;
    border: 1px solid rgba(231, 205, 127, 0.4);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  }

  .area-topo--aberto .area-topo__lista {
    display: flex;
  }

  /* Na lista do celular os icones ganham o nome ao lado (Meus Protocolos, Pagamentos). */
  .area-topo__lista .area-topo__icone {
    justify-content: flex-start;
    gap: 12px;
  }

  .area-topo__lista .area-topo__rotulo {
    display: inline;
  }

  .area-topo__lista .area-topo__link {
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
  }

  /* ----- Cartao de Meus Protocolos no celular (09/10/2026): capa, nome, subtitulo, Saiba mais e valor, botao.
     Duas colunas: a linha 4 tem o Saiba mais a esquerda e o valor a direita; a descricao some (o Saiba mais a leva).
     Cartao sem subtitulo, sem Saiba mais ou sem valor nao deixa buraco: linha sem item mede zero e as folgas
     ficam nos proprios itens. Meta: cartao com no maximo 400px em 352px de tela. ----- */
  .area-protocolo {
    display: grid;
    grid-row: auto;
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 0;
    align-content: start;
    padding: 16px;
  }

  .area-protocolo__face,
  .area-protocolo__textos,
  .area-protocolo__cabeca {
    display: contents;
  }

  .area-protocolo__capa-caixa {
    grid-column: 1 / -1;
    grid-row: 1;
    height: 168px;
    margin-bottom: 12px;
  }

  .area-protocolo__nome {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
  }

  .area-protocolo__subtitulo {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.35;
  }

  .area-protocolo__saiba {
    grid-column: 1;
    grid-row: 4;
    align-self: end;
    min-height: 48px;
    padding: 0 12px 0 0;
    font-size: 0.9375rem;
    font-weight: 500;
  }

  .area-protocolo .area-protocolo__valor {
    grid-column: 2;
    grid-row: 4;
    align-self: end;
    justify-self: end;
    column-gap: 4px;
    margin-top: 0;
    padding-bottom: 12px;
    min-width: 0;
  }

  /* 14/10/2026: o preco nao fica mais numa linha so sem quebra (isso empurrava "De R$97,00 por apenas" para fora do
   * cartao). A linha "De R$97,00 por apenas" ocupa uma linha inteira acima e "R$49,90 por mes" vem logo abaixo. */
  .area-protocolo .area-protocolo__valor .area-protocolo__preco-de {
    flex: 0 0 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Sem Saiba mais, o valor ocupa a linha toda, do lado esquerdo, e nao deixa um vazio ao lado. */
  .area-protocolo:not([data-com-saiba-mais]) .area-protocolo__valor {
    grid-column: 1 / -1;
    justify-self: start;
    padding-top: 8px;
    padding-bottom: 0;
  }

  .area-protocolo__preco {
    font-size: 0.9375rem;
    font-weight: 700;
  }

  .area-protocolo__periodo {
    font-size: 0.875rem;
  }

  .area-protocolo__descricao {
    display: none;
  }

  .area-protocolo__acoes {
    grid-column: 1 / -1;
    grid-row: 5;
    margin-top: 8px;
  }

  .area-protocolo__acoes .area-botao {
    min-height: 52px;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0;
  }

  /* Sem subgrid a cabeca nao precisa de folga embaixo (a regra da secao 14 so vale com subgrid). */
  .area-protocolo:not([data-com-saiba-mais]):not([data-em-breve]) .area-protocolo__cabeca {
    padding-bottom: 0;
  }

  /* Campo de digitar fica em 16px */
  .area-campo__entrada {
    font-size: 1rem;
  }

  /* ----- Codigo FQN no celular (09/10/2026): linha neon estreita, cabecalho em uma linha, tamanhos do PADRAO-MOBILE ----- */
  .fqn {
    gap: 12px;
  }

  .fqn__cabeca {
    gap: 8px;
  }

  .fqn__titulo {
    font-size: 1.375rem;
    font-weight: 700;
  }

  .fqn__subtitulo {
    margin-top: -4px;
    font-size: 0.9375rem;
  }

  /* Cabecalho em uma linha: seta "Voltar" a esquerda e a pilula "Reprogramacao" a direita. A nota fica embaixo,
   * a esquerda, em uma linha (22px de espaco: 4px de vao mais 18px da linha de 14px). */
  .fqn__faixa {
    position: relative;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-bottom: 22px;
  }

  .fqn__voltar {
    height: 48px;
    padding: 0 16px;
    letter-spacing: 0;
    /* nowrap permitido: botao de uma palavra (Voltar) ou so a seta, nunca cresce */
    white-space: nowrap;
  }

  .fqn__voltar-longo {
    display: none;
  }

  .fqn__voltar-seta {
    display: inline;
  }

  .fqn__voltar-curto {
    display: inline;
  }

  .fqn-reprog__linha {
    width: auto;
    height: 48px;
    padding: 0 6px 0 16px;
  }

  .fqn-reprog__texto {
    display: inline;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0;
  }

  .fqn-reprog__nota {
    position: absolute;
    bottom: 0;
    left: 0;
    max-width: none;
    font-size: 0.875rem;
    line-height: 18px;
    text-align: left;
  }

  /* Linha neon: 24px no total com o desfoque (aura 14px + 2 x 5px). Centro a 12px da margem do trilho. */
  .fqn-neon {
    left: 12px;
  }

  .fqn-neon__aura {
    --fqn-camada: 14px;
    filter: blur(5px);
  }

  .fqn-neon__brilho {
    --fqn-camada: 8px;
    filter: blur(3px);
  }

  .fqn-neon__halo {
    --fqn-camada: 5px;
    filter: blur(1px);
  }

  .fqn-neon > .fqn-neon__nucleo {
    --fqn-camada: 2px;
    box-shadow: 0 0 3px #fff6d6, 0 0 1px #ffffff;
  }

  .fqn-neon > .fqn-neon__pulso {
    --fqn-camada: 4px;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9));
  }

  /* O texto comeca a 32px: 8px depois do fim da luz. */
  .fqn-item {
    padding-left: 32px;
  }

  .fqn-item--direita,
  .fqn-item--esquerda {
    align-items: flex-start;
    text-align: left;
  }

  .fqn-item .fqn-quadro {
    width: 100%;
    max-width: none;
    padding: 12px 14px;
  }

  .fqn-item--quadro:not([data-fqn-linha='futura'])::before {
    top: 12px;
    left: 12px;
  }

  .fqn-item--quadro:not([data-fqn-linha='futura']) .fqn-quadro::before {
    top: 17px;
    right: 100%;
    width: 20px;
    height: 2px;
    background: var(--fqn-ponto);
    box-shadow: 0 0 6px var(--fqn-ponto);
  }

  .fqn-marca {
    max-width: 100%;
    padding: 0;
    font-size: 0.875rem;
  }

  /* A frase de data fica 4px abaixo do quadro (o espaco do item e 8px). */
  .fqn-quadro + .fqn-marca {
    margin-top: -4px;
  }

  /* Frase solta do paciente: texto a 32px da borda, linha em 12px; tracinho e ponto na altura da 1a linha. */
  .fqn-item--frase {
    width: auto;
    align-items: flex-start;
    text-align: left;
  }

  .fqn-item--frase .fqn-marca {
    font-size: 0.9375rem;
  }

  .fqn-item--frase::before {
    top: 9px;
    left: 13px;
    width: 19px;
    margin-top: 0;
  }

  .fqn-item--frase::after {
    top: 4px;
    left: 12px;
    margin: 0 0 0 -6px;
  }

  /* A pilula "Hoje" comeca na coluna do texto (depois da luz da linha neon), como os quadros (11/10/2026). */
  .fqn-hoje {
    justify-content: flex-start;
    gap: 10px;
    margin-left: 32px;
    font-size: 0.875rem;
  }

  .fqn-hoje::before {
    display: none;
  }

  .fqn-hoje__texto {
    min-height: 32px;
    padding: 3px 14px;
    font-size: 0.875rem;
  }

  .area-pagina .fqn-linha {
    gap: 12px;
  }

  .fqn-quadro {
    padding: 12px 14px;
  }

  .fqn-quadro__titulo {
    font-size: 1rem;
    font-weight: 700;
  }

  .fqn-quadro__selo,
  .fqn-quadro__quando,
  .fqn-resposta__aviso,
  .fqn-aviso-relogio {
    font-size: 0.875rem;
  }

  .fqn-quadro__acao,
  .fqn-quadro__atividade {
    font-size: 0.9375rem;
    letter-spacing: 0;
  }

  /* Quadro da onda no topo: titulo e texto de 16px. O seletor e mais forte porque a regra base vem depois deste bloco. */
  .fqn-onda-topo .fqn-onda-topo__quadro {
    padding: 12px 14px;
  }

  .fqn-onda-topo .fqn-onda-topo__titulo,
  .fqn-onda-topo .fqn-onda-topo__texto {
    font-size: 1rem;
  }

  /* ----- Reprogramacao ----- */
  .area-pagina .rq {
    --rq-titulo: 1.375rem;
    --rq-secao: 1.25rem;
    --rq-texto: 1rem;
    --rq-lead: 1rem;
    --rq-freq: 1rem;
    --rq-baixo: 0.875rem;
    --rq-preco: 1.75rem;
    --rq-botao: 0.9375rem;
  }

  /* Cabecalho da frequencia mais baixo no celular (11/10/2026): nome em 16px e menos folga; antes chegava a 117px. */
  .area-pagina .rq-banda__cabeca {
    gap: 10px;
    min-height: 56px;
    padding: 10px 12px;
  }
}

/* Telefone muito estreito (ate 351px): a nota "Ouvir 15min..." pode nao caber em uma linha. Ela quebra em duas e a faixa
 * ganha o espaco das duas linhas (2 x 18px mais 4px de vao). Assim nada sobrepoe o botao nem cria rolagem de lado. */
@media (max-width: 351px) {
  .fqn__faixa {
    padding-bottom: 40px;
  }

  .fqn-reprog__nota {
    max-width: 100%;
    white-space: normal;
  }
}

/* ---- Reprogramacao: texto de abertura da area de quem contratou (04/10/2026) ----
 * Texto no computador 17px; no celular 15px. Largura de leitura de 65 caracteres. Cada paragrafo e um <p>. */
.rq-intro {
  max-width: 65ch;
  margin-top: 8px;
  color: var(--tinta-suave);
}

.area-pagina .rq-intro__p {
  margin: 0 0 16px;
  font-size: 1.0625rem;
  line-height: 1.6;
}

.area-pagina .rq-intro__destaque {
  margin: 24px 0;
  color: var(--tinta);
  font-weight: 800;
}

.area-pagina .rq-intro__fecho {
  margin: 0 0 8px;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tinta);
}

.rq-intro__linha {
  display: block;
}

@media (max-width: 559px) {
  .area-pagina .rq-intro__p,
  .area-pagina .rq-intro__fecho {
    font-size: 0.9375rem;
  }
}

/* ---------- 24. Atividades do Codigo FQN: Termometro, Quociente de Positividade e 108 vezes EU SOU PROSPERO ----------
 * Tamanhos (celular / computador), conforme a secao 10 do PROJETO-ATIVIDADES-1-3-4:
 *   titulo da abertura 20 / 24px; texto da abertura 16 / 18px; titulo das telas de contar e escrever 16 / 20px
 *   nome do cartao 16px; numero do cartao 22px; sinais - e + 24px; titulo de cada coluna 18px; total fixo 18px
 *   QP 32px; conta e faixa 18px; contador das 108 linhas 24px; numero da linha 16px; texto digitado 16px
 *   frase de erro de linha 14px (unico texto abaixo de 16px); aviso de sair 18px; botoes 16px
 * Alturas: - e + 48px; Fechar 48px; botoes de rodape 52px (largura toda no celular; 220px ou mais a direita no computador);
 * linhas 48px; botoes do aviso 52px com 12px entre eles.
 * Rolagem: so a lista de cartoes, as 108 linhas e o texto das aberturas rolam; barras, contador e botao ficam presos. */

.fqn-termo__rodape .fqn-botao {
  min-height: 52px;
}

.fqn-termo__texto {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.fqn-termo__paragrafo--vazio {
  min-height: 0;
  height: 8px;
}

.fqn-passo--desligado {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Cores das duas colunas do Quociente */
.fqn-qp--neg {
  --fqn-cor: #ff8f80;
}

.fqn-qp--pos {
  --fqn-cor: #5ed38a;
}

.fqn-qp__fixo,
.fqn-pr__fixo {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--borda-cartao);
  border-radius: 14px;
  background: rgba(244, 241, 232, 0.06);
}

.fqn-qp__total {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.fqn-qp__total-rotulo {
  flex: none;
  width: 112px;
  color: var(--fqn-cor);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

.fqn-qp__trilho,
.fqn-pr__trilho {
  flex: 1 1 auto;
  height: 12px;
  border-radius: 6px;
  background: rgba(244, 241, 232, 0.12);
  overflow: hidden;
}

.fqn-qp__barra {
  width: 0;
  height: 100%;
  border-radius: 6px;
  background: var(--fqn-cor);
  transition: width 0.25s ease;
}

.fqn-qp__total-numero {
  flex: none;
  min-width: 32px;
  color: var(--fqn-cor);
  font-size: 1.125rem;
  font-weight: 800;
  text-align: right;
}

.fqn-qp__corpo,
.fqn-pr__corpo {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.fqn-qp__grupo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fqn-qp__grupo-titulo {
  margin: 0;
  padding-left: 10px;
  border-left: 4px solid var(--fqn-cor);
  color: var(--fqn-cor);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.3;
}

.fqn-qp__cartao {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 4px 6px 4px 12px;
  border: 1px solid rgba(244, 241, 232, 0.16);
  border-left: 4px solid var(--fqn-cor);
  border-radius: 14px;
  background: rgba(244, 241, 232, 0.06);
}

.fqn-qp__nome {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--tinta);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.fqn-qp__numero {
  flex: none;
  min-width: 36px;
  color: var(--tinta);
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.fqn-qp__passo {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border: 2px solid var(--fqn-cor);
  border-radius: 12px;
  background: transparent;
  color: var(--fqn-cor);
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.fqn-qp__passo:active {
  background: rgba(244, 241, 232, 0.14);
}

.fqn-qp__passo:focus-visible {
  outline: 3px solid var(--ouro-claro);
  outline-offset: 3px;
}

/* Resultado: meia-lua, QP, conta e faixa */
.fqn-qp__resultado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.fqn-qp__lua {
  display: block;
  width: 100%;
  max-width: 335px;
  height: auto;
}

.fqn-qp__lua text {
  fill: var(--tinta);
  font-family: inherit;
  font-weight: 700;
}

.fqn-qp__qp {
  margin: 0;
  color: var(--ouro-claro);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
}

.fqn-qp__conta {
  margin: 0;
  color: var(--tinta);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
}

.fqn-qp__faixa {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.35;
}

/* Resposta ja enviada: os 14 numeros em duas colunas */
.fqn-qp__colunas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  margin-top: 16px;
}

.fqn-qp__coluna {
  min-width: 0;
}

.fqn-qp__coluna .fqn-janela__subtitulo {
  margin: 0 0 6px;
  font-size: 1.125rem;
}

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

.fqn-qp__lista-item {
  padding: 6px 0;
  border-bottom: 1px solid rgba(244, 241, 232, 0.12);
  color: var(--tinta);
  font-size: 1rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* 108 vezes EU SOU PROSPERO */
.fqn-pr__contador {
  margin: 0;
  color: var(--ouro-claro);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.fqn-pr__barra {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--ouro), var(--ouro-claro));
  transition: width 0.2s ease;
}

.fqn-pr__corpo {
  gap: 6px;
}

.fqn-pr__linha {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  scroll-margin: 12px;
}

.fqn-pr__n {
  flex: none;
  width: 44px;
  min-height: 48px;
  color: var(--tinta-suave);
  font-size: 1rem;
  font-weight: 700;
  line-height: 48px;
  text-align: right;
}

.fqn-pr__lado {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fqn-pr__campo {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 48px;
  min-height: 48px;
  padding: 0 12px;
  border: 2px solid var(--borda-campo);
  border-radius: 12px;
  background: rgba(244, 241, 232, 0.06);
  color: var(--tinta);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  -webkit-touch-callout: none;
}

.fqn-pr__campo:focus {
  outline: none;
  border-color: var(--ouro-claro);
  box-shadow: 0 0 0 3px rgba(231, 205, 127, 0.25);
}

.fqn-pr__campo--certo {
  border-color: #5ed38a;
}

.fqn-pr__campo--errado {
  border-color: var(--erro);
  background: rgba(255, 143, 128, 0.1);
}

.fqn-pr__erro {
  margin: 0;
  color: var(--erro);
  font-size: 0.875rem;
  line-height: 1.3;
}

.fqn-pr__erro:empty {
  display: none;
}

/* Com o teclado aberto o botao CONCLUIR some, para sobrar espaco para as linhas */
.fqn-janela--teclado .fqn-pr__rodape {
  display: none;
}

.fqn-janela--teclado .fqn-janela__painel {
  gap: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Aviso "Se sair agora, o que voce escreveu sera perdido." */
.fqn-aviso {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.72);
}

.fqn-aviso__caixa {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 420px;
  padding: 20px;
  border: 2px solid var(--ouro);
  border-radius: 20px;
  background: #1a1a2b;
}

.fqn-aviso__texto {
  margin: 0;
  color: var(--tinta);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
}

.fqn-aviso__botoes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fqn-aviso__botao {
  width: 100%;
  min-height: 52px;
  font-size: 1rem;
}

/* Aviso do Mapa das Crencas antes dos 30 dias (15/10/2026): titulo, texto corrido, os dias que faltam e ENTENDI. Tamanhos (celular e
   computador): titulo 20px bold; texto 16px; dias 16px bold; botao 16px com 52px de altura. A caixa nunca passa da janela: se o texto
   nao couber num celular muito baixo, so ela rola (max-height). Nenhum texto fica fora da caixa (overflow-wrap). */
.fqn-aviso__caixa--refazer {
  max-height: 100%;
  overflow-y: auto;
}

.fqn-aviso__titulo {
  margin: 0;
  color: var(--ouro);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.fqn-aviso__texto--corrido {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.fqn-aviso__dias {
  margin: 0;
  color: var(--tinta);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .fqn-termo__rodape.fqn-pr__rodape,
  .fqn-termo__rodape.fqn-qp__rodape {
    justify-content: flex-end;
  }

  .fqn-qp__lua {
    max-width: 420px;
  }

  .fqn-qp__colunas {
    gap: 24px;
  }

  .fqn-aviso__botoes {
    flex-direction: row;
    justify-content: flex-end;
  }

  .fqn-aviso__botao {
    width: auto;
    min-width: 180px;
  }
}

/* ---------- 25. Lembrete de renovacao acima de "Meus Protocolos" (PROJETO-LEMBRETE-RENOVACAO.md, 06/10/2026) ----------
 * Um lembrete por protocolo em aberto. Tamanhos (celular / computador): frase 16px / 18px; nome do protocolo na
 * frase 16px / 18px (negrito); botao RENOVAR 16px com 48px de altura; X vermelho com area de toque 48x48px.
 * Sem caixa de rolagem. No celular o botao ocupa a largura toda; no computador 220 a 280px, ao lado da frase. */

.lembretes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 32px;
}

.lembretes[hidden] {
  display: none;
}

.area-pagina .lembretes__lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lembrete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: start;
  gap: 8px;
  padding: 12px 8px 16px 16px;
  border: 1px solid var(--ouro);
  border-radius: var(--raio-botao);
  background: var(--fundo-cartao);
}

.lembrete--vencido {
  border-color: #ff4d4d;
}

.lembrete__frase {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  margin: 0;
  color: var(--tinta);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.lembrete__nome {
  color: var(--ouro);
  font-weight: 700;
}

.lembrete__fechar {
  grid-column: 2;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #ff4d4d;
  font-family: inherit;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.lembrete__fechar:focus-visible {
  outline: 2px solid #ff4d4d;
  outline-offset: 2px;
}

.lembrete__botao {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  min-height: 48px;
}

.lembretes__mensagem:empty {
  display: none;
}

.lembretes__mensagem {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .lembrete {
    grid-template-columns: minmax(0, 1fr) auto 48px;
    align-items: center;
    gap: 16px;
    padding: 12px 12px 12px 20px;
  }

  .lembrete__frase {
    font-size: 1.125rem;
  }

  .lembrete__botao {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    min-width: 220px;
    max-width: 280px;
  }

  .lembrete__fechar {
    grid-column: 3;
  }
}

/* ---------- 17c. Campo da Onda fixo no topo e texto da atividade em caixas (07/10/2026) ----------
 * Tamanhos (celular / computador): texto das caixas 16 / 17px; rotulo em negrito e sublinhado, mesmo tamanho;
 * subtitulo 18 / 20px; titulo da onda 16 / 18px; texto enviado 16 / 17px; legenda, aviso, erro e botoes 16px.
 * Campo e botoes com no minimo 48px de altura. Sem caixa de rolagem propria: a janela de leitura rola inteira. */

/* Atividades ja realizadas ainda sendo cadastradas (14/10/2026): a linha do inicio e o aviso sao itens da linha do tempo,
   la embaixo (frase solta do paciente, como "leu a atividade"). O aviso so ganha negrito; o nome vem do cadastro e a
   quebra de linha (overflow-wrap) ja vem de .fqn-marca. Sem enfeite e sem texto por cima de decoracao. */
.fqn-marca--aviso {
  font-weight: 600;
}

/* Campo da Onda: abaixo da Reprogramacao e acima da linha do tempo, na largura da tela no celular. */
.fqn-onda-topo {
  --fqn-azul: #4fb3ff;
  --fqn-azul-fundo: rgba(79, 179, 255, 0.1);
  --fqn-azul-brilho: rgba(79, 179, 255, 0.4);
  display: flex;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
}

.fqn-onda-topo:empty {
  display: none;
}

.fqn-onda-topo__quadro {
  width: 100%;
  max-width: 560px;
}

.fqn-onda-topo__titulo {
  margin: 0;
  color: var(--fqn-azul);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.4;
}

.fqn-onda-topo__texto {
  margin: 0;
  color: var(--tinta);
  font-size: 1rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Texto da atividade: paragrafos, subtitulos, listas e caixas. */
.fqn-texto-atividade {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 56ch;
  min-width: 0;
  color: var(--tinta);
  font-size: 1rem;
  line-height: 1.65;
}

.fqn-texto__linha {
  margin: 0;
  overflow-wrap: anywhere;
}

.fqn-texto__rotulo {
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fqn-texto__subtitulo {
  margin: 12px 0 0;
  color: var(--ouro-claro);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.4;
}

.fqn-texto__lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding-left: 1.4em;
}

.fqn-texto__item {
  padding-left: 4px;
  overflow-wrap: anywhere;
}

.fqn-caixa {
  --fqn-caixa-barra: #4fb3ff;
  --fqn-caixa-fundo: rgba(79, 179, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-left: 4px;
  padding: 16px;
  border-left: 5px solid var(--fqn-caixa-barra);
  border-radius: 12px;
  background: var(--fqn-caixa-fundo);
  min-width: 0;
}

.fqn-caixa--2 {
  --fqn-caixa-barra: #c9a84c;
  --fqn-caixa-fundo: rgba(201, 168, 76, 0.13);
}

.fqn-caixa--3 {
  --fqn-caixa-barra: #a78bfa;
  --fqn-caixa-fundo: rgba(167, 139, 250, 0.14);
}

.fqn-caixa--4 {
  --fqn-caixa-barra: #4fd1c5;
  --fqn-caixa-fundo: rgba(79, 209, 197, 0.11);
}

/* Janela de leitura: o fundo escuro inteiro rola com a pagina, o cabecalho fica preso no topo. */
.fqn-janela--leitura {
  display: block;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.fqn-janela--leitura .fqn-janela__painel {
  height: auto;
  min-height: 100%;
}

.fqn-janela--leitura .fqn-janela__cabeca {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 8px 0;
  background: #11111d;
  border-bottom: 1px solid var(--borda-cartao);
}

.fqn-janela--leitura .fqn-janela__corpo {
  flex: 0 0 auto;
  overflow: visible;
}

/* Atividade de TEXTO na janela de leitura (11/10/2026): o texto usa a largura toda da janela (sem a coluna de 56ch que
 * deixava um buraco de ~400px a direita). Os cartoes coloridos vao ate a direita, com um recuo a esquerda. */
.fqn-janela--leitura .fqn-texto-atividade {
  max-width: none;
}

.fqn-janela--leitura .fqn-caixa {
  margin-left: 12px;
}

@media (min-width: 768px) {
  .fqn-janela--leitura .fqn-caixa {
    margin-left: 24px;
  }
}

.fqn-janela__rodape {
  display: flex;
  justify-content: flex-start;
  padding-top: 8px;
}

.fqn-janela__fechar-fim {
  min-height: 48px;
  min-width: 96px;
  font-size: 1rem;
}

@media (min-width: 768px) {
  .fqn-onda-topo__titulo {
    font-size: 1.125rem;
  }

  .fqn-onda-topo__texto,
  .fqn-texto-atividade {
    font-size: 1.0625rem;
  }

  .fqn-texto__subtitulo {
    font-size: 1.25rem;
  }

  .fqn-caixa {
    padding: 20px 24px;
    margin-left: 16px;
  }

  .fqn-janela--leitura .fqn-janela__painel {
    height: auto;
    min-height: 92vh;
    min-height: 92dvh;
    margin: 4vh auto;
  }

  /* Mapa das Crencas Limitantes (13/10/2026): o conteudo e curto, entao a janela tem a altura dele e fica no meio da tela.
   * So passa de 92% da tela se o conteudo passar disso, e ai o painel rola por dentro (cabecalho preso no topo). */
  .fqn-janela--mapa {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .fqn-janela--mapa .fqn-janela__painel {
    height: auto;
    min-height: 0;
    max-height: 92vh;
    max-height: 92dvh;
    margin: 0 auto;
    overflow-y: auto;
  }
}

/* ---------- 25. Codigo FQN no celular, segunda revisao (11/10/2026, ordem do Rogerio) ----------
 * 1. Cabecalho: "Voltar" e a pilula "Reprogramacao" SEMPRE na mesma linha (antes a pilula pulava para baixo no S25).
 *    A nota "Ouvir 15min..." e subtexto: 14px (o minimo do PADRAO-MOBILE), cor suave, uma linha. Espaco antes do titulo "Codigo FQN".
 * 2. Onda da semana: uma caixa so (sem o botao com borda dentro da caixa com borda); o botao ocupa a caixa inteira, com o
 *    texto centralizado. Tocar abre um POPUP (codigofqn-tela.js, abrirPopupDaOnda) - nada abre para baixo no celular.
 * 3. PADRAO UNICO DAS JANELAS (todas as atividades, a onda e as respostas): titulo 17px/700 no celular e 20px no
 *    computador, sem quebrar palavra no meio; FECHAR discreto (14px, largura do texto); texto com 1,6 de entrelinha e
 *    14px entre paragrafos; o texto da abertura rola por dentro e o botao COMECAR nunca fica por cima dele. */
@media (max-width: 559px) {
  .fqn__faixa {
    /* nowrap permitido: Voltar e a pilula Reprogramacao ficam sempre na mesma linha, as duas sao curtas e de largura fixa */
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 24px;
  }

  .fqn__voltar {
    flex: 0 0 auto;
    padding: 0 14px;
  }

  .fqn-reprog {
    flex: 0 1 auto;
    min-width: 0;
  }

  .fqn-reprog__linha {
    gap: 8px;
    padding: 0 4px 0 12px;
  }

  .fqn-reprog__texto {
    font-size: 0.875rem;
  }

  .fqn-reprog__botao {
    width: 34px;
    height: 34px;
  }

  .fqn-reprog__nota {
    max-width: 100%;
    color: var(--tinta-suave);
    font-size: 0.875rem;
    line-height: 18px;
  }

  .area-pagina .fqn__titulo {
    margin-top: 16px;
  }
}

/* Telefone muito estreito (ate 351px): os dois botoes continuam na mesma linha; a nota pode quebrar em duas. */
@media (max-width: 351px) {
  .fqn__faixa {
    padding-bottom: 42px;
  }

  .fqn-reprog__texto {
    font-size: 0.875rem;
  }

  .fqn-reprog__nota {
    white-space: normal;
  }
}

/* Onda da semana: o botao e a caixa (uma borda so), texto centralizado, seta para a direita (abre popup). */
.fqn-onda-topo .fqn-onda-topo__quadro[data-fqn-onda='campo'] {
  padding: 0;
}

.fqn-onda-topo__quadro[data-fqn-onda='campo'] .fqn-onda__abrir {
  display: flex;
  align-self: stretch;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: inherit;
  background: none;
  box-shadow: none;
}

.fqn-onda-topo__quadro[data-fqn-onda='campo'] .fqn-onda__abrir::after,
.fqn-onda-topo__quadro[data-fqn-onda='campo'] .fqn-onda__abrir[aria-expanded='true']::after {
  transform: rotate(-45deg);
}

/* Padrao unico das janelas. */
.fqn-janela__cabeca {
  align-items: center;
}

.fqn-janela__titulo,
.fqn-janela__titulo.fqn-janela__titulo--inicio {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  overflow-wrap: break-word;
  word-break: normal;
  -webkit-hyphens: none;
  hyphens: none;
}

/* FECHAR vira um X redondo de 44px (o nome "Fechar janela" continua no aria-label): o titulo ganha a largura. */
.fqn-janela__cabeca .fqn-janela__fechar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  font-size: 0;
  letter-spacing: 0;
}

/* O X e desenhado com duas barras (sem caractere de fonte), centrado no meio do circulo em qualquer aparelho. */
.fqn-janela__cabeca .fqn-janela__fechar {
  position: relative;
}

.fqn-janela__cabeca .fqn-janela__fechar::before,
.fqn-janela__cabeca .fqn-janela__fechar::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

.fqn-janela__cabeca .fqn-janela__fechar::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.fqn-termo__mensagem {
  gap: 14px;
}

/* O texto da abertura rola por dentro (.fqn-termo__texto): a ultima linha sobe ate 24px acima do botao e a borda de baixo
 * esmaece, para ficar claro que ha mais texto e nada parecer escondido atras do COMECAR. */
.fqn-termo__texto {
  padding-bottom: 24px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
}

.fqn-termo__paragrafo,
.fqn-termo__abertura {
  line-height: 1.6;
  overflow-wrap: break-word;
}

.fqn-janela--onda .fqn-onda__corpo {
  gap: 14px;
}

@media (min-width: 768px) {
  .fqn-janela__titulo,
  .fqn-janela__titulo.fqn-janela__titulo--inicio {
    font-size: 1.25rem;
  }
}

/* Cartao de protocolo LIBERADO (11/10/2026): no lugar do preco, o link discreto "Detalhes do plano" (pagina Pagamentos). */
.area-protocolo .area-protocolo__plano {
  display: inline-flex;
  align-items: center;
  align-self: start;
  justify-self: start;
  min-height: 44px;
  color: var(--tinta-suave);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.area-protocolo .area-protocolo__plano:hover,
.area-protocolo .area-protocolo__plano:focus-visible {
  color: var(--tinta);
}

@media (max-width: 559px) {
  .area-protocolo .area-protocolo__plano {
    align-self: baseline;
    justify-self: end;
    min-height: 48px;
    font-size: 0.875rem;
  }
}

/* Texto curto do celular nos cartoes NAO liberados de Meus Protocolos (11/10/2026, pedido do Rogerio: "a pessoa nao vai
 * entender o que e cada card"). No computador fica escondido (la aparece a descricao completa). No celular entra na
 * linha 4, embaixo do subtitulo; Saiba mais e valor descem para a 5 e o botao para a 6. Nunca cortado: o cartao cresce. */
.area-protocolo__descricao-curta {
  display: none;
}

@media (max-width: 559px) {
  .area-protocolo__descricao-curta {
    display: block;
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: 8px;
    color: var(--tinta-suave);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.45;
  }

  .area-protocolo__saiba,
  .area-protocolo .area-protocolo__valor {
    grid-row: 5;
  }

  .area-protocolo__acoes {
    grid-row: 6;
  }
}

/* Icone "?" no canto direito da caixa da Onda da semana (11/10/2026): circulo de 28px com o "?", area de toque de 44px.
 * O botao "Onda da semana" ganha folga dos dois lados para o texto continuar centralizado. */
.fqn-onda-topo__quadro[data-fqn-onda='campo'] {
  position: relative;
}

.fqn-onda-topo__quadro[data-fqn-onda='campo'] .fqn-onda__abrir {
  padding: 0 56px;
}

.fqn-onda__ajuda {
  position: absolute;
  top: 50%;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fqn-azul, #4fb3ff);
  font: inherit;
  font-size: 0;
  cursor: pointer;
  transform: translateY(-50%);
  -webkit-tap-highlight-color: transparent;
}

.fqn-onda__ajuda::before {
  content: "?";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}

.fqn-onda__ajuda:focus-visible {
  outline: 2px solid var(--fqn-azul, #4fb3ff);
  outline-offset: -4px;
  border-radius: 50%;
}

/* Janelinha da explicacao: caixa pequena no meio da tela, fundo escurecido. */
.fqn-dica {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(8, 8, 18, 0.8);
}

.fqn-dica__caixa {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 420px;
  max-height: 100%;
  overflow-y: auto;
  padding: 20px;
  border: 1px solid rgba(79, 179, 255, 0.55);
  border-radius: 16px;
  background: #11111d;
  box-shadow: 0 0 24px rgba(79, 179, 255, 0.25), 0 20px 50px rgba(0, 0, 0, 0.6);
}

.area-pagina .fqn-dica__titulo,
.fqn-dica__titulo {
  margin: 0;
  color: #4fb3ff;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
}

.area-pagina .fqn-dica__texto,
.fqn-dica__texto {
  margin: 0;
  color: var(--tinta);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.fqn-dica__fechar {
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
}

/* Linha do diario: nome do som em negrito, data na linha de baixo (11/10/2026). */
.fqn-marca__som {
  font-weight: 700;
}

/* Cartao liberado com mensalidade vencendo ou em aberto: "Renovação pendente" em dourado (sem vermelho). */
.area-protocolo .area-protocolo__plano--pendente {
  color: var(--ouro-claro);
}

/* ---------- 26. Meus Protocolos e janelas, terceira revisao (11/10/2026, ordem do Rogerio) ----------
 * 1. Botao pequeno no CANTO INFERIOR ESQUERDO DA CAPA (dentro do quadro do planeta): "Saiba mais" no cartao nao
 *    liberado; "Detalhes do plano" no liberado (abre a janela .area-detalhes). Nunca quebra linha.
 * 2. Janela DETALHES DO PLANO: cartao flutuante no meio da tela, fundo escurecido.
 * 3. Janela da Onda da semana: cartao flutuante (nao ocupa a tela inteira), para ficar claro que e uma janela.
 * 4. Codigo FQN no celular: Voltar so com a seta (48px); "Ouvir 15min..." embaixo da pilula Reprogramacao, a direita. */
.area-protocolo .area-protocolo__capa-caixa .area-protocolo__canto {
  position: absolute;
  z-index: 2;
  left: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  max-width: calc(100% - 16px);
  margin: 0;
  padding: 0 12px;
  border: 1px solid rgba(201, 168, 76, 0.75);
  border-radius: 999px;
  background: rgba(10, 10, 20, 0.85);
  color: var(--ouro-claro);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

/* Area de toque de 44px sem aumentar o desenho. */
.area-protocolo .area-protocolo__capa-caixa .area-protocolo__canto::before {
  content: "";
  position: absolute;
  inset: -5px;
}

.area-protocolo .area-protocolo__capa-caixa .area-protocolo__canto:hover,
.area-protocolo .area-protocolo__capa-caixa .area-protocolo__canto:focus-visible {
  border-color: var(--ouro-claro);
  color: var(--tinta);
}

.area-protocolo .area-protocolo__capa-caixa .area-protocolo__detalhes--pendente {
  border-color: var(--ouro-claro);
  box-shadow: 0 0 10px rgba(231, 205, 127, 0.45);
}

/* Janela DETALHES DO PLANO. */
.area-detalhes {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(8, 8, 18, 0.8);
}

.area-detalhes__caixa {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 440px;
  max-height: 100%;
  overflow-y: auto;
  padding: 20px;
  border: 1px solid rgba(201, 168, 76, 0.55);
  border-radius: 16px;
  background: #11111d;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  color: var(--tinta);
}

.area-pagina .area-detalhes__titulo,
.area-detalhes__titulo {
  margin: 0;
  color: var(--ouro-claro);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

.area-pagina .area-detalhes__subtitulo,
.area-detalhes__subtitulo {
  margin: -4px 0 0;
  color: var(--tinta-suave);
  font-size: 0.875rem;
  line-height: 1.4;
}

.area-pagina .area-detalhes__texto,
.area-detalhes__texto {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.area-detalhes__plano {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--borda-cartao);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.area-pagina .area-detalhes__rotulo,
.area-detalhes__rotulo {
  margin: 0;
  color: var(--tinta-suave);
  font-size: 0.875rem;
}

.area-pagina .area-detalhes__valor,
.area-detalhes__valor {
  margin: 0;
  color: var(--ouro-claro);
  font-size: 1rem;
  font-weight: 700;
}

.area-pagina .area-detalhes__situacao,
.area-detalhes__situacao {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.area-detalhes__situacao--pendente {
  color: var(--ouro-claro);
  font-weight: 600;
}

.area-detalhes__botoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.area-detalhes__botao,
.area-detalhes__fechar {
  width: 100%;
  min-height: 48px;
}

.area-detalhes__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  color: var(--ouro-claro);
  font-size: 0.9375rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Janela da Onda da semana: cartao flutuante. */
.fqn-janela.fqn-janela--onda {
  align-items: center;
  padding: 16px;
}

.fqn-janela--onda .fqn-janela__painel {
  width: 100%;
  max-width: 560px;
  height: auto;
  max-height: 100%;
  padding: 16px;
  border: 1px solid rgba(79, 179, 255, 0.55);
  border-radius: 16px;
  box-shadow: 0 0 24px rgba(79, 179, 255, 0.2), 0 20px 50px rgba(0, 0, 0, 0.6);
}

.fqn-janela--onda.fqn-janela--teclado {
  align-items: flex-start;
  padding: 8px;
}

.fqn-janela--onda.fqn-janela--teclado .fqn-janela__painel {
  max-height: 100%;
}

@media (max-width: 559px) {
  .fqn__faixa .fqn__voltar {
    justify-content: center;
    width: 48px;
    min-width: 48px;
    padding: 0;
  }

  .fqn__faixa .fqn__voltar-curto,
  .fqn__faixa .fqn__voltar-longo {
    display: none;
  }

  .fqn__faixa .fqn__voltar-seta {
    display: inline;
    font-size: 1.375rem;
    line-height: 1;
  }

  .fqn-reprog__nota {
    left: auto;
    right: 0;
    text-align: right;
  }
}

/* ---------- 27. Todas as janelas do Codigo FQN como popup no celular (11/10/2026, ordem do Rogerio) ----------
 * Antes a janela da atividade ocupava a tela inteira e parecia outra pagina. Agora e um cartao flutuante:
 * margem em volta, cantos arredondados e a pagina escurecida por tras (o mesmo padrao da Onda da semana).
 * O Voltar do celular fecha a janela e devolve a pessoa ao mesmo ponto da linha do tempo (janela-voltar.js). */
@media (max-width: 767px) {
  .fqn-janela:not(.fqn-janela--onda) {
    align-items: center;
    padding: 12px;
  }

  /* Do tamanho do conteudo; se o conteudo for maior que a tela, o corpo da janela rola por dentro. */
  .fqn-janela:not(.fqn-janela--onda):not(.fqn-janela--leitura):not(.fqn-janela--termo) .fqn-janela__painel {
    height: auto;
    max-height: 100%;
  }

  .fqn-janela:not(.fqn-janela--onda) .fqn-janela__painel {
    border: 1px solid var(--borda-cartao);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  }

  .fqn-janela--leitura .fqn-janela__painel {
    min-height: 0;
  }

  .fqn-janela--leitura .fqn-janela__cabeca {
    border-radius: 16px 16px 0 0;
  }

  /* Cabecalho preso sem vao em cima (14/10/2026): o cabecalho gruda no limite da area de rolagem MENOS o recuo de cima
   * dela. Com 12px de recuo, uma faixa de 12px ficava acima do cabecalho e o texto rolado aparecia ali. Agora a janela nao
   * tem recuo em cima: o espaco de cima vira margem do painel, que rola junto, e o cabecalho gruda no topo de verdade. */
  .fqn-janela--leitura:not(.fqn-janela--onda) {
    --fqn-recuo: 12px;
    padding-top: 0;
  }

  .fqn-janela--leitura.fqn-janela--teclado:not(.fqn-janela--onda) {
    --fqn-recuo: 6px;
  }

  .fqn-janela--leitura:not(.fqn-janela--onda) .fqn-janela__painel {
    margin-top: var(--fqn-recuo);
  }

  .fqn-janela--teclado:not(.fqn-janela--onda) {
    padding: 6px;
  }
}

/* ---------- 28. Preco promocional (11/10/2026): "De R$97,00 por" riscado, acima do preco ---------- */
.area-protocolo__preco-de {
  display: block;
  color: var(--tinta-suave, rgba(244, 241, 232, 0.7));
  font-size: 0.875rem;
  font-weight: 400;
}

.area-protocolo__preco-de s {
  text-decoration-thickness: 2px;
}

.rq-preco__de {
  margin: 0;
  color: rgba(244, 241, 232, 0.7);
  font-size: 0.9375rem;
}

.rq-preco__de s {
  text-decoration-thickness: 2px;
}

/* ---------- 29. Meus Protocolos no computador: texto curto tambem aqui (11/10/2026, ordem do Rogerio) ----------
 * Com a descricao longa, a fileira inteira acompanhava o cartao mais alto: os cartoes liberados ficavam com um vazio
 * enorme e o ACESSAR caia para fora da tela. Agora o computador mostra a mesma frase curta do celular (inteira, nunca
 * cortada) no lugar da descricao longa, e os botoes da fileira aparecem na tela. */
@media (min-width: 560px) {
  .area-protocolo__descricao {
    display: none;
  }

  .area-protocolo__descricao-curta {
    display: block;
    grid-row: 4;
    margin-top: 10px;
    color: var(--tinta-suave);
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5;
  }
}

/* ---------- 30. Titulos que nao cabem numa linha quebram em partes iguais (11/10/2026, pedido do Rogerio) ----------
 * Ex.: "TERMOMETRO DA / PROSPERIDADE" passa a "TERMOMETRO / DA PROSPERIDADE". Vale para o titulo das janelas e dos
 * quadros da linha do tempo do Codigo FQN. */
.fqn-janela__titulo,
.fqn-quadro__titulo,
.fqn-quadro__abrir {
  text-wrap: balance;
}

/* ---------- 31. Termometro da Prosperidade no celular: janela em tres partes (11/10/2026, auditoria do Rogerio) ----------
 * Alto: titulo com o X e "Pergunta N de 7" (14px, sem negrito), sempre visiveis.
 * Meio: a pergunta (18px negrito) e as 4 alternativas rolam com o dedo; com mais conteudo embaixo, o pe esmaece.
 * Pe: VOLTAR e AVANCAR (ou ENVIAR, na 7) presos embaixo, 52px cada. Na Pergunta 1 nao ha VOLTAR.
 * Letra da alternativa 24px; alternativa com fundo claro e sem borda; marcada = fundo azul mais forte e realce claro.
 * Letra minima 14px; toque minimo 44px; botao no maximo 72px. Regras so para .fqn-janela--termo (o Quociente e os
 * 108 vezes usam as mesmas classes .fqn-termo__* e nao mudam). */

/* O cartao do Termometro ocupa a altura da tela no celular (o miolo rola por dentro, nunca a janela inteira). */
.fqn-janela--termo .fqn-janela__corpo--termo {
  gap: 0;
  overflow: hidden;
}

.fqn-janela--termo .fqn-termo {
  gap: 10px;
}

.fqn-janela--termo .fqn-termo__contador {
  flex: none;
  margin: 0;
  color: var(--fqn-azul);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
}

.fqn-janela--termo .fqn-termo__meio {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding-bottom: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.fqn-janela--termo .fqn-termo__meio--mais {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
}

.fqn-janela--termo .fqn-termo__pergunta {
  margin: 0;
  color: var(--tinta);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: break-word;
}

.fqn-janela--termo .fqn-termo__alternativas {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fqn-janela--termo .fqn-alt {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  background: rgba(244, 241, 232, 0.07);
  box-shadow: none;
  color: var(--tinta);
  font-size: 1rem;
  line-height: 1.35;
  text-align: left;
}

.fqn-janela--termo .fqn-alt__letra {
  width: 24px;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--fqn-azul);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}

.fqn-janela--termo .fqn-alt__texto {
  min-width: 0;
  overflow-wrap: break-word;
}

.fqn-janela--termo .fqn-alt--marcada {
  background: rgba(79, 179, 255, 0.3);
  box-shadow: inset 0 0 0 2px #bfe3ff;
}

.fqn-janela--termo .fqn-alt--marcada .fqn-alt__letra {
  background: none;
  color: #ffffff;
}

.fqn-janela--termo .fqn-termo__nota {
  display: block;
  margin: 0;
  color: var(--tinta-suave);
  font-size: 1rem;
  line-height: 1.4;
}

/* Espaco reservado: a frase "Marque uma alternativa para continuar." entra aqui sem empurrar os botoes. */
.fqn-janela--termo .fqn-termo__aviso {
  display: block;
  flex: none;
  min-height: 1.5rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
}

.fqn-janela--termo .fqn-termo__rodape {
  display: flex;
  flex: none;
  gap: 10px;
  margin: 0;
}

.fqn-janela--termo .fqn-termo__rodape .fqn-botao {
  height: 52px;
  min-height: 52px;
  max-height: 72px;
  font-size: 1rem;
}

.fqn-janela--termo .fqn-termo__voltar[hidden] {
  display: none;
}

/* AVANCAR (e ENVIAR, na ultima pergunta) fica sempre do lado DIREITO; o lado esquerdo e so do VOLTAR (11/10/2026). */
.fqn-janela--termo .fqn-termo__rodape .fqn-termo__avancar {
  margin-left: auto;
}

/* Pergunta 1 (sem VOLTAR): o espaco da esquerda fica vazio e o AVANCAR tem a mesma largura das outras perguntas. */
@media (max-width: 767px) {
  .fqn-janela--termo .fqn-termo__rodape.fqn-termo__rodape--sem-voltar:not(.fqn-termo__rodape--inicio) .fqn-termo__avancar {
    flex: 0 0 calc(50% - 5px);
  }
}

/* VOLTAR e AVANCAR lado a lado no celular (o COMECAR da abertura fica como estava). */
@media (max-width: 767px) {
  .fqn-janela--termo .fqn-termo__rodape:not(.fqn-termo__rodape--inicio) .fqn-botao {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
}

.fqn-janela--termo .fqn-termo__enviadas {
  margin: auto;
  color: var(--tinta);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

/* ---------- 32. Resultado do Termometro e tabela colorida (11/10/2026, material oficial do Rogerio) ----------
 * Depois de ENVIAR (e ao reabrir a resposta): nivel, frase com nome e pontos, texto do nivel e a tabela
 * "TERMOMETRO DE PROSPERIDADE" nas cores do print oficial, com a linha do paciente destacada. */
.fqn-resultado {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fqn-resultado__titulo {
  margin: 0;
  color: var(--ouro-claro);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.35;
  text-wrap: balance;
}

.fqn-resultado__abertura {
  margin: 0;
  color: var(--tinta);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.45;
}

.fqn-resultado__paragrafo {
  margin: 0;
  color: var(--tinta);
  font-size: 1rem;
  line-height: 1.6;
}

.fqn-resultado__paragrafo--primeiro {
  color: var(--ouro-claro);
  font-weight: 600;
}

.fqn-tabela {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 12px;
  background: #eef4fd;
}

.fqn-tabela__titulo {
  margin: 0;
  padding: 14px 12px 12px;
  color: #1f3c88;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

.fqn-tabela__cabeca,
.fqn-tabela__linha {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
  padding: 10px 12px;
}

.fqn-tabela__cabeca {
  background: linear-gradient(90deg, #1f3c88, #3b82f6);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
}

.fqn-tabela__cabeca .fqn-tabela__celula--2 {
  display: none;
}

.fqn-tabela__linha {
  row-gap: 4px;
  border-top: 1px solid rgba(31, 60, 136, 0.12);
}

.fqn-tabela__celula {
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
  line-height: 1.35;
}

.fqn-tabela__linha .fqn-tabela__celula--0,
.fqn-tabela__linha .fqn-tabela__celula--1 {
  font-size: 0.9375rem;
  font-weight: 800;
}

.fqn-tabela__linha .fqn-tabela__celula--2 {
  grid-column: 1 / -1;
  color: #2f3542;
  font-size: 0.875rem;
  line-height: 1.45;
}

.fqn-tabela__linha--1 { background: #fdf0f2; color: #c0283a; }
.fqn-tabela__linha--2 { background: #fff4ea; color: #c9561a; }
.fqn-tabela__linha--3 { background: #fffbea; color: #a9820a; }
.fqn-tabela__linha--4 { background: #eefaf3; color: #1e9256; }
.fqn-tabela__linha--5 { background: #eaf8f1; color: #11804a; }

/* A linha do nivel do paciente: moldura na cor do nivel. */
.fqn-tabela__linha--sua {
  box-shadow: inset 0 0 0 3px currentColor;
}

@media (min-width: 560px) {
  .fqn-tabela__cabeca,
  .fqn-tabela__linha {
    grid-template-columns: 20% 26% minmax(0, 1fr);
    column-gap: 14px;
    padding: 12px 16px;
    text-align: center;
  }

  .fqn-tabela__cabeca .fqn-tabela__celula--2 {
    display: block;
  }

  .fqn-tabela__linha .fqn-tabela__celula--2 {
    grid-column: auto;
    font-size: 0.9375rem;
  }
}

/* ---------- 33. Atividade 2 — esfera (Mapa das Crenças Limitantes, 11/10/2026) ----------
 * Desenho do prototipo aprovado: contexto/atividade2-animacao/prototipo-esfera.html.
 * Letra minima 14px; toque minimo 44px; botao no maximo 72px; uma caixa so por bloco.
 * A janela usa o layout de tres partes do Termometro (fqn-janela--termo): a esfera fica no alto e a tela rola por dentro.
 * Classes com o prefixo fqn-esfera-. Menos movimento: so pelo sistema (prefers-reduced-motion). */

.fqn-esfera-raiz {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  color: var(--tinta);
  font-size: 16px;
  line-height: 1.45;
}

/* campo: a esfera, os fios e as ondas */
.fqn-esfera-campo {
  --d: 96px;
  position: relative;
  flex: 0 0 auto;
  height: clamp(190px, 30vh, 230px);
  overflow: hidden;
}

@media (max-height: 700px) {
  .fqn-esfera-campo {
    --d: 84px;
  }
}

/* celular estreito (320 px): a legenda ocupa tres linhas; a esfera fica menor para nao encostar nela */
@media (max-width: 360px) {
  .fqn-esfera-campo {
    --d: 80px;
  }
}

.fqn-esfera-campo::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 3px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79, 179, 255, 0.5), transparent);
}

p.fqn-esfera-legenda {
  position: absolute;
  top: 8px;
  left: 12px;
  right: 12px;
  margin: 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.3;
  color: var(--tinta-suave);
}

.fqn-esfera-fios {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.fqn-esfera-fio {
  fill: none;
  stroke: #1f3d73;
  stroke-linecap: round;
  stroke-opacity: 0.95;
}

.fqn-esfera-fio--ancora {
  stroke: #0e2350;
}

.fqn-esfera-peso {
  fill: #060e22;
  stroke: #4fb3ff;
  stroke-width: 1.4;
  transform-box: fill-box;
  transform-origin: center;
  animation: fqn-esfera-pulsa 2.4s ease-in-out infinite;
}

@keyframes fqn-esfera-pulsa {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.fqn-esfera-palco {
  position: absolute;
  left: var(--cx, 50%);
  top: var(--cy, 100px);
  width: var(--d);
  height: var(--d);
  transform: translate(-50%, -50%) scale(var(--s, 1)) rotate(var(--r, 0deg));
  transition: transform 0.8s cubic-bezier(0.3, 0.7, 0.3, 1);
}

/* Esfera viva (como a do modo de voz): o halo pulsa atras; o corpo tem duas nuvens de luz que giram em sentidos e
 * velocidades diferentes; a borda muda de forma de leve; o tamanho pulsa de forma irregular (4,6 s e 4,3 s, fora de
 * compasso). So transform e opacity nas animacoes; border-radius na forma. Com prefers-reduced-motion, tudo parado. */
.fqn-esfera-palco::before {
  content: "";
  position: absolute;
  inset: -34%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 190, 0.5) 0%, rgba(230, 199, 106, 0.26) 40%, rgba(79, 179, 255, 0.1) 58%, rgba(79, 179, 255, 0) 70%);
  pointer-events: none;
  animation: fqn-esfera-halo 4.3s ease-in-out infinite;
}

.fqn-esfera-corpo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #e9cf85 0%, #c9a84c 26%, #9a7530 52%, #5a4118 78%, #201709 100%);
  box-shadow: 0 0 30px rgba(230, 199, 106, 0.42), 0 0 80px rgba(79, 179, 255, 0.14);
  animation: fqn-esfera-respira 4.6s ease-in-out infinite, fqn-esfera-forma 11s ease-in-out infinite;
  transition: filter 0.8s ease;
}

/* nuvem dourada com toques de branco e azul: gira devagar, no sentido do relogio */
.fqn-esfera-corpo::before {
  content: "";
  position: absolute;
  inset: -24%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(201, 168, 76, 0) 0deg, rgba(230, 199, 106, 0.9) 60deg, rgba(255, 248, 224, 0.75) 105deg, rgba(201, 168, 76, 0) 160deg, rgba(79, 179, 255, 0.4) 225deg, rgba(201, 168, 76, 0) 280deg, rgba(230, 199, 106, 0.85) 330deg, rgba(201, 168, 76, 0) 360deg);
  filter: blur(5px);
  mix-blend-mode: screen;
  opacity: 0.85;
  pointer-events: none;
  will-change: transform;
  animation: fqn-esfera-gira 13s linear infinite;
}

/* nuvem clara: gira mais devagar, no sentido contrario, e se mistura com a dourada */
.fqn-esfera-corpo::after {
  content: "";
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 34%, rgba(255, 250, 232, 0.9) 0%, rgba(243, 220, 142, 0.45) 22%, rgba(230, 199, 106, 0) 48%),
    radial-gradient(circle at 74% 70%, rgba(79, 179, 255, 0.5) 0%, rgba(79, 179, 255, 0) 42%);
  filter: blur(4px);
  mix-blend-mode: screen;
  opacity: 0.8;
  pointer-events: none;
  will-change: transform;
  animation: fqn-esfera-gira-volta 21s linear infinite;
}

@keyframes fqn-esfera-respira {
  0%, 100% { transform: scale(1); }
  36% { transform: scale(1.05); }
  62% { transform: scale(0.985); }
}

@keyframes fqn-esfera-forma {
  0%, 100% { border-radius: 50%; }
  35% { border-radius: 47% 53% 49% 51% / 52% 46% 54% 48%; }
  70% { border-radius: 53% 47% 51% 49% / 46% 53% 47% 54%; }
}

@keyframes fqn-esfera-gira {
  to { transform: rotate(360deg); }
}

@keyframes fqn-esfera-gira-volta {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes fqn-esfera-halo {
  0%, 100% { opacity: 0.55; transform: scale(0.94); }
  40% { opacity: 0.95; transform: scale(1.06); }
  68% { opacity: 0.7; transform: scale(0.98); }
}

.fqn-esfera-brilho {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 190, 0.9) 0%, rgba(230, 199, 106, 0.35) 45%, rgba(230, 199, 106, 0) 70%);
  opacity: 0;
  pointer-events: none;
}

.fqn-esfera-onda {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(230, 199, 106, 0.85);
  box-shadow: 0 0 22px rgba(230, 199, 106, 0.45);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

/* o cartao que voa ate a esfera ou ao fio: fica por cima da janela */
.fqn-esfera-fantasma {
  position: fixed;
  z-index: 1100;
  margin: 0;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.3;
  pointer-events: none;
}

.fqn-esfera-fantasma--f {
  background: var(--ouro-claro);
  color: #0a0a14;
}

.fqn-esfera-fantasma--l {
  background: #1f3d73;
  color: var(--tinta);
}

/* telas */
.fqn-esfera-telas {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.fqn-esfera-tela {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  overflow-y: auto;
  padding: 0 4px 12px;
  -webkit-overflow-scrolling: touch;
}

.fqn-esfera-tela.ativa {
  display: flex;
  animation: fqn-esfera-entra 0.35s ease both;
}

.fqn-esfera-tela--fixa {
  overflow: hidden;
}

@keyframes fqn-esfera-entra {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

h2.fqn-esfera-titulo-tela {
  margin: 8px 0 6px;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
}

p.fqn-esfera-pequeno {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--tinta-suave);
}

h3.fqn-esfera-subtitulo {
  margin: 16px 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ouro-claro);
}

p.fqn-esfera-rotulo {
  margin: 8px 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ouro-claro);
}

p.fqn-esfera-vazio {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--tinta-suave);
}

/* abertura */
.fqn-esfera-caixa {
  margin: 12px 0;
  padding: 16px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(230, 199, 106, 0.24), rgba(201, 168, 76, 0.1));
}

p.fqn-esfera-destaque {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 800;
  color: var(--ouro-claro);
}

p.fqn-esfera-nao-julga {
  margin: 12px 4px 0;
}

/* botoes */
.fqn-esfera-botao {
  width: 100%;
  min-height: 52px;
  max-height: 72px;
  margin-top: 8px;
}

.fqn-esfera-voltar {
  align-self: flex-start;
  min-height: 44px;
  margin: 4px 0;
  padding: 0 14px;
  border: 0;
  border-radius: 22px;
  background: rgba(244, 241, 232, 0.08);
  color: var(--tinta);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
}

/* escolha: dica, assuntos, carrossel e rodape */
.fqn-esfera-assuntos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 6px 0 8px;
}

.fqn-esfera-assunto {
  min-height: 56px;
  padding: 6px 4px;
  border: 0;
  border-radius: 12px;
  background: rgba(244, 241, 232, 0.08);
  color: var(--tinta-suave);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.fqn-esfera-assunto.ativo {
  background: var(--ouro);
  color: #0a0a14;
}

.fqn-esfera-carrossel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin: 0 -4px;
}

.fqn-esfera-carrossel::-webkit-scrollbar {
  display: none;
}

.fqn-esfera-painel {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  scroll-snap-align: start;
  overflow-y: auto;
  padding: 4px 4px 12px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

h2.fqn-esfera-painel-titulo {
  margin: 4px 0 2px;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 700;
}

.fqn-esfera-painel-topo p {
  margin: 0 0 10px;
}

.fqn-esfera-cartao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  min-height: 56px;
  margin: 0 0 8px;
  padding: 12px 14px;
  border: 0;
  border-radius: 14px;
  background: #15152b;
  color: var(--tinta);
  font-family: inherit;
  text-align: left;
  font-size: 16px;
  line-height: 1.35;
}

.fqn-esfera-cartao-texto {
  overflow-wrap: anywhere;
}

.fqn-esfera-marca {
  font-size: 14px;
  line-height: 1.3;
  color: var(--tinta-suave);
}

.fqn-esfera-marca[hidden] {
  display: none;
}

.fqn-esfera-cartao--novo {
  background: rgba(230, 199, 106, 0.1);
  color: var(--ouro-claro);
  font-weight: 700;
}

.fqn-esfera-cartao--novo .fqn-esfera-marca {
  color: var(--tinta-suave);
  font-weight: 400;
}

.fqn-esfera-cartao--fortalece {
  background: rgba(201, 168, 76, 0.18);
}

.fqn-esfera-cartao--fortalece .fqn-esfera-marca {
  color: var(--ouro-claro);
}

.fqn-esfera-cartao--limita {
  background: #0d1a36;
}

.fqn-esfera-cartao--limita .fqn-esfera-marca {
  color: #4fb3ff;
}

.fqn-esfera-cartao--ancora {
  background: #1d2e5a;
}

.fqn-esfera-cartao--fixo {
  cursor: default;
}

.fqn-esfera-rodape {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 0 4px;
}

p.fqn-esfera-resumo {
  margin: 0;
  font-size: 14px;
  color: var(--tinta-suave);
  text-align: center;
}

p.fqn-esfera-aviso {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ouro-claro);
  text-align: center;
}

p.fqn-esfera-aviso:empty {
  display: none;
}

p.fqn-esfera-msg {
  flex: 0 0 auto;
  margin: 0 4px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ouro-claro);
}

p.fqn-esfera-msg:empty {
  display: none;
}

/* ancora, final e padrao */
.fqn-esfera-lista {
  display: flex;
  flex-direction: column;
}

p.fqn-esfera-padrao {
  margin: 6px 0;
  padding: 12px;
  border-radius: 12px;
  background: rgba(244, 241, 232, 0.07);
  font-size: 16px;
  line-height: 1.4;
}

.fqn-esfera-pendentes {
  margin-top: 8px;
}

.fqn-esfera-pendentes[hidden] {
  display: none;
}

.fqn-esfera-faltas {
  margin-top: 8px;
}

p.fqn-esfera-falta {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ouro-claro);
}

p.fqn-esfera-aviso-envio {
  margin-top: 12px;
  text-align: center;
}

.fqn-esfera-opcoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fqn-esfera-opcoes-lado {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.fqn-esfera-opcao {
  min-height: 52px;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  background: rgba(244, 241, 232, 0.09);
  color: var(--tinta);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}

.fqn-esfera-opcao[aria-pressed="true"] {
  background: var(--ouro);
  color: #0a0a14;
}

.fqn-esfera-opcao--l[aria-pressed="true"] {
  background: #2c5aa0;
  color: #fff;
}

/* popup: frase pronta e frase escrita */
.fqn-esfera-fundo {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(5, 5, 12, 0.74);
}

.fqn-esfera-popup {
  width: 100%;
  max-width: 400px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 18px;
  border-radius: 18px;
  background: #171730;
  color: var(--tinta);
  outline: none;
}

p.fqn-esfera-popup-sub {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ouro-claro);
}

h2.fqn-esfera-popup-titulo {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
}

.fqn-esfera-popup-corpo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fqn-esfera-popup-acoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fqn-esfera-popup-acoes .fqn-esfera-botao {
  margin-top: 0;
}

p.fqn-esfera-popup-erro {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ouro-claro);
}

p.fqn-esfera-popup-erro:empty {
  display: none;
}

p.fqn-esfera-frase-escolhida {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  background: rgba(244, 241, 232, 0.07);
  border-radius: 12px;
  padding: 12px 14px;
}

.fqn-esfera-texto {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  border: 0;
  border-radius: 12px;
  padding: 12px 14px;
  background: #0d0d1d;
  color: var(--tinta);
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
}

.fqn-esfera-texto:focus {
  outline: 2px solid #4fb3ff;
}

p.fqn-esfera-contador {
  margin: -4px 0 0;
  font-size: 14px;
  color: var(--tinta-suave);
  text-align: right;
}

/* menos movimento: o sistema pede (prefers-reduced-motion) */
@media (prefers-reduced-motion: reduce) {
  .fqn-esfera-corpo,
  .fqn-esfera-corpo::before,
  .fqn-esfera-corpo::after,
  .fqn-esfera-palco::before,
  .fqn-esfera-peso {
    animation: none;
  }

  .fqn-esfera-tela.ativa {
    animation: none;
  }

  .fqn-esfera-palco {
    transition: none;
  }
}

/* Aviso antes do cadastro (aviso-cadastro.js, 14/10/2026): janela no meio da tela, fundo escurecido leve.
   Texto principal 16px ou mais; botao de 48px. Nenhuma linha de texto com nowrap: a frase quebra na largura da caixa. */
.area-aviso-cadastro {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(8, 8, 18, 0.55);
}

.area-aviso-cadastro__caixa {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 420px;
  max-height: 100%;
  overflow-wrap: anywhere;
  padding: 20px;
  border: 1px solid rgba(201, 168, 76, 0.55);
  border-radius: 16px;
  background: #11111d;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
  color: var(--tinta);
}

.area-pagina .area-aviso-cadastro__texto,
.area-aviso-cadastro__texto {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.55;
}

.area-aviso-cadastro__botao {
  width: 100%;
  min-height: 48px;
}

/* Camada "Abrindo a tela de pagamento" (espera-pagamento.js, 14/10/2026): cobre a tela inteira e bloqueia o toque. */
.area-espera-pagamento {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(8, 8, 18, 0.82);
  outline: none;
}

.area-espera-pagamento__caixa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 360px;
  overflow-wrap: anywhere;
  padding: 24px 20px;
  border: 1px solid rgba(201, 168, 76, 0.55);
  border-radius: 16px;
  background: #11111d;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  color: var(--tinta);
  text-align: center;
}

.area-espera-pagamento__giro {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(231, 205, 127, 0.25);
  border-top-color: var(--ouro-claro);
  border-radius: 50%;
  animation: area-espera-girar 1.1s linear infinite;
}

.area-pagina .area-espera-pagamento__titulo,
.area-espera-pagamento__titulo {
  margin: 0;
  color: var(--ouro-claro);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

.area-pagina .area-espera-pagamento__apoio,
.area-espera-pagamento__apoio {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

@keyframes area-espera-girar {
  to {
    transform: rotate(360deg);
  }
}

/* menos movimento: o giro para e o circulo fica parado */
@media (prefers-reduced-motion: reduce) {
  .area-espera-pagamento__giro {
    animation: none;
  }
}

/* ---------- Renovar protocolo (15/10/2026, PROJETO-PAGAMENTOS-ORIGEM-E-RENOVAR v2) ----------
 * A faixa tem a linha do aviso (discreta, sem cor de alarme) e, abaixo dela, o botao RENOVAR PROTOCOLO. Fica dentro do cartao do
 * protocolo liberado (Meus Protocolos), no alto da pagina do Codigo FQN e da area da Reprogramacao, e e a mesma nos tres.
 * Celular: linha de 14px acima do botao; botao com 52px e 15px (a regra do cartao, secao 14, ja manda). Computador: no alto da
 * pagina o botao nao passa de 360px; dentro do cartao ele ocupa a largura do cartao, como os outros botoes dele. */
.area-renovar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.area-renovar__linha {
  margin: 0;
  color: var(--tinta-suave);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Nas paginas dos protocolos a faixa fica no conteudo, logo abaixo do cabecalho (nunca dentro dele): o espaco ate o cabecalho e o
 * da propria pagina, por isso aqui nao ha margem. */
.area-renovar-lugar {
  margin: 0;
}

/* Reprogramacao: o cabecalho (Voltar e titulo), a faixa de renovacao (so quando ha aviso) e o texto de abertura. O espaco entre eles
 * e o mesmo que o cabecalho tinha por dentro (12px; 8px no celular). */
.rq-topo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.rq-topo .area-renovar-lugar {
  width: 100%;
}

@media (max-width: 559px) {
  .rq-topo {
    gap: 8px;
  }
}

/* No cartao do protocolo o botao RENOVAR PROTOCOLO tem 48px (PADRAO-MOBILE, secao 7), para o cartao do Codigo FQN (com subtitulo)
 * ficar dentro da meta de 400px de altura no celular de 352px. Vem depois das regras de .area-protocolo__acoes .area-botao (52px). */
.area-protocolo__acoes .area-renovar__botao {
  min-height: 48px;
}

.area-renovar--pagina .area-renovar__botao {
  width: 100%;
  min-height: 48px;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0;
}

@media (min-width: 560px) {
  .area-renovar--pagina .area-renovar__botao {
    width: auto;
    min-width: 240px;
    max-width: 360px;
    align-self: flex-start;
  }
}

/* ---------- Janela do aviso de problema (aviso-problema.js, 15/10/2026) ----------
 * Abre pelo balao do menu de cima. Mesmo padrao das outras janelas (.area-detalhes): fundo escurecido, caixa no meio, no maximo 440px.
 * Tamanhos (celular / computador): titulo 18px / 20px; frase, rotulo, campo, contador, mensagens e botoes 15px / 16px (campo de digitar 16px nos dois,
 * porque abaixo disso o iPhone aproxima a tela). Botoes e campo com no minimo 48px de altura. Nenhuma linha de texto com nowrap: tudo quebra na
 * largura da caixa. A miniatura da imagem tem 72px (e conteudo do paciente, nao decoracao). Os seletores levam o prefixo da janela para vencer
 * ".area-pagina p", que zera a margem dos paragrafos. */
.area-aviso-problema {
  position: fixed;
  inset: 0;
  z-index: 1250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(8, 8, 18, 0.7);
}

.area-aviso-problema .area-aviso-problema__caixa {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 440px;
  max-height: 100%;
  overflow-y: auto;
  overflow-wrap: anywhere;
  padding: 16px;
  border: 1px solid rgba(201, 168, 76, 0.55);
  border-radius: 16px;
  background: #11111d;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  color: var(--tinta);
}

.area-aviso-problema .area-aviso-problema__caixa:focus {
  outline: none;
}

.area-aviso-problema .area-aviso-problema__titulo {
  margin: 0;
  color: var(--ouro-claro);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

.area-aviso-problema .area-aviso-problema__frase,
.area-aviso-problema .area-aviso-problema__imagem-frase,
.area-aviso-problema .area-aviso-problema__contador,
.area-aviso-problema .area-aviso-problema__mensagem,
.area-aviso-problema .area-aviso-problema__status {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.area-aviso-problema .area-aviso-problema__frase,
.area-aviso-problema .area-aviso-problema__imagem-frase {
  color: var(--tinta-suave);
}

.area-aviso-problema .area-aviso-problema__formulario {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.area-aviso-problema .area-campo__rotulo {
  font-size: 0.9375rem;
}

.area-aviso-problema .area-aviso-problema__texto {
  min-height: 112px;
  max-height: 224px;
  resize: none;
  /* o campo cresce com o texto (navegadores que sabem); nos outros ele rola por dentro */
  field-sizing: content;
  font-size: 1rem;
}

.area-aviso-problema .area-aviso-problema__contador {
  color: var(--tinta-suave);
}

.area-aviso-problema .area-aviso-problema__imagem {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.area-aviso-problema .area-aviso-problema__imagem-linha {
  display: flex;
  align-items: center;
  gap: 12px;
}

.area-aviso-problema .area-aviso-problema__miniatura {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 1px solid var(--borda-cartao);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}

.area-aviso-problema .area-aviso-problema__imagem-botoes {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.area-aviso-problema .area-botao {
  width: 100%;
  min-height: 48px;
  padding: 8px 10px;
  font-size: 0.9375rem;
  letter-spacing: 0;
}

.area-aviso-problema .area-aviso-problema__mensagem {
  padding: 10px 12px;
  border: 1px solid var(--erro);
  border-radius: 8px;
  color: var(--erro);
}

.area-aviso-problema .area-aviso-problema__status {
  color: var(--ouro-claro);
  font-weight: 600;
}

.area-aviso-problema .area-aviso-problema__botoes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

/* Celular: espacos mais justos para a janela inteira caber, mesmo com imagem anexada e uma mensagem de falha (375x667 e 288x760). */
@media (max-width: 559px) {
  .area-aviso-problema {
    padding: 12px;
  }

  .area-aviso-problema .area-aviso-problema__caixa,
  .area-aviso-problema .area-aviso-problema__formulario {
    gap: 8px;
  }

  .area-aviso-problema .area-aviso-problema__caixa {
    padding: 12px;
  }

  .area-aviso-problema .area-aviso-problema__frase,
  .area-aviso-problema .area-aviso-problema__imagem-frase,
  .area-aviso-problema .area-aviso-problema__contador,
  .area-aviso-problema .area-aviso-problema__mensagem,
  .area-aviso-problema .area-aviso-problema__status {
    line-height: 1.4;
  }

  .area-aviso-problema .area-aviso-problema__mensagem {
    padding: 8px 10px;
  }

  .area-aviso-problema .area-aviso-problema__texto {
    min-height: 96px;
    max-height: 144px;
  }
}

@media (min-width: 560px) {
  .area-aviso-problema .area-aviso-problema__caixa {
    gap: 14px;
    padding: 20px;
  }

  .area-aviso-problema .area-aviso-problema__titulo {
    font-size: 1.25rem;
  }

  .area-aviso-problema .area-aviso-problema__frase,
  .area-aviso-problema .area-aviso-problema__imagem-frase,
  .area-aviso-problema .area-aviso-problema__contador,
  .area-aviso-problema .area-aviso-problema__mensagem,
  .area-aviso-problema .area-aviso-problema__status,
  .area-aviso-problema .area-campo__rotulo,
  .area-aviso-problema .area-botao {
    font-size: 1rem;
  }
}