/* ==========================================================================
   Gravação da consulta — aba de captura de áudio (S8 + S9)
   Somente tokens de tokens.css. Sem valor mágico, sem !important.
   Classes próprias .gravacao-* (nunca .tab-content nem .copy-btn).
   Carregada como primeira folha. Envolvida em `@media all` (sempre ativo) só
   para que o CSSOM exponha UMA única regra de topo — mantendo o inventário de
   layers estável. Como precede o statement de @layer de utilities.css, NÃO
   declara layer próprio (evitaria inverter a ordem da cascata); as regras ficam
   sem layer e, por serem classes .gravacao-* exclusivas, não colidem com nada.
   ========================================================================== */
@media all {

/* ── A-1 — Rodapé do fluxo /analisar suprimido enquanto a gravação está ativa ──
   Sem remover nós do DOM: app.js continua dono das abas e o rodapé volta
   intacto nas outras 3 abas. NÃO usa :last-of-type — o último filho <div> de
   <main> é #ocr-overlay, então `.mb-6:last-of-type` não casaria com nada e o
   bloco "Selecione a atividade" continuaria visível (verificado em Chromium).
   `.mb-6 ~ .mb-6` atinge só o 2º .mb-6 (Selecione a atividade) e preserva o 1º
   (a tira de abas) — não "simplificar" para `> .mb-6`, isso levaria junto a
   tira de abas e o indicador global de gravação que vive no botão de aba.
   Regras sem layer vencem styles.css (@layer legado), logo sem !important.
   #draftPrivacyNotice permanece visível de propósito (vale para a gravação;
   o TEXTO é ajustado por gravacao.js enquanto a aba está ativa — A-3).

   #resultSection entra pelo MESMO motivo e no mesmo eixo `>`: é filho direto de
   <main>, entre #analysis-expectation e #ocr-panel. Sem ele, quem analisa no
   prontuário e depois troca para a gravação leva o "Resultado da análise"
   inteiro — <h2>, tira de abas do resultado e o painel ativo — para debaixo do
   painel de gravação. É OCULTADO, nunca removido: a invariante dos 10
   .tab-content conta NÓS no DOM (exportacao.js:60/70 usa querySelectorAll),
   não visibilidade, e display:none não a afeta. */
main.content-box:has(#gravacao-tab:not(.hidden)) > .mb-6 ~ .mb-6,
main.content-box:has(#gravacao-tab:not(.hidden)) > #analysis-summary,
main.content-box:has(#gravacao-tab:not(.hidden)) > .analysis-actions,
main.content-box:has(#gravacao-tab:not(.hidden)) > #analysis-activity-echo,
main.content-box:has(#gravacao-tab:not(.hidden)) > #analysis-expectation,
main.content-box:has(#gravacao-tab:not(.hidden)) > #resultSection {
  display: none;
}

.gravacao-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5) 0;
}

/* ── A-6 — Indicador persistente de gravação, FORA do painel ───────────────────
   Vive no botão de aba #input-tab-gravacao, que continua visível quando o painel
   fica hidden. O data-estado mora no INDICADOR, não no botão de aba: assim esta
   folha segue sem nenhum seletor que alcance classes de fora (.input-tab-button),
   preservando o isolamento do módulo. O sinal não é só cor — é presença/ausência
   de ponto MAIS o rótulo textual. Ocioso em display:none ⇒ fora da árvore de
   acessibilidade: a aba parada continua se chamando "Gravação da consulta". */
.gravacao-aba-indicador {
  display: none;
  align-items: center;
  gap: var(--space-2);
  margin-left: var(--space-2);
}

.gravacao-aba-indicador[data-estado="gravando"],
.gravacao-aba-indicador[data-estado="pausado"] {
  display: inline-flex;
}

.gravacao-aba-ponto {
  flex: 0 0 auto;
  width: var(--space-2);
  height: var(--space-2);
  background: var(--color-danger);
  border-radius: var(--r-pill);
}

.gravacao-aba-texto {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-danger);
}

/* A-2c × A-6 — com o microfone em PAUSA o indicador seguia vermelho dizendo
   "Gravando": anunciava, fora do painel, uma captura que não existe. Em pausa o
   sinal vira âmbar e o rótulo passa a "Pausada" (trocado por gravacao.js), o que
   espelha a faixa de status — alternarPausa já emite definirStatus(…, 'aviso').
   --color-warning é o mesmo âmbar de A-5; nenhum token novo. Continua sendo
   ponto MAIS rótulo: o estado nunca depende só de cor. */
.gravacao-aba-indicador[data-estado="pausado"] .gravacao-aba-ponto {
  background: var(--color-warning);
}

.gravacao-aba-indicador[data-estado="pausado"] .gravacao-aba-texto {
  color: var(--color-warning);
}

/* ── B-4 (parcial) — o custo do indicador de A-6 em viewport estreita ─────────
   A tira de 4 abas já estourava a 390px ANTES desta obra (scrollWidth ~950 contra
   clientWidth ~324); esse estouro é pré-existente e está FORA de escopo. O que se
   mitiga aqui é só o que A-6 acrescentou: o indicador somava ~94px. Escondendo o
   rótulo da TELA o acréscimo cai para ~24px — o ponto, que é o próprio sinal de
   A-6 e precisa continuar visível.
   NÃO é display:none: isso tiraria "Gravando" do nome acessível do botão de aba e
   regrediria A-6 em silêncio justamente para quem depende de leitor de tela. O
   idioma visually-hidden é o mesmo já praticado pela casa em .analysis-status
   (styles.css:2727-2735), e 480px é breakpoint estabelecido (7 usos em
   styles.css) — nada de valor mágico.
   A media query ANINHADA vira regra FILHA no CSSOM: as regras de TOPO de
   gravacao.css continuam sendo exatamente uma CSSMediaRule, preservando o
   contrato de s23-layers e de gf06. */
@media (max-width: 480px) {
  .gravacao-aba-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

.gravacao-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

/* Botão único Gravar/Parar — vermelho (var(--color-danger)) nos dois estados. */
.gravacao-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-card);
  background: var(--color-danger);
  border: 1px solid var(--color-danger);
  border-radius: var(--r-btn);
  cursor: pointer;
  transition: filter var(--dur-fast) var(--ease);
}

.gravacao-toggle:hover {
  filter: brightness(0.94);
}

.gravacao-toggle:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

.gravacao-toggle[disabled] {
  cursor: progress;
  filter: grayscale(0.3);
}

.gravacao-toggle .icon {
  color: var(--color-card);
}

/* Ações secundárias da captura (Pausar/Descartar) — visíveis só durante a
   gravação. Peso menor que o botão vermelho: a porta de saída não compete
   visualmente com Parar, que é o caminho normal. Sem ícone de propósito: o
   sprite não tem símbolo `pause` e s21 conta ocorrências exatas de
   sprite.svg#copy/#printer no HTML estático. */
.gravacao-secundario {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--r-btn);
  cursor: pointer;
  transition: filter var(--dur-fast) var(--ease);
}

.gravacao-secundario:hover {
  filter: brightness(0.97);
}

.gravacao-secundario:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

.gravacao-secundario--destrutivo {
  color: var(--color-danger);
}

/* AG: botão inline "Continuar gravando" — via primária de retomada, ao lado do
   "Gravar". Herda peso e métrica de .gravacao-secundario; recebe acento azul
   (info) para não sumir junto do vermelho, usando só tokens de tokens.css.
   Alinhamento vertical vem do align-items:center da .gravacao-controls. */
.gravacao-continuar {
  color: var(--color-blue);
  background: var(--color-blue-soft);
  border-color: var(--color-blue);
}

.gravacao-continuar .icon {
  color: var(--color-blue);
}

/* Cronômetro mm:ss progressivo. */
.gravacao-cronometro {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0.02em;
}

.gravacao-chunks {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-text-2);
}

