/* ========================================================================== */
/* MOD-270 · PRODEX PRODUCT DETAIL REVAMP                                     */
/* Scoped to #page-prodex-detail.pdx-v3. Do not move these rules to app.css.  */
/* ========================================================================== */

#page-prodex-detail.pdx-v3 {
    --pdx-page: #f6f8fa;
    --pdx-surface: #ffffff;
    --pdx-surface-muted: #f6f8fa;
    --pdx-surface-hover: #f3f4f6;
    --pdx-text: #1f2328;
    --pdx-text-muted: #656d76;
    --pdx-text-faint: #8c959f;
    --pdx-border: #d8dee4;
    --pdx-border-subtle: #eaeef2;
    --pdx-accent: #0969da;
    --pdx-accent-soft: #ddf4ff;
    --pdx-success: #1a7f37;
    --pdx-success-soft: #dafbe1;
    --pdx-warning: #9a6700;
    --pdx-warning-soft: #fff8c5;
    --pdx-danger: #cf222e;
    --pdx-danger-soft: #ffebe9;
    --pdx-focus: #0969da;
    --pdx-shadow: 0 1px 2px rgba(31,35,40,.06), 0 8px 24px rgba(140,149,159,.10);
    --pdx-media-canvas: #ffffff;
    padding: 0 !important;
    background: var(--pdx-page) !important;
    color: var(--pdx-text);
    text-transform: none;
}

html[data-mode="noche"] #page-prodex-detail.pdx-v3 {
    --pdx-page: #0d1117;
    --pdx-surface: #161b22;
    --pdx-surface-muted: #0d1117;
    --pdx-surface-hover: #21262d;
    --pdx-text: #e6edf3;
    --pdx-text-muted: #8b949e;
    --pdx-text-faint: #6e7681;
    --pdx-border: #30363d;
    --pdx-border-subtle: #21262d;
    --pdx-accent: #58a6ff;
    --pdx-accent-soft: rgba(56,139,253,.15);
    --pdx-success: #3fb950;
    --pdx-success-soft: rgba(46,160,67,.15);
    --pdx-warning: #d29922;
    --pdx-warning-soft: rgba(187,128,9,.15);
    --pdx-danger: #f85149;
    --pdx-danger-soft: rgba(248,81,73,.12);
    --pdx-focus: #58a6ff;
    --pdx-shadow: 0 1px 0 rgba(255,255,255,.04), 0 12px 32px rgba(0,0,0,.18);
}

#page-prodex-detail.pdx-v3 #px-det-actions-bar,
#page-prodex-detail.pdx-v3 #px-det-title,
#page-prodex-detail.pdx-v3 #px-det-tabs { display: none !important; }

#page-prodex-detail.pdx-v3 #px-det-body { width: 100%; }

#page-prodex-detail.pdx-v3 .pdx-detail,
#page-prodex-detail.pdx-v3 .pdx-detail * { box-sizing: border-box; }

#page-prodex-detail.pdx-v3 .pdx-detail {
    min-height: calc(100vh - 58px);
    width: 100%;
    color: var(--pdx-text);
    background: var(--pdx-page);
    font-family: var(--font);
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 0;
}

#page-prodex-detail.pdx-v3 .pdx-detail button,
#page-prodex-detail.pdx-v3 .pdx-detail input,
#page-prodex-detail.pdx-v3 .pdx-detail select,
#page-prodex-detail.pdx-v3 .pdx-detail textarea { font: inherit; text-transform: none; }

#page-prodex-detail.pdx-v3 .pdx-topbar {
    position: sticky;
    top: 0;
    z-index: 90;
    min-height: 58px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--pdx-border);
    background: color-mix(in srgb, var(--pdx-surface) 92%, transparent);
    backdrop-filter: blur(14px);
}

#page-prodex-detail.pdx-v3 .pdx-breadcrumb,
#page-prodex-detail.pdx-v3 .pdx-actions,
#page-prodex-detail.pdx-v3 .pdx-inline-actions,
#page-prodex-detail.pdx-v3 .pdx-status-chips { display: flex; align-items: center; gap: 8px; }

#page-prodex-detail.pdx-v3 .pdx-breadcrumb { min-width: 0; color: var(--pdx-text-muted); }
#page-prodex-detail.pdx-v3 .pdx-breadcrumb strong { color: var(--pdx-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#page-prodex-detail.pdx-v3 .pdx-breadcrumb > i { font-size: 9px; color: var(--pdx-text-faint); }

