/* ═══════════════════════════════════════════════════════════════
   TECPORT — Manual de Partes Virtual (catálogo de despiece interactivo).
   Capa autónoma (parts.js / parts_admin.js); todo el color sale de tokens.css
   (respeta dark/light). Namespace .pm-*. Vista de sección a pantalla completa
   enrutada por window.TPView (body[data-tp-view="parts"]).
   ═══════════════════════════════════════════════════════════════ */

.pm-overlay {
    position: fixed; inset: 0; z-index: var(--z-view, 1000); display: none;
    flex-direction: column; background: var(--bg, #fff); background-image: var(--bg-grad); color: var(--text);
}
.pm-overlay.is-open { display: flex; }

/* Color de los hotspots (azul de la paleta del sitio; respeta dark/light).
   --pm-hot-strong = azul oscuro FUERTE para el estado resaltado (hover/fila apuntada). */
.pm-overlay, .pm-hsed, .pm-zoom { --pm-hot: var(--blue, #1f6fc7); --pm-hot-strong: #0d47a1; }
[data-theme="dark"] .pm-overlay,
[data-theme="dark"] .pm-hsed,
[data-theme="dark"] .pm-zoom { --pm-hot: var(--blue-bright, #3d8be0); --pm-hot-strong: #0d47a1; }

/* ── Barra superior (back · breadcrumb · buscador · acciones) ── */
.pm-bar {
    display: flex; align-items: center; gap: 12px; flex: none;
    padding: calc(12px + var(--safe-top)) max(16px, var(--safe-right)) 12px max(16px, var(--safe-left));
    border-bottom: 1px solid var(--border); background: var(--surface);
}
.pm-bar__logo { background: #fff; border-radius: var(--r-md); padding: 6px 10px; display: inline-flex; box-shadow: var(--shadow-sm); }
.pm-bar__logo img { height: 22px; display: block; }
.pm-crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; font: 600 13px/1.3 var(--ui); }
.pm-crumb { color: var(--text-3); cursor: pointer; white-space: nowrap; }
.pm-crumb:hover { color: var(--text); }
.pm-crumb.is-current { color: var(--heading); cursor: default; }
.pm-crumb__sep { color: var(--text-faint); }
.pm-bar__spacer { flex: 1; }
.pm-search { position: relative; display: flex; align-items: center; }
.pm-search input {
    width: 230px; max-width: 40vw; min-height: 38px; padding: 8px 12px 8px 34px; font-size: 13px; color: var(--text);
    background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 999px;
}
.pm-search input:focus { outline: none; border-color: var(--primary); }
.pm-search svg { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--text-3); pointer-events: none; }
.pm-iconbtn {
    width: var(--tap, 40px); height: var(--tap, 40px); min-width: var(--tap, 40px); border-radius: var(--r-md); cursor: pointer;
    display: grid; place-items: center; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border-2);
    transition: background .2s, color .2s;
}
.pm-iconbtn:hover { background: var(--surface-3); }
.pm-btn {
    display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 8px 14px; border-radius: var(--r-sm);
    cursor: pointer; font: 700 13px/1 var(--ui); color: var(--btn-tx); background: var(--btn-bg); border: 1px solid var(--btn-bd);
}
.pm-btn:hover { background: var(--btn-bg-hov, var(--surface-3)); }
.pm-btn--primary { color: var(--primary-tx); background: var(--primary); border-color: transparent; }
.pm-btn--primary:hover { filter: brightness(1.08); }

/* ── Cuerpo con scroll ── */
.pm-body { flex: 1; min-height: 0; overflow-y: auto;
    padding: 22px max(18px, var(--safe-right)) calc(22px + var(--safe-bottom)) max(18px, var(--safe-left)); }
/* Vista del plano: el cuerpo se vuelve un contenedor flex a pantalla completa (sin
   padding ni scroll propio) para que el split ocupe TODO el alto disponible y el plano
   pueda redimensionarse tanto a lo ancho como a lo alto al arrastrar el divisor. */
.pm-body.pm-body--diagram { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.pm-body--diagram .pm-view { flex: 1; min-height: 0; }
.pm-wrap { max-width: 1180px; margin: 0 auto; width: 100%; }
.pm-head { margin: 0 auto 18px; max-width: 1180px; }
.pm-title { font: 800 24px/1.15 var(--ui); color: var(--heading); margin: 0; }
.pm-sub { font: 500 13.5px/1.4 var(--ui); color: var(--text-3); margin: 6px 0 0; }
.pm-empty { padding: 40px; text-align: center; color: var(--text-3); }

/* ── Grids de navegación (familias / modelos / sistemas) ── */
.pm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.pm-card {
    position: relative; text-align: left; cursor: pointer; padding: 18px; border-radius: var(--r-lg);
    background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); color: var(--text);
    transition: transform .15s var(--ease), box-shadow .2s, border-color .2s;
    display: flex; flex-direction: column; gap: 8px; min-height: 116px;
}
.pm-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-2); }
.pm-card__ico { width: 42px; height: 42px; border-radius: var(--r-md); display: grid; place-items: center; flex: none;
    color: var(--primary-tx); background: var(--primary); }
[data-theme="dark"] .pm-card__ico { color: var(--accent-solid-tx); background: var(--accent-solid); }
.pm-card__name { font: 700 15.5px/1.2 var(--ui); }
.pm-card__meta { font: 500 12px/1.4 var(--ui); color: var(--text-3); }
.pm-card__thumb { width: 100%; height: 92px; object-fit: cover; border-radius: var(--r-md); background: var(--surface-2); }
/* Chip de versión del sistema en la card (solo cuando el sistema tiene >1 versión) */
.pm-card__ver { display: inline-block; align-self: flex-start; padding: 2px 8px; border-radius: 999px;
    font: 700 10.5px/1.4 var(--ui); color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent); }

/* ── Barra de selección de N° de serie (viewer) ── */
.pm-serialbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px;
    padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.pm-serialbar label { font: 700 12.5px/1.4 var(--ui); color: var(--text-2); }
.pm-serialbar select { padding: 6px 10px; border: 1px solid var(--border-2); border-radius: var(--r-sm);
    background: var(--surface-2); color: var(--text); font: 600 13px/1.4 var(--ui); max-width: 100%; }
.pm-serialbar__hint { font: 600 12px/1.4 var(--ui); color: var(--primary); }
/* Buscador de seriales (input + panel flotante filtrable). */
.pm-combo-wrap { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.pm-combo-inp { padding: 6px 10px; min-width: 240px; border: 1px solid var(--border-2); border-radius: var(--r-sm);
    background: var(--surface-2); color: var(--text); font: 600 13px/1.4 var(--ui); max-width: 100%; }
.pm-combo-inp:focus { outline: none; border-color: var(--primary); }
.pm-combo-clear { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
    border: 1px solid var(--border-2); border-radius: var(--r-sm); background: var(--surface); color: var(--text-3);
    cursor: pointer; }
.pm-combo-clear:hover { color: var(--text); border-color: var(--border); }
.pm-combo { position: fixed; z-index: 4000; flex-direction: column; max-height: 280px; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
    box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 4px; }
.pm-combo__opt { display: flex; align-items: center; gap: 8px; text-align: left; padding: 7px 10px; border: 0;
    background: transparent; color: var(--text); font: 600 13px/1.3 var(--ui); border-radius: var(--r-sm); cursor: pointer; }
.pm-combo__opt:hover { background: var(--surface-2); }
.pm-combo__lbl { color: var(--text-3); font-weight: 500; font-size: 12px; }
.pm-combo__empty { padding: 8px 10px; color: var(--text-3); font: 500 12.5px/1.4 var(--ui); }

/* ── Pills de versión sobre la lista de planos (sistemas con >1 versión, sin serial) ── */
.pm-vpills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.pm-vpill { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text-2); font: 600 12.5px/1.4 var(--ui); cursor: pointer; }
.pm-vpill:hover { border-color: var(--primary); }
.pm-vpill.is-active { color: var(--primary-tx); background: var(--primary); border-color: var(--primary); }
.pm-vpill__cur { font-size: 10px; font-weight: 700; opacity: .75; text-transform: uppercase; letter-spacing: .4px; }
.pm-tag--ver { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--primary) 30%, transparent); }

/* ── Lista de planos ── */
.pm-dlist { display: flex; flex-direction: column; gap: 10px; }
.pm-drow {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); transition: border-color .2s, background .2s;
    -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
}
.pm-drow:hover { border-color: var(--primary); background: var(--surface-2); }
.pm-drow__thumb { width: 88px; height: 60px; flex: none; object-fit: contain; border-radius: var(--r-sm);
    background: var(--surface-3); border: 1px solid var(--border); }
/* La miniatura con imagen: fondo claro para que el line-art del plano contraste; cursor de zoom. */
img.pm-drow__thumb { background: #fff; cursor: zoom-in; }
.pm-drow__main { flex: 1; min-width: 0; }
.pm-drow__title { font: 700 14.5px/1.25 var(--ui); color: var(--heading); }
.pm-drow__title .pm-tag { vertical-align: middle; }
.pm-drow__meta { font: 500 12px/1.35 var(--ui); color: var(--text-3); margin-top: 4px; }
.pm-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font: 700 10.5px/1.4 var(--ui);
    color: var(--cite-tx-strong); background: var(--cite-bg); border: 1px solid var(--cite-bd); margin-right: 6px; }

/* Preview de plano (hover en desktop / mantener presionado en móvil). Se ve grande
   y vistoso pero a baja resolución: el detalle fino vive en la vista del plano. */
