/* ============================================================================
   AM LAB — Portal (auth + bancada)
   ----------------------------------------------------------------------------
   Herda os tokens de am.css. A referência visual é o exocad: a bancada de
   trabalho deles é o ambiente que o dentista e o lab conhecem de cor.
   Densidade de ferramenta: linhas baixas, mono nos dados, nada de card fofo.
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────── auth ────── */
.auth {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 88px 20px 40px;
  position: relative;
}
.auth::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--rule-dk) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-dk) 1px, transparent 1px);
  background-size: 96px 96px;
  opacity: 0.22;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 10%, transparent 75%);
  pointer-events: none;
}
.auth__card {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--slate);
  border: 1px solid var(--rule-dk);
  border-radius: 3px;
  padding: clamp(24px, 4vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 24px 60px -30px rgba(0,0,0,.7);
}
.auth__card .h-md { letter-spacing: -0.01em; }
.auth__sub { color: var(--chalk-dim); font-size: .9375rem; margin: 0; }

/* contexto da prescrição que veio do site — prova que nada se perdeu */
.auth__rx {
  border: 1px solid var(--rule-dk);
  border-left: 3px solid var(--taupe);
  border-radius: 0 2px 2px 0;
  background: var(--slate-2);
  padding: 10px 14px;
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .06em;
  color: var(--chalk-dim);
  line-height: 1.7;
}
.auth__rx em { font-style: normal; color: var(--taupe-hi); }

/* ─────────────────────────────────────────────────────────── formulário ──── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--chalk-dim);
}
.field input, .field select, .field textarea {
  background: var(--void);
  border: 1px solid var(--rule-dk);
  border-radius: 2px;
  color: var(--chalk);
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 1rem;              /* ≥16px: evita zoom automático no iOS */
  padding: 11px 13px;
  transition: border-color .2s var(--ease);
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--taupe);
}
.field input::placeholder { color: #5c6570; }
.field .hint { font-size: .75rem; color: var(--chalk-dim); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }

.form-err {
  display: none;
  border: 1px solid #7a3a3a;
  border-left-width: 3px;
  background: #2b1a1a;
  color: #e6b0b0;
  border-radius: 0 2px 2px 0;
  padding: 10px 14px;
  font-size: .875rem;
}
.form-err.on { display: block; }

.check-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .875rem;
  color: var(--chalk-dim);
  cursor: pointer;
}
.check-line input { margin-top: 3px; accent-color: var(--taupe); }
.check-line a { color: var(--taupe-hi); text-decoration: underline; text-underline-offset: 2px; }

.auth__alt {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #5c6570;
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.auth__alt::before, .auth__alt::after {
  content: ""; height: 1px; flex: 1; background: var(--rule-dk);
}

.btn--wide { width: 100%; justify-content: center; }
.btn--google {
  background: transparent;
  border-color: var(--rule-dk);
  color: var(--chalk);
}
.btn--google:hover { background: var(--slate-2); border-color: var(--chalk-dim); transform: none; }

.auth__foot {
  font-size: .875rem;
  color: var(--chalk-dim);
  text-align: center;
}
.auth__foot a { color: var(--taupe-hi); text-decoration: underline; text-underline-offset: 3px; }

.auth__logo { height: 26px; width: auto; align-self: center; margin-bottom: 4px; }

/* etapas do cadastro */
.astep { display: none; flex-direction: column; gap: 14px; }
.astep.on { display: flex; }
.adots { display: flex; gap: 6px; justify-content: center; }
.adots i {
  width: 22px; height: 2px; background: var(--rule-dk); border-radius: 1px;
  transition: background .3s var(--ease);
}
.adots i.on { background: var(--taupe); }

/* aviso de modo demo (some quando AMConfig.live) */
.demo-note {
  position: fixed;
  left: 12px; bottom: 52px;
  z-index: 80;
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--signal);
  background: var(--signal-soft);
  border: 1px solid var(--signal);
  border-radius: 2px;
  padding: 6px 10px;
  pointer-events: none;   /* selo, não pode engolir clique de botão embaixo */
}

/* ══════════════════════════════════════════════════════════ bancada ═══════ */
.bench {
  height: 100svh;
  display: grid;
  grid-template-rows: 52px minmax(0, 1fr) 40px;
  grid-template-columns: auto minmax(0, 1fr) 300px;   /* trilho dita a 1ª coluna */
  grid-template-areas:
    "top  top  top"
    "rail view props"
    "stat stat stat";
  background: var(--void);
  overflow: hidden;
}

/* topo: logo + wizard */
.bench__top {
  grid-area: top;
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 32px);
  padding: 0 16px;
  border-bottom: 1px solid var(--rule-dk);
  background: var(--slate);
  min-width: 0;
}
.bench__logo { height: 20px; width: auto; flex: none; }
.wizard {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
}
.wizard::-webkit-scrollbar { display: none; }
.wizard[hidden] { display: none; }   /* hidden perde p/ display:flex sem isto */
.wstep {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 2px;
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #5c6570;
  white-space: nowrap;
  border: 1px solid transparent;
}
.wstep .n {
  width: 16px; height: 16px;
  display: grid; place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: .5625rem;
}
.wstep.on { color: var(--taupe-hi); border-color: var(--rule-dk); background: var(--slate-2); }
.wstep.done { color: var(--good); }
.wizard .sep { color: #3a414b; flex: none; }
.bench__user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  font-family: var(--f-mono);
  font-size: .6875rem;
  color: var(--chalk-dim);
}
.bench__user button {
  background: none; border: 1px solid var(--rule-dk); border-radius: 2px;
  color: var(--chalk-dim); font-family: var(--f-mono); font-size: .625rem;
  letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.bench__user button:hover { color: var(--chalk); border-color: var(--chalk-dim); }

/* trilho esquerdo em DOIS estados (hambúrguer alterna): a GAVETA desliza a
   largura (64 ↔ 208px) sobre um conteúdo de largura FIXA — nada reflui nem
   corta no meio da animação; os nomes entram por fade logo depois */
.bench__rail {
  grid-area: rail;
  width: 64px;
  transition: width 0.24s var(--ease);
  border-right: 1px solid var(--rule-dk);
  background: var(--slate);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  overflow: hidden auto;                 /* clipa o excedente, rola vertical */
  scrollbar-width: none;
}
.bench__rail::-webkit-scrollbar { display: none; }
.bench--wide .bench__rail { width: 208px; }
.rail__ham {
  width: 40px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--chalk-dim);
  cursor: pointer;
  flex: none;
  transition: color .15s, background .15s;
}
.rail__ham:hover { color: var(--chalk); background: var(--slate-2); }
/* conteúdo de largura fixa: 208 − 24 de padding = 184px SEMPRE */
.tool, .rlrow, .bench__rail .pl-toggle { width: 184px; flex: none; }
.tool {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--chalk-dim);
  font-family: var(--f-sans);
  font-size: .8125rem;
  padding: 9px 12px;                     /* ícone 16px centra na faixa de 40 */
  cursor: pointer;
  text-align: left;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.tool svg { flex: none; opacity: .85; }