#page-prodex-detail.pdx-v3 .pdx-btn,
#page-prodex-detail.pdx-v3 .pdx-icon-btn {
    min-height: 34px;
    border: 1px solid var(--pdx-border);
    border-radius: 7px;
    background: var(--pdx-surface);
    color: var(--pdx-text);
    box-shadow: 0 1px 0 rgba(31,35,40,.04);
    cursor: pointer;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}

#page-prodex-detail.pdx-v3 .pdx-btn { padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-weight: 600; white-space: nowrap; }
#page-prodex-detail.pdx-v3 .pdx-icon-btn { width: 34px; padding: 0; display: inline-grid; place-items: center; }
#page-prodex-detail.pdx-v3 .pdx-btn:hover,
#page-prodex-detail.pdx-v3 .pdx-icon-btn:hover { background: var(--pdx-surface-hover); border-color: color-mix(in srgb, var(--pdx-border) 60%, var(--pdx-text-muted)); }
#page-prodex-detail.pdx-v3 .pdx-btn-primary { color: #fff; background: var(--pdx-accent); border-color: var(--pdx-accent); }
#page-prodex-detail.pdx-v3 .pdx-btn-primary:hover { color: #fff; background: color-mix(in srgb, var(--pdx-accent) 86%, #000); border-color: color-mix(in srgb, var(--pdx-accent) 86%, #000); }
#page-prodex-detail.pdx-v3 .pdx-btn-secondary { background: var(--pdx-surface); }
#page-prodex-detail.pdx-v3 .pdx-favorite[aria-pressed="true"] { color: var(--pdx-accent); background: var(--pdx-accent-soft); border-color: color-mix(in srgb, var(--pdx-accent) 42%, var(--pdx-border)); }

#page-prodex-detail.pdx-v3 .pdx-menu-wrap { position: relative; }
#page-prodex-detail.pdx-v3 .pdx-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 286px;
    z-index: 110;
    overflow: hidden;
    border: 1px solid var(--pdx-border);
    border-radius: 10px;
    background: var(--pdx-surface);
    box-shadow: 0 16px 48px rgba(31,35,40,.20);
}
#page-prodex-detail.pdx-v3 .pdx-menu[hidden] { display: none !important; }
#page-prodex-detail.pdx-v3 .pdx-menu-group { padding: 5px; border-bottom: 1px solid var(--pdx-border-subtle); }
#page-prodex-detail.pdx-v3 .pdx-menu-group:last-child { border-bottom: 0; }
#page-prodex-detail.pdx-v3 .pdx-menu button { width: 100%; min-height: 36px; padding: 7px 9px; display: grid; grid-template-columns: 18px minmax(0,1fr) auto auto; align-items: center; gap: 8px; border: 0; border-radius: 6px; background: transparent; color: var(--pdx-text); text-align: left; cursor: pointer; }
#page-prodex-detail.pdx-v3 .pdx-menu button:hover { background: var(--pdx-surface-hover); }
#page-prodex-detail.pdx-v3 .pdx-menu button:disabled { color: var(--pdx-text-faint); cursor: not-allowed; }
#page-prodex-detail.pdx-v3 .pdx-menu button small { color: var(--pdx-text-muted); font-size: 10px; }
#page-prodex-detail.pdx-v3 .pdx-menu button.pdx-danger { color: var(--pdx-danger); }

#page-prodex-detail.pdx-v3 .pdx-hero {
    padding: 22px 22px 18px;
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0,1fr);
    gap: 26px;
    border-bottom: 1px solid var(--pdx-border);
    background: var(--pdx-surface-muted);
}

#page-prodex-detail.pdx-v3 .pdx-gallery { min-width: 0; }
#page-prodex-detail.pdx-v3 .pdx-gallery-stage {
    position: relative;
    height: 330px;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 20px;
    border: 1px solid var(--pdx-border);
    border-radius: 12px;
    background: var(--pdx-media-canvas);
    box-shadow: var(--pdx-shadow);
}
#page-prodex-detail.pdx-v3 .pdx-gallery-stage > img { width: 100%; height: 100%; object-fit: contain; }
#page-prodex-detail.pdx-v3 .pdx-gallery-count { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 3px 8px; border-radius: 999px; background: #30363d; color: #fff; font-size: 11px; font-weight: 700; }
#page-prodex-detail.pdx-v3 .pdx-thumbs { margin-top: 9px; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
#page-prodex-detail.pdx-v3 .pdx-thumbs button { flex: 0 0 54px; width: 54px; height: 54px; padding: 4px; border: 1px solid var(--pdx-border); border-radius: 8px; background: var(--pdx-media-canvas); cursor: pointer; }
#page-prodex-detail.pdx-v3 .pdx-thumbs button[aria-pressed="true"] { border: 2px solid var(--pdx-accent); padding: 3px; }
#page-prodex-detail.pdx-v3 .pdx-thumbs img { width: 100%; height: 100%; object-fit: contain; }

