:root {
  /* ── Escala tipográfica ──────────────────────────────────────────────────
     Onze degraus numa razão de ~1,12 — apertada de propósito: esta é uma
     interface DENSA, com ficha clínica, rubrica e tabela de exames dividindo a
     mesma tela. Uma razão larga (1,25 ou 1,333) abriria buracos entre o corpo e
     o rótulo, e obrigaria a inventar tamanhos no meio — que foi exatamente como
     o CSS chegou a 39 tamanhos distintos para 155 usos.

     Um sistema não é a lista de tamanhos que existem: é a lista dos que PODEM
     existir. Precisou de um degrau novo? Ele entra aqui, com nome, e não solto
     numa regra. */
  --fs-3xs: 0.6875rem;  /* 11px — selo, contador, rótulo de canto */
  --fs-2xs: 0.75rem;    /* 12px — legenda, nota de rodapé */
  --fs-xs:  0.8125rem;  /* 13px — apoio, dica de campo */
  --fs-sm:  0.875rem;   /* 14px — texto secundário, item de lista */
  --fs-md:  1rem;       /* 16px — corpo. O degrau que ancora os outros */
  --fs-lg:  1.125rem;   /* 18px — destaque no corpo, botão grande */
  --fs-xl:  1.25rem;    /* 20px — título de bloco */
  --fs-2xl: 1.4375rem;  /* 23px — título de tela */
  --fs-3xl: 1.75rem;    /* 28px — título de seção principal */
  --fs-4xl: 2.25rem;    /* 36px — número da nota, herói */
  --fs-5xl: 3rem;       /* 48px — o anel de nota, único uso legítimo */

  /* ── Escala de espaçamento ───────────────────────────────────────────────
     Grade de 4. Os degraus pequenos andam de 4 em 4 porque é onde mora a
     densidade (padding de chip, gap de ícone); a partir de 24 a progressão
     abre, porque respiro entre blocos não precisa de precisão de 4px. */
  --e-1: 4px;    --e-2: 8px;    --e-3: 12px;   --e-4: 16px;
  --e-5: 20px;   --e-6: 24px;   --e-8: 32px;   --e-10: 40px;
  --e-12: 48px;  --e-16: 64px;

  /* Meio-passo. Existe para o que é ótico, não estrutural: separar um ícone do
     seu rótulo, ou um selo do texto. Fora disso, use a grade. */
  --e-meio: 2px;

  /* ── Paleta dos 5 eixos ──────────────────────────────────────────────────
     Extraída da identidade do SC Mais Inovação: cinco cores ricas e sóbrias,
     cada uma com um topo mais claro para o gradiente acetinado do card. O
     PRIMEIRO-PLANO vem junto de propósito — no âmbar, texto branco cai para
     ~1.9:1 (ilegível), então ali o texto é escuro, como na própria referência.
     Cada cor é atribuída a uma área do edital (ver AREA_EDITAL no index.html). */
  --e1-top: #245a7d; --e1-bot: #1a4560; --e1-fg: #ffffff;   /* navy — Clínica Médica */
  --e2-top: #9d5cb0; --e2-bot: #7c4191; --e2-fg: #ffffff;   /* roxo — Ginecologia e Obstetrícia */
  --e3-top: #ecb44a; --e3-bot: #d69a2c; --e3-fg: #3b2c05;   /* âmbar — Pediatria (texto escuro) */
  --e4-top: #429a47; --e4-bot: #2f7d34; --e4-fg: #ffffff;   /* verde — Medicina da Família */
  --e5-top: #b23336; --e5-bot: #922427; --e5-fg: #ffffff;   /* vinho — Cirurgia */
  --e6-top: #2591a4; --e6-bot: #17798b; --e6-fg: #ffffff;   /* teal — Saúde Coletiva */
  --e7-top: #5a5ab5; --e7-bot: #43439a; --e7-fg: #ffffff;   /* índigo — Saúde Mental */

  --fundo: #eef2f6;
  --fundo-2: #e4eaf0;
  --superficie: #ffffff;
  --superficie-2: #f7f9fb;
  --borda: #dce3ec;
  --borda-forte: #c6d2df;
  --texto: #16222e;
  /* Os dois níveis de apoio foram escurecidos até passarem a norma de contraste
     (4,5:1 para texto abaixo de 18px), medidos NO PIXEL sobre o fundo de card,
     que é o mais claro em que aparecem — não sobre o branco teórico da página.
     `--texto-fraco` estava em 2,58:1 ali: legenda de card, contador de estações e
     dica de campo ficavam quase apagados em tela de celular no sol.

     Escurecer só o fraco o colaria no suave (4,50) e os dois níveis virariam um.
     Por isso o suave desceu junto: 6,26 e 4,66 mantêm a hierarquia com folga e
     ambos passam. */
  --texto-suave: #485562;
  --texto-fraco: #5d6873;
  --primaria: #0f766e;
  --primaria-escura: #0b5f58;
  --primaria-suave: #d7efec;
  --sobre-primaria: #ffffff;
  --med: #1e6fd0;
  --med-suave: #e2edfb;
  --psi: #7c5cbf;
  --psi-suave: #ece5f8;
  --aluno: #0f766e;
  --paciente: #f0f3f7;
  --exame: #fff6e0;
  --exame-borda: #ecd79a;
  --exame-texto: #7a5a12;
  --ok: #14884a;
  --falha: #c8382f;
  --aviso-fundo: #eef4f8;
  --aviso-texto: #4a6072;
  /* Sombra por LUZ, não por linha: três camadas difusas — contato, corpo e
     ambiente — no lugar de uma sombra dura. É o que faz um cartão parecer
     apoiado em vez de desenhado. */
  --sombra: 0 0 0 1px rgba(16,34,46,.028), 0 1px 2px rgba(16,34,46,.045), 0 10px 28px -6px rgba(16,34,46,.08);
  --sombra-forte: 0 0 0 1px rgba(16,34,46,.03), 0 2px 6px rgba(16,34,46,.07), 0 24px 56px -12px rgba(16,34,46,.16);
  --raio: 18px;
  --raio-sm: 12px;

  /* A física do movimento, num lugar só. A mola (--mola) desacelera como objeto
     com massa — é a diferença entre uma interface que responde e uma que
     apenas troca de estado. Nada aqui passa de 300 ms: animação que se nota
     como animação já é lenta demais. */
  --mola: cubic-bezier(.32,.72,0,1);
  --saida: cubic-bezier(.4,0,1,1);
  --t-rapido: .16s;
  --t-medio: .26s;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0c1116;
    --fundo-2: #0a0f14;
    --superficie: #151c24;
    --superficie-2: #1b232c;
    --borda: #26313c;
    --borda-forte: #33414f;
    --texto: #e7eef5;
    --texto-suave: #9fb0c0;
    /* No escuro o problema se inverte: o fraco precisa CLAREAR. Estava em 3,93
       sobre o card escuro. */
    --texto-fraco: #7a8da2;
    --primaria: #2dd4bf;
    --primaria-escura: #5eecd8;
    --primaria-suave: #123833;
    --sobre-primaria: #04312c;
    --med: #56a2f0;
    --med-suave: #14263c;
    --psi: #b79ce8;
    --psi-suave: #241a38;
    --aluno: #167f76;
    --paciente: #1c252f;
    --exame: #2c2717;
    --exame-borda: #55492a;
    --exame-texto: #e2c987;
    --ok: #3fca7d;
    --falha: #ec7268;
    --aviso-fundo: #172029;
    --aviso-texto: #9fb2c2;
    --sombra: 0 0 0 1px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -6px rgba(0,0,0,.45);
    --sombra-forte: 0 0 0 1px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.5), 0 28px 64px -12px rgba(0,0,0,.6);
    --sombra: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
    --sombra-forte: 0 2px 8px rgba(0,0,0,.4), 0 20px 46px rgba(0,0,0,.5);
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  /* Nada de dado que chega de fora — nome de arquivo de transcrição, matrícula,
     laudo, hipótese digitada pelo aluno — pode esticar a página de lado. Quebra só
     quando a palavra sozinha não cabe, então a tipografia normal fica intacta. */
  overflow-wrap: break-word;
  /* Fonte do SISTEMA, de propósito: SF Pro no Apple, Segoe UI Variable no
     Windows. É a decisão da própria Apple — a tipografia nativa da plataforma
     rende melhor que qualquer webfont, e custa zero bytes. */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, sans-serif;
  font-optical-sizing: auto;
  background:
    radial-gradient(1100px 520px at 78% -8%, color-mix(in srgb, var(--primaria) 12%, transparent), transparent 60%),
    radial-gradient(900px 500px at 8% 108%, color-mix(in srgb, var(--psi) 10%, transparent), transparent 60%),
    var(--fundo);
  color: var(--texto);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* O topo respeita o entalhe. Com `viewport-fit=cover` e a barra de status
   translúcida que o iOS usa em app instalado, o conteúdo sobe POR BAIXO do
   relógio e do entalhe — o cabeçalho ficava parcialmente coberto. No navegador
   comum `safe-area-inset-top` é zero e nada muda; instalado, ele vale os ~47px
   que o aparelho reserva. */
.tela {
  display: none; max-width: 940px; margin: 0 auto;
  padding: calc(26px + env(safe-area-inset-top)) 18px calc(30px + env(safe-area-inset-bottom));
}
.tela.ativa { display: block; animation: entra .42s var(--mola); }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* NAVEGAÇÃO COM DIREÇÃO, no celular. O subir-e-aparecer serve para conteúdo que
   chega; não serve para dizer ONDE a pessoa está indo. Num app, avançar traz a
   tela pela direita e voltar a devolve para lá — é assim que se sabe, sem ler
   nada, que "← Início" desfaz o passo anterior em vez de abrir mais um.

   A distância é curta (18%) e não a largura inteira: deslizar a tela toda a cada
   toque cansa em uso repetido, e este é um app em que se entra e sai de estação
   dezenas de vezes numa tarde. */
@media (max-width: 700px) {
  .tela.ativa.avanca { animation: entra-direita .32s var(--curva-padrao, ease-out); }
  .tela.ativa.volta  { animation: entra-esquerda .32s var(--curva-padrao, ease-out); }
}
@keyframes entra-direita  { from { opacity: 0; transform: translateX(18%); } to { opacity: 1; transform: none; } }
@keyframes entra-esquerda { from { opacity: 0; transform: translateX(-18%); } to { opacity: 1; transform: none; } }

/* Quem pediu menos movimento recebe a troca sem deslocamento nenhum. */
@media (prefers-reduced-motion: reduce) {
  .tela.ativa, .tela.ativa.avanca, .tela.ativa.volta { animation: none; }
}
h1 { font-size: var(--fs-3xl); letter-spacing: -.028em; margin: var(--e-2) 0 var(--e-meio); font-weight: 700; }
/* O olho perde a linha seguinte quando ela passa de ~75 caracteres: em telas
   largas o subtítulo esticava até 900px e virava uma faixa de texto que se relê
   sem querer. `ch` mede na fonte que está ali, não em pixels que mudam de
   sentido a cada tamanho de fonte. */
.subtitulo { color: var(--texto-suave); margin: 0 0 var(--e-6); max-width: 68ch; text-wrap: pretty; }

.marca { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-2); }
.marca .selo {
  width: 46px; height: 46px; border-radius: 14px; flex: none;
  display: grid; place-items: center; font-size: var(--fs-2xl);
  background: linear-gradient(160deg, var(--primaria), color-mix(in srgb, var(--primaria) 55%, #000 8%));
  color: #fff; box-shadow: var(--sombra);
}
.marca .tit { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.026em; }
.marca .sub { color: var(--texto-suave); font-size: var(--fs-sm); }

label { display: block; font-weight: 650; margin: var(--e-5) 0 7px; font-size: var(--fs-md); }
input[type=text] {
  width: 100%; padding: var(--e-3) var(--e-4); font-size: var(--fs-md);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-sm);
  background: var(--superficie); color: var(--texto); transition: border-color .15s, box-shadow .15s;
}
input[type=text]:focus { outline: none; border-color: var(--primaria); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primaria) 18%, transparent); }

/* Preferência de áudio */
.pref-audio {
  display: flex; align-items: center; gap: var(--e-4); flex-wrap: wrap;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: var(--e-3) 15px; margin: var(--e-2) 0 var(--e-1); box-shadow: var(--sombra);
}
/* Como AJUSTE: sem sombra e sem fundo próprio, para não competir com os cards de
   área. Peso visual é promessa — um cartão elevado diz "decida isto agora", e a
   decisão que importa nesta tela é qual caso atender. */
.pref-audio.ajuste {
  background: transparent; box-shadow: none; border-style: dashed;
  margin: var(--e-5) 0 var(--e-1); padding: var(--e-3) var(--e-4);
}
.pref-audio.ajuste .pref-rotulo { font-size: var(--fs-sm); color: var(--texto-suave); }
.pref-audio .pref-rotulo { font-weight: 650; }
.pref-audio .pref-dica { font-size: var(--fs-xs); color: var(--texto-suave); flex-basis: 100%; margin: 0; }
.segmentos { display: inline-flex; border: 1px solid var(--borda-forte); border-radius: 999px; padding: var(--e-1); gap: var(--e-1); background: var(--superficie-2); }
.seg { display: inline-flex; align-items: center; gap: var(--e-2); border: none; background: transparent; color: var(--texto-suave); padding: var(--e-2) 15px; border-radius: 999px; cursor: pointer; font: inherit; font-size: var(--fs-sm); transition: background var(--t-rapido) ease, color var(--t-rapido) ease; }
.seg svg { opacity: .85; }
.seg.ativo { background: var(--primaria); color: var(--sobre-primaria); font-weight: 650; box-shadow: var(--sombra); }