.tool:hover { color: var(--chalk); background: var(--slate-2); }
.tool.on { color: var(--taupe-hi); background: var(--slate-2); border-color: var(--rule-dk); }
.tool .badge {
  position: absolute;                    /* sobre o ícone nos DOIS estados */
  top: 1px;
  left: 24px;
  font-family: var(--f-mono);
  font-size: .5625rem;
  color: #14161a;
  background: #e3b544;   /* âmbar = "precisa de você" (aprovações paradas) */
  border-radius: 8px;
  padding: 1px 6px;
  pointer-events: none;
}
.rail__sep { height: 1px; align-self: stretch; margin: 2px 0; background: var(--rule-dk); flex: none; }
.rail__list { display: flex; flex-direction: column; gap: 2px; }
.rlrow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  background: none;
  border-radius: 6px;
  padding: 6px 7px;                      /* avatar 26px centra na faixa de 40 */
  cursor: pointer;
  text-align: left;
  color: var(--chalk-dim);
  font-family: var(--f-sans);
  font-size: .8125rem;
  transition: background .15s, color .15s;
}
.rlrow:hover { background: var(--slate-2); color: var(--chalk); }
.rlrow.on { background: var(--slate-2); color: var(--taupe-hi); box-shadow: inset 2px 0 0 var(--taupe); }
.rlrow__ava {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  overflow: hidden;
  flex: none;
}
span.rlrow__ava.ava--txt { display: grid; place-items: center; font-size: .5625rem; line-height: 1; }
.rlrow .n {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rlrow .k { font-family: var(--f-mono); font-size: .625rem; color: #5c6570; flex: none; }
.rlrow__dot {
  position: absolute;                    /* no canto do avatar nos 2 estados */
  top: 3px;
  left: 25px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e3b544;
  border: 2px solid var(--slate);
}
.bench__rail .pl-toggle {
  margin-top: 6px;
  border: 0;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  padding: 8px 12px;                     /* seta alinha na coluna dos ícones */
}
/* rótulos entram por FADE quando a gaveta abre */
.tool__lb, .rlrow .n, .rlrow .k, .bench__rail .pl-toggle .lb {
  opacity: 0;
  transition: opacity 0.16s;
}
.bench--wide .tool__lb, .bench--wide .rlrow .n, .bench--wide .rlrow .k,
.bench--wide .bench__rail .pl-toggle .lb {
  opacity: 1;
  transition: opacity 0.2s 0.08s;        /* espera a gaveta abrir um tanto */
}

/* viewport central */
.bench__view {
  grid-area: view;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.view-pad { padding: clamp(16px, 2.6vw, 30px); display: flex; flex-direction: column; gap: 18px; flex: 1; min-height: 0; }
.view-pad > * { flex-shrink: 0; }   /* linhas não esmagam: o excedente ROLA */

/* painel de propriedades (direita) */
.bench__props {
  grid-area: props;
  border-left: 1px solid var(--rule-dk);
  background: var(--slate);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.props__head {
  padding: 13px 16px;
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--chalk-dim);
  border-bottom: 1px solid var(--rule-dk);
  position: sticky;
  top: 0;
  background: var(--slate);
  z-index: 2;
}
.props__body { padding: 12px 16px 20px; display: flex; flex-direction: column; gap: 11px; }

/* paleta de trabalhos — tiles coloridos, referência exocad */
.wpal { display: flex; flex-direction: column; gap: 6px; }
.wpal__cat {
  font-family: var(--f-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5c6570;
  margin-top: 4px;
}
.wpal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.wtile {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  background: var(--wc);
  color: #fff;
  font-family: var(--f-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: left;
  cursor: pointer;
  opacity: 0.72;
  filter: saturate(0.85);
  transition: opacity 0.15s, filter 0.15s, outline-color 0.15s, transform 0.15s;
  outline: 2px solid transparent;
  outline-offset: 1px;
}
.wtile svg { flex: none; }
.wtile:hover { opacity: 0.92; filter: saturate(1); }
.wtile.on {
  opacity: 1;
  filter: saturate(1);
  outline-color: rgba(236, 232, 225, 0.55);
  transform: translateY(-1px);
}

/* barra de status inferior */
.bench__stat {
  grid-area: stat;
  border-top: 1px solid var(--rule-dk);
  background: var(--slate);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 16px;
  font-family: var(--f-mono);
  font-size: .6875rem;
  color: var(--chalk-dim);
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}
.bench__stat::-webkit-scrollbar { display: none; }
.bench__stat em { font-style: normal; color: var(--taupe-hi); }

/* odontograma dentro do viewport (reusa classes de am.css) */
.bench-arch {
  flex: 1;
  min-height: 0;                 /* preenche a tela SEM criar scroll */
  display: grid;
  place-items: center;
  border: 1px solid var(--rule-dk);
  border-radius: 3px;
  background:
    linear-gradient(var(--rule-dk) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--rule-dk) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--void);
  background-blend-mode: normal;
  padding: 4px;
  /* rouba um pedaço do gap do .view-pad: mais altura pro modelo */
  margin: -8px 0;
}
.bench-arch > div:first-child { width: 100%; height: 100%; min-height: 0; }  /* SÓ o #benchArc */
.bench-arch svg { width: 100%; height: 100%; display: block; }

/* modo 3D (boca .eoff): canvas absoluto — %-height de filho de grid com
   place-items:center estoura (gotcha conhecido), o inset resolve */
.bench-arch > div.is3d { position: relative; }
.amb3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
}
.amb3d-note,
.amb3d-hint {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5c6570;
  pointer-events: none;
  white-space: nowrap;
}
.amb3d-note { top: 50%; transform: translate(-50%, -50%); }
.amb3d-hint { bottom: 8px; }

/* ficha anatômica do dente focado (design vindo do seletor-pro):
   número grande + nome + quadrante; vive no topo do painel de propriedades */
.tcard {
  border: 1px solid var(--rule-dk);
  border-radius: 8px;
  background: var(--void);
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 10px;
}
.tcard.empty { display: none; }   /* a ficha só existe quando há dente focado */
.tcard .n {
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1;
  color: var(--chalk);
}
.tcard .n i { font-style: normal; color: var(--taupe-hi); }
.tcard .a { font-size: 0.8125rem; color: var(--chalk); }
.tcard .q { font-size: 0.6875rem; color: #5c6570; }
.tcard .w {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  color: var(--chalk-dim);
  margin-top: 4px;
}
.tcard .w .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.tcard .h {
  font-size: 0.6875rem;
  color: #b0aaa0;
  line-height: 1.5;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed var(--rule-dk);
}

/* alternador 2D ↔ 3D (fim da linha de seleção rápida) */
.selmode {
  margin-left: auto;
  display: inline-flex;
  border: 1px solid var(--rule-dk);
  border-radius: 999px;
  overflow: hidden;
  flex: none;
}
.smode {
  border: 0;
  background: transparent;
  color: var(--chalk-dim);
  font-family: var(--f-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  padding: 6px 12px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.smode + .smode { border-left: 1px solid var(--rule-dk); }
.smode:hover { color: var(--chalk); }
.smode.on { color: #14161a; background: var(--taupe); }

/* ───────────────────────────────────────────── lista de casos (densa) ────── */
.clist { display: flex; flex-direction: column; }
.crow {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 130px 150px;
  gap: 14px;
  align-items: center;
  padding: 13px 14px;
  border-bottom: 1px solid var(--rule-dk);
  cursor: pointer;
  transition: background .2s var(--ease);
  border-left: 2px solid transparent;
}
.crow:first-child { border-top: 1px solid var(--rule-dk); }
.crow:hover { background: var(--slate); border-left-color: var(--taupe); }
.crow__code { font-family: var(--f-mono); font-size: .75rem; color: var(--taupe-hi); }
.crow__what { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.crow__title { font-size: .9375rem; color: var(--chalk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crow__meta { font-family: var(--f-mono); font-size: .625rem; letter-spacing: .08em; color: #5c6570; }
.crow__due { font-family: var(--f-mono); font-size: .6875rem; color: var(--chalk-dim); text-align: right; }
.crow__due.late { color: var(--signal); }

/* pílula de status — cores do mapa oclusal */
.spill {
  justify-self: end;
  font-family: var(--f-mono);
  font-size: .5625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 2px;
  border: 1px solid;
  white-space: nowrap;
}
.spill--cold  { color: #8fa8c0; border-color: #35485c; background: #1a2430; }
.spill--teal  { color: #5fd0c8; border-color: #1e5450; background: #102826; }
.spill--amber { color: #e3b544; border-color: #64511e; background: #2a2210; }
.spill--good  { color: #74d29a; border-color: #275c3c; background: #12291c; }
.spill--warn  { color: #e07a6a; border-color: #63302a; background: #2a1613; }

.empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--chalk-dim);
  font-size: .9375rem;
  border: 1px dashed var(--rule-dk);
  border-radius: 3px;
}

/* ─────────────────────────────────────────── detalhe do caso / timeline ──── */
.case-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.case-head .code { font-family: var(--f-mono); font-size: .8125rem; color: var(--taupe-hi); }
.case-head h2 { font-size: 1.375rem; font-weight: 300; letter-spacing: -.01em; margin: 0; }
.back-link {
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--chalk-dim); cursor: pointer;
  background: none; border: 0; padding: 0;
  display: inline-flex; align-items: center; gap: 7px;
}
.back-link:hover { color: var(--chalk); }

.timeline { display: flex; flex-direction: column; }
.tl {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  position: relative;
}
.tl::before {
  content: "";
  position: absolute;
  left: 6px; top: 22px; bottom: -4px;
  width: 1px;
  background: var(--rule-dk);
}
.tl:last-child::before { display: none; }
.tl__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--taupe);
  background: var(--void);
  margin-top: 5px;
}
.tl--done .tl__dot { background: var(--taupe); }
.tl__body { display: flex; flex-direction: column; gap: 1px; font-size: .875rem; }
.tl__t { color: var(--chalk); }
.tl__m { font-family: var(--f-mono); font-size: .625rem; color: #5c6570; letter-spacing: .06em; }

/* chat do caso */
.chat { display: flex; flex-direction: column; gap: 8px; }
.msg {
  max-width: 78%;
  padding: 9px 13px;
  border-radius: 3px;
  font-size: .875rem;
  line-height: 1.5;
  border: 1px solid var(--rule-dk);
  background: var(--slate);
  color: var(--chalk);
}
.msg--me { align-self: flex-end; border-color: #4a4237; background: #2a251e; }
.msg .who { display: block; font-family: var(--f-mono); font-size: .5625rem; letter-spacing: .12em; text-transform: uppercase; color: #77808b; margin-bottom: 3px; }
.chat__send { display: flex; gap: 8px; }
.chat__send input { flex: 1; }

/* seção de bloco no viewport */
.vsec { border: 1px solid var(--rule-dk); border-radius: 3px; background: var(--slate); }
.vsec__head {
  padding: 11px 15px;
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--chalk-dim);
  border-bottom: 1px solid var(--rule-dk);
  display: flex; justify-content: space-between; align-items: center;
}
.vsec__body { padding: 14px 15px; }

/* grade rótulo·valor da prescrição (leitura) */
.spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px; }
.spec div { display: flex; flex-direction: column; gap: 2px; }
.spec dt { font-family: var(--f-mono); font-size: .5625rem; letter-spacing: .14em; text-transform: uppercase; color: #5c6570; }
.spec dd { margin: 0; font-size: .875rem; color: var(--chalk); font-family: var(--f-mono); }

/* ─────────────────────────────────────────────────────────── responsivo ──── */
@media (max-width: 980px) {
  .bench {
    grid-template-rows: 52px minmax(0, 1fr) auto 56px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "top"
      "view"
      "props"
      "rail";
  }
  .rail__ham { display: none; }
  .bench__rail,
  .bench--wide .bench__rail {
    width: auto;
    flex-direction: row;
    align-items: center;
    border-right: 0;
    border-top: 1px solid var(--rule-dk);
    padding: 8px 12px;
    gap: 10px;
    overflow: auto hidden;
  }
  .tool { width: auto; padding: 9px 6px; }
  .tool__lb, .rlrow .n, .rlrow .k { display: none; }   /* celular: só fotos */
  .tool .badge { top: -4px; left: auto; right: -4px; }
  .rail__sep { width: 1px; height: 26px; align-self: center; margin: 0; }
  .rail__list { flex-direction: row; flex: 1; min-width: 0; overflow-x: auto; align-items: center; }
  .rlrow { width: auto; padding: 6px 2px; }
  .bench__rail .pl-toggle { display: none; margin: 0; }
  .bench__props {
    border-left: 0;
    border-top: 1px solid var(--rule-dk);
    max-height: 44svh;
  }
  .bench__stat { display: none; }
  .crow { grid-template-columns: 70px minmax(0, 1fr) auto; }
  .crow__due { display: none; }
}

/* ─────────────────────────────── seleção rápida + multi-trabalho (seletor-pro) ── */
.qsel {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.qsel::-webkit-scrollbar { display: none; }
.qsel > span {
  font-family: var(--f-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5c6570;
  margin-right: 4px;
  white-space: nowrap;
}
.chip {
  border: 1px solid var(--rule-dk);
  background: transparent;
  color: var(--chalk-dim);
  font-family: var(--f-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 99px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.chip:hover { color: var(--chalk); border-color: var(--chalk-dim); }
.chip.on { color: #14161a; background: var(--taupe); border-color: var(--taupe); }

/* tooltip anatômico que segue o mouse */
.amo-tip {
  position: fixed;
  left: 0;
  top: 0;                       /* posição real vem por translate3d (JS/rAF) */
  z-index: 90;
  pointer-events: none;
  background: #101216;
  border: 1px solid var(--rule-dk);
  color: var(--chalk);
  font-size: 0.75rem;
  padding: 6px 10px;
  border-radius: 6px;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: opacity 0.12s;    /* transform NUNCA transiciona: mataria o rAF */
  will-change: transform;
  white-space: nowrap;
}
.amo-tip.on { opacity: 1; }
.amo-tip b { color: var(--taupe-hi); font-weight: 700; }
.amo-tip .w { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin: 0 4px 0 8px; vertical-align: baseline; }
.amo-tip .hist { display: block; font-size: 0.6875rem; color: #b0aaa0; margin-top: 3px; }

/* toast não-bloqueante (substitui alert) */
.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 8px);
  max-width: min(92vw, 480px);
  background: #101216;
  border: 1px solid var(--taupe);
  color: var(--chalk);
  font-size: 0.8125rem;
  line-height: 1.5;
  padding: 10px 18px;
  border-radius: 8px;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 120;
  pointer-events: none;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* dropzone de STL (design do preview 02-stl) + viewer 3D antes do envio */
.drop-file {
  border: 1px dashed var(--rule-dk);
  border-radius: 4px;
  background: rgba(29, 32, 38, 0.55);
  padding: clamp(20px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.drop-file:hover, .drop-file:focus-visible { border-color: var(--chalk-dim); outline: none; }
.drop-file.drag { border-color: var(--teal, #5fd0c8); background: rgba(95, 208, 200, 0.06); }
.drop-file strong { font-weight: 400; font-size: 1.0625rem; letter-spacing: -0.01em; }
.drop-file span { font-size: 0.8125rem; color: var(--chalk-dim); line-height: 1.55; }

.stlprev {
  border: 1px solid var(--rule-dk);
  border-radius: 4px;
  overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 42%, #1c2027 0%, var(--void) 75%);
}
.stlprev[hidden] { display: none; }
.stlprev__cv { position: relative; height: clamp(220px, 34vh, 340px); }
.stlprev__hud {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 12px;
  border-top: 1px solid var(--rule-dk);
  background: var(--slate);
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  color: var(--chalk-dim);
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.stlprev__hud em { font-style: normal; color: var(--taupe-hi); }
.stlprev__hud .bad { color: #e07a6a; }
.stlprev__hud button {
  margin-left: auto;
  background: none;
  border: 1px solid var(--rule-dk);
  border-radius: 2px;
  color: var(--chalk-dim);
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.stlprev__hud button:hover { color: var(--chalk); border-color: var(--chalk-dim); }
.stlprev__hud button.on { color: var(--teal, #5fd0c8); border-color: var(--teal, #5fd0c8); }

/* busca de dente/trabalho na fileira de seleção rápida (seletor-pro) */
.qfind {
  position: relative;
  margin-left: auto;
  flex: 0 0 auto;
}
.qfind input {
  width: clamp(170px, 22vw, 250px);
  background: var(--slate, #1d2026);
  border: 1px solid var(--rule-dk);
  border-radius: 99px;
  color: var(--chalk);
  font-size: 0.75rem;
  padding: 6px 12px 6px 28px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.qfind input:focus {
  outline: none;
  border-color: var(--taupe);
  box-shadow: 0 0 0 3px rgba(195, 181, 165, 0.14);
}
.qfind svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
  pointer-events: none;
}

/* trabalhos do caso (grupos dente → tipo) no painel de propriedades */
.joblist { display: flex; flex-direction: column; gap: 4px; }
.jobrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--rule-dk);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.75rem;
  color: var(--chalk);
}
.jobrow .dot { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.jobrow .t { min-width: 0; }
.jobrow .t small {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.625rem;
  color: var(--chalk-dim);
}
.jobrow button {
  margin-left: auto;
  border: 0;
  background: none;
  color: #5c6570;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}
.jobrow button:hover { color: var(--chalk); }

/* ═══════════════════════════════════ biblioteca de PACIENTES ═════════════ */

.libbar { display: flex; gap: 10px; align-items: center; }
.libbar__search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--rule-dk);
  border-radius: 3px;
  background: var(--void);
  padding: 0 12px;
  color: #5c6570;
}
.libbar__search input {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--chalk);
  font-family: var(--f-sans);
  font-size: 0.875rem;
  padding: 11px 0;
  outline: none;
}
.libbar__search input::placeholder { color: #5c6570; }
.libbar__search:focus-within { border-color: var(--taupe); }

/* aviso: prescrição do site esperando paciente */
.pbanner {
  border: 1px solid #64511e;
  background: #2a2210;
  color: #e3b544;
  border-radius: 3px;
  padding: 10px 14px;
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* grade de cards */
.pgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}
.pcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--rule-dk);
  border-radius: 6px;
  background: var(--slate, #1b1e23);
  padding: 18px 14px 14px;
  cursor: pointer;
  text-align: center;
  color: var(--chalk);
  font-family: var(--f-sans);
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.pcard:hover { border-color: var(--taupe); transform: translateY(-2px); }
.pcard__ava {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 4px;
}
.pcard__name { font-size: 0.9375rem; font-weight: 600; line-height: 1.25; }
.pcard__nick { font-size: 0.75rem; color: var(--taupe-hi); }
.pcard__meta { font-size: 0.6875rem; color: #5c6570; margin-top: 2px; }
.pcard__flag {
  font-family: var(--f-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e3b544;
  border: 1px solid #64511e;
  background: #2a2210;
  border-radius: 999px;
  padding: 3px 8px;
  margin-top: 4px;
}

/* avatar sem foto: iniciais com cor estável por nome */
.ava--txt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--ah, 30) 24% 24%);
  color: hsl(var(--ah, 30) 42% 74%);
  border: 1px solid hsl(var(--ah, 30) 24% 34%);
  font-family: var(--f-sans);
  font-weight: 600;
  letter-spacing: 0.04em;
}
span.pcard__ava.ava--txt { font-size: 1.25rem; }

/* ── faixa do paciente no topo do viewport ── */
.pstrip {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid var(--rule-dk);
  padding-bottom: 8px;
  margin-bottom: 0;
}
.pstrip__row { display: flex; align-items: center; gap: 12px; }
.pstrip__row .back-link { margin: 0; flex: none; }
.pava {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
span.pava.ava--txt { font-size: 0.875rem; }
.pstrip__names { display: flex; flex-direction: column; min-width: 0; }
.pstrip__names b {
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pstrip__names span { font-size: 0.6875rem; color: #5c6570; }
.pstrip__edit {
  margin-left: auto;
  border: 1px solid var(--rule-dk);
  background: transparent;
  color: var(--chalk-dim);
  font-family: var(--f-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 6px 10px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.pstrip__edit:hover { color: var(--chalk); border-color: var(--chalk-dim); }

/* abas internas do paciente: barra de sublinhado (ancora o viewport e não
   se confunde com os chips de filtro logo abaixo) */
.ptabs {
  display: flex;
  gap: 24px;
  width: 100%;
  border-bottom: 1px solid var(--rule-dk);
}
.ptab {
  position: relative;
  border: 0;
  background: none;
  color: var(--chalk-dim);
  font-family: var(--f-sans);
  font-size: 0.8125rem;
  padding: 2px 1px 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s;
}
.ptab:hover { color: var(--chalk); }
.ptab.on { color: var(--chalk); }
.ptab.on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--taupe);
}

/* paciente no cabeçalho do caso */
.case-pat {
  font-size: 0.75rem;
  color: var(--taupe-hi);
  border: 1px solid var(--rule-dk);
  border-radius: 999px;
  padding: 3px 10px;
}

/* ── modal de cadastro do paciente ── */
.pmodal {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(10, 11, 13, 0.72);
  display: grid;
  place-items: center;
  padding: 18px;
}
.pmodal__card {
  width: min(430px, 100%);
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  background: var(--slate, #1b1e23);
  border: 1px solid var(--rule-dk);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pmodal__head {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--taupe-hi);
}
.pmodal__body { display: flex; flex-direction: column; gap: 12px; }
.pm-photo {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.pm-photo__ava {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px dashed var(--rule-dk);
  display: grid;
  place-items: center;
  color: #5c6570;
  overflow: hidden;
  flex: none;
  transition: border-color 0.15s, color 0.15s;
}
.pm-photo:hover .pm-photo__ava { border-color: var(--taupe); color: var(--chalk-dim); }
.pm-photo__ava img { width: 100%; height: 100%; object-fit: cover; }
.pm-photo__hint { font-size: 0.75rem; color: var(--chalk-dim); }
.pm-photo__hint i { font-style: normal; color: #5c6570; }
.pmodal__lgpd {
  margin: 0;
  font-size: 0.6875rem;
  color: #5c6570;
  line-height: 1.5;
}
.pmodal__foot { display: flex; justify-content: flex-end; gap: 10px; }

/* ── duplicar caso pra outro paciente: lista de destino dentro do modal ── */
.dup__what {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--chalk-dim);
  line-height: 1.55;
}
.dup__what small { color: #5c6570; font-size: 0.6875rem; }
.duplist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 264px;
  overflow-y: auto;
  margin-top: 2px;
}
.duprow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--rule-dk);
  border-radius: 8px;
  background: none;
  color: var(--chalk);
  font: inherit;
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.duprow:hover { border-color: var(--taupe); background: rgba(163, 147, 131, 0.08); }
.duprow .n { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duprow .n small { color: #5c6570; font-size: 0.6875rem; }
.duprow svg { flex: none; color: #5c6570; }
.duprow:hover svg { color: var(--taupe); }
.duprow__ava,
.duprow .ava--txt {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #14161a;
  background: hsl(var(--ah, 30), 32%, 62%);
}

@media (max-width: 640px) {
  .libbar { flex-direction: column; align-items: stretch; }
  .pgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .pstrip__row { flex-wrap: wrap; }
  .ptabs { overflow-x: auto; scrollbar-width: none; }
  .ptab { white-space: nowrap; }
}

/* ═══════════════════════════ fotos clínicas do caso ═════════════════════ */
.pgal { display: flex; flex-wrap: wrap; gap: 8px; }
.pgal__empty { font-size: 0.75rem; color: #5c6570; }
.pgal__it {
  position: relative;
  width: 84px;
  height: 84px;
  border: 1px solid var(--rule-dk);
  border-radius: 4px;
  overflow: hidden;
  flex: none;
}
.pgal__it img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pgal__it.pending img { opacity: 0.35; }
.pgal__it button {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: rgba(10, 11, 13, 0.78);
  color: var(--chalk);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.pgal__it button:hover { background: #63302a; }
.pgal__it--view { cursor: zoom-in; }
.pgal__it--view:hover { border-color: var(--taupe); }

/* lightbox: clique fecha */
.plight {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(8, 9, 11, 0.88);
  display: grid;
  place-items: center;
  padding: 24px;
  cursor: zoom-out;
}
.plight img {
  max-width: min(1200px, 94vw);
  max-height: 92vh;
  border: 1px solid var(--rule-dk);
  border-radius: 4px;
  box-shadow: 0 24px 80px -20px rgba(0, 0, 0, 0.9);
}

/* ═══════════════ preview do paciente no painel direito (hover no card) ═══ */
.pprev { display: flex; flex-direction: column; gap: 12px; }
.pprev__id { display: flex; align-items: center; gap: 12px; }
.pprev__ava {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
span.pprev__ava.ava--txt { font-size: 1.125rem; }
.pprev__names { display: flex; flex-direction: column; min-width: 0; }
.pprev__names b { font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
.pprev__names span { font-size: 0.75rem; color: var(--taupe-hi); }
.pprev__amber {
  border: 1px solid #64511e;
  background: #2a2210;
  color: #e3b544;
  border-radius: 3px;
  padding: 8px 12px;
  font-size: 0.75rem;
  line-height: 1.4;
}
.pprev__teeth {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  color: var(--chalk-dim);
  line-height: 1.6;
}
.pprev__teeth span {
  display: block;
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5c6570;
}
.pprev__sec {
  font-family: var(--f-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5c6570;
  border-top: 1px solid var(--rule-dk);
  padding-top: 10px;
}
.pprev__sec em { font-style: normal; color: var(--taupe-hi); letter-spacing: 0.06em; }
.pprev__case {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 1px solid var(--rule-dk);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.02);
  padding: 7px 9px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.pprev__case:hover { border-color: var(--taupe); background: rgba(255, 255, 255, 0.04); }
.pprev__case .c {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  color: var(--taupe-hi);
  flex: none;
}
.pprev__case .t {
  flex: 1;
  min-width: 0;
  font-size: 0.75rem;
  color: var(--chalk);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pprev__case .spill { flex: none; }
.pprev__none { margin: 0; font-size: 0.75rem; color: #5c6570; line-height: 1.5; }
.pprev__more {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 0.625rem;
  color: #5c6570;
}
.pprev__hint {
  margin: 0;
  font-size: 0.6875rem;
  color: #5c6570;
  border-top: 1px solid var(--rule-dk);
  padding-top: 10px;
}

/* histórico do paciente: chip do caso clicável na linha do tempo */
.hcode {
  border: 1px solid var(--rule-dk);
  background: transparent;
  color: var(--taupe-hi);
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  border-radius: 3px;
  padding: 2px 7px;
  cursor: pointer;
  vertical-align: 1px;
  transition: border-color 0.15s, color 0.15s;
}
.hcode:hover { border-color: var(--taupe); color: var(--chalk); }

/* ═══════ reorganização da aba do paciente (identidade no header) ═════════ */
.bench__pat {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  max-width: 280px;
  flex: none;
  height: 30px;
  padding-left: clamp(12px, 1.6vw, 22px);
  border-left: 1px solid var(--rule-dk);   /* separador de toolbar, não crachá */
}
.bench__pat[hidden] { display: none; }
.bench__pat .back,
.bench__pat .edit {
  border: 0;
  background: none;
  color: var(--chalk-dim);
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  transition: color 0.15s, background 0.15s;
}
.bench__pat .back:hover,
.bench__pat .edit:hover { color: var(--chalk); background: var(--slate-2); }
.hpava {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  overflow: hidden;        /* iniciais nunca vazam do círculo */
  flex: none;
}
span.hpava.ava--txt {
  display: grid;
  place-items: center;
  font-size: 0.5625rem;
  line-height: 1;
  letter-spacing: 0.02em;
}
.bench__pat b {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--chalk);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* abas do paciente soltas (a antiga faixa morreu) */
.view-pad > .ptabs { margin-bottom: -4px; }

/* trabalho em card grande na etapa 2 */
.jobrow--big { padding: 10px 12px; font-size: 0.875rem; }
.jobrow--big .dot { width: 12px; height: 12px; }
.jobrow button {
  margin-left: auto;
  border: 0;
  background: none;
  color: #5c6570;
  font-size: 15px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
}
.jobrow button:hover { color: #e07a6a; }

.wizwarn {
  margin: 0;
  border: 1px solid #64511e;
  background: #2a2210;
  color: #e3b544;
  border-radius: 3px;
  padding: 8px 12px;
  font-size: 0.8125rem;
}

@media (max-width: 980px) {
  .bench__pat { max-width: 40vw; }
}

/* ═══════ lista alfabética de pacientes no painel direito (biblioteca) ═════ */
.pllist { display: flex; flex-direction: column; gap: 2px; }
.plrow {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: none;
  border-radius: 4px;
  padding: 7px 8px;
  cursor: pointer;
  text-align: left;
  color: var(--chalk);
  font-family: var(--f-sans);
  font-size: 0.8125rem;
  transition: background 0.15s;
}
.plrow:hover { background: var(--slate-2); }
.plrow__ava {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  overflow: hidden;
  flex: none;
}
span.plrow__ava.ava--txt { display: grid; place-items: center; font-size: 0.5625rem; line-height: 1; }
.plrow .n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plrow .k { font-family: var(--f-mono); font-size: 0.625rem; color: #5c6570; flex: none; }
.plrow__dot { width: 8px; height: 8px; border-radius: 50%; background: #e3b544; flex: none; }
.pl-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--rule-dk);
  border-radius: 4px;
  background: none;
  color: var(--chalk-dim);
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.pl-toggle:hover { color: var(--chalk); border-color: var(--chalk-dim); }
.pl-toggle svg { transition: transform 0.2s; }
.pl-toggle.open svg { transform: rotate(180deg); }

/* etapa Dentes: coluna DENSA — cada pixel vertical vai pro modelo */
.view-pad--dense { padding-top: 12px; padding-bottom: 12px; gap: 10px; }
.view-pad--dense .ptab { padding-bottom: 8px; }
.view-pad--dense .chip { padding: 6px 11px; }

/* ações do caso flutuam DENTRO do quadro (canto oposto ao cartão de modo) */
.arch-actions {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 6;
  display: flex;
  gap: 10px;
  align-items: center;
}

@media (max-width: 980px) {
  /* no celular o scroll é natural: garante modelo grande */
  .bench-arch { min-height: 58vh; }
}

/* ═══════ cartão de modo 2D↔3D (estilo Google Maps) no viewport da arcada ══ */
.bench-arch { position: relative; }   /* âncora do cartão */
.mapscard {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 6;
  width: 104px;
  height: 74px;
  padding: 0;
  border: 2px solid rgba(236, 232, 225, 0.85);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: #101216;
  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.85);
  transition: transform 0.16s, border-color 0.16s;
}
.mapscard:hover { transform: scale(1.05); border-color: var(--taupe-hi); }
.mapscard .thumb {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
  background: #1a1c21;
}
.mapscard .thumb.show { display: block; }
.mapscard .thumb svg { width: 100%; height: 100%; display: block; }
.mapscard .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mapscard .thumb .wait {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--f-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5c6570;
}
.mapscard .tag2 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3px 8px 4px;
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-align: left;
  letter-spacing: 0.02em;
  background: linear-gradient(transparent, rgba(8, 9, 11, 0.85) 55%);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}
/* pulso de descoberta: só até o dentista usar o 3D pela primeira vez */
.mapscard.pulse::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 10px;
  border: 2px solid var(--taupe-hi);
  opacity: 0;
  animation: mpulse 2.2s ease-out 3;
  pointer-events: none;
}
@keyframes mpulse {
  0% { opacity: 0.9; transform: scale(1); }
  70% { opacity: 0; transform: scale(1.14); }
  100% { opacity: 0; }
}

/* ═══════ grade de MATERIAIS (referência: seletor do exocad, print) ═══════ */
.mgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mtile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--rule-dk);
  border-radius: 6px;
  background: var(--void);
  padding: 9px 6px 7px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.mtile:hover { border-color: var(--chalk-dim); transform: translateY(-1px); }
.mtile.on {
  border-color: var(--taupe);
  background: var(--slate-2);
  box-shadow: inset 0 0 0 1px var(--taupe);
}
.mtile .mat-ill { width: 56px; height: 40px; display: block; }
.mtile span {
  font-family: var(--f-sans);
  font-size: 0.6875rem;
  line-height: 1.2;
  color: var(--chalk-dim);
  text-align: center;
}
.mtile.on span { color: var(--chalk); }
.mtile__ck {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--taupe-hi);
  display: grid;
  place-items: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* ═══════ extras da prescrição (prints exocad): scans + parâmetros ════════ */
.scanchips { display: flex; flex-wrap: wrap; gap: 6px; }
.scanchips .chip.on { color: #14161a; background: var(--taupe); border-color: var(--taupe); }

.advtoggle {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: none;
  color: var(--taupe-hi);
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 0;
  cursor: pointer;
}
.advtoggle:hover { color: var(--chalk); }
.advtoggle svg { transition: transform 0.2s; }
.advtoggle.open svg { transform: rotate(180deg); }
.advbox {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--rule-dk);
  border-radius: 6px;
  background: var(--void);
  padding: 12px;
}
/* rótulo e valor na MESMA linha; o slider ganha a linha de baixo inteira */
.advrow {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 10px;
  row-gap: 4px;
  align-items: center;
}
.advrow label {
  grid-row: 1;
  grid-column: 1;
  font-family: var(--f-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chalk-dim);
}
.advrow .v {
  grid-row: 1;
  grid-column: 2;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  color: var(--taupe-hi);
  white-space: nowrap;
}
.advrow input[type="range"] {
  grid-row: 2;
  grid-column: 1 / -1;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--rule-dk);
  outline: none;
  margin: 2px 0;
}
.advrow .scanchips { grid-row: 2; grid-column: 1 / -1; }
/* chips compridos QUEBRAM linha em vez de estourar o painel */
.scanchips .chip { white-space: normal; text-align: left; line-height: 1.3; }
.bench__props { overflow-x: hidden; }
.advrow input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--taupe-hi);
  border: 2px solid var(--void);
  box-shadow: 0 0 0 1px var(--taupe);
  cursor: pointer;
}
.advrow input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--taupe-hi);
  border: 2px solid var(--void);
  cursor: pointer;
}

/* ═══════ régua Vita como o objeto físico: cada família preenche o trilho ═ */
.shrail { display: flex; flex-direction: column; gap: 8px; }
.shrow { display: flex; align-items: stretch; gap: 7px; }
.shtile {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--rule-dk);
  border-radius: 7px;
  background: var(--void);
  padding: 8px 2px 7px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.shtile:hover { border-color: var(--chalk-dim); transform: translateY(-1px); }
.shtile.on {
  border-color: var(--taupe);
  background: var(--slate-2);
  box-shadow: inset 0 0 0 1px var(--taupe);
}
.shtile .sh-ill { width: 34px; height: 45px; display: block; }
.shtile span {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  color: var(--chalk-dim);
}
.shtile.on span { color: var(--chalk); }
.shtile .mtile__ck { width: 16px; height: 16px; top: -6px; right: -6px; }

/* ═══════ barras de rolagem no tema (Chrome/Edge + Firefox) ═══════════════ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--rule-dk);
  border-radius: 8px;
  border: 2px solid var(--void);   /* moldura = polegar "flutuando" no trilho */
}
::-webkit-scrollbar-thumb:hover { background: #4a5260; }
::-webkit-scrollbar-thumb:active { background: var(--taupe); }
::-webkit-scrollbar-corner { background: transparent; }
@supports (-moz-appearance: none) {
  * { scrollbar-color: #3a414b transparent; scrollbar-width: thin; }
}

/* ═══════ etapa 2 · Trabalhos do caso: mini-mapa + cartões (redesign) ═════ */
.rx2 {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(250px, 5fr) 7fr;
  gap: 20px;
}
.rx2__map {
  position: relative;
  border: 1px solid var(--rule-dk);
  border-radius: 6px;
  background:
    linear-gradient(var(--rule-dk) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--rule-dk) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--void);
}
.rx2__map > div { position: absolute; inset: 10px; }
.rx2__map svg { width: 100%; height: 100%; display: block; }
.rx2__side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: 2px;
}
.rx2__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--taupe-hi);
  border-bottom: 1px solid var(--rule-dk);
  padding-bottom: 9px;
}
.rx2__head em { font-style: normal; color: #5c6570; letter-spacing: 0.06em; margin-left: auto; }
.jobcard {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--rule-dk);
  border-radius: 8px;
  background: var(--slate-2);
  padding: 11px 12px;
  transition: border-color 0.15s;
}
.jobcard:hover { border-color: var(--chalk-dim); }
.jobcard__ic {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.jobcard__ic svg { width: 22px; height: 22px; }
.jobcard__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jobcard__tx b { font-size: 0.9375rem; font-weight: 600; color: var(--chalk); }
.jobcard__tx small {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  color: var(--chalk-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jobcard__n {
  flex: none;
  font-family: var(--f-mono);
  font-size: 0.625rem;
  color: var(--taupe-hi);
  border: 1px solid var(--rule-dk);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}
.jobcard__x {
  flex: none;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: #5c6570;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.jobcard__x:hover { color: #e07a6a; background: var(--void); }
.rx2__none { margin: 0; color: var(--chalk-dim); font-size: 0.9375rem; line-height: 1.7; }
.rx2__hint { margin: auto 0 0; font-size: 0.75rem; color: #5c6570; line-height: 1.6; padding-top: 8px; }

@media (max-width: 980px) {
  .rx2 { grid-template-columns: 1fr; }
  .rx2__map { min-height: 260px; }
}

/* ═══════ visualizador STL estilo exocadview (etapa Arquivos) ═════════════ */
.stlprev__cv { height: clamp(480px, 60vh, 720px); }   /* toolbar cabe sem rolar */
.xv { position: relative; }
.xv-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}
.xv-chrome { position: absolute; inset: 0; pointer-events: none; }
.xv-chrome button { pointer-events: auto; cursor: pointer; font-family: var(--f-sans); }
.xv-chrome input { pointer-events: auto; }

/* painel superior-esquerdo (FOV · ocultar · lista) — branco como no print */
.xv-left {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 228px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}
.xv-fov {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f4f3f7;
  color: #3b3668;
  border-radius: 3px;
  padding: 6px 9px;
  font-weight: 700;
  pointer-events: auto;
}
.xv-fov input { flex: 1; accent-color: #57508b; min-width: 0; }
.xv-fov b { min-width: 18px; text-align: right; }
.xv-hideall {
  background: #f4f3f7;
  color: #57508b;
  border: 0;
  border-radius: 3px;
  padding: 7px 9px;
  font-weight: 700;
  font-size: 12px;
  text-align: center;
}
.xv-hideall:hover { background: #fff; }
.xv-sec { display: flex; flex-direction: column; gap: 2px; }
.xv-sechead {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #f4f3f7;
  color: #57508b;
  border: 0;
  border-radius: 3px;
  padding: 7px 9px;
  font-weight: 700;
  font-size: 12px;
  text-align: left;
}
.xv-sechead svg { transition: transform 0.15s; }
.xv-sechead.closed svg { transform: rotate(-90deg); }
.xv-list { display: flex; flex-direction: column; gap: 2px; pointer-events: auto; }
.xv-list[hidden] { display: none; }   /* hidden perde pra display:flex sem isto */
.xv-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "bar bar bar" "name vis wire";
  gap: 3px 6px;
  background: #8a8794;
  border-radius: 3px;
  padding: 5px 7px 6px;
}
.xv-row.off { opacity: 0.55; }
.xv-bar { grid-area: bar; height: 10px; border-radius: 2px; }
.xv-name {
  grid-area: name;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  align-self: center;
}
.xv-vis, .xv-wire {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  background: #fff;
  color: #3b3668;
  border: 1px solid #55516b;
  border-radius: 3px;
  padding: 0;
}
.xv-wire { background: #dcdae6; color: #55516b; }
.xv-wire.on { background: #57508b; color: #fff; }
.xv-empty { color: rgba(255, 255, 255, 0.75); font-size: 11px; padding: 4px 2px; }

/* toolbar direita escura com botões circulares */
.xv-right {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 96px;
  background: rgba(8, 8, 10, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 0 8px;
  overflow-y: auto;           /* rede de segurança; o normal é caber inteira */
  scrollbar-width: none;
  pointer-events: auto;
}
.xv-right::-webkit-scrollbar { display: none; }
.xv-rb { flex: none; }
.xv-rb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  color: #fff;
}
.xv-rb svg {
  width: 36px;
  height: 36px;
  padding: 9px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
  transition: background 0.15s;
}
.xv-rb:hover svg { background: rgba(255, 255, 255, 0.16); }
.xv-rb span { font-size: 10px; font-weight: 600; line-height: 1.25; text-align: center; max-width: 84px; }
.xv-tools {
  position: absolute;          /* fly-out à ESQUERDA da toolbar, junto do gear */
  top: 88px;
  right: 106px;                /* ancorado no CHROME (a coluna rola/cortaria) */
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #17171c;
  border: 1px solid #34343e;
  border-radius: 6px;
  padding: 6px;
  width: 150px;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8);
}
.xv-tools[hidden] { display: none; }   /* hidden perde pra display:flex sem isto */
.xv-tools button {
  background: none;
  border: 0;
  color: #d6d4de;
  font-size: 11.5px;
  padding: 7px 8px;
  border-radius: 4px;
  text-align: left;
  white-space: nowrap;
}
.xv-tools button:hover { background: #26262e; color: #fff; }

/* vistas padrão: último item da coluna, empurrado pro rodapé */
.xv-std {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #fff;
  flex: none;
  pointer-events: auto;
}
.xv-std > span { font-size: 10px; font-weight: 700; text-align: center; }
.xv-stdgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 14px; }
.xv-stdgrid button {
  background: none;
  border: 0;
  color: #fff;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 4px;
}
.xv-stdgrid button:hover { background: rgba(255, 255, 255, 0.18); }
.xv-std i {
  font-style: normal;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8f8c9c;
}

/* tela cheia: o container do viewer (#stlCv) vira o exocadview inteiro */
.stlprev__cv:fullscreen { height: 100vh; border-radius: 0; }

@media (max-width: 700px) {
  .xv-left { width: 170px; }
  .xv-right { width: 74px; }
  .xv-rb span { font-size: 9px; }
  .xv-std { width: 74px; }
}

/* ═══════ painel de propriedades em SEÇÕES (respiro entre grupos) ═════════ */
.bench { grid-template-columns: auto minmax(0, 1fr) 324px; }  /* painel +24px */
.props__body:has(.psec) { gap: 0; }   /* só quando o conteúdo é seccionado */
.psec {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 16px 0 20px;
  border-bottom: 1px solid var(--rule-dk);
}
.psec:last-child { border-bottom: 0; }
.psec__t {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 0.5625rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe-hi);
  display: flex;
  align-items: center;
  gap: 10px;
}
.psec__t::after { content: ""; flex: 1; height: 1px; background: var(--rule-dk); }

/* ═══════ linhas de valor (Material/Cor): compactas, catálogo sob demanda ═ */
.vrow {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 1px solid var(--rule-dk);
  border-radius: 7px;
  background: var(--void);
  padding: 9px 12px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.vrow:hover { border-color: var(--chalk-dim); }
.vrow.open { border-color: var(--taupe); background: var(--slate-2); }
.vrow__l {
  font-family: var(--f-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chalk-dim);
  flex: none;
  width: 62px;
}
.vrow__v {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--chalk);
  font-size: 0.875rem;
}
.vrow__v b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vrow__v i { font-style: normal; color: #5c6570; }
.vrow__v .mat-ill { width: 34px; height: 24px; flex: none; }
.vrow__v .sh-ill { width: 17px; height: 23px; flex: none; }
.vrow__ch { flex: none; color: #5c6570; transition: transform 0.18s; }
.vrow.open .vrow__ch { transform: rotate(180deg); }
.pickbox {
  border: 1px solid var(--rule-dk);
  border-radius: 7px;
  background: var(--slate-2);
  padding: 10px;
  display: flex;
  flex-direction: column;
  margin-top: -6px;
}
.pickbox .mgrid { gap: 7px; }

/* ═══════ fundos do viewer: vinheta de estúdio (grafite ↔ creme AM) ═══════ */
.xv { background: radial-gradient(ellipse 72% 62% at 50% 42%, #20242b 0%, #121419 80%); }
.xv.xv--light { background: radial-gradient(ellipse 72% 62% at 50% 42%, #f8f4ec 0%, #e5ddce 82%); }
.xv--light .xv-fov,
.xv--light .xv-hideall,
.xv--light .xv-sechead {
  border: 1px solid #d8cfc0;
  box-shadow: 0 2px 10px rgba(60, 50, 40, 0.14);
}
.xv--light .xv-empty { color: #7a7466; }

/* ═══════════════════════════════════════════════════════════════════════════
   REPAGINAÇÃO DO VIEWER · linguagem da Landing Folha
   O viewer vira um "viewport de CAD sobre a folha": cartão escuro com barra
   de título, painel esquerdo em CARTÕES DE PAPEL marfim flutuantes, toolbar
   em CÁPSULA grafite (acabamento .bp--dark da landing), taupe como acento.
   ═══════════════════════════════════════════════════════════════════════ */
.stlprev {
  border: 1px solid #101216;
  border-radius: 14px;
  background: var(--void);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
              0 26px 50px -30px rgba(0, 0, 0, 0.55);
  overflow: visible;
}
.stlprev__cap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 10px;
}
.stlprev__cap i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2f343c;
}
.stlprev__cap span {
  margin-left: 6px;
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5c6570;
}
.stlprev__cv {
  margin: 0 10px;
  border-radius: 10px;
  overflow: hidden;
}
.stlprev__hud { border-top: 0; background: transparent; padding: 10px 16px 12px; }

/* ── painel esquerdo: cartões de PAPEL (tokens da folha) ── */
.xv-left { width: 236px; gap: 6px; }
.xv-fov,
.xv-hideall,
.xv-sechead {
  background: rgba(246, 244, 239, 0.96);
  color: #2e2e34;
  border: 1px solid #ddd8ce;
  border-radius: 12px;
  box-shadow: 0 14px 30px -22px rgba(0, 0, 0, 0.55);
  font-weight: 600;
}
.xv-fov { color: #2e2e34; padding: 8px 12px; }
.xv-fov input { accent-color: #6e5f4c; }
.xv-fov b { color: #6e5f4c; }
.xv-hideall { color: #6e5f4c; padding: 9px 12px; }
.xv-hideall:hover { background: #ffffff; }
.xv-sechead { color: #2e2e34; padding: 9px 12px; }
.xv-sechead svg { color: #6e5f4c; }
.xv-row {
  background: #ffffff;
  border: 1px solid #ddd8ce;
  border-radius: 10px;
  box-shadow: 0 10px 22px -18px rgba(0, 0, 0, 0.45);
  padding: 6px 8px 7px;
}
.xv-row.off { opacity: 0.6; }
.xv-bar { height: 9px; border-radius: 3px; }
.xv-name { color: #2e2e34; font-weight: 600; }
.xv-vis,
.xv-wire {
  background: #f1eee7;
  color: #2e2e34;
  border: 1px solid #cfc9bc;
  border-radius: 7px;
}
.xv-wire { color: #63636b; }
.xv-wire.on { background: #6e5f4c; color: #fff; border-color: #6e5f4c; }

/* ── toolbar direita: CÁPSULA grafite flutuante (bp--dark da landing) ── */
.xv-right {
  top: 12px;
  right: 12px;
  bottom: 12px;
  width: 78px;
  background: #26262b;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14),
              0 18px 40px -18px rgba(0, 0, 0, 0.6);
  padding: 20px 0 16px;
  gap: 13px;
}
.xv-rb { color: #f6f4ef; }
.xv-rb svg {
  border: 1.5px solid rgba(246, 244, 239, 0.85);
  transition: background 0.15s, transform 0.15s;
}
.xv-rb:hover svg { background: rgba(246, 244, 239, 0.16); transform: translateY(-1px); }
.xv-rb span { max-width: 68px; color: rgba(246, 244, 239, 0.92); }
.xv-std > span { color: rgba(246, 244, 239, 0.9); }
.xv-stdgrid { gap: 5px 12px; }
.xv-stdgrid button { color: #f6f4ef; border-radius: 6px; }
.xv-stdgrid button:hover { background: rgba(246, 244, 239, 0.18); }
.xv-std i { color: #8f8c82; white-space: nowrap; }

/* menu Ferramentas: cartão branco da folha */
.xv-tools {
  right: 102px;
  background: #ffffff;
  border: 1px solid #ddd8ce;
  border-radius: 12px;
  box-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.5);
  width: 168px;
  padding: 8px;
}
.xv-tools button { color: #2e2e34; font-size: 12px; border-radius: 8px; }
.xv-tools button:hover { background: #f1eee7; color: #2e2e34; }

/* ═══════════════════════════ Recall: chamar o paciente de volta ══════════ */
.rclist { display: flex; flex-direction: column; gap: 8px; }
.rcrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--rule-dk);
  border-left: 3px solid var(--taupe);
  border-radius: 8px;
  background: var(--slate);
}
.rcrow--aniversario { border-left-color: #5fd0c8; }
.rcrow__ava,
.rcrow .ava--txt {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #14161a;
  background: hsl(var(--ah, 30), 32%, 62%);
}
.rcrow__tx { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.rcrow__tx b { font-size: 0.875rem; font-weight: 500; }
.rcrow__tx .m { font-size: 0.75rem; color: var(--chalk-dim); line-height: 1.4; }
.rcrow__tx .c { font-family: var(--f-mono); font-size: 0.6875rem; color: var(--taupe-hi); }
.rcrow__acts { display: flex; align-items: center; gap: 8px; flex: none; }
.rcrow__acts .btn { padding: 8px 13px; font-size: 0.5625rem; }
.rcrow__nophone { font-size: 0.6875rem; color: #5c6570; }
.rcrow__done {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule-dk);
  border-radius: 50%;
  background: none;
  color: var(--chalk-dim);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.rcrow__done:hover { color: #14161a; background: var(--taupe); border-color: var(--taupe); }
@media (max-width: 640px) {
  .rcrow { flex-wrap: wrap; }
  .rcrow__acts { width: 100%; justify-content: flex-end; }
}

/* ═══════ toolbar em modo COMPACTO (opts.compact do stl-preview.js) ═══════
   cápsula abraça só Fechar+Ferramentas+Mais; .xv-extra expande no clique */
.xv-right--compact { bottom: auto; max-height: calc(100% - 24px); }
.xv-extra { display: flex; flex-direction: column; align-items: center;
            gap: 13px; width: 100%; }
.xv-extra[hidden] { display: none; }   /* hidden perde pra display:flex */
.xv-more svg { transition: transform 0.18s; }
.xv-more.open svg { transform: rotate(180deg); }

/* compacto EXPANDIDO precisa caber inteiro na cápsula (nada de corte):
   gaps e ícones levemente menores só neste modo */
.xv-right--compact { padding: 14px 0 14px; gap: 9px; }
.xv-right--compact .xv-extra { gap: 9px; }
.xv-right--compact .xv-rb svg { width: 31px; height: 31px; padding: 7px; }
.xv-right--compact .xv-rb span { font-size: 9px; }
.xv-right--compact .xv-std { gap: 5px; }
.xv-right--compact .xv-stdgrid { gap: 3px 10px; }

/* cartão "Controles" ▾ do painel esquerdo em modo compacto (mesmo padrão
   do "Mais": recolhido por padrão, seta gira ao abrir) */
.xv-lmore { display: flex; align-items: center; gap: 8px; align-self: flex-start;
  pointer-events: auto; cursor: pointer; font-family: inherit; font-size: inherit;
  font-weight: 600; background: rgba(246, 244, 239, 0.96); color: #2e2e34;
  border: 1px solid #ddd8ce; border-radius: 12px; padding: 8px 12px;
  box-shadow: 0 14px 30px -22px rgba(0, 0, 0, 0.55); }
.xv-lmore:hover { background: #ffffff; }
.xv-lmore svg { color: #6e5f4c; transition: transform 0.18s; }
.xv-lmore.open svg { transform: rotate(180deg); }
.xv-lextra { display: flex; flex-direction: column; gap: 6px; }
.xv-lextra[hidden] { display: none; }   /* hidden perde pra display:flex */