#page-prodex-detail.pdx-v3 .pdx-product { min-width: 0; }
#page-prodex-detail.pdx-v3 .pdx-product-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
#page-prodex-detail.pdx-v3 .pdx-overline { display: block; margin-bottom: 4px; color: var(--pdx-text-muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
#page-prodex-detail.pdx-v3 h1 { margin: 0; color: var(--pdx-text); font-size: clamp(22px,2.3vw,30px); line-height: 1.18; font-weight: 650; letter-spacing: -.025em; text-transform: none; }
#page-prodex-detail.pdx-v3 h2 { margin: 0; color: var(--pdx-text); font-size: 18px; line-height: 1.25; font-weight: 650; text-transform: none; }
#page-prodex-detail.pdx-v3 h3 { margin: 0; color: var(--pdx-text); font-size: 14px; line-height: 1.25; font-weight: 650; text-transform: none; }
#page-prodex-detail.pdx-v3 p { margin: 3px 0 0; color: var(--pdx-text-muted); }

#page-prodex-detail.pdx-v3 .pdx-chip { min-height: 24px; padding: 2px 8px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--pdx-border); border-radius: 999px; color: var(--pdx-text-muted); background: var(--pdx-surface-muted); font-size: 11px; font-weight: 600; white-space: nowrap; }
#page-prodex-detail.pdx-v3 .pdx-chip-success { color: var(--pdx-success); background: var(--pdx-success-soft); border-color: color-mix(in srgb, var(--pdx-success) 35%, var(--pdx-border)); }
#page-prodex-detail.pdx-v3 .pdx-chip-warning { color: var(--pdx-warning); background: var(--pdx-warning-soft); border-color: color-mix(in srgb, var(--pdx-warning) 35%, var(--pdx-border)); }
#page-prodex-detail.pdx-v3 .pdx-chip-danger { color: var(--pdx-danger); background: var(--pdx-danger-soft); border-color: color-mix(in srgb, var(--pdx-danger) 35%, var(--pdx-border)); }

#page-prodex-detail.pdx-v3 .pdx-id-row { margin-top: 16px; padding-bottom: 13px; display: flex; flex-wrap: wrap; gap: 10px 24px; border-bottom: 1px solid var(--pdx-border-subtle); }
/* ── Alineación de la fila de identificadores (r4.3.223) ──────────────────
   El valor se veía un pelo más arriba que su etiqueta. La causa NO era el
   `baseline`: los campos editables en línea llevan `margin:-3px -7px` para que
   su caja de edición no ensanche la ficha, y ese margen negativo también los
   sube. Como SKU es texto plano y Marca es editable, cada uno se apoyaba en un
   sitio distinto.
   Se anula el margen VERTICAL sólo dentro de esta fila —el horizontal se
   conserva, que es el que hace que el campo no se desplace al enfocarlo— y se
   alinean todos por el centro, que aguanta bien la mezcla de texto plano,
   campos editables y botones. */
#page-prodex-detail.pdx-v3 .pdx-id-row span { display: inline-flex; align-items: center; gap: 6px; }
#page-prodex-detail.pdx-v3 .pdx-id-row .pdx-field { margin-top: 0; margin-bottom: 0; }
#page-prodex-detail.pdx-v3 .pdx-id-row small { color: var(--pdx-text-muted); font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
#page-prodex-detail.pdx-v3 .pdx-id-row strong { color: var(--pdx-text); font-size: 12px; }
#page-prodex-detail.pdx-v3 .pdx-id-row span:first-child strong { color: var(--pdx-accent); }
#page-prodex-detail.pdx-v3 .pdx-description { padding: 13px 0; border-bottom: 1px solid var(--pdx-border-subtle); }
#page-prodex-detail.pdx-v3 .pdx-rich-view { color: var(--pdx-text); line-height: 1.6; text-transform: none; }
#page-prodex-detail.pdx-v3 .pdx-rich-view p { color: inherit; }
#page-prodex-detail.pdx-v3 .pdx-muted { color: var(--pdx-text-muted); }

/* ── Edición en línea (r4.3.199) ──────────────────────────────────────────────
   Los campos se editan directamente y se guardan solos. Se ven como texto hasta
   que el ratón pasa encima o se les da foco: el objetivo es que la ficha siga
   leyéndose como una ficha, no como un formulario. */