/* Quem está logado: uma linha discreta, não texto preto solto (parecia debug).
   Só aparece quando há nome. */
.quem-sou { margin: var(--e-1) 0 var(--e-4); font-size: var(--fs-xs); color: var(--texto-fraco); }
.quem-sou:empty { display: none; }

/* Cards de categoria */
.categorias { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); margin-top: var(--e-2); }
@media (max-width: 620px) { .categorias { grid-template-columns: 1fr; } }
/* A área que concentra o acervo ocupa a linha inteira: o card passa a contar onde
   estão os casos. Em uma coluna (mobile) a largura já é total — o que a distingue
   ali é a altura, que vem do próprio conteúdo respirar mais. */
.cat-card.dominante { grid-column: 1 / -1; }
.cat-card.dominante h3 { font-size: var(--fs-xl); }
.cat-card.dominante p { max-width: 52ch; }
@media (max-width: 620px) { .cat-card.dominante { padding: var(--e-6) var(--e-5); } }
.cat-card {
  text-align: left; border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--superficie); color: var(--texto); cursor: pointer; font: inherit;
  padding: var(--e-5) var(--e-5); box-shadow: var(--sombra); transition: transform .16s, box-shadow .16s, border-color .16s;
  position: relative; overflow: hidden;
}
.cat-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--cor); }
.cat-card { transition: transform var(--t-medio) var(--mola), box-shadow var(--t-medio) ease, border-color var(--t-medio) ease; }
.cat-card:hover { transform: translateY(-3px) scale(1.008); box-shadow: var(--sombra-forte); border-color: color-mix(in srgb, var(--cor) 45%, var(--borda)); }
.cat-card:active { transform: translateY(-1px) scale(.99); }
.cat-card .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--cor-suave); color: var(--cor); margin-bottom: var(--e-3); }
.cat-card .ic svg { width: 23px; height: 23px; }
.cat-card h3 { margin: 0 0 var(--e-1); font-size: var(--fs-lg); font-weight: 750; letter-spacing: -.017em; }
.cat-card p { margin: 0; color: var(--texto-suave); font-size: var(--fs-sm); line-height: 1.45; }
.cat-card .qtd { margin-top: var(--e-3); display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cor); background: var(--cor-suave); padding: 5px var(--e-3); border-radius: 8px; }
/* ── Card de área PREENCHIDO (padrão dos 5 eixos) ─────────────────────────────
   O card deixa de ser branco com um filete colorido e passa a ser a própria cor,
   como cada eixo na referência: gradiente diagonal do topo mais claro para a base,
   um brilho acetinado no alto, cantos generosos e uma sombra TINGIDA da cor — o
   que faz o card parecer feito daquele material, não pintado por cima. */