/* Faixa de status (texto + ícone, nunca só cor). aria-live no HTML.
   Superfície NEUTRA (--color-card), não --color-blue-soft: (1) M-8 reserva o
   azul suave ao contexto persistente (a caixa de identidade), e (2) M-10 depende
   disso para ser acessível — sobre o azul suave composto (#e7f0fb) o
   --color-success de "pronto" mede 4,36:1 e o --color-warning de "aviso" 4,21:1,
   ambos abaixo dos 4,5:1 exigidos (a faixa é 0.9375rem/peso normal, não conta
   como texto grande). Sobre --color-card medem 5,02 e 4,87. A cor de estado fica
   por conta do texto e do .gravacao-status-icone, logo abaixo. */
.gravacao-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-text-2);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--r-btn);
}

.gravacao-status .gravacao-status-icone {
  flex: 0 0 auto;
  color: var(--color-text-2);
}

.gravacao-status[data-estado="gravando"] {
  color: var(--color-danger);
}

.gravacao-status[data-estado="gravando"] .gravacao-status-icone {
  color: var(--color-danger);
}

/* enviando/processando: neutro-em-progresso, distinto do ocioso (--color-text-2).
   A auditoria sugeria trocar o ícone #mic por um indicador de progresso; isso
   vive em gravacao.js (fora do arquivo permitido deste cluster), então a
   distinção é feita por cor. As duas soluções compõem sem conflito. */
