/* AURORA — Visor 3D de máquinas (static/js/modelo3d.js)
   Es un PLANO: fondo azul de cianotipo en los dos temas a propósito, igual que
   un plano impreso no cambia de color con la luz de la sala. Por eso sus colores
   son propios y no los tokens del tema. */
.m3d{
  --m3d-bg:#0d3b73; --m3d-bg2:#0a3163; --m3d-ink:#e9f2ff; --m3d-line:rgba(220,236,255,.55);
  --m3d-faint:rgba(220,236,255,.18); --m3d-muted:#a9c8ec; --m3d-hi:#ffe27a;
  --m3d-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  position:fixed; inset:0; z-index:9000; background:var(--m3d-bg); color:var(--m3d-ink);
  font-family:var(--m3d-mono); font-size:13px; color-scheme:dark;
}
.m3d-app{display:grid; grid-template-columns:1fr 390px; height:100%; padding:16px; gap:16px; box-sizing:border-box}
.m3d-sheet{position:relative; min-height:0; border:1.5px solid var(--m3d-line); outline:1px solid var(--m3d-faint); outline-offset:5px; overflow:hidden}
.m3d-c{display:block; width:100%; height:100%; cursor:grab; outline:none}
.m3d-c.hover{cursor:pointer}
.m3d-tags{position:absolute; inset:0; pointer-events:none}
.m3d-balloon{position:absolute; width:24px; height:24px; margin:-12px 0 0 -12px; border:1.2px solid var(--m3d-ink); border-radius:50%;
  display:grid; place-items:center; font-size:11px; font-weight:600; background:var(--m3d-bg); color:var(--m3d-ink);
  pointer-events:auto; cursor:pointer; padding:0; font-family:var(--m3d-mono); font-variant-numeric:tabular-nums}