.pm-dprev {
    position: fixed; z-index: calc(var(--z-dialog, 2000) + 30); display: none;
    pointer-events: none; padding: 6px;
    background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
}
.pm-dprev.is-open { display: block; }
.pm-dprev__img { display: block; width: 380px; height: 280px; max-width: 46vw; max-height: 60vh;
    object-fit: contain; background: #fff; border-radius: var(--r-sm); }
/* Móvil: centrado en pantalla con backdrop tenue (box-shadow de gran extensión). */
.pm-dprev--modal { left: 50%; top: 50%; transform: translate(-50%, -50%);
    box-shadow: 0 0 0 100vmax rgba(8, 16, 28, .72), var(--shadow-lg); }
.pm-dprev--modal .pm-dprev__img { width: min(78vw, 460px); height: min(58vh, 340px); }
/* No se vende por separado → remite a otro Nº de parte (tono ámbar de advertencia). */
.pm-tag--nosep { color: #92400e; background: #fef3c7; border-color: #fcd34d; }

/* ═══════════════ VISTA DEL PLANO (split: plano + tabla BOM) ═══════════════ */
.pm-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.pm-split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(360px, 42%) 1fr; gap: 0; }

/* Panel izquierdo: plano interactivo */
.pm-stage-wrap { position: relative; min-height: 0; display: flex; flex-direction: column;
    border-right: 1px solid var(--border); background: var(--surface-2); }
.pm-stage-tools { position: absolute; top: 10px; right: 10px; z-index: 5; display: flex; gap: 6px; }
/* El plano es un viewport con pan+zoom: la imagen va dimensionada por JS (fitStage)
   y `#pm-stage-inner` se mueve/escala con un transform (origen 0,0). El JS reescala
   la imagen para que LLENE el panel al arrastrar el divisor o redimensionar. */
.pm-stage { flex: 1; min-height: 0; overflow: hidden; position: relative; touch-action: none; cursor: grab; }
.pm-stage.is-panning { cursor: grabbing; }
.pm-stage__inner { position: absolute; top: 0; left: 0; transform-origin: 0 0; line-height: 0; will-change: transform; }
.pm-stage__img { display: block; user-select: none; -webkit-user-drag: none; }
.pm-stage__empty { position: absolute; inset: 0; display: grid; place-items: center;
    color: var(--text-3); font: 500 13px/1.5 var(--ui); text-align: center; padding: 30px; }

/* Hotspots (círculos) */
.pm-hotspot {
    position: absolute; transform: translate(-50%, -50%); border-radius: 50%; cursor: pointer;
    border: 2px solid var(--pm-hot, #1f6fc7); background: color-mix(in srgb, var(--pm-hot, #1f6fc7) 22%, transparent);
    transition: background .12s, transform .08s; box-sizing: border-box;
}
/* Resaltado (hover directo o fila apuntada): azul oscuro FUERTE, opaco, número blanco y
   borde claro con halo, para que NO haya duda de cuál es el elemento señalado. */
.pm-hotspot:hover, .pm-hotspot.is-active {
    background: var(--pm-hot-strong, #0d47a1);
    border-color: #fff;
    transform: translate(-50%, -50%) scale(1.3); z-index: 4;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pm-hot-strong, #0d47a1) 38%, transparent),
                0 2px 6px rgba(0,0,0,.45);
}
.pm-hotspot__n { position: absolute; inset: 0; display: grid; place-items: center;
    font-family: var(--ui); font-weight: 800; line-height: 1; font-size: 10px; white-space: nowrap;
    color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); pointer-events: none; }
/* Variante "negro con contorno blanco": legible sobre línea oscura del plano. */
.pm-hotspot__n--black { color: #000;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 0 2px #fff; }
/* En estado resaltado el número va SIEMPRE blanco y nítido (sobre el azul fuerte). */
.pm-hotspot:hover .pm-hotspot__n, .pm-hotspot.is-active .pm-hotspot__n,
.pm-hotspot.is-focus .pm-hotspot__n {
    color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.55); }
/* Preselección persistente (atajo «Ver en el plano»): halo azul fuerte que NO depende del
   hover, con una pulsación breve para que el usuario ubique la pieza de inmediato al aterrizar. */
.pm-hotspot.is-focus {
    background: var(--pm-hot-strong, #0d47a1); border-color: #fff; z-index: 4;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pm-hot-strong, #0d47a1) 45%, transparent),
                0 2px 6px rgba(0,0,0,.45);
    animation: pm-focus-pulse 1.1s ease-out 2; }
@keyframes pm-focus-pulse {
    0%   { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pm-hot-strong, #0d47a1) 45%, transparent), 0 2px 6px rgba(0,0,0,.45); }
    50%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--pm-hot-strong, #0d47a1) 22%, transparent), 0 2px 6px rgba(0,0,0,.45); }
    100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pm-hot-strong, #0d47a1) 45%, transparent), 0 2px 6px rgba(0,0,0,.45); } }
@media (prefers-reduced-motion: reduce) { .pm-hotspot.is-focus { animation: none; } }

/* Panel derecho: tabla BOM (aprovecha el ancho) */
.pm-bom { min-height: 0; display: flex; flex-direction: column; }
.pm-bom__head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.pm-bom__title { font: 700 14px/1.2 var(--ui); color: var(--heading); }
/* Chevrones para iterar entre planos/sistemas del modelo (vista de usuario). */
.pm-flownav { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.pm-flownav[hidden] { display: none; }
.pm-flownav__lbl { min-width: 44px; text-align: center; font: 700 12px/1 var(--ui);
    color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Selector de vista (ojo) del header — solo móvil, sobre una vista de plano. Agrupa
   Plano / Lista / Ambos en un desplegable compacto junto al buscador. */
.pm-bar__break { display: none; }
.pm-viewmenu { display: none; position: relative; flex: none; }
.pm-viewmenu__panel { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
    min-width: 150px; padding: 6px; background: var(--surface); border: 1px solid var(--border-2);
    border-radius: 12px; box-shadow: var(--shadow-lg); }
.pm-viewmenu.is-open .pm-viewmenu__panel { display: block; }
.pm-viewmenu.is-open #pm-viewbtn { background: var(--surface-3); color: var(--text); }
.pm-viewmenu__item { display: block; width: 100%; text-align: left; padding: 9px 12px; border: none;
    border-radius: 8px; cursor: pointer; background: none; color: var(--text-2); font: 600 13px/1 var(--ui); }
.pm-viewmenu__item:hover { background: var(--surface-2); color: var(--text); }
.pm-viewmenu__item.is-active { background: var(--primary); color: var(--primary-tx); }
.pm-bom__scroll { flex: 1; min-height: 0; overflow: auto; }
.pm-table { width: 100%; border-collapse: collapse; font: 500 13px/1.4 var(--ui); }
.pm-table thead th { position: sticky; top: 0; z-index: 1; text-align: left; font: 700 11.5px/1.3 var(--ui);
    color: var(--text-2); background: var(--surface); padding: 9px 12px; border-bottom: 2px solid var(--border); white-space: nowrap; }
.pm-table td { padding: 8px 12px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.pm-table tbody tr { cursor: pointer; transition: background .12s; }
.pm-table tbody tr:hover { background: var(--surface-2); }
.pm-table tbody tr.is-active { background: color-mix(in srgb, var(--pm-hot, #1f6fc7) 12%, transparent);
    box-shadow: inset 3px 0 0 var(--pm-hot, #1f6fc7); }
/* Preselección persistente (atajo «Ver en el plano»): resaltado fijo, independiente del hover. */
.pm-table tbody tr.is-focus { background: color-mix(in srgb, var(--pm-hot, #1f6fc7) 18%, transparent);
    box-shadow: inset 3px 0 0 var(--pm-hot, #1f6fc7); }
.pm-table tbody tr.is-focus:hover { background: color-mix(in srgb, var(--pm-hot, #1f6fc7) 24%, transparent); }
.pm-table .pm-pos { font-weight: 800; color: var(--heading); white-space: nowrap; }
.pm-table .pm-pn { font: 600 12.5px/1.3 var(--mono, monospace); color: var(--primary-tx-strong, var(--text)); white-space: nowrap; }
/* Posición cargada sin número de parte aún: marca PENDIENTE bien visible (pastilla naranja). */
.pm-pending { display: inline-block; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
    font: 800 10.5px/1 var(--ui); letter-spacing: .5px; text-transform: uppercase;
    color: #fff; background: #ed7d22; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.pm-table tbody tr.pm-row--pending:not(.is-active) { background: color-mix(in srgb, #ed7d22 8%, transparent); }
.pm-table tbody tr.pm-row--pending:not(.is-active):hover { background: color-mix(in srgb, #ed7d22 16%, transparent); }
.pm-table .pm-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* "A pedido": cantidad ausente porque la pieza se suministra contra pedido. Etiqueta
   discreta (no compite con la pastilla naranja de PENDIENTE). */
.pm-onreq { display: inline-block; padding: 1px 7px; border-radius: 999px; white-space: nowrap;
    font: 600 10.5px/1.5 var(--ui); color: var(--text-3);
    background: color-mix(in srgb, var(--text-3) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-3) 22%, transparent); }
.pm-avail { display: inline-flex; align-items: center; gap: 5px; font: 600 11.5px/1 var(--ui); }
.pm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); }
.pm-dot--ok { background: var(--ok, #30a46c); } .pm-dot--low { background: var(--warn, #f5a623); } .pm-dot--no { background: var(--danger, #e5484d); }

/* ── Popover de pieza (al clicar un hotspot) ── */
.pm-popover {
    position: fixed; z-index: calc(var(--z-dialog, 2000) + 20); width: 280px; max-width: calc(100vw - 24px);
    background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
    padding: 14px 16px; font: 500 13px/1.45 var(--ui); display: none;
}
.pm-popover.is-open { display: block; }
.pm-popover__pos { font: 800 11px/1 var(--ui); letter-spacing: .5px; text-transform: uppercase; color: var(--text-3); }
.pm-popover__pn { font: 700 15px/1.2 var(--mono, monospace); color: var(--heading); margin: 4px 0 2px; word-break: break-all; }
.pm-popover__desc { color: var(--text-2); margin-bottom: 10px; }
.pm-popover dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
.pm-popover dt { color: var(--text-3); font-weight: 600; white-space: nowrap; }
.pm-popover dd { margin: 0; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.pm-popover__close { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 7px;
    border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text-2); cursor: pointer; line-height: 1; }

/* ── Vista aumentada (pan + zoom libre) ── */
.pm-zoom {
    position: fixed; inset: 0; z-index: calc(var(--z-dialog, 2000) + 10); display: none;
    background: rgba(8,16,28,.92); flex-direction: column;
}
.pm-zoom.is-open { display: flex; }
.pm-zoom__bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; color: #fff; }
.pm-zoom__title { font: 700 13px/1.2 var(--ui); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-zoom__stage { flex: 1; min-height: 0; overflow: hidden; position: relative; cursor: grab; touch-action: none; }
.pm-zoom__stage.is-panning { cursor: grabbing; }
.pm-zoom__inner { position: absolute; top: 0; left: 0; transform-origin: 0 0; line-height: 0; }
.pm-zoom__inner img { display: block; user-select: none; -webkit-user-drag: none; }
.pm-zoom .pm-iconbtn { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.25); color: #fff; }
.pm-zoom .pm-iconbtn:hover { background: rgba(255,255,255,.28); }

/* ═══════════════════════ RESPONSIVE (móvil/tablet) ═══════════════════════ */
@media (max-width: 900px) {
    .pm-split { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .pm-stage-wrap { border-right: 0; border-bottom: 1px solid var(--border); }
    /* Plano / Lista se alternan; "Ambos" muestra los dos apilados. */
    .pm-view[data-pane="table"] .pm-stage-wrap { display: none; }
    .pm-view[data-pane="diagram"] .pm-bom { display: none; }
    .pm-view[data-pane="diagram"] .pm-split,
    .pm-view[data-pane="table"] .pm-split { grid-template-rows: 1fr; }
    /* Vista combinada: plano compacto arriba + listado con más espacio debajo. */
    .pm-view[data-pane="both"] .pm-split { grid-template-rows: minmax(140px, 32vh) 1fr; }
    /* Listado con scroll lateral por TOUCH: la tabla toma su ancho NATURAL (columnas sin
       envolver) para que SIEMPRE haya recorrido horizontal real; si el contenido es
       angosto ocupa al menos el 100%. Se recorre arrastrando el dedo en horizontal o
       vertical. `touch-action: pan-x pan-y` habilita el gesto; `overscroll-behavior:
       contain` evita que el arrastre mueva la página o el plano (otro contenedor). */
    /* min-width:0 en la cadena BOM: sin esto, el ancho natural de la tabla (nowrap)
       empujaría la columna del grid y desbordaría TODA la vista (moviendo el plano);
       así el desbordamiento queda confinado dentro de .pm-bom__scroll. */
    .pm-bom, .pm-bom__scroll { min-width: 0; }
    .pm-bom__scroll { overflow: auto; -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y; overscroll-behavior: contain; }
    .pm-bom__scroll .pm-table { width: max-content; min-width: 100%; }
    .pm-bom__scroll .pm-table th, .pm-bom__scroll .pm-table td { white-space: nowrap; }

    /* Header compacto de 2 filas: fila 1 = home + breadcrumb (scroll) + idioma/tema/
       admin en icono; fila 2 = buscador + selector de vista (ojo). El breadcrumb nunca
       envuelve, así el alto del header no cambia al cambiar de idioma. */
    .pm-bar { flex-wrap: wrap; gap: 8px;
        padding: calc(8px + var(--safe-top)) max(12px, var(--safe-right)) 8px max(12px, var(--safe-left)); }
    .pm-bar__logo, .pm-bar__spacer { display: none; }
    #pm-home { order: 1; }
    .pm-crumbs { order: 2; flex: 1 1 0; min-width: 0; flex-wrap: nowrap;
        overflow-x: auto; font-size: 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .pm-crumbs::-webkit-scrollbar { display: none; }
    #pm-lang { order: 3; }
    #pm-theme { order: 4; }
    /* "Administrar" a solo-icono: su ancho deja de depender del idioma. */
    #pm-admin { order: 5; gap: 0; padding: 0; width: var(--tap, 40px); min-width: var(--tap, 40px);
        height: var(--tap, 40px); justify-content: center; }
    #pm-admin span { display: none; }
    /* Salto de fila: fuerza buscador + ojo a la segunda fila, juntos. */
    .pm-bar__break { display: block; flex: 0 0 100%; height: 0; margin: 0; order: 6; }
    .pm-search { order: 7; flex: 1 1 0; min-width: 0; }
    .pm-search input { width: 100%; max-width: none; }
    .pm-viewmenu.pm-viewmenu--on { display: block; order: 8; }
}
@media (max-width: 600px) {
    .pm-title { font-size: 20px; }
}

/* ═══════════════════ Mobile-first: grids, tablas y editor (teléfono) ═══════════════════ */
@media (max-width: 640px) {
    /* Grids más densos y cuerpo con menos padding lateral */
    .pm-body { padding-left: max(12px, var(--safe-left)); padding-right: max(12px, var(--safe-right)); }
    .pm-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    .pm-card { padding: 14px; min-height: 0; }

    /* Cabecera de la tabla BOM: los botones no se recortan */
    .pm-bom__head { flex-wrap: wrap; }

    /* Editor de hotspots: la barra de herramientas se apila en filas legibles */
    .pm-hsed__bar { gap: 8px 10px; padding: 8px 10px; }
    #hsed-title { flex: 1 1 100%; order: 1; }
    .pm-hsed__partsel { flex: 1 1 100%; order: 2; }
    .pm-hsed__pnnav { flex: 1; }
    .pm-hsed__combo { flex: 1; display: flex; }
    .pm-hsed__pn { width: auto; flex: 1; max-width: none; }
    .pm-hsed__zoom { order: 3; }
    #hsed-save { order: 4; }
    .pm-hsed__close { order: 5; margin-left: auto; }
    .pm-hsed__size { order: 6; flex: 1 1 100%; }
    .pm-hsed__size input[type="range"] { flex: 1; width: auto; }
    .pm-hsed__hint { padding: 0 10px 8px; font-size: 12px; }

    /* Consola de administración: barra apilada y menos padding */
    .pm-admin { padding: max(8px, var(--safe-top)) max(6px, var(--safe-right)) max(8px, var(--safe-bottom)) max(6px, var(--safe-left)); }
    .pm-admin__bar { flex-wrap: wrap; gap: 8px; }
    .adm__title { flex: 1 1 100%; }
    .adm__tabs { margin-left: 0; }
    .pm-admin__body { padding: 12px; }

    /* Buscador del catálogo (Individual/Lista): pasa a su propia fila a ancho
       completo; sin bases fijas que empujen el layout fuera de pantalla. */
    .pm-cat__toolbar { gap: 8px; }
    .pm-cat__search { flex: 1 1 100%; min-width: 0; }
    .pm-cat__search input { width: 100%; max-width: none; }
    .pm-cat__collbar { flex: 1 1 100%; }

    /* Buscador de la tabla maestra de part numbers: el min-width/max-width fijos
       lo desfasaban de la pantalla en teléfonos; a fila completa y flexible. */
    .pmm__bar { gap: 8px; }
    .pmm__search { min-width: 0; max-width: none; flex: 1 1 100%; }

    /* Corta cualquier scroll horizontal residual del panel de partes. */
    .pm-body, .pm-cat, .pmm { min-width: 0; }
    .pm-cat { overflow-x: hidden; }
}

/* ═══════════════════════ CONSOLA DE ADMINISTRACIÓN ═══════════════════════ */
.pm-admin {
    position: fixed; inset: 0; z-index: calc(var(--z-dialog, 2000) + 5); display: none;
    background: rgba(8,16,28,.5); backdrop-filter: blur(2px);
    align-items: center; justify-content: center;
    padding: calc(16px + var(--safe-top)) max(12px, var(--safe-right)) calc(16px + var(--safe-bottom)) max(12px, var(--safe-left));
}
.pm-admin.is-open { display: flex; }
.pm-admin__panel {
    width: 100%; max-width: 1180px; height: 100%; max-height: 100%; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden;
}
.pm-admin__bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.pm-admin__body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
.pm-admin__cols { display: grid; grid-template-columns: 340px 1fr; gap: 18px; min-height: 100%; }
.pm-admin__col { min-width: 0; }
.pm-admin__detail { border-left: 1px solid var(--border); padding-left: 18px; }

.pma-secbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0 6px; }
.pma-secbar strong { font: 700 13px/1 var(--ui); color: var(--heading); }
.pma-mini { min-height: 28px !important; padding: 5px 9px !important; font-size: 11.5px !important; }
.pma-children { margin-left: 14px; padding-left: 10px; border-left: 1px dashed var(--border-2); display: flex; flex-direction: column; gap: 3px; }
/* Suavizado del desplegado en la consola admin: el árbol se reconstruye por innerHTML en cada
   toggle, así que en vez de animar altura sobre DOM persistente se aplica un keyframe de entrada
   breve. Solo a los PLANOS (diagramas) al abrir una versión, para no reanimar todo el árbol. */
@keyframes pmaReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.pma-children[data-sort="diagrams"] { animation: pmaReveal .13s ease both; }
@media (prefers-reduced-motion: reduce) { .pma-children[data-sort="diagrams"] { animation: none; } }
.pma-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: var(--r-sm); cursor: default; }
.pma-row:hover { background: var(--surface-2); }
.pma-row.is-active { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.pma-row__label { flex: 1; min-width: 0; cursor: pointer; font: 600 13px/1.3 var(--ui); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Chevron de expandir/contraer de los sistemas: gira 90° al abrir para mostrar/ocultar sus planos */
.pma-caret { flex: 0 0 auto; display: grid; place-items: center; width: 18px; height: 18px; margin: 0 -1px;
    color: var(--text-3); cursor: pointer; border-radius: 6px;
    transition: transform .15s var(--ease, ease), color .15s, background .15s; }
.pma-caret:hover { color: var(--text); background: var(--surface-3); }
.pma-caret.is-open { transform: rotate(90deg); color: var(--text-2); }
.pma-caret svg { display: block; }
.pma-ic { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border-2); background: var(--surface-2); cursor: pointer; font-size: 12px; }
.pma-ic:hover { background: var(--surface-3); }
/* Reordenar nodos del árbol (sistemas y planos) por arrastre */
.pma-row--drag { position: relative; }
.pma-rgrip { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; margin: -2px 4px -2px -2px;
    color: var(--text-faint); cursor: grab; touch-action: none; border-radius: 6px; }
.pma-rgrip:hover { color: var(--text-2); background: var(--surface-3); }
.pma-rgrip:active { cursor: grabbing; }
.pma-rgrip svg { display: block; }
.pma-row.pma-row-dragging { background: var(--surface-2) !important; box-shadow: var(--shadow-md); opacity: .96; border-radius: var(--r-sm); }
body.pma-reordering .pma-row:not(.pma-row-dragging):hover { background: transparent; }   /* sin flicker de hover al desplazar */

/* Versiones de sistema en el árbol del admin: fila con badges de vigente/compartida */
.pma-row--version .pma-row__label { font-weight: 500; }
.pma-vbadge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px;
    font: 700 10.5px/1.5 var(--ui); vertical-align: 1px; white-space: nowrap; }
.pma-vbadge--cur { color: var(--primary); background: color-mix(in srgb, var(--primary) 16%, transparent); }
.pma-vbadge--shared { color: var(--text-2); background: var(--surface-3); }
.pma-vbadge--owners { color: var(--text-2); background: var(--surface-3); cursor: pointer; }
.pma-vbadge--owners:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }

/* Panel de CLIENTES por versión de modelo (diálogo): empresas → seriales que poseen */
.pma-owners { display: flex; flex-direction: column; gap: 10px; }
.pma-owners__co { border: 1px solid var(--border-2); border-radius: var(--r-sm); padding: 8px 10px; }
.pma-owners__name { display: flex; align-items: center; gap: 6px; font: 700 13px/1.4 var(--ui); color: var(--text); }
.pma-owners__serials { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pma-chip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
    font: 600 11.5px/1.5 var(--ui); color: var(--text-2); background: var(--surface-3); }
.pma-chip--muted { color: var(--text-3); background: transparent; border: 1px dashed var(--border-2); }
/* Seriales de catálogo de la versión SIN unidad de flota registrada (para que el total cuadre). */
.pma-owners__unreg { border: 1px dashed var(--border-2); border-radius: var(--r-sm); padding: 8px 10px; margin-top: 10px; }

/* Elección al cambiar un número de parte: dos botones apilados (con/sin historial). */
.pmm-pnchoice { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.pmm-pnchoice .btn-adm { text-align: left; padding: 10px 14px; line-height: 1.35; }

/* ── Regeneración masiva de números Tecport (developer) ──────────────────────
   Diálogo `tp-dlg--regen`: columna con dos fieldsets (alcance/opciones), UNA sola
   zona de scroll (el resultado) y footer sticky con el contador vivo. Los chips del
   resumen son botones-filtro. Sin z-index en línea (regla de tokens.css). */
.tp-dlg--regen {
    max-width: min(940px, calc(100vw - 32px));   /* pisa el max-width base de .tp-dlg (440px) */
    max-height: min(88vh, 820px);
    display: flex; flex-direction: column;
    overflow: hidden;   /* el scroll vive SOLO en .pma-regen__result */
}
.tp-dlg--regen .tp-dlg__body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pma-regen { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; }
.pma-regen__head { display: flex; align-items: center; gap: 8px; flex: none; }
.pma-regen__lead { font: 700 12.5px var(--ui); color: var(--text-2); }
/* Fieldsets como tarjetas: pasos visibles "1 · Alcance" / "2 · Opciones". */
.pma-regen__fs {
    flex: none; border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface-2); padding: 10px 12px 12px; margin: 0; min-inline-size: 0;
}
.pma-regen__fs legend { font: 700 11.5px/1 var(--ui); color: var(--text-3); padding: 0 6px; text-transform: uppercase; letter-spacing: .04em; }
.pma-regen__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.pma-regen__field { display: flex; flex-direction: column; gap: 4px; font: 600 11.5px/1.3 var(--ui); color: var(--text-2); min-width: 0; }
/* Los selects del modal viven en un TPDialog.custom (no cuelgan de .adm/.pmm-ed__f), así
   que necesitan su propio tema para no caer al render nativo del navegador. */
.pma-regen__field select {
    width: 100%; min-width: 0; min-height: 34px; padding: 6px 8px;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text); font: 500 13px/1.3 var(--ui); cursor: pointer;
}
.pma-regen__field select:focus { outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(31,111,199,.16); }
.pma-regen__field select:disabled { opacity: .55; cursor: not-allowed; }
.pma-regen__field--len { flex: none; width: 150px; }
.pma-regen__scopepath { margin-top: 8px; font: 600 12px/1.4 var(--ui); color: var(--text-3); min-height: 15px; }
.pma-regen__optsrow { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.pma-regen__optspacer { flex: 1; }
/* Incluir compartidas: acción de mayor blast-radius → tinte danger sutil. */
.pma-regen__shared {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    font: 600 12px/1.3 var(--ui); color: var(--danger);
    padding: 7px 10px; border: 1px dashed var(--danger-bd); border-radius: var(--r-sm);
    background: var(--danger-bg);
}
.pma-regen__shared input { accent-color: var(--danger); }
/* Resultado: contenedor flex; el scroll NO vive aquí sino dentro de la tabla, para que el
   resumen (chips) y «Seleccionar todas» queden fijos y solo scrolleen las filas. */
.pma-regen__result { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 8px; }
.pma-regen__summary { min-height: 8px; flex: none; }
/* La lista ocupa el alto restante; su tabla es la única zona scrollable. */
.pma-regen__list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.pma-regen__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pma-regen__loading { font: 500 12px var(--ui); color: var(--text-3); }
.pma-chip--gen  { color: #7a4dff; background: color-mix(in srgb, #7a4dff 14%, transparent); }
.pma-chip--heur { color: var(--warn, #b8860b); background: color-mix(in srgb, #b8860b 15%, transparent); }
.pma-chip--off  { color: var(--text-2); background: var(--surface-3); }
.pma-chip--excl { color: var(--text-3); background: transparent; border: 1px dashed var(--border-2); }
.pma-chip--shared { color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-bd); }
/* Chips-botón (filtros del resumen): son TOGGLES. Se leen como clicables por el borde
   sólido + sombra "presionable" + un punto-indicador (relleno = visible / hueco = oculta).
   Apagado = .is-off (aria-pressed=false): la categoría se oculta en la tabla. */
.pma-chip--btn { cursor: pointer; border: 1px solid var(--border-2);
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
    transition: opacity .12s, border-color .12s, box-shadow .12s, transform .06s; }
.pma-chip--btn::before { content: ""; flex: none; width: 7px; height: 7px; margin-right: 5px;
    border-radius: 50%; border: 1.5px solid currentColor; background: currentColor;
    transition: background .12s; }
.pma-chip--btn:hover { border-color: var(--text-3); box-shadow: 0 2px 6px rgba(0,0,0,.10); }
.pma-chip--btn:active { transform: translateY(1px); }
.pma-chip--btn.is-off { opacity: .5; text-decoration: line-through; border-style: dashed; }
.pma-chip--btn.is-off::before { background: transparent; }   /* apagada = punto hueco */
.pma-regen__all { flex: none; display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--ui); color: var(--text-2); margin: 2px 0; cursor: pointer; }
.pma-regen__tablewrap { flex: 1; min-height: 0; border: 1px solid var(--border-2); border-radius: var(--r-md); overflow: auto; }
.pma-regen__table { width: 100%; border-collapse: collapse; font: 500 12.5px var(--ui); }
.pma-regen__table th { position: sticky; top: 0; background: var(--surface-2); text-align: left; padding: 7px 10px; font-weight: 700; color: var(--text-2); border-bottom: 1px solid var(--border-2); }
.pma-regen__table td { padding: 6px 10px; border-bottom: 1px solid var(--border-1); }
.pma-regen__table .rg-old { font-family: var(--mono, monospace); color: var(--text); word-break: break-all; }
.pma-regen__table .rg-used { color: var(--text-2); white-space: nowrap; }
.pma-regen__table .rg-row--shared { background: color-mix(in srgb, var(--warn-bg) 55%, transparent); }
.pma-regen__table .rg-row--excluded { opacity: .55; }
.pma-regen__empty { font: 500 12.5px var(--ui); color: var(--text-3); padding: 10px 0; }
/* Footer sticky: el contador y Aplicar siempre a la vista, incluso con la tabla larga. */
.pma-regen__foot {
    flex: none; position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px;
    justify-content: flex-end; padding-top: 10px; margin-top: 2px;
    background: var(--surface); border-top: 1px solid var(--hairline, var(--border));
}
.pma-regen__count { font: 600 12.5px/1.4 var(--ui); color: var(--text-2); }
/* Móvil: diálogo a pantalla casi completa, cascada en una columna y sin "Usada en"
   (el detalle sigue disponible en el title de la fila). */
@media (max-width: 720px) {
    .tp-dlg--regen { max-width: calc(100vw - 12px); max-height: calc(100dvh - 12px); }
    .pma-regen__grid { grid-template-columns: 1fr; }
    .pma-regen__optsrow { align-items: stretch; flex-direction: column; }
    .pma-regen__field--len { width: 100%; }
    .pma-regen__table th:nth-child(4), .pma-regen__table td:nth-child(4) { display: none; }
    .pma-regen__foot { padding-bottom: calc(4px + var(--safe-bottom, 0px)); }
}

/* Panel "Seriales" del modelo (admin): tarjetas por serial + matriz sistema→versión */
.pms-serial { border: 1px solid var(--border-2); border-radius: var(--r-sm); margin: 6px 0; overflow: hidden; }
.pms-serial__head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; }
.pms-serial__head:hover { background: var(--surface-2); }
.pms-serial__no { font: 700 13px/1.3 var(--ui); color: var(--text); }
.pms-serial__notes { font: 500 12px/1.3 var(--ui); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; }
.pms-serial__cfg { display: none; padding: 4px 10px 10px; border-top: 1px dashed var(--border-2); }
.pms-serial.is-open .pms-serial__cfg { display: block; }
/* Resumen del serial expandido: el override por sistema es excepcional, queda tras el botón. */
.pms-serial__ovsummary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0 8px; }
.pms-serial__ovsummary > span { font: 500 12px/1.4 var(--ui); color: var(--text-3); }
.pms-cfgtbl { width: 100%; border-collapse: collapse; font: 500 12px/1.4 var(--ui); }
.pms-cfgtbl th { text-align: left; padding: 6px 8px; color: var(--text-3); font-weight: 600; border-bottom: 1px solid var(--border-2); }
.pms-cfgtbl td { padding: 5px 8px; color: var(--text-2); border-bottom: 1px solid color-mix(in srgb, var(--border-2) 55%, transparent); }
.pms-cfgtbl td.pm-muted { color: var(--text-3); font-size: 11.5px; }
.pms-cfgtbl tr.is-override td { background: color-mix(in srgb, var(--primary) 7%, transparent); }
.pms-vsel { max-width: 100%; padding: 4px 8px; border: 1px solid var(--border-2); border-radius: 6px;
    background: var(--surface); color: var(--text); font: 500 11.5px/1.35 var(--ui); cursor: pointer;
    transition: border-color .15s, background .15s; }
.pms-vsel:hover { border-color: var(--primary); }
.pms-vsel:focus-visible { outline: 2px solid var(--sb-focus); outline-offset: 1px; }
/* Diálogo de clonar: la columna «Cómo llevarlo» ocupa el ancho del select (labels largas legibles),
   con controles globales en la cabecera (marcar todos + aplicar a todos). */
.pms-cfgtbl--clone th:last-child, .pms-cfgtbl--clone td:last-child { width: 260px; }
.pms-cfgtbl--clone .pms-vsel { width: 100%; }
.pms-allck { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.pms-allck input { cursor: pointer; accent-color: var(--primary); }
.pms-cfgtbl--clone td input[type="checkbox"] { accent-color: var(--primary); }
.pms-bulk { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pms-vsel--bulk { font-weight: 600; color: var(--text-2); background: var(--surface-2); }

/* Unidad arrastrable de sistema = fila + sus planos desplegados (viajan juntos en SortableJS) */
.pma-unit { display: flex; flex-direction: column; gap: 3px; }
/* Al elegir una .pma-unit (sistema), resaltar solo su fila cabecera, no los planos hijos */
.pma-unit.pma-row-dragging { background: transparent !important; box-shadow: none; opacity: 1; }
.pma-unit.pma-row-dragging > .pma-row { background: var(--surface-2) !important; box-shadow: var(--shadow-md); opacity: .96; border-radius: var(--r-sm); }
/* Hueco (placeholder) y clon flotante de SortableJS */
.pma-sortghost { opacity: .4; }
.pma-sortghost > .pma-row { background: var(--surface-2) !important; }
.pma-sortdrag { background: var(--surface-2); box-shadow: var(--shadow-md); border-radius: var(--r-sm); }

.pma-detail__head { font: 700 15px/1.3 var(--ui); color: var(--heading); margin-bottom: 12px; }
.pma-uprow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.pma-thumb { max-width: 100%; max-height: 240px; border-radius: var(--r-md); border: 1px solid var(--border); margin-bottom: 8px; display: block; }
.pma-table-wrap { overflow-x: auto; }
.pma-table-wrap input { min-height: 30px; padding: 4px 6px; font-size: 12.5px; color: var(--text);
    background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 6px; }

.pma-report { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; margin: 14px 0; font: 500 13px/1.5 var(--ui); }
.pma-report ul { margin: 6px 0 0; padding-left: 18px; }
.pma-report__err { color: var(--danger); background: var(--danger-bg); border: 1px solid var(--danger-bd); border-radius: var(--r-md); padding: 10px 12px; margin: 12px 0; font: 500 12.5px/1.5 var(--ui); }
.pma-report__warn { color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-bd); border-radius: var(--r-md); padding: 10px 12px; margin: 12px 0; font: 500 12.5px/1.5 var(--ui); }

/* Panel de selección de columnas de los formatos Excel (carga masiva). */
.pma-cols { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.pma-cols__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; margin-top: 8px; }
.pma-cols__item { display: flex; align-items: center; gap: 8px; font: 500 12.5px/1.4 var(--ui); color: var(--text); cursor: pointer; }
.pma-cols__item input[disabled] { cursor: not-allowed; }
.pma-cols__item input[disabled] + span { color: var(--muted); }

.pm-toast { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(20px);
    background: var(--heading); color: var(--surface); padding: 10px 16px; border-radius: 999px; font: 600 13px/1 var(--ui);
    box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 9; max-width: 80%; }
.pm-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.pm-toast--err { background: var(--danger, #e5484d); color: #fff; }

@media (max-width: 820px) {
    .pm-admin__cols { grid-template-columns: 1fr; }
    .pm-admin__detail { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 14px; }
}

/* ── Editor de hotspots (overlay a pantalla completa) ── */
.pm-hsed { position: fixed; inset: 0; z-index: calc(var(--z-dialog, 2000) + 20); display: none; flex-direction: column; background: rgba(8,16,28,.94); }
.pm-hsed.is-open { display: flex; }
.pm-hsed__bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; color: #fff; flex-wrap: wrap; }
.pm-hsed__sel { min-height: 34px; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--border-2); background: var(--surface); color: var(--text); font-size: 13px; max-width: 260px; }
.pm-hsed__hint { color: rgba(255,255,255,.8); font: 500 12.5px/1.4 var(--ui); padding: 0 14px 8px; }
.pm-hsed__stage { flex: 1; min-height: 0; overflow: hidden; position: relative; cursor: grab; touch-action: none; }
.pm-hsed__stage.is-panning { cursor: grabbing; }
.pm-hsed__inner { position: absolute; top: 0; left: 0; transform-origin: 0 0; line-height: 0; }
.pm-hsed__inner img { display: block; user-select: none; -webkit-user-drag: none; }
.pm-hsed__inner .pm-hs-edit { cursor: grab; }
.pm-hsed__inner .pm-hs-edit.is-active { cursor: grab; outline: 2px solid #fff; outline-offset: 1px;
    background: color-mix(in srgb, var(--pm-hot, #1f6fc7) 65%, transparent); z-index: 4; }

/* ── Detección automática por OCR: candidatos propuestos, todavía NO guardados ──
   Punteado ámbar para que sean inconfundibles frente al hotspot real (borde sólido --pm-hot). */
.pm-hsed__inner .pm-hs-cand { cursor: pointer; border: 2px dashed var(--warn); z-index: 3;
    background: color-mix(in srgb, var(--warn) 18%, transparent); }
.pm-hsed__inner .pm-hs-cand:hover { z-index: 5;
    background: color-mix(in srgb, var(--warn) 50%, transparent); }
.pm-hsed__inner .pm-hs-cand.is-sel { outline: 2px solid #fff; outline-offset: 1px; z-index: 5; }
/* Ambiguo: varias filas del BOM comparten ese número → el OCR no puede resolverlo solo. */
.pm-hsed__inner .pm-hs-cand.is-ambig { border-color: var(--danger); border-style: dotted;
    background: color-mix(in srgb, var(--danger) 18%, transparent); }
/* Confianza baja, o la posición ya tiene hotspot: se muestra igual, pero atenuado. */
.pm-hsed__inner .pm-hs-cand.is-weak { opacity: .5; }

/* Panel de revisión de la detección (hermano del stage: fuera del pan/zoom del plano). */
.pm-hsed__ocr { position: absolute; right: 14px; top: 92px; z-index: 6; width: 320px; max-width: calc(100vw - 28px);
    max-height: calc(100% - 120px); display: flex; flex-direction: column; background: var(--surface);
    color: var(--text); border: 1px solid var(--border-2); border-radius: var(--r-md);
    box-shadow: var(--shadow-lg); font: 500 12.5px/1.45 var(--ui); }
.pm-hsed__ocr[hidden] { display: none; }
.pm-hsed__ocrhead { display: flex; align-items: center; gap: 8px; padding: 10px 12px;
    border-bottom: 1px solid var(--border); font-weight: 700; }
.pm-hsed__ocrx { margin-left: auto; }
.pm-hsed__ocrbody { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 12px; }
.pm-hsed__ocrfoot { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }
.pm-hsed__ocritem { display: flex; align-items: center; gap: 7px; padding: 4px 0; cursor: pointer; }
.pm-hsed__ocrwarn { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%;
    background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-bd); font: 700 10px/1 var(--ui); cursor: help; }
.pm-hsed__ocrmiss { color: var(--warn); font-weight: 600; margin: 10px 0 6px; }
.pm-hsed__ocrmisses { display: flex; flex-wrap: wrap; gap: 5px; }
.pm-hsed__ocrchip { padding: 3px 9px; border-radius: 999px; cursor: pointer; font: 600 12px/1.4 var(--ui);
    color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-bd); }
.pm-hsed__ocrchip:hover { background: var(--warn); color: #fff; }
.pm-hsed__sensrow { display: flex; align-items: center; gap: 6px; margin: 8px 0; color: var(--text-soft); }
.pm-hsed__sens { padding: 3px 9px; border-radius: 999px; cursor: pointer; font: 600 12px/1.4 var(--ui);
    color: var(--text); background: var(--surface-2); border: 1px solid var(--border-2); }
.pm-hsed__sens.is-active { background: var(--pm-hot, #1f6fc7); border-color: var(--pm-hot, #1f6fc7); color: #fff; }
.pm-hsed__ocrstats { margin-top: 10px; color: var(--text-soft); font-size: 11.5px; }
.pm-hsed__ocrstats summary { cursor: pointer; }
.pm-hsed__ocrstats ul { margin: 6px 0 0; padding-left: 18px; }
.pm-hsed__act { display: inline-flex; align-items: center; gap: 6px; }
.pm-hsed__act[disabled] { opacity: .55; pointer-events: none; }

@media (max-width: 820px) {
    /* En móvil el panel ocupa el ancho y se ancla abajo, para no tapar el plano. */
    .pm-hsed__ocr { right: 8px; left: 8px; top: auto; bottom: 8px; width: auto; max-height: 52%; }
}

/* Selector de parte con chevron (‹ input ›) */
.pm-hsed__pnnav { display: inline-flex; align-items: center; gap: 4px; }
.pm-hsed__chev { width: 34px; height: 34px; min-width: 34px; border-radius: 8px; cursor: pointer; display: grid; place-items: center;
    font: 800 16px/1 var(--ui); color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); }
.pm-hsed__chev:hover { background: rgba(255,255,255,.28); }
.pm-hsed__pn { min-height: 34px; width: 200px; max-width: 42vw; padding: 5px 10px; border-radius: 8px;
    border: 1px solid var(--border-2); background: var(--surface); color: var(--text); font-size: 13px; }
.pm-hsed__pn:focus { outline: none; border-color: var(--pm-hot, #1f6fc7); }

/* Control de tamaño de los hotspots (porcentual, aplica a todo el plano) */
.pm-hsed__size { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.85); font: 600 12px/1 var(--ui); }
.pm-hsed__size input[type="range"] { width: 130px; accent-color: var(--blue-bright, #3d8be0); cursor: pointer; }
.pm-hsed__size output { min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; color: #fff; }

/* Formato del número del hotspot: mostrar/ocultar + color (blanco / negro con contorno) */
.pm-hsed__style { display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,.85); font: 600 12px/1 var(--ui); }
.pm-hsed__chk { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; }
.pm-hsed__chk input { accent-color: var(--blue-bright, #3d8be0); cursor: pointer; }
.pm-hsed__colors { display: inline-flex; gap: 5px; }
.pm-hsed__colors[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.pm-hsed__color { width: 22px; height: 22px; padding: 0; border-radius: 6px; cursor: pointer;
    border: 1px solid rgba(255,255,255,.35); }
.pm-hsed__color.is-white { background: #fff; }
.pm-hsed__color.is-black { background: #111; }
.pm-hsed__color.is-active { outline: 2px solid var(--blue-bright, #3d8be0); outline-offset: 1px; border-color: #fff; }

/* Selector de parte: etiqueta + chevrons + combobox + contador (tokenizado) */
.pm-hsed__partsel { display: inline-flex; align-items: center; gap: 8px; }
.pm-hsed__partlbl { font: 700 11px/1 var(--ui); letter-spacing: .4px; text-transform: uppercase; color: rgba(255,255,255,.7); }
.pm-hsed__count { font: 700 12px/1 var(--ui); color: rgba(255,255,255,.85); font-variant-numeric: tabular-nums; min-width: 48px; text-align: center; }
.pm-hsed__close { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.25); color: #fff; }
.pm-hsed__close:hover { background: rgba(255,255,255,.28); }

/* Combobox de parte (reemplaza el <datalist> nativo, totalmente tokenizado) */
.pm-hsed__combo { position: relative; display: inline-block; }
.pm-hsed__menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 5; display: none;
    width: max(240px, 100%); max-height: 320px; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-md);
    box-shadow: var(--shadow-lg); padding: 5px;
}
.pm-hsed__combo.is-open .pm-hsed__menu { display: block; }
.pm-hsed__opt {
    width: 100%; display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer;
    padding: 7px 9px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text);
    font: 500 13px/1.3 var(--ui);
}
.pm-hsed__opt:hover { background: var(--surface-2); }
.pm-hsed__opt.is-current { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.pm-hsed__opt.is-empty { color: var(--text-3); cursor: default; justify-content: center; }
.pm-hsed__optpos { flex: none; min-width: 26px; padding: 2px 6px; border-radius: 999px; text-align: center;
    font: 800 11px/1.4 var(--ui); color: var(--primary-tx); background: var(--primary); }
.pm-hsed__optpn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 600 12.5px/1.3 var(--mono, monospace); }

/* Controles de zoom del editor */
.pm-hsed__zoom { display: inline-flex; align-items: center; gap: 4px; }
.pm-hsed__zbtn { width: 34px; height: 34px; min-width: 34px; border-radius: 8px; cursor: pointer; display: grid; place-items: center;
    color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); }
.pm-hsed__zbtn:hover { background: rgba(255,255,255,.28); }

/* (El estilo del número del hotspot —tamaño de fuente adaptativo, color/contorno—
   se define junto a .pm-hotspot más arriba; el font-size lo fija el JS por círculo.) */

/* ═══════════════════ Divisor arrastrable plano/tabla (vista principal) ═══════════════════ */
.pm-split { grid-template-columns: var(--pm-split-left, 42%) 7px 1fr; }
.pm-splitter {
    align-self: stretch; cursor: col-resize; background: var(--border); position: relative; touch-action: none;
    transition: background .15s;
}
.pm-splitter::before { content: ""; position: absolute; inset: 0 -4px; }
.pm-splitter::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 3px; height: 32px; border-radius: 3px; background: var(--text-faint); opacity: .7; }
.pm-splitter:hover { background: var(--primary); }

/* ═══════════════════ Selector de columnas de la tabla BOM ═══════════════════ */
.pm-colmenu { position: relative; display: inline-flex; }
.pm-colmenu__panel {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 8; display: none; min-width: 220px;
    background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-md);
    box-shadow: var(--shadow-lg); padding: 8px;
}
.pm-colmenu.is-open .pm-colmenu__panel { display: block; }
.pm-colmenu__title { font: 800 11px/1 var(--ui); letter-spacing: .5px; text-transform: uppercase; color: var(--text-3); padding: 4px 8px 8px; }
.pm-colmenu__item { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: var(--r-sm);
    cursor: pointer; font: 600 13px/1.2 var(--ui); color: var(--text); }
.pm-colmenu__item:hover { background: var(--surface-2); }
.pm-colmenu__item input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
.pm-col-hidden { display: none !important; }

/* ═══════════════════ Consola admin: chips de añadir, iconos, grip, divisor ═══════════════════ */
/* Ancho redimensionable: arranca en min(1480px, 96vw) y el usuario puede ensanchar la
   ventana flotante arrastrando cualquiera de los dos bordes (crece centrada). */
.pm-admin__panel { position: relative; width: var(--pma-panel-w, min(1480px, 96vw)); max-width: 98vw; }
/* Diálogo Clonar máquina: mismo estiramiento lateral con los mismos .pma-egrip (centrado por
   flex del .adm). Dos clases para ganar especificidad sobre el ancho base de .adm__panel. */
.adm__panel.adm__panel--resizable { position: relative; width: var(--clone-w, 640px); max-width: 96vw; }
.pma-egrip { position: absolute; top: 0; bottom: 0; width: 12px; z-index: 7; cursor: ew-resize; display: none; touch-action: none; }
.pma-egrip--l { left: 0; } .pma-egrip--r { right: 0; }
.pma-egrip::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 3px; height: 46px; border-radius: 3px; background: var(--text-faint); opacity: .45; transition: opacity .15s, background .15s; }
.pma-egrip:hover::after { opacity: 1; background: var(--primary); }
@media (min-width: 821px) { .pma-egrip { display: block; } }
.pm-admin__cols { grid-template-columns: var(--pma-tree-w, 360px) 7px 1fr; gap: 0; }
.pm-admin__detail { border-left: 0; padding-left: 18px; }
.pma-splitter { align-self: stretch; cursor: col-resize; background: var(--border); position: relative; touch-action: none; transition: background .15s; }
.pma-splitter::before { content: ""; position: absolute; inset: 0 -5px; }
.pma-splitter::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 3px; height: 30px; border-radius: 3px; background: var(--text-faint); opacity: .7; }
.pma-splitter:hover { background: var(--primary); }

/* Escritorio: en la vista Catálogo el árbol (sidebar izquierdo) y el detalle tienen su
   PROPIO scroll independiente, en vez de desplazar todo el cuerpo a la vez. La columna del
   árbol puede crecer sin empujar al detalle, y viceversa. (La carga masiva conserva el scroll
   del cuerpo porque su contenido no usa columnas.) */
@media (min-width: 821px) {
    .pm-admin__body--cols { overflow: hidden; }
    .pm-admin__body--cols .pm-admin__cols { height: 100%; min-height: 0; grid-template-rows: minmax(0, 1fr); }
    .pm-admin__body--cols .pm-admin__col { overflow-y: auto; min-height: 0; }
    .pm-admin__body--cols #pma-tree { padding-right: 6px; }
}

/* Chips de añadir (nivel/sección): icono + etiqueta legible, nunca recortado */
.pma-add {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer;
    min-height: 30px; padding: 5px 11px 5px 9px; border-radius: 999px;
    font: 700 12px/1 var(--ui); color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border-2));
    transition: background .15s, color .15s;
}
.pma-add:hover { background: var(--primary); color: var(--primary-tx); }
.pma-add svg { flex: none; }
.pma-addrow { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0; }

/* Iconos de fila (editar/eliminar) legibles, con peligro en eliminar */
.pma-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
    border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text-2); cursor: pointer;
    transition: background .15s, color .15s, border-color .15s; }
.pma-ic:hover { background: var(--surface-3); color: var(--text); }
.pma-ic--del:hover { background: var(--danger-bg, color-mix(in srgb, var(--danger) 14%, transparent));
    color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border-2)); }

/* Botones de fila BOM: nunca recortar el texto */
.pma-mini { white-space: nowrap; }
.pma-rowacts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pma-rowacts .pma-mini { display: inline-flex; align-items: center; gap: 4px; }

/* Reordenar filas BOM por arrastre */
.pma-bomtable th:first-child, .pma-grip { width: 30px; text-align: center; }
.pma-grip { color: var(--text-faint); cursor: grab; touch-action: none; }
.pma-grip:hover { color: var(--text-2); }
.pma-grip svg { vertical-align: middle; }
.pma-bomtable tbody tr { background: var(--surface); }
.pma-row-dragging { background: var(--surface-2) !important; box-shadow: var(--shadow-md); opacity: .92; }
body.pma-reordering { cursor: grabbing; user-select: none; }

@media (max-width: 900px) {
    .pm-split { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .pm-splitter { display: none; }
}
@media (max-width: 820px) {
    .pm-admin__cols { grid-template-columns: 1fr; }
    .pma-splitter { display: none; }
    .pm-admin__detail { padding-left: 0; border-top: 1px solid var(--border); padding-top: 14px; }
}

/* ═══════════════ Kits de repuestos + plan de mantenimiento ═══════════════ */
/* Card de acceso a kits dentro de la rejilla de sistemas (visor). */
.pm-card--kits { outline: 1.5px solid var(--accent, #2f6df6); outline-offset: -1.5px; }
.pm-card--kits .pm-card__ico { color: var(--accent, #2f6df6); }

/* Bloque de kits (visor read-only y cliente de flota). */
.pm-kits { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.pm-kit { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.pm-kit__head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.pm-kit__name { font-weight: 700; font-size: 14px; }
.pm-kit__pn { font: 700 11px/1.4 var(--mono, ui-monospace, monospace); color: var(--accent, #2f6df6);
    background: color-mix(in srgb, var(--accent, #2f6df6) 12%, transparent); padding: 2px 8px; border-radius: 999px; }
.pm-kit__per { font: 700 11px/1.4 var(--ui); color: var(--text-2);
    background: var(--surface-2); border: 1px solid var(--border); padding: 2px 8px; border-radius: 999px; }
.pm-kit__desc { font-size: 12px; color: var(--text-3); }
/* Kits colapsables en la vista de usuario (<details>/<summary>, sin JS). */
summary.pm-kit__head { cursor: pointer; list-style: none; user-select: none; }
summary.pm-kit__head::-webkit-details-marker { display: none; }
.pm-kit__head::before { content: ""; flex: none; width: 0; height: 0; transition: transform .15s ease;
    border-left: 5px solid var(--text-3); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
details.pm-kit[open] > .pm-kit__head::before { transform: rotate(90deg); }
.pm-kit__count { margin-left: auto; flex: none; font: 600 11px/1 var(--ui); color: var(--text-3);
    padding: 3px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
/* Botón «Agregar kit a la cotización» en el encabezado del kit (mismo look que .pm-qadd). */
.pm-kit__quote { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px;
    border-radius: var(--r-sm); border: 1px solid var(--border-2); background: var(--surface);
    color: var(--text-2); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.pm-kit__quote:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.pm-kit__quote:focus-visible { outline: 2px solid var(--sb-focus); outline-offset: 1px; }
details.pm-kit:not([open]) > .pm-kit__head { border-bottom: none; }
.pm-kit__tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pm-kit__tbl th { text-align: left; padding: 7px 14px; color: var(--text-3); font-weight: 600; font-size: 11.5px; border-bottom: 1px solid var(--border); }
.pm-kit__tbl td { padding: 7px 14px; border-bottom: 1px solid var(--border); }
.pm-kit__tbl tr:last-child td { border-bottom: none; }
.pm-kit__tbl em { color: var(--text-3); font-style: normal; }
.pm-kit__empty { color: var(--text-3); text-align: center; padding: 12px; }

.pm-maint { margin-top: 8px; }
.pm-maint__title, .fleet-model__sub { font-size: 13px; font-weight: 700; margin: 0 0 10px; }

/* ── Editor de kits en la consola admin (parts_admin.js) ── */
.pmk { display: flex; flex-direction: column; gap: 14px; }
.pmk-kit { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.pmk-pngen { display: flex; align-items: center; gap: 8px; }
.pmk-pngen__input { flex: 1 1 auto; }
.pmk-pngen__gen { flex: none; white-space: nowrap; }
.pmk-tabpane.is-hidden, .pmk-tab.is-hidden { display: none; }
.pmk-tabs { margin-bottom: 14px; }
/* Selector de versión del panel Kits/Plan/Seriales: filtra los tres tabs por versión de modelo. */
.pmk-verbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pmk-verbar label { font: 600 12px/1.4 var(--ui); color: var(--text-2); }
.pmk-verbar select { min-height: 32px; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text); font: 500 13px/1.4 var(--ui); }
.pmk-verbar__hint { font: 500 11.5px/1.4 var(--ui); color: var(--text-3); }
.pmk-kit__per { font: 700 11px/1.4 var(--ui); color: var(--accent, #2f6df6);
    background: color-mix(in srgb, var(--accent, #2f6df6) 12%, transparent); padding: 2px 8px; border-radius: 999px; }
.pmk-kit__per.is-none { color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border); }
.pmk-kit__pn { font: 700 11px/1.4 var(--mono, ui-monospace, monospace); color: var(--text-2);
    background: var(--surface-2); border: 1px solid var(--border); padding: 2px 8px; border-radius: 999px; }
.pmk-kit__head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--surface-2);
    border-bottom: 1px solid var(--border); cursor: pointer; user-select: none; }
.pmk-kit__head:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.pmk-kit__toggle { flex: none; display: inline-flex; align-items: center; color: var(--text-3); transition: transform .15s ease; }
.pmk-kit__head[aria-expanded="true"] .pmk-kit__toggle { transform: rotate(90deg); }
.pmk-kit__name { font-weight: 700; font-size: 13.5px; }
.pmk-kit__desc { font-size: 12px; color: var(--text-3); }
.pmk-kit__count { flex: none; font: 600 11px/1 var(--ui); color: var(--text-3);
    padding: 3px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
.pmk-kit.is-collapsed .pmk-kit__head { border-bottom: none; }
.pmk-kit.is-collapsed .pmk-kit__body { display: none; }
.pmk-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pmk-tbl th { text-align: left; padding: 6px 12px; font-size: 11px; color: var(--text-3); font-weight: 600; border-bottom: 1px solid var(--border); }
.pmk-tbl td { padding: 5px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.pmk-tbl .pmk-pn { font-weight: 600; white-space: nowrap; }
.pmk-tbl .pmk-de { color: var(--text-2); }
.pmk-tbl .pmk-empty td { color: var(--text-3); text-align: center; padding: 10px; }
.pmk-qty { width: 64px; padding: 3px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text-1); font: inherit; }
.pmk-tbl .pmk-per-c { color: var(--text-3); white-space: nowrap; }
/* Modal «Agregar partes al kit»: buscador + lista de resultados (TPDialog.custom, parts_admin.js).
   Vive dentro del overlay del diálogo (no hay clipping/stacking de la tarjeta del kit).
   El diálogo (.tp-dlg--kitpick) se ensancha y es redimensionable libremente por el usuario. */
.tp-dlg.tp-dlg--kitpick {
    width: min(640px, 96vw); max-width: 96vw;
    height: min(520px, 86vh); max-height: 92vh;
    min-width: 300px; min-height: 260px;
    resize: both; overflow: hidden;          /* el scroll vive en la lista; arrastra la esquina ↘ para regular */
    display: flex; flex-direction: column;
}
.tp-dlg--kitpick .tp-dlg__body { flex: 1 1 auto; min-height: 0; }
.tp-dlg--kitpick .pmk-pick { flex: 1 1 auto; min-height: 0; }
.pmk-pick { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.pmk-pick__search { position: relative; display: flex; align-items: center; }
.pmk-pick__search svg { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--text-3); pointer-events: none; }
.pmk-pick__search input { width: 100%; padding: 9px 12px 9px 34px; border: 1px solid var(--border); border-radius: 9px;
    background: var(--surface-2); color: var(--text-1); font: inherit; }
.pmk-pick__search input:focus { outline: none; border-color: var(--primary); }
.pmk-pick__results { flex: 1 1 auto; min-height: 0; border: 1px solid var(--border); border-radius: 9px;
    background: var(--surface); overflow: auto; }
.pmk-pick__count { flex: none; min-height: 16px; font-size: 12px; color: var(--text-3); }
.pmk-res { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 12.5px; border-bottom: 1px solid var(--border); }
.pmk-res:last-child { border-bottom: none; }
.pmk-res__info { flex: 1 1 auto; min-width: 0; }
.pmk-res__info b { margin-right: 6px; white-space: nowrap; }
.pmk-res__info span { color: var(--text-3); }
.pmk-res__add { flex: none; }
.pmk-res__in { flex: none; display: inline-flex; align-items: center; gap: 5px; color: var(--ok, #30a46c); font-weight: 700; font-size: 12px; }
.pmk-res--empty { justify-content: center; color: var(--text-3); cursor: default; }

/* ── Matriz de mantenimiento (maintenance.js, compartida) ── */
.tpm { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 12px 14px; }
.tpm-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.tpm-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.tpm-tg { padding: 6px 14px; background: var(--surface); color: var(--text-2); border: none; cursor: pointer; font: inherit; font-size: 12.5px; }
.tpm-tg + .tpm-tg { border-left: 1px solid var(--border); }
.tpm-tg.is-active { background: var(--accent, #2f6df6); color: #fff; }
.tpm-horizon { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.tpm-horizon.is-hidden { display: none; }
.tpm-horizon select { font: inherit; font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-1); }
.tpm-cart { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 600; color: #fff; background: var(--accent, #2f6df6); border: none; border-radius: 8px; cursor: pointer; }
.tpm-cart:hover:not(:disabled) { filter: brightness(1.05); }
.tpm-cart:disabled { opacity: .5; cursor: default; }
.tpm-cart.is-hidden { display: none; }
.tpm-explain { font-size: 12px; color: var(--text-3); margin: 0 0 10px; line-height: 1.5; }
.tpm-tblwrap { overflow-x: auto; }
.tpm-tbl { border-collapse: collapse; font-size: 12.5px; min-width: 100%; }
.tpm-tbl th, .tpm-tbl td { border: 1px solid var(--border); padding: 6px 10px; text-align: center; white-space: nowrap; }
.tpm-tbl th { background: var(--surface-2); color: var(--text-3); font-weight: 600; font-size: 11.5px; }
.tpm-part { text-align: left !important; }
.tpm-tbl td.tpm-part { display: table-cell; }
.tpm-part b { display: block; }
.tpm-part span { display: block; color: var(--text-3); font-size: 11px; }
.tpm-on { background: color-mix(in srgb, var(--accent, #2f6df6) 14%, transparent); color: var(--text-1); font-weight: 700; }
.tpm-carry { color: var(--text-3); font-weight: 500; }
.tpm-off { color: var(--border); }
.tpm-tbl th.tpm-total, .tpm-tbl td.tpm-total { background: color-mix(in srgb, var(--accent, #2f6df6) 8%, var(--surface-2)); font-weight: 700; }
.tpm-tbl td.tpm-total { color: var(--text-1); }
.tpm-kitsum { margin-top: 10px; font-size: 12px; color: var(--text-2); line-height: 1.5; }
.tpm-kitsum b { color: var(--text-1); }
.tpm-empty { color: var(--text-3); font-size: 12.5px; padding: 8px 2px; }

/* Kits derivados por hito (tarjetas colapsables; maintenance.js renderDerivedKits) */
.tpm-dk { display: flex; flex-direction: column; gap: 8px; }
.tpm-dk__kit { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; }
.tpm-dk__head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer;
    user-select: none; list-style: none; background: var(--surface-2); }
.tpm-dk__head::-webkit-details-marker { display: none; }
.tpm-dk__name { font-weight: 700; font-size: 13px; }
.tpm-dk__count { margin-left: auto; font-size: 11.5px; color: var(--text-3); }
.tpm-dk__tbl { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.tpm-dk__tbl th, .tpm-dk__tbl td { border-top: 1px solid var(--border); padding: 6px 12px; text-align: left; }
.tpm-dk__tbl th { background: var(--surface); color: var(--text-3); font-weight: 600; font-size: 11.5px; }

/* ═══════════════ BASE DE DATOS DE PARTES (catálogo global) ═══════════════ */
.pm-muted { color: var(--text-faint); }

/* Chip de criticidad: rojo (alta) / ámbar (media) / verde (baja). */
.pm-crit { display: inline-block; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
    font: 800 10.5px/1.5 var(--ui); text-transform: uppercase; letter-spacing: .4px; border: 1px solid transparent; }
.pm-crit--alta  { color: var(--danger); background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.pm-crit--media { color: var(--warn);   background: var(--warn-bg);   border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.pm-crit--baja  { color: var(--ok);     background: var(--ok-bg);     border-color: color-mix(in srgb, var(--ok) 35%, transparent); }

/* Pestañas Individual / Consulta por lista */
.pm-cat__tabs { display: inline-flex; gap: 4px; padding: 3px; margin-bottom: 16px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; }
.pm-cat__tab { padding: 7px 16px; border: none; border-radius: 999px; cursor: pointer;
    background: transparent; color: var(--text-2); font: 700 12.5px/1 var(--ui); transition: background .15s, color .15s; }
.pm-cat__tab:hover { color: var(--text); }
.pm-cat__tab.is-active { background: var(--primary); color: var(--primary-tx); }

/* Barra de herramientas (filtro / acciones colectiva + menú de columnas) */
.pm-cat__toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pm-cat__search { flex: 1 1 280px; }
.pm-cat__search input { width: 100%; max-width: none; }
.pm-cat__collbar { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.pm-cat__count { font: 600 12.5px/1.4 var(--ui); color: var(--text-3); margin-bottom: 8px; }
.pm-cat__more { display: flex; justify-content: center; padding: 14px 0; }

/* Caja de pegado inteligente + chips + contador */
.pm-paste { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); padding: 12px; margin-bottom: 12px; }
.pm-paste__ta { width: 100%; resize: vertical; min-height: 92px; padding: 10px 12px;
    font: 500 13px/1.5 var(--mono, monospace); color: var(--text);
    background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-sm); }
.pm-paste__ta:focus { outline: none; border-color: var(--primary); }
.pm-paste__foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.pm-paste__count { font: 600 12.5px/1.3 var(--ui); color: var(--text-3); }
.pm-paste__count.is-over { color: var(--danger); font-weight: 800; }
.pm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pm-chips:empty { display: none; }
.pm-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px;
    font: 600 11.5px/1.4 var(--ui); color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border-2); }
.pm-chip b { color: var(--primary-tx-strong, var(--text)); font-weight: 800; }
.pm-chip--more { color: var(--text-3); font-style: italic; }

/* Banner de referencias no encontradas (tono ámbar de advertencia) */
.pm-cat__missing:empty { display: none; }
.pm-cat__missingbox { color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-bd);
    border-radius: var(--r-md); padding: 10px 12px; margin-bottom: 10px; font: 500 12.5px/1.5 var(--ui); }

/* Píldora de la lista de nº pegados: «N nºs · Editar · limpiar» (a la derecha del buscador) */
.pm-cat__pnpill { display: inline-flex; align-items: center; gap: 6px; }
.pm-cat__pnpill:empty { display: none; }
.pm-cat__pnbtn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--border-2); color: var(--text); cursor: pointer;
    font: 700 12.5px/1 var(--ui); transition: border-color .15s, color .15s; }
.pm-cat__pnbtn:hover { border-color: var(--primary); color: var(--primary); }
.pm-cat__pnedit { color: var(--text-3); font-style: italic; font-weight: 600; }
.pm-cat__pnbtn:hover .pm-cat__pnedit { color: var(--primary); }
.pm-cat__pnmiss { font: 600 11px/1 var(--ui); color: var(--danger); }
.pm-cat__pnclear { display: inline-flex; padding: 4px; border: 0; background: transparent; color: var(--text-3);
    border-radius: 6px; cursor: pointer; }
.pm-cat__pnclear:hover { color: var(--danger); background: var(--surface-2); }

/* Botón «i» con nota informativa de las funciones de búsqueda (anclada junto al buscador) */
.pm-cat__info { position: relative; display: inline-flex; }
.pm-cat__infobtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
    padding: 0; border-radius: 999px; background: var(--surface); border: 1px solid var(--border-2);
    color: var(--text-3); cursor: pointer; transition: border-color .15s, color .15s; }
.pm-cat__infobtn:hover { border-color: var(--primary); color: var(--primary); }
.pm-cat__info.is-open .pm-cat__infobtn { border-color: var(--primary); color: var(--primary); }
.pm-cat__infopop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: min(340px, 84vw);
    display: none; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-md); box-shadow: var(--shadow-2, 0 8px 24px rgba(0,0,0,.16));
    font: 500 12.5px/1.55 var(--ui); color: var(--text-2); }
.pm-cat__info.is-open .pm-cat__infopop { display: block; }
.pm-cat__infopop strong { display: block; margin-bottom: 8px; color: var(--text); font-size: 13px; }
.pm-cat__infopop ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.pm-cat__infopop b { color: var(--text); }
.pm-cat__infonote { display: block; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border);
    color: var(--text-3); font-size: 12px; }

/* Editor modal de la lista de nº pegados: acciones (plantilla/subir) + vista previa en chips */
.pm-pnedit__tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pm-pnedit__preview { margin-top: 12px; }
.pm-pnedit__count { font: 700 11px/1 var(--ui); color: var(--text-3); text-transform: uppercase;
    letter-spacing: .04em; margin-bottom: 8px; }
.pm-chips--modal { max-height: 42vh; overflow: auto; }
.pm-chip--missing { color: var(--danger); border-color: var(--danger); background: var(--danger-bg, transparent); }
.pm-btn--sm { padding: 5px 10px; font-size: 12px; }

/* Tabla del catálogo: columnas configurables (ancho fijo por <col>, cabecera arrastrable/redimensionable) */
.pm-ctable-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.pm-ctable { border-collapse: collapse; width: 100%; min-width: max-content; table-layout: fixed; font: 500 13px/1.4 var(--ui); }
.pm-ctable thead th { position: sticky; top: 0; z-index: 1; text-align: left; user-select: none;
    background: var(--surface-2); color: var(--text-2); font: 700 11.5px/1.3 var(--ui);
    padding: 9px 12px; border-bottom: 2px solid var(--border); white-space: nowrap; }
.pm-ctable td { padding: 8px 12px; border-bottom: 1px solid var(--hairline); vertical-align: middle;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-ctable tbody tr { cursor: pointer; transition: background .12s; }
.pm-ctable tbody tr:hover { background: var(--surface-2); }
.pm-ctable thead th.pm-num, .pm-ctable td.pm-num { text-align: right; font-variant-numeric: tabular-nums; }
.pm-ctable .pm-pn { font: 600 12.5px/1.3 var(--mono, monospace); color: var(--primary-tx-strong, var(--text)); }
.pm-ctable td.pm-empty { white-space: normal; text-align: center; color: var(--text-3); padding: 30px; }
/* Cabecera arrastrable (grip) + etiqueta + handle de ancho (col-resize). */
.pm-ch__grip { display: inline-flex; vertical-align: middle; margin-right: 4px; color: var(--text-faint); cursor: grab; }
.pm-ch__grip:hover { color: var(--text-2); }
.pm-ch__grip:active { cursor: grabbing; }
.pm-ch__lbl { vertical-align: middle; }
.pm-ch__resize { position: absolute; top: 0; right: 0; width: 8px; height: 100%; cursor: col-resize; touch-action: none; }
.pm-ch__resize:hover { background: color-mix(in srgb, var(--primary) 32%, transparent); }
.pm-ctable th.sortable-ghost { opacity: .4; }
.pm-ctable th.sortable-drag { background: var(--surface-3); }

/* Cesta de cotización: botón «Cotizar» por fila (listado global y tabla BOM del plano).
   Objetivo táctil compacto en escritorio; crece a --tap en móvil. */
.pm-qadd, .pm-goplano {
    display: inline-grid; place-items: center; width: 28px; height: 28px;
    border-radius: var(--r-sm); cursor: pointer;
    border: 1px solid var(--border-2); background: var(--surface); color: var(--text-2);
    transition: background .15s, color .15s, border-color .15s;
}
.pm-qadd:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
/* «Ver en el plano»: azul primario para diferenciarlo del carrito (navy). */
.pm-goplano:hover { background: var(--primary); border-color: var(--primary); color: var(--primary-tx, #fff); }
.pm-qadd:focus-visible, .pm-goplano:focus-visible { outline: 2px solid var(--sb-focus); outline-offset: 1px; }
.pm-qcell, .pm-ctable td[data-col="quote"], .pm-ctable td[data-col="goto"] { text-align: center; }
@media (max-width: 640px) {
    .pm-qadd, .pm-goplano { width: 38px; height: 38px; }
}

/* Ficha de parte: fila de metadatos comerciales (incluye criticidad). */
.pm-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pm-detail-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 4px 0 14px; }
.pm-detail-meta__item { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1.4 var(--ui); color: var(--text-2); }

/* Botones del encabezado del catálogo: que envuelvan en pantallas chicas. */
@media (max-width: 640px) {
    .pm-head[style] { flex-wrap: wrap; }
    .pm-cat__tabs { width: 100%; justify-content: center; }
}

/* ═══════════════════════ Tabla maestra de part numbers (.pmm-*) ═══════════════════════ */
.pmm { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 10px; }
.pmm__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pmm__search { position: relative; display: inline-flex; align-items: center; gap: 6px; min-width: 240px;
    flex: 1 1 240px; max-width: 420px; overflow: hidden; }
.pmm__search.has-chips { max-width: 640px; flex: 2 1 400px; }
.pmm__search input { flex: 1 1 auto; min-width: 70px; width: 100%; padding: 7px 30px 7px 10px;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text); font: 500 13px/1.3 var(--ui); }
.pmm__search > svg { position: absolute; right: 9px; color: var(--text-3); pointer-events: none; }
.pmm__lead { display: inline-flex; align-items: center; font: 600 12px/1 var(--ui); color: var(--text-2); }
.pmm__lead select, .pmm__foot select { padding: 4px 6px; border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text); font: 500 12px/1 var(--ui); }

.pmm__scroll { flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.pmm__table { border-collapse: separate; border-spacing: 0; width: 100%; font: 500 12.5px/1.35 var(--ui); }
.pmm__table th, .pmm__table td { padding: 6px 9px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.pmm__table td { color: var(--text); max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
.pmm__hr th { position: sticky; top: 0; z-index: 3; background: var(--surface-2); cursor: pointer; user-select: none;
    font: 700 12px/1.2 var(--ui); color: var(--text); }
.pmm__hr th:hover { background: var(--surface-3); }
.pmm__th { display: inline-flex; align-items: center; gap: 3px; }
.pmm__sort { color: var(--primary); font-size: 10px; }
.pmm__fr th { position: sticky; top: 30px; z-index: 2; background: var(--surface-2); padding: 4px 6px; border-bottom: 2px solid var(--border-2); }
.pmm__filter { width: 100%; min-width: 60px; padding: 3px 5px; border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text); font: 500 11.5px/1.2 var(--ui); }
.pmm__table tbody tr { cursor: pointer; }
.pmm__table tbody tr:hover td { background: var(--surface-2); }
.pmm__loading, .pmm__empty { padding: 16px; color: var(--text-3); text-align: center; }
.pmm__pn { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.pmm__icon { display: inline-flex; padding: 2px; border: 0; background: transparent; color: var(--text-3); cursor: pointer; border-radius: 4px; }
.pmm__icon:hover { color: var(--primary); background: var(--surface-3); }
.pmm__usage { border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); border-radius: 999px;
    padding: 1px 8px; font: 600 11.5px/1.4 var(--ui); cursor: pointer; }
.pmm__usage:hover { border-color: var(--primary); color: var(--primary); }
.pmm__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Header: botón-icono (Columnas) + menús agrupados (Clasificaciones / Import·Export) ── */
.pmm__iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 32px;
    border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text-2); cursor: pointer; }
.pmm__iconbtn:hover { border-color: var(--primary); color: var(--primary); background: var(--surface-2); }
.pmm-menu { position: relative; display: inline-flex; }
.pmm-menu__trigger { display: inline-flex; align-items: center; gap: 5px; }
.pmm-menu__trigger svg:last-child { color: var(--text-3); }
.pmm-menu__list { position: absolute; top: calc(100% + 4px); right: 0; z-index: 40; min-width: 220px; margin: 0;
    list-style: none; padding: 6px; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-md); box-shadow: 0 12px 32px rgba(0, 0, 0, .18); display: none; }
.pmm-menu.is-open .pmm-menu__list { display: block; }
.pmm-menu__list li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-sm);
    font: 600 12.5px/1.2 var(--ui); color: var(--text); cursor: pointer; white-space: nowrap; }
.pmm-menu__list li:hover { background: var(--surface-2); color: var(--primary); }
.pmm-menu__sep { height: 1px; margin: 4px 2px; padding: 0; background: var(--border); pointer-events: none; }

/* ── Barra de filtros global (chips estilo Odoo) ── */
.pmm-filterbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pmm-fbtn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px dashed var(--border-2);
    border-radius: 999px; background: var(--surface); color: var(--text-2); cursor: pointer; font: 600 12px/1.2 var(--ui); }
.pmm-fbtn:hover { border-color: var(--primary); color: var(--primary); }
.pmm-fbtn--toggle { border-style: solid; }
.pmm-fbtn--toggle.is-active { border-color: var(--primary); color: var(--primary); background: var(--surface-2); }
.pmm-fchips { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.pmm-fchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px; border-radius: 999px;
    font: 600 11.5px/1.4 var(--ui); color: var(--text); background: var(--surface-2); border: 1px solid var(--border-2); }
.pmm-fchip b { font-weight: 800; color: var(--text-2); }
.pmm-fchip__x, .pmm-qchip__x { display: inline-flex; padding: 2px; border: 0; background: transparent;
    color: var(--text-3); cursor: pointer; border-radius: 999px; }
.pmm-fchip__x:hover, .pmm-qchip__x:hover { color: var(--danger); background: var(--surface-3); }
/* Popover del formulario «Añadir filtro» (reusa .pmm-menu, abre hacia la izquierda). */
.pmm-menu--filter .pmm-menu__list { left: 0; right: auto; min-width: 260px; padding: 12px; }
.pmm-ff-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.pmm-ff-row > label { font: 700 11px/1 var(--ui); color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; }
.pmm-ff-row select, .pmm-ff-row input { padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text); font: 500 12.5px/1.2 var(--ui); }
.pmm-ff-range { display: inline-flex; align-items: center; gap: 6px; }
.pmm-ff-range input { width: 92px; }
.pmm-ff-actions { display: flex; justify-content: flex-end; }

/* ── Chips de nº de parte pegados dentro de la barra de búsqueda (una sola línea, sin crecer) ── */
.pmm-qchips { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.pmm-qchips:empty { display: none; }
.pmm-qchips__list { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
.pmm-qchips__ctrl { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.pmm-qchip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px 2px 8px; border-radius: 999px;
    font: 600 11px/1.4 var(--mono, monospace); color: var(--text); background: var(--surface-2);
    border: 1px solid var(--border-2); max-width: 150px; }
.pmm-qchip__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmm-qchip--missing { color: var(--danger); border-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 12%, transparent); }
.pmm-qchip--more, .pmm-qchip--clear { cursor: pointer; font-style: italic; color: var(--text-3);
    background: transparent; border-color: transparent; }
.pmm-qchip--more:hover, .pmm-qchip--clear:hover { color: var(--primary); }
.pmm-qchips--modal { flex-wrap: wrap; max-width: none; max-height: 46vh; overflow: auto; margin-top: 8px; }

/* ── Selector de idioma de la barra (mismo look que Lead time) ── */
.pmm__lang { display: inline-flex; align-items: center; font: 600 12px/1 var(--ui); color: var(--text-2); }
.pmm__lang select { padding: 4px 6px; border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text); font: 600 12px/1 var(--ui); }
/* Etiqueta de idioma junto a una descripción traducida (celda de la tabla). */
.pmm-langtag { display: inline-block; margin-left: 5px; padding: 0 4px; border-radius: 4px; vertical-align: middle;
    font: 700 9px/1.5 var(--ui); letter-spacing: .04em; color: var(--text-3); background: var(--surface-3); }

/* ── Píldora de nº de parte pegados (a la derecha del buscador) + editor ── */
.pmm-pnpill { display: inline-flex; align-items: center; gap: 6px; }
.pmm-pnpill:empty { display: none; }
.pmm-pnpill__btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
    border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text); cursor: pointer;
    font: 600 12px/1 var(--ui); }
.pmm-pnpill__btn:hover { border-color: var(--primary); color: var(--primary); }
.pmm-pnpill__edit { color: var(--text-3); font-style: italic; }
.pmm-pnpill__btn:hover .pmm-pnpill__edit { color: var(--primary); }
.pmm-pnpill__miss { font: 600 11px/1 var(--ui); color: var(--danger); }
.pmm-pnpill__clear { display: inline-flex; padding: 4px; border: 0; background: transparent; color: var(--text-3);
    cursor: pointer; border-radius: 999px; }
.pmm-pnpill__clear:hover { color: var(--danger); background: var(--surface-3); }
.pmm-pnedit__preview { margin-top: 10px; }
.pmm-pnedit__count { font: 700 11px/1 var(--ui); color: var(--text-3); text-transform: uppercase;
    letter-spacing: .03em; margin-bottom: 6px; }

/* ── Menú contextual de celda (click derecho: copiar / rellenar) ── */
.pmm-ctxmenu { position: fixed; z-index: 1200; min-width: 200px; padding: 4px; border-radius: var(--r-sm);
    background: var(--surface); border: 1px solid var(--border-2); box-shadow: 0 8px 26px rgba(0,0,0,.22); }
.pmm-ctxmenu__item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0;
    border-radius: var(--r-sm); background: transparent; color: var(--text); cursor: pointer;
    font: 600 12.5px/1.2 var(--ui); text-align: left; }
.pmm-ctxmenu__item:hover { background: var(--surface-2); color: var(--primary); }
.pmm-ctxmenu__hint { padding: 5px 10px 3px; font: 500 11px/1.3 var(--ui); color: var(--text-3); }

/* ── Item discreto del menú Clasificaciones (Normalizar descripciones) + bloque i18n del editor ── */
.pmm-menu__mini { font-size: 12px !important; color: var(--text-3) !important; }
.pmm-menu__mini svg { opacity: .7; }
.pmm-ed__i18n { border: 1px dashed var(--border-2); border-radius: var(--r-sm); padding: 6px 10px 10px; }
.pmm-ed__i18nhead { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    font: 700 11.5px/1.4 var(--ui); color: var(--text-2); list-style: none; }
.pmm-ed__i18nhead::-webkit-details-marker { display: none; }
.pmm-ed__i18n[open] .pmm-ed__i18nhead { margin-bottom: 8px; }

/* Diálogos del maestro (sobre el ancho base de .tp-dlg de style.css). */
.tp-dlg.pmm-dlg { max-width: 560px; width: min(92vw, 560px); }
.tp-dlg.pmm-dlg--wide { max-width: 860px; width: min(95vw, 860px); }

/* Selector de columnas. */
.pmm-collist { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 52vh; overflow: auto; }
.pmm-coli { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); }
.pmm-coli__grip { color: var(--text-3); cursor: grab; display: inline-flex; }
.pmm-coli label { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1.2 var(--ui); }

/* Tablas de historial / usos. */
.pmm-hist { width: 100%; border-collapse: collapse; font: 500 12.5px/1.4 var(--ui); }
.pmm-hist th, .pmm-hist td { padding: 5px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.pmm-hist th { color: var(--text-2); font-weight: 700; }

/* Listas de categorías / criticidades. */
.pmm-catlist { list-style: none; margin: 8px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; }
.pmm-catitem { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px;
    border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); }
.pmm-catitem__act { display: inline-flex; gap: 6px; flex-shrink: 0; }

/* Editor de parte. */
.pmm-ed { display: flex; flex-direction: column; gap: 10px; }
.pmm-ed__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.pmm-ed__grid--mac { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pmm-ed__f { display: flex; flex-direction: column; gap: 3px; }
.pmm-ed__f--wide { grid-column: 1 / -1; }
.pmm-ed__f label, .pmm-ed__lbl { font: 700 11.5px/1.2 var(--ui); color: var(--text-2); }
.pmm-ed__f input, .pmm-ed__f select, .pmm-ed__f textarea {
    padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text); font: 500 13px/1.3 var(--ui); }
.pmm-ed__price { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 8px 10px;
    background: var(--surface-2); border-radius: var(--r-sm); font: 600 13px/1.3 var(--ui); }
.pmm-ed__h { margin: 6px 0 0; font: 700 13px/1.2 var(--ui); color: var(--text); }
.pmm-ed__actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; }

/* Sub-tabla de proveedores. */
.pmm-sup { width: 100%; border-collapse: collapse; font: 500 12.5px/1.3 var(--ui); }
.pmm-sup th { text-align: left; color: var(--text-2); font-weight: 700; padding: 4px 6px; }
.pmm-sup td { padding: 3px 6px; }
.pmm-sup input[type=text], .pmm-sup input[type=number], .pmm-sup select { width: 100%; padding: 5px 7px; border: 1px solid var(--border);
    border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: 500 12.5px/1.2 var(--ui); }

/* Editor de fórmula natural. */
.pmm-formula { display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--surface-2); border-radius: var(--r-sm); }
.pmm-formula__base { font: 700 13px/1.2 var(--ui); color: var(--text); }
.pmm-steps { display: flex; flex-direction: column; gap: 6px; }
.pmm-step { display: flex; align-items: center; gap: 6px; }
.pmm-step__op { width: 56px; padding: 5px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: 600 14px/1 var(--ui); }
.pmm-step__val { flex: 1; padding: 5px 7px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: 500 13px/1.2 var(--ui); }
.pmm-formula__prev { padding: 2px 2px 0; }

@media (max-width: 640px) {
    .pmm-ed__grid, .pmm-ed__grid--mac { grid-template-columns: 1fr; }
}

/* ── Asistente de fusión de duplicados (rediseño): header + lista scrollable + footer fijos.
   Mismo patrón que .tp-dlg--regen: el diálogo es columna flex con overflow oculto y el scroll
   vive SOLO en la lista. */
.tp-dlg.pmm-dup-dlg, .tp-dlg.pmm-import-dlg {
    max-height: min(88vh, 860px); display: flex; flex-direction: column; overflow: hidden;
}
.pmm-dup-dlg .tp-dlg__body, .pmm-import-dlg .tp-dlg__body {
    flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0;
}
/* Header fijo (tabs + toggle genéricos + ayuda). */
.pmm-dup__head { flex: none; display: flex; flex-direction: column; gap: 8px; padding-bottom: 10px; }
.pmm-dup__head .adm__hint { margin: 0; }
/* Lista scrollable de grupos. */
.pmm-dup__scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 2px 2px 4px; }
/* Footer fijo con contador + Aplicar cambios global. */
.pmm-dup__foot { flex: none; position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px;
    padding: 10px 2px 2px; margin-top: 2px; background: var(--surface); border-top: 1px solid var(--border); }

/* Tarjeta de grupo (más compacta que v1). */
.pmm-dup { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 10px; margin-bottom: 8px; background: var(--surface); }
.pmm-dup--generic { border-color: var(--warn-bd); background: color-mix(in srgb, var(--warn-bg) 40%, transparent); }
.pmm-dup__h { display: flex; align-items: center; gap: 7px; font: 600 13px/1.3 var(--ui); color: var(--text); margin-bottom: 5px; }
/* Check de inclusión del subgrupo completo en la ejecución. */
.pmm-dup__gsel { display: inline-flex; align-items: center; cursor: pointer; }
.pmm-dup__gsel input { cursor: pointer; }
/* Subgrupo excluido de esta ejecución: se atenúa y no acepta interacción en su lista. */
.pmm-dup--off { opacity: .5; }
.pmm-dup--off .pmm-dup__list { pointer-events: none; }
/* Barra de acciones masivas sobre los subgrupos. */
.pmm-dup__bulk { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pmm-dup__bulk .adm__hint { margin: 0; margin-right: 2px; }
/* Grupos largos: la lista de partes tiene su propio scroll para no dominar el modal. */
.pmm-dup__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; max-height: 260px; overflow: auto; }
.pmm-dup__list label { display: flex; align-items: baseline; gap: 7px; font: 500 12.5px/1.35 var(--ui); cursor: pointer; }
.pmm-dup__list input[type=radio] { margin-top: 2px; }
.pmm-dup__row { display: flex; align-items: baseline; gap: 10px; }
.pmm-dup__keep { display: inline-flex; align-items: center; gap: 4px; font: 600 11.5px/1.4 var(--ui);
    color: var(--text-2); white-space: nowrap; cursor: pointer; }
.pmm-dup__inc { display: inline-flex; align-items: center; cursor: pointer; }
.pmm-dup__pn { font: 500 12.5px/1.35 var(--ui); color: var(--text); min-width: 0; }
/* Pestañas del diálogo de duplicados + toggle de coincidencias genéricas. */
.pmm-dup__tabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pmm-tab { padding: 5px 12px; border: 1px solid var(--border-2); border-radius: 999px;
    background: var(--surface); color: var(--text-2); font: 600 12px/1.4 var(--ui); cursor: pointer; }
.pmm-tab:hover { color: var(--text); background: var(--surface-2); }
.pmm-tab.is-active { color: var(--primary); border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, transparent); }
.pmm-dup__gen { display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
    font: 600 11.5px/1.4 var(--ui); color: var(--text-2); cursor: pointer; }

/* Etiqueta de advertencia reutilizable (grupos genéricos, sobrescrituras…). */
.pm-tag--warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-bd); }

/* ── Modal de previsualización de importación. */
.pmm-import-dlg #pmm-imp-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pmm-imp__head { flex: none; display: flex; flex-direction: column; gap: 8px; padding-bottom: 10px; }
.pmm-imp__head .adm__hint { margin: 0; }
.pmm-imp__stats { display: flex; flex-wrap: wrap; gap: 6px; }
.pmm-imp__cols { font: 500 11.5px/1.7 var(--ui); color: var(--text-2); }
.pmm-imp__cols code { background: var(--surface-3); border-radius: 4px; padding: 1px 6px; font-size: 11px; }
.pmm-imp__opts { display: flex; flex-direction: column; gap: 4px; }
.pmm-imp__opts label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.pmm-imp__scroll { flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid var(--border); border-radius: var(--r-md); }
.pmm-imp__foot { flex: none; position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px;
    padding: 10px 2px 2px; margin-top: 2px; background: var(--surface); border-top: 1px solid var(--border); }
.pmm-prev__legend { font: 500 11.5px/1.4 var(--ui); color: var(--text-3); }

/* Tabla de previsualización por fila. */
.pmm-prev th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); }
.pmm-prev__num { color: var(--text-3); text-align: right; }
.pmm-prev__code { white-space: nowrap; }
.pmm-prev__desig { white-space: normal; max-width: 340px; }
.pmm-prev__cnt { text-align: center; white-space: nowrap; }
.pmm-arrow { color: var(--text-3); }
.pmm-warn-ico { color: var(--warn); }
/* Badges de acción por tipo. */
.pmm-act { display: inline-block; padding: 2px 8px; border-radius: 999px; font: 700 10.5px/1.4 var(--ui); border: 1px solid transparent; white-space: nowrap; }
.pmm-act--crear { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-bd); }
.pmm-act--actualizar { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.pmm-act--renombrar { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-bd); }
.pmm-act--omitir { color: var(--text-3); background: var(--surface-3); }
/* Conteos de proveedores/OEM: +N nuevos (ok) · ↻N actualizados (primary). */
.pmm-cnt { display: inline-block; margin: 0 2px; padding: 1px 6px; border-radius: 999px; font: 700 11px/1.4 var(--ui); }
.pmm-cnt--new { color: var(--ok); background: var(--ok-bg); }
.pmm-cnt--upd { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }
.pmm-cnt--tot { color: var(--text-2); background: var(--surface-3); }

/* Chip "Datos maestros" en la barra (icono + texto). */
.pmm-chip { display: inline-flex; align-items: center; gap: 6px; }
.pmm-chip svg { flex-shrink: 0; opacity: .8; }

/* Sub-tabla OEM (inputs alineados con la de proveedores). */
.pmm-oem { width: 100%; border-collapse: collapse; font: 500 12.5px/1.3 var(--ui); }
.pmm-oem th { text-align: left; color: var(--text-2); font-weight: 700; padding: 4px 6px; }
.pmm-oem td { padding: 3px 6px; vertical-align: top; }
.pmm-oem input[type=text], .pmm-oem input[type=number], .pmm-oem select {
    width: 100%; padding: 5px 7px; border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text); font: 500 12.5px/1.2 var(--ui); }

/* Enlace OEM→proveedor por chips clicables (reemplaza el campo de "ids"). */
.pmm-oem__linkcell { min-width: 150px; }
.pmm-oem__chip { display: inline-block; margin: 2px 4px 2px 0; padding: 3px 9px; border: 1px solid var(--border-2);
    border-radius: 999px; background: var(--surface-2); color: var(--text-2); font: 600 11.5px/1.25 var(--ui);
    cursor: pointer; transition: border-color .12s var(--ease), background .12s var(--ease), color .12s var(--ease); }
.pmm-oem__chip:hover { border-color: var(--primary); }
.pmm-oem__chip.is-on { background: var(--btn-primary-bg); border-color: var(--btn-primary-bd); color: var(--btn-primary-tx); }
.pmm-oem__chip.is-on::before { content: "\2713\00a0"; font-weight: 800; }
.pmm-oem__hint { font: 500 11px/1.3 var(--ui); color: var(--text-3); font-style: italic; }

/* Consola "Datos maestros": Proveedores + Fabricantes juntos (dos columnas). */
.tp-dlg.pmmd-dlg { max-width: 900px; width: min(96vw, 900px); }
.pmmd { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.pmmd__col { display: flex; flex-direction: column; gap: 8px; min-width: 0;
    border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); padding: 12px; }
.pmmd__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pmmd__title { margin: 0; font: 800 14px/1.2 var(--ui); color: var(--heading); }
.pmmd__count { font: 800 11px/1 var(--ui); color: var(--text-3); background: var(--surface-3); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.pmmd__hint { margin: 0; font: 500 11.5px/1.4 var(--ui); color: var(--text-3); }
.pmmd__list { display: flex; flex-direction: column; gap: 6px; max-height: 48vh; overflow: auto; padding-right: 2px; }
.pmmd__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px;
    border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); }
.pmmd__fields { display: flex; gap: 6px; flex: 1; min-width: 0; flex-wrap: wrap; }
.pmmd__row input, .pmmd__add input { padding: 5px 7px; border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text); font: 500 12.5px/1.2 var(--ui); min-width: 0; }
.pmmd-name, .pmmd__add .pmmd-new-name { flex: 2 1 120px; }
.pmmd-nick, .pmmd__add .pmmd-new-nick { flex: 1 1 80px; }
.pmmd-country, .pmmd__add .pmmd-new-country { flex: 1 1 70px; }
.pmmd__rowact { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.pmmd__badge { font: 700 11px/1 var(--ui); color: var(--text-2); background: var(--surface-3); border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
.pmmd__add { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 2px; padding-top: 8px; border-top: 1px dashed var(--border); }
@media (max-width: 720px) { .pmmd { grid-template-columns: 1fr; } }

/* Combobox propio de Proveedor/Fabricante (reemplaza el datalist nativo con look de portal).
   z-index sobre el overlay del diálogo (.tp-dlg-overlay = --z-float+10) y bajo el lightbox (+20). */
.pmm-combo { position: fixed; z-index: calc(var(--z-float, 3000) + 15); max-height: 264px; overflow: auto;
    background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-md);
    box-shadow: var(--shadow-lg); padding: 4px; display: flex; flex-direction: column; gap: 2px; }
.pmm-combo__opt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
    text-align: left; width: 100%; padding: 6px 9px; border: 0; border-radius: var(--r-sm);
    background: transparent; cursor: pointer; }
.pmm-combo__opt:hover, .pmm-combo__opt.is-active { background: var(--surface-3); }
.pmm-combo__name { font: 700 13px/1.25 var(--ui); color: var(--text); }
.pmm-combo__meta { font: 500 11px/1.2 var(--ui); color: var(--text-3); }

/* ═══════════ Editor de parte: acordeones, picker de planos y fórmula natural ═══════════ */
/* Acordeones del editor (colapsados por defecto; mismo lenguaje visual que .pm-kit). */
.pmm-acc { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; margin: 0 0 10px; }
.pmm-acc__head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface-2);
    font: 700 13.5px/1.2 var(--ui); color: var(--heading); cursor: pointer; list-style: none; user-select: none; }
.pmm-acc__head::-webkit-details-marker { display: none; }
.pmm-acc__head::before { content: ""; flex: none; width: 0; height: 0; transition: transform .15s ease;
    border-left: 5px solid var(--text-3); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
details.pmm-acc[open] > .pmm-acc__head::before { transform: rotate(90deg); }
details.pmm-acc[open] > .pmm-acc__head { border-bottom: 1px solid var(--border); }
.pmm-acc__body { padding: 12px 14px; }
/* Hints inline en encabezados del editor: anular el margin-bottom de bloque de .adm__hint
   (0 0 14px) que, dentro de la cabecera flex, descentraba verticalmente la descripción. */
.pmm-acc__head .adm__hint, .pmm-ed__h .adm__hint { margin: 0; }

/* Número de parte + botón Generar (modo creación). */
.pmm-ed__pnrow { display: flex; gap: 6px; align-items: center; }
.pmm-ed__pnrow input { flex: 1; min-width: 0; }

/* Picker de planos: chips de asignaciones (fijas = ya en el BOM; nuevas = pendientes de guardar). */
.pmm-diag__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pmm-dg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px;
    border: 1px solid var(--accent, #2f6df6); color: var(--accent, #2f6df6);
    font: 600 11.5px/1.2 var(--ui); background: transparent; }
.pmm-dg-chip--fixed { border-color: var(--border); color: var(--text-3); }
.pmm-dg-chip__x { border: 0; background: transparent; color: inherit; font: 700 13px/1 var(--ui);
    cursor: pointer; padding: 0 2px; }

/* Combobox buscable de planos (input de filtro + panel flotante .pmm-combo). */
.pmm-ss { position: relative; }
.pmm-ss__input { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text); font: 500 13px/1.3 var(--ui); }
.pmm-ss__input:disabled { background: var(--surface-2); color: var(--text-3); cursor: not-allowed; }
.pmm-combo__empty { padding: 8px 10px; font: 500 12px/1.4 var(--ui); color: var(--text-3); }

/* Resumen "Aparece en" (chips) al tope de la sección Catálogo. */
.pmm-ed__appears { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.pmm-ed__appears-chips { margin-top: 2px; }

/* Fórmula "natural" tipo calculadora: fracción con barra horizontal. */
.pmm-fx { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1.3 var(--ui); color: var(--text); }
.pmm-fx__eq { display: inline-flex; align-items: center; gap: 6px; }
.pmm-frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle;
    margin: 0 4px; text-align: center; }
.pmm-frac__num { padding: 0 6px 2px; }
.pmm-frac__den { padding: 2px 6px 0; border-top: 1.5px solid var(--text); }
.pmm-formula__prev .pmm-fx, #pmm-prev .pmm-fx { font-size: 14px; }

/* Modalidad de costo (global) en el modal de Categorías. */
.pmm-basis { border: 1px dashed var(--border); border-radius: var(--r-md); padding: 10px 12px; margin-bottom: 12px; }
.pmm-basis__row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.pmm-basis__row select { padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text); font: 600 12.5px/1.2 var(--ui); }

/* ── PAPELERA de la tabla maestra (part numbers con borrado lógico) ── */
/* El botón de la barra de filtros usa .pmm-fbtn--toggle; en papelera se tiñe de peligro para que
   quede claro que la tabla NO está mostrando el catálogo vigente. */
#pmm-trash-toggle.is-active { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
.pmm-trashnote { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px;
    padding: 8px 12px; border-radius: var(--r-md); border: 1px dashed var(--danger-bd);
    background: var(--danger-bg); color: var(--text-2); font: 500 12.5px/1.45 var(--ui); }
.pmm-trashnote svg { flex: none; margin-top: 1px; color: var(--danger); }
.pmm__table tr.pmm__tr--deleted td { opacity: .72; }
.pmm__table tr.pmm__tr--deleted .pmm__pn { text-decoration: line-through; }
.pmm-ctxmenu__item--danger { color: var(--danger); }
.pmm-ctxmenu__item--danger:hover { background: var(--danger-bg); color: var(--danger); }

/* Banner del MODO PRUEBAS (sandbox) en la tabla maestra. */
.pmm-sandbox { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 8px 12px; margin-bottom: 10px; border-radius: var(--r-md);
    border: 1px dashed var(--border); background: var(--surface-2); font: 500 12.5px/1.4 var(--ui); }
.pmm-sandbox--on { border: 1.5px solid #d97706; background: rgba(217, 119, 6, .12); color: var(--text); }
.pmm-sandbox--on strong { color: #b45309; letter-spacing: .04em; }