.gravacao-status[data-estado="enviando"],
.gravacao-status[data-estado="processando"] {
  color: var(--color-blue-focus);
}

.gravacao-status[data-estado="enviando"] .gravacao-status-icone,
.gravacao-status[data-estado="processando"] .gravacao-status-icone {
  color: var(--color-blue-focus);
}

.gravacao-status[data-estado="pronto"] {
  color: var(--color-success);
  border-color: var(--color-success);
}

.gravacao-status[data-estado="pronto"] .gravacao-status-icone {
  color: var(--color-success);
}

.gravacao-status[data-estado="aviso"] {
  color: var(--color-warning);
  border-color: var(--color-warning);
}

.gravacao-status[data-estado="aviso"] .gravacao-status-icone {
  color: var(--color-warning);
}

.gravacao-status[data-estado="erro"] {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.gravacao-status[data-estado="erro"] .gravacao-status-icone {
  color: var(--color-danger);
}

/* Estado vazio inicial (sem .indicator/.section-heading/.surface-card). */
.gravacao-empty {
  padding: var(--space-4);
  color: var(--color-text-2);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--r-card);
}

.gravacao-empty-title {
  display: block;
  color: var(--color-text);
  font-weight: 700;
}

.gravacao-empty-message {
  margin: var(--space-1) 0 0;
  color: var(--color-text-2);
}

.gravacao-resultado {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ── S13 — Box de identidade do paciente ─────────────────────────────────── */
.gravacao-identidade {
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-text);
  background: var(--color-blue-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--r-btn);
}

/* A-5 — "sem paciente" deixa de ser cinza neutro e vira AVISO real, espelhando
   EXATAMENTE o padrão da casa para alerta (.gravacao-status[data-estado="erro"]):
   cor no texto + borda + ícone, nunca só cor. Não existe token de fundo de aviso,
   por isso a superfície vira --color-card (neutra) — o que também libera
   --color-blue-soft para significar "paciente vinculado" (M-8). Contraste:
   --color-warning #9a6700 sobre #ffffff = 4,87:1 (AA para texto normal, acima dos
   3:1 de limite de componente). O flex fica escopado às variantes: a regra base
   .gravacao-identidade não é tocada. */
.gravacao-identidade[data-estado="vazio"] {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-warning);
  background: var(--color-card);
  border-color: var(--color-warning);
}

.gravacao-identidade[data-estado="vazio"] .gravacao-identidade-icone {
  flex: 0 0 auto;
  color: var(--color-warning);
}

