/* ============================================================================
   PRIDO — Modales informativos del PDP (rediseño)
   ----------------------------------------------------------------------------
   Capa de presentación SCOPEADA a `.prido-pm`, aplicada SOLO a los 5 modales
   de la página de producto:
     #modal-envios · #modal-tiempos · #modal-tipo-envio
     #modal-descuentos (asesores) · #modal-administracion (costos)

   - No reemplaza ni rompe `prido-unified-modals.css` (galería/reseñas/B2B/
     wishlist siguen igual). Solo añade un sistema `.pm-*` por encima, scopeado.
   - Conserva el contrato JS: `.prido-glass-overlay#modal-*` + `.prido-glass-close`
     + `[data-prido-discount-field]` + `.discount-label`/`.discount-value` +
     `.prido-discount-row` + `#prido-discount-table` + shortcodes `.jm-*`.
   - Tema vía `:root[data-theme="dark"]` y `body.woodmart-dark` (ambas señales).
   - Carga DESPUÉS de prido-unified-modals → gana empates de cascada.
   ============================================================================ */

.prido-pm,
.prido-pm *,
.prido-pm *::before,
.prido-pm *::after { box-sizing: border-box; }

/* ---------- TOKENS (light por defecto) ---------- */
.prido-pm {
  --pm-fh: 'Outfit', system-ui, sans-serif;
  --pm-fb: var(--prido-font-body, 'Noto Sans', system-ui, sans-serif);
  --pm-mono: 'JetBrains Mono', ui-monospace, monospace;
  --pm-teal: var(--prido-secondary, var(--prido-teal, #2dc6c1));
  --pm-rc: 16px;          /* radio tarjeta */
  --pm-ri: 12px;          /* radio bloques internos */
  --pm-rp: 999px;         /* píldora */
  --pm-ease: cubic-bezier(.2, 0, .2, 1);

  --pm-ink:        #0f1a26;
  --pm-ink-soft:   #1a2a3a;
  --pm-muted:      #5e6f80;
  --pm-faint:      #8a9aae;
  --pm-line:       #e4e9ef;
  --pm-line-soft:  #eef1f5;
  --pm-line-strong:#cfd6df;
  --pm-page:       #ffffff;
  --pm-surface-2:  #f6f8fb;
  --pm-surface-3:  #eef2f6;
  --pm-info-bg:    #e8f9f8;
  --pm-info-fg:    #147068;   /* texto de acento AA-safe en light (≥4.7:1 sobre info-bg/blanco) */
  --pm-success:    #1f8a5b;
  --pm-danger:     #d6453f;
  --pm-shadow:     0 32px 64px -24px rgba(15, 26, 38, .30),
                   0 12px 24px -12px rgba(15, 26, 38, .16);
}

/* ---------- TOKENS (dark) — dos señales de tema ---------- */
:root[data-theme="dark"] .prido-pm,
body.woodmart-dark .prido-pm {
  --pm-ink:        #ecf2f7;
  --pm-ink-soft:   #d8e2ec;
  --pm-muted:      #8d9eb2;
  --pm-faint:      #6b7c91;
  --pm-line:       rgba(255, 255, 255, .10);
  --pm-line-soft:  rgba(255, 255, 255, .06);
  --pm-line-strong:rgba(255, 255, 255, .20);
  --pm-page:       #131b25;
  --pm-surface-2:  #1d2835;
  --pm-surface-3:  #243042;
  --pm-info-bg:    rgba(45, 198, 193, .14);
  --pm-info-fg:    #3fd6d0;
  --pm-success:    #46c98b;
  --pm-danger:     #ff6b66;
  --pm-shadow:     0 36px 72px -24px rgba(0, 0, 0, .66),
                   0 12px 28px -10px rgba(0, 0, 0, .5);
}

/* ============================================================================
   CARD  (sustituye visualmente a .prido-glass-modal-content, que NO usamos)
   ============================================================================ */
.prido-pm .pm-card {
  position: relative;
  z-index: 1;
  width: min(100%, 560px);
  max-width: 560px;
  /* Descuenta el padding vertical del overlay (hasta ~52px/lado) para que en
     viewports bajos la cabecera/cerrar nunca queden recortados fuera de pantalla. */
  max-height: min(88vh, calc(100dvh - 7rem), 900px);
  overflow: auto;
  background: var(--pm-page);
  border: 1px solid var(--pm-line);
  border-radius: var(--pm-rc);
  box-shadow: var(--pm-shadow);
  color: var(--pm-ink);
  font-family: var(--pm-fb);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.prido-pm .pm-card * { letter-spacing: normal; }

/* Tablet: tarjeta algo más compacta (espejo del mockup) */
@media (min-width: 768px) and (max-width: 1024px) {
  .prido-pm .pm-card { width: min(100%, 468px); max-width: 468px; }
}

/* Grabber del bottom-sheet — oculto salvo en mobile */
.prido-pm .pm-grabber { display: none; }

/* ============================================================================
   HEAD
   ============================================================================ */
.prido-pm .pm-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 22px 16px;
  /* Mantiene el botón cerrar alcanzable cuando la tarjeta scrollea (sheets largos). */
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--pm-page);
}
.prido-pm .pm-head-ic {
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 11px;
  background: var(--pm-info-bg);
  color: var(--pm-info-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.prido-pm .pm-head-ic svg { width: 21px; height: 21px; display: block; }
.prido-pm .pm-head-txt { min-width: 0; flex: 1; padding-top: 1px; }
.prido-pm .pm-eyebrow {
  font-family: var(--pm-fh);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--pm-info-fg);
  margin: 0 0 3px;
}
.prido-pm .pm-title {
  font-family: var(--pm-fh);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--pm-ink);
  line-height: 1.15;
  margin: 0;
}
.prido-pm .pm-sub {
  font-size: 12.5px;
  color: var(--pm-muted);
  margin-top: 4px;
  line-height: 1.45;
}

/* Botón cerrar — neutraliza la capa unificada/product-page (position:absolute) */
.prido-pm .pm-close {
  position: static !important;
  inset: auto !important;
  flex-shrink: 0;
  width: 36px !important; height: 36px !important;
  min-width: 36px !important; min-height: 36px !important;
  max-width: 36px !important; max-height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: var(--pm-surface-2) !important;
  border: 1px solid var(--pm-line) !important;
  color: var(--pm-muted) !important;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: background .16s var(--pm-ease), color .16s var(--pm-ease), border-color .16s var(--pm-ease) !important;
  transform: none !important;
}
.prido-pm .pm-close:hover {
  background: var(--pm-ink) !important;
  color: var(--pm-page) !important;
  border-color: var(--pm-ink) !important;
}
.prido-pm .pm-close svg { width: 15px !important; height: 15px !important; stroke-width: 2 !important; display: block; }

/* Foco visible accesible en todo control interactivo del modal */
.prido-pm .pm-close:focus-visible,
.prido-pm .pm-collapse-bar:focus-visible,
.prido-pm summary:focus-visible {
  outline: 2px solid var(--pm-teal);
  outline-offset: 2px;
}

/* ============================================================================
   BODY
   ============================================================================ */
.prido-pm .pm-body {
  padding: 0 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------- GRID de stats ---------- */
.prido-pm .pm-grid { display: grid; gap: 10px; }
.prido-pm .pm-grid.cols-2 { grid-template-columns: 1fr 1fr; }

.prido-pm .pm-stat {
  background: var(--pm-surface-2) !important;
  border: 1px solid var(--pm-line) !important;
  border-radius: var(--pm-ri) !important;
  padding: 14px 15px !important;
  display: flex !important;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  box-shadow: none !important;
  align-items: stretch !important;
}
.prido-pm .pm-stat-k,
.prido-pm .pm-stat .discount-label {
  font-family: var(--pm-fb) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--pm-muted) !important;
  line-height: 1.35 !important;
}
.prido-pm .pm-stat-v,
.prido-pm .pm-stat .discount-value {
  font-family: var(--pm-fh) !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  color: var(--pm-ink) !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums;
}
/* Valor "estado" (p.ej. "Sin oferta…") — texto suave, no número grande */
.prido-pm .pm-stat-v.is-muted,
.prido-pm .pm-stat.is-status .discount-value {
  font-family: var(--pm-fb) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--pm-muted) !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
}
/* Tarjeta acento (precio neto / costo proveedor) */
.prido-pm .pm-stat--accent {
  background: var(--pm-info-bg) !important;
  border-color: transparent !important;
}
.prido-pm .pm-stat--accent .pm-stat-k,
.prido-pm .pm-stat--accent .discount-label { color: var(--pm-info-fg) !important; }