.cat-card.cheio {
  border: none;
  color: var(--fg, #fff);
  background: linear-gradient(158deg, var(--top) 0%, var(--bot) 100%);
  box-shadow:
    0 1px 2px rgba(16,34,46,.12),
    0 14px 30px -10px color-mix(in srgb, var(--bot) 55%, transparent);
}
/* O brilho: uma faixa clara no topo, como luz batendo no material. Fica sob o
   conteúdo (o texto vem acima) e some para baixo. */
.cat-card.cheio::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(158deg, rgba(255,255,255,.22), rgba(255,255,255,0) 46%);
}
/* O filete lateral da versão branca não faz sentido aqui — a cor já é o card. */
.cat-card.cheio::before { display: none; }
.cat-card.cheio > * { position: relative; z-index: 1; }
.cat-card.cheio:hover {
  box-shadow:
    0 2px 4px rgba(16,34,46,.14),
    0 22px 46px -12px color-mix(in srgb, var(--bot) 68%, transparent);
}
.cat-card.cheio h3 { color: var(--fg, #fff); font-weight: 780; letter-spacing: -.02em; }
/* Subtítulo: derivado do primeiro-plano, não uma cor fixa — no âmbar ele escurece
   junto com o texto, em vez de sumir num cinza que só serve para fundo claro. */
.cat-card.cheio p { color: color-mix(in srgb, var(--fg, #fff) 78%, transparent); }
.cat-card.cheio .ic {
  background: color-mix(in srgb, var(--fg, #fff) 20%, transparent);
  color: var(--fg, #fff);
}
/* O selo de contagem era branco 20% sobre a cor do card — branco translúcido
   CLAREIA o fundo, e o texto branco em cima ficava em 1,8:1 no card âmbar e
   2,8:1 no roxo. Trocado por preto translúcido, que escurece: o pior caso
   (âmbar, a cor mais clara dos sete eixos) sobe para 4,7:1 e todos passam com a
   mesma regra, sem precisar de exceção por cor. */
.cat-card.cheio .qtd {
  background: color-mix(in srgb, #000 35%, transparent);
  color: var(--fg, #fff);
}

/* As sete cores. Cada classe só declara os três tokens; o resto herda de .cheio. */
.cat-card.e1 { --top: var(--e1-top); --bot: var(--e1-bot); --fg: var(--e1-fg); }
.cat-card.e2 { --top: var(--e2-top); --bot: var(--e2-bot); --fg: var(--e2-fg); }
.cat-card.e3 { --top: var(--e3-top); --bot: var(--e3-bot); --fg: var(--e3-fg); }
.cat-card.e4 { --top: var(--e4-top); --bot: var(--e4-bot); --fg: var(--e4-fg); }
.cat-card.e5 { --top: var(--e5-top); --bot: var(--e5-bot); --fg: var(--e5-fg); }
.cat-card.e6 { --top: var(--e6-top); --bot: var(--e6-bot); --fg: var(--e6-fg); }
.cat-card.e7 { --top: var(--e7-top); --bot: var(--e7-bot); --fg: var(--e7-fg); }

.cat-card.med { --cor: var(--med); --cor-suave: var(--med-suave); }
.cat-card.psi { --cor: var(--psi); --cor-suave: var(--psi-suave); }

/* Grade de casos */
.topo-secao { display: flex; align-items: center; gap: var(--e-3); margin: var(--e-1) 0 var(--e-5); }
/* O título das telas internas. Vinha com `style` inline no HTML, e estilo inline
   vence media query: a versão estreita abaixo não tinha como agir sobre ele. */
.titulo-secao { margin: 0; font-size: 1.3rem; flex: 1; }

/* Em tela estreita o título ficava numa coluna de ~120px entre "← Início" e
   "Sair", e "Painel administrativo" quebrava em duas linhas dentro dela. As
   ações sobem para uma linha só sua, e o título recebe a largura inteira — que
   é o que ele precisa para ser lido de uma vez. */
@media (max-width: 560px) {
  .topo-secao { flex-wrap: wrap; gap: var(--e-2); }
  .topo-secao > .titulo-secao { flex: 1 0 100%; order: 2; font-size: 1.15rem; }
  .topo-secao > .voltar:first-child { margin-right: auto; }
}
.voltar { display: inline-flex; align-items: center; gap: var(--e-2); border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto); border-radius: 999px; padding: var(--e-2) var(--e-4); cursor: pointer; font: inherit; font-size: var(--fs-sm); }
.voltar:hover { border-color: var(--primaria); color: var(--primaria); }
.chip-cat { font-size: var(--fs-2xs); font-weight: 700; padding: 5px var(--e-3); border-radius: 999px; }
.chip-cat.med { color: var(--med); background: var(--med-suave); }
.chip-cat.psi { color: var(--psi); background: var(--psi-suave); }
.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--e-4); }
.cartao {
  text-align: left; padding: var(--e-4); border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--superficie); color: var(--texto); cursor: pointer; font: inherit; box-shadow: var(--sombra);
  transition: transform .15s, box-shadow .15s, border-color .15s; display: flex; gap: var(--e-3); align-items: flex-start;
}
.cartao:hover { transform: translateY(-2px); box-shadow: var(--sombra-forte); border-color: var(--borda-forte); }
.cartao.selecionado { border-color: var(--cor, var(--primaria)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cor, var(--primaria)) 30%, transparent), var(--sombra); }
.cartao .av { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 750; color: #fff; background: var(--cor, var(--primaria)); }
.cartao.med { --cor: var(--med); } .cartao.psi { --cor: var(--psi); }
/* Card de caso dentro de uma área: herda a cor do eixo do grid (definida em
   abrirCategoria), então o avatar e a seleção acompanham a cor da área — a
   pessoa continua "daquela cor" da vitrine até a lista. */
.cartoes.e1 .eixo-caso { --cor: var(--e1-bot); }
.cartoes.e2 .eixo-caso { --cor: var(--e2-bot); }
.cartoes.e3 .eixo-caso { --cor: var(--e3-bot); }
.cartoes.e4 .eixo-caso { --cor: var(--e4-bot); }
.cartoes.e5 .eixo-caso { --cor: var(--e5-bot); }
.cartoes.e6 .eixo-caso { --cor: var(--e6-bot); }
.cartoes.e7 .eixo-caso { --cor: var(--e7-bot); }
/* O avatar do caso ganha um anel na cor da área e um degradê sutil — deixa de ser
   um disco chapado e passa a fazer parte do mesmo material dos cards de cima.
   Especificidade DELIBERADA (`.cartao.eixo-caso .av`, três classes) para vencer
   `.cartao .av` sem depender de ordem de fonte, e `background-image` em vez do
   shorthand `background`, que aquele `.cartao .av` senão zeraria. */
.cartao.eixo-caso .av {
  background-color: var(--cor);
  background-image: linear-gradient(155deg, color-mix(in srgb, var(--cor) 80%, #fff 20%), var(--cor));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor) 16%, transparent);
}
.cartao h3 { margin: 0 0 var(--e-1); font-size: var(--fs-md); font-weight: 700; }
.cartao p { margin: 1px 0; font-size: var(--fs-sm); color: var(--texto-suave); }
.cartao .q { color: var(--texto); font-weight: 500; }

.botao {
  display: inline-flex; align-items: center; gap: var(--e-2); padding: var(--e-3) var(--e-6); margin-top: var(--e-6);
  background: var(--primaria); border: none; border-radius: var(--raio-sm);
  color: var(--sobre-primaria); font-size: var(--fs-md); font-weight: 600; cursor: pointer; box-shadow: var(--sombra);
  transition: filter var(--t-rapido) ease, transform var(--t-rapido) var(--mola), box-shadow var(--t-rapido) ease;
}
/* Ícone dentro de botão: não encolhe nem estica com o texto, e acompanha a cor
   de quem o hospeda (é `stroke: currentColor`). O `.botao` já é inline-flex com
   gap, então o alinhamento vem de graça. */
.botao > svg.ic, .btn-aleatorio > svg.ic, .voltar > svg.ic,
#botao-mic > svg.ic, #botao-impresso > svg.ic, #botao-som > svg.ic,
#abrir-instrumentos > svg.ic { flex: none; }
.modal-selo > svg.ic { display: block; }
.cabeca > svg.ic { flex: none; margin-right: var(--e-2); vertical-align: -3px; }

.botao:hover { filter: brightness(1.05); box-shadow: var(--sombra-forte); }
/* Afunda por ESCALA, não por deslocamento: o botão cede sob o dedo como um
   objeto físico, e a mola o traz de volta. */
.botao:active { transform: scale(.965); filter: brightness(.97); }
.botao:disabled { opacity: .45; cursor: default; }
.botao.secundario { background: transparent; color: var(--primaria); border: 1px solid var(--borda-forte); box-shadow: none; }
.botao.secundario:hover { border-color: var(--primaria); }

/* Consulta */
.cabecalho-consulta {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: var(--e-3);
  background: color-mix(in srgb, var(--superficie) 88%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borda); padding: var(--e-3) var(--e-5); margin: -26px -18px var(--e-4); flex-wrap: wrap;
}
.avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; color: #fff; display: grid; place-items: center; font-weight: 750; font-size: var(--fs-lg); background: var(--cor, var(--primaria)); }
.cab-info { flex: 1; min-width: 150px; }
.cab-info strong { display: block; font-weight: 700; }
.cab-info span { font-size: var(--fs-xs); color: var(--texto-suave); }
.cab-badge { font-size: var(--fs-3xs); font-weight: 700; padding: var(--e-1) var(--e-2); border-radius: 999px; margin-left: var(--e-2); vertical-align: middle; }
.cab-badge.med { color: var(--med); background: var(--med-suave); } .cab-badge.psi { color: var(--psi); background: var(--psi-suave); }
.acoes { display: flex; gap: var(--e-2); align-items: center; }
.acoes button { padding: 9px var(--e-3); border-radius: 999px; border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto); cursor: pointer; font-size: var(--fs-sm); transition: border-color .15s, color .15s; }
.acoes button.ligado { border-color: var(--primaria); color: var(--primaria); font-weight: 650; }
.acoes .encerrar { color: var(--falha); border-color: color-mix(in srgb, var(--falha) 35%, var(--borda)); }

.palco { display: flex; gap: var(--e-5); align-items: flex-start; min-width: 0; }
.coluna-chat { flex: 1; min-width: 0; }
.fluxo-mensagens { display: flex; flex-direction: column; gap: var(--e-3); padding-bottom: var(--e-2); min-width: 0; }
/* `overflow-wrap: anywhere` não é detalhe tipográfico: uma palavra sem espaço — um
   nome de exame com sublinhados, um link colado, um laudo em CAPS — esticava o
   balão, e com ele a coluna, o palco e a página inteira. No celular a consulta
   inteira passava a rolar de lado. Quebrar a palavra é sempre melhor que quebrar
   a tela. */
.balao {
  max-width: 84%; padding: var(--e-3) 15px; border-radius: 20px; white-space: pre-wrap;
  overflow-wrap: anywhere; word-break: break-word; hyphens: auto;
  /* Sombra de contato, mais leve que a dos cartões: o balão descansa sobre a
     conversa, não flutua acima dela. */
  box-shadow: 0 1px 2px rgba(16,34,46,.06);
  /* Entra crescendo a partir do canto de quem falou — o balão "sai" de junto do
     interlocutor, como no idioma de mensageria da Apple. */
  animation: balaoEntra .32s var(--mola);
  transform-origin: var(--origem, center bottom);
}
.balao.aluno {
  align-self: flex-end; background: var(--aluno); color: #fff;
  border-bottom-right-radius: 6px; --origem: right bottom;
}
.balao.paciente {
  align-self: flex-start; background: var(--paciente);
  border-bottom-left-radius: 6px; --origem: left bottom;
}
@keyframes balaoEntra {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.balao.paciente.digitando-vivo::after { content: "▋"; margin-left: 1px; color: var(--texto-suave); animation: piscar 1s steps(1) infinite; }
@keyframes piscar { 50% { opacity: 0; } }
.balao.exame {
  align-self: stretch; background: var(--exame); border: 1px solid var(--exame-borda); color: var(--exame-texto);
  border-radius: 12px; font-size: var(--fs-md); max-width: 100%;
}
.balao.exame strong { display: block; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--e-1); opacity: .85; }
.balao.aviso { align-self: center; background: var(--aviso-fundo); color: var(--aviso-texto); font-size: var(--fs-xs); border-radius: 10px; max-width: 100%; box-shadow: none; border: 1px solid var(--borda); }
.balao.digitando { align-self: flex-start; color: var(--texto-suave); background: var(--paciente); display: flex; align-items: center; gap: var(--e-2); }
.balao.digitando .quem { font-size: var(--fs-sm); }
.pontos-digita { display: inline-flex; gap: var(--e-1); }
.pontos-digita i { width: 7px; height: 7px; border-radius: 50%; background: var(--texto-suave); display: inline-block; animation: balancar 1.2s infinite ease-in-out; }
.pontos-digita i:nth-child(2) { animation-delay: .18s; } .pontos-digita i:nth-child(3) { animation-delay: .36s; }
@keyframes balancar { 0%,80%,100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-4px); opacity: 1; } }
.rotulo-demo { font-size: var(--fs-3xs); color: var(--texto-suave); margin-top: var(--e-1); display: block; }

/* Presença do paciente.
   No desktop ela é uma coluna à esquerda da conversa; no celular, uma faixa fixa no
   alto — o paciente continua à vista enquanto o aluno rola a transcrição, que é
   exatamente o que acontece numa consulta: a pessoa não some quando você anota. */
.sala {
  position: sticky; top: 78px; align-self: flex-start; flex: none;
  width: min(400px, 38vw); border-radius: var(--raio); overflow: hidden;
  border: 1px solid var(--borda); box-shadow: var(--sombra-forte);
  background: linear-gradient(160deg, #e6e0d6, #cfc6ba);
  animation: entra .25s ease;
}
.sala-tela { width: 100%; aspect-ratio: 4 / 5; max-height: 62vh; }
.sala-tela canvas { display: block; width: 100% !important; height: 100% !important; }
/* A legenda vive SOBRE o canvas, que agora é claro: texto branco sumiria. Segue a
   paleta do tema, com um degradê da própria superfície para não cortar o desenho. */
.sala-legenda {
  position: absolute; inset: auto 0 0 0; margin: 0; padding: var(--e-3) var(--e-3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  font-size: var(--fs-xs); font-weight: 600; color: var(--texto-suave);
  background: linear-gradient(transparent, color-mix(in srgb, var(--superficie) 85%, transparent) 55%);
  pointer-events: none;
}
.sala-fechar {
  pointer-events: auto; border: 1px solid var(--borda); background: var(--superficie);
  color: var(--texto-suave); width: 32px; height: 32px; min-width: 32px; border-radius: 50%;
  cursor: pointer; font-size: var(--fs-xs); line-height: 1; display: grid; place-items: center;
}
.sala-fechar:hover { color: var(--texto); border-color: var(--borda-forte); }
#botao-sala.ligado { border-color: var(--primaria); color: var(--primaria); font-weight: 650; }

@media (max-width: 860px) {
  .palco.com-sala { flex-direction: column; }
  .sala { width: 100%; top: 60px; z-index: 4; }
  /* Altura curta de propósito: no celular a conversa é o que precisa de espaço, e
     uma sala que come a tela inteira empurra os balões para fora do alcance. */
  .sala-tela { aspect-ratio: auto; height: min(38vh, 300px); }
}
@media (max-width: 400px) { .sala-tela { height: min(32vh, 240px); } }

/* Instrumentos (medicina) */
.painel-instrumentos { width: 268px; flex: none; position: sticky; top: 78px; align-self: flex-start; }
.painel-instrumentos .cabeca { font-size: var(--fs-2xs); font-weight: 750; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); margin: var(--e-meio) 0 var(--e-3); display: flex; align-items: center; gap: var(--e-2); }
.grupo-inst { margin-bottom: var(--e-4); }
.grupo-inst .titulo { font-size: var(--fs-2xs); font-weight: 700; color: var(--med); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 var(--e-2); }
.inst-botoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.inst {
  border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto);
  border-radius: 999px; padding: var(--e-2) var(--e-3); cursor: pointer; font: inherit; font-size: var(--fs-xs);
  box-shadow: var(--sombra); transition: border-color .15s, transform .1s, background .15s;
}
.inst:hover { border-color: var(--med); color: var(--med); }
.inst:active { transform: translateY(1px); }
.inst:disabled { opacity: .5; cursor: default; }
#abrir-instrumentos { display: none; }
@media (max-width: 860px) {
  .painel-instrumentos {
    position: fixed; inset: auto 0 0 0; top: auto; width: 100%; z-index: 40;
    background: var(--superficie); border-top: 1px solid var(--borda); box-shadow: var(--sombra-forte);
    border-radius: 18px 18px 0 0; padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
    transform: translateY(105%); visibility: hidden; transition: transform .25s ease, visibility .25s; max-height: 62vh; overflow-y: auto;
  }
  .painel-instrumentos.aberto { transform: none; visibility: visible; }
  #abrir-instrumentos { display: inline-flex; }
  /* Alvos de toque >= 44px no fluxo de consulta (recomendação de acessibilidade).
     `.btn-aleatorio` estava de fora e media 42px — 2px que ninguém vê e o polegar
     sente. É o botão que abre uma estação sorteada, ou seja, um dos caminhos de
     entrada no produto. */
  .acoes button, .voltar, .seg, .inst, .btn-aleatorio { min-height: 44px; }
  .fechar-inst { min-height: 44px; min-width: 44px; align-items: center; justify-content: center; }
}
.fechar-inst { display: none; }
@media (max-width: 860px) { .fechar-inst { display: inline-flex; float: right; border: none; background: transparent; color: var(--texto-suave); font-size: var(--fs-lg); cursor: pointer; } }

/* Barra de entrada */
.entrada { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; background: color-mix(in srgb, var(--superficie) 92%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--borda); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
.entrada .interno { max-width: 940px; margin: 0 auto; display: flex; gap: var(--e-2); align-items: center; }
/* `min-width: 0` porque um input em flex tem largura mínima intrínseca: sem isso,
   com o microfone e o botão "Ao vivo" na mesma linha, o campo de digitar era
   espremido a 30 px no celular — dava para ver a caixa, mas não o que se escrevia. */
.entrada input { flex: 1; min-width: 0; }
.rotulo-btn { margin-left: var(--e-2); }
.entrada button.enviar { padding: var(--e-3) var(--e-5); border: none; border-radius: var(--raio-sm); background: var(--primaria); color: var(--sobre-primaria); font-size: var(--fs-md); font-weight: 650; cursor: pointer; box-shadow: var(--sombra); }
#botao-mic { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); padding: var(--e-3) 15px; min-width: 50px; min-height: 46px; background: var(--superficie); color: var(--texto); border: 1px solid var(--borda-forte); border-radius: 999px; font-size: var(--fs-lg); cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; }
#botao-mic .mic-label { font-size: var(--fs-xs); font-weight: 650; }
#botao-mic:disabled { opacity: .45; cursor: default; }
#botao-mic.gravando { background: var(--falha); color: #fff; border-color: var(--falha); animation: pulso 1.1s ease-out infinite; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--falha) 55%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
/* Conversa ao vivo. O estado ligado NÃO vira um botão vermelho inteiro: um ponto
   que pulsa diz a mesma coisa sem gritar, e num aparelho pequeno o vermelho cheio
   dominava a barra como se fosse o assunto principal da tela — não é. */
#botao-vivo { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); padding: var(--e-3) 15px; min-width: 50px; min-height: 46px; background: var(--superficie); color: var(--texto); border: 1px solid var(--borda-forte); border-radius: 999px; font-size: var(--fs-md); cursor: pointer; user-select: none; -webkit-user-select: none; transition: border-color .15s, background .15s; }
#botao-vivo .mic-label { font-size: var(--fs-xs); font-weight: 650; }
#botao-vivo .ponto-vivo { width: 10px; height: 10px; border-radius: 50%; background: var(--texto-fraco); flex: none; transition: background .15s; }
#botao-vivo:disabled { opacity: .45; cursor: default; }
#botao-vivo.conectando { cursor: progress; }
#botao-vivo.conectando .ponto-vivo { background: var(--texto-suave); animation: piscar 1s steps(1) infinite; }
#botao-vivo.ligado { border-color: var(--falha); color: var(--falha); background: color-mix(in srgb, var(--falha) 8%, var(--superficie)); }
#botao-vivo.ligado .ponto-vivo { background: var(--falha); animation: pulso-ponto 1.6s ease-out infinite; }
@keyframes pulso-ponto { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--falha) 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
#botao-vivo.oculto { display: none; }
#inst-toggle-wrap { max-width: 940px; margin: 0 auto var(--e-2); }
.dica-mic { max-width: 940px; margin: var(--e-2) auto 0; font-size: var(--fs-xs); color: var(--texto-suave); display: flex; align-items: center; gap: var(--e-2); }
.dica-mic.gravando { color: var(--falha); font-weight: 650; }
.dica-mic .ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--falha); display: none; }
.dica-mic.gravando .ponto { display: inline-block; animation: piscar 1s steps(1) infinite; }

/* Avaliação / painel */
.nota-geral {
  display: flex; align-items: baseline; gap: var(--e-3); border-radius: var(--raio);
  padding: var(--e-6) var(--e-6); margin-bottom: var(--e-5); box-shadow: var(--sombra); border: none;
  /* A nota é o momento do resultado — merece material, não uma caixa branca. Um
     degradê discreto da cor da marca, com o número em destaque tabular. */
  background: linear-gradient(158deg, var(--primaria-suave) 0%, var(--superficie) 55%);
}
.nota-geral .valor { font-size: var(--fs-5xl); font-weight: 750; color: var(--primaria); letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.criterio { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: var(--e-4) var(--e-4); margin-bottom: var(--e-3); box-shadow: var(--sombra); }
.criterio h3 { margin: 0; font-size: var(--fs-md); display: flex; justify-content: space-between; gap: var(--e-2); }
.criterio .objetivo { margin: var(--e-1) 0 var(--e-3); font-size: var(--fs-sm); color: var(--texto-suave); }
.itens { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.item { font-size: var(--fs-xs); padding: var(--e-1) var(--e-3); border-radius: 999px; border: 1px solid var(--borda-forte); }
.item.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--borda)); }
.item.falha { color: var(--falha); border-color: color-mix(in srgb, var(--falha) 40%, var(--borda)); text-decoration: line-through; opacity: .8; }
.parecer { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: var(--e-5); white-space: pre-wrap; font-size: var(--fs-md); box-shadow: var(--sombra); }
.faixa-aviso { background: var(--aviso-fundo); color: var(--aviso-texto); border-radius: 10px; padding: var(--e-3) 15px; margin-bottom: var(--e-4); font-size: var(--fs-sm); border: 1px solid var(--borda); }
.linha-consulta { width: 100%; }
.linha-consulta h3 { display: flex; justify-content: space-between; gap: var(--e-2); }
.nota-linha { color: var(--primaria); font-weight: 700; }
#tela-detalhe h2, #tela-consulta h2 { font-size: var(--fs-lg); margin: var(--e-6) 0 var(--e-3); }

/* Botão de caso aleatório */
.aleatorio-linha { display: flex; justify-content: flex-end; margin: -6px 0 var(--e-4); }
.btn-aleatorio { display: inline-flex; align-items: center; gap: var(--e-2); border: 1px dashed var(--borda-forte); background: var(--superficie); color: var(--texto); border-radius: 999px; padding: 9px var(--e-4); cursor: pointer; font: inherit; font-size: var(--fs-sm); font-weight: 600; transition: border-color .15s, color .15s, transform .1s; }
.btn-aleatorio:hover { border-color: var(--primaria); color: var(--primaria); border-style: solid; }
.btn-aleatorio:active { transform: translateY(1px); }
.aleatorio-home { margin-top: var(--e-4); }

/* Modal (código de acesso) */
.modal { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: var(--e-5); background: color-mix(in srgb, #05121b 46%, transparent); backdrop-filter: blur(16px) saturate(1.4); animation: entra var(--t-rapido) ease; }
.modal-box { background: var(--superficie); border: 1px solid var(--borda); border-radius: 22px; box-shadow: var(--sombra-forte); padding: 28px var(--e-6); max-width: 380px; width: 100%; text-align: center; animation: subiModal var(--t-medio) var(--mola); }
@keyframes subiModal { from { transform: translateY(14px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-selo { width: 60px; height: 60px; border-radius: 18px; margin: 0 auto var(--e-4); display: grid; place-items: center; font-size: var(--fs-3xl); background: var(--primaria-suave); color: var(--primaria); }
.modal-box h2 { margin: 0 0 var(--e-1); font-size: var(--fs-xl); }
.modal-box input { width: 100%; text-align: center; letter-spacing: .5em; font-size: var(--fs-2xl); padding: var(--e-4); border: 1px solid var(--borda-forte); border-radius: var(--raio-sm); background: var(--superficie-2); color: var(--texto); }
.modal-box input:focus { outline: none; border-color: var(--primaria); box-shadow: 0 0 0 4px var(--primaria-suave); }
.modal-erro { color: var(--falha); font-size: var(--fs-sm); font-weight: 600; margin-top: var(--e-3); }
.modal-acoes { display: flex; gap: var(--e-3); margin-top: var(--e-5); }
.modal-acoes .botao { flex: 1; margin-top: 0; justify-content: center; }

/* Splash */
#splash {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background:
    radial-gradient(900px 500px at 70% 8%, color-mix(in srgb, var(--primaria) 30%, transparent), transparent 60%),
    radial-gradient(800px 500px at 20% 100%, color-mix(in srgb, var(--psi) 22%, transparent), transparent 60%),
    var(--fundo-2);
  transition: opacity .5s ease, visibility .5s; text-align: center;
}
#splash.sai { opacity: 0; visibility: hidden; }
.splash-selo {
  width: 78px; height: 78px; border-radius: 22px; margin: 0 auto var(--e-5); display: grid; place-items: center;
  font-size: var(--fs-4xl); color: #fff; background: linear-gradient(160deg, var(--primaria), color-mix(in srgb, var(--primaria) 55%, #000 10%));
  box-shadow: var(--sombra-forte); animation: pulsaSelo 1.8s ease-in-out infinite;
}
@keyframes pulsaSelo { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.04); } }
.splash-tit { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -.028em; }
.splash-sub { color: var(--texto-suave); margin-top: var(--e-1); }
.splash-barra { width: 168px; height: 5px; border-radius: 999px; background: var(--borda); margin: var(--e-5) auto 0; overflow: hidden; }
.splash-barra i { display: block; height: 100%; width: 40%; border-radius: 999px; background: var(--primaria); animation: correBarra 1.1s ease-in-out infinite; }
@keyframes correBarra { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }

/* Tela de análise (geração da nota) */
#tela-analise { max-width: 640px; }
.analise-wrap { text-align: center; padding: var(--e-2) 0 var(--e-5); }
.analise-topo { width: 84px; height: 84px; margin: var(--e-6) auto var(--e-4); border-radius: 50%; display: grid; place-items: center; background: var(--primaria-suave); }
.analise-topo .spinner { width: 44px; height: 44px; border-radius: 50%; border: 4px solid color-mix(in srgb, var(--primaria) 25%, transparent); border-top-color: var(--primaria); animation: gira .9s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.etapas { list-style: none; padding: 0; margin: var(--e-6) auto 0; max-width: 440px; text-align: left; display: flex; flex-direction: column; gap: var(--e-3); }
.etapas li { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) 15px; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--superficie); color: var(--texto-suave); box-shadow: var(--sombra); transition: color .3s, border-color .3s, transform .2s; }
.etapas li .marca-etapa { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: var(--fs-xs); border: 2px solid var(--borda-forte); color: transparent; transition: all .3s; }
.etapas li.ativo { color: var(--texto); border-color: color-mix(in srgb, var(--primaria) 45%, var(--borda)); }
.etapas li.ativo .marca-etapa { border-color: var(--primaria); border-top-color: transparent; animation: gira .8s linear infinite; }
.etapas li.feito { color: var(--texto); }
.etapas li.feito .marca-etapa { background: var(--ok); border-color: var(--ok); color: #fff; animation: none; }

/* Resultado — anel de nota + veredito */
.resultado-topo { display: flex; align-items: center; gap: var(--e-6); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: var(--e-6); box-shadow: var(--sombra); margin-bottom: var(--e-5); flex-wrap: wrap; }
.anel-box { position: relative; width: 128px; height: 128px; flex: none; }
.anel { width: 128px; height: 128px; transform: rotate(-90deg); }
.anel .trilho { fill: none; stroke: var(--borda); stroke-width: 11; }
.anel .progresso { fill: none; stroke: var(--cor-nota, var(--primaria)); stroke-width: 11; stroke-linecap: round; transition: stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1); }
.anel-valor { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.anel-valor span { font-size: var(--fs-4xl); font-weight: 760; line-height: 1; color: var(--cor-nota, var(--primaria)); }
.anel-valor small { color: var(--texto-suave); font-size: var(--fs-xs); margin-top: var(--e-meio); }
.resultado-info { flex: 1; min-width: 190px; }
.veredito-badge { display: inline-block; font-weight: 750; font-size: var(--fs-xs); padding: 5px var(--e-3); border-radius: 999px; margin-bottom: var(--e-2); color: var(--cor-nota, var(--primaria)); background: color-mix(in srgb, var(--cor-nota, var(--primaria)) 14%, transparent); }
.resultado-info h1 { margin: var(--e-meio) 0; font-size: var(--fs-xl); }

/* Critérios com barra (decomposição da nota) */
.criterio .topo-crit { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); }
.criterio .pts { font-weight: 750; color: var(--primaria); font-size: var(--fs-sm); white-space: nowrap; }
.criterio .barra-crit { height: 8px; border-radius: 999px; background: var(--borda); overflow: hidden; margin: 9px 0 var(--e-3); }
.criterio .barra-crit i { display: block; height: 100%; border-radius: 999px; background: var(--cor-crit, var(--primaria)); width: 0; transition: width .9s cubic-bezier(.22,1,.36,1); }

/* ---- Severidade: rampa ordenada de 3 faixas (boa → atenção → crítica).
   Validada para separação em daltonismo e para visão normal contra as duas
   superfícies do app. O amarelo fica abaixo de 3:1 no claro, então TODO medidor
   carrega o valor numérico visível — a cor nunca é o único canal. ---- */
:root { --sev-boa: #0ca30c; --sev-atencao: #fab219; --sev-critica: #d03b3b; }

/* ---- Cronômetro e contadores da estação ---- */
.medidores-estacao { display: flex; align-items: center; gap: var(--e-3); font-size: var(--fs-xs); color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.medidores-estacao b { font-weight: 700; color: var(--texto); }
.medidores-estacao .sep { width: 1px; height: 14px; background: var(--borda-forte); }
@media (max-width: 620px) { .medidores-estacao .sep, .medidores-estacao .rotulo-longo { display: none; } }

/* ---- Anotações do estudante ---- */
.bloco-notas { margin-top: var(--e-4); }
.bloco-notas .cabeca { font-size: var(--fs-2xs); font-weight: 750; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); margin: 0 0 var(--e-2); }
.bloco-notas textarea {
  width: 100%; min-height: 120px; resize: vertical; padding: var(--e-3) var(--e-3); font: inherit; font-size: var(--fs-sm);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-sm); background: var(--superficie); color: var(--texto);
}
.bloco-notas textarea:focus { outline: none; border-color: var(--primaria); box-shadow: 0 0 0 4px var(--primaria-suave); }
.bloco-notas .dica { font-size: var(--fs-2xs); color: var(--texto-fraco); margin: var(--e-2) 0 0; }

/* ---- Fechamento diagnóstico ---- */
.modal-box.largo { max-width: 560px; text-align: left; }
.modal-box.largo h2 { text-align: left; }
.campo-fecha { margin-bottom: var(--e-4); }
.campo-fecha label { margin: 0 0 var(--e-2); font-size: var(--fs-sm); }
.campo-fecha textarea {
  width: 100%; min-height: 62px; resize: vertical; padding: var(--e-3) var(--e-3); font: inherit; font-size: var(--fs-sm);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-sm); background: var(--superficie-2); color: var(--texto);
}
.campo-fecha textarea:focus { outline: none; border-color: var(--primaria); box-shadow: 0 0 0 4px var(--primaria-suave); }
.campo-fecha .ajuda { font-size: var(--fs-2xs); color: var(--texto-fraco); margin: var(--e-1) 0 0; }
.aviso-compromisso { background: var(--aviso-fundo); color: var(--aviso-texto); border: 1px solid var(--borda); border-radius: 10px; padding: var(--e-3) var(--e-3); font-size: var(--fs-xs); margin-bottom: var(--e-4); }

/* ---- Resultado: faixa de indicadores (sem gráfico — são números soltos) ---- */
.indicadores { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-3); margin-bottom: var(--e-5); }
.indicador { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: var(--e-4) var(--e-4); box-shadow: var(--sombra); }
.indicador .rotulo { font-size: var(--fs-2xs); color: var(--texto-suave); margin-bottom: var(--e-1); }
.indicador .valor { font-size: var(--fs-2xl); font-weight: 750; line-height: 1.1; }
.indicador .valor small { font-size: var(--fs-xs); font-weight: 600; color: var(--texto-suave); margin-left: var(--e-meio); }
@media (max-width: 520px) { .indicadores { grid-template-columns: 1fr 1fr; } }

/* ---- Confronto da hipótese com o gabarito ---- */
.fecha-card { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: var(--e-5); box-shadow: var(--sombra); margin-bottom: var(--e-5); }
.fecha-card h3 { margin: 0 0 var(--e-3); font-size: var(--fs-md); }
.fecha-linha { padding: var(--e-3) 0; border-top: 1px solid var(--borda); }
.fecha-linha:first-of-type { border-top: none; padding-top: 0; }
.fecha-rotulo { font-size: var(--fs-2xs); font-weight: 750; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); margin-bottom: var(--e-1); }
.fecha-texto { font-size: var(--fs-md); white-space: pre-wrap; }
.fecha-texto.vazio { color: var(--texto-fraco); font-style: italic; }
.fecha-dif { margin: var(--e-2) 0 0; padding-left: var(--e-5); font-size: var(--fs-sm); color: var(--texto-suave); }
.fecha-dif li { margin-bottom: var(--e-1); }
/* Estado sempre com ícone + palavra: a cor é reforço, nunca o único sinal. */
.selo-estado { display: inline-flex; align-items: center; gap: var(--e-2); font-weight: 700; font-size: var(--fs-xs); padding: 5px var(--e-3); border-radius: 999px; border: 1px solid currentColor; }

/* ---- Medidor por critério ----
   Trilho = passo claro da MESMA cor do preenchimento (estado legível na barra
   inteira); ponta arredondada em 4px e quadrada na base; valor sempre visível. */
.criterio .barra-crit { height: 10px; border-radius: 0 4px 4px 0; background: color-mix(in srgb, var(--cor-crit, var(--primaria)) 16%, transparent); overflow: hidden; margin: 9px 0 var(--e-3); }
.criterio .barra-crit i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--cor-crit, var(--primaria)); width: 0; transition: width .9s cubic-bezier(.22,1,.36,1); }
.criterio .pts { font-weight: 700; color: var(--texto); font-size: var(--fs-sm); white-space: nowrap; font-variant-numeric: tabular-nums; }
.criterio .pts .de { color: var(--texto-suave); font-weight: 600; }