.m3d-balloon.on{background:var(--m3d-hi); color:#1b2a3d; border-color:var(--m3d-hi)}
/* Etiqueta del despiece completo: referencia, nombre y un dato técnico. Se
   ancla por su pico inferior sobre la parte de arriba de la pieza. */
/* Sin esto, el display:grid de globos y etiquetas anula el atributo hidden. */
.m3d [hidden]{display:none !important}
/* La coloca modelo3d.js (colocarEtiquetas) por su esquina superior izquierda. */
.m3d-guias{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none}
.m3d-guias line{stroke:var(--m3d-line); stroke-width:1}
.m3d-guias circle{fill:var(--m3d-ink)}
.m3d-guias .on{stroke:var(--m3d-hi); fill:var(--m3d-hi)}
.m3d .m3d-label{position:absolute; pointer-events:auto; display:grid; grid-template-columns:auto 1fr;
  column-gap:6px; row-gap:1px; align-items:baseline; max-width:170px; padding:3px 6px; text-align:left; text-transform:none; letter-spacing:0;
  font-size:10.5px; line-height:1.25; background:rgba(10,49,99,.9); border:1px solid var(--m3d-line); white-space:normal}
.m3d .m3d-label .r{color:var(--m3d-hi); font-weight:600; font-variant-numeric:tabular-nums}
.m3d .m3d-label .t{font-weight:500}
.m3d .m3d-label .d{grid-column:2; color:var(--m3d-muted); font-size:9.5px}
.m3d .m3d-label:hover, .m3d .m3d-label.on{border-color:var(--m3d-hi); z-index:2}
.m3d .m3d-label.on .t{color:var(--m3d-hi)}
.m3d-head{position:absolute; left:14px; top:12px; pointer-events:none; width:max-content; max-width:calc(100% - 28px)}
.m3d-head h1{font-family:"DM Sans",system-ui,sans-serif; font-weight:500; font-size:24px; letter-spacing:.08em; margin:0; line-height:1.1; text-transform:uppercase}
.m3d-head p{margin:5px 0 0; color:var(--m3d-muted); font-size:11px; letter-spacing:.05em}
.m3d-titleblock{position:absolute; right:0; bottom:0; display:grid; grid-template-columns:auto auto auto;
  border-top:1.2px solid var(--m3d-line); border-left:1.2px solid var(--m3d-line); font-size:10px; background:var(--m3d-bg2); pointer-events:none}
.m3d-titleblock div{padding:5px 10px; border-right:1px solid var(--m3d-faint); border-bottom:1px solid var(--m3d-faint)}
.m3d-titleblock span{display:block; color:var(--m3d-muted); font-size:9px; letter-spacing:.1em; text-transform:uppercase}
.m3d-controls{position:absolute; left:14px; bottom:12px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; max-width:min(560px,calc(100% - 28px))}
.m3d-controls label{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--m3d-muted); display:flex; gap:8px; align-items:center}
.m3d-explode{width:170px; accent-color:var(--m3d-hi)}
.m3d-pct{width:38px; font-variant-numeric:tabular-nums}
.m3d button{font-family:var(--m3d-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; background:var(--m3d-bg);
  color:var(--m3d-ink); border:1px solid var(--m3d-line); padding:6px 10px; cursor:pointer; border-radius:0}
.m3d button:hover{border-color:var(--m3d-ink)}
.m3d button:focus-visible, .m3d-explode:focus-visible{outline:2px solid var(--m3d-hi); outline-offset:2px}
.m3d button[aria-pressed="true"]{background:var(--m3d-ink); color:var(--m3d-bg)}
.m3d aside{position:relative; border:1.5px solid var(--m3d-line); display:flex; flex-direction:column; min-height:0; background:var(--m3d-bg2)}
.m3d .m3d-cerrar{position:absolute; top:8px; right:8px; padding:4px 7px; font-size:16px; line-height:1; z-index:1}
.m3d-info{padding:18px 18px 16px; border-bottom:1.2px solid var(--m3d-line); overflow:auto; max-height:62%}
.m3d-tag{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--m3d-hi); padding-right:36px}
.m3d-info h2{font-family:"DM Sans",system-ui,sans-serif; font-size:24px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; margin:4px 0 10px; line-height:1.1; text-wrap:balance}
.m3d-info p{margin:0 0 10px; line-height:1.6; font-size:12.5px; max-width:65ch}
.m3d-info table{width:100%; border-collapse:collapse; margin-top:10px; font-size:11.5px}
.m3d-info td{border:1px solid var(--m3d-faint); padding:5px 8px; vertical-align:top; font-variant-numeric:tabular-nums}
.m3d-info td:first-child{color:var(--m3d-muted); text-transform:uppercase; font-size:10px; letter-spacing:.06em; width:44%}
.m3d-sub{margin-top:12px; font-size:11.5px; line-height:1.55}
.m3d-sub b{color:var(--m3d-hi); font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:10px; display:block; margin-bottom:3px}
.m3d-sub ul{margin:0; padding-left:16px}
.m3d-pags{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.m3d .m3d-pag{text-transform:none; letter-spacing:0; font-size:11.5px; padding:4px 9px; border-color:var(--m3d-hi); color:var(--m3d-hi)}
.m3d .m3d-pag:hover{background:var(--m3d-hi); color:#1b2a3d}
.m3d-list{overflow:auto; padding:8px 10px 14px; flex:1; min-height:0}
.m3d-list h3{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--m3d-muted); margin:6px 8px; font-weight:500}
.m3d .m3d-part{display:flex; gap:10px; width:100%; text-align:left; border:0; border-bottom:1px dashed var(--m3d-faint); background:transparent;
  padding:7px 8px; text-transform:none; font-size:12px; letter-spacing:0}
.m3d .m3d-part:hover{background:rgba(255,255,255,.05)}
.m3d .m3d-part.active{color:var(--m3d-hi)}
.m3d-part .n{width:22px; color:var(--m3d-muted); font-variant-numeric:tabular-nums}
.m3d-part.active .n{color:var(--m3d-hi)}
.m3d-flow{font-size:10.5px; color:var(--m3d-muted); margin:12px 8px 0; line-height:1.7}
.m3d-aviso{border-left:2px solid var(--m3d-hi); padding-left:8px}
@media (max-width:860px){
  .m3d{overflow:auto}
  .m3d-app{grid-template-columns:1fr; grid-template-rows:64vh auto; height:auto; padding:10px 16px}
  .m3d-titleblock{display:none}
  .m3d-head h1{font-size:18px}
  .m3d-info{max-height:none}
  .m3d-list{overflow:visible}
}

/* Chip «3D» en la ficha de la biblioteca de Manuales */
.man-card-3d{display:inline-flex; align-items:center; gap:3px}