#page-prodex-detail.pdx-v3 .pdx-field {
    width: 100%;
    min-width: 0;
    min-height: 26px;
    margin: -3px -7px;
    padding: 2px 7px;
    display: block;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--pdx-text);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: 0;
}
#page-prodex-detail.pdx-v3 .pdx-field::placeholder { color: var(--pdx-text-muted); font-weight: 400; }
#page-prodex-detail.pdx-v3 .pdx-field:hover { border-color: var(--pdx-border); background: var(--pdx-surface-hover); }
#page-prodex-detail.pdx-v3 .pdx-field:focus {
    border-color: var(--pdx-accent);
    background: var(--pdx-surface);
    outline: none;
    box-shadow: 0 0 0 3px var(--pdx-accent-soft);
}
#page-prodex-detail.pdx-v3 select.pdx-field { cursor: pointer; appearance: none; padding-right: 20px; background-image: linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%); background-position: right 9px center,right 5px center; background-size: 4px 4px,4px 4px; background-repeat: no-repeat; }
#page-prodex-detail.pdx-v3 .pdx-id-row .pdx-field { width: auto; min-width: 130px; }

#page-prodex-detail.pdx-v3 .pdx-title-edit { margin: -3px -9px; padding: 1px 9px; border: 1px solid transparent; border-radius: 9px; outline: none; }
#page-prodex-detail.pdx-v3 .pdx-title-edit:hover { border-color: var(--pdx-border); background: var(--pdx-surface-hover); }
#page-prodex-detail.pdx-v3 .pdx-title-edit:focus { border-color: var(--pdx-accent); background: var(--pdx-surface); box-shadow: 0 0 0 3px var(--pdx-accent-soft); }

/* Sin esto el control se encoge al ancho de su contenido y deja la celda a medias. */
#page-prodex-detail.pdx-v3 .pdx-property > span:last-child { flex: 1 1 auto; }

/* El buscador de códigos SAT ocupa la fila completa y el campo se lleva tres cuartos
   del ancho: las descripciones del SAT son largas y en un tercio no se lee ninguna. */
#page-prodex-detail.pdx-v3 .pdx-property-wide { grid-column: 1 / -1; }
#page-prodex-detail.pdx-v3 .pdx-sat { position: relative; display: block; width: 75%; min-width: 320px; }
@media (max-width: 900px) { #page-prodex-detail.pdx-v3 .pdx-sat { width: 100%; min-width: 0; } }
/* Sin esto el margen negativo de .pdx-field saca el input 7px por lado y el
   desplegable de resultados queda más angosto que el campo. */
#page-prodex-detail.pdx-v3 .pdx-sat .pdx-field { margin-left: 0; margin-right: 0; }

#page-prodex-detail.pdx-v3 .pdx-description .rich-ed { min-height: 64px; }
#page-prodex-detail.pdx-v3 .rich-ed:focus { border-color: var(--pdx-accent); }

#page-prodex-detail.pdx-v3 .pdx-properties { padding-top: 14px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px 18px; }
#page-prodex-detail.pdx-v3 .pdx-property { min-width: 0; display: flex; align-items: center; gap: 9px; }
#page-prodex-detail.pdx-v3 .pdx-property-icon { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--pdx-accent); background: var(--pdx-accent-soft); }
#page-prodex-detail.pdx-v3 .pdx-property > span:last-child { min-width: 0; }
#page-prodex-detail.pdx-v3 .pdx-property small { display: block; color: var(--pdx-text-muted); font-size: 9px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
#page-prodex-detail.pdx-v3 .pdx-property strong { display: block; overflow: hidden; color: var(--pdx-text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
#page-prodex-detail.pdx-v3 .pdx-color-dot { width: 14px; height: 14px; border: 1px solid rgba(31,35,40,.15); border-radius: 50%; }

/* ── LAS ALTURAS DE ESTE DETALLE ──────────────────────────────────────────
   Hay dos barras pegajosas y varios paneles que se abren sobre ellas. El orden
   tiene que estar escrito en un solo sitio o vuelve a pasar lo de 4.3.236: el
   desplegable del código SAT nacía en 60 (definido en `app.css`, para el resto
   de OMNIA) y la barra de pestañas en 75, así que las sugerencias salían POR
   DETRÁS de las pestañas y no se podían leer ni elegir.

       topbar          90
       pestañas        75
       ── de aquí para arriba, todo lo que FLOTA ──
       paneles         120   (menú de tres puntos, desplegables, sugerencias)

   Cualquier panel nuevo que se abra dentro del detalle va a 120. */
#page-prodex-detail.pdx-v3 .px-sat-list,
#page-prodex-detail.pdx-v3 .pdx-menu,
#page-prodex-detail.pdx-v3 .pdx-pop { z-index: 120; }
/* Y que el desplegable cuelgue de SU campo. `.px-sat-list` es `absolute` pero
   `.px-sat` no declara `relative` en ninguna hoja, así que se anclaba al primer
   ancestro posicionado que hubiera por encima —el que fuera— y aparecía
   desalineado y a todo lo ancho de la ficha. */
#page-prodex-detail.pdx-v3 .px-sat { position: relative; display: block; }

#page-prodex-detail.pdx-v3 .pdx-tabs {
    position: sticky;
    top: 58px;
    z-index: 75;
    min-height: 48px;
    padding: 0 20px;
    display: flex;
    justify-content: flex-start;
    gap: 2px;
    overflow-x: auto;
    border-bottom: 1px solid var(--pdx-border);
    background: var(--pdx-surface);
}
#page-prodex-detail.pdx-v3 .pdx-tab { position: relative; flex: 0 0 auto; min-height: 47px; padding: 0 11px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0 !important; border-radius: 0; background: transparent !important; color: var(--pdx-text-muted) !important; font-size: 12px; font-weight: 500; text-transform: none; cursor: pointer; }
#page-prodex-detail.pdx-v3 .pdx-tab:hover { color: var(--pdx-text) !important; background: var(--pdx-surface-hover) !important; }
#page-prodex-detail.pdx-v3 .pdx-tab.on { color: var(--pdx-text) !important; font-weight: 650; }
#page-prodex-detail.pdx-v3 .pdx-tab.on::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--pdx-accent); }
#page-prodex-detail.pdx-v3 .pdx-tab-count { min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 999px; color: var(--pdx-text-muted); background: var(--pdx-surface-muted); font-size: 10px; }

