/* Padrão dos simuladores: Contrações, Cálcio e Ventilação. Somente apresentação. */
:root {
  --void:#091923;
  --coal:#102633;
  --plate:#16303f;
  --cream:#dce9f3;
  --mist:#b6cad9;
  --line:#385365;
  --amarelo:#9ce4ed;
  --amarelo2:#dce9f3;
  --verde:#62bcae;
  --verde2:#8cdcca;
  --lip:#061b25;
  --display:Inter,"Segoe UI",Arial,sans-serif;
  --body:Inter,"Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono",Consolas,monospace;
  color-scheme:dark
}
body {
  background:radial-gradient(ellipse at 0 0,#214252,transparent 70%),var(--void)
}
.shell {
  width:min(1440px,calc(100% - 48px))
}
.topbar {
  position:relative;
  background:transparent;
  backdrop-filter:none;
  border:0
}
.nav {
  min-height:84px;
  border-bottom:1px solid var(--line)
}
.brand-copy b {
  font:600 .72rem var(--body);
  letter-spacing:.10em;
  color:var(--cream)
}
.brand-copy span {
  font-size:.72rem;
  margin-top:4px
}
.brand img {
  box-shadow:0 0 0 1px #64899966,0 4px 12px #0005
}
.page {
  padding:26px 0 38px
}
.page-head {
  align-items:center;
  margin-bottom:12px
}
.page-head h1 {
  margin:8px 0 0;
  font-size:clamp(1.65rem,3.4vw,2.65rem);
  font-weight:500;
  letter-spacing:-.04em;
  line-height:1.15
}
.eyebrow {
  color:#a1b7c9;
  font:600 .65rem var(--body);
  letter-spacing:.14em
}
.page-note {
  max-width:1100px;
  font-size:.85rem;
  line-height:1.8;
  margin-bottom:22px
}
.progress {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  padding:12px;
  margin-bottom:22px;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(140deg,#1b3544,#112833);
  box-shadow:inset 0 2px 1px #ffffff16,0 5px 9px #0004
}
.experience {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(350px,.85fr);
  gap:20px;
  align-items:start
}
.viewer-column,.panel {
  display:flex;
  flex-direction:column;
  gap:16px;
  min-width:0
}
.stage {
  position:relative;
  overflow:hidden;
  height:clamp(480px,64vh,700px);
  border:1px solid #4d6c80;
  border-radius:18px;
  background:radial-gradient(ellipse at 50% 42%,#203c50,#0b1826 72%);
  box-shadow:inset 0 2px 1px #c4dff525,0 5px 0 #05141e,0 18px 32px #0005
}
.stage canvas {
  display:block;
  width:100%;
  height:100%;
  touch-action:none
}
.stage-hud {
  position:absolute;
  left:16px;
  right:16px;
  top:14px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:7px;
  pointer-events:none
}
.stage-hud span,.gesture {
  background:#091923ed;
  border:1px solid #507287;
  border-radius:7px;
  padding:7px 9px;
  color:#dce9f3;
  font:500 .66rem var(--mono)
}
.pressao-equivalente { display:block; color:#aec6d5; font-size:.9em; font-weight:500; }
#pplLabel {
  color:#a9d7ff;
  border-color:#608db6
}
.gesture {
  position:absolute;
  left:16px;
  bottom:16px;
  max-width:calc(100% - 130px);
  font-size:.62rem
}
.stage-tools {
  position:absolute;
  right:16px;
  bottom:16px;
  display:flex;
  gap:8px
}
button,.small-button,.back-link {
  border:1px solid #6d91a2;
  border-bottom-color:#0b2330;
  border-radius:10px;
  background:linear-gradient(#527a8f,#2a4d61 50%,#163343);
  color:#f1f8fc;
  box-shadow:inset 0 2px 1px #d7f5ff55,inset 0 -3px 3px #0006,0 4px 0 #061b25,0 8px 9px #0005;
  min-height:44px;
  padding:9px 13px;
  font:600 .78rem var(--body);
  cursor:pointer;
  transition:transform .15s,filter .15s
}
button:hover,.small-button:hover,.back-link:hover {
  filter:brightness(1.12);
  transform:translateY(-1px)
}
button:active,.small-button:active,.back-link:active {
  transform:translateY(3px)
}
button:disabled {
  opacity:.4;
  transform:none;
  cursor:default;
  box-shadow:none
}
button:focus-visible,input:focus-visible,a:focus-visible {
  outline:2px solid #9ce4ed;
  outline-offset:4px
}
.step {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:54px;
  text-align:left;
  padding:10px 12px
}
.step b {
  display:grid;
  place-items:center;
  flex:0 0 27px;
  width:27px;
  height:27px;
  border:1px solid #91b0c366;
  border-radius:8px;
  background:#09192355;
  font:500 .68rem var(--mono);
  color:#d5e6f3
}
.step span {
  font-size:.8rem
}
.step.active,.causas button.on,.caixa-btns button.on {
  background:linear-gradient(#55978a,#2c6d61 50%,#17433a);
  border-color:#7bd4c4;
  color:#effffb
}
.step.active b {
  background:#b8f1e2;
  color:#143d35;
  border-color:#d1fff1
}
.info-card,.caixa {
  position:relative;
  padding:20px;
  border:1px solid #405d70;
  border-top-color:#7892a3;
  border-bottom-color:#051621;
  border-radius:17px;
  background:linear-gradient(140deg,#0a1824,#1a3040);
  box-shadow:inset 0 2px 1px #ffffff25,inset 0 -4px 5px #0006,0 4px 0 #05141e,0 10px 14px #0004
}
.info-card {
  border-left:4px solid #8cdcca
}
.info-card h2 {
  font-size:1.25rem;
  font-weight:600;
  line-height:1.3;
  margin:8px 0 10px;
  letter-spacing:-.025em
}
.info-card p {
  font-size:.85rem;
  line-height:1.8;
  margin:0;
  color:var(--mist)
}
.microtags {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:14px
}
.microtags span {
  border:1px solid #64899955;
  border-radius:6px;
  padding:4px 8px;
  color:#b8d8e7;
  background:#112833;
  font-size:.68rem
}
.actions {
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:12px;
  padding-bottom:4px
}
.primary,.permitir,.ra-launch {
  background:linear-gradient(#55978a,#2c6d61 50%,#17433a);
  border-color:#7bd4c4;
  color:#effffb
}
.caixa {
  display:grid;
  gap:12px
}
[hidden],.caixa[hidden] {
  display:none!important
}
.caixa-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap
}
.caixa-head .eyebrow {
  color:#c5d8e3;
  font-size:.68rem
}
.caixa-btns,.causas {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  padding-bottom:3px
}
.caixa-btns button,.causas button {
  font-size:.74rem
}
.ctrl {
  display:grid;
  gap:12px;
  border:1px solid #54748766;
  border-radius:10px;
  padding:12px;
  background:linear-gradient(#203448,#152436);
  box-shadow:inset 0 1px 0 #cee7fc15
}
.ctrl span {
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:#b6cad9;
  font-size:.77rem
}
#caixaPostura {
  --postura-destaque:#ed5e68;
  box-shadow:inset 0 2px 1px #ffffff25,inset 0 -4px 5px #0006,0 4px 0 #05141e,0 10px 14px #0004,0 0 20px #ed5e682b
}
#caixaPostura > .ctrl {
  border-left:3px solid var(--postura-destaque)
}
.ctrl b {
  color:#9ce4ed;
  font-variant-numeric:tabular-nums
}
.ctrl input[type=range] {
  appearance:none;
  width:100%;
  height:9px;
  padding:0;
  margin:9px 0;
  border:1px solid #416477;
  border-radius:999px;
  background:linear-gradient(#071c27,#24495b);
  box-shadow:inset 0 2px 3px #0007;
  cursor:pointer
}
.ctrl input::-webkit-slider-thumb {
  appearance:none;
  width:24px;
  height:24px;
  border:1px solid #dcebf3;
  border-radius:50%;
  background:radial-gradient(circle at 30% 25%,#fff,#9bdfea 48%,#315c70);
  box-shadow:0 3px 5px #0007
}
.ctrl input::-moz-range-thumb {
  width:24px;
  height:24px;
  border:1px solid #dcebf3;
  border-radius:50%;
  background:radial-gradient(circle at 30% 25%,#fff,#9bdfea 48%,#315c70);
  box-shadow:0 3px 5px #0007
}
.estado,.nota {
  margin:0;
  color:var(--mist);
  font-size:.74rem;
  line-height:1.6
}
.estado.vivo {
  color:#8cdcca
}
.permitir {
  width:100%
}
.leituras {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  color:#aec6d5;
  font-size:.72rem
}
.leituras li {
  min-width:0;
  padding:11px;
  border:1px solid #405d7080;
  border-left:3px solid #80c4ff;
  border-radius:9px;
  background:#08172599;
  line-height:1.65;
  overflow-wrap:anywhere
}
.leituras b {
  display:block;
  color:#dce9f3;
  font-weight:600;
  font-variant-numeric:tabular-nums
}
.leituras li.alerta {
  border-left-color:#ffb45f
}
.leituras li.alerta b {
  color:#ffcb96
}
#caixaPneumo .leituras li:last-child {
  grid-column:1/-1;
  border-left-color:#dce9f3
}
#caixaZonas .leituras li {
  border-left-color:#c4a2f6
}
.caixa canvas {
  width:100%;
  height:auto;
  border:1px solid #385365;
  border-radius:12px;
  background:#091923
}
.ra-box {
  display:grid;
  gap:12px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:17px;
  background:linear-gradient(140deg,#1b3544,#112833)
}
.ra-box model-viewer {
  width:100%;
  height:150px;
  border:1px solid #4d6c80;
  border-radius:12px;
  background:radial-gradient(ellipse at 50% 42%,#203c50,#0b1826 75%)
}
.ra-status {
  margin:0;
  color:var(--mist);
  font-size:.73rem
}
.rodape {
  margin-top:8px;
  padding:22px 0;
  font-size:.75rem
}
@media(max-width:1000px) {
  .experience {
    grid-template-columns:1fr
  }
  .stage {
    height:clamp(400px,60vh,620px)
  }
  .panel {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:start
  }
  #caixaPostura,.ra-box,.referencias-modelo {
    grid-column:1/-1
  }
}
@media(max-width:650px) {
  .shell {
    width:calc(100% - 24px)
  }
  .nav {
    min-height:72px;
    gap:10px
  }
  .brand-copy b {
    font-size:.6rem;
    letter-spacing:.04em
  }
  .nav-actions .small-button {
    font-size:.7rem;
    padding:8px 10px
  }
  .page {
    padding-top:20px
  }
  .page-head {
    flex-direction:row;
    align-items:center;
    gap:12px
  }
  .page-head .back-link {
    font-size:.7rem;
    padding:8px;
    flex-shrink:0
  }
  .eyebrow {
    font-size:.58rem
  }
  .page-note {
    font-size:.78rem
  }
  .progress {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    padding:10px
  }
  .step:last-child {
    grid-column:1/-1
  }
  .step {
    min-height:44px;
    gap:8px;
    padding:8px 10px
  }
  .step span {
    font-size:.72rem
  }
  .step b {
    width:23px;
    height:23px;
    flex-basis:23px
  }
  .stage {
    height:clamp(370px,58vh,540px)
  }
  .stage-hud {
    left:9px;
    right:9px;
    top:12px;
    gap:5px
  }
  .stage-hud span {
    font-size:.53rem;
    padding:5px 7px
  }
  .anatomia-legenda {
    left:10px;
    right:10px;
    top:58px;
    font-size:.6rem
  }
  .gesture {
    display:none
  }
  .stage-tools {
    right:12px;
    bottom:12px
  }
  .panel {
    display:flex;
    align-items:stretch
  }
  .info-card,.caixa {
    padding:16px
  }
  .info-card h2 {
    font-size:1.13rem
  }
  .info-card p {
    font-size:.8rem
  }
  .caixa-btns button,.causas button {
    font-size:.7rem;
    padding:9px 11px
  }
  .leituras {
    font-size:.69rem;
    gap:7px
  }
  .leituras li {
    padding:9px
  }
}
@media(prefers-reduced-motion:reduce) {
  button,.small-button,.back-link {
    transition:none
  }
}
.ciclo-controls {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  padding:16px;
  margin-bottom:18px;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(140deg,#1b3544,#112833);
  box-shadow:inset 0 2px 1px #ffffff16,0 5px 9px #0004
}
.playback {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px
}
.playback .eyebrow {
  margin-right:8px
}
#pausar {
  background:linear-gradient(#a88850,#71552a 50%,#493515);
  border-color:#d4b47b
}
#reiniciar {
  background:linear-gradient(#a16277,#713d53 50%,#452436);
  border-color:#b48598
}
#cicloEstado {
  margin:0;
  color:#b8d8e7;
  font:.76rem var(--mono)
}
@media(max-width:650px) {
  .playback {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%;
    gap:9px
  }
  .playback .eyebrow {
    grid-column:1/-1
  }
  .playback button {
    padding:9px 7px;
    font-size:.72rem
  }
  .ciclo-controls {
    padding:12px
  }
  .leituras li:has(#lAltura) {
    grid-column:1/-1
  }
  .stage-tools {
    left:12px;
    right:auto
  }
}

@media (max-width:380px) {
  .stage-hud { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:3px; }
  .stage-hud span { padding:3px 6px; }
  #pplLabel { grid-column:2; grid-row:1/3; }
  #stepLabel { grid-column:1; }
}

/* Controles e cores semânticas do padrão dos simuladores. */
.ciclo-controls { flex-wrap:wrap; }
.execution-settings { display:flex; align-items:center; flex-wrap:wrap; gap:12px; width:100%; }
.speed-control { width:min(360px,100%); flex:1 1 260px; }
.loop-control { display:flex; gap:9px; align-items:center; font-size:.77rem; color:var(--mist); }
.loop-control input { width:18px; height:18px; accent-color:#8bdbc0; }
.execution-note { margin:0; width:100%; color:#aec6d5; font-size:.7rem; }
#pausar { background:linear-gradient(#8a7150,#58472e); border-color:#cba671; }
#avancarFase { background:linear-gradient(#527e6c,#294b3b); border-color:#8bdbc0; }
#reiniciar,#restaurarParametros { background:linear-gradient(#536c82,#283e51); border-color:#8caac2; }
.leituras li,#caixaZonas .leituras li { border-left-color:var(--card-color,#88c5ff); background:linear-gradient(120deg,color-mix(in srgb,var(--card-color,#88c5ff) 10%,#081725),#081725); box-shadow:inset 0 1px 0 #ffffff0b,0 3px 8px #0003; }
.leituras b { color:var(--card-color,#dce9f3); }
.leituras li.alerta { border-left-color:#ffb45f; }
.leituras li.alerta b { color:#ffcb96; }
.signature { font-size:.7rem; text-align:right; line-height:1.8; color:#aec6d5; }
#stage:fullscreen { width:100vw; height:100dvh; border-radius:0; background:#102633; }
.stage-tools { flex-wrap:wrap; justify-content:flex-end; }
@media(max-width:600px) { .execution-settings { align-items:stretch; } .execution-settings>button { flex:1; } .speed-control { flex-basis:100%; width:100%; } .stage-tools { left:12px; right:12px; gap:7px; } .stage-tools button { font-size:.64rem; padding:9px 10px; } }

@media(max-width:650px) { .playback { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* A leitura acompanha contexto → pressão → volume → perfusão. */
.estados-rapidos { margin-bottom:18px; }
.estados-rapidos .estado { min-height:3.5em; margin-bottom:0; }
.reading-group { margin-top:16px; }
.reading-group h3 { color:#b6d7e7; font-size:.76rem; margin:0 0 9px; line-height:1.6; }
.leitura-comum { grid-column:1/-1; }
.grafico-box .causas { margin-bottom:12px; }
.grafico-resumo { color:#b9d8e7; font-size:.72rem; line-height:1.65; margin-bottom:0; }
#curvaPerfil { aspect-ratio:600/330; }
#notaExecucao { min-height:1.7em; }
@media(max-width:600px) { .estados-rapidos .causas { display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); } .estados-rapidos button { white-space:normal; } }

@media(max-width:650px) {
  .stage-hud { display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:3px; }
  #pplLabel { grid-column:2;grid-row:1/3; }
  #stepLabel { grid-column:1; }
  .anatomia-legenda { top:76px; }
}

/* Legendas acompanham as válvulas aprovadas, sem alterar o modelo. */
.valve-labels { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.valve-labels[hidden], .valve-label[hidden] { display:none; }
.valve-labels svg { position:absolute; inset:0; width:100%; height:100%; }
.valve-leader { fill:none; stroke:#c9c2b1; stroke-width:1; opacity:.55; }
.valve-flow { fill:none; stroke:#d6c684; stroke-width:1.6; opacity:.8; }
.valve-label { position:absolute; left:0; top:0; box-sizing:border-box; width:136px; min-height:44px; padding:6px 8px; border:1px solid #726c60; border-radius:9px; background:#141219e6; color:#e3ddce; font:500 .62rem var(--mono); }
.valve-label b,.valve-label span { display:block; }
.valve-label span { margin-top:3px; color:#b7b2a6; font-size:.59rem; }
@media(max-width:450px){.valve-label { width:120px; font-size:.55rem; }.valve-label span { font-size:.53rem; }}


#passo {background:linear-gradient(#527e6c,#294b3b);border-color:#8bdbc0}
.modelo-status {position:absolute;left:16px;right:16px;top:62px;text-align:center;color:var(--mist);font-size:.75rem;pointer-events:none}
.degraus {list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.75rem;color:var(--mist)}
.degraus li {display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;padding:9px;border-bottom:1px solid #385365}
.degraus b {color:#9ce4ed}.degraus span {color:#dce9f3}
.valor {margin:0;color:var(--mist);font-size:.75rem}
.referencias-modelo {padding:16px;border:1px solid var(--line);border-radius:14px;font-size:.74rem;line-height:1.8;color:var(--mist)}
.referencias-modelo p {margin:0}.referencias-modelo a {color:#9ce4ed}
.reading-group:first-child {margin-top:0}.reading-group h3 {font-size:.8rem}
.leituras small {display:block;color:#aec6d5;font-size:.68rem}
#caixaLeituras {border-left:4px solid #88c5ff}#caixaValvula {border-left:4px solid #c4a2f6}
#curvaColuna,#curvaTempo {aspect-ratio:600/330}.grafico-box [hidden] {display:none!important}
.valve-label {background:#10202ced;border-color:#9a9587}
.stage-hud {display:flex;justify-content:space-between}.stage-hud #pressaoLabel {color:#a9d7ff;border-color:#608db6}
@media(max-width:650px){.stage-hud {display:grid;grid-template-columns:1fr 1fr}.stage-hud #pressaoLabel {grid-column:2;grid-row:1/3}.stage-hud #stepLabel {grid-column:1}}

#curvaColuna {aspect-ratio:600/430}
#curvaColuna {aspect-ratio:auto;display:block;box-sizing:border-box;max-width:100%}
/* PA e PV comparadas em cada região anatômica. */
.pressao-regioes {grid-template-columns:1fr!important}
.leituras li.pressao-regiao {display:block;border-left-color:#87a8bd;padding:13px}
.pressao-regiao header {display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.pressao-regiao header strong {font-size:.83rem;color:#dce9f3}
.pressao-regiao header small,.altura-regiao {color:#aec6d5;font-size:.64rem;line-height:1.6}
.altura-regiao {margin:5px 0 9px}
.pa-pv-grid {display:grid;grid-template-columns:1fr 1fr;gap:9px}
.medida {padding:9px 7px;border-radius:9px;background:#081725;border-top:2px solid var(--serie)}
.medida.pa {--serie:#ff939b}.medida.pv {--serie:#88c5ff}
.medida>span,.medida>small,.medida>b {display:block}
.medida>span {color:var(--serie);font-size:.62rem;font-weight:600;margin-bottom:5px}
.leituras .medida>b {color:var(--serie);font-size:.83rem;white-space:normal}
.medida>small {color:#b9d2e1;font-size:.66rem;margin-top:5px;min-height:1.3em}
.diferenca-regiao {font-size:.63rem;color:#b9d2e1;line-height:1.65;margin:9px 0 0}
.leitura-slide {margin-top:14px;font-size:.71rem;line-height:1.8;color:#aec6d5}
.leitura-slide summary {cursor:pointer;color:#dce9f3}
#pressaoLabel b,#pressaoLabel small {display:block}
#pressaoLabel small {font-size:.9em;line-height:1.8;font-weight:500}
#pressaoLabel .pa-hud {color:#ff939b}#pressaoLabel .pv-hud {color:#88c5ff}
#curvaTempo {aspect-ratio:auto;display:block;box-sizing:border-box;max-width:100%}
#pressaoLabel .hud-agua {white-space:nowrap;font-style:normal}
@media(max-width:650px){#pressaoLabel .hud-agua {display:block;padding-left:12px;font-size:.9em}#pressaoLabel small {line-height:1.5}}
.pa-pv-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.medida {min-width:0}