/* =========================================================
   Estilos comuns das simulações de Física (fis.…)
   Usado junto com /nucleo/base.css
   ========================================================= */
.volta-catalogo{display:inline-block;font-weight:700;font-size:15px;color:var(--suave);text-decoration:none;margin-bottom:4px}
.volta-catalogo:hover{color:var(--tinta)}
.palco svg{display:block;width:100%;height:auto;touch-action:manipulation}
.cena{aspect-ratio:auto!important;max-height:none!important}
.controle{display:grid;gap:4px;margin:0 0 12px}
.controle label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-weight:700;font-size:15px}
.controle output{font:700 16px/1 ui-monospace,Consolas,monospace;color:var(--tinta);white-space:nowrap}
.controle input[type=range]{width:100%;accent-color:var(--tinta);height:28px}
.leituras{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
.leitura{border:1px solid var(--borda);border-radius:10px;padding:8px 10px;background:var(--plano)}
.leitura small{display:block;font-size:12px;font-weight:700;color:var(--suave);text-transform:uppercase;letter-spacing:.03em}
.leitura b{font:700 19px/1.2 ui-monospace,Consolas,monospace}
.equacao{font:17px/1.5 "STIX Two Text",serif;background:var(--plano);border:1px solid var(--borda);border-radius:10px;padding:8px 12px;margin:8px 0 0;overflow-x:auto;white-space:nowrap}
.estado{display:inline-block;font-weight:700;border-radius:999px;padding:3px 12px;border:1.5px solid currentColor;color:var(--tinta)}
.graficos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
@media (max-width:560px){.graficos{grid-template-columns:1fr}}
.graf{background:var(--plano);border:1px solid var(--borda);border-radius:10px;padding:4px}
.graf svg{display:block;width:100%;height:auto}
.graf text,.cena text{font-family:"Atkinson Hyperlegible",system-ui,sans-serif}
/* desafios */
.opcoes{display:grid;gap:8px}
.opcao{border:2px solid var(--borda);background:var(--plano);color:var(--texto);border-radius:12px;padding:10px 14px;text-align:left;cursor:pointer;font-size:17px;line-height:1.4}
.opcao[aria-pressed="true"]{border-color:var(--tinta);background:color-mix(in srgb,var(--tinta) 10%,transparent)}
.opcao.certa{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}
.opcao.errada{border-color:var(--erro);background:color-mix(in srgb,var(--erro) 12%,transparent)}
.figura{margin:6px 0 12px;background:var(--plano);border:1px solid var(--borda);border-radius:10px;padding:6px;max-width:460px}
.figura svg{display:block;width:100%;height:auto}
.veredito{display:flex;gap:10px;align-items:flex-start;border-radius:12px;padding:12px 14px;border:2px solid var(--v,var(--borda));background:color-mix(in srgb,var(--v,var(--borda)) 10%,transparent)}
.lampada{width:18px;height:18px;border-radius:50%;background:var(--v);flex:0 0 18px;margin-top:4px}
.placar{display:flex;gap:14px;flex-wrap:wrap;font-weight:700;color:var(--suave)}
.placar b{color:var(--texto)}
/* layout das simulações: no celular a cena fica presa no topo e os controles vêm logo abaixo dela */
.lay{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr);grid-template-areas:"cena ctrl" "graf ctrl" "graf leit" "graf extra";gap:16px 20px;align-items:start}
.lay>*{min-width:0}
.lay>.a-cena{grid-area:cena}.lay>.a-ctrl{grid-area:ctrl}.lay>.a-graf{grid-area:graf}.lay>.a-leit{grid-area:leit}.lay>.a-extra{grid-area:extra}
.lay.sem-graf{grid-template-areas:"cena ctrl" "extra leit"}
@media (max-width:880px){
  .lay,.lay.sem-graf{grid-template-columns:1fr;grid-template-areas:"cena" "ctrl" "leit" "graf" "extra"}
  .lay>.a-cena{position:sticky;top:0;z-index:5}
  .lay>.a-cena .palco{box-shadow:0 4px 14px rgba(0,0,0,.12)}
}
.a-graf .graficos{margin-top:0}