#page-prodex-detail.pdx-v3 .pdx-panels { padding: 20px 22px 34px; }
#page-prodex-detail.pdx-v3 .pdx-pane { display: block; }
#page-prodex-detail.pdx-v3 .pdx-pane[hidden],
#page-prodex-detail.pdx-v3 .pdx-resource-pane[hidden] { display: none !important; }
#page-prodex-detail.pdx-v3 .pdx-section-head { min-height: 42px; margin-bottom: 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
#page-prodex-detail.pdx-v3 .pdx-section-head p { font-size: 12px; }

#page-prodex-detail.pdx-v3 .pdx-card,
#page-prodex-detail.pdx-v3 .det-card { margin: 0 0 14px; padding: 16px; border: 1px solid var(--pdx-border); border-radius: 10px; background: var(--pdx-surface); color: var(--pdx-text); box-shadow: 0 1px 0 rgba(31,35,40,.02); }
#page-prodex-detail.pdx-v3 .pdx-card-head { min-height: 34px; margin: -2px 0 14px; padding-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--pdx-border-subtle); }
#page-prodex-detail.pdx-v3 .pdx-card-head p { font-size: 11px; }
#page-prodex-detail.pdx-v3 .pdx-summary-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(300px,.7fr); gap: 14px; }
#page-prodex-detail.pdx-v3 .pdx-definition-list { margin: 0; }
#page-prodex-detail.pdx-v3 .pdx-definition-list > div { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--pdx-border-subtle); }
#page-prodex-detail.pdx-v3 .pdx-definition-list > div:last-child { border-bottom: 0; }
#page-prodex-detail.pdx-v3 .pdx-definition-list dt { color: var(--pdx-text-muted); }
#page-prodex-detail.pdx-v3 .pdx-definition-list dd { margin: 0; color: var(--pdx-text); font-weight: 650; text-align: right; }
#page-prodex-detail.pdx-v3 .pdx-card-note { padding-top: 10px; border-top: 1px solid var(--pdx-border-subtle); font-size: 11px; }

#page-prodex-detail.pdx-v3 .pdx-callout { margin: 12px 0; padding: 10px 12px; display: flex; align-items: flex-start; gap: 9px; border: 1px solid color-mix(in srgb, var(--pdx-accent) 25%, var(--pdx-border)); border-radius: 8px; color: var(--pdx-text-muted); background: var(--pdx-accent-soft); font-size: 11px; }
#page-prodex-detail.pdx-v3 .pdx-callout > i { margin-top: 2px; color: var(--pdx-accent); }