.gravacao-identidade-rotulo {
  color: var(--color-text-2);
}

.gravacao-identidade-nome {
  font-weight: 700;
  color: var(--color-text);
}

.gravacao-resultado-identidade {
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}

/* A-5 — o resultado sem vínculo declara a ausência com o mesmo tratamento de
   aviso da caixa de identidade. É aqui que o dano se consuma (o médico cola a
   partir desta tela), então a declaração precisa ser tão visível quanto o nome. */
.gravacao-resultado-identidade[data-estado="sem-paciente"] {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-warning);
  border-bottom-color: var(--color-warning);
}

.gravacao-resultado-identidade[data-estado="sem-paciente"] .gravacao-identidade-icone {
  flex: 0 0 auto;
  color: var(--color-warning);
}

/* ── S12 — Blocos de resultado ───────────────────────────────────────────── */
.gravacao-bloco {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--r-card);
}

/* M-9 — Evolução é a âncora do resultado: borda um passo mais forte que a dos
   demais blocos, que seguem em var(--color-border). Só token existente.
   As "Notas internas" perderam o preenchimento azul: o selo "Uso interno" e a
   ausência de botões já as distinguem, e o azul suave invertia a hierarquia
   (o único bloco que não se copia dominava o topo da tela). */
.gravacao-bloco[data-bloco="evolucao"] {
  border-color: var(--color-muted);
}

.gravacao-bloco-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

/* B-3 — sans como todo o miolo do app: o serif é reservado ao wordmark.
   Alinha com .gravacao-empty-title, que já cai em sans por não declarar família. */
.gravacao-bloco-titulo {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text);
}

.gravacao-bloco-dica {
  flex: 1 1 100%;
  order: 3;
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--color-text-2);
}

.gravacao-bloco-acoes {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-left: auto;
}

.gravacao-selo {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-blue-focus);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--r-pill);
}

.gravacao-bloco-corpo {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-text);
}

/* M-14 — limite de componente perceptível (WCAG 1.4.11). --color-border compõe
   #ebebeb sobre branco = 1,19:1; --color-muted #727271 = 4,82:1. Escopado à
   .gravacao-textarea: não toca o token global nem as outras 3 abas. */
.gravacao-textarea {
  width: 100%;
  min-height: 6rem;
  padding: var(--space-3);
  color: var(--color-text);
  background: var(--color-card);
  border: 1px solid var(--color-muted);
  border-radius: var(--r-btn);
  resize: vertical;
}

.gravacao-textarea:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

.gravacao-lista {
  margin: 0;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.gravacao-transcricao-summary {
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-text-2);
}

.gravacao-transcricao-texto {
  margin-top: var(--space-3);
  white-space: pre-wrap;
  color: var(--color-text-2);
}

/* Botões dedicados de bloco (nunca .copy-btn). */
.gravacao-copy-btn,
.gravacao-resumir-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--r-btn);
  cursor: pointer;
  transition: filter var(--dur-fast) var(--ease);
}

.gravacao-copy-btn:hover,
.gravacao-resumir-btn:hover {
  filter: brightness(0.97);
}

.gravacao-copy-btn:focus-visible,
.gravacao-resumir-btn:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

.gravacao-resumir-btn[disabled] {
  cursor: progress;
  filter: grayscale(0.3);
}

.gravacao-copy-btn.gravacao-copiado {
  color: var(--color-success);
  border-color: var(--color-success);
}

.gravacao-copy-btn .icon {
  color: currentColor;
}

/* Área de transferência de reserva — fora da tela, sem estilo inline. */
.gravacao-clipboard-fallback {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: none;
  opacity: 0;
}

/* ── Feature A — Continuação de gravação ─────────────────────────────────────
   Banner de MODO (P1-2): molde da caixa de identidade (--color-blue-soft), mas
   com o realce âmbar de "atenção contínua" — o médico não pode confundir modo
   continuação com uma consulta nova. Só tokens existentes. */
