/* Divax Despieces Interactivos — visor público y navegación.
   Colores configurables: --dvxd-btn (principal), --dvxd-btn-ok (recambio en la tienda),
   --dvxd-btn-text (número) y --dvxd-btn-size.
   Los controles usan selectores con dos o tres clases (.dvxd .dvxd-stage …) para que los
   estilos genéricos de botones y enlaces del tema (fondo amarillo al pasar el ratón,
   relleno, mayúsculas…) no los descoloquen. */
.dvxd, .dvxd-nav-page {
  --dvxd-ink: #1d2733;
  --dvxd-muted: #5d6874;
  --dvxd-line: #d9dee4;
  --dvxd-paper: #ffffff;
  --dvxd-soft: #f4f6f8;
  --dvxd-focus: #1a5fb4;
  --dvxd-ok: #1d7a4c;
  --dvxd-bad: #b42318;
  color: var(--dvxd-ink);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 100%;
}
.dvxd *, .dvxd-nav-page * { box-sizing: border-box; }
.dvxd-crumbs { font-size: .9rem; color: var(--dvxd-muted); margin: 0 0 1rem; }
.dvxd-crumbs a { color: inherit; }

/* Índice de láminas */
.dvxd-nav { margin: 0 0 1rem; }
.dvxd-nav-list { list-style: none; margin: 0; padding: 0 0 .5rem; display: flex; gap: .5rem; overflow-x: auto; scroll-snap-type: x proximity; }
.dvxd-nav-list li { flex: 0 0 auto; scroll-snap-align: start; margin: 0; }
.dvxd-nav-link { display: flex; align-items: center; gap: .5rem; padding: .35rem .6rem .35rem .35rem; border: 1px solid var(--dvxd-line); border-radius: 6px; background: var(--dvxd-paper); color: var(--dvxd-ink); text-decoration: none; font-size: .9rem; max-width: 18rem; }
.dvxd-nav-link img { width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: 3px; flex: 0 0 auto; }
.dvxd-nav-n { font-weight: 700; color: var(--dvxd-btn, #c4122f); font-variant-numeric: tabular-nums; }
.dvxd-nav-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dvxd-nav-link[aria-current="true"] { border-color: var(--dvxd-btn, #c4122f); box-shadow: inset 0 0 0 1px var(--dvxd-btn, #c4122f); }
.dvxd-nav-link:hover { border-color: var(--dvxd-ink); }

/* Láminas: sin JavaScript se ven todas seguidas */
.dvxd-lamina { margin: 0 0 2rem; scroll-margin-top: 90px; }
.dvxd.is-js .dvxd-lamina:not(.is-active) { display: none; }
.dvxd-lamina-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin: 0 0 .6rem; }
.dvxd-lamina-title { font-size: 1.25rem; margin: 0; }
.dvxd-lamina-count { font-size: .9rem; color: var(--dvxd-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dvxd-stage { position: relative; border: 1px solid var(--dvxd-line); border-radius: 6px; background: #fff; overflow: hidden; overflow: clip; }
.dvxd .dvxd-ico { display: block; flex: none; width: 20px; height: 20px; }
.dvxd-viewport { position: relative; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.dvxd-stage.is-zoomed .dvxd-viewport { touch-action: none; cursor: grab; }
.dvxd-stage.is-zoomed .dvxd-viewport:active { cursor: grabbing; }
.dvxd-canvas { position: relative; width: 100%; transform-origin: 0 0; will-change: transform; }
/* En pantallas apaisadas, el dibujo entero cabe en la ventana sin desplazarse. */
@media (min-width: 782px) {
  .dvxd-canvas { width: min(100%, calc((100vh - 9rem) * var(--dvxd-ratio, 10))); min-width: min(100%, 420px); }
  .dvxd:not(.is-js) .dvxd-canvas { margin-inline: auto; }
}
.dvxd-img { display: block; width: 100%; height: auto; max-width: none; pointer-events: none; }
.dvxd-tools { position: absolute; top: .5rem; right: .5rem; z-index: 3; display: flex; gap: .25rem; }
.dvxd .dvxd-stage .dvxd-tool { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; min-height: 0; width: auto; height: 2.25rem; margin: 0; padding: 0 .55rem; border: 1px solid var(--dvxd-line); border-radius: 6px; background: #fff; color: var(--dvxd-ink); font: 600 1rem/1 system-ui, sans-serif; letter-spacing: 0; text-transform: none; text-shadow: none; box-shadow: none; cursor: pointer; }
.dvxd .dvxd-stage .dvxd-tool-fit { font-size: .8rem; }
.dvxd .dvxd-stage .dvxd-tool:hover, .dvxd .dvxd-stage .dvxd-tool:focus { background: #fff; color: var(--dvxd-ink); border-color: var(--dvxd-ink); }
.dvxd .dvxd-stage .dvxd-tool:focus-visible { outline: 3px solid var(--dvxd-focus); outline-offset: 1px; }

/* Pasar de lámina como en un libro: franjas laterales (escritorio) y paginador (móvil) */
.dvxd .dvxd-stage .dvxd-flip, .dvxd .dvxd-pager { display: none; }
@media (min-width: 782px) {
  .dvxd-stage.has-flip { padding: 0 3.25rem; background: var(--dvxd-soft); }
  .dvxd-stage.has-flip .dvxd-viewport { background: #fff; }
  .dvxd-stage.has-flip .dvxd-tools { right: 3.75rem; }
  .dvxd .dvxd-stage .dvxd-flip { position: absolute; top: 0; bottom: 0; z-index: 4; width: 3.25rem; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; padding: .5rem 0; border: 0; background: transparent; color: var(--dvxd-ink); text-decoration: none; box-shadow: none; cursor: pointer; }
  .dvxd .dvxd-stage .dvxd-flip-prev { left: 0; }
  .dvxd .dvxd-stage .dvxd-flip-next { right: 0; }
  .dvxd .dvxd-stage .dvxd-flip.is-off { cursor: default; }
  /* La flecha se queda a media pantalla mientras se recorre una lámina alta. */
  .dvxd .dvxd-stage .dvxd-flip-btn { position: sticky; top: calc(50vh - 1.25rem); bottom: calc(50vh - 1.25rem); flex: none; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid #c3cad2; background: #fff; color: var(--dvxd-ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); transition: background .12s, color .12s, border-color .12s; }
  .dvxd .dvxd-stage .dvxd-flip-btn .dvxd-ico { width: 22px; height: 22px; }
  .dvxd .dvxd-stage .dvxd-flip:hover, .dvxd .dvxd-stage .dvxd-flip:focus { background: #e8ecf0; color: var(--dvxd-ink); }
  .dvxd .dvxd-stage .dvxd-flip:hover .dvxd-flip-btn, .dvxd .dvxd-stage .dvxd-flip:focus-visible .dvxd-flip-btn { background: var(--dvxd-ink); border-color: var(--dvxd-ink); color: #fff; }
  .dvxd .dvxd-stage .dvxd-flip:focus-visible { outline: 3px solid var(--dvxd-focus); outline-offset: -3px; }
}
@media (max-width: 781px) {
  .dvxd .dvxd-pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; margin: .6rem 0 0; }
  .dvxd .dvxd-pager .dvxd-pager-btn { display: flex; align-items: center; gap: .3rem; min-height: 2.75rem; margin: 0; padding: .5rem .75rem; border: 1px solid #c3cad2; border-radius: 6px; background: var(--dvxd-paper); color: var(--dvxd-ink); font-weight: 600; font-size: .95rem; line-height: 1.2; text-decoration: none; text-transform: none; box-shadow: none; }
  .dvxd .dvxd-pager .dvxd-pager-prev { justify-content: flex-start; padding-left: .45rem; }
  .dvxd .dvxd-pager .dvxd-pager-next { justify-content: flex-end; padding-right: .45rem; }
  .dvxd .dvxd-pager .dvxd-pager-btn:hover, .dvxd .dvxd-pager .dvxd-pager-btn:focus { background: var(--dvxd-soft); color: var(--dvxd-ink); border-color: var(--dvxd-ink); }
  .dvxd .dvxd-pager .dvxd-pager-btn:focus-visible { outline: 3px solid var(--dvxd-focus); outline-offset: 1px; }
  .dvxd .dvxd-pager .dvxd-pager-btn.is-off { visibility: hidden; }
  .dvxd-pager-n { font-size: .9rem; color: var(--dvxd-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .dvxd-lamina-count { display: none; }
}
.dvxd-stage::after { content: "Ctrl + rueda para ampliar · doble clic para acercar"; position: absolute; left: 50%; bottom: .75rem; transform: translateX(-50%); padding: .35rem .7rem; border-radius: 4px; background: rgba(29,39,51,.88); color: #fff; font-size: .8rem; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 4; white-space: nowrap; }
.dvxd-stage.show-hint::after { opacity: 1; }

/* Botones de posición: cuadrados.
   Verde = recambio en la tienda (abre la ficha) · blanco con borde = no está en la tienda
   (abre la solicitud) · relleno con borde discontinuo = remisión a otra lámina. */
.dvxd .dvxd-stage .dvxd-hs {
  --dvxd-c: var(--dvxd-btn, #c4122f);
  --dvxd-b: calc(var(--dvxd-btn-size, 26px) * var(--dvxd-btn-k, 1));
  position: absolute; z-index: 2;
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  min-width: var(--dvxd-b); width: auto; max-width: none; height: var(--dvxd-b); min-height: 0;
  margin: 0; padding: 0 .28em;
  transform: translate(-50%, -50%) scale(var(--dvxd-inv, 1));
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid #fff; border-radius: 3px;
  background: var(--dvxd-c); color: var(--dvxd-btn-text, #fff);
  font: 700 calc(var(--dvxd-b) * .5)/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0; text-transform: none; text-decoration: none; text-shadow: none; text-align: center;
  cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.35);
  transition: box-shadow .12s, filter .12s;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dvxd .dvxd-stage .dvxd-hs.is-found { --dvxd-c: var(--dvxd-btn-ok, #1a7f37); }
.dvxd .dvxd-stage .dvxd-hs:hover, .dvxd .dvxd-stage .dvxd-hs:focus { background: var(--dvxd-c); color: var(--dvxd-btn-text, #fff); border-color: #fff; text-decoration: none; }
.dvxd .dvxd-stage .dvxd-hs:hover, .dvxd .dvxd-stage .dvxd-hs:focus-visible { filter: brightness(1.1); box-shadow: 0 0 0 3px rgba(255,255,255,.95), 0 0 0 6px var(--dvxd-c); z-index: 3; }
.dvxd .dvxd-stage .dvxd-hs:focus-visible { outline: 3px solid var(--dvxd-focus); outline-offset: 5px; }
.dvxd .dvxd-stage .dvxd-hs-req, .dvxd .dvxd-stage .dvxd-hs-multi:not(.is-found),
.dvxd .dvxd-stage .dvxd-hs-req:hover, .dvxd .dvxd-stage .dvxd-hs-multi:not(.is-found):hover,
.dvxd .dvxd-stage .dvxd-hs-req:focus, .dvxd .dvxd-stage .dvxd-hs-multi:not(.is-found):focus { background: #fff; color: var(--dvxd-c); border-color: var(--dvxd-c); }
.dvxd .dvxd-stage .dvxd-hs-ref, .dvxd .dvxd-stage .dvxd-hs-ref:hover, .dvxd .dvxd-stage .dvxd-hs-ref:focus { border-style: dashed; }
.dvxd .dvxd-stage .dvxd-hs-multi { letter-spacing: -.02em; }
.dvxd .dvxd-stage .dvxd-hs-multi::after { content: ""; position: absolute; right: -4px; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid var(--dvxd-c); }
/* En el móvil el dibujo es pequeño: botones algo menores (al ampliar mantienen su tamaño). */
@media (max-width: 600px) { .dvxd .dvxd-stage .dvxd-hs { --dvxd-btn-k: .78; border-width: 1.5px; } }

/* Selector de variantes */
.dvxd-pop { position: absolute; z-index: 5; width: min(22rem, calc(100% - 16px)); max-height: 70%; overflow: auto; background: #fff; border: 1px solid var(--dvxd-line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: .75rem; }
.dvxd-pop-title { margin: 0 2.5rem .5rem 0; font-weight: 700; line-height: 1.5rem; }
.dvxd .dvxd-stage .dvxd-pop-close { position: absolute; top: .5rem; right: .5rem; }
.dvxd-pop-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.dvxd-pop-list li { margin: 0; }
.dvxd .dvxd-stage .dvxd-opt { -webkit-appearance: none; appearance: none; display: grid; grid-template-columns: 1fr auto; gap: .1rem .75rem; width: 100%; min-height: 0; margin: 0; padding: .55rem .65rem; border: 1px solid var(--dvxd-line); border-radius: 6px; background: var(--dvxd-paper); color: var(--dvxd-ink); text-align: left; text-decoration: none; text-transform: none; text-shadow: none; letter-spacing: normal; white-space: normal; box-shadow: none; font: inherit; line-height: 1.35; cursor: pointer; }
.dvxd .dvxd-stage .dvxd-opt:hover, .dvxd .dvxd-stage .dvxd-opt:focus { background: var(--dvxd-paper); color: var(--dvxd-ink); border-color: var(--dvxd-btn, #c4122f); }
.dvxd .dvxd-stage a.dvxd-opt:hover, .dvxd .dvxd-stage a.dvxd-opt:focus { border-color: var(--dvxd-btn-ok, #1a7f37); }
.dvxd .dvxd-stage a.dvxd-opt .dvxd-opt-go { color: var(--dvxd-btn-ok, #1a7f37); }
.dvxd-opt-main { grid-column: 1; font-weight: 600; }
.dvxd-opt-sub { grid-column: 1; font-size: .85rem; color: var(--dvxd-muted); }
.dvxd-opt-go { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: .85rem; font-weight: 600; color: var(--dvxd-btn, #c4122f); white-space: nowrap; }

/* Lista de piezas (texto visible y para buscadores) */
.dvxd-piezas { margin-top: .75rem; border: 1px solid var(--dvxd-line); border-radius: 6px; background: var(--dvxd-paper); }
.dvxd-piezas summary { cursor: pointer; padding: .6rem .8rem; font-weight: 600; }
.dvxd-piezas-list { list-style: none; margin: 0; padding: 0 .8rem .8rem; columns: 2 22rem; column-gap: 2rem; font-size: .92rem; }
.dvxd-piezas-list li { break-inside: avoid; margin: 0 0 .25rem; }
.dvxd-piezas-pos { display: inline-block; min-width: 2.2em; font-weight: 700; color: var(--dvxd-btn, #c4122f); font-variant-numeric: tabular-nums; }
.dvxd-piezas-sub, .dvxd-piezas-cod { color: var(--dvxd-muted); font-size: .85em; }

/* Ventana de solicitud */
.dvxd-modal { width: min(32rem, calc(100vw - 32px)); max-height: calc(100vh - 32px); border: 0; border-radius: 10px; padding: 0; box-shadow: 0 16px 48px rgba(0,0,0,.3); color: var(--dvxd-ink); }
.dvxd-modal::backdrop { background: rgba(15,20,26,.55); }
.dvxd-form { position: relative; padding: 1.25rem 1.25rem 1rem; display: flex; flex-direction: column; gap: .6rem; }
.dvxd-form p { margin: 0; }
.dvxd .dvxd-modal .dvxd-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin: 0; }
.dvxd .dvxd-modal .dvxd-modal-title { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; font-size: 1.15rem; line-height: 1.3; letter-spacing: normal; text-transform: none; color: var(--dvxd-ink); }
/* Botón cerrar (ventana y selector): cuadrado fijo con el aspa centrada, ignore lo que diga el tema. */
.dvxd .dvxd-modal .dvxd-modal-close, .dvxd .dvxd-stage .dvxd-pop-close {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; min-width: 0; min-height: 0; max-width: none;
  margin: 0; padding: 0; border: 0; border-radius: 6px;
  background: var(--dvxd-soft); color: var(--dvxd-ink);
  font: 400 1rem/1 system-ui, sans-serif; letter-spacing: 0; text-transform: none; text-shadow: none; box-shadow: none;
  cursor: pointer; transition: background .12s;
}
/* Centrada con la primera línea del título, aunque este ocupe dos. */
.dvxd .dvxd-modal .dvxd-modal-close { margin-top: calc((1.15rem * 1.3 - 2.25rem) / 2); }
.dvxd .dvxd-stage .dvxd-pop-close { width: 2rem; height: 2rem; }
.dvxd .dvxd-modal .dvxd-modal-close:hover, .dvxd .dvxd-modal .dvxd-modal-close:focus,
.dvxd .dvxd-stage .dvxd-pop-close:hover, .dvxd .dvxd-stage .dvxd-pop-close:focus { background: #e3e7ec; color: var(--dvxd-ink); border: 0; box-shadow: none; }
.dvxd .dvxd-modal .dvxd-modal-close:focus-visible, .dvxd .dvxd-stage .dvxd-pop-close:focus-visible { outline: 3px solid var(--dvxd-focus); outline-offset: 1px; }
.dvxd-modal-msg { background: var(--dvxd-soft); border-radius: 6px; padding: .65rem .8rem; }
.dvxd-guest { display: flex; flex-direction: column; gap: .5rem; }
.dvxd-guest[hidden], .dvxd-user[hidden], .dvxd-modal-product[hidden] { display: none; }
.dvxd-field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .15rem; }
.dvxd-field input { width: 100%; padding: .55rem .6rem; border: 1px solid #b9c1ca; border-radius: 6px; font: inherit; }
.dvxd-field input[aria-invalid="true"], .dvxd-check input[aria-invalid="true"] { outline: 2px solid var(--dvxd-bad); }
.dvxd-check { font-size: .9rem; display: flex; gap: .5rem; align-items: flex-start; }
.dvxd-check input { margin-top: .25rem; }
.dvxd-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.dvxd-status { min-height: 1.4em; font-size: .92rem; }
.dvxd-status.is-ok { color: var(--dvxd-ok); font-weight: 600; }
.dvxd-status.is-error { color: var(--dvxd-bad); font-weight: 600; }
.dvxd-actions { display: flex; justify-content: flex-end; }
.dvxd .dvxd-modal .dvxd-submit { -webkit-appearance: none; appearance: none; width: auto; min-height: 0; margin: 0; padding: .65rem 1.1rem; border: 0; border-radius: 6px; background: var(--dvxd-btn, #c4122f); color: var(--dvxd-btn-text, #fff); font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2; letter-spacing: normal; text-transform: none; text-shadow: none; box-shadow: none; cursor: pointer; }
.dvxd .dvxd-modal .dvxd-submit:hover, .dvxd .dvxd-modal .dvxd-submit:focus { background: var(--dvxd-btn, #c4122f); color: var(--dvxd-btn-text, #fff); filter: brightness(1.1); }
.dvxd .dvxd-modal .dvxd-submit:focus-visible { outline: 3px solid var(--dvxd-focus); outline-offset: 2px; }
.dvxd .dvxd-modal .dvxd-submit:disabled { opacity: .6; cursor: progress; filter: none; }
.dvxd-intro { margin-bottom: 1rem; }
.dvxd-empty { padding: 1rem; border: 1px dashed var(--dvxd-line); border-radius: 6px; }
.dvxd-old-pdf { font-weight: 600; }

/* Navegación Marca → Tipo → Máquina */
.dvxd-archive-inner { max-width: 1200px; margin: 0 auto; padding: 1.5rem max(16px, env(safe-area-inset-left, 0px)) 3rem; }
.dvxd-archive-title { margin: 0 0 .75rem; }
.dvxd-cards { list-style: none; margin: 1rem 0 2rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr)); gap: .9rem; }
.dvxd-card { margin: 0; }
.dvxd-card a { height: 100%; display: flex; flex-direction: column; gap: .3rem; padding: .8rem; border: 1px solid var(--dvxd-line); border-radius: 8px; background: var(--dvxd-paper); color: var(--dvxd-ink); text-decoration: none; }
.dvxd-card a:hover, .dvxd-card a:focus-visible { border-color: var(--dvxd-btn, #c4122f); }
.dvxd-card-img { width: 100%; height: 8.5rem; object-fit: contain; background: #fff; }
.dvxd-card-name { font-weight: 700; }
.dvxd-card-meta { font-size: .85rem; color: var(--dvxd-muted); }

@media (max-width: 600px) {
  .dvxd-lamina-title { font-size: 1.1rem; }
  .dvxd-tools { top: .35rem; right: .35rem; }
  .dvxd .dvxd-stage .dvxd-tool { min-width: 2.5rem; height: 2.5rem; }
  .dvxd-stage::after { content: "Pellizca para ampliar"; }
}
@media (prefers-reduced-motion: reduce) {
  .dvxd-hs, .dvxd-stage::after { transition: none; }
}