/* ---- Revisão da consulta pelo próprio aluno ---- */
.revisao-toggle { display: flex; align-items: center; gap: var(--e-2); }
#revisao-consulta { border: 1px solid var(--borda); border-radius: var(--raio); padding: var(--e-4); background: var(--superficie-2); max-height: 460px; overflow-y: auto; }

/* ---- Avisos passageiros (substituem alert(), que trava a página) ---- */
#torradas { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 120; display: flex; flex-direction: column; gap: var(--e-2); align-items: center; pointer-events: none; width: min(92vw, 460px); }
.torrada { background: var(--texto); color: var(--superficie); padding: var(--e-3) var(--e-4); border-radius: 12px; font-size: var(--fs-sm); box-shadow: var(--sombra-forte); animation: entra .22s ease; text-align: center; }
.torrada.erro { background: var(--falha); color: #fff; }

.oculto { display: none !important; }

/* Respeita quem pediu menos movimento no sistema: a interface tem splash,
   digitação, anéis e barras animadas — tudo isso vira transição instantânea. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   LINGUAGEM VISUAL (D1)
   ══════════════════════════════════════════════════════════════════════════

   Esta camada não redesenha nada: ela dá NOME e REGRA ao que já existia solto.
   Antes havia duas sombras (`--sombra`, `--sombra-forte`) sem critério de quando
   usar cada uma, e cada transição escolhia a própria duração no olho (.1s, .15s,
   .16s, .25s). O resultado é um conjunto que parece quase alinhado — e "quase"
   é justamente o que o olho registra como amador.

   O princípio é DEFERÊNCIA: a interface recua para o conteúdo liderar. Isto é um
   simulador clínico cronometrado; efeito que disputa atenção com o aluno sendo
   avaliado é defeito, não charme.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  /* ELEVAÇÃO — a sombra diz o que está ACIMA do quê, e nada além disso.
     Três níveis, cada um com um momento próprio. Um quarto nível seria ruído:
     ninguém percebe a diferença, mas todo mundo percebe a inconsistência. */
  --elev-repouso: 0 1px 2px rgba(16,34,46,.04), 0 8px 24px rgba(16,34,46,.06);
  --elev-levantado: 0 2px 4px rgba(16,34,46,.06), 0 12px 30px rgba(16,34,46,.10);
  --elev-sobreposto: 0 2px 6px rgba(16,34,46,.08), 0 18px 40px rgba(16,34,46,.12);

  /* MOVIMENTO — saída mais rápida que entrada. Some sem fazer esperar, aparece
     sem sobressalto. É a assimetria que faz a interface parecer que responde em
     vez de parecer que processa. */
  --rapido: 150ms;
  --normal: 220ms;
  --lento: 320ms;
  --curva-entrada: cubic-bezier(.22, 1, .36, 1);
  --curva-saida: cubic-bezier(.4, 0, 1, 1);
  --curva-padrao: cubic-bezier(.4, 0, .2, 1);

  /* TIPOGRAFIA — hierarquia declarada, em vez de tamanho escolhido caso a caso. */
  --t-display: 1.75rem;
  --t-titulo: 1.25rem;
  --t-corpo: 1rem;
  --t-apoio: .875rem;
  --t-nota: .8rem;

  /* Alvo de toque mínimo. A v4 acertou isto no braço, elemento por elemento;
     aqui vira número com nome, para não regredir na próxima tela. */
  --toque-min: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* No escuro, sombra preta some. A elevação passa a ser sustentada por sombra
       mais densa e por um halo claro de 1px no topo — que é o que o olho lê como
       "esta superfície está mais perto". */
    --elev-repouso: 0 1px 2px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.28);
    --elev-levantado: 0 2px 6px rgba(0,0,0,.38), 0 14px 34px rgba(0,0,0,.40);
    --elev-sobreposto: 0 4px 10px rgba(0,0,0,.45), 0 22px 48px rgba(0,0,0,.55);
  }
}