.gravacao-continuacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-text);
  background: var(--color-blue-soft);
  border: 1px solid var(--color-blue-focus);
  border-radius: var(--r-btn);
}

.gravacao-continuacao-texto {
  flex: 1 1 16rem;
  font-weight: 600;
}

.gravacao-continuacao-cancelar {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--r-btn);
  cursor: pointer;
  transition: filter var(--dur-fast) var(--ease);
}

.gravacao-continuacao-cancelar:hover {
  filter: brightness(0.97);
}

.gravacao-continuacao-cancelar:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

/* Card de DECISÃO em painel (P1-3): molde do estado vazio (.gravacao-empty).
   Dois botões de PESO IGUAL — nenhuma escolha é o "caminho fácil" que se clica
   sem ler; a diferença mora no rótulo (o dano/benefício), não na cor. */
.gravacao-decisao {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-card);
  border: 1px solid var(--color-muted);
  border-radius: var(--r-card);
}

.gravacao-decisao-titulo {
  color: var(--color-text);
  font-weight: 700;
}

.gravacao-decisao-alerta {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-warning);
}

.gravacao-decisao-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.gravacao-decisao-botao {
  flex: 1 1 14rem;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: center;
  color: var(--color-text);
  background: var(--color-card);
  border: 1px solid var(--color-muted);
  border-radius: var(--r-btn);
  cursor: pointer;
  transition: filter var(--dur-fast) var(--ease);
}

.gravacao-decisao-botao:hover {
  filter: brightness(0.97);
}

.gravacao-decisao-botao:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

/* Véu de reprocessamento (DA-A3): o resultado anterior fica visível porém
   atenuado até o novo CONCLUIDO. A legenda é a única camada NÃO atenuada — é a
   explicação do que está acontecendo com o texto por baixo. */
.gravacao-reprocessando {
  position: relative;
}

.gravacao-reprocessando > * {
  opacity: 0.45;
  pointer-events: none;
}

.gravacao-reprocessando::after {
  content: attr(data-reprocessando);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: center;
  color: var(--color-blue-focus);
  background: var(--color-card);
  opacity: 0.85;
  border-radius: var(--r-card);
}

/* Cabeçalho do selo de versão (P2-2/R0-D11): reusa .gravacao-selo, apenas o
   posiciona no topo do resultado. */
.gravacao-versao {
  display: flex;
}

/* ==========================================================================
   Feature B — Análise integrada (cartão de consentimento + bloco de resultado)
   Só tokens de tokens.css. O âmbar --color-warning é o acento desta feature: ela
   INFERE e deve ser conferida — a mesma semântica de "aviso" que A-5 já pratica.
   Nenhum token novo; nenhum !important. Separação clínica: o azul/neutro fica
   reservado ao prontuário conservador; a análise assistiva veste âmbar.
   ========================================================================== */

/* ── Cartão de consentimento (R0-D14/DD-B5) — ao pé do resultado ─────────── */
.gravacao-analise-cartao {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-card);
  border: 1px solid var(--color-warning);
  border-radius: var(--r-card);
}

.gravacao-analise-cartao-titulo {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text);
}

.gravacao-analise-cartao-intro {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-text);
}

.gravacao-analise-inventario {
  margin: 0;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.gravacao-analise-item {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-text-2);
}

.gravacao-analise-item-rotulo {
  font-weight: 600;
  color: var(--color-text);
}

/* Exame de outro paciente: barrado nominalmente (nunca cruzar paciente). */
.gravacao-analise-item--barrado .gravacao-analise-item-valor {
  color: var(--color-danger);
  font-weight: 600;
}

/* Custo dito com franqueza (DD-B5): âmbar, para o médico ler antes de ligar. */
.gravacao-analise-cartao-custo {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-warning);
}

.gravacao-analise-toggle {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-text);
  cursor: pointer;
}

.gravacao-analise-toggle-input {
  margin-top: 0.15rem;
  flex: 0 0 auto;
}

