/* SeeYouMed: estilos globais.
   Identidade SeuSaúde (www.seusaude.com): teal #006666, accent #00d4aa,
   DM Serif Display (títulos) + Plus Jakarta Sans (corpo). */

/* Fontes auto-hospedadas (antes vinham do Google Fonts, que bloqueava a
   renderização em ~540 ms e quebrava o modo offline do PWA). Subset latin,
   cobre todo o PT-BR. A Instrument Sans é variável: um arquivo, pesos 400-700. */
@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-serif-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-serif-700.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-var.woff2") format("woff2");
}

:root {
  /* Tokens da identidade OFICIAL SeeYouMed (marca.json 2026-08-11):
     teal #0E3A3C, acento #3A9A8E, latão #A8854E, osso #F5F2EC, grafite #12191A. */
  --sym-primary-900: #071D1F;
  --sym-primary-800: #092527;
  --sym-primary-700: #0B2E30;
  --sym-primary-600: #0E3A3C;
  --sym-primary-500: #14494C;
  --sym-primary-100: #BFD9D6;
  --sym-primary-50: #EDF3F2;
  --sym-accent: #3A9A8E;
  --sym-accent-escuro: #2E7A71;
  --sym-latao: #A8854E;
  --sym-fundo: #F5F2EC;
  --sym-texto: #12191A;
  --sym-texto-suave: #627371;
  --sym-palco: #12191A;
  --sym-texto-claro: #D9E2E0;
  --sym-borda: rgba(14, 58, 60, 0.2);
  --sym-borda-clara: rgba(58, 154, 142, 0.32);
  --sym-vidro: rgba(10, 16, 17, 0.92);
  --sym-erro: #ef4444;
  --font-display: "IBM Plex Serif", Georgia, serif;
  --font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  background: var(--sym-fundo);
  color: var(--sym-texto);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
button { font-family: inherit; cursor: pointer; }
button, a, input, select, label {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
input, select { font-family: inherit; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ===== Sistema de botões ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1px;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(58, 154, 142, 0.45); }
.btn:active { transform: translateY(1px); }
.btn-primario {
  background: linear-gradient(135deg, var(--sym-primary-600), var(--sym-primary-500));
  color: #fff;
  box-shadow: 0 6px 16px rgba(14, 58, 60, 0.3);
}
.btn-primario:hover { background: linear-gradient(135deg, var(--sym-primary-700), var(--sym-primary-600)); }
.btn-contorno-claro {
  background: #fff;
  border-color: var(--sym-primary-500);
  color: var(--sym-primary-700);
  min-height: 44px;
  padding: 8px 18px;
  font-size: 14px;
}
.btn-contorno-claro:hover { background: var(--sym-primary-50); }
.btn-largo { width: 100%; }
.btn-link {
  display: block;
  min-height: 44px;
  margin: 4px auto -10px;
  padding: 12px 8px;
  background: none;
  border: none;
  color: var(--sym-primary-600);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn-link:hover { color: var(--sym-primary-800); }
.btn-link:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(58, 154, 142, 0.45); border-radius: 8px; }
/* Sem este estado, o "Reenviar código" continuava com cara de clicável durante
   os 30 s de espera e o profissional insistia no clique. */
.btn-link:disabled { color: var(--sym-texto-suave); cursor: default; text-decoration: none; }
.btn:disabled { cursor: wait; opacity: 0.72; }

/* ===== Telas ===== */
/* Nenhuma tela cria rolagem de página: cada uma ocupa exatamente o viewport e
   a rolagem, quando necessária, acontece dentro da área de conteúdo
   (.tela-rolagem). Toda tela abre sem rolagem. */
.tela { display: none; min-height: 100dvh; }
.tela.ativa { display: flex; flex-direction: column; height: 100dvh; min-height: 0; overflow: hidden; }
.tela.ativa > .topo { flex: none; }
.tela-rolagem {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--sym-primary-100) transparent;
}

/* ===== Abertura (verificação de sessão) =====
   Quem tem sessão recente não pode ver o formulário de login piscar a cada
   recarregamento: o script inline do shell liga data-tela="carregando" antes
   da primeira pintura e o app.js troca para a tela definitiva. */
.abertura { display: none; }
body[data-tela="carregando"] .abertura {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--sym-fundo);
}
body[data-tela="carregando"] #tela-acesso { display: none; }
.abertura img { width: min(230px, 60vw); height: auto; }
.abertura p { font-size: 14px; font-weight: 600; color: var(--sym-texto-suave); }

/* ===== Tela de acesso (cadastro de médicos) =====
   A tela ocupa exatamente o viewport nos TRÊS painéis (cadastro, entrada e
   código): a página nunca cria barra de rolagem própria e nada é cortado.
   Quando a janela é baixa demais para o formulário inteiro, quem rola é a área
   de campos dentro do cartão (.acesso-campos): logomarca, título e botão de
   ação continuam sempre à vista. O modelo anterior escondia o excesso com
   overflow no cartão e chegava a engolir o link de troca de painel em janelas
   de menos de 600 px de altura. */
#tela-acesso.ativa {
  display: flex;
  align-items: stretch;
  min-height: 0;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}
.acesso-wrap {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(340px, 1fr) minmax(380px, 560px);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0 clamp(24px, 5vw, 72px);
  padding: clamp(16px, 3vh, 48px) clamp(20px, 5vw, 72px);
  background:
    radial-gradient(ellipse 90% 70% at 110% -10%, rgba(58, 154, 142, 0.18), transparent 60%),
    linear-gradient(150deg, var(--sym-primary-900), var(--sym-primary-600) 60%, var(--sym-primary-500));
}
.acesso-hero {
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  max-height: 100%;
  color: var(--sym-fundo);
  max-width: 620px;
}

/* Banner humano (desktop): recorte 16:9 estável, sem distorção em telas Retina. */
.acesso-banner { margin: 22px 0 0; min-height: 0; }
.acesso-banner picture { display: block; }
.acesso-banner img {
  display: block;
  width: 100%;
  height: auto;
  /* Captura real do produto: proporção da própria tela do viewer (16:10). A
     altura é o que falta nesta coluna, então é ela que manda: a largura segue. */
  aspect-ratio: 16 / 10;
  width: auto;
  max-width: 100%;
  max-height: min(36vh, 340px);
  object-fit: cover;
  object-position: center;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 20px 50px rgba(0, 15, 15, 0.45);
}
.acesso-banner figcaption {
  margin-top: 9px;
  font-size: 12px;
  letter-spacing: 0.2px;
  color: rgba(255, 255, 255, 0.6);
}

/* Logomarca: um único lugar, centralizada no cartão de credenciais
   (superfície branca natural, padrão da casa). O flex: none impede que ela
   encolha quando o cartão chega ao teto de altura. */
.acesso-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 2.9vw, 36px);
  line-height: 1.18;
  max-width: 26ch;
}
.acesso-beneficios { margin-top: 20px; list-style: none; }
.acesso-beneficios li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: #CBD6D3;
}
.acesso-beneficios li::before {
  content: "";
  position: absolute;
  left: 0; top: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(58, 154, 142, 0.26) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%233A9A8E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}
/* Fila de especialidades: o ícone é o contorno da malha real que a cena
   carrega, então a lista já mostra do que o produto é feito. */
.acesso-esps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
  list-style: none;
  max-width: 560px;
}
.acesso-esps li {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 12.5px;
  line-height: 1.25;
  color: #CBD6D3;
}
.acesso-esp-icone {
  display: flex;
  flex: 0 0 auto;
  color: var(--sym-accent);
}
.acesso-esp-icone svg { width: 22px; height: 22px; }

.acesso-cartao {
  align-self: center;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 20, 20, 0.35);
  padding: clamp(20px, 2.6vh, 32px) clamp(20px, 3vw, 40px);
}
.acesso-cartao h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  color: var(--sym-primary-800);
}
.acesso-sub { margin: 5px 0 16px; font-size: 14.5px; color: var(--sym-texto-suave); }