/* ── Primitivas ────────────────────────────────────────────────────────────
   Refinam o que já existe (.cartao, .cat-card, .botao, .modal-box) em vez de
   criar um segundo conjunto. Dois sistemas de card na mesma página é como o
   desalinho começa. */

/* Superfície clicável: repouso → levantado, com o mesmo gesto em toda a página. */
.cartao,
.cat-card {
  box-shadow: var(--elev-repouso);
  transition:
    transform var(--rapido) var(--curva-padrao),
    box-shadow var(--rapido) var(--curva-padrao),
    border-color var(--rapido) var(--curva-padrao);
}

.cartao:hover,
.cat-card:hover {
  box-shadow: var(--elev-levantado);
  border-color: var(--borda-forte);
  transform: translateY(-2px);
}

/* Pressionado volta ao chão: o card "afunda" de novo, fechando o gesto. Sem isto
   o clique fica sem resposta tátil e a interface parece travada. */
.cartao:active,
.cat-card:active {
  box-shadow: var(--elev-repouso);
  transform: translateY(0);
  transition-duration: var(--rapido);
}

/* Foco de teclado com o MESMO anel em toda a interface. Já existia como
   `0 0 0 4px var(--primaria-suave)` espalhado em regras soltas; aqui é regra. */
.cartao:focus-visible,
.cat-card:focus-visible,
.botao:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
/* `tabindex="-1"` quer dizer "só alcançável por script". É o caso do título de
   cada tela, que recebe foco na troca para o leitor de tela anunciar onde a
   pessoa chegou — anúncio que não deve vir acompanhado do anel de navegação por
   teclado, porque ninguém navegou até ali. Sem esta exceção, "Painel
   administrativo" aparecia dentro de uma caixa com sombra, e parecia um campo. */
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--primaria-suave), var(--elev-levantado);
  border-color: var(--primaria);
}

/* Botões: os cinco estados, e as duas variantes que faltavam.
   `min-height` garante o alvo de toque mesmo quando o texto for curto. */
.botao {
  min-height: var(--toque-min);
  box-shadow: var(--elev-repouso);
  transition:
    filter var(--rapido) var(--curva-padrao),
    box-shadow var(--rapido) var(--curva-padrao),
    transform var(--rapido) var(--curva-padrao);
}

.botao:hover:not(:disabled) { filter: brightness(1.06); box-shadow: var(--elev-levantado); }
.botao:active:not(:disabled) { transform: translateY(1px); box-shadow: var(--elev-repouso); filter: brightness(.98); }
.botao:disabled { opacity: .5; cursor: default; box-shadow: none; filter: none; }

.botao.secundario {
  background: var(--superficie);
  color: var(--texto);
  border: 1px solid var(--borda-forte);
}

.botao.perigo {
  background: var(--falha);
  color: #fff;
}

/* Campo de texto: a borda responde ao foco antes do anel aparecer, então o
   caminho do olho é contínuo em vez de piscar. */
input, select, textarea {
  transition: border-color var(--rapido) var(--curva-padrao),
              box-shadow var(--rapido) var(--curva-padrao);
}

/* Sobreposição: modal é o único nível que pode usar a elevação máxima. */
.modal-box {
  box-shadow: var(--elev-sobreposto);
  animation: subiModal var(--normal) var(--curva-entrada);
}

/* Login: dois campos empilhados. A regra genérica de `.modal-box input` foi feita
   para o código numérico de 4 dígitos (centralizado, com espaçamento largo entre
   caracteres) — aplicada a "matrícula" e "senha", vira ilegível. */
.campos-login { display: grid; gap: var(--e-3); margin-bottom: var(--e-4); }
.campos-login input {
  text-align: left;
  letter-spacing: normal;
  font-size: var(--fs-md);
  min-height: var(--toque-min);
}

/* ── Painel: abas e gestão de contas ─────────────────────────────────────── */
/* As cinco abas somam 541px e não cabem num celular de 390. Sem rolagem PRÓPRIA
   elas empurravam a página inteira para o lado: "Convites" e "Diagnóstico"
   ficavam fora da tela, e a única forma de alcançá-las era arrastar o documento
   todo — que é o que produzia aquela barra horizontal no rodapé do painel.

   Agora a barra rola sozinha, o documento fica parado, e o degradê na borda
   direita avisa que há mais aba adiante. Sem ele a fileira termina numa borda
   limpa e parece completa. */
.abas-painel {
  display: flex; gap: var(--e-2);
  margin: var(--e-3) 0 var(--e-1);
  border-bottom: 1px solid var(--borda);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.abas-painel::-webkit-scrollbar { display: none; }
/* Sem conteúdo escondido não há o que avisar: o degradê some quando tudo cabe. */
@media (min-width: 620px) {
  .abas-painel { -webkit-mask-image: none; mask-image: none; overflow-x: visible; }
}
.aba {
  padding: var(--e-3) var(--e-4); min-height: var(--toque-min); border: none; background: none;
  color: var(--texto-suave); font: inherit; font-weight: 650; cursor: pointer;
  border-bottom: 2px solid transparent; border-radius: var(--raio-sm) var(--raio-sm) 0 0;
  transition: color var(--rapido) var(--curva-padrao), border-color var(--rapido) var(--curva-padrao);
  flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap;
}
.aba:hover { color: var(--texto); }
.aba.ativa { color: var(--primaria); border-bottom-color: var(--primaria); }

.form-conta {
  display: grid; gap: var(--e-3); padding: var(--e-5); margin: var(--e-4) 0 var(--e-5);
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--elev-repouso);
}
.linha-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
.linha-form label { display: grid; gap: var(--e-1); font-size: var(--t-apoio); font-weight: 650; color: var(--texto-suave); }
.linha-form input, .linha-form select {
  padding: var(--e-3) var(--e-3); min-height: var(--toque-min); font-size: var(--t-corpo);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-sm);
  background: var(--superficie-2); color: var(--texto); font-family: inherit;
}
.acoes-form { display: flex; gap: var(--e-3); justify-content: flex-end; flex-wrap: wrap; }
.acoes-form .botao { margin-top: 0; }