.gravacao-analise-toggle-input:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

.gravacao-analise-cartao-botao {
  align-self: flex-start;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-card);
  background: var(--color-warning);
  border: 1px solid var(--color-warning);
  border-radius: var(--r-btn);
  cursor: pointer;
  transition: filter var(--dur-fast) var(--ease);
}

.gravacao-analise-cartao-botao:hover:not(:disabled) {
  filter: brightness(0.95);
}

.gravacao-analise-cartao-botao:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

.gravacao-analise-cartao-botao:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Bloco de resultado "Análise integrada" (DA-B6) — separado do prontuário ─ */
/* Acento âmbar E borda esquerda forte: distingue à primeira vista da Evolução
   conservadora, que é neutra. A separação é visual E textual (selo + aviso). */
.gravacao-bloco--analise {
  border-color: var(--color-warning);
}

/* Selo permanente da análise (R0-D20): âmbar, nunca some. */
.gravacao-selo--analise {
  color: var(--color-warning);
  border-color: var(--color-warning);
}

/* Aviso "infere — confira": o texto que impede confundir com a Evolução. */
.gravacao-analise-aviso {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-warning);
}

.gravacao-analise-summary {
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-text-2);
}

.gravacao-analise-corpo {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.gravacao-analise-sintese {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-text);
}

.gravacao-analise-secao-titulo {
  margin: var(--space-2) 0 0;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text);
}

.gravacao-analise-lista {
  margin: 0;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-text);
}

/* Rodapé de proveniência (DA-B8/R0-D11): metadado — época e fontes. */
.gravacao-analise-proveniencia {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--color-text-2);
}

/* ── Box de Exames (S15) — box-mãe + 2 sub-boxes + aviso posicional + conferir ─
   RASCUNHO PARA CONFERÊNCIA, nunca escrita automática. O sangue é colado por
   POSIÇÃO no prontuário legado; por isso o aviso "N de M" e o bloco "conferir"
   têm de ser inescapáveis NA TELA — o aviso fica FORA do data-texto (SPEC §P10),
   logo não viaja com a colagem e o médico não o verá depois de colar. Acento
   âmbar como o bloco "Análise integrada": distingue à primeira vista de um dado
   já conferido. Só tokens existentes; sem !important; sem valor mágico. */
.gravacao-bloco--exames {
  gap: var(--space-4);
  border-color: var(--color-warning);
}

/* Os dois sub-boxes (sangue / outros): cartões aninhados no padrão da casa,
   fundo um passo mais suave para lê-los como filhos do box-mãe. */
.gravacao-exames-sub {
  background: var(--color-bg);
  border-color: var(--color-border-2);
}

/* Aviso posicional (P10): "7 de 12 — confira as posições vazias antes de colar".
   Âmbar e forte: um slot vazio despercebido desloca todos os valores seguintes. */
.gravacao-exames-aviso {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-warning);
}

/* Bloco "conferir — não localizado no áudio" (P9/D-BLOCO): valores não-ancorados,
   segregados FORA da string copiável. Borda âmbar como o bloco "Análise integrada"
   (mesmo idioma da casa para "atenção — confira"), não uma barra lateral. */
.gravacao-exames-conferir {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--color-card);
  border: 1px solid var(--color-warning);
  border-radius: var(--r-btn);
}

.gravacao-exames-conferir-titulo {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-warning);
}

.gravacao-exames-conferir-lista {
  margin: 0;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-text);
}

/* ── Sub-boxes POR TIPO (conteúdo REAL do Gem — SPEC §9.2) ─────────────────────
   "Outros exames" deixou de ser UM bloco: cada tipo presente (Holter,
   Ecocardiograma, Tomografia, Teste Ergométrico, MAPA, ECG) é um cartão próprio,
   com título (emoji + nome), Linha Pachón copiável e instrução visível. Herdam o
   cartão aninhado de .gravacao-exames-sub; aqui vão só os elementos internos que
   o sub-box de tipo acrescenta. Mesmos tokens da casa; sem !important; sem valor
   mágico. */