/* Painel de acesso: coluna com cabeçalho fixo, campos roláveis e ação fixa.
   A classe composta vence o .painel-oculto sem precisar de !important. */
.acesso-painel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.acesso-painel.painel-oculto { display: none; }
.painel-oculto { display: none; }
.acesso-painel > h2,
.acesso-painel > .acesso-sub,
.acesso-painel > .btn-link,
.acesso-painel > .acesso-links { flex: none; }
.acesso-painel form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
#cod-codigo {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 9px;
  /* O espaçamento entre letras também é aplicado DEPOIS do último dígito: sem
     esta compensação o texto fica visivelmente deslocado para a esquerda. */
  text-indent: 9px;
}

/* Formulários: a grade dos campos é a única região que rola. */
.acesso-campos {
  display: grid;
  /* Seis colunas: permitem meio (3), um terço (2) e dois terços (4) sem
     precisar de uma grade por linha. */
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Folga para o anel de foco (box-shadow de 3 px) não ser cortado pela borda
     do contêiner de rolagem; a margem negativa devolve o alinhamento. */
  padding: 4px;
  margin: -4px;
  scrollbar-width: thin;
  scrollbar-color: var(--sym-primary-100) transparent;
}
/* Indicação de que ainda há campo abaixo (o celular não mostra barra). */
.acesso-campos--rolavel {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
}
.acesso-campos--rolavel.acesso-campos--fim {
  -webkit-mask-image: none;
  mask-image: none;
}
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; grid-column: span 3; }
.campo-cheio { grid-column: 1 / -1; }
.campo-terco { grid-column: span 2; }
.campo label { font-size: 13px; font-weight: 600; color: var(--sym-primary-800); }
.campo .opcional { font-weight: 400; color: var(--sym-texto-suave); }
.campo input, .campo select {
  min-height: 46px;
  padding: 10px 14px;
  border: 1.5px solid var(--sym-borda);
  border-radius: 10px;
  font-size: 15px;
  color: var(--sym-texto);
  background: #fff;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.campo input:focus, .campo select:focus {
  border-color: var(--sym-primary-500);
  box-shadow: 0 0 0 3px rgba(58, 154, 142, 0.26);
}
.campo input.invalido, .campo select.invalido { border-color: var(--sym-erro); }
/* 29/09/2026: 16 px em TODAS as larguras nos campos do cartão de acesso (cadastro,
   entrada e código). O 16 px só existia até 700 px (consultorio.css) e até 430 px
   (abaixo); de 701 px para cima os campos ficavam com os 15 px da regra base, e o
   Safari do iPad (768 a 1366) dá zoom ao focar campo com menos de 16 px, tirando a
   tela do lugar no meio do cadastro. A altura não muda: quem manda nela é o
   min-height (46 px, ou 44 px no celular e em janela baixa). O código de 6 dígitos
   continua com 24 px porque #cod-codigo é seletor de id e vence esta regra. */
.acesso-cartao .campo :is(input, select, textarea) { font-size: 16px; }
.campo-pote { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.consentimento {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sym-texto-suave);
  cursor: pointer;
}
.consentimento input {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-top: 0;
  accent-color: var(--sym-primary-600);
}
.consentimento input.invalido { outline: 2px solid var(--sym-erro); outline-offset: 2px; }
/* A linha de erro não reserva altura enquanto está vazia (eram 30 px de espaço
   morto no cartão), mas continua no fluxo e no acervo de acessibilidade: o
   role="alert" é anunciado quando o texto chega. */
.form-erro {
  flex: none;
  min-height: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sym-erro);
}
.form-erro:not(:empty) { margin-top: 12px; }
.acesso-painel form > .btn { flex: none; margin-top: 14px; }
.acesso-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 18px; }
.acesso-links .btn-link { margin: 4px 0 -10px; }
.acesso-rodape {
  grid-column: 1 / -1;
  align-self: end;
  padding-top: 28px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.66);
  max-width: 900px;
}
.acesso-rodape-dados { margin-top: 4px; font-size: 11px; color: rgba(255, 255, 255, 0.5); }

/* ===== Catálogo (header branco, padrão do site principal) =====
   Estrutura: logomarca à esquerda, nome de quem entrou ao centro e Sair à
   direita (a grade mora em consultorio.css). A busca fica aberta no painel do
   catálogo desde 06/09/2026, não mais minimizada no cabeçalho. */
.topo {
  background: #fff;
  color: var(--sym-texto);
  padding: 16px clamp(16px, 4vw, 40px);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--sym-borda);
  box-shadow: 0 2px 12px rgba(18, 25, 26, 0.06);
}
.topo-catalogo { row-gap: 12px; }
.marca { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; min-width: 0; flex: 1 1 220px; }
.marca-logo { height: 32px; width: auto; flex: 0 0 auto; }
.marca-sub { color: var(--sym-texto-suave); font-size: clamp(12px, 1.8vw, 13.5px); }
.topo-acoes { display: flex; align-items: center; gap: 10px; margin-left: auto; }
/* Identidade de quem está logado: chip ao lado das ações, com o tratamento
   correto (Dra./Dr.). Vazio, não ocupa lugar. */
#conta-nome {
  display: inline-block;
  max-width: min(240px, 30vw);
  padding: 10px 16px;
  border: 1px solid var(--sym-borda);
  border-radius: 999px;
  background: var(--sym-primary-50);
  color: var(--sym-primary-800);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#conta-nome:empty { display: none; }
.btn-icone {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border-radius: 12px;
  border: 1.5px solid var(--sym-primary-500);
  background: #fff;
  color: var(--sym-primary-700);
  transition: background 0.15s, border-color 0.15s;
}
.btn-icone svg { width: 20px; height: 20px; display: block; }
.btn-icone:hover { background: var(--sym-primary-50); }
.btn-icone.ativo { background: var(--sym-primary-600); border-color: var(--sym-primary-600); color: #fff; }
.btn-icone:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(58, 154, 142, 0.45); }
/* ===== Painel de entrada do catálogo (06/09/2026) =====
   Faixa teal com saudação, busca aberta e os números do acervo. É a primeira
   coisa que o profissional vê depois de entrar: diz onde ele está, quem ele é
   para o sistema e por onde começar. */