/* Valor en píldora (proveedor) — usa el badge del shortcode .jm-proveedor-wrapper */
.prido-pm .pm-pill,
.prido-pm .pm-stat .jm-proveedor-wrapper {
  align-self: flex-start !important;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  width: auto !important;
  padding: 6px 13px !important;
  border: 0 !important;
  border-radius: var(--pm-rp) !important;
  background: var(--pm-ink) !important;
  color: var(--pm-page) !important;
  font-family: var(--pm-fh) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  box-shadow: none !important;
}
:root[data-theme="dark"] .prido-pm .pm-pill,
:root[data-theme="dark"] .prido-pm .pm-stat .jm-proveedor-wrapper,
body.woodmart-dark .prido-pm .pm-pill,
body.woodmart-dark .prido-pm .pm-stat .jm-proveedor-wrapper {
  background: var(--pm-teal) !important;
  color: #0c1219 !important;
}
/* Costo proveedor (shortcode emite wc_price) → estilo de valor grande */
.prido-pm .pm-stat .jm-costo-proveedor-html,
.prido-pm .pm-stat .woocommerce-Price-amount {
  font-family: var(--pm-fh) !important;
  font-size: inherit !important;
  font-weight: 700 !important;
  color: var(--pm-ink) !important;
  white-space: nowrap;
}
.prido-pm .pm-stat .jm-costo-proveedor-html { font-size: 13px !important; font-weight: 500 !important; color: var(--pm-muted) !important; }

