/* Vantastic Dent — Odontograma 3D. Prefijo vd3-. Usa las variables y clases base de vantastic-dent.css (.vd-page, .vd-btn, .vd-badge…). Estilo "Cobalt Elegante". */
.vd3 .vd-head{align-items:center}
.vd3-seg{display:inline-flex;background:#fff;border:1px solid var(--vd-border);border-radius:8px;padding:2px;gap:2px;flex-wrap:wrap}
.vd3-seg button{border:none;background:transparent;color:var(--vd-ink-soft);font-size:12px;font-weight:600;padding:5px 10px;border-radius:6px;cursor:pointer;height:27px}
.vd3-seg button.on{background:var(--em-cobalt);color:#fff}
.vd3-main{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:14px;align-items:start}
@media (max-width:1100px){.vd3-main{grid-template-columns:minmax(0,1fr)}}
.vd3-stage{background:#fff;border:1px solid var(--vd-border);border-radius:14px;overflow:hidden;min-width:0}
.vd3-gl{position:relative;height:min(64vh,580px);min-height:380px;background:radial-gradient(120% 100% at 50% 20%,#f7f9fd,#d9e3f5)}
.vd3-pres .vd3-gl{height:min(80vh,740px)}
.vd3-gl canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.vd3-gl canvas:active{cursor:grabbing}
.vd3-tools{position:absolute;left:12px;top:12px;display:flex;flex-direction:column;gap:8px;z-index:3;max-width:calc(100% - 24px)}
.vd3-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.vd3 .vd-btn-icon.vd3-on{box-shadow:inset 0 0 0 2px rgba(255,255,255,.7);filter:brightness(.85)}
.vd3-hint{position:absolute;right:12px;top:12px;font-size:11.5px;color:var(--vd-ink-soft);background:#fff;border:1px solid var(--vd-border);border-radius:8px;padding:5px 9px;z-index:2;max-width:42%}
.vd3-leyenda{position:absolute;right:12px;bottom:10px;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;font-size:11.5px;color:var(--vd-ink-soft);background:#fff;border:1px solid var(--vd-border);border-radius:8px;padding:5px 9px;z-index:2}
.vd3-leyenda i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.vd3-leyenda i.ring{background:transparent;border:2px solid #2d6ae0;width:11px;height:11px;box-sizing:border-box}
.vd3-banner{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:4;background:var(--em-cobalt-deep);color:#fff;border-radius:8px;padding:6px 8px 6px 12px;font-size:12.5px;display:flex;gap:10px;align-items:center;max-width:calc(100% - 24px)}
.vd3-banner button{border:none;background:#fff;color:var(--em-cobalt-deep);font-size:12px;font-weight:600;border-radius:6px;padding:4px 10px;cursor:pointer}
.vd3-strip{padding:10px 12px 12px;border-top:1px solid var(--vd-border);overflow-x:auto}
.vd3-strip-lbl{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--vd-ink-soft);margin-bottom:6px}
.vd3-arc{display:flex;gap:3px;margin-bottom:4px;min-width:640px}
.vd3-cell{flex:1;min-width:0;height:36px;border-radius:5px;border:1px solid var(--vd-border);background:var(--em-cobalt-subtle);color:var(--vd-ink);font-size:11px;font-weight:700;cursor:pointer;position:relative;padding:0;display:flex;align-items:center;justify-content:center}
.vd3-cell.mid{margin-left:8px}
.vd3-cell.sel{outline:2px solid var(--em-cobalt);background:var(--em-cobalt-pale)}
.vd3-cell.aus{opacity:.55;border-style:dashed}
.vd3-cell .d,.vd3-cell .d2{position:absolute;top:3px;width:7px;height:7px;border-radius:50%}
.vd3-cell .d{right:3px}.vd3-cell .d2{left:3px}
.vd3-panel{background:#fff;border:1px solid var(--vd-border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;max-height:calc(min(64vh,580px) + 130px);min-height:460px}
@media (max-width:1100px){.vd3-panel{max-height:none}}
.vd3-tabs{display:flex;border-bottom:1px solid var(--vd-border);background:var(--em-cobalt-subtle)}
.vd3-tabs button{flex:1;border:none;background:transparent;padding:11px 6px;font-size:12.5px;font-weight:600;color:var(--vd-ink-soft);cursor:pointer;border-bottom:3px solid transparent}
.vd3-tabs button.active{color:var(--em-cobalt);border-bottom-color:var(--em-cobalt);background:#fff}
.vd3-pbody{padding:14px 16px 18px;overflow-y:auto;flex:1;min-height:0}
.vd3-pbody h2{font-size:16px;font-weight:700;margin:0 0 3px;color:var(--vd-ink)}
.vd3-sub{color:var(--vd-ink-soft);font-size:12.5px;margin-bottom:12px}
.vd3-sub select{width:100%;border:1px solid var(--vd-border);border-radius:5px;padding:7px 9px;font-size:13px}
.vd3-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.vd3-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 14px}
.vd3-kpi{border:1px solid var(--vd-border);border-radius:8px;padding:8px 10px;background:var(--em-cobalt-subtle)}
.vd3-kpi b{display:block;font-size:17px;font-variant-numeric:tabular-nums}
.vd3-kpi span{font-size:11.5px;color:var(--vd-ink-soft)}
.vd3-tl{position:relative;padding-left:20px;display:flex;flex-direction:column;gap:10px}
.vd3-tl::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--vd-border)}
.vd3-ev{position:relative;text-align:left;border:1px solid var(--vd-border);background:#fff;color:var(--vd-ink);border-radius:8px;padding:9px 11px;cursor:pointer;font:inherit;width:100%}
.vd3-ev::before{content:"";position:absolute;left:-19px;top:13px;width:10px;height:10px;border-radius:50%;background:#9aa4b2;box-shadow:0 0 0 3px #fff}
.vd3-ev.cR::before{background:#dc2626}.vd3-ev.cA::before{background:#1a56db}
.vd3-ev.on{border-color:var(--em-cobalt);background:var(--em-cobalt-subtle)}
.vd3-ev .dt{font-size:11.5px;color:var(--vd-ink-soft)}
.vd3-ev .t{font-size:13px;font-weight:600}
.vd3-ev .dd{font-size:12.5px;margin-top:3px}
.vd3-ev .go{font-size:11px;color:var(--em-cobalt);font-weight:600;margin-top:4px}
.vd3-pl{border:1px solid var(--vd-border);border-radius:10px;padding:11px 12px;margin-bottom:9px;background:#fff}
.vd3-pl.sel{border-color:var(--em-cobalt)}
.vd3-pl .h{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.vd3-pl .h b{font-size:13.5px}
.vd3-pl .pz{font-size:12px;font-weight:700;color:var(--em-cobalt);white-space:nowrap}
.vd3-pl .m{font-size:12px;color:var(--vd-ink-soft);margin-top:3px;font-variant-numeric:tabular-nums}
.vd3-pl .acts,.vd3-pbody .acts{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.vd3-xp{border-left:3px solid var(--em-cobalt);background:var(--em-cobalt-subtle);border-radius:0 8px 8px 0;padding:8px 11px;margin:8px 0}
.vd3-xp small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--em-cobalt);margin-bottom:2px}
.vd3-xp p{margin:0;font-size:13.5px;line-height:1.45}
.vd3-empty{border:1px dashed var(--vd-border);border-radius:10px;padding:16px;color:var(--vd-ink-soft);text-align:center;font-size:13px}
.vd3-present{position:absolute;left:12px;right:12px;bottom:12px;z-index:5;background:#fff;border:1px solid var(--vd-border);border-radius:14px;box-shadow:0 8px 30px rgba(15,52,148,.25);padding:14px 16px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:6px 20px}
@media (max-width:760px){.vd3-present{grid-template-columns:minmax(0,1fr);max-height:58%;overflow-y:auto}}
.vd3-present h3{font-size:19px;font-weight:700;margin:0 0 4px;color:var(--vd-ink)}
.vd3-present .vd3-xp p{font-size:14.5px}
.vd3-nav{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;border-top:1px solid var(--vd-border);padding-top:10px;margin-top:4px}
.vd3-dots{display:flex;gap:5px}.vd3-dots i{width:8px;height:8px;border-radius:50%;background:var(--vd-border)}.vd3-dots i.on{background:var(--em-cobalt)}
.vd3-line{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px solid var(--vd-border);font-size:13px;font-variant-numeric:tabular-nums}
.vd3-big{font-size:22px;font-weight:700;color:var(--em-cobalt);font-variant-numeric:tabular-nums}
.vd3-ev .pr{font-size:11.5px;color:var(--vd-ink-soft);margin-top:3px}