.painel-catalogo {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr);
  grid-template-areas:
    "texto busca"
    "texto numeros";
  gap: 14px clamp(20px, 4vw, 48px);
  align-items: center;
  margin: clamp(14px, 2.6vw, 28px) clamp(16px, 4vw, 40px) 0;
  padding: clamp(18px, 2.6vw, 28px) clamp(20px, 3vw, 34px);
  border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(ellipse 70% 120% at 100% 0%, rgba(58, 154, 142, 0.35), transparent 60%),
    linear-gradient(135deg, var(--sym-primary-800), var(--sym-primary-600) 65%, var(--sym-primary-500));
  box-shadow: 0 14px 34px rgba(7, 29, 31, 0.18);
}
.painel-catalogo-texto { grid-area: texto; min-width: 0; }
.painel-catalogo h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
  color: #fff;
}
.painel-catalogo p { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: #CBD6D3; max-width: 46ch; }
.painel-busca { grid-area: busca; position: relative; }
.painel-busca-icone {
  position: absolute; left: 14px; top: 50%;
  width: 20px; height: 20px;
  transform: translateY(-50%);
  color: var(--sym-primary-500);
  pointer-events: none;
}
.painel-busca input {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px 12px 44px;
  border-radius: 14px;
  border: 1.5px solid transparent;
  background: #fff;
  color: var(--sym-texto);
  font-size: 16px;
  outline: none;
  box-shadow: 0 8px 22px rgba(0, 20, 20, 0.22);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.painel-busca input::placeholder { color: #7fa39d; }
/* 29/09/2026: em 320 px a dica da busca do catálogo era cortada no meio da palavra ("nome popular, s"). Reticências avisam que continua. */
#tela-catalogo .painel-busca input { text-overflow: ellipsis; }
.painel-busca input:focus { border-color: var(--sym-accent); box-shadow: 0 0 0 3px rgba(58, 154, 142, 0.45); }
.painel-numeros {
  grid-area: numeros;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}
.painel-numeros li {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  font-size: 12.5px;
  color: #CBD6D3;
}
.painel-numeros strong { font-family: var(--font-display); font-size: 16px; color: #fff; }

.catalogo {
  padding: clamp(16px, 3vw, 32px) clamp(16px, 4vw, 40px) 8px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 16px;
}
/* Cartão da especialidade (06/09/2026): a capa é um render real da cena
   base (tools/gerar-capas.js), sobre o mesmo papel do palco 3D; o ícone da
   especialidade fica como selo no canto. O paciente e o profissional veem no
   catálogo exatamente o que vão abrir. */
.card-esp {
  background: #fff;
  border: 1px solid var(--sym-borda);
  border-radius: 18px;
  padding: 16px;
  text-align: left;
  display: flex;
  gap: 16px;
  align-items: stretch;
  transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}
.card-esp:hover { box-shadow: 0 10px 26px rgba(18, 25, 26, 0.14); transform: translateY(-1px); border-color: var(--sym-primary-500); }
.card-esp:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(58, 154, 142, 0.45); }
.card-esp.embreve { opacity: 0.55; cursor: default; }
.card-esp.embreve:hover { box-shadow: none; transform: none; border-color: var(--sym-borda); }
.card-esp-capa {
  position: relative;
  width: 96px; height: 96px; flex: 0 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: #e9e3d7;
  box-shadow: inset 0 0 0 1px rgba(14, 58, 60, 0.08);
}
.card-esp-capa img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Sem a imagem (offline na primeira visita), o selo vira o ícone grande. */
.card-esp-capa.capa--sem-imagem { background: var(--sym-primary-50); display: flex; align-items: center; justify-content: center; }
.card-esp-capa.capa--sem-imagem .capa-selo { position: static; width: 44px; height: 44px; box-shadow: none; background: transparent; color: var(--sym-primary-600); }
.card-esp-capa.capa--sem-imagem .capa-selo svg { width: 40px; height: 40px; }
.capa-selo {
  position: absolute;
  right: 6px; bottom: 6px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--sym-primary-600);
  box-shadow: 0 2px 8px rgba(18, 25, 26, 0.22);
}
.capa-selo svg { width: 22px; height: 22px; display: block; }
/* Corpo em coluna com o rodapé preso à base: os "N módulos" de uma mesma linha
   da grade ficam alinhados entre si, independentemente do tamanho da descrição. */
.card-esp-corpo { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.card-esp h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.25; color: var(--sym-primary-800); }
.card-esp p { font-size: 13.5px; color: var(--sym-texto-suave); margin: 4px 0 12px; line-height: 1.45; }
.card-esp-rodape { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.card-esp .tag-quantidade {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--sym-primary-700);
  background: var(--sym-primary-50);
  border-radius: 999px;
  padding: 3px 10px;
}
.card-esp-seta {
  display: flex;
  flex: 0 0 auto;
  color: var(--sym-primary-100);
  transition: color 0.15s, transform 0.15s;
}
.card-esp-seta svg { width: 18px; height: 18px; }
.card-esp:hover .card-esp-seta, .card-esp:focus-visible .card-esp-seta { color: var(--sym-accent); transform: translateX(2px); }
/* Cabeçalho da grade de especialidades: */
.catalogo-cabeca {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 16px;
  margin-bottom: 2px;
}
.catalogo-cabeca h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 2.4vw, 24px); color: var(--sym-primary-800); }
.catalogo-cabeca p { font-size: 13px; color: var(--sym-texto-suave); }
.card-esp .tag-embreve { background: #eef1f0; color: #86938f; }
.busca-secao { grid-column: 1 / -1; font-size: 14px; color: var(--sym-texto-suave); margin-top: 4px; }
.catalogo-breve {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding: 18px;
  border: 1px solid var(--sym-borda);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.54);
}
.catalogo-breve-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
  color: var(--sym-primary-800);
  font-size: 14px;
  font-weight: 700;
}
.catalogo-breve-cabeca strong {
  color: var(--sym-texto-suave);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.catalogo-breve-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.breve-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 11px;
  background: rgba(237, 243, 242, 0.8);
  color: #657875;
  font-size: 13px;
  font-weight: 600;
}
.breve-chip > span:last-child { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.breve-icone { display: flex; flex: 0 0 auto; color: #78928e; }
.breve-icone svg { width: 18px; height: 18px; }

/* Lista de condições: */
.topo-compacto { padding: 12px clamp(16px, 4vw, 40px); gap: 14px; justify-content: flex-start; flex-wrap: nowrap; }
.topo-compacto h2,.topo-compacto h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 3vw, 26px); line-height: 1.15; color: var(--sym-primary-800); }
/* Título da especialidade com linha de contexto, e a logomarca do SeeYouMed
   fechando o cabeçalho à direita (padrão de papel timbrado): o profissional
   sabe onde está e a marca acompanha a tela que o paciente vê. */
.topo-titulo { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 auto; }
.topo-titulo-textos { min-width: 0; }
.topo-capa { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 12px; object-fit: cover; background: #e9e3d7; box-shadow: inset 0 0 0 1px rgba(14, 58, 60, 0.08); }
.topo-marca { height: 26px; width: auto; flex: 0 0 auto; margin-left: auto; }
.topo-sub {
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--sym-texto-suave);
}
.topo-sub:empty { display: none; }
/* Ícone em SVG centralizado por flex: o glifo de fonte (seta de texto)
   desalinhava conforme a fonte do dispositivo (visto em Android). */
.btn-voltar {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border-radius: 12px;
  border: 1.5px solid var(--sym-borda);
  background: #fff;
  color: var(--sym-primary-700);
}
.btn-voltar svg { width: 21px; height: 21px; display: block; }
.btn-voltar:active { background: var(--sym-primary-50); }
.btn-voltar:focus-visible, .btn-passo:focus-visible, .btn-play:focus-visible, .passo-ponto:focus-visible, .pill-nivel:focus-visible {
  outline: 2px solid var(--sym-accent);
  outline-offset: 2px;
}
/* No palco 3D (fundo escuro) o voltar mantém o vidro claro: */
.viewer-topo .btn-voltar {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.viewer-topo .btn-voltar:active { background: rgba(255, 255, 255, 0.25); }
.lista-condicoes {
  padding: clamp(16px, 3vw, 32px) clamp(16px, 4vw, 40px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 14px;
}
.card-cond {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--sym-borda);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  text-align: left;
  transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}
.card-cond:hover { box-shadow: 0 10px 26px rgba(18, 25, 26, 0.14); transform: translateY(-1px); border-color: var(--sym-primary-500); }
.card-esp:active, .card-cond:active { transform: translateY(1px); background: var(--sym-primary-50); }
.card-cond:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(58, 154, 142, 0.45); }
/* A capa da condição é o primeiro quadro do resumo do paciente, no papel do
   palco: o profissional escolhe pela imagem, não só pelo nome. */
.card-cond-capa {
  display: block;
  aspect-ratio: 4 / 3;
  background: #e9e3d7;
  border-bottom: 1px solid rgba(14, 58, 60, 0.08);
  overflow: hidden;
}
.card-cond-capa img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.card-cond-capa.capa--sem-imagem { aspect-ratio: auto; height: 8px; }
.card-cond-corpo { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px 18px 18px; }
.card-cond h2 { font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.25; color: var(--sym-primary-800); }
.card-cond p { font-size: 13.5px; color: var(--sym-texto-suave); margin-top: 6px; line-height: 1.5; }
.card-cond .passos-info { margin-top: auto; padding-top: 12px; font-size: 12px; font-weight: 600; color: var(--sym-primary-600); }