.conta-linha { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; cursor: default; margin-bottom: var(--e-3); }
.conta-linha.inativa { opacity: .6; }
.conta-linha h3 { margin: 0 0 var(--e-meio); font-size: var(--t-corpo); display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.conta-linha p { margin: 0; font-size: var(--t-apoio); color: var(--texto-suave); }
.chip-papel {
  font-size: var(--t-nota); font-weight: 650; padding: var(--e-meio) 9px; border-radius: 999px;
  background: var(--primaria-suave); color: var(--primaria);
}
.chip-papel.inativo { background: color-mix(in srgb, var(--falha) 16%, transparent); color: var(--falha); }
.acoes-conta { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.acoes-conta .botao { margin-top: 0; padding: 9px var(--e-4); font-size: var(--t-apoio); }

@media (max-width: 620px) { .linha-form { grid-template-columns: 1fr; } }

/* ── Cores das áreas novas ─────────────────────────────────────────────────
   Mesma mecânica de --med/--psi: um tom cheio e um suave por área, com par
   escuro. A home desenha os cards a partir do acervo, então área nova só
   precisa de um par de cores aqui (e cai no tom da marca se nem isso tiver). */
:root {
  --enf: #0e7490; --enf-suave: #d9f0f6;
  --fis: #b45309; --fis-suave: #f8ead7;
  --nut: #4d7c0f; --nut-suave: #e9f2d9;
  --odo: #0369a1; --odo-suave: #dcedfb;
  --far: #be185d; --far-suave: #fbdfec;
  --fon: #4f46e5; --fon-suave: #e3e4fb;
}
@media (prefers-color-scheme: dark) {
  :root {
    --enf: #53c6de; --enf-suave: #0f3038;
    --fis: #eba24f; --fis-suave: #3a2a12;
    --nut: #9cc94f; --nut-suave: #23300f;
    --odo: #62b4ef; --odo-suave: #0f2a3c;
    --far: #f083b4; --far-suave: #381123;
    --fon: #93a0f5; --fon-suave: #1b1e40;
  }
}
.cat-card.enfermagem, .cartao.enfermagem { --cor: var(--enf); --cor-suave: var(--enf-suave); }
.cat-card.fisioterapia, .cartao.fisioterapia { --cor: var(--fis); --cor-suave: var(--fis-suave); }
.cat-card.nutricao, .cartao.nutricao { --cor: var(--nut); --cor-suave: var(--nut-suave); }
.cat-card.odontologia, .cartao.odontologia { --cor: var(--odo); --cor-suave: var(--odo-suave); }
.cat-card.farmacia, .cartao.farmacia { --cor: var(--far); --cor-suave: var(--far-suave); }
.cat-card.fonoaudiologia, .cartao.fonoaudiologia { --cor: var(--fon); --cor-suave: var(--fon-suave); }
.chip-cat.enfermagem, .cab-badge.enfermagem { color: var(--enf); background: var(--enf-suave); }
.chip-cat.fisioterapia, .cab-badge.fisioterapia { color: var(--fis); background: var(--fis-suave); }
.chip-cat.nutricao, .cab-badge.nutricao { color: var(--nut); background: var(--nut-suave); }
.chip-cat.odontologia, .cab-badge.odontologia { color: var(--odo); background: var(--odo-suave); }
.chip-cat.farmacia, .cab-badge.farmacia { color: var(--far); background: var(--far-suave); }
.chip-cat.fonoaudiologia, .cab-badge.fonoaudiologia { color: var(--fon); background: var(--fon-suave); }

/* ── Celular ──────────────────────────────────────────────────────────────────
   Fica no FIM da folha de propósito: são regras que sobrepõem as de cima, e
   ordem é o que decide quando a especificidade empata.

   A ideia é uma só: no telefone, texto de botão é luxo. Os botões viram ícone e
   devolvem a largura a quem precisa dela — o campo de digitar (que chegava a 30 px
   com o microfone e o "ao vivo" na mesma linha) e o nome do paciente no cabeçalho.
   O nome acessível continua no `aria-label`, então leitor de tela não perde nada. */
@media (max-width: 620px) {
  .rotulo-btn { display: none; }
  .acoes { flex-wrap: wrap; justify-content: flex-end; gap: var(--e-2); }
  .acoes button { padding: 9px var(--e-3); min-width: 44px; }
  .acoes .encerrar { padding: 9px var(--e-4); }
  #botao-mic .mic-label, #botao-vivo .mic-label { display: none; }
  #botao-mic, #botao-vivo { padding: var(--e-3) var(--e-3); min-width: 48px; }
  .entrada { padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
  .entrada .interno { gap: var(--e-2); }
  .entrada button.enviar { padding: var(--e-3) 15px; min-height: 44px; }
  .cabecalho-consulta { gap: var(--e-2); padding: var(--e-3) var(--e-4); margin: -26px -14px var(--e-4); }
  .cab-info { min-width: 120px; }
  .cab-info span { font-size: var(--fs-2xs); }
}

/* Telefone pequeno (iPhone SE e afins): a palavra "Enviar" custa 40 px que fazem
   falta ao campo de digitar. Vira seta; o nome acessível segue no aria-label, e
   quem prefere o teclado continua enviando com Enter. */
@media (max-width: 360px) {
  .entrada button.enviar { font-size: 0; padding: var(--e-3) var(--e-4); min-width: 46px; }
  .entrada button.enviar::after { content: "➤"; font-size: var(--fs-lg); }
}

/* Desktop com a sala aberta: a tela cresce em vez de espremer a conversa entre a
   sala e os instrumentos — a transcrição é a prova do que foi dito e não pode
   virar uma coluna de duzentos pixels. */
@media (min-width: 861px) {
  .tela.largo { max-width: 1320px; }
  .palco.com-sala .sala { width: min(420px, 34vw); }
}

/* ── Fluidez ──────────────────────────────────────────────────────────────────
   `backdrop-filter` custa caro: cada rolagem recompõe a barra inteira, e num
   celular isso aparece como a conversa "travando" ao rolar. No telefone as duas
   barras fixas passam a ser opacas — a diferença visual é mínima, a de fluidez
   não é. */
@media (max-width: 860px) {
  .cabecalho-consulta { backdrop-filter: none; background: var(--superficie); }
  .entrada { backdrop-filter: none; background: var(--superficie); }
}

/* Cabeçalho da consulta no celular: o nome e os dados do paciente ocupavam três
   linhas e empurravam a conversa para baixo da dobra. Uma linha, com reticências. */
@media (max-width: 620px) {
  .cabecalho-consulta .avatar { width: 38px; height: 38px; font-size: var(--fs-md); }
  .cab-info strong { font-size: var(--fs-md); }
  .cab-info span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cab-badge { margin-left: 0; }
}

/* ── Créditos e loja ───────────────────────────────────────────────────────── */
.cartao-saldo {
  display: flex; align-items: center; gap: var(--e-4); flex-wrap: wrap;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: var(--e-4) var(--e-4); margin: 0 0 var(--e-5); box-shadow: var(--sombra);
}
.cartao-saldo.vazio { border-color: color-mix(in srgb, var(--falha) 40%, var(--borda)); }
.cartao-saldo .saldo-num { display: flex; align-items: baseline; gap: var(--e-2); }
.cartao-saldo .saldo-num strong { font-size: var(--fs-3xl); font-weight: 750; letter-spacing: -.02em; }
.cartao-saldo .saldo-num span { color: var(--texto-suave); font-size: var(--fs-xs); }
.cartao-saldo .saldo-txt { color: var(--texto-suave); font-size: var(--fs-sm); flex: 1; min-width: 140px; }
.cartao-saldo .botao { padding: var(--e-3) var(--e-4); }

.planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--e-3); margin: 0 0 var(--e-6); }
.plano {
  display: flex; flex-direction: column; gap: var(--e-1); text-align: left; cursor: pointer; font: inherit;
  border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); color: var(--texto);
  padding: var(--e-5); box-shadow: var(--sombra);
  transition: transform var(--t-medio) var(--mola), border-color var(--t-medio) ease, box-shadow var(--t-medio) ease;
}
.plano:hover { transform: translateY(-3px) scale(1.008); border-color: var(--primaria); box-shadow: var(--sombra-forte); }
.plano:active { transform: translateY(-1px) scale(.99); }
/* O destaque não é enfeite: é o pacote que sai mais barato por crédito, e dizer
   isso poupa o aluno de fazer a conta. Ganha um leve degradê da cor da marca para
   se separar dos demais sem precisar de selo. */
.plano.destaque {
  border-color: var(--primaria);
  box-shadow: 0 0 0 1.5px var(--primaria), var(--sombra);
  background: linear-gradient(168deg, var(--primaria-suave) 0%, var(--superficie) 42%);
}
.plano-rotulo { font-weight: 700; }
.plano-preco { font-size: var(--fs-xl); font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.plano-preco i { font-size: var(--fs-xs); font-weight: 600; color: var(--texto-suave); font-style: normal; }
.plano-nota { font-size: var(--fs-xs); color: var(--texto-suave); }

.pix-caixa {
  border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie);
  padding: var(--e-5); box-shadow: var(--sombra); margin-top: var(--e-2);
}
.pix-qr { width: 190px; height: 190px; display: block; margin: 0 0 var(--e-3); border-radius: 12px; background: #fff; }
.pix-codigo { background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: var(--e-3) var(--e-3); margin-bottom: var(--e-3); }
.pix-codigo code { font-size: var(--fs-2xs); word-break: break-all; color: var(--texto-suave); }

/* Chaves de cobrança, no painel do admin */
.estado-segredos { margin: var(--e-1) 0 var(--e-5); display: flex; flex-direction: column; gap: var(--e-2); }
.linha-segredo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); font-size: var(--fs-sm); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: var(--e-3) var(--e-3); }
.linha-segredo code { font-size: var(--fs-xs); color: var(--texto-suave); }
.linha-segredo .ok { color: var(--ok); font-weight: 650; }
.linha-segredo .falta { color: var(--falha); font-weight: 650; }
.linha-segredo .origem { color: var(--texto-fraco); font-size: var(--fs-xs); }
.linha-segredo.resumo { background: var(--superficie-2); font-weight: 650; }
.dica-campo { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--texto-suave); }

/* ── Estação de Revalida ───────────────────────────────────────────────────── */
.estacao-box { max-width: 620px; text-align: left; }
.estacao-cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-3); }
.chip-area { font-size: var(--fs-2xs); font-weight: 750; text-transform: uppercase; letter-spacing: .05em; color: var(--med); background: var(--med-suave); padding: 5px var(--e-3); border-radius: 999px; }
.estacao-tempo { font-size: var(--fs-xs); font-weight: 700; color: var(--texto-suave); }
.estacao-cenario { color: var(--texto-suave); font-size: var(--fs-md); margin: 0 0 var(--e-4); }
.estacao-tarefa { margin: 0 0 var(--e-4); padding-left: var(--e-5); display: flex; flex-direction: column; gap: var(--e-2); }
.estacao-tarefa li { line-height: 1.5; }
.estacao-limites { font-size: var(--fs-sm); font-weight: 650; color: var(--exame-texto); background: var(--exame); border: 1px solid var(--exame-borda); border-radius: var(--raio-sm); padding: 9px var(--e-3); margin: 0 0 var(--e-4); }

/* O cronômetro regressivo muda de cor quando aperta: na prova, o tempo é o
   recurso mais escasso e o participante precisa senti-lo. */
#med-tempo.apertado { color: var(--exame-texto); }
#med-tempo.acabando { color: var(--falha); animation: piscar 1s steps(1) infinite; }

.item-pep { border: 1px solid var(--borda); border-left-width: 4px; border-radius: var(--raio-sm); padding: var(--e-3) var(--e-4); margin-bottom: var(--e-3); background: var(--superficie); }
.item-pep.ok { border-left-color: var(--ok); }
.item-pep.parcial { border-left-color: var(--exame-borda); }
.item-pep.falho { border-left-color: var(--falha); }
.pep-topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-1); }
.pep-nivel { font-size: var(--fs-2xs); font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.item-pep.ok .pep-nivel { color: var(--ok); }
.item-pep.parcial .pep-nivel { color: var(--exame-texto); }
.item-pep.falho .pep-nivel { color: var(--falha); }
.pep-pontos { font-size: var(--fs-xs); font-weight: 700; color: var(--texto-suave); white-space: nowrap; }
.pep-desc { font-weight: 600; line-height: 1.45; }
.pep-comentario { font-size: var(--fs-sm); color: var(--texto-suave); margin-top: var(--e-1); line-height: 1.5; }

/* O que a banca esperava naquele item. Fica com barra à esquerda e fundo próprio
   porque é citação do PEP, não opinião do avaliador — e é o texto que o aluno
   volta para reler antes da prova. */
.pep-esperado {
  font-size: var(--fs-sm); line-height: 1.5; margin-top: var(--e-2);
  padding: var(--e-2) var(--e-3); border-radius: 8px;
  border-left: 3px solid var(--borda-forte, rgba(255,255,255,.22));
  background: rgba(255,255,255,.04); color: var(--texto);
}
.pep-esperado b { color: var(--texto-suave); font-weight: 700; letter-spacing: .01em; }
@media (prefers-color-scheme: light) { .pep-esperado { background: rgba(0,0,0,.035); } }

/* ── Modais que cabem na tela ──────────────────────────────────────────────
   O cartão da estação tem cenário, cinco linhas de tarefa, limites e aviso: no
   celular passava de 900 px numa tela de 844, e o botão "Entrar na estação"
   ficava FORA da área visível, sem rolagem. Ou seja: no telefone não dava para
   começar a estação.

   A regra vale para todos os modais — nenhum deles pode ser mais alto que a tela
   sem oferecer rolagem, e a linha de ações nunca pode sair de vista. */
.modal { overflow-y: auto; padding: var(--e-4); }
.modal-box {
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* As ações grudam no rodapé da caixa: rolando ou não, o botão principal está
   sempre à mão — que é o que se espera de qualquer app hoje. */
.modal-box .modal-acoes {
  position: sticky;
  bottom: 0;
  margin-top: var(--e-1);
  padding: var(--e-3) 0 var(--e-meio);
  background: linear-gradient(transparent, var(--superficie) 22%);
}
@media (max-width: 620px) {
  .modal { padding: var(--e-3); }
  .modal-box { padding: var(--e-6) var(--e-5); max-height: calc(100dvh - 20px); }
  .estacao-box { max-width: 100%; }
  /* Numa tela pequena, a tarefa da estação é o conteúdo — o resto encolhe. */
  .estacao-tarefa { padding-left: var(--e-5); gap: var(--e-2); font-size: var(--fs-md); }
  .estacao-box h2 { font-size: var(--fs-lg); }
  .modal-acoes { flex-direction: column-reverse; gap: var(--e-2); }
  .modal-acoes .botao { width: 100%; min-height: 46px; }
}

/* ── Legibilidade da nota ─────────────────────────────────────────────────
   O âmbar #fab219 funciona como traço no anel e falha como TEXTO: sobre branco
   dá cerca de 1,9:1 de contraste, contra os 4,5:1 que texto normal exige e os
   3:1 do texto grande. A nota e o selo do veredito ficavam bonitos e ilegíveis
   para quem tem baixa visão — que numa turma de medicina não é exceção.

   Duas variáveis, então: uma para pintar, outra para escrever. */
:root { --sev-atencao-texto: #8a5a00; --sev-boa-texto: #0a7d0a; --sev-critica-texto: #b32d2d; }
@media (prefers-color-scheme: dark) {
  :root { --sev-atencao-texto: #f5c451; --sev-boa-texto: #4ec94e; --sev-critica-texto: #ff8a8a; }
}
.anel-valor span, .veredito-badge { color: var(--cor-nota-texto, var(--cor-nota, var(--primaria))); }
.veredito-badge { background: color-mix(in srgb, var(--cor-nota, var(--primaria)) 16%, transparent); }

/* ── Modo prova ────────────────────────────────────────────────────────────── */
.cartao-prova {
  display: flex; align-items: center; gap: var(--e-4); flex-wrap: wrap;
  background: linear-gradient(135deg, color-mix(in srgb, var(--med) 10%, var(--superficie)), var(--superficie));
  border: 1px solid color-mix(in srgb, var(--med) 30%, var(--borda));
  border-radius: var(--raio); padding: var(--e-5) var(--e-5); margin: 0 0 var(--e-4); box-shadow: var(--sombra);
}
.cartao-prova .prova-texto { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: var(--e-1); }
.cartao-prova strong { font-size: var(--fs-lg); }
.cartao-prova span { color: var(--texto-suave); font-size: var(--fs-sm); line-height: 1.45; }

.barra-circuito {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap;
  border: 1px solid color-mix(in srgb, var(--med) 35%, var(--borda)); border-radius: var(--raio);
  background: var(--superficie); padding: var(--e-4) var(--e-4); margin: var(--e-5) 0 var(--e-3); box-shadow: var(--sombra);
}
.circuito-progresso { display: flex; flex-direction: column; gap: var(--e-meio); }
.circuito-progresso strong { font-size: var(--fs-md); }
.circuito-progresso span { color: var(--texto-suave); font-size: var(--fs-sm); }

.boletim-topo { display: flex; align-items: center; gap: var(--e-5); flex-wrap: wrap; margin: var(--e-2) 0 var(--e-4); }
.boletim-nota { display: flex; align-items: baseline; gap: var(--e-1); }
.boletim-nota strong { font-size: var(--fs-5xl); font-weight: 760; letter-spacing: -.03em; line-height: 1; }
.boletim-nota span { color: var(--texto-suave); font-weight: 650; }
.boletim-resumo { flex: 1; min-width: 180px; }
.linha-boletim {
  display: flex; align-items: center; gap: var(--e-4);
  border: 1px solid var(--borda); border-radius: var(--raio-sm);
  background: var(--superficie); padding: var(--e-3) var(--e-4); margin-bottom: var(--e-2);
}
.bol-ordem {
  width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--superficie-2); color: var(--texto-suave); font-weight: 750; font-size: var(--fs-xs);
}
.bol-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bol-info strong { font-size: var(--fs-md); }
.bol-info span { color: var(--texto-suave); font-size: var(--fs-xs); }
.bol-nota { font-size: var(--fs-xl); font-weight: 760; color: var(--cor-bol, var(--texto)); white-space: nowrap; }
.bol-nota i { font-size: var(--fs-xs); font-weight: 600; color: var(--texto-suave); font-style: normal; }
@media (max-width: 620px) {
  .cartao-prova .botao, .barra-circuito .botao { width: 100%; }
  .boletim-nota strong { font-size: var(--fs-4xl); }
}

/* ── Meu desempenho ────────────────────────────────────────────────────────
   A nota de uma estação cabe num número; a preparação, não. Esta tela responde
   três perguntas em ordem: como estou, onde estou pior, o que sempre esqueço.
   Por isso os números vêm primeiro, a média por área depois (da pior para a
   melhor) e o histórico por último — é a ordem em que o aluno decide o que
   estudar hoje. */
.prova-preco { color: var(--med) !important; font-weight: 600; }

.desemp-numeros {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--e-3); margin: 0 0 var(--e-5);
}
.desemp-card {
  display: flex; flex-direction: column; gap: var(--e-meio); padding: var(--e-4) var(--e-4);
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra);
}
.desemp-card strong { font-size: var(--fs-3xl); font-weight: 760; letter-spacing: -.02em; line-height: 1.1; }
.desemp-card span { color: var(--texto-suave); font-size: var(--fs-xs); }

.desemp-areas { display: flex; flex-direction: column; gap: var(--e-3); }
.desemp-area {
  padding: var(--e-3) var(--e-4); background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio);
}
.desemp-area-topo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); }
.desemp-area-topo b { font-size: var(--fs-lg); font-weight: 760; white-space: nowrap; }
.desemp-area-topo b i { font-style: normal; font-size: var(--fs-2xs); opacity: .65; }
.desemp-area-pe { color: var(--texto-suave); font-size: var(--fs-xs); margin-top: var(--e-2); }
/* A barra repete o que o número já diz. É redundância de propósito: comparar
   cinco áreas em texto exige ler cinco vezes; em barra, é um olhar. */
