/* ========================================================================== */
/* 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%; }

#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; }
}