#page-prodex-detail.pdx-v3 .pdx-loading { min-height: 90px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--pdx-text-muted); font-size: 12px; }
#page-prodex-detail.pdx-v3 .pdx-empty { min-height: 170px; padding: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--pdx-text-muted); text-align: center; }
#page-prodex-detail.pdx-v3 .pdx-empty > i { margin-bottom: 4px; color: var(--pdx-text-faint); font-size: 24px; }
#page-prodex-detail.pdx-v3 .pdx-empty strong { color: var(--pdx-text); font-size: 14px; }
#page-prodex-detail.pdx-v3 .pdx-empty-compact { min-height: 76px; padding: 12px; flex-direction: row; justify-content: flex-start; text-align: left; }
#page-prodex-detail.pdx-v3 .pdx-empty-compact > i { margin: 0; }
#page-prodex-detail.pdx-v3 .pdx-empty-compact span { display: block; }
#page-prodex-detail.pdx-v3 .pdx-empty-error > i,
#page-prodex-detail.pdx-v3 .pdx-empty-error strong { color: var(--pdx-danger); }

#page-prodex-detail.pdx-v3 .pdx-main-image-row { display: grid; grid-template-columns: 160px minmax(0,1fr); gap: 16px; }
#page-prodex-detail.pdx-v3 .pdx-main-image { height: 140px; padding: 10px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--pdx-border); border-radius: 8px; background: var(--pdx-media-canvas); }
#page-prodex-detail.pdx-v3 .pdx-main-image img { width: 100%; height: 100%; object-fit: contain; }
#page-prodex-detail.pdx-v3 .pdx-main-image-info { min-width: 0; }
#page-prodex-detail.pdx-v3 .pdx-main-image-info input { width: 100%; height: 36px; margin: 2px 0 10px; padding: 0 10px; border: 1px solid var(--pdx-border); border-radius: 7px; background: var(--pdx-surface-muted); color: var(--pdx-text-muted); font-size: 11px; text-transform: none; }
#page-prodex-detail.pdx-v3 .pdx-image-empty { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #8c959f; background: var(--pdx-media-canvas); }
#page-prodex-detail.pdx-v3 .pdx-image-empty i { font-size: 28px; }
#page-prodex-detail.pdx-v3 .pdx-status { display: block; min-height: 18px; margin-top: 8px; color: var(--pdx-text-muted); font-size: 11px; }

#page-prodex-detail.pdx-v3 .pdx-cost-metrics,
#page-prodex-detail.pdx-v3 .pdx-deals-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
#page-prodex-detail.pdx-v3 .pdx-cost-metrics > div,
#page-prodex-detail.pdx-v3 .pdx-deals-summary > div { min-height: 82px; padding: 12px; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--pdx-border-subtle); border-radius: 8px; background: var(--pdx-surface-muted); }
#page-prodex-detail.pdx-v3 .pdx-cost-metrics small,
#page-prodex-detail.pdx-v3 .pdx-deals-summary small { color: var(--pdx-text-muted); font-size: 10px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
#page-prodex-detail.pdx-v3 .pdx-cost-metrics strong { margin-top: 3px; color: var(--pdx-text); font-size: 17px; }
#page-prodex-detail.pdx-v3 .pdx-deals-summary strong { margin-top: 3px; color: var(--pdx-text); font-size: 22px; }
#page-prodex-detail.pdx-v3 #px-det-costchart:empty { display: none; }

#page-prodex-detail.pdx-v3 .pdx-resource-tabs,
#page-prodex-detail.pdx-v3 .pdx-deals-toolbar { margin-bottom: 12px; display: flex; align-items: center; gap: 6px; overflow-x: auto; }
#page-prodex-detail.pdx-v3 .pdx-resource-tabs button,
#page-prodex-detail.pdx-v3 .pdx-deals-toolbar button { min-height: 32px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--pdx-border); border-radius: 7px; background: var(--pdx-surface); color: var(--pdx-text-muted); font-size: 11px; cursor: pointer; white-space: nowrap; }
#page-prodex-detail.pdx-v3 .pdx-resource-tabs button[aria-selected="true"],
#page-prodex-detail.pdx-v3 .pdx-deals-toolbar button[aria-pressed="true"] { color: var(--pdx-text); background: var(--pdx-surface-hover); border-color: var(--pdx-text-muted); font-weight: 650; }
#page-prodex-detail.pdx-v3 .pdx-deals-toolbar .pdx-refresh { margin-left: auto; }