.desemp-barra {
  height: 8px; border-radius: 999px; margin-top: var(--e-2); overflow: hidden;
  background: color-mix(in srgb, var(--texto) 10%, transparent);
}
.desemp-barra span { display: block; height: 100%; border-radius: 999px; transition: width .4s ease; }

.desemp-fracos { display: flex; flex-direction: column; gap: var(--e-2); }
.desemp-fraco {
  display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-3) var(--e-3);
  background: var(--superficie); border: 1px solid var(--borda);
  border-left: 3px solid var(--sev-atencao); border-radius: var(--raio);
  font-size: var(--fs-sm); line-height: 1.45;
}
.desemp-vezes {
  flex: none; font-weight: 760; font-size: var(--fs-xs); color: var(--sev-atencao-texto);
  padding-top: 1px;
}

.desemp-recentes { display: flex; flex-direction: column; gap: var(--e-2); }
.desemp-recente {
  display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4);
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
}
.desemp-rec-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--e-meio); }
.desemp-rec-txt strong { font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desemp-rec-txt span { color: var(--texto-suave); font-size: var(--fs-xs); }
.desemp-rec-nota { font-weight: 760; font-size: var(--fs-lg); white-space: nowrap; }
.desemp-rec-nota i { font-style: normal; font-size: var(--fs-2xs); opacity: .65; }

@media (max-width: 480px) {
  .desemp-card strong { font-size: var(--fs-2xl); }
  .desemp-numeros { grid-template-columns: 1fr 1fr; gap: var(--e-3); }
}

/* Duas ações no fim do boletim: repetir o circuito ou olhar a evolução. No
   celular elas empilham — botão de 50% de largura em tela de 375px vira alvo
   pequeno demais para o polegar. */
.boletim-acoes { display: flex; gap: var(--e-3); flex-wrap: wrap; }
.boletim-acoes .botao { flex: 1; min-width: 200px; }

/* A sugestão de treino. Tem a cor de ação da plataforma porque é o único elemento
   desta tela que leva a algum lugar — o resto é diagnóstico, isto é conduta. */
.desemp-sugestao {
  display: flex; align-items: center; gap: var(--e-4); flex-wrap: wrap;
  padding: var(--e-4) var(--e-5); margin: 0 0 var(--e-6); border-radius: var(--raio);
  background: linear-gradient(135deg, color-mix(in srgb, var(--primaria) 12%, var(--superficie)), var(--superficie));
  border: 1px solid color-mix(in srgb, var(--primaria) 35%, var(--borda));
  box-shadow: var(--sombra);
}
.desemp-sug-txt { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: var(--e-1); }
.desemp-sug-txt strong { font-size: var(--fs-lg); }
.desemp-sug-txt span { color: var(--texto-suave); font-size: var(--fs-sm); line-height: 1.45; }

/* ---------- Carteira: assinatura, pagamentos pendentes e extrato ----------
   Dados que o servidor já mandava e a página descartava. Desenho contido de
   propósito: é a área onde o aluno CONFERE, não onde ele decide comprar — a
   vitrine de planos, logo abaixo, é que precisa de peso visual. */
.carteira { margin: 0 0 var(--e-5); display: grid; gap: var(--e-3); }

.assinatura-faixa {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-1) var(--e-3);
  padding: var(--e-3) var(--e-4); border-radius: var(--raio-sm);
  background: var(--primaria-suave); color: var(--texto);
  border: 1px solid color-mix(in srgb, var(--primaria) 30%, var(--borda));
}
.assinatura-faixa strong { font-weight: 750; }
.assinatura-faixa span { color: var(--texto-suave); font-size: var(--fs-sm); }
/* Assinatura que existe mas não vale: o aviso pesa mais que a confirmação. */
.assinatura-faixa.inativa {
  background: var(--exame); border-color: var(--exame-borda); color: var(--exame-texto);
}
.assinatura-faixa.inativa span { color: var(--exame-texto); }

.pend-linha {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2);
  padding: var(--e-3) var(--e-4); border-radius: var(--raio-sm);
  background: var(--exame); border: 1px solid var(--exame-borda); color: var(--exame-texto);
  font-size: var(--fs-sm);
}
.pend-selo {
  text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-3xs); font-weight: 750;
  padding: 3px var(--e-2); border-radius: 999px;
  background: color-mix(in srgb, var(--exame-texto) 16%, transparent);
}

.extrato { border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--superficie); }
.extrato > summary {
  cursor: pointer; padding: var(--e-3) var(--e-4); font-weight: 650; font-size: var(--fs-sm);
  color: var(--texto-suave); list-style: none;
}
.extrato > summary::-webkit-details-marker { display: none; }
.extrato > summary::before { content: "▸ "; color: var(--texto-fraco); }
.extrato[open] > summary::before { content: "▾ "; }
.extrato > summary:focus-visible { outline: 2px solid var(--primaria); outline-offset: -2px; }

#extrato-linhas { padding: 0 var(--e-4) var(--e-2); }
.extrato-linha {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--e-3); align-items: baseline;
  padding: var(--e-2) 0; border-top: 1px solid var(--borda); font-size: var(--fs-sm);
}
.ext-data { color: var(--texto-fraco); font-variant-numeric: tabular-nums; font-size: var(--fs-xs); }
.ext-motivo { color: var(--texto-suave); }
/* Débito e crédito não se distinguem só pela cor: o sinal vem junto, para quem
   não enxerga a diferença entre o verde e o vermelho. */
.ext-delta { font-weight: 750; font-variant-numeric: tabular-nums; }
.ext-delta.mais { color: var(--ok); }
.ext-delta.menos { color: var(--texto-suave); }

/* ---------- Diagnóstico do servidor (painel do professor) ----------
   Lista de pares rótulo/valor. Denso de propósito: é tela de conferência, lida
   quando algo já deu errado — não precisa respirar, precisa caber. */
.diagnostico { display: grid; gap: 1px; background: var(--borda); border: 1px solid var(--borda); border-radius: var(--raio-sm); overflow: hidden; }
.diag-linha {
  display: grid; grid-template-columns: minmax(140px, 34%) 1fr; gap: var(--e-4);
  padding: var(--e-3) var(--e-4); background: var(--superficie); font-size: var(--fs-sm); align-items: baseline;
}
.diag-rotulo { color: var(--texto-suave); font-weight: 600; }
.diag-valor { color: var(--texto); word-break: break-word; font-variant-numeric: tabular-nums; }
/* O estado que pede ação: modo demonstração e última falha do provedor. Sinal
   redundante — cor E barra lateral — para não depender só do matiz. */
.diag-linha.alerta { background: var(--exame); border-left: 3px solid var(--exame-borda); }
.diag-linha.alerta .diag-rotulo, .diag-linha.alerta .diag-valor { color: var(--exame-texto); }
@media (max-width: 560px) {
  .diag-linha { grid-template-columns: 1fr; gap: var(--e-meio); }
}

/* ---------- A consulta é uma ESTAÇÃO, não uma página ----------
   Antes, quem rolava era a janela inteira. Isso produzia dois defeitos que se
   somavam e apareciam como "o chat não acompanha a conversa":

   1. A presença do paciente é `sticky`. Com a página rolando, o balão recém-chegado
      entrava POR BAIXO dela — existia, mas não dava para ler.
   2. O auto-rolar era `scrollIntoView({behavior:"smooth"})` disparado a cada
      pedaço de texto do streaming. Cada chamada agenda uma animação da JANELA, e
      a seguinte cancela a anterior: com tokens chegando a cada poucos ms, a
      rolagem ficava presa no lugar. Quanto mais o paciente falava, menos rolava.

   Agora a tela tem a altura da janela e SÓ a transcrição rola, dentro dela mesma —
   como numa estação de verdade, onde o cronômetro e o comando ficam à vista o
   tempo todo. `100dvh` e não `100vh`: no celular a barra do navegador aparece e
   some, e `vh` mede a tela sem ela, cortando a última linha. */
#tela-consulta.ativa {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-height: 100dvh;
  /* Espaço para a barra de entrada, que é `position: fixed` e não ocupa lugar no
     fluxo. A altura vem da PRÓPRIA barra, medida em acompanharAlturaDaEntrada():
     ela muda quando o botão "Ao vivo" entra, quando o rótulo quebra linha no
     celular e quando a área segura do iPhone soma. Com número fixo, os últimos
     centímetros da conversa nascem atrás do campo de digitar — o texto existe, o
     auto-rolar jura que chegou ao fim, e o aluno não vê a última resposta.
     O 78px é só o palpite do primeiro quadro, antes da medição. */
  padding-bottom: calc(var(--altura-entrada, 78px) + 10px);
  overflow: hidden;
}
/* Dentro de um container de altura fixa, `sticky` não tem o que grudar: o
   cabeçalho já é a primeira linha do flex e não sai da tela. */
#tela-consulta .cabecalho-consulta { position: static; flex: none; }
#tela-consulta .palco { flex: 1; min-height: 0; }
#tela-consulta .coluna-chat { display: flex; flex-direction: column; height: 100%; min-height: 0; }
/* `min-height: 0` é o que faz o flex realmente encolher e a rolagem existir: sem
   ele, o item cresce com o conteúdo e o overflow nunca chega a acontecer.
   `overscroll-behavior: contain` impede que, ao chegar ao fim da transcrição, o
   gesto continue e arraste a página atrás — no celular isso fechava a estação. */
#tela-consulta .fluxo-mensagens {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--e-meio) var(--e-1) var(--e-2) var(--e-meio);
  scroll-behavior: auto;   /* quem anima é o JS, e só quando faz sentido */
}
#tela-consulta .sala { position: static; max-height: 100%; }
#tela-consulta .sala-tela { max-height: min(62vh, 100%); }

@media (max-width: 860px) {
  /* No celular a presença é uma faixa no alto e a conversa fica embaixo; as duas
     dividem a altura, e só a conversa rola. */
  #tela-consulta .palco.com-sala { flex-direction: column; }
  #tela-consulta .sala { flex: none; }
  #tela-consulta .coluna-chat { flex: 1; min-height: 0; }
}