.rodape {
  margin: 16px clamp(16px, 4vw, 40px) 0;
  padding: 16px 0 28px;
  border-top: 1px solid var(--sym-borda);
  color: #7b8a86;
  font-size: 12.5px;
  line-height: 1.5;
  max-width: 860px;
}
.rodape p + p { margin-top: 6px; }
.rodape-creditos { font-size: 11.5px; color: #93a09c; }
/* Bloco da empresa: identifica quem responde pelo produto, sem discurso. */
.rodape-empresa {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(14, 58, 60, 0.1);
}
.rodape-assinatura { font-weight: 600; color: var(--sym-primary-600); }
.rodape-dados { margin-top: 2px; font-size: 11.5px; color: #93a09c; }

/* ===== Visualizador ===== */
/* Palco claro de prancha de atlas: o modelo colorido se destaca sobre papel
   neutro e a vinheta é apenas um sopro de profundidade. */
.tela-viewer { background: #e9e3d7; }
#palco { position: fixed; inset: 0; background: #e9e3d7; }
#canvas3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#canvas-desenho { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; pointer-events: none; }
#canvas-desenho.ativo { pointer-events: auto; cursor: crosshair; }
#palco::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 92% 84% at 50% 42%, transparent 62%, rgba(56, 48, 36, 0.14) 100%);
}

/* Rótulos anatômicos: */
#labels-overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* Rótulo de prancha de atlas: encostado na margem, nunca sobre o órgão.
   A largura da coluna vem do visualizador (--label-largura), que a calcula
   pela tela. */
.label3d {
  position: absolute;
  transform: translateY(-50%);
  transform-origin: left center;
  background: rgba(6, 16, 15, 0.82);
  border: 1px solid var(--sym-borda-clara);
  color: #d9f2ec;
  font-size: 12.5px;
  line-height: 1.28;
  padding: 4px 10px;
  border-radius: 8px;
  max-width: var(--label-largura, 180px);
  /* Nunca quebrar palavra no meio: "Miométrio" virava "Miométri" mais "o" numa
     linha só dele. A quebra acontece apenas nos espaços. */
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
  text-align: left;
  backdrop-filter: blur(2px);
  transition: transform 0.2s, border-color 0.2s, background-color 0.2s;
}
.label3d--dir { transform-origin: right center; text-align: right; }
.label3d--destaque {
  transform: translateY(-50%) scale(1.14);
  border-color: var(--sym-accent);
  background: rgba(8, 32, 29, 0.92);
}
@media (max-width: 520px) {
  .label3d { font-size: 11.5px; padding: 3px 8px; line-height: 1.24; }
}
/* Linhas-guia: ligam cada rótulo ao ponto anatômico exato. */
.labels-guias { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.label-guia { stroke: rgba(58, 154, 142, 0.55); stroke-width: 1; }
.label-guia-ponto { fill: rgba(58, 154, 142, 0.95); }
/* Estrutura em plano POSTERIOR: linha tracejada e nome esmaecido, que é como o
   atlas impresso distingue o que está atrás. Antes a linha era cheia e o nome
   parecia apontar para o meio do órgão, onde não havia nada. */
.label-guia--atras { stroke-dasharray: 4 4; stroke: rgba(58, 154, 142, 0.34); }
circle.label-guia--atras { fill: rgba(58, 154, 142, 0.42); }
.label3d--atras { opacity: 0.6; border-style: dashed; }

/* Bússola anatômica: orientação Anterior/Posterior/Esquerda/Direita do corpo
   acompanhando a órbita da câmera. */
.bussola {
  position: absolute;
  z-index: 5;
  left: 14px;
  bottom: calc(var(--painel-passos-altura, 190px) + 14px);
  width: 62px; height: 62px;
  border-radius: 50%;
  border: 1px solid var(--sym-borda-clara);
  background: rgba(6, 16, 15, 0.72);
  backdrop-filter: blur(4px);
  display: none;
  pointer-events: none;
}
.bussola--ativa { display: block; }
.bussola::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: rgba(58, 154, 142, 0.8);
}
.bussola span {
  position: absolute;
  left: calc(50% - 8px); top: calc(50% - 9px);
  width: 16px; height: 18px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 18px;
  color: #d9f2ec;
}
.estrutura-info {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: calc(var(--painel-passos-altura, 190px) + 14px);
  width: min(520px, calc(100% - 24px));
  transform: translateX(-50%);
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  border: 1px solid var(--sym-borda-clara);
  border-radius: 12px;
  background: rgba(6, 16, 15, 0.9);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  color: #eef7f4;
  text-align: center;
  backdrop-filter: blur(8px);
}
.estrutura-info[hidden] { display: none; }
.estrutura-info strong { color: var(--sym-accent); font-size: 13px; }
.estrutura-info span { font-size: 12.5px; line-height: 1.35; color: var(--sym-texto-claro); }

/* Barra superior do viewer: */
.viewer-topo {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px clamp(10px, 2vw, 20px);
  background: linear-gradient(180deg, rgba(6, 16, 15, 0.9), rgba(6, 16, 15, 0.55) 75%, transparent);
}
.viewer-topo .btn-voltar { border-color: rgba(255, 255, 255, 0.2); }
.viewer-titulo { display: flex; flex-direction: column; min-width: 0; margin-right: auto; color: #fff; }
.viewer-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
#viewer-especialidade { font-size: 12.5px; color: #BFD9D6; }
/* CID em CHIP: é o dado que o médico copia para a guia e para o pedido, e
   como texto apagado embaixo do título ele desaparecia. Clicar copia. */
.viewer-cid {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--sym-accent);
  border-radius: 999px;
  background: rgba(58, 154, 142, 0.16);
  color: #EAF6F3;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  transition: background 0.15s, border-color 0.15s;
}
.viewer-cid:hover { background: rgba(58, 154, 142, 0.3); }
.viewer-cid:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(58, 154, 142, 0.5); }
.viewer-cid.copiado { background: var(--sym-accent); color: var(--sym-primary-900); border-color: var(--sym-accent); }

/* Barra lateral de detalhe da estrutura. No desktop entra pela direita sem
   cobrir a cena; no celular sobe como folha, porque lá não há coluna livre. */
.painel-detalhe {
  position: fixed;
  z-index: 12;
  top: calc(var(--viewer-topo-altura, 108px) + 10px);
  right: 12px;
  width: min(360px, 32vw);
  max-height: calc(100dvh - var(--viewer-topo-altura, 108px) - var(--painel-passos-altura, 190px) - 26px);
  display: flex;
  flex-direction: column;
  background: var(--sym-vidro);
  border: 1px solid var(--sym-borda-clara);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
  color: var(--sym-texto-claro);
  overflow: hidden;
}
.detalhe-cabeca {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 12px 10px 16px;
  border-bottom: 1px solid var(--sym-borda-clara);
}
.detalhe-cabeca > div { min-width: 0; flex: 1 1 auto; }
.detalhe-olho {
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sym-accent); font-weight: 700;
}
.painel-detalhe h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.2;
  color: #fff;
  margin-top: 2px;
  overflow-wrap: break-word;
}
.detalhe-fechar {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 9px;
  background: transparent; color: var(--sym-texto-claro);
}
.detalhe-fechar svg { width: 18px; height: 18px; }
.detalhe-fechar:hover { background: rgba(255, 255, 255, 0.1); }
.detalhe-corpo {
  padding: 12px 16px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
}
.detalhe-explicacao { font-size: 14px; line-height: 1.55; color: #E7F1EE; }
.detalhe-itens { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.detalhe-item {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.detalhe-item strong { display: block; font-size: 12.5px; color: var(--sym-accent); margin-bottom: 3px; }
.detalhe-item span { font-size: 13.5px; line-height: 1.5; color: var(--sym-texto-claro); }
.detalhe-aproximar { width: 100%; margin-top: 14px; }
@media (max-width: 900px) {
  .painel-detalhe {
    top: auto;
    left: 8px; right: 8px;
    width: auto;
    bottom: calc(var(--painel-passos-altura, 190px) + 8px);
    max-height: calc(100dvh - var(--painel-passos-altura, 190px) - var(--viewer-topo-altura, 108px) - 24px);
  }
}
.viewer-troca {
  appearance: none;
  -webkit-appearance: none;
  max-width: min(52vw, 420px);
  padding: 2px 26px 2px 8px;
  margin-left: -8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%233A9A8E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 6px center / 15px no-repeat;
  color: #fff;
  font-size: clamp(15px, 2.4vw, 19px);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  min-height: 44px;
}
.viewer-troca:hover, .viewer-troca:focus { border-color: var(--sym-borda-clara); background-color: rgba(255, 255, 255, 0.08); outline: none; }
.viewer-troca option { color: var(--sym-texto); background: #fff; font-weight: 400; }
.viewer-acoes { display: flex; gap: 8px; }
.btn-ferramenta {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 58px;
  min-height: 48px;
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: #c8e2db;
  font-size: 11.5px;
  transition: background 0.15s, border-color 0.15s;
}
.btn-ferramenta svg { width: 20px; height: 20px; }
/* Em tela larga a gaveta não tem razão de existir: cabem todas. */
.btn-mais { display: none; }
.acoes-extra { display: contents; }
.btn-ferramenta:hover { background: rgba(255, 255, 255, 0.14); }
.btn-ferramenta:active, .pill-nivel:active, .btn-passo:active, .btn-play:active { transform: scale(0.96); }
.btn-ferramenta.ativo { background: var(--sym-primary-600); border-color: var(--sym-accent); color: #fff; }
.btn-ferramenta:disabled { cursor: wait; opacity: 0.42; }
.btn-ferramenta:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(58, 154, 142, 0.45); }
.btn-oculto { display: none !important; }

/* Painel de passos (o "4D"): */
.painel-passos {
  position: fixed;
  z-index: 6;
  left: 0; right: 0; bottom: 0;
  background: var(--sym-vidro);
  border-top: 1px solid var(--sym-borda-clara);
  backdrop-filter: blur(6px);
  color: #eef7f4;
  padding: 16px clamp(14px, 3vw, 26px) calc(14px + env(safe-area-inset-bottom));
  overflow: hidden;
}
.passo-progresso { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgba(58, 154, 142, 0.18); }
#passo-progresso-fill { width: 0; height: 100%; background: linear-gradient(90deg, var(--sym-primary-500), var(--sym-accent)); transition: width 0.15s linear; }
/* Nota clínica: o mesmo passo em registro técnico, para o médico conferir e
   citar. Recolhida por padrão e nunca narrada. */
.passo-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-clinica {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 8px;
  padding: 5px 11px 5px 8px;
  border-radius: 999px;
  border: 1px solid var(--sym-borda-clara);
  background: transparent;
  color: var(--sym-accent);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  min-height: 44px;
  transition: background 0.15s, border-color 0.15s;
}
.btn-clinica svg { width: 15px; height: 15px; flex: 0 0 auto; }
.btn-clinica:hover { background: rgba(58, 154, 142, 0.14); }
.btn-clinica.ativo { background: var(--sym-primary-600); border-color: var(--sym-accent); color: #fff; }
.btn-clinica:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(58, 154, 142, 0.45); }
/* Seletor com dois níveis de propósito: `.painel-passos p` já define margem,
   corpo e cor, e venceria uma classe sozinha. */
.painel-passos .passo-clinica {
  margin-top: 8px;
  padding: 10px 12px;
  border-left: 2px solid var(--sym-accent);
  border-radius: 0 8px 8px 0;
  background: rgba(58, 154, 142, 0.09);
  font-size: clamp(12.5px, 1.8vw, 13.5px);
  line-height: 1.5;
  color: #cfe6e0;
  min-height: 0;
  max-height: 30vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Resumo do paciente: o QR aparece por cima da cena, grande o bastante para
   ser lido de longe e com fundo branco, que é o que a câmera do celular espera. */
.painel-paciente {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(7, 29, 31, 0.72);
  backdrop-filter: blur(3px);
}
.paciente-cartao {
  position: relative;
  width: min(400px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 26px 24px 22px;
  border-radius: 18px;
  background: #fff;
  color: var(--sym-texto);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  text-align: center;
}
.paciente-fechar {
  position: absolute;
  top: 10px; right: 10px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 10px;
  background: transparent;
  color: var(--sym-texto-suave);
}
.paciente-fechar svg { width: 20px; height: 20px; }
.paciente-fechar:hover { background: var(--sym-primary-50); }
.paciente-cartao h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  margin-bottom: 6px;
}
.paciente-ajuda { font-size: 13.5px; color: var(--sym-texto-suave); line-height: 1.55; }
.paciente-qr {
  width: min(230px, 62vw);
  margin: 18px auto 10px;
  aspect-ratio: 1;
  background: #fff;
}
.paciente-qr svg { display: block; width: 100%; height: 100%; }
.paciente-estado { font-size: 13px; color: var(--sym-primary-600); font-weight: 600; }
.paciente-estado--erro { color: var(--sym-erro); }
.paciente-link { display: flex; gap: 8px; margin: 14px 0 10px; }
.paciente-link input {
  flex: 1 1 auto;
  min-width: 0;
  /* 16 px é o piso: abaixo disso o iOS dá zoom ao focar o campo. */
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid var(--sym-borda);
  border-radius: 10px;
  background: var(--sym-primary-50);
  color: var(--sym-texto);
}
.paciente-link .btn { flex: 0 0 auto; }
.paciente-nota { font-size: 12px; color: var(--sym-texto-suave); line-height: 1.5; }

.passo-cabeca { display: flex; align-items: baseline; gap: 10px; }
.passo-indice { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: var(--sym-accent); letter-spacing: 0.4px; text-transform: uppercase; }
.painel-passos h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(16px, 2.6vw, 20px); }
.painel-passos p {
  margin-top: 6px;
  font-size: clamp(13.5px, 2vw, 15px);
  line-height: 1.55;
  color: var(--sym-texto-claro);
  max-width: 900px;
  min-height: 3.1em;
}
/* TELA BAIXA: a anatomia e o produto, e o painel de texto estava tomando dois
   tercos dela. Medido em 20/08/2026 no visualizador: a cena ficava com 36 por
   cento da altura em 320x568 e 46 por cento em 360x640, contra 73 no desktop.
   O texto do passo passa a rolar DENTRO do painel; o titulo, os botoes e os
   controles continuam sempre visiveis, que e o que nao pode sumir com o dedo
   no meio da consulta. O esmaecido da borda avisa que ha mais texto, e some ao
   chegar no fim, igual ao dos campos da tela de acesso. */
@media (max-height: 700px) {
  .painel-passos > #passo-texto {
    max-height: 18vh;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
  }
  .painel-passos > #passo-texto::-webkit-scrollbar { display: none; }
  /* Folgas apertadas, alvos de toque intactos: o que encolhe aqui e espaco
     vazio (padding e margem), nunca a area que o dedo precisa acertar. */
  .painel-passos { padding: 10px clamp(12px, 3vw, 26px) calc(9px + env(safe-area-inset-bottom)); }
  .painel-passos p { margin-top: 4px; min-height: 0; }
  .painel-passos h3 { font-size: clamp(15px, 2.6vw, 18px); line-height: 1.25; }
  .btn-clinica { margin-top: 4px; }
  .passo-controles { margin-top: 7px; }
}
#passo-texto.passo-texto--rolavel {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
}
#passo-texto.passo-texto--fim {
  -webkit-mask-image: none;
  mask-image: none;
}

.passo-controles { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
/* Desktop: painel mais fino e clássico. A coluna de leitura tem no máximo
   980 px e fica centrada (o padding lateral faz a conta, sem wrapper novo);
   os botões de apoio sobem para a linha dos controles, o que devolve uma
   linha inteira de altura à cena. */
@media (min-width: 900px) {
  .painel-passos {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "cabeca cabeca"
      "texto texto"
      "clinica clinica"
      "controles acoes";
    column-gap: 18px;
    padding: 12px clamp(26px, calc(50vw - 490px), 50vw) calc(10px + env(safe-area-inset-bottom));
  }
  .passo-cabeca { grid-area: cabeca; }
  .painel-passos > #passo-texto { grid-area: texto; max-width: none; }
  .painel-passos .passo-clinica { grid-area: clinica; }
  .passo-controles { grid-area: controles; margin-top: 10px; }
  .passo-acoes { grid-area: acoes; align-self: center; justify-content: flex-end; margin-top: 10px; }
  .passo-acoes .btn-clinica { margin-top: 0; }
  .btn-play { width: 48px; height: 48px; }
}
.btn-passo {
  width: 44px; height: 44px;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.btn-passo svg { width: 20px; height: 20px; display: block; }
.btn-passo:disabled { opacity: 0.35; cursor: default; }
.btn-play {
  width: 54px; height: 54px;
  /* `flex: 0 0 auto` como no .btn-passo: sem isto o botao PRINCIPAL era o unico
     da fila que podia encolher, e o flex tirava espaco justamente dele quando
     faltava. Medido em 20/08/2026: 54 px de largura em 430, 27 em 375, 26 em
     360 e 320. O controle mais usado da consulta virava um risco na tela. */
  flex: 0 0 auto;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--sym-primary-500), var(--sym-accent-escuro));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(58, 154, 142, 0.4);
}
.btn-play svg { width: 26px; height: 26px; }
.btn-play:active { background: var(--sym-primary-700); }
/* A fila de passos ROLA quando nao cabe, em vez de estourar a tela.
   Em 320 px de largura os seis pontos mais os tres controles somam mais que a
   janela, e a fila vazava 24 px para fora. Encolher o ponto nao serve: ele ja
   foi de 28 para 34 px porque 28 errava o dedo e pulava o passo errado no meio
   da consulta. Entao a fila ganha rolagem propria, sem barra visivel, e o passo
   ativo e trazido para a vista pelo app.js a cada troca. */
.passo-pontos {
  display: flex;
  gap: 0;
  margin-left: 4px;
  flex-wrap: nowrap;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.passo-pontos::-webkit-scrollbar { display: none; }
/* Cada ponto é um alvo de toque: 28 px de largura errava o dedo e pulava o
   passo errado no meio da consulta. */
.passo-ponto { min-width: 34px; }
.passo-ponto {
  position: relative;
  width: 28px; height: 44px;
  /* Nao encolhe dentro da fila rolavel: sem isto o flex espremeria os pontos
     ate abaixo do alvo de toque em vez de deixar a fila rolar. */
  flex: 0 0 auto;
  border: none;
  background: transparent;
  padding: 0;
}
.passo-ponto::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transform: translate(-50%, -50%);
  transition: transform 0.15s, background 0.15s;
}
.passo-ponto.ativo::before { background: var(--sym-accent); transform: translate(-50%, -50%) scale(1.25); }

/* Simulador de patologias por estrutura: */
.painel-patologias {
  position: fixed;
  z-index: 7;
  top: 76px;
  right: 12px;
  width: min(320px, calc(100vw - 24px));
  max-height: calc(100dvh - 260px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--sym-vidro);
  border: 1px solid var(--sym-borda-clara);
  border-radius: 16px;
  backdrop-filter: blur(6px);
  color: #eef7f4;
  padding: 14px 16px;
}
.painel-patologias h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--sym-accent); margin-bottom: 10px; }
.patologia-ajuda { margin: -2px 0 12px; color: #b8ceca; font-size: 11.5px; line-height: 1.4; }
.patologia-item { margin-bottom: 12px; }
.patologia-nome { font-size: 13.5px; font-weight: 600; }
.patologia-cid { font-size: 11px; color: #9CC3BC; margin-left: 6px; }
.patologia-niveis { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.pill-nivel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #cfe4e0;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
}
.pill-nivel.ativo { background: var(--sym-primary-600); border-color: var(--sym-accent); color: #fff; }

/* Painel de estruturas anatômicas: */
.painel-estruturas { width: min(300px, calc(100vw - 24px)); }
.estrutura-linha { display: flex; align-items: center; gap: 6px; }
.estrutura-nome {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  text-align: left;
  background: none;
  border: none;
  border-radius: 9px;
  padding: 8px 8px;
  color: #dfeeea;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.estrutura-nome:hover { background: rgba(255, 255, 255, 0.08); }
.estrutura-nome:focus-visible { outline: 2px solid var(--sym-accent); outline-offset: 1px; }
.estrutura-olho {
  width: 40px; height: 40px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border-radius: 9px;
  border: 1px solid transparent;
  background: none;
  color: #cfe4e0;
}
.estrutura-olho svg { width: 19px; height: 19px; }
.estrutura-olho:hover { background: rgba(255, 255, 255, 0.08); }
.estrutura-olho:not(.ativo) { color: #64807b; }
.estrutura-olho:focus-visible { outline: 2px solid var(--sym-accent); outline-offset: 1px; }

.carregando {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: var(--sym-primary-600); font-size: 15px; font-weight: 600;
  background: rgba(238, 233, 223, 0.96);
  z-index: 4;
}
.carregando-spinner {
  width: 34px; height: 34px;
  border: 3px solid rgba(14, 58, 60, 0.18);
  border-top-color: var(--sym-accent-escuro);
  border-radius: 50%;
  animation: carregando-giro 0.8s linear infinite;
}
.carregando--erro { padding: 24px; text-align: center; color: var(--sym-texto); }
.carregando--erro strong { font-family: var(--font-display); font-size: 21px; color: var(--sym-primary-800); }
.carregando--erro span { max-width: 42ch; color: var(--sym-texto-suave); }
.carregando--erro .btn { width: auto; margin-top: 4px; }
@keyframes carregando-giro { to { transform: rotate(360deg); } }

.status-rede {
  position: fixed;
  z-index: 30;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  max-width: min(380px, calc(100vw - 32px));
  padding: 11px 15px;
  border: 1px solid rgba(58, 154, 142, 0.5);
  border-radius: 12px;
  background: #113f3d;
  box-shadow: 0 10px 28px rgba(0, 20, 20, 0.28);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.status-rede--offline { background: #5c3a1b; border-color: rgba(251, 191, 36, 0.55); }
body[data-tela="viewer"] .status-rede { bottom: calc(var(--painel-passos-altura, 190px) + 12px); }

/* ===== Responsividade ===== */
/* Tablet (retrato) e telas médias: coluna única centrada, sem banner.
   A linha do cartão é minmax(0, 1fr): ela encolhe e entrega a rolagem aos
   campos, em vez de empurrar o rodapé para fora da tela. */
@media (max-width: 900px) {
  .acesso-wrap { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto; gap: 18px; justify-items: center; }
  .acesso-hero { max-width: 640px; text-align: center; }
  .acesso-beneficios { display: inline-block; text-align: left; }
  .acesso-banner { display: none; }
  .acesso-esps { display: none; }
  .acesso-cartao { max-width: 560px; width: 100%; }
  .acesso-rodape { padding-top: 0; }
}
/* Chip de identidade: só quando há folga real no cabeçalho. */
@media (max-width: 640px) {
  #conta-nome { display: none; }
}
/* Celular: compacto para o formulário caber sem a tela "correr". */
/* Tablet em retrato (768 a 1024 de largura): duas colunas de cartões largos, e
   o painel de entrada empilha texto sobre a busca para não espremer nenhum. */
@media (max-width: 1024px) {
  .painel-catalogo {
    grid-template-columns: 1fr;
    grid-template-areas: "texto" "busca" "numeros";
    gap: 12px;
  }
  .painel-catalogo p { max-width: none; }
}
@media (max-width: 760px) {
  .catalogo { gap: 12px; }
  .card-esp { padding: 14px; gap: 12px; }
  .card-esp-capa { width: 84px; height: 84px; border-radius: 12px; }
  .capa-selo { width: 26px; height: 26px; right: 4px; bottom: 4px; }
  .capa-selo svg { width: 19px; height: 19px; }
  .card-esp h3 { font-size: 17px; }
  .card-esp p { margin-bottom: 10px; }
  .card-cond-corpo { padding: 14px 16px 16px; }
  .painel-catalogo { padding: 16px 18px; border-radius: 16px; }
  .painel-catalogo p { font-size: 13.5px; }
  .painel-numeros li { padding: 4px 10px; font-size: 12px; }
  .painel-numeros strong { font-size: 14px; }
  .topo-capa { width: 44px; height: 44px; border-radius: 10px; }
  .topo-marca { height: 22px; }
  /* Descrição longa não pode empilhar o cabeçalho no celular: duas linhas e corta. */
  .topo-sub {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .btn-ferramenta span { display: none; }
  .btn-ferramenta { min-width: 44px; min-height: 44px; padding: 8px; }
  .viewer-troca { min-height: 44px; }
  .viewer-topo { flex-wrap: wrap; row-gap: 8px; }
  /* A barra rolava na horizontal e o último botão (tela cheia) ficava fora da
     vista, sem nenhum aviso de que dava para arrastar. Agora ela quebra em
     linha: nada cortado, e a altura real vai para --viewer-topo-altura, que o
     enquadramento 3D desconta. */
  .viewer-acoes {
    width: 100%;
    gap: 6px;
    row-gap: 6px;
    margin-left: 0;
    padding-bottom: 2px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .btn-ferramenta { min-width: 42px; }
}
/* Tablet em RETRATO (768 e 834 de largura): o título da condição e as oito
   ferramentas não cabem na mesma linha, e o título virava "Infa...". A barra
   de ferramentas desce para uma segunda linha, alinhada à direita, e o título
   recupera a largura. Em paisagem (1024) tudo cabe numa linha e nada muda. */
@media (min-width: 761px) and (max-width: 900px) {
  .viewer-topo { flex-wrap: wrap; row-gap: 8px; }
  .viewer-acoes { width: 100%; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
  .viewer-troca { max-width: min(78vw, 560px); }
}
/* Oito ferramentas em 390 px: sem este aperto a última quebra sozinha para uma
   segunda linha e come altura útil da cena. */
@media (max-width: 430px) {
  .viewer-acoes { gap: 4px; position: relative; }
  .btn-ferramenta { min-width: 44px; min-height: 44px; padding: 8px 6px; }
  .btn-mais { display: flex; }
  /* A gaveta nasce fechada e abre como painel ancorado à direita da barra. */
  .acoes-extra {
    display: none;
    position: absolute;
    z-index: 9;
    top: calc(100% + 6px);
    right: 0;
    gap: 6px;
    padding: 8px;
    border-radius: 14px;
    border: 1px solid var(--sym-borda-clara);
    background: var(--sym-vidro);
    backdrop-filter: blur(8px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
  }
  .acoes-extra.aberta { display: flex; flex-wrap: wrap; justify-content: flex-end; max-width: 240px; }
  .btn-mais.ativo { background: var(--sym-primary-600); border-color: var(--sym-accent); color: #fff; }
  #btn-limpar:not(.btn-oculto) {
    position: fixed;
    z-index: 8;
    top: calc(var(--viewer-topo-altura, 108px) + 8px);
    right: 10px;
    min-width: 44px;
    background: rgba(14, 58, 60, 0.94);
    border-color: var(--sym-accent);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  }
  .painel-patologias {
    top: auto;
    bottom: calc(var(--painel-passos-altura, 190px) + 8px);
    max-height: calc(100dvh - var(--painel-passos-altura, 190px) - 120px);
    left: 8px;
    right: 8px;
    width: auto;
  }
  /* A reserva de altura é do texto do passo, para o painel não pular a cada
     troca. A nota clínica fica de fora: ela nasce recolhida. */
  .painel-passos > #passo-texto { min-height: 4.5em; }
  .estrutura-info { bottom: calc(var(--painel-passos-altura, 190px) + 8px); }
  .topo { gap: 12px; }
  /* Sem o subtítulo, a marca volta ao tamanho do próprio logo: cabeçalho de
     uma linha só até 320 px. */
  .marca { flex: 1 1 auto; }
  .marca-logo { height: 26px; }
  .marca-sub { display: none; }
  .acesso-campos { gap: 10px; }
  .campo-cheio { grid-column: 1 / -1; }
  /* 16 px é o piso do iOS: abaixo disso o Safari dá zoom ao focar o campo e o
     profissional precisa "desfazer" o zoom no meio do cadastro. */
  .campo input, .campo select { min-height: 44px; padding: 8px 10px; font-size: 16px; }
  .btn { min-height: 44px; }
  .acesso-wrap { padding: 14px 16px 16px; gap: 10px; }
  .acesso-hero h1 { font-size: 19px; }
  .acesso-beneficios { display: none; }
  .acesso-cartao h2 { font-size: 20px; }
  .acesso-sub { margin-bottom: 10px; font-size: 13.5px; }
  .acesso-campos { gap: 9px; }
  .campo { gap: 4px; }
  .campo label { font-size: 12.5px; }
  .consentimento { font-size: 11.5px; line-height: 1.4; }
  .acesso-painel form > .btn { margin-top: 12px; }
  .acesso-rodape { font-size: 10px; line-height: 1.45; }
}
/* Tela pequena e baixa (celular antigo, celular deitado): não cabem o discurso
   de venda e o formulário ao mesmo tempo. O cartão fica com a tela. */
@media (max-width: 900px) and (max-height: 700px) {
  .acesso-hero { display: none; }
}
/* Cartão estreito: a linha de três (conselho, registro, UF) não cabe mais sem
   apertar o seletor de UF nem cortar a máscara do WhatsApp. Volta para meias
   colunas, e o e-mail assume a linha inteira. */
@media (max-width: 560px) {
  .campo-terco { grid-column: span 3; }
  .campo-cheio-estreito { grid-column: 1 / -1; }
  /* 29/09/2026: no cadastro de estudante o WhatsApp ficava sozinho em meia coluna,
     com a outra metade vazia e a máscara cortada "(00) 00000-000". Ocupa a linha. */
  .acesso-campos .campo:has(> #cad-whatsapp) { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .acesso-cartao { padding: 16px 14px; border-radius: 16px; }
  .viewer-troca { max-width: 46vw; }
  .catalogo-breve { padding: 14px; }
  .catalogo-breve-cabeca { align-items: flex-start; flex-direction: column; gap: 3px; }
  .catalogo-breve-grade { grid-template-columns: 1fr 1fr; }
  .breve-chip { align-items: flex-start; min-width: 0; font-size: 12px; }
}
@media (max-width: 340px) {
  /* Uma coluna: a grade continua com 6 faixas, cada campo ocupa todas elas
     (trocar para uma coluna só criaria faixas implícitas com os spans). O corte
     era em 360 px, que é a largura de celular Android comum: lá as meias
     colunas ainda cabem (o campo de data pede ~134 px e sobram ~145 px) e uma
     coluna só transformava o cadastro em oito rolagens. */
  #form-cadastro .campo { grid-column: 1 / -1; }
  .passo-controles { gap: 4px; }
  .btn-play { width: 48px; height: 48px; }
  .passo-pontos { margin-left: 0; }
  .passo-ponto { width: 24px; }
  .viewer-troca { max-width: 58vw; }
}
@media (max-width: 340px) {
  .catalogo-breve-grade { grid-template-columns: 1fr; }
}
/* Janela baixa (notebook 768 p com barras, navegador redimensionado, celular
   deitado): o ritmo vertical fecha antes de a rolagem interna precisar entrar. */
/* Desktop com pouca altura: a coluna do hero tem quatro blocos e o primeiro a
   sair é a lista de balas, porque a fila de especialidades diz a mesma coisa
   com mais evidência e ainda mostra a anatomia. */
@media (max-height: 940px) {
  .acesso-beneficios { display: none; }
  /* A altura devolvida pelas balas vai para a captura do produto, que é a
     prova do que a página promete. */
  .acesso-banner img { max-height: min(44vh, 400px); }
}
@media (max-height: 780px) {
  .acesso-cartao h2 { font-size: 23px; }
  .acesso-sub { margin: 4px 0 12px; font-size: 14px; }
  .acesso-campos { gap: 10px; }
  .campo { gap: 4px; }
  /* 19/09/2026: eram 42px, para caber mais campo em tela baixa. Custava o
     minimo de toque: a varredura de tela inteira pegou os 8 campos do cadastro
     e os 2 da entrada com 42px em 320x568, 360x640 e 1024x768, que sao
     exatamente as telas com altura <= 780. Os 2px voltam; a altura que esta
     regra precisa economizar ja vem do gap, da fonte e das margens acima. */
  .campo input, .campo select { min-height: 44px; }
  .consentimento { font-size: 12.5px; }
  .acesso-painel form > .btn { margin-top: 12px; }
  .acesso-hero h1 { font-size: clamp(24px, 2.6vw, 32px); }
  .acesso-beneficios { margin-top: 18px; }
  .acesso-beneficios li { margin-bottom: 8px; }
  .acesso-banner { margin-top: 20px; }
}
/* Altura curta de verdade (celular antigo, celular deitado, janela espremida):
   o formulário inteiro não cabe, e prender tudo em 100dvh não faz caber, faz
   SOBREPOR. Era o que acontecia: em 375x667 e em 360x640 o rodapé legal ficava
   por cima do cartão e interceptava o clique de "Já tenho acesso" (medido por
   tools/probe-acesso.js). Cadastro é formulário: quando a altura não dá, a tela
   de acesso rola inteira, como qualquer cadastro. Quem rola é a seção, não a
   página, então a regra da casa continua valendo. */
@media (max-height: 700px) {
  #tela-acesso.ativa {
    display: block;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .acesso-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100%;
    gap: 16px;
  }
  .acesso-hero,
  .acesso-cartao,
  .acesso-rodape { width: 100%; max-width: 560px; }
  .acesso-cartao { align-self: center; max-height: none; }
  /* Com a seção rolando, a área de campos não precisa mais rolar por dentro:
     rolagem dentro de rolagem é o que trava o polegar no celular. */
  .acesso-campos { overflow: visible; min-height: auto; }
  .acesso-campos--rolavel { -webkit-mask-image: none; mask-image: none; }
  .acesso-rodape { align-self: center; padding-top: 4px; }
  .acesso-cartao h2 { font-size: 21px; }
}
/* Acima de 900 px de largura e com pouca altura, o hero ainda cabe ao lado, mas
   empilhado ele só empurra o formulário para baixo da dobra. */
@media (min-width: 901px) and (max-height: 700px) {
  .acesso-hero { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===========================================================================
   MODO DEMONSTRACAO (?demo=, allowlist no index.php)
   Serve a apresentacao ao vivo do congresso, que embute o SeeYouMed num iframe.
   No telao nao existe "voltar ao catalogo" nem conta: a navegacao esta presa na
   condicao liberada, entao o cromo que sugere caminho fechado sai da tela.
   =========================================================================== */
body.modo-demo .btn-voltar,
body.modo-demo #conta-nome,
body.modo-demo #btn-sair,
body.modo-demo .clinico-voltar,
body.modo-demo .clinico-partilha { display: none !important; }

/* ---- Selo de aprovação anatômica e ficha (07/09/2026) -------------------
   O selo diz, no cabeçalho, em que pé está a validação daquela condição. Ele
   nunca fica em branco: sem carimbo de especialista, diz "Em validação". */
.viewer-selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.10);
  color: #EAF6F3;
  transition: background 0.15s, border-color 0.15s;
}
.viewer-selo::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: #E7B24A;
  flex: 0 0 auto;
}
.viewer-selo--revisado { border-color: var(--sym-accent); background: rgba(58, 154, 142, 0.16); }
.viewer-selo--revisado::before { background: var(--sym-accent); }
.viewer-selo:hover { background: rgba(255, 255, 255, 0.2); }
.viewer-selo:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(58, 154, 142, 0.5); }

.painel-ficha { width: min(420px, 38vw); }
.ficha-secao { margin-top: 14px; }
.ficha-secao:first-child { margin-top: 0; }
.ficha-secao > h4 {
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sym-accent); font-weight: 700; margin-bottom: 6px;
}
.ficha-linha {
  padding: 9px 11px;
  margin-bottom: 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  line-height: 1.5;
}
.ficha-linha strong { display: block; font-size: 12.5px; color: #fff; margin-bottom: 2px; }
.ficha-linha span { color: var(--sym-texto-claro); }
.ficha-linha a { color: var(--sym-accent); overflow-wrap: anywhere; }
.ficha-etiqueta {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.12);
}
.ficha-etiqueta--parametrico { background: rgba(231, 178, 74, 0.22); color: #F6DFAE; }
.ficha-pendencia { border-color: rgba(231, 178, 74, 0.4); background: rgba(231, 178, 74, 0.10); }
@media (max-width: 900px) {
  .painel-ficha { width: auto; left: 12px; right: 12px; }
}

/* Link de WhatsApp nos rodapés (17/09/2026): a tela é um atlas com painéis fixos, então o
   contato vai no rodapé, não flutuante. Alvo de 44px em toque. #25D366 é o verde oficial
   do WhatsApp (registrado na paleta do portão com este motivo). */
.wa-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border-radius: 999px; background: #25D366; color: #ffffff; font-weight: 600; text-decoration: none; }
.wa-link:hover, .wa-link:focus-visible { filter: brightness(1.06); outline: 3px solid #BFD9D6; outline-offset: 2px; }
.acesso-rodape-wa { margin-top: 12px; }
.rodape-wa { margin-top: 10px; }
.rodape-politica { display: inline-flex; align-items: center; min-height: 44px; margin-left: 10px; text-decoration: underline; color: inherit; }

/* Acesso gratuito e contraste do contato. */
.wa-link{background:#25D366!important;color:#071D1F!important}.wa-link:hover{background:#25D366!important}.consentimento a{color:inherit;text-decoration:underline}.painel-numeros{margin-bottom:8px}@media(max-width:700px){.painel-catalogo{padding:18px 16px}.painel-numeros{gap:8px}.catalogo-cabeca{margin-top:8px}}

.card-esp p,.card-referencia span{color:#375957!important}

/* 08/10/2026 (revisao da Play): o titulo da tela recebe foco programatico na troca de rota (app.js e clinico-real.js, tabIndex=-1) por acessibilidade; sem interacao previa o navegador desenha o anel e a captura sai com um retangulo no titulo. Especificidade acima de #tela-anatomia :focus-visible (atlas-real.css) e .clinico :focus-visible. */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus, .academico-mobile-title[tabindex="-1"]:focus,
#tela-anatomia h1[tabindex="-1"]:focus, #tela-anatomia h2[tabindex="-1"]:focus,
#tela-clinico h1[tabindex="-1"]:focus, #tela-clinico h2[tabindex="-1"]:focus, #tela-clinico .academico-mobile-title[tabindex="-1"]:focus { outline: none; }