/* Probikes · Mis compras, aparte del perfil (inc/pk-mis-compras.php · 16-oct-2026).
   La lista (woocommerce/myaccount/orders.php): una tarjeta por compra con el estado en palabras, la foto, el número,
   la fecha, el total y los botones a la vista. El detalle (view-order.php) usa las piezas de assets/gracias.css.
   Mis compras va a todo el ancho y sin el menú del perfil. Colores, radios y sombras: sistema-visual.json. */

/* ── el marco: sin menú, a todo el ancho ─────────── */
.pk-mis-compras .woocommerce-MyAccount-content { width: 100%; float: none; margin-top: 0; }
.pk-mis-compras .woocommerce-page-wrap { max-width: 1120px; }
.pk-mc-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; margin: 14px 0 24px; }
.woocommerce-page-wrap .pk-mc-top h1.pk-wootitle { margin: 0; }
.pk-mis-compras a.pk-mc-perfil {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 999px; background: #FFFFFF;
  color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none;
}
.pk-mis-compras a.pk-mc-perfil:hover { border-color: var(--ink); }
.pk-mis-compras a.pk-mc-volver {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 4px;
  color: var(--orange-txt); font-weight: 600; font-size: 15px; text-decoration: none;
}
.pk-mis-compras a.pk-mc-volver:hover { text-decoration: underline; }
.pk-mis-compras a.pk-mc-volver + .pk-mc-top { margin-top: 0; }

/* ── el estado, en palabras ──────────────────────── */
.pk-mc-estado { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.pk-mc-estado b { font-family: var(--f-display); font-weight: 700; font-size: 20px; line-height: 1.15; color: var(--ink); }
.pk-mc-estado b::before {
  content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: currentColor; margin-right: 9px; vertical-align: 2px;
}
.pk-mc-estado span { font-size: 15px; line-height: 1.4; color: #3A3A3A; }
.pk-mc-estado.tono-ok b { color: #2F7D4F; }
.pk-mc-estado.tono-espera b { color: var(--orange-txt); }
.pk-mc-estado.tono-neutro b { color: var(--gray); }

/* ── la lista ────────────────────────────────────── */
.pk-mc-lista { display: grid; gap: 16px; }
.pk-mc-compra { background: #FFFFFF; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.pk-mc-cuerpo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px 20px; padding: 18px 20px; }
.pk-mc-fotos { display: flex; text-decoration: none; }
.pk-mc-foto {
  display: block; flex: 0 0 76px; width: 76px; height: 76px; box-sizing: border-box;
  border-radius: 8px; border: 2px solid #FFFFFF; background: var(--ph); overflow: hidden;
}
.pk-mc-foto + .pk-mc-foto { margin-left: -30px; }
.pk-mc-foto img { width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: multiply; }
.pk-mc-txt { display: grid; gap: 4px; min-width: 0; }
.pk-mis-compras a.pk-mc-nom { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ink); text-decoration: none; }
.pk-mis-compras a.pk-mc-nom:hover { text-decoration: underline; }
.pk-mc-mas { font-size: 14px; color: var(--gray); }
.pk-mc-meta { font-size: 14px; line-height: 1.45; color: var(--gray); }
.pk-mc-meta b { color: var(--ink); font-weight: 700; }
.pk-mc-acc { display: flex; flex-direction: column; gap: 8px; width: 200px; }
.pk-mc-acc .pk-btn { width: 100%; min-height: 46px; padding: 11px 16px; box-sizing: border-box; text-align: center; }

/* el botón de al lado: se ve como botón (no como un link perdido), pero no le gana a «Ver compra» */
.pk-mis-compras a.pk-btn.pk-mc-btn-sec { background: #FFFFFF; border: 1.6px solid var(--line); color: var(--ink); }
.pk-mis-compras a.pk-btn.pk-mc-btn-sec:hover { border-color: var(--ink); background: #FFFFFF; color: var(--ink); }

.pk-mc-ayuda { margin: 20px 0 0; font-size: 15px; color: #3A3A3A; text-align: center; }
.pk-mis-compras .pk-mc-ayuda a { color: var(--orange-txt); font-weight: 700; }
.pk-mis-compras .pk-mc-plazo a { color: var(--orange-txt); font-weight: 600; }
.pk-gr-totales .t-devuelto dd { color: #2F7D4F; font-weight: 700; }
.pk-mc-paginas { display: flex; justify-content: center; gap: 12px; margin-top: 24px; }

.pk-mc-vacio {
  display: grid; justify-items: center; gap: 8px; text-align: center;
  padding: 40px 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--cream);
}
.pk-mc-vacio b { font-family: var(--f-display); font-size: 24px; color: var(--ink); }
.pk-mc-vacio span { font-size: 15px; color: #3A3A3A; max-width: 30em; }
.pk-mc-vacio .pk-btn { margin-top: 12px; }

/* ── el detalle de una compra ────────────────────── */
.pk-gracias.pk-mc-detalle { padding-top: 0; }
.pk-mc-estado-grande {
  display: grid; gap: 6px; margin: 0 0 20px; padding: 20px 22px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--cream);
}
.pk-mc-estado-grande b { font-size: clamp(24px, 4.5vw, 30px); }
.pk-mc-estado-grande b::before { width: 12px; height: 12px; vertical-align: 4px; }
.pk-mc-estado-grande span { font-size: 16px; }
.pk-mc-estado-grande small { font-size: 14px; color: var(--gray); }
.pk-mc-estado-grande.tono-ok { background: #EEF6F0; border-color: #D7E9DD; }
.pk-mc-estado-grande.tono-espera { background: #FDEEE9; border-color: #F6CABB; }
.pk-mc-estado-acc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.pk-mc-estado-acc .pk-btn { min-height: 46px; padding: 11px 22px; box-sizing: border-box; }
.pk-mc-plazo { margin: 2px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--gray); }
.pk-mc-notas ol { list-style: none; margin: 0; padding: 0; }
.pk-mc-notas li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.45; color: #3A3A3A; }
.pk-mc-notas li:first-child { border-top: 0; padding-top: 0; }
.pk-mc-notas li p { margin: 2px 0 0; }
.pk-mc-notas small { color: var(--gray); font-size: 13px; }

/* ── celular ─────────────────────────────────────── */
@media (max-width: 759px) {
  .pk-mc-top { margin: 4px 0 18px; }
  .woocommerce-page-wrap .pk-mc-top h1.pk-wootitle { font-size: 28px; }
  .pk-mc-estado { padding: 12px 16px; }
  .pk-mc-estado b { font-size: 18px; }
  .pk-mc-cuerpo { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 14px 16px 16px; }
  .pk-mc-foto { flex-basis: 64px; width: 64px; height: 64px; }
  .pk-mc-foto:nth-child(n+2) { display: none; }
  .pk-mc-acc { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; width: auto; }
  .pk-mc-acc .pk-btn { flex: 1 1 140px; min-width: 0; padding: 11px 10px; font-size: 15px; }
  .pk-mc-estado-grande { padding: 16px; }
  /* los flotantes (WhatsApp y Probotito) tapaban «Cancelar compra» y el alias: acá la ayuda ya está en la página */
  .pk-mis-compras .pk-wafloat, .pk-mis-compras .pk-bot { display: none; }
  .pk-mc-estado-acc .pk-btn { flex: 1 1 100%; }
}