/* Proto&Go! — análisis DFM de mecanizado (22-09-2026): página /analisis-dfm-mecanizado/
   y el mismo bloque dentro del visor STEP, que carga esta hoja al pulsar su botón.
   Tokens de pg.css. Todo lleva el prefijo dfm-: pg.css, visor.css y guia.css ya usan
   .pin, .seg, .val, .num, .sep, .fam y .link para otras cosas. */
.dfm,.dfm-bajo,.dfm-limites{--rojo:#d83a2e;--rojo-soft:#fdecea;--rojo-deep:#a8261d;--aviso:#5f6f82;--aviso-soft:#eef1f4}

/* ---------- el analizador: escena y panel ---------- */
/* --alto: la pantalla menos la cabecera fija (76 px) y un margen. El panel tiene scroll propio
   y retiene la rueda: si el bloque fuera más alto que la pantalla, su final no se alcanzaría */
.dfm{--alto:clamp(480px,calc(100vh - 96px),800px);position:relative;display:grid;grid-template-columns:minmax(0,1fr) 380px;border-radius:var(--r);background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 40px 80px -50px rgba(30,32,35,.45);overflow:hidden}
.dfm [hidden],.dfm-textos{display:none!important}
.dfm-escena{position:relative;min-height:var(--alto);overflow:hidden;isolation:isolate;background:radial-gradient(120% 95% at 50% 40%,#fff 0%,#f3f3f0 52%,#e6e6e1 100%)}
.dfm-escena::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(30,32,35,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(30,32,35,.07) 1px,transparent 1px);background-size:32px 32px;background-position:center;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 46%,#000 35%,transparent 80%);mask-image:radial-gradient(ellipse 70% 70% at 50% 46%,#000 35%,transparent 80%)}
.dfm-lienzo{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;opacity:0;transition:opacity .6s var(--ease);touch-action:none;cursor:grab}
.dfm-lienzo:active{cursor:grabbing}
.dfm[data-estado="listo"] .dfm-lienzo{opacity:1}

/* chinchetas numeradas sobre la pieza (la posición la pone el script con transform) */
.dfm-pines{position:absolute;inset:0;z-index:3;pointer-events:none}
.dfm-pin{position:absolute;left:0;top:0;display:grid;place-items:center;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--orange);color:#fff;font:700 .72rem/1 var(--mono);box-shadow:0 0 0 2px #fff,0 6px 14px -6px rgba(30,32,35,.6);pointer-events:auto;transition:opacity .25s,scale .25s var(--ease);will-change:transform}
.dfm-pin.rojo{background:var(--rojo)}
.dfm-pin.aviso{background:var(--aviso)}
.dfm-pin.oculto{opacity:.3}
.dfm-pin.apagado{opacity:.2;scale:.8}
.dfm-pin.activo{z-index:2;width:32px;height:32px;margin:-16px 0 0 -16px;font-size:.8rem;box-shadow:0 0 0 3px #fff,0 0 0 7px rgba(240,138,2,.28),0 10px 20px -8px rgba(30,32,35,.6)}
.dfm-pin.rojo.activo{box-shadow:0 0 0 3px #fff,0 0 0 7px rgba(216,58,46,.26),0 10px 20px -8px rgba(30,32,35,.6)}
.dfm-pin.aviso.activo{box-shadow:0 0 0 3px #fff,0 0 0 7px rgba(95,111,130,.26),0 10px 20px -8px rgba(30,32,35,.6)}
.dfm-etq{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);width:max-content;max-width:260px;padding:7px 10px;border-radius:6px;background:var(--ink);color:var(--paper);font:500 .78rem/1.3 var(--body);text-align:left;opacity:0;pointer-events:none;transition:opacity .2s}
.dfm-pin.rotulo .dfm-etq,.dfm-pin:hover .dfm-etq,.dfm-pin:focus-visible .dfm-etq{opacity:1}
.dfm-etq b{display:block;font-weight:600}
/* la chincheta se aparta del punto que marca, con una línea hasta él; se arrastra, y su rótulo también */
.dfm-pin{touch-action:none;cursor:grab}
.dfm-pin.arrastrando,.dfm-pin .dfm-etq.arrastrando{cursor:grabbing}
.dfm-pin.rotulo .dfm-etq{pointer-events:auto;cursor:grab;touch-action:none}
.dfm-guias{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.dfm-guias g{color:var(--orange);transition:opacity .25s}
.dfm-guias g.rojo{color:var(--rojo)}
.dfm-guias g.aviso{color:var(--aviso)}
.dfm-guias line{stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.dfm-guias circle{fill:#fff;stroke:currentColor;stroke-width:2}
.dfm-guias g.activo line{stroke-width:2}
.dfm-guias g.oculto{opacity:.3}
.dfm-guias g.apagado{opacity:.2}
.dfm-etq span{color:var(--paper-on-ink);font-family:var(--mono);font-size:.66rem;letter-spacing:.04em}

/* tarjeta para soltar o elegir (sin pieza) */
.dfm-soltar{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);width:min(460px,calc(100% - 32px));padding:26px 26px 22px;border-radius:10px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px var(--line),0 24px 48px -30px rgba(30,32,35,.45);transition:opacity .3s,transform .4s var(--ease)}
.dfm-soltar h2{font-size:1.55rem;font-variation-settings:'wdth' 108;letter-spacing:-.03em;line-height:1.08}
.dfm-soltar p{margin-top:8px;font-size:.92rem;line-height:1.45;color:var(--ink-2)}
.dfm-fmts{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.dfm-fmts span{padding:4px 7px;border-radius:3px;background:var(--paper-2);font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:var(--ink)}
.dfm-botones{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:18px}
.dfm-botones .link{font-size:.9rem}
.dfm-soltar .dfm-error{margin-top:14px;padding:10px 12px;border-radius:5px;background:var(--rojo-soft);color:#8a1c1c;font-size:.86rem}
.dfm[data-estado="listo"] .dfm-soltar,.dfm[data-estado="cargando"] .dfm-soltar{opacity:0;transform:translate(-50%,-46%);pointer-events:none}

/* barra sobre la escena, con la pieza abierta */
.dfm-herr{position:absolute;z-index:5;top:14px;left:14px;right:14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;pointer-events:none;opacity:0;transition:opacity .3s}
.dfm[data-estado="listo"] .dfm-herr{opacity:1}
.dfm[data-estado="listo"] .dfm-herr>*{pointer-events:auto}
.dfm-sep{flex:1}
.dfm-herr .btn{padding:9px 14px;font-size:.84rem}
.dfm-herr .btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dfm-herr .btn.ghost{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.dfm-herr .btn.ghost:hover{background:#fff}
.dfm-herr .btn.ghost[aria-pressed="true"]{background:var(--ink);color:var(--paper);box-shadow:none}
.dfm-herr .btn.ghost[aria-pressed="true"] svg{color:var(--orange)}
.dfm-herr .dfm-hecho{display:none}
.dfm[data-toque="si"][data-estado="listo"] .dfm-herr .dfm-hecho{display:inline-flex}

/* táctil: la pieza se mueve después de tocarla, para que el dedo pueda bajar la página */
.dfm-tocar{display:none}
.dfm[data-toque="no"][data-estado="listo"] .dfm-tocar{display:flex;position:absolute;inset:0;z-index:4;align-items:flex-end;justify-content:center;padding-bottom:26px}
.dfm-tocar span{padding:10px 16px;border-radius:999px;background:rgba(30,32,35,.82);color:var(--paper);font-size:.86rem}

/* leyenda del mapa de espesores: mínimo que aguanta, recomendado y 4 veces el recomendado */
.dfm-escala{position:absolute;z-index:5;left:16px;bottom:16px;display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:8px;background:rgba(255,255,255,.92);box-shadow:inset 0 0 0 1px var(--line);font-size:.74rem}
.dfm-escala b{font-weight:600}
.dfm-grad{width:220px;height:8px;border-radius:4px;background:linear-gradient(90deg,#d83a2e 0%,#f08a02 50%,#f5c451 75%,#c9ced4 100%)}
.dfm-marcas{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.62rem;color:var(--steel)}

/* cargando */
.dfm-cargando{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(246,246,244,.74);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .25s}
.dfm[data-estado="cargando"] .dfm-cargando{opacity:1;pointer-events:auto}
.dfm-spin{width:38px;height:38px;border-radius:50%;border:3px solid rgba(30,32,35,.12);border-top-color:var(--orange);animation:dfm-gira .8s linear infinite}
@keyframes dfm-gira{to{transform:rotate(360deg)}}
.dfm-paso{max-width:80%;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;text-align:center;color:var(--ink-2)}
.dfm-progreso{width:200px;height:3px;border-radius:2px;background:rgba(30,32,35,.1);overflow:hidden}
.dfm-progreso i{display:block;width:0;height:100%;background:var(--orange);transition:width .2s}

/* arrastrando un archivo por la página */
.dfm-arrastre{position:absolute;inset:10px;z-index:7;display:grid;place-items:center;border-radius:var(--r);border:2px dashed var(--orange);background:rgba(255,241,222,.86);opacity:0;pointer-events:none;transition:opacity .2s}
.dfm-arrastre b{font-family:var(--display);font-size:1.5rem;font-weight:600;letter-spacing:-.03em;text-align:center}
.dfm.sobre .dfm-arrastre{opacity:1}

/* aviso sobre la escena cuando algo falla con una pieza ya abierta */
.dfm-toast{position:absolute;z-index:8;left:50%;bottom:18px;display:flex;align-items:center;gap:9px;width:max-content;max-width:min(520px,calc(100% - 32px));padding:10px 14px;border-radius:8px;background:var(--ink);color:var(--paper);font-size:.86rem;line-height:1.4;box-shadow:0 18px 40px -20px rgba(0,0,0,.5);opacity:0;transform:translate(-50%,8px);pointer-events:none;transition:opacity .25s,transform .3s var(--ease)}
.dfm-toast::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--rojo)}
.dfm-toast.ver{opacity:1;transform:translate(-50%,0)}

/* ---------- panel ---------- */
/* el panel entero se desplaza, no solo la lista: con el veredicto arriba y la nota abajo, la lista
   se quedaba en pantallas bajas con una o dos líneas (Edgar, 22-09-2026) */
.dfm-panel{display:flex;flex-direction:column;min-width:0;max-height:var(--alto);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;border-left:1px solid var(--line);background:#fff}
.dfm-cab{display:flex;flex-direction:column;gap:16px;padding:20px 22px 16px;border-bottom:1px solid var(--line)}
.dfm-pieza{display:flex;gap:12px;align-items:flex-start}
.dfm-fmt{flex:none;margin-top:2px;padding:6px 7px;border-radius:4px;background:var(--ink);color:var(--paper);font:600 .6rem/1 var(--mono);letter-spacing:.1em}
.dfm-nombre{font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.dfm-sub{margin-top:3px;font-size:.78rem;line-height:1.4;color:var(--steel);font-variant-numeric:tabular-nums}
.dfm-seg{display:flex;height:38px;padding:3px;gap:3px;border-radius:4px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-strong)}
.dfm-seg label{position:relative;flex:1}
.dfm-seg input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.dfm-seg span{display:flex;align-items:center;justify-content:center;height:100%;border-radius:3px;font-size:.84rem;font-weight:500;color:var(--steel);transition:background .25s,color .25s}
.dfm-seg input:checked+span{background:var(--ink);color:var(--paper)}
.dfm-seg input:focus-visible+span{outline:2px solid var(--orange);outline-offset:2px}
.dfm-veredicto h3{font-size:clamp(1.3rem,1.7vw,1.55rem);font-variation-settings:'wdth' 106;letter-spacing:-.03em;line-height:1.08}
.dfm-veredicto p{margin-top:6px;font-size:.88rem;line-height:1.45;color:var(--ink-2)}
.dfm-etiq{display:inline-block;margin-bottom:8px;padding:4px 8px;border-radius:999px;background:var(--paper);color:var(--steel);font:600 .6rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.dfm[data-veredicto="rojo"] .dfm-etiq{background:var(--rojo-soft);color:var(--rojo)}
.dfm[data-veredicto="naranja"] .dfm-etiq{background:var(--orange-soft);color:var(--orange-deep)}
.dfm[data-veredicto="limpio"] .dfm-etiq{background:#e8f4ea;color:#2f7a3f}
.dfm-cuenta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.dfm-cuenta button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;padding:9px 10px 8px;border-radius:6px;background:var(--paper);text-align:left;transition:box-shadow .2s,opacity .2s}
.dfm-cuenta b{font-family:var(--display);font-variation-settings:'wdth' 106;font-size:1.55rem;font-weight:600;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.dfm-cuenta span{display:flex;align-items:center;gap:6px;max-width:100%;font:600 .58rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;overflow-wrap:anywhere}
.dfm-cuenta span::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:currentColor}
.dfm-cuenta .r span{color:var(--rojo)}
.dfm-cuenta .n span{color:var(--orange-deep)}
.dfm-cuenta .a span{color:var(--aviso)}
.dfm-cuenta button[aria-pressed="false"]{opacity:.45}
.dfm-cuenta button:hover{box-shadow:inset 0 0 0 1px var(--line-strong)}
.dfm-cuenta button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.dfm[data-estado="vacio"] .dfm-cuenta{opacity:.5;pointer-events:none}

.dfm-lista{flex:none;margin:0;padding:6px 10px 10px;list-style:none}
.dfm-grupo{margin:12px 12px 4px;font:600 .6rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
.dfm-item{border-radius:7px;transition:background .2s}
.dfm-item+.dfm-item{margin-top:2px}
.dfm-item>button{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:start;gap:3px 10px;width:100%;padding:10px 12px;border-radius:7px;text-align:left}
.dfm-item>button:hover{background:var(--paper)}
.dfm-item>button:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.dfm-num{display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--orange);color:#fff;font:700 .66rem/1 var(--mono)}
.dfm-item.rojo .dfm-num{background:var(--rojo)}
.dfm-item.aviso .dfm-num{background:var(--aviso)}
.dfm-tit{font-size:.92rem;font-weight:600;line-height:1.3}
.dfm-val{grid-column:2;font-family:var(--mono);font-size:.7rem;letter-spacing:.02em;color:var(--steel)}
.dfm-mas{display:none;padding:0 14px 14px 44px;font-size:.86rem;line-height:1.5;color:var(--ink-2)}
.dfm-mas p+p{margin-top:8px}
.dfm-hacer{padding:9px 11px;border-radius:6px;background:var(--paper);color:var(--ink)}
.dfm-hacer b{display:block;margin-bottom:2px;font:600 .58rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
.dfm-item.abierto{background:#fbfbfa;box-shadow:inset 0 0 0 1px var(--line)}
.dfm-item.abierto .dfm-mas{display:block}
.dfm-item.abierto.rojo{box-shadow:inset 3px 0 0 var(--rojo),inset 0 0 0 1px var(--line)}
.dfm-item.abierto.naranja{box-shadow:inset 3px 0 0 var(--orange),inset 0 0 0 1px var(--line)}
.dfm-item.abierto.aviso{box-shadow:inset 3px 0 0 var(--aviso),inset 0 0 0 1px var(--line)}
.dfm-vacia{padding:18px 12px;font-size:.88rem;color:var(--steel)}
.dfm-cierre{display:flex;flex-direction:column;gap:12px;margin-top:auto;padding:14px 22px 18px;border-top:1px solid var(--line)}
.dfm-nota{font-size:.76rem;line-height:1.45;color:var(--steel)}
.dfm-cierre .btn{justify-content:center}

/* ---------- debajo del analizador ---------- */
.dfm-bajo{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 32px;margin-top:16px}
.dfm-teclas{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;list-style:none;font-size:.82rem;color:var(--steel)}
.dfm-teclas b{margin-right:6px;font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.dfm-teclas.toque{display:none}
@media (pointer:coarse){.dfm-teclas.raton{display:none}.dfm-teclas.toque{display:flex}}
.dfm-pruebas{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.dfm-pruebas>div{display:flex;flex-wrap:wrap;gap:6px}
.dfm-pruebas button{padding:6px 11px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-strong);font-size:.8rem;font-weight:500;transition:box-shadow .2s,background .2s,color .2s}
.dfm-pruebas button:hover{box-shadow:inset 0 0 0 1px var(--orange)}
.dfm-pruebas button[aria-current="true"]{background:var(--ink);color:var(--paper);box-shadow:none}
.dfm-privado{flex-basis:100%;max-width:80ch;font-size:.82rem;line-height:1.5;color:var(--steel)}
.dfm-privado b{font-weight:600;color:var(--ink)}

/* ---------- tabla de límites ---------- */
.dfm-limites thead th:nth-child(2){color:var(--orange-deep)}
.dfm-limites thead th:nth-child(3){color:var(--rojo)}
.dfm-limites thead th:nth-child(n+2)::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:currentColor;vertical-align:1px}
.dfm-limites tbody td:first-child{width:28%}
.dfm-limites tr.dfm-fam th{width:auto;padding:28px 18px 10px 0;border-bottom:1px solid var(--line-strong);color:var(--ink)}
.dfm-limites tbody tr.dfm-fam:first-child th{padding-top:18px}

/* ---------- dentro del visor STEP ---------- */
/* la altura que tenía el visor (--alto-visor la pone visor.js al entrar), sin pasar de la pantalla */
.dfm.dfm-en-visor{--alto:clamp(440px,min(var(--alto-visor,64vh),calc(100vh - 96px)),1000px);border-radius:0;box-shadow:none}
.dfm-en-visor .dfm-soltar{display:none}

@media (max-width:1100px){
  .dfm{grid-template-columns:1fr}
  .dfm-escena{--alto:clamp(380px,70vw,600px)}
  .dfm-panel{max-height:none;overflow:visible;border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:560px){
  .dfm-escena{--alto:clamp(360px,104vw,480px)}
  .dfm-herr{top:10px;left:10px;right:10px;gap:6px}
  .dfm-herr .btn{padding:8px 11px;font-size:.8rem}
  .dfm-herr .btn.ghost .dfm-txt{display:none}
  .dfm[data-toque="si"] .dfm-herr [data-dfm-elegir],.dfm-en-visor .dfm-herr [data-dfm-elegir]{display:none}
  .dfm-soltar{padding:18px 18px 16px}
  .dfm-soltar h2{font-size:1.2rem}
  .dfm-soltar p{font-size:.85rem}
  .dfm-cab{padding:16px 16px 14px}
  .dfm-lista{padding:4px 4px 8px}
  .dfm-mas{padding-left:40px}
  .dfm-cierre{padding:14px 16px 16px}
  .dfm-etq{max-width:180px}
  .dfm-escala{left:10px;bottom:10px}
  .dfm-grad{width:180px}
}