/* ---------- BARRA DE STOCK ---------- */
.prido-pm .pm-stock {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--pm-surface-2) !important;
  border: 1px solid var(--pm-line) !important;
  border-radius: var(--pm-ri) !important;
  padding: 13px 16px !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.prido-pm .pm-stock-l { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.prido-pm .pm-stock-r {
  font-size: 11.5px;
  color: var(--pm-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.prido-pm .pm-stock-r .jm-stock-date,
.prido-pm .pm-stock-r time {
  font-family: var(--pm-mono);
  font-size: 12px;
  color: var(--pm-ink-soft);
  font-weight: 500;
  background: var(--pm-surface-3);
  padding: 2px 7px;
  border-radius: 6px;
}
/* El shortcode [mostrar_stock] emite .jm-stock-wrapper > .wd-label.
   Lo despojamos del badge y le anteponemos un punto de estado. */
.prido-pm .pm-stock .jm-stock-wrapper { display: inline-flex; align-items: center; margin: 0; }
.prido-pm .pm-stock .wd-label {
  display: inline-flex !important;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--pm-ink-soft) !important;
  font-family: var(--pm-fb) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.prido-pm .pm-stock .wd-label::before {
  content: "";
  width: 8px; height: 8px;
  flex-shrink: 0;
  margin-right: 9px;
  border-radius: 999px;
  background: var(--pm-muted);   /* estado indeterminado legible (≥3:1) */
}
.prido-pm .pm-stock .wd-label-success::before {
  background: var(--pm-success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pm-success) 24%, transparent);
}
.prido-pm .pm-stock .wd-label-danger::before { background: var(--pm-danger); }

/* ---------- COLLAPSE / ACORDEÓN (native <details>) ---------- */
.prido-pm .pm-collapse {
  border: 1px solid var(--pm-line) !important;
  border-radius: var(--pm-ri) !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
}
.prido-pm .pm-collapse-bar {
  width: 100%;
  list-style: none;
  background: var(--pm-surface-2) !important;
  border: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px !important;
  min-height: 0 !important;
  cursor: pointer;
  text-align: left;
  font-family: var(--pm-fh) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--pm-ink) !important;
  transition: background .16s var(--pm-ease);
}
.prido-pm .pm-collapse-bar::-webkit-details-marker { display: none; }
.prido-pm .pm-collapse-bar:hover { background: var(--pm-surface-3) !important; }
.prido-pm .pm-collapse-bar .chev { color: var(--pm-muted); display: inline-flex; transition: transform .22s var(--pm-ease); }
.prido-pm .pm-collapse-bar .chev svg { width: 16px; height: 16px; display: block; }
.prido-pm .pm-collapse[open] .pm-collapse-bar .chev { transform: rotate(180deg); }
.prido-pm .pm-collapse-body { padding: 4px 16px 16px !important; }

/* Tabla de descuentos (shortcode #prido-discount-table) reestilizada */
.prido-pm .pm-collapse-body .prido-discount-table-wrapper { overflow-x: auto; }
.prido-pm .pm-collapse-body table {
  width: 100% !important;
  min-width: 0 !important;
  border-collapse: collapse !important;
  background: transparent !important;
  margin: 0 !important;
}
.prido-pm .pm-collapse-body thead th {
  text-align: left !important;
  padding: 9px 0 11px !important;
  font-family: var(--pm-fb) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--pm-muted) !important;
  border-bottom: 1px solid var(--pm-line) !important;
  background: transparent !important;
}
.prido-pm .pm-collapse-body tbody td {
  padding: 10px 0 !important;
  font-family: var(--pm-fb) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: var(--pm-ink-soft) !important;
  border-bottom: 1px solid var(--pm-line-soft) !important;
  background: transparent !important;
  font-variant-numeric: tabular-nums;
  line-height: 1.4 !important;
}
.prido-pm .pm-collapse-body tbody tr:last-child td { border-bottom: 0 !important; }
.prido-pm .pm-collapse-body th:last-child,
.prido-pm .pm-collapse-body td:last-child {
  text-align: right !important;
  white-space: nowrap !important;
}
.prido-pm .pm-collapse-body td:last-child {
  font-family: var(--pm-fh) !important;
  font-weight: 700 !important;
  color: var(--pm-info-fg) !important;
}
/* Tramo base 0% (sin descuento) atenuado, como en el diseño (.pct.is-zero). */
.prido-pm .pm-collapse-body .prido-discount-base-row:first-child td:last-child {
  color: var(--pm-faint) !important;
}

