/* Paleta da 3D4U (blueprint/viewer.html), em variaveis para as duas paginas. */
:root{
  --bg:#10141c; --panel:#161c28; --panel2:#1c2433; --line:#2a3344;
  --text:#e8edf5; --muted:#8b97ab; --faint:#6b778c;
  --accent:#7dd3c7; --warn:#f0c674; --warnbg:#3a2a1a; --danger:#c47a6a;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:ui-sans-serif,system-ui,sans-serif;background:var(--bg);color:var(--text)}
button,.btn{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:4px;padding:8px 12px;cursor:pointer;font:inherit;font-size:13px;text-decoration:none;display:inline-block}
button:hover,.btn:hover{border-color:var(--accent)}
button.ok,.btn.ok{border-color:var(--accent);color:var(--accent)}
button.danger{border-color:var(--danger);color:var(--warn)}
button:disabled{opacity:.5;cursor:wait}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.err{margin-top:10px;padding:8px;background:var(--warnbg);color:var(--warn);border-radius:4px;font-size:12px;display:none;line-height:1.45}

.gear{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:0 12px;border-radius:21px;border:1px solid #ffffff33;background:#0f1c28cc;color:#e8f3f2;font-size:13px;font-weight:600;text-decoration:none;flex:none;white-space:nowrap}
.gear:hover{border-color:var(--accent);color:var(--accent)}
/* o atributo hidden precisa vencer display:inline-block dos botoes */
[hidden]{display:none !important}
.rotTable{font-size:11px;line-height:1.5;font-variant-numeric:tabular-nums}
.rotTable .cur{font-weight:700;color:var(--accent,#2b9348)}

.ptGrid{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;padding:4px 16px}
.ptGrid label{font-size:11px;color:var(--muted);display:flex;flex-direction:column;gap:3px}
.ptGrid input{background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:4px;padding:5px;font:inherit;font-size:12px}

@supports (height:100dvh){body.side{height:100dvh}}   /* telas de raio-X: a altura visível, sem a barra do navegador */
@media (max-width:760px){.obs-btn{font-size:0;padding:5px 8px}.obs-btn .obs-i,.obs-btn .obs-n{font-size:12px}}   /* Observações: só o ícone e o número */
/* caixa "Mostrar ..." dos dados sob demanda (layout.js) */
.detailTog{display:flex;align-items:center;gap:7px;margin:8px 0 2px;padding:6px 9px;border:1px dashed #2f3a4d;border-radius:6px;
  font-size:12px;color:var(--muted);cursor:pointer;user-select:none}
.detailTog input{accent-color:var(--accent);margin:0}
.detailTog:has(input:checked){color:var(--accent);border-style:solid;border-color:#2f6f63}

/* páginas com barra lateral (Marcha, 2D, prótese, pós-operatório, vídeo): em tela
   estreita, imagem/3D em cima e painel embaixo, como no visualizador */
@media (max-width:760px){
  body.side{flex-direction:column-reverse;height:100vh;height:100dvh;overflow:hidden}
  body.side>aside{width:auto;min-width:0;height:46vh;flex:none;border-right:none;border-top:1px solid var(--line)}
  body.side>main{flex:1;min-height:0}
  body.side #guide{width:min(300px,52%);max-height:calc(100% - 24px);overflow:auto;padding:6px 8px}
  body.side #guide svg{height:150px}
  body.side #guide p{font-size:11px}
  body.side #hint{max-width:calc(100% - 24px);white-space:normal;font-size:11px;top:6px}
  body.side #help{display:none}
  body.side .bar{left:6px;right:6px;bottom:6px;padding:5px 6px;flex-wrap:wrap}
  body.side aside .row{flex-wrap:wrap}
  body.side aside .row select{flex:1 1 140px;min-width:0}
}

/* Observações: os avisos saem dos painéis e abrem à direita (observacoes.js) */
.warn{display:none !important}
.gdCheck{margin:10px 0 8px;padding:9px 10px;border:1px solid var(--line,#2c3540);border-radius:6px;font-size:12px;line-height:1.45}
.gdCheck h4{margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.gdCheck label{display:flex;gap:7px;align-items:flex-start;margin:5px 0;cursor:pointer}
.gdCheck label input{margin-top:2px;flex:none}
.gdCheck .blk{margin:5px 0;color:#ffb4a3}
.gdCheck .avs{margin:4px 0;color:#c9a96b}
.gdCheck .ok{margin-top:6px;color:#8ce99a;font-weight:600}
.gdCheck .todo{margin-top:6px;color:#e8a87c;font-weight:600}
.gdPlanHead{margin:10px 0 4px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.blockmsg{margin:8px 12px;padding:9px 10px;border:1px solid #c47a6a99;border-left:3px solid #e8806a;background:#2e1c1a;border-radius:6px;font-size:12px;line-height:1.45;color:#f3d6cf}
.blockmsg b{display:block;color:#ffb4a3;margin-bottom:2px}
.blockmsg span{display:block}
.blockmsg small{display:block;margin-top:5px;color:#d9c6c0;font-size:11.5px}
.blockmsg small.blocknote{color:#9fd9d0}
.blockmsg .blockbtn{margin-top:8px;width:100%;padding:6px 8px;font-size:12px}
.err{background:none;color:#ff9b8a;padding:4px 0 0;margin-top:6px}
.obs-btn{position:fixed;top:10px;right:12px;z-index:60;display:flex;align-items:center;gap:7px;padding:6px 11px;border-radius:18px;
  background:#16232ef2;border:1px solid #2bb3a866;color:var(--text);font-size:12px;box-shadow:0 6px 18px #0007;cursor:pointer}
.obs-btn:hover,.obs-btn.on{border-color:var(--accent);color:var(--accent)}
.obs-btn .obs-i{width:17px;height:17px;border-radius:50%;background:var(--accent);color:#0b1218;font-weight:800;font-size:11px;
  display:inline-flex;align-items:center;justify-content:center;font-style:italic;font-family:Georgia,serif}
.obs-btn .obs-n{min-width:18px;padding:0 5px;border-radius:9px;background:#2bb3a833;color:var(--text);font-size:11px;text-align:center}
.obs-btn.has-err .obs-n{background:#c47a6a66}
.obs-btn.pulse{animation:obsPulse 1.2s ease-out 2}
@keyframes obsPulse{0%{box-shadow:0 0 0 0 #2bb3a8aa}100%{box-shadow:0 0 0 12px #2bb3a800}}
.obs-panel{position:fixed;top:0;right:0;bottom:0;width:min(360px,92vw);z-index:70;background:var(--panel);border-left:1px solid var(--line);
  box-shadow:-12px 0 30px #0008;transform:translateX(105%);transition:transform .22s ease;display:flex;flex-direction:column}
.obs-panel.on{transform:none}
.obs-h{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);
  color:var(--accent);font-size:13px;letter-spacing:.04em}
.obs-x{background:none;border:none;color:var(--muted);font-size:22px;line-height:1;padding:0 4px;cursor:pointer}
.obs-x:hover{color:var(--text)}
.obs-body{overflow-y:auto;padding:6px 16px 20px}
.obs-gh{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:14px 0 6px}
.obs-item{margin:0 0 8px;padding:8px 10px;border-left:3px solid var(--accent);background:var(--panel2);border-radius:0 6px 6px 0;
  font-size:12.5px;line-height:1.5;color:var(--text)}
.obs-item.err{border-left-color:var(--danger)}
.obs-empty{color:var(--muted);font-size:12.5px}
@media (prefers-reduced-motion:reduce){.obs-panel{transition:none}.obs-btn.pulse{animation:none}}