/* Ambiente de consulta: imagem clínica, roteiro e leitura têm áreas próprias. */
.clinico { background:#f6f7f7; color:#12191A; }
.clinico button,.clinico select,.clinico a { font:inherit; font-size:14px; }
.clinico button,.clinico select { min-width:44px; min-height:44px; border:1px solid #D9E2E0; border-radius:4px; background:#fff; padding:9px 12px; color:#0E3A3C; }
.clinico button:hover { background:#EDF3F2; }
.clinico button:disabled { opacity:.45; cursor:default; }
.clinico a { color:#0E3A3C; text-underline-offset:3px; }
.clinico :focus-visible { outline:3px solid #3A9A8E; outline-offset:2px; }
.clinico-topo { display:flex; align-items:center; gap:20px; padding:12px 24px; background:#fff; border-bottom:1px solid #D9E2E0; flex:none; }
.clinico-voltar { min-width:60px; min-height:44px; display:flex; align-items:center; }
.clinico-identidade { min-width:0; flex:1; }
.clinico-identidade > span { display:block; min-height:18px; font-size:12px; color:#536562; margin-bottom:4px; }
.clinico-identidade select { max-width:100%; width:min(100%,540px); font-weight:600; font-size:16px; padding-left:0; border:0; }
.clinico-marca { display:flex; align-items:center; min-height:44px; }
.clinico-marca img { width:145px; height:auto; }
.clinico-layout { display:grid; grid-template-columns:210px minmax(0,1fr) 330px; flex:1; min-height:0; overflow:hidden; }
.clinico-roteiro,.clinico-trabalho,.clinico-leitura { min-width:0; overflow-y:auto; overscroll-behavior:contain; padding:24px; }
.clinico-roteiro { background:#fff; border-right:1px solid #D9E2E0; padding:24px 14px; }
.clinico-roteiro h2 { font-family:var(--font-body); font-size:14px; margin:0 8px 14px; }
.clinico-roteiro nav { display:grid; gap:2px; }
.clinico-roteiro nav button { display:flex; gap:12px; text-align:left; line-height:1.4; border:0; padding:12px 8px; }
.clinico-roteiro nav button > span:first-child { font-variant-numeric:tabular-nums; color:#536562; font-size:12px; }
.clinico-roteiro nav button[aria-current] { background:#EDF3F2; box-shadow:inset 3px 0 #2E7A71; font-weight:600; }
.clinico-roteiro nav button[aria-current] > span:first-child { color:#536562; }
.clinico-roteiro > a { display:flex; align-items:center; min-height:44px; margin-top:24px; padding:8px; }
.clinico-roteiro > p { font-size:12px; color:#536562; line-height:1.6; padding:8px; }
.clinico-cabecalho { display:flex; justify-content:space-between; align-items:start; gap:12px; margin-bottom:24px; }
.clinico-assistir { margin:0 0 24px; padding:16px; background:#EDF3F2; border:1px solid #D9E2E0; }
.clinico-assistir button { background:#0E3A3C; color:#fff; font-weight:600; }
.clinico-assistir button:hover { background:#14494C; color:#fff; }
.clinico-assistir p { font-size:12px; line-height:1.6; color:#536562; margin:8px 0 0; }
.clinico-assistir p:empty { display:none; }
.explicacao-dialog { width:min(1180px,96vw); max-width:96vw; max-height:94dvh; margin:auto; padding:0; border:1px solid #D9E2E0; border-radius:8px; color:#12191A; background:#fff; overflow:auto; overscroll-behavior:contain; scroll-padding-top:90px; }
.explicacao-dialog::backdrop { background:rgb(18 25 26 / 75%); }
.explicacao-dialog header { position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:16px; padding:16px 20px; border-bottom:1px solid #D9E2E0; background:#fff; }
.explicacao-dialog h2 { font:600 21px/1.35 var(--font-body); margin:0; flex:1; min-width:0; overflow-wrap:anywhere; }
.explicacao-dialog header button { flex-shrink:0; }
.explicacao-dialog button,.explicacao-dialog a { font:inherit; min-height:44px; min-width:44px; }
.explicacao-dialog button { padding:10px 14px; border:1px solid #D9E2E0; border-radius:4px; background:#fff; color:#0E3A3C; }
.explicacao-dialog :focus-visible { outline:3px solid #3A9A8E; outline-offset:2px; }
.explicacao-dialog video { display:block; width:100%; height:auto; max-height:59dvh; min-height:150px; background:#12191A; }
.explicacao-dialog .explicacao-corpo { padding:16px 20px 24px; }
.explicacao-dialog p { font-size:13px; line-height:1.65; margin:0 0 12px; }
#explicacao-acompanhar { padding:16px; margin-bottom:18px; background:#EDF3F2; border-left:3px solid #2E7A71; }
#explicacao-acompanhar h3 { font-size:18px; line-height:1.4; margin:0 0 8px; }
#explicacao-acompanhar p { font-size:16px; line-height:1.65; margin:0; }
#explicacao-acompanhar p + p { margin-top:12px; }
.clinico-viewport.clinico-ilustracao { background:#f8faf9; }
.clinico-galeria img[src*="servier-"] { background:#f8faf9; }
.explicacao-dialog nav { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; }
.explicacao-dialog nav button { text-align:left; font-size:13px; }
.explicacao-dialog nav button[aria-current] { background:#EDF3F2; border-color:#2E7A71; }
.explicacao-dialog a { display:inline-flex; align-items:center; color:#0E3A3C; overflow-wrap:anywhere; }
.explicacao-dialog summary { min-height:44px; padding:12px 0; cursor:pointer; font-weight:600; }
.explicacao-dialog li { margin:0 0 16px; font-size:13px; line-height:1.6; }
@media(max-width:700px) { .explicacao-dialog header,.explicacao-dialog .explicacao-corpo { padding:12px; } .explicacao-dialog h2 { font-size:18px; } .clinico-assistir button { width:100%; } }
.clinico-cabecalho h2 { font-family:var(--font-body); font-size:clamp(24px,2vw,32px); line-height:1.2; font-weight:600; letter-spacing:-.6px; }
.clinico-cabecalho p { color:#536562; line-height:1.55; font-size:14px; margin-top:10px; max-width:65ch; }
#clinico-cid { white-space:nowrap; font-size:12px; color:#536562; padding-top:7px; }
.clinico-imagem-cabeca { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.clinico-imagem-cabeca h2 { font-family:var(--font-body); font-size:16px; font-weight:600; line-height:1.45; }
#clinico-tipo { font-size:11px; color:#536562; flex-shrink:0; }
.clinico-escopo-midia { margin:6px 0 0; font-size:12px; line-height:1.6; color:#536562; }
.clinico-ferramentas { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:12px 0; }
.clinico-ferramentas a { display:flex; align-items:center; min-height:44px; padding:8px; font-size:12px; }
.clinico-ferramentas-status { font-size:12px; line-height:1.6; color:#536562; }
.clinico-ferramentas-status:empty { display:none; }
#clinico-repetir-trecho[aria-pressed=true] { background:#EDF3F2; border-color:#2E7A71; }
#clinico-zoom { min-width:46px; text-align:center; font-size:12px; }
.clinico-palcos { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.clinico-palcos.comparando { grid-template-columns:repeat(2,minmax(0,1fr)); }
.clinico-palcos figure { min-width:0; display:flex; flex-direction:column; }
.clinico-viewport { background:#12191A; height:clamp(300px,49vh,700px); min-height:300px; overflow:hidden; display:flex; align-items:center; justify-content:center; position:relative; border-radius:3px; }
.clinico-viewport img,.clinico-viewport video { display:block; width:100%; height:100%; object-fit:contain; max-width:100%; }
.clinico-viewport img { user-select:none; transform-origin:center; }
.clinico-viewport video { background:#12191A; }
.clinico-viewport.ampliado { cursor:grab; touch-action:none; }
.clinico-viewport p { position:absolute; inset:0; display:grid; place-content:center; padding:24px; font-size:14px; line-height:1.5; color:#D9E2E0; text-align:center; }
.clinico-viewport.clinico-sem-imagem { height:auto; min-height:120px; background:#EDF3F2; border:1px solid #D9E2E0; }
.clinico-sem-imagem p { position:static; max-width:64ch; font-size:15px; line-height:1.65; color:#536562; }
.clinico-conceito { width:100%; padding:clamp(20px,3vw,36px); }
.clinico-conceito h3 { margin:6px 0 20px; color:#0E3A3C; font-size:clamp(23px,2.2vw,32px); line-height:1.25; }
.clinico-conceito p { display:block; max-width:66ch; padding:0; margin:0 0 18px; text-align:left; color:#0E3A3C; font-size:clamp(17px,1.35vw,21px); line-height:1.7; }
.clinico-conceito .clinico-conceito-rotulo { font-size:12px; color:#536562; margin:0; }
.clinico-conceito p:last-child { margin-bottom:0; }
@media (min-width:701px) { #tela-clinico[data-etapa-visual="texto"] #clinico-passo-texto { display:none; } }
#clinico-segunda > label { font-size:12px; margin-bottom:6px; }
#clinico-comparacao-select { width:100%; margin-bottom:8px; }
#clinico-legenda2 { font-size:12px; line-height:1.5; color:#536562; padding:10px 0; }
#clinico-legenda2 a { display:flex; min-height:44px; align-items:center; }
.clinico-legenda { padding:12px 0; font-size:13px; line-height:1.65; color:#536562; }
.clinico-cine-controles { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:10px; font-size:12px; }
.clinico-cine-controles label { margin-left:auto; }
.clinico-cine-precisao { font-size:11px; line-height:1.6; color:#536562; padding-bottom:12px; }
.clinico-galeria { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px; margin:4px 0 16px; }
.clinico-galeria button { display:flex; flex-direction:column; gap:7px; align-items:start; padding:8px; text-align:left; max-width:100%; }
.clinico-galeria img { width:100%; height:72px; object-fit:contain; background:#12191A; border-radius:2px; }
.clinico-galeria span { font-size:10px; color:#536562; }
.clinico-galeria strong { font-size:12px; line-height:1.4; font-weight:500; }
.clinico-galeria button[aria-pressed=true] { border-color:#2E7A71; box-shadow:inset 0 -2px #2E7A71; background:#EDF3F2; }
.clinico-procedencia { border-top:1px solid #D9E2E0; font-size:12px; line-height:1.6; color:#536562; padding-bottom:20px; }
.clinico-procedencia summary { cursor:pointer; min-height:44px; padding:12px 0; color:#0E3A3C; font-weight:600; }
.clinico-procedencia a { display:flex; min-height:44px; align-items:center; }
.clinico-procedencia a,.clinico-partilha a,#clinico-legenda2 a { overflow-wrap:anywhere; }
.clinico-leitura { background:#fff; border-left:1px solid #D9E2E0; }
.clinico-passo-indice { color:#536562; font-size:12px; margin-bottom:12px; font-variant-numeric:tabular-nums; }
.clinico-leitura h2 { font-family:var(--font-body); font-weight:600; line-height:1.3; font-size:23px; margin-bottom:18px; }
#clinico-passo-texto p { font-size:16px; line-height:1.85; margin-bottom:16px; }
.clinico-passo-acoes { display:flex; gap:8px; margin:20px 0 12px; }
.clinico-passo-acoes button { flex:1; }
#clinico-proximo { background:#0E3A3C; color:#fff; border-color:#0E3A3C; }
#clinico-ouvir { width:100%; }
.clinico-voz-nota { font-size:11px; line-height:1.5; color:#536562; margin-top:7px; }
.clinico-leitura section { margin-top:26px; padding-top:20px; border-top:1px solid #D9E2E0; }
.clinico-leitura h3 { font-family:var(--font-body); font-size:14px; margin-bottom:10px; }
.clinico-leitura section p { color:#536562; font-size:13px; line-height:1.7; }
.clinico-partilha button { width:100%; margin:8px 0; }
.clinico-partilha a { display:flex; align-items:center; min-height:44px; }
.clinico-aviso { background:#F5F2EC; padding:12px; border-left:2px solid #A8854E; font-size:12px; line-height:1.6; margin-bottom:12px; }
.clinico-imagens:fullscreen { padding:24px; overflow:auto; background:#f6f7f7; }
.clinico-imagens:fullscreen .clinico-viewport { height:65vh; }
.clinico-imagens:fullscreen .clinico-viewport.clinico-sem-imagem { height:auto; min-height:120px; }
.clinico-carregando .clinico-layout { visibility:hidden; }
.clinico-erro { padding:24px; }
.clinico-falha .clinico-layout { display:none; }
.clinico-mobile-nav { display:none; }
@media (max-width:1250px) {
  .clinico-layout { grid-template-columns:170px minmax(0,1fr) 290px; }
  .clinico-trabalho,.clinico-leitura { padding:20px 16px; }
  .clinico-cabecalho { display:block; } #clinico-cid { display:block; margin-top:6px; }
  .clinico-palcos.comparando { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:1024px) {
  .clinico-layout { grid-template-columns:minmax(0,1.25fr) minmax(270px,1fr); overflow:auto; align-content:start; }
  .clinico-roteiro { grid-column:1/-1; border:0; border-bottom:1px solid #D9E2E0; padding:10px 16px; overflow:visible; }
  .clinico-roteiro h2,.clinico-roteiro > p,.clinico-roteiro > a { display:none; }
  .clinico-roteiro nav { display:flex; overflow-x:auto; padding:3px 0; gap:6px; scroll-snap-type:x proximity; scroll-padding-inline:6px; }
  .clinico-roteiro nav button { max-width:220px; flex:0 0 auto; border:1px solid #D9E2E0; scroll-snap-align:start; align-items:center; }
  .clinico-trabalho,.clinico-leitura { overflow:visible; }
  .clinico-viewport { height:360px; }
  .clinico-topo { gap:12px; padding:10px 16px; }
  .clinico-marca img { width:110px; }
  .clinico-imagem-cabeca { display:block; } #clinico-tipo { display:block; margin-top:5px; }
}
@media (max-width:700px) {
  .clinico-mobile-nav { display:flex; gap:0; padding:0 12px; background:#fff; border-bottom:1px solid #D9E2E0; flex:none; }
  .clinico-mobile-nav button { flex:1; border:0; border-bottom:2px solid transparent; border-radius:0; }
  .clinico-mobile-nav button[aria-pressed=true] { border-bottom-color:#2E7A71; font-weight:600; }
  .clinico-layout[data-mobile-panel=imagem] .clinico-leitura,.clinico-layout[data-mobile-panel=texto] .clinico-trabalho { display:none; }
  .clinico-layout { display:flex; flex-direction:column; }
  .clinico-topo { padding:8px 12px; gap:8px; }
  .clinico-topo .clinico-marca { display:none; }
  .clinico-identidade select { font-size:16px; }
  .clinico-roteiro { flex:none; }
  .clinico-trabalho { padding:20px 14px 0; flex:none; }
  .clinico-leitura { padding:24px 18px; border:0; border-top:1px solid #D9E2E0; flex:none; }
  .clinico-viewport { min-height:250px; height:320px; }
  .clinico-cabecalho { margin-bottom:20px; }
  .clinico-assistir { padding:12px; margin-bottom:18px; }
  .clinico-cabecalho h2 { font-size:26px; }
  .clinico-galeria { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .clinico-galeria img { height:80px; }
  .clinico input,.clinico select { font-size:16px; }
  .clinico-imagens:fullscreen { padding:12px; }
}
/* 29/09/2026: Voltar da tela da condição no celular. Era texto sublinhado centrado no
   bloco inteiro (rótulo da especialidade + título), e por isso ficava 11 px acima da linha
   do título. Vira o botão de voltar da casa, o mesmo desenho do .btn-voltar da tela da
   especialidade (44x44, borda, cantos de 12 px, seta), alinhado pela BASE ao seletor do
   título, que também tem 44 px: as duas caixas passam a ter o mesmo centro. A palavra
   "Voltar" continua no link como nome acessível, recuada para fora da caixa (técnica lida
   por leitor de tela); a seta é pseudo-elemento absoluto e não sofre o recuo. O botão fica
   16 px mais estreito que o texto de antes, e essa largura volta para o título. */
@media (max-width:700px) {
  .clinico-topo { align-items:flex-end; }
  .clinico-topo .clinico-voltar { position:relative; display:block; flex:none; width:44px; min-width:44px; height:44px; padding:0; overflow:hidden; white-space:nowrap; text-indent:44px; text-decoration:none; border:1.5px solid var(--sym-borda); border-radius:12px; background:#fff; color:var(--sym-primary-700); }
  .clinico-topo .clinico-voltar::before { content:""; position:absolute; inset:0; margin:auto; width:21px; height:21px; background:currentColor; -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5.6M12.2 5.4L5.6 12l6.6 6.6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 21px 21px no-repeat; mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5.6M12.2 5.4L5.6 12l6.6 6.6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 21px 21px no-repeat; }
  .clinico-topo .clinico-voltar:active { background:var(--sym-primary-50); }
}
@media (max-height:500px) and (orientation:landscape) {
  .clinico-viewport { min-height:220px; height:65dvh; }
  .explicacao-dialog { max-height:96dvh; }
  .explicacao-dialog header { padding:8px 12px; }
  .explicacao-dialog h2 { font-size:18px; }
}