/* ---------- PROSA ---------- */
.prido-pm .pm-prose {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: var(--pm-muted) !important;
}
.prido-pm .pm-prose strong { color: var(--pm-ink) !important; font-weight: 700 !important; }
.prido-pm .pm-h {
  font-family: var(--pm-fh) !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: var(--pm-ink) !important;
  letter-spacing: -.01em !important;
  margin: 4px 0 0 !important;
}

/* ---------- LISTA DE TRANSPORTISTAS ---------- */
.prido-pm .pm-companies {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.prido-pm .pm-company {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pm-ink-soft);
}
.prido-pm .pm-company::before {
  content: "";
  width: 7px; height: 7px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--pm-teal);
}

/* ---------- FEATURE CARDS (tiempos / tipo de envío) ---------- */
.prido-pm .pm-features { display: grid !important; gap: 10px !important; }
.prido-pm .pm-features.cols-2 { grid-template-columns: 1fr 1fr; }
.prido-pm .pm-feat {
  background: var(--pm-surface-2) !important;
  border: 1px solid var(--pm-line) !important;
  border-radius: var(--pm-ri) !important;
  padding: 16px !important;
  display: flex !important;
  gap: 13px !important;
  align-items: flex-start !important;
  box-shadow: none !important;
}
.prido-pm .pm-feat-ic {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 11px;
  background: var(--pm-info-bg) !important;
  color: var(--pm-info-fg) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.prido-pm .pm-feat-ic svg { width: 20px; height: 20px; display: block; }
.prido-pm .pm-feat-txt { min-width: 0; }
.prido-pm .pm-feat-k {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--pm-muted) !important;
  margin: 0 0 5px !important;
  line-height: 1.35 !important;
}
.prido-pm .pm-feat-v {
  font-family: var(--pm-fh) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--pm-ink) !important;
  line-height: 1.3 !important;
  letter-spacing: -.01em !important;
}
.prido-pm .pm-feat-v .big { display: block; font-size: 17px; }

