/* Ankin Cloud · escenas 3D (contenedor + capas superpuestas) */
.scene3d{
  position:relative;display:block;width:100%;height:420px;overflow:hidden;
  border:1px solid #3a3a3a;border-radius:16px;background:#0a0a0a;color:#f5f5f5;
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  isolation:isolate;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
}
@media (max-width:640px){.scene3d{height:320px}}
.scene3d .s3d-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:pan-y;cursor:grab;outline:none}
.scene3d .s3d-canvas.is-hover{cursor:pointer}
.scene3d .s3d-canvas.is-drag{cursor:grabbing}

/* etiquetas proyectadas */
.s3d-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.s3d-lbl{position:absolute;left:0;top:0;white-space:nowrap;font-size:10px;line-height:1;letter-spacing:.04em;
  padding:4px 7px;border-radius:6px;color:#bdbdbd;background:rgba(10,10,10,.78);border:1px solid #2c2c2c;will-change:transform,opacity}
.s3d-lbl.is-off{display:none}
.s3d-lbl--key{color:#f5f5f5;border-color:#3a3a3a;font-size:10.5px}
.s3d-lbl--zone{color:#f5f5f5;background:rgba(10,10,10,.55);border-color:transparent;text-transform:uppercase;letter-spacing:.14em;font-size:9.5px}
.s3d-lbl--bad{color:#0a0a0a;background:#ff6b6b;border-color:#ff6b6b;font-weight:700}
.s3d-lbl--ok{color:#0a0a0a;background:#3ddc84;border-color:#3ddc84;font-weight:700}
.s3d-lbl--warn{color:#0a0a0a;background:#ffbe5a;border-color:#ffbe5a;font-weight:700}
.s3d-lbl--data{color:#0a0a0a;background:#5ad1ff;border-color:#5ad1ff;font-weight:700}

/* barra superior */
.s3d-top{position:absolute;top:12px;left:14px;right:14px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;pointer-events:none;z-index:2}
.s3d-title{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8f8f8f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.s3d-legend{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 12px;font-size:10px;color:#9a9a9a;max-width:62%}
.s3d-legend__item{display:inline-flex;align-items:center;white-space:nowrap}
.s3d-dot{width:7px;height:7px;border-radius:50%;margin-right:6px;flex:0 0 auto}
.s3d-dot--ok{background:#3ddc84}.s3d-dot--bad{background:#ff6b6b}.s3d-dot--warn{background:#ffbe5a}.s3d-dot--data{background:#5ad1ff}
.s3d-hud{position:absolute;right:14px;bottom:60px;z-index:3;max-width:46%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;color:#f5f5f5;padding:5px 9px;border:1px solid #2c2c2c;border-radius:8px;background:rgba(10,10,10,.72);pointer-events:none;transition:opacity .3s}
.s3d-hud.is-off{opacity:0}

/* pie: leyenda del paso + botones */
.s3d-bottom{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:34px 14px 12px;pointer-events:none;
  background:linear-gradient(to top,rgba(10,10,10,.94) 45%,rgba(10,10,10,0))}
.s3d-caption{margin:0 0 10px;font-size:12px;line-height:1.5;color:#e6e6e6;max-width:min(72ch,56%);min-height:1.5em}
.scene3d--compact .s3d-caption{max-width:none}
.s3d-caption.is-in{animation:s3dIn .5s cubic-bezier(.2,.8,.2,1)}
@keyframes s3dIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.s3d-steps{display:flex;gap:6px;flex-wrap:wrap;pointer-events:auto}
.s3d-step{position:relative;overflow:hidden;font:inherit;font-size:11px;letter-spacing:.02em;color:#a8a8a8;background:rgba(18,18,18,.9);
  border:1px solid #3a3a3a;border-radius:999px;padding:7px 13px;min-height:32px;cursor:pointer;transition:color .2s,background .2s,border-color .2s}
.s3d-step:hover{color:#f5f5f5;border-color:#5a5a5a}
.s3d-step[aria-pressed="true"]{color:#0a0a0a;background:#f5f5f5;border-color:#f5f5f5}
.s3d-step:focus-visible{outline:2px solid #5ad1ff;outline-offset:2px}
.s3d-step__prog{position:absolute;left:0;bottom:0;height:2px;width:100%;background:#3ddc84;transform-origin:left center;transform:scaleX(0)}
.scene3d--manual .s3d-step__prog{display:none}

/* tooltip y pista */
.s3d-tip{position:absolute;left:0;top:0;z-index:3;pointer-events:none;font-size:11px;color:#f5f5f5;background:#111;border:1px solid #3a3a3a;
  border-radius:8px;padding:5px 9px;white-space:nowrap;opacity:0;transition:opacity .15s}
.s3d-tip.is-on{opacity:1}
.s3d-hint{position:absolute;right:14px;bottom:20px;z-index:2;font-size:10px;color:#6f6f6f;pointer-events:none;transition:opacity .4s}
.scene3d--touched .s3d-hint{opacity:0}

/* móvil / contenedor angosto */
.scene3d--compact .s3d-legend{display:none}
.scene3d--compact .s3d-lbl--name{display:none}
.scene3d--compact .s3d-lbl{font-size:9px;padding:3px 6px}
.scene3d--compact .s3d-caption{font-size:11px;margin-bottom:8px}
.scene3d--compact .s3d-steps{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.scene3d--compact .s3d-steps::-webkit-scrollbar{display:none}
.scene3d--compact .s3d-step{flex:0 0 auto;font-size:10.5px;padding:6px 11px}
.scene3d--compact .s3d-hint{display:none}
.scene3d--compact .s3d-hud{font-size:10px;top:34px;left:14px;right:auto;bottom:auto;max-width:calc(100% - 28px)}

/* sin WebGL */
.scene3d--fallback{height:auto;min-height:220px}
.s3d-fallback{padding:24px;display:flex;flex-direction:column;gap:10px;justify-content:center;min-height:220px}
.s3d-fallback__title{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8f8f8f}
.s3d-fallback__msg{margin:0;font-size:13px;color:#e6e6e6}
.s3d-fallback__list{margin:0;padding-left:20px;font-size:12px;line-height:1.6;color:#bdbdbd}

@media (prefers-reduced-motion:reduce){
  .s3d-caption.is-in{animation:none}
  .s3d-step,.s3d-tip,.s3d-hud,.s3d-hint{transition:none}
}