/*
 * assets/css/pdvl.css — Folha de estilo da Visualização Aprimorada (PDVL). (P2.4 · item #1 do roadmap)
 * ------------------------------------------------------------------------------------------------
 * Traz para o Pulse o layout que já existia isolado no harness do módulo odontograma.
 * ISOLAMENTO: todos os tokens e regras ficam sob o namespace `.pdvl-*` — os tokens de cor
 * (`--ph-*`, `--pdvl-line`, `--pdvl-accent`) são declarados NO CONTAINER (`.pdvl-odontograma`),
 * não em `:root`, para NÃO colidir com `assets/css/styles.css`. Nenhuma regra global.
 * Placeholders continuam sendo fallback: se a arte externa (manifest) chegar, o <img> assume.
 */

.pdvl-odontograma {
  /* paleta técnica dos placeholders (escopada — cascateia para os SVGs internos) */
  --ph-bone: #e9e2d0; --ph-gingiva: #e8a7a1; --ph-tooth: #f5f3ec; --ph-enamel: #ffffff;
  --ph-implant: #9aa6b2; --ph-metal: #b8c0c8; --ph-ceramic: #f2f0ea; --ph-resin: #efe7d6;
  --ph-porcelain: #f6f4ef; --ph-root: #e6d9c3; --ph-socket: #d9b8a6; --ph-aligner: #bfe3f2;
  --ph-marker: #e0564f; --ph-stroke: #8a93a5;
  --pdvl-line: #e6e8ee; --pdvl-accent: #0e8f86;

  display: flex; flex-direction: column; gap: 26px;
  background: #fff; border: 1px solid var(--pdvl-line); border-radius: 14px; padding: 18px;
}

.pdvl-arch-label { font-size: 12px; color: #6b7280; margin: 0 0 6px; }
.pdvl-arch { position: relative; overflow-x: auto; padding: 4px 0 8px; }
.pdvl-arch-inner { position: relative; display: flex; gap: 6px; flex-wrap: nowrap; width: max-content; }
/* fundo de gengiva: cobre a altura do stack (92px), atrás dos dentes, rola junto */
.pdvl-arch-gum { position: absolute; left: 0; top: 0; width: 100%; height: 92px; object-fit: fill; z-index: 0; pointer-events: none; user-select: none; }
/* aparelho de arcada (alinhador/brackets/Hawley): À FRENTE dos dentes, cobre a fileira */
.pdvl-arch-appliance { position: absolute; left: 0; top: 0; width: 100%; height: 92px; z-index: 5; pointer-events: none; }
.pdvl-arch-appliance-layer { position: absolute; left: 0; top: 0; width: 100%; height: 92px; object-fit: fill; }
.pdvl-arch-wrap[data-arch="UPPER"] .pdvl-arch-appliance-layer { transform: scaleY(-1); }

/* dente: slot 46×92 SEM recorte (o container não corta as camadas) */
.pdvl-tooth {
  position: relative; z-index: 1; flex: 0 0 46px; width: 46px;
  background: none; border: 1px solid transparent; border-radius: 8px; padding: 0;
  cursor: pointer; overflow: visible;
}
.pdvl-tooth.has-procedures { border-color: #cdd4e4; }
.pdvl-tooth:hover { background: #f0f3fb; }
.pdvl-tooth-stack { position: relative; display: block; width: 46px; height: 92px; overflow: visible; }
.pdvl-tooth-stack .pdvl-layer { position: absolute; left: 0; top: 0; width: 46px; height: 92px; }
.pdvl-tooth-stack .pdvl-layer > svg,
.pdvl-tooth-stack svg.pdvl-layer { width: 100%; height: 100%; }
/* Arcada superior espelhada (coroa p/ baixo): flip só das camadas de imagem;
   o número (.pdvl-tooth-num) e o status (.pdvl-status) ficam de pé. */
.pdvl-arch-wrap[data-arch="UPPER"] .pdvl-tooth-stack .pdvl-layer { transform: scaleY(-1); }
.pdvl-tooth-num { display: block; text-align: center; font-size: 10px; color: #6b7280; margin-top: 2px; }

.pdvl-status {
  position: absolute; right: 1px; top: 1px; z-index: 99;
  display: flex; align-items: center; gap: 3px;
  background: #fff; border: 1px solid var(--pdvl-line); border-radius: 8px; padding: 0 3px;
}
.pdvl-status-glyph { font-size: 11px; color: var(--pdvl-accent); }
.pdvl-status-label { font-size: 8px; color: #6b7280; }

/* arcada: geometria própria (ARCH_SLOT 320×96) */
.pdvl-arch-overlay { position: relative; width: 320px; height: 96px; margin-top: 8px; border-top: 1px dashed var(--pdvl-line); }
.pdvl-arch-overlay .pdvl-layer > svg,
.pdvl-arch-overlay svg.pdvl-layer { width: 100%; height: 100%; }