/* ---------- NOTE / CALLOUT ---------- */
.prido-pm .pm-note {
  background: var(--pm-surface-2) !important;
  border: 1px solid var(--pm-line) !important;
  border-radius: var(--pm-ri) !important;
  padding: 14px 15px !important;
  margin: 0 !important;
  display: flex !important;
  gap: 11px !important;
  align-items: flex-start !important;
  font-style: normal !important;
  opacity: 1 !important;
}
.prido-pm .pm-note-ic { color: var(--pm-info-fg); flex-shrink: 0; margin-top: 1px; display: inline-flex; }
.prido-pm .pm-note-ic svg { width: 17px; height: 17px; display: block; }
.prido-pm .pm-note-txt {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--pm-muted) !important;
}
.prido-pm .pm-note-txt b {
  color: var(--pm-ink) !important;
  font-weight: 700 !important;
  display: block;
  margin-bottom: 2px;
  font-family: var(--pm-fh) !important;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

/* Una columna en mobile para grids/features/companies */
@media (max-width: 600px) {
  .prido-pm .pm-grid.cols-2,
  .prido-pm .pm-features.cols-2 { grid-template-columns: 1fr; }
}

/* Bottom-sheet en mobile (<=767) — anclado abajo, ancho completo */
@media (max-width: 767px) {
  .prido-pm.prido-glass-overlay {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  .prido-pm .pm-card {
    width: 100% !important;
    max-width: none !important;
    max-height: 92vh;
    border-radius: 20px 20px 0 0 !important;
    border-bottom: 0 !important;
    box-shadow: 0 -24px 60px -20px rgba(0, 0, 0, .5) !important;
  }
  .prido-pm .pm-grabber {
    display: block;
    width: 38px; height: 4px;
    margin: 10px auto 0;
    border-radius: 999px;
    background: var(--pm-line-strong);
  }
  .prido-pm .pm-head { padding-top: 14px; }
  .prido-pm .pm-body { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
  /* Touch target mayor para el cerrar en mobile */
  .prido-pm .pm-close {
    width: 40px !important; height: 40px !important;
    min-width: 40px !important; min-height: 40px !important;
    max-width: 40px !important; max-height: 40px !important;
  }
  .prido-pm .pm-close svg { width: 16px !important; height: 16px !important; }
}

/* Animación de ENTRADA — gateada por .is-active (la tarjeta vive siempre en el
   DOM, así que la animación debe dispararse al abrir, no al cargar la página). */
.prido-pm.is-active .pm-card { animation: pm-pop .24s var(--pm-ease) both; }
@media (max-width: 767px) {
  .prido-pm.is-active .pm-card { animation: pm-sheet-up .28s var(--pm-ease) both; }
}

@keyframes pm-pop {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes pm-sheet-up {
  from { transform: translateY(14px); opacity: .6; }
  to   { transform: translateY(0);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .prido-pm.is-active .pm-card { animation: none !important; }
  .prido-pm .pm-close,
  .prido-pm .pm-collapse-bar,
  .prido-pm .pm-collapse-bar .chev { transition: none !important; }
}