#page-prodex-detail.pdx-v3 .pdx-table-wrap { overflow: auto; border: 1px solid var(--pdx-border); border-radius: 9px; background: var(--pdx-surface); }
#page-prodex-detail.pdx-v3 .pdx-deals-table { width: 100%; min-width: 820px; border-collapse: collapse; font-size: 12px; }
#page-prodex-detail.pdx-v3 .pdx-deals-table th { padding: 9px 12px; border-bottom: 1px solid var(--pdx-border); color: var(--pdx-text-muted); background: var(--pdx-surface-muted); font-size: 9px; font-weight: 650; letter-spacing: .05em; text-align: left; text-transform: uppercase; }
#page-prodex-detail.pdx-v3 .pdx-deals-table td { padding: 10px 12px; border-bottom: 1px solid var(--pdx-border-subtle); color: var(--pdx-text); vertical-align: middle; }
#page-prodex-detail.pdx-v3 .pdx-deals-table tr:last-child td { border-bottom: 0; }
#page-prodex-detail.pdx-v3 .pdx-deals-table tbody tr:hover { background: var(--pdx-surface-hover); }
#page-prodex-detail.pdx-v3 .pdx-deal-link { padding: 0; display: flex; flex-direction: column; border: 0; background: transparent; color: var(--pdx-accent); text-align: left; cursor: pointer; }
#page-prodex-detail.pdx-v3 .pdx-deal-link span,
#page-prodex-detail.pdx-v3 .pdx-table-sub { display: block; color: var(--pdx-text-muted); font-size: 10px; }
#page-prodex-detail.pdx-v3 .pdx-deal-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
#page-prodex-detail.pdx-v3 .pdx-deal-status i { font-size: 7px; }
#page-prodex-detail.pdx-v3 .pdx-deal-active { color: var(--pdx-accent); }
#page-prodex-detail.pdx-v3 .pdx-deal-won { color: var(--pdx-success); }
#page-prodex-detail.pdx-v3 .pdx-deal-lost { color: var(--pdx-danger); }
#page-prodex-detail.pdx-v3 .pdx-money { font-weight: 650; text-align: right; white-space: nowrap; }
#page-prodex-detail.pdx-v3 .pdx-notes-actions { margin-top: 10px; display: flex; justify-content: flex-end; }

/* Existing renderer contracts, restyled inside the new owner. */
#page-prodex-detail.pdx-v3 .pxd-ficha-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(300px,.55fr); gap: 14px; }
#page-prodex-detail.pdx-v3 .pxd-pdf { min-height: 520px; overflow: hidden; border: 1px solid var(--pdx-border); border-radius: 10px; background: #20242a; }
#page-prodex-detail.pdx-v3 .pxd-pdf iframe { width: 100%; height: 620px; border: 0; }
#page-prodex-detail.pdx-v3 .pxd-docinfo-row { min-height: 42px; display: grid; grid-template-columns: 120px minmax(0,1fr); align-items: center; gap: 10px; border-bottom: 1px solid var(--pdx-border-subtle); }
#page-prodex-detail.pdx-v3 .pxd-docinfo-k { color: var(--pdx-text-muted); font-size: 9px; font-weight: 650; letter-spacing: .04em; }
#page-prodex-detail.pdx-v3 .pxd-docinfo-v { color: var(--pdx-text); text-transform: none; }
#page-prodex-detail.pdx-v3 .ibtn,
#page-prodex-detail.pdx-v3 .px-actbtn,
#page-prodex-detail.pdx-v3 .pxen-btn { min-height: 32px; padding: 0 10px; border: 1px solid var(--pdx-border); border-radius: 7px; background: var(--pdx-surface); color: var(--pdx-text); font-size: 11px; text-transform: none; }
#page-prodex-detail.pdx-v3 .ibtn.primary { color: #fff; background: var(--pdx-accent); border-color: var(--pdx-accent); }
#page-prodex-detail.pdx-v3 .pxd-metrics { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
#page-prodex-detail.pdx-v3 .px-metric { padding: 12px; border: 1px solid var(--pdx-border-subtle); border-radius: 8px; background: var(--pdx-surface-muted); }
#page-prodex-detail.pdx-v3 .richbar,
#page-prodex-detail.pdx-v3 .richbox { border-color: var(--pdx-border) !important; background: var(--pdx-surface) !important; color: var(--pdx-text) !important; }

#page-prodex-detail.pdx-v3 .pdx-detail :is(button,input,select,textarea,[contenteditable="true"]):focus { outline: none; }
#page-prodex-detail.pdx-v3 .pdx-detail :is(button,input,select,textarea,[contenteditable="true"]):focus-visible { outline: 2px solid var(--pdx-focus) !important; outline-offset: 2px; box-shadow: none !important; }