.gravacao-exames-tipo {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Título do tipo ("🩺 Exame de Holter | [Nome]"): mesma hierarquia do título de
   bloco, um passo abaixo por ser filho do box-mãe de exames. */
.gravacao-exames-tipo-titulo {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
}

/* Instrução visível ("Copie e Cole esta linha…"): fica FORA do data-texto (SPEC
   §9.2) — não viaja com a colagem, logo tem de ser lida NA TELA. Idioma da dica de
   bloco (.gravacao-bloco-dica): pequena e secundária, sem competir com a Linha. */
.gravacao-exames-instrucao {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--color-text-2);
}

/* Dica de cópia dos NARRATIVOS: deixa claro na tela que o Copiar leva o resumo
   para a CONCLUSÃO (não é colagem posicional). Idioma da instrução, um passo mais
   discreto — não compete com o resumo copiável logo abaixo. */
.gravacao-exames-copia-dica {
  font-weight: 600;
  color: var(--color-text-2);
}

/* Análise técnica (Holter/MAPA/ECG): texto descritivo do modelo, painel sóbrio,
   separado da Linha Pachón copiável para não ser confundido com dado a colar. */
.gravacao-exames-analise {
  margin: 0;
  padding: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border-2);
  border-radius: var(--r-btn);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text);
  white-space: pre-wrap;
}

/* ── Box "Exames" em ABAS (ajuste de layout 2026-07-21) ─────────────────────
   Uma aba por exame COM dado; painel = região do box-mãe (não cartão aninhado);
   grid multi-coluna com leitura vertical, no estilo do prontuário legado. O
   corpo copiável (data-texto) e seu id NÃO mudam — só a apresentação. */
.gravacao-exames-abas {
  display: flex;
  flex-wrap: wrap;               /* todas as abas sempre visíveis; nunca scroll-x */
  gap: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--color-border-2);
}
.gravacao-exames-aba {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: -1px;           /* sublinhado ativo cobre a régua do tablist */
  padding: var(--space-2) var(--space-3);
  max-width: 14rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-2);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.gravacao-exames-aba-rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gravacao-exames-aba:hover { color: var(--color-text); }
.gravacao-exames-aba[aria-selected="true"] {
  color: var(--color-blue-focus);
  border-bottom-color: var(--color-blue);
}
.gravacao-exames-aba:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 2px; }
.gravacao-exames-aba-alerta {
  flex: 0 0 auto;
  width: var(--space-2);
  height: var(--space-2);
  background: var(--color-warning);
  border-radius: var(--r-pill);
}

.gravacao-exames-painel { display: flex; flex-direction: column; gap: var(--space-3); }
.gravacao-exames-painel[hidden] { display: none; }   /* OBRIGATÓRIO: o flex acima anularia o hidden nativo */
.gravacao-exames-painel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
}
.gravacao-exames-painel-titulo {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
}

/* Grid rotulado — multi-coluna: leitura vertical como o cartão do prontuário. */
.gravacao-exames-grade {
  display: block;                /* anula o flex-column herdado de .gravacao-lista */
  columns: 11rem 4;
  column-gap: var(--space-6);
  column-rule: 1px solid var(--color-border-2);
  padding-left: 0;
  list-style: none;
}
.gravacao-exames-grade .gravacao-exames-item {
  break-inside: avoid;
  padding: var(--space-1) 0;
  font-size: 0.875rem;
  line-height: 1.5;
}
.gravacao-exames-item-valor { font-variant-numeric: tabular-nums; }

/* Linha Pachón dos não-posicionais: o ARTEFATO a colar, em painel neutro. */
.gravacao-exames-corpo--linha {
  padding: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border-2);
  border-radius: var(--r-btn);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

/* Texto só-para-leitor-de-tela (o ponto âmbar da aba nunca informa só por cor). */
.gravacao-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

}