/* Alguém rolou para cima para reler algo: o botão traz de volta ao fim sem
   obrigar a arrastar. Aparece só quando há distância — ver `pertoDoFim()`. */
.voltar-ao-fim {
  position: absolute; right: 14px; bottom: 12px; z-index: 6;
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: var(--e-2) var(--e-3); border-radius: 999px; cursor: pointer;
  border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto);
  font-size: var(--fs-xs); font-weight: 650; box-shadow: var(--sombra-forte);
  animation: entra .18s ease;
}
.voltar-ao-fim.oculto { display: none; }
#tela-consulta .coluna-chat { position: relative; }

/* Aviso de que o relógio não parou enquanto o participante relê o comando. Na
   estação de verdade, consultar o impresso na mesa não pausa nada — e quem se
   acostuma a "pausar para reler" treina um ritmo que a prova não tem. */
.estacao-correndo {
  margin: var(--e-3) 0 0; padding: 9px var(--e-3); border-radius: var(--raio-sm);
  background: var(--exame); border: 1px solid var(--exame-borda); color: var(--exame-texto);
  font-size: var(--fs-sm); font-weight: 600;
}

/* ---------- Convites do beta (painel do admin) ---------- */
.linha-cupom { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--e-3); }
.cupom-novo {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3);
  margin: var(--e-4) 0; padding: var(--e-4) var(--e-4); border-radius: var(--raio-sm);
  background: var(--primaria-suave); border: 1px solid color-mix(in srgb, var(--primaria) 32%, var(--borda));
}
.cupom-novo-rotulo { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); }
.cupom-novo code { font-size: var(--fs-xl); font-weight: 750; letter-spacing: .06em; color: var(--texto); }

.cupons { display: grid; gap: var(--e-2); }
.cupom-linha {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-4); border: 1px solid var(--borda); border-radius: var(--raio-sm);
  background: var(--superficie); font-size: var(--fs-sm);
}
.cupom-linha code { font-weight: 700; letter-spacing: .04em; }
.cupom-info { color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.cupom-obs { color: var(--texto-fraco); font-size: var(--fs-xs); font-style: italic; }
.cupom-selo {
  margin-left: auto; text-transform: uppercase; letter-spacing: .06em;
  font-size: var(--fs-3xs); font-weight: 750; padding: var(--e-1) var(--e-2); border-radius: 999px;
  background: var(--primaria-suave); color: var(--primaria);
}
/* Convite que não vale mais fica visivelmente apagado — a lista cresce, e ler
   "esgotado" no meio de vinte linhas iguais não acontece. */
.cupom-linha.revogado, .cupom-linha.expirado, .cupom-linha.esgotado { opacity: .62; }
.cupom-linha.revogado .cupom-selo, .cupom-linha.expirado .cupom-selo { background: var(--exame); color: var(--exame-texto); }
.cupom-linha.esgotado .cupom-selo { background: var(--aviso-fundo); color: var(--aviso-texto); }

/* ══════════════════════════════════════════════════════════════════════════
   EMPILHAMENTO ELEGANTE — os cards entram em cascata
   ══════════════════════════════════════════════════════════════════════════
   Todos os cards de uma grade não devem surgir de uma vez: entram um após o
   outro, de baixo para cima, como cartas postas na mesa. O atraso vem do índice
   (`--i`, posto pelo JS) e é TETADO — numa lista de vinte casos, esperar o
   vigésimo card seria lentidão disfarçada de charme, então do oitavo em diante
   todos entram juntos. `backwards` segura o estado inicial durante o atraso, para
   o card não piscar no lugar antes de animar. */
@keyframes empilha {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.cat-card, .cartao, .plano {
  animation: empilha .5s var(--mola) backwards;
  animation-delay: calc(min(var(--i, 0), 8) * 45ms);
}

@media (prefers-reduced-motion: reduce) {
  .cat-card, .cartao, .plano { animation: none; }
}

/* ── Minha conta ──────────────────────────────────────────────────────────────
   A tela onde a pessoa manda na própria conta: sair, gerir a assinatura e
   apagar tudo. Blocos separados por assunto, com o destrutivo por último e
   visualmente contido — a ordem da tela é a ordem do risco. */
.linha-conta { display: flex; align-items: baseline; gap: var(--e-3); flex-wrap: wrap; margin: var(--e-1) 0 var(--e-4); }
.linha-conta[hidden] { display: none; }
.linha-conta .quem-sou { margin: 0; }
.botao-texto {
  background: none; border: none; padding: var(--e-1) var(--e-meio); font: inherit; font-size: var(--fs-xs); font-weight: 600;
  color: var(--primaria); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
  border-radius: 6px;
}
.botao-texto:hover { color: var(--primaria-escura); }
/* No dedo, o alvo é o mínimo de 44px — o link fica com 28 de altura de texto e o
   resto vira área de toque, sem empurrar o layout (o padding negativo devolve o
   espaço ótico que o alvo tomou). */
/* ── No dedo ──────────────────────────────────────────────────────────────
   Tudo o que se clica passa a ter 44px de alvo quando o ponteiro é grosseiro —
   dedo, caneta, controle de TV. Antes só `.botao-texto` tinha esse cuidado, e o
   resto herdava a altura do texto: alvo de 28px erra em movimento, e a pessoa
   que erra num app de estudo perde o lugar onde estava.

   O alvo cresce sem empurrar o layout: o padding vertical vem de `min-height`
   com `inline-flex`, que preenche a caixa em vez de esticá-la. */
@media (pointer: coarse) {
  .botao-texto {
    min-height: var(--toque-min, 44px); display: inline-flex; align-items: center;
    padding-inline: var(--e-2); margin-inline: calc(var(--e-2) * -1);
  }
  .voltar, .aba, .seg, .chip, .inst, .botao, .botao-icone,
  input[type="checkbox"], input[type="radio"] {
    min-height: var(--toque-min, 44px);
  }
  /* Caixa de marcar não estica com min-height: ela é quadrada e o alvo tem de
     crescer nos dois eixos. */
  input[type="checkbox"], input[type="radio"] { min-width: var(--toque-min, 44px); }
  /* Campo de formulário no celular: abaixo de 16px o iOS DÁ ZOOM ao focar e a
     página fica deslocada, com a pessoa achando que quebrou. */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="search"], select, textarea {
    font-size: max(16px, 1rem);
  }
}

/* O menor degrau da escala sobe de 11 para 12px em tela estreita. Onze pixels
   funcionam num monitor a 60cm, onde a densidade ajuda a caber ficha clínica e
   rubrica lado a lado; num celular na mão, com sol ou pressa, o selo "24
   ESTAÇÕES" e o contador da sala viram um borrão que se adivinha pelo formato.
   Só o piso muda — o resto da escala fica como está, senão a interface inteira
   incha e passa a caber menos coisa justamente onde há menos espaço. */
@media (max-width: 560px) {
  :root { --fs-3xs: 0.75rem; }

  /* Os três botões abaixo do catálogo iam cada um para um lado: "Estação
     aleatória" encostada à direita (a 205px), "Meu desempenho" à esquerda com
     213px de largura e "Painel administrativo" à esquerda com 240. Três
     alinhamentos e três larguras numa coluna onde os cards têm todos a mesma —
     no celular isso não se lê como hierarquia, se lê como desalinho.

     O alinhamento à direita do sorteio existe para o DESKTOP, onde ele fecha a
     grade de cards e a assimetria é intencional. Empilhado num celular não há
     grade que fechar. Aqui os três ocupam a coluna inteira, na largura dos
     cards, e de quebra viram alvos de toque com o dobro de área. */
  .aleatorio-linha { justify-content: stretch; }
  .btn-aleatorio { flex: 1; justify-content: center; }
  #tela-inicio > .botao.secundario {
    width: 100%;
    justify-content: center;
    margin-bottom: var(--e-3);
  }
}

.bloco-conta {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: var(--e-5) var(--e-6); margin-bottom: var(--e-4); box-shadow: var(--sombra);
}
.bloco-conta h2 { margin: 0 0 var(--e-3); font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.015em; }
.bloco-conta .conta-linha { margin: 0 0 var(--e-2); font-size: var(--fs-md); }
.bloco-conta .conta-dica { margin: 0; font-size: var(--fs-sm); color: var(--texto-suave); line-height: 1.5; max-width: 60ch; }
.bloco-conta .botao { margin-top: var(--e-4); }
.conta-acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }

/* O bloco destrutivo se anuncia pela borda, não por um bloco vermelho inteiro:
   alarme constante deixa de ser alarme. */
.perigo-zona { border-color: color-mix(in srgb, var(--falha) 35%, var(--borda)); }
.perigo-zona h2 { color: var(--falha); }
/* Contorno, não bloco: a ação destrutiva se anuncia sem gritar. Nome próprio
   porque `.botao.perigo` já existe no projeto e significa o SÓLIDO vermelho —
   reusar a palavra pintava texto vermelho sobre fundo vermelho, e o botão sumia. */
.botao.secundario.perigo-contorno { color: var(--falha); border-color: color-mix(in srgb, var(--falha) 40%, var(--borda-forte)); }
.botao.secundario.perigo-contorno:hover { border-color: var(--falha); }

.confirma-exclusao { margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--borda); }
.confirma-exclusao label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--e-2); }
.confirma-exclusao input {
  width: 100%; max-width: 320px; padding: var(--e-3) var(--e-3); font: inherit;
  border: 1px solid var(--borda-forte); border-radius: var(--raio-sm); background: var(--superficie-2); color: var(--texto);
}
.confirma-exclusao .conta-acoes { margin-top: var(--e-4); }
@media (max-width: 620px) {
  .bloco-conta { padding: var(--e-5); }
  .conta-acoes { flex-direction: column; align-items: stretch; }
  .conta-acoes .botao { width: 100%; justify-content: center; }
}


/* ── O que separa "site em tela cheia" de aplicativo ──────────────────────────
   Quatro comportamentos que o navegador faz por padrão e que num app não
   existem. Nenhum deles é enfeite: cada um corresponde a um momento em que o
   dedo faz uma coisa e a tela responde outra. */
@media (pointer: coarse) {
  /* 1. O RETÂNGULO CINZA do toque. O Android desenha um realce próprio sobre
        qualquer coisa clicável, com atraso, DEPOIS que a tela já reagiu. São
        dois feedbacks para um toque só, e o segundo chega atrasado. */
  a, button, [role="button"], .cat-card, .cartao, .aba, .seg, .inst {
    -webkit-tap-highlight-color: transparent;
  }

  /* 2. A RESPOSTA IMEDIATA que entra no lugar dele. Afundar 1px no toque é o
        gesto que o iOS usa em toda parte: confirma que o dedo pegou antes de a
        ação acontecer, e some sozinho se a pessoa arrastar para fora. */
  button:active, [role="button"]:active, .cat-card:active, .cartao:active {
    transform: scale(.985);
  }
  button, [role="button"], .cat-card, .cartao {
    transition: transform .12s var(--curva-padrao, ease);
  }

  /* 3. A SELEÇÃO ACIDENTAL. Segurar um botão meio segundo abre o menu de copiar
        e a lupa de seleção — num app, segurar um botão não faz nada disso. O
        texto de conteúdo continua selecionável, que é o que a pessoa realmente
        quer copiar: o relato do paciente, a nota, o parecer. */
  button, [role="button"], .aba, .seg, .cat-card > h3, .cat-card > .qtd, .medida {
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none;
  }

  /* 4. O QUIQUE DA PÁGINA INTEIRA. Rolar até o fim da conversa e continuar
        puxando arrastava o documento todo, descolando o cabeçalho. Dentro de
        uma área que rola, o excesso para nela. */
  #mensagens, .abas-painel, .lista-instrumentos, .tela {
    overscroll-behavior: contain;
  }
}

/* Instalado como app, o fundo precisa cobrir o que aparece ATRÁS do conteúdo
   quando o elástico da rolagem estica — sem isto, o iOS mostra branco puro sob
   um app de fundo claro-azulado, e a emenda aparece a cada rolagem. */
@media (display-mode: standalone) {
  html { background: var(--fundo); }
  /* Sem barra de endereço, a área útil cresce: o respiro de baixo que existia
     para não colidir com a barra do Safari vira espaço morto. */
  .tela { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
}

/* ── Marca enxuta (ubtec.sbs para professores, 24/09/2026) ─────────────────────
   Tira a roupa, não a função: saldo, loja, sorteio, ajustes, desempenho e
   cadastro somem da vista; os cards de área e de caso, a consulta e o painel do
   administrador ficam. Ver `enxuta` em deploy/hostinger/motor/marca.js. */
html[data-enxuta] #cartao-saldo,
html[data-enxuta] #tela-inicio .marca .sub,
html[data-enxuta] .aleatorio-linha,
html[data-enxuta] #pref-audio,
html[data-enxuta] #abrir-desempenho,
html[data-enxuta] #abas-acesso,
html[data-enxuta] #dica-boas-vindas { display: none !important; }

/* Portão: sem sessão, a página é só a caixa de login — nada atrás dela. */
html[data-portao] body > :not(#modal-codigo):not(#torradas):not(#splash) { visibility: hidden; }
html[data-portao] #modal-codigo { background: var(--fundo, #f4f6f8); backdrop-filter: none; }
html[data-portao] #codigo-cancelar { display: none; }