@media (max-width: 1180px) {
    #page-prodex-detail.pdx-v3 .pdx-hero { grid-template-columns: minmax(250px,320px) minmax(0,1fr); gap: 20px; }
    #page-prodex-detail.pdx-v3 .pdx-gallery-stage { height: 300px; }
    #page-prodex-detail.pdx-v3 .pdx-properties { grid-template-columns: repeat(2,minmax(0,1fr)); }
    #page-prodex-detail.pdx-v3 .pdx-summary-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
    #page-prodex-detail.pdx-v3 .pdx-topbar { padding: 9px 12px; }
    #page-prodex-detail.pdx-v3 .pdx-breadcrumb > span,
    #page-prodex-detail.pdx-v3 .pdx-actions > .pdx-btn span { display: none; }
    #page-prodex-detail.pdx-v3 .pdx-actions > .pdx-btn { width: 38px; padding: 0; }
    #page-prodex-detail.pdx-v3 .pdx-btn,
    #page-prodex-detail.pdx-v3 .pdx-icon-btn { min-height: 42px; }
    #page-prodex-detail.pdx-v3 .pdx-icon-btn { width: 42px; }
    #page-prodex-detail.pdx-v3 .pdx-hero { padding: 14px; grid-template-columns: 1fr; }
    #page-prodex-detail.pdx-v3 .pdx-gallery-stage { height: 290px; }
    #page-prodex-detail.pdx-v3 .pdx-product-heading { flex-direction: column; }
    #page-prodex-detail.pdx-v3 .pdx-properties { grid-template-columns: repeat(2,minmax(0,1fr)); }
    #page-prodex-detail.pdx-v3 .pdx-tabs { top: 58px; padding: 0 10px; }
    #page-prodex-detail.pdx-v3 .pdx-tab { min-height: 48px; }
    #page-prodex-detail.pdx-v3 .pdx-panels { padding: 16px 12px 28px; }
    #page-prodex-detail.pdx-v3 .pdx-section-head { flex-direction: column; }
    #page-prodex-detail.pdx-v3 .pdx-section-head > .pdx-btn { width: 100%; }
    #page-prodex-detail.pdx-v3 .pdx-main-image-row { grid-template-columns: 1fr; }
    #page-prodex-detail.pdx-v3 .pdx-main-image { height: 210px; }
    #page-prodex-detail.pdx-v3 .pdx-cost-metrics,
    #page-prodex-detail.pdx-v3 .pdx-deals-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
    #page-prodex-detail.pdx-v3 .pxd-ficha-grid { grid-template-columns: 1fr; }
    #page-prodex-detail.pdx-v3 .pxd-pdf { min-height: 420px; }
    #page-prodex-detail.pdx-v3 .pxd-pdf iframe { height: 500px; }
}

@media (max-width: 520px) {
    #page-prodex-detail.pdx-v3 .pdx-properties { grid-template-columns: 1fr; }
    #page-prodex-detail.pdx-v3 .pdx-status-chips { flex-wrap: wrap; }
    #page-prodex-detail.pdx-v3 .pdx-menu { position: fixed; top: 64px; right: 10px; left: 10px; width: auto; }
    #page-prodex-detail.pdx-v3 .pdx-inline-actions { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    #page-prodex-detail.pdx-v3 .pdx-detail *,
    #page-prodex-detail.pdx-v3 .pdx-detail *::before,
    #page-prodex-detail.pdx-v3 .pdx-detail *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ── Copiar de un clic (r4.3.223) ─────────────────────────────────────────
   SKU, marca y nombre son lo que más se pega en un correo o en WhatsApp. El
   botón aparece al pasar el ratón por su fila para no ensuciar la ficha, pero
   con el teclado es SIEMPRE visible: si sólo se mostrara al pasar el ratón,
   quien navega con tabulador no sabría que existe. */
#page-prodex-detail.pdx-v3 .pdx-copy {
    flex: 0 0 auto;
    width: 22px; height: 22px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; border-radius: 6px; cursor: pointer;
    color: var(--pdx-text-muted); font-size: 11px;
    opacity: 0; transition: opacity .12s, color .12s, background .12s;
}
#page-prodex-detail.pdx-v3 .pdx-id-row span:hover .pdx-copy,
#page-prodex-detail.pdx-v3 .pdx-title-row:hover .pdx-copy,
#page-prodex-detail.pdx-v3 .pdx-copy:focus-visible { opacity: 1; }
#page-prodex-detail.pdx-v3 .pdx-copy:hover { color: var(--pdx-accent); background: var(--pdx-surface-2); }

/* El nombre y su botón comparten renglón; el botón no debe estirarse con el
   título cuando éste ocupa dos líneas. */
#page-prodex-detail.pdx-v3 .pdx-title-row { display: flex; align-items: flex-start; gap: 8px; }
#page-prodex-detail.pdx-v3 .pdx-title-row > :first-child { min-width: 0; flex: 1; }
#page-prodex-detail.pdx-v3 .pdx-title-row .pdx-copy { margin-top: 6px; }

/* Con "reducir movimiento" no hay transición, pero el botón sigue apareciendo. */
@media (prefers-reduced-motion: reduce) {
    #page-prodex-detail.pdx-v3 .pdx-copy { transition: none; }
}