/* Flujo de compra pública (multi-tienda): Mi carrito + Confirmar carrito
   (2 pasos: forma de entrega, pago) + Mis compras (historial de pedidos,
   con estética de ticket). El header/franja de cada tienda sigue tomando
   el color propio de esa tienda; todo lo demás (tarjetas, resumen, botones)
   usa el acento de la plataforma CyShops -mismo #303198 que ya usan
   home.css / el CTA de "creá tu tienda"-, para que las 3 páginas se sientan
   como el mismo flujo. Variables en :root -no en .carrito-page- para poder
   reusarlas en .checkout-page/.miscompras-page sin duplicar valores. */

:root{
  --cp-accent:#303198;
  --cp-accent-dark:#242572;
  --cp-canvas:#f5f8fc;
  --cp-surface:#ffffff;
  --cp-line:#e7e9f2;
  --cp-text:#26263b;
  --cp-text-muted:#6b7086;
  --cp-danger:#c0392b;
  --cp-danger-soft:#fdeceb;
  --cp-warn:#a15c00;
  --cp-warn-soft:#fdf0dc;
  --cp-good:#1a8a5f;
  --cp-good-soft:#e2f5ec;
  --cp-radius:14px;
  --cp-shadow:0 2px 10px rgba(30,30,60,0.06);
}

.carrito-page{
  max-width:1180px;
  margin:0 auto;
  padding:32px 20px 56px;
  font-family:'Montserrat','Segoe UI',sans-serif;
  color:var(--cp-text);
}

/* ---- encabezado de página ---- */
.carrito-page-head{ margin-bottom:20px; }
.carrito-page-head h1{ font-size:26px; font-weight:700; margin-bottom:6px; }
.carrito-page-subtitle{ color:var(--cp-text-muted); font-size:14px; }

/* ---- estado vacío ---- */
.empty-cart-wrapper{ display:flex; justify-content:center; align-items:center; padding:60px 20px; }
.empty-cart-card{
  background:var(--cp-surface, #fff); border-radius:16px; padding:35px 40px; text-align:center;
  max-width:400px; width:100%; box-shadow:0 4px 18px rgba(0,0,0,0.07); border:1px solid #ececec;
  font-family:'Montserrat','Segoe UI',sans-serif;
}
.empty-cart-card h2{ margin-top:15px; font-size:22px; color:#2a2a2a; }
.empty-cart-card p{ color:#555; margin:10px 0 0; font-size:15px; line-height:1.5; }
.empty-cart-icon{ width:60px; height:60px; color:#303198; }

/* ---- layout general: lista + resumen fijo ---- */
.carrito-layout{ display:flex; align-items:flex-start; gap:20px; }
.carrito-main{ flex:2 1 620px; min-width:0; }
.carrito-side{ flex:1 1 300px; min-width:280px; position:sticky; top:20px; }

/* ---- tarjeta de cada tienda ---- */
.carrito-store{
  background:var(--cp-surface); border-radius:var(--cp-radius); box-shadow:var(--cp-shadow);
  overflow:hidden; margin-bottom:20px; border:1px solid var(--cp-line);
}

.carrito-store-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 20px; flex-wrap:wrap;
}
.carrito-store-identity{ display:flex; align-items:center; gap:10px; text-decoration:none; min-width:0; }
.carrito-store-logo{ width:38px; height:38px; object-fit:contain; border-radius:8px; background:rgba(255,255,255,.6); flex-shrink:0; }
.carrito-store-name{ font-weight:700; font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.carrito-store-continue{
  border:1.5px solid; border-radius:999px; padding:7px 16px; font-size:12.8px; font-weight:600;
  text-decoration:none; white-space:nowrap; opacity:.92; transition:opacity .15s ease;
}
.carrito-store-continue:hover{ opacity:1; }

/* ---- chips de formas de entrega ---- */
.carrito-store-delivery{ display:flex; gap:8px; flex-wrap:wrap; padding:12px 20px 0; }
.carrito-delivery-chip{
  display:inline-flex; align-items:center; gap:6px; background:var(--cp-canvas); color:var(--cp-text-muted);
  border:1px solid var(--cp-line); border-radius:999px; padding:4px 11px; font-size:11.8px; font-weight:600;
}

.carrito-products{ padding:16px 20px 20px; }

/* ---- alerta a nivel tienda ---- */
.carrito-store-alert{
  display:flex; align-items:center; gap:8px; background:var(--cp-danger-soft); color:var(--cp-danger);
  border-radius:10px; padding:10px 14px; font-size:13px; font-weight:600; margin-bottom:14px;
}
.carrito-store-alert svg{ flex-shrink:0; }

/* ---- fila de producto: lista con divisores, no cajas individuales ---- */
.carrito-item{
  display:grid; grid-template-columns:56px 1fr auto auto; gap:14px; align-items:center;
  padding:14px 0; border-bottom:1px solid var(--cp-line);
}
.carrito-item:last-child{ border-bottom:none; padding-bottom:0; }
.carrito-item-warn{ background:#fffaf9; margin:0 -14px; padding:14px; border-radius:10px; border-bottom:1px solid #f3c8c3; }

.carrito-item-img{ width:56px; height:56px; object-fit:cover; border-radius:9px; align-self:center; flex-shrink:0; }
.carrito-item-img-placeholder{
  display:flex; align-items:center; justify-content:center; background:#f5f5f5; color:#ccc;
}
.carrito-item-img-placeholder svg{ width:36%; height:36%; }

.carrito-item-info{ min-width:0; display:flex; flex-direction:column; gap:5px; }
.carrito-item-name{
  font-weight:600; font-size:14.5px; color:var(--cp-text); text-decoration:none; line-height:1.3;
}
.carrito-item-name:hover{ color:var(--cp-accent); text-decoration:underline; }

.carrito-item-variants{ display:flex; flex-wrap:wrap; gap:6px; }
.carrito-variant-chip{
  display:inline-flex; align-items:center; background:var(--cp-canvas); color:var(--cp-text-muted);
  border:1px solid var(--cp-line); border-radius:999px; padding:2px 10px; font-size:11.5px; font-weight:600;
}

.carrito-item-social{ display:flex; align-items:center; gap:10px; font-size:11.8px; color:var(--cp-text-muted); }
.carrito-item-rating{ display:inline-flex; align-items:center; gap:3px; color:#a15c00; font-weight:700; }
.carrito-item-rating svg{ flex-shrink:0; }
.carrito-item-sold{ color:var(--cp-text-muted); }

.carrito-item-meta{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:13px; color:var(--cp-text-muted); }
.carrito-item-qty{ font-weight:600; color:var(--cp-text); }
.carrito-item-price-old{ color:#b5b8c6; margin-right:4px; }

.carrito-item-lowstock{ color:var(--cp-warn); background:var(--cp-warn-soft); display:inline-block; width:fit-content; border-radius:999px; padding:2px 10px; font-size:11.5px; font-weight:700; }

.carrito-item-alert{
  display:flex; align-items:center; gap:6px; color:var(--cp-danger); font-size:12px; font-weight:600;
}
.carrito-item-alert svg{ flex-shrink:0; }

.carrito-item-subtotal{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; align-self:center; }
.carrito-item-subtotal-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--cp-text-muted); font-weight:700; }
.carrito-item-subtotal-value{ font-size:15px; font-weight:700; white-space:nowrap; }

.carrito-item-remove-form{ margin:0; align-self:center; }
.carrito-item-remove{
  display:flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:9px; border:1px solid var(--cp-line); background:transparent; color:var(--cp-text-muted);
  cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.carrito-item-remove:hover{ background:var(--cp-danger-soft); color:var(--cp-danger); border-color:transparent; }

/* ---- resumen de compra (fijo, agrupa todas las tiendas) ---- */
.carrito-summary-global{
  background:var(--cp-surface); border:1px solid var(--cp-line); border-radius:var(--cp-radius);
  box-shadow:var(--cp-shadow); padding:20px;
}
.carrito-summary-title{ font-size:16px; font-weight:700; margin-bottom:14px; }

.carrito-summary-store-name{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:13.5px; margin-bottom:4px; }
.carrito-summary-store-logo{ width:22px; height:22px; object-fit:contain; border-radius:5px; }

.carrito-summary-count{ font-size:12.5px; color:var(--cp-text-muted); margin-bottom:10px; }
.carrito-summary-row{ display:flex; justify-content:space-between; font-size:13.5px; color:var(--cp-text-muted); margin-bottom:6px; }
.carrito-summary-total{ color:var(--cp-text); font-size:15.5px; margin-bottom:0; }
.carrito-summary-shipping-note{ font-size:11.5px; color:var(--cp-text-muted); line-height:1.5; margin:10px 0 14px; }

.carrito-summary-btn{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  background:var(--cp-accent); color:#fff; border:none; border-radius:10px; padding:12px;
  font-size:13.8px; font-weight:700; text-decoration:none; cursor:pointer; transition:background .15s ease;
}
.carrito-summary-btn:hover{ background:var(--cp-accent-dark); color:#fff; }

.carrito-summary-divider{ border:none; border-top:1px solid var(--cp-line); margin:18px 0; }

.carrito-summary-grand-total{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  margin-top:18px; padding-top:16px; border-top:2px solid var(--cp-line);
  font-size:13.5px; color:var(--cp-text-muted);
}
.carrito-summary-grand-total strong{ font-size:17px; color:var(--cp-text); }

/* ---- responsive ---- */
@media (max-width: 860px){
  .carrito-layout{ flex-direction:column; }
  .carrito-side{ position:static; width:100%; }
}

@media (max-width: 640px){
  .carrito-item{ grid-template-columns:52px 1fr; }
  .carrito-item-img{ width:52px; height:52px; }
  .carrito-item-subtotal{ grid-column:1/3; flex-direction:row; justify-content:space-between; align-items:center; }
  .carrito-item-remove-form{ grid-column:1/3; }
  .carrito-item-remove{ width:100%; border-radius:8px; }
}


/* ==========================================================================
   Confirmar carrito (checkout, 2 pasos: entrega → pago). Página completa
   -sin envolver el paso 1 en una card flotando en el medio de la pantalla,
   pedido explícito del usuario-: encabezado de página + indicador de pasos
   + layout de 2 columnas que se mantiene igual en los 2 pasos -contenido a
   la izquierda, resumen de compra fijo (sticky) a la derecha, mismo criterio
   que Mi carrito, y visible desde el paso 1, no solo después de "Continuar"-.
   ========================================================================== */

.checkout-page{
  max-width:1180px;
  margin:0 auto;
  padding:32px 20px 56px;
  font-family:'Montserrat','Segoe UI',sans-serif;
  color:var(--cp-text);
}

/* ---- encabezado de página: franja con la marca de la tienda ---- */
.checkout-page-head{
  display:flex; align-items:center; gap:14px; padding-bottom:20px; margin-bottom:20px;
  border-bottom:3px solid var(--cp-line);
}
.checkout-store-logo{ width:46px; height:46px; object-fit:contain; border-radius:9px; flex-shrink:0; }
.checkout-page-head h1{ font-size:21px; font-weight:700; }
.checkout-page-subtitle{ color:var(--cp-text-muted); font-size:13.5px; margin-top:2px; }

/* ---- indicador de pasos ---- */
.checkout-steps-indicator{ display:flex; align-items:center; gap:10px; margin-bottom:24px; }
.checkout-step-sep{ color:var(--cp-line); flex-shrink:0; }
.checkout-step-pill{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--cp-text-muted);
}
.checkout-step-pill.active{ color:var(--cp-text); }
.checkout-step-num{
  display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%;
  background:var(--cp-line); color:var(--cp-text-muted); font-size:11.5px; font-weight:700; flex-shrink:0;
}
.checkout-step-pill.active .checkout-step-num{ background:var(--cp-accent); color:#fff; }

/* ---- layout de 2 columnas (persiste en los 2 pasos) ---- */
.checkout-layout{ display:flex; align-items:flex-start; gap:32px; }
.checkout-main{ flex:2 1 600px; min-width:0; }
.checkout-side{ flex:1 1 300px; min-width:280px; position:sticky; top:20px; }

.checkout-step-title{ font-size:18px; font-weight:700; margin-bottom:16px; }

.checkout-alert{
  display:flex; align-items:center; gap:8px; background:var(--cp-danger-soft); color:var(--cp-danger);
  border-radius:10px; padding:12px 14px; font-size:13.5px; font-weight:600; margin-bottom:16px;
}
.checkout-alert svg{ flex-shrink:0; }

/* ---- opciones de entrega ---- */
.entrega-opciones{ display:flex; flex-direction:column; gap:12px; }
.entrega-card{
  background:var(--cp-surface); border:1.5px solid var(--cp-line); border-radius:12px; padding:16px;
  cursor:pointer; transition:border-color .15s ease, background .15s ease; outline:none;
}
.entrega-card:focus-visible{ box-shadow:0 0 0 3px rgba(48, 49, 152,.18); }
.entrega-card:hover{ border-color:#c9cbe0; }
.entrega-card.selected{ border-color:var(--cp-accent); background:#f7f5ff; }
.entrega-header{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.entrega-icon{
  display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px;
  background:var(--cp-canvas); color:var(--cp-accent); flex-shrink:0;
}
.entrega-header strong{ font-size:14.5px; }
.entrega-body p{ margin:0; font-size:13.5px; color:var(--cp-text-muted); }
.entrega-body p strong{ color:var(--cp-text); font-weight:600; }
.entrega-a-calcular{ display:inline-flex; align-items:center; gap:4px; }

.entrega-horarios{ margin-top:10px; }
.entrega-horarios summary{ color:var(--cp-accent); cursor:pointer; font-weight:600; font-size:13px; }
.tabla-horarios{ width:100%; border-collapse:collapse; margin-top:8px; }
.tabla-horarios th, .tabla-horarios td{ padding:6px 8px; border-bottom:1px solid var(--cp-line); text-align:left; font-size:12.6px; }
.tabla-horarios-cerrado{ display:inline-flex; align-items:center; gap:4px; color:var(--cp-text-muted); }

.checkout-btn-primary{
  margin-top:18px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; background:var(--cp-accent); color:#fff; border:none; padding:13px; border-radius:10px;
  font-size:14.5px; font-weight:700; cursor:pointer; transition:background .2s ease;
}
.checkout-btn-primary:hover{ background:var(--cp-accent-dark); }
.checkout-btn-primary:disabled{ opacity:.55; cursor:not-allowed; }

.checkout-back-link{
  display:inline-flex; align-items:center; gap:6px; background:none; border:none; color:var(--cp-text-muted);
  font-size:12.8px; font-weight:600; cursor:pointer; padding:0; margin-bottom:14px;
}
.checkout-back-link:hover{ color:var(--cp-accent); }

/* ---- métodos de pago ---- */
.payment-methods{ display:flex; gap:10px; margin-bottom:18px; }
.payment-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px; text-align:center;
  padding:12px; border-radius:10px; border:1.5px solid var(--cp-line); background:var(--cp-surface);
  cursor:pointer; transition:.15s ease; font-weight:600; font-size:13.5px; color:var(--cp-text-muted);
}
.payment-btn.selected, .payment-btn.active{ background:#f7f5ff; color:var(--cp-accent); border-color:var(--cp-accent); }

.payment-form{ display:none; }
.payment-form.active{ display:block; }
.payment-form h3{ font-size:15px; font-weight:700; margin-bottom:12px; }
.payment-form input, .payment-form select, .payment-form textarea{
  width:100%; padding:10px 12px; margin-bottom:12px; border-radius:9px; border:1px solid var(--cp-line);
  background:var(--cp-canvas); font:inherit; font-size:13.6px; color:var(--cp-text); box-sizing:border-box;
}
.payment-form input:focus, .payment-form select:focus, .payment-form textarea:focus{
  outline:2px solid var(--cp-accent); outline-offset:1px; background:var(--cp-surface);
}
.payment-form .form-group{ margin-bottom:14px; }
.payment-form .form-group label{ display:block; font-weight:600; font-size:12.8px; margin-bottom:4px; }
.payment-form .form-group small{ display:block; color:var(--cp-text-muted); font-size:11.5px; margin-bottom:6px; }
.payment-form hr{ border:none; border-top:1px solid var(--cp-line); margin:14px 0; }

/* campos que Mercado Pago llena con un iframe adentro (antes tenían class="container",
   que colisionaba con el .container de Bootstrap que carga esta página; se
   renombró para no necesitar !important en cada regla) */
.checkout-mp-field{
  width:100%; height:42px; margin-bottom:12px; border-radius:9px; border:1px solid var(--cp-line);
  padding:0; display:flex; align-items:center; overflow:hidden; background:var(--cp-canvas);
}
.checkout-mp-field iframe{ width:100%; height:100%; border:none; }

.btn-confirmar{
  background:var(--cp-accent); color:#fff; border:none; padding:13px; width:100%; border-radius:10px;
  font-size:14.5px; font-weight:700; cursor:pointer; transition:background .2s ease;
}
.btn-confirmar:hover{ background:var(--cp-accent-dark); }

.progress-bar{ width:100%; height:6px; margin-top:12px; border-radius:99px; overflow:hidden; border:none; background:var(--cp-line); }
.progress-bar::-webkit-progress-bar{ background:var(--cp-line); border-radius:99px; }
.progress-bar::-webkit-progress-value{ background:var(--cp-accent); border-radius:99px; }
.progress-bar::-moz-progress-bar{ background:var(--cp-accent); border-radius:99px; }

/* tabla de datos de transferencia bancaria */
.dashboard-table{ width:100%; border-collapse:collapse; background:var(--cp-surface); border:1px solid var(--cp-line); border-radius:10px; overflow:hidden; margin-bottom:16px; }
.dashboard-table-cell{ padding:12px 16px; font-size:13.8px; }
.dashboard-table-cell:first-child{ font-weight:600; color:var(--cp-text-muted); background:var(--cp-canvas); width:40%; }
.dashboard-table-cell:last-child{ color:var(--cp-accent); font-weight:700; }

/* ---- resumen de compra: mismo componente en los 2 pasos ---- */
.checkout-summary{
  background:var(--cp-surface); border:1px solid var(--cp-line); border-radius:var(--cp-radius);
  box-shadow:var(--cp-shadow); padding:20px;
}
.checkout-summary-title{ font-size:15px; font-weight:700; margin-bottom:14px; }

.resumen-box{ display:flex; flex-direction:column; gap:8px; padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--cp-line); }
.resumen-line{ display:flex; justify-content:space-between; font-size:13.5px; color:var(--cp-text-muted); }
.resumen-total{ display:flex; justify-content:space-between; font-size:16px; font-weight:700; color:var(--cp-text); margin-top:4px; }

.checkout-summary-products{ display:flex; flex-direction:column; gap:12px; max-height:360px; overflow-y:auto; }
.checkout-summary-item{ display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:flex-start; }
.checkout-summary-item-img{ width:44px; height:44px; object-fit:cover; border-radius:8px; flex-shrink:0; }
.checkout-summary-item-img-placeholder{ display:flex; align-items:center; justify-content:center; background:#f5f5f5; color:#ccc; }
.checkout-summary-item-img-placeholder svg{ width:38%; height:38%; }

.checkout-summary-item-info{ min-width:0; display:flex; flex-direction:column; gap:4px; }
.checkout-summary-item-name{ font-size:12.8px; font-weight:600; color:var(--cp-text); text-decoration:none; line-height:1.3; }
.checkout-summary-item-name:hover{ color:var(--cp-accent); text-decoration:underline; }
.checkout-summary-item-variants{ display:flex; flex-wrap:wrap; gap:4px; }
.checkout-summary-item-variants .carrito-variant-chip{ font-size:10px; padding:1px 8px; }
.checkout-summary-item-qty{ font-size:11.5px; color:var(--cp-text-muted); }
.checkout-summary-item-alert{ display:flex; align-items:center; gap:4px; font-size:10.8px; color:var(--cp-danger); font-weight:600; }
.checkout-summary-item-alert svg{ flex-shrink:0; }

.checkout-summary-item-price{ font-size:12.8px; font-weight:700; white-space:nowrap; text-align:right; }
.tachado{ display:block; text-decoration:line-through; color:#b5b8c6; font-weight:400; font-size:11px; }

/* ---- tienda cerrada ---- */
.store-closed-card{
  display:flex; align-items:center; gap:14px; background:var(--cp-warn-soft); border:1px solid #f0d29a;
  border-radius:12px; padding:20px; max-width:480px; margin:40px auto; font-family:'Montserrat','Segoe UI',sans-serif;
}
.store-closed-icon{ color:var(--cp-warn); flex-shrink:0; }
.store-closed-text h3{ margin:0; color:var(--cp-warn); font-size:17px; font-weight:700; }
.store-closed-text p{ margin-top:4px; color:var(--cp-text); font-size:13.5px; }
.store-closed-text span{ color:var(--cp-warn); font-weight:700; }

/* ---- responsive ---- */
@media (max-width: 860px){
  .checkout-layout{ flex-direction:column; }
  .checkout-side{ position:static; width:100%; }
  .checkout-summary-products{ max-height:none; }
}


/* ==========================================================================
   Mis compras — historial de pedidos. Pedido del usuario: "que siga
   pareciendo un tiket pero reorganizá la información". Se mantiene el
   recorte tipo ticket -.ticket-bottom-shape, sin tocar el clip-path- y la
   tabla de líneas punteadas -.ticket-table-, con el resto del look llevado
   a los tokens --cp-* que ya usan Mi carrito/Confirmar carrito.
   ========================================================================== */

.miscompras-page{ display:flex; flex-direction:column; gap:28px; }

.miscompras-ticket{
  /* sin border ni border-radius: el clip-path de .ticket-bottom-shape ya
     recorta el contorno completo -esquinas y borde inferior en zigzag-,
     un border prolijo no sobreviviría ese recorte */
  background:var(--cp-surface); box-shadow:var(--cp-shadow); overflow:hidden;
}

/* borde inferior recortado tipo ticket de papel */
.ticket-bottom-shape{
  padding-bottom:2.5rem;
  clip-path: polygon(
    0 0, 100% 0, 100% 95%,
    98% 100%, 96% 95%, 94% 100%, 92% 95%, 90% 100%,
    88% 95%, 86% 100%, 84% 95%, 82% 100%, 80% 95%, 78% 100%, 76% 95%, 74% 100%,
    72% 95%, 70% 100%, 68% 95%, 66% 100%, 64% 95%, 62% 100%, 60% 95%, 58% 100%,
    56% 95%, 54% 100%, 52% 95%, 50% 100%, 48% 95%, 46% 100%, 44% 95%, 42% 100%,
    40% 95%, 38% 100%, 36% 95%, 34% 100%, 32% 95%, 30% 100%, 28% 95%, 26% 100%,
    24% 95%, 22% 100%, 20% 95%, 18% 100%, 16% 95%, 14% 100%, 12% 95%, 10% 100%,
    8% 95%, 6% 100%, 4% 95%, 2% 100%, 0 95%
  );
}
@media (max-width: 600px){
  .ticket-bottom-shape{
    clip-path: polygon(
      0 0, 100% 0, 100% 95%,
      96% 100%, 92% 95%, 88% 100%, 84% 95%, 80% 100%,
      76% 95%, 72% 100%, 68% 95%, 64% 100%, 60% 95%, 56% 100%, 52% 95%, 48% 100%,
      44% 95%, 40% 100%, 36% 95%, 32% 100%, 28% 95%, 24% 100%, 20% 95%, 16% 100%,
      12% 95%, 8% 100%, 4% 95%, 0 100%
    );
  }
}

.miscompras-ticket-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; flex-wrap:wrap;
}
.miscompras-ticket-store{ display:flex; align-items:center; gap:10px; text-decoration:none; min-width:0; }
.miscompras-ticket-store img{ width:36px; height:36px; object-fit:contain; border-radius:8px; background:rgba(255,255,255,.6); flex-shrink:0; }
.miscompras-ticket-storename{ font-weight:700; font-size:15px; }
.miscompras-ticket-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; font-size:12px; opacity:.9; }
.miscompras-ticket-code{ font-weight:600; }

.miscompras-ticket-body{ padding:20px; }

.miscompras-status-row{ margin-bottom:16px; }

/* ---- barra de progreso (misma lógica de siempre, NO TOCAR el .tpl — esto es solo el skin) ---- */
.progress-bar-container{ display:flex; align-items:center; justify-content:space-between; position:relative; }
.progress-step{ display:flex; flex-direction:column; align-items:center; position:relative; width:20%; text-align:center; }
.progress-step .step-circle{
  width:20px; height:20px; border-radius:50%; border:2px solid var(--cp-line); background:var(--cp-surface);
  position:relative; z-index:2; margin-bottom:6px; display:flex; align-items:center; justify-content:center;
}
.progress-step .step-circle.filled{ background:var(--cp-accent); border-color:var(--cp-accent); }
.tick-icon{ color:#fff; }
.progress-step .step-label{ font-size:11px; color:var(--cp-text-muted); white-space:normal; line-height:1.25; }
.progress-step.current .step-label{ color:var(--cp-text); font-weight:700; }
.progress-bar-container::before{ content:""; position:absolute; top:10px; left:0; right:0; height:2px; background:var(--cp-line); z-index:1; }
.progress-step.completed .step-circle{ border-color:var(--cp-accent); }

@media (max-width: 620px){
  /* en mobile, en vez de esconder toda la barra, mostramos solo el paso actual con su número de orden */
  .progress-bar-container{ justify-content:flex-start; gap:10px; }
  .progress-bar-container::before{ display:none; }
  .progress-step{ display:none; width:auto; text-align:left; }
  .progress-step.current{ display:flex; flex-direction:row; align-items:center; gap:8px; }
  .progress-step.current .step-circle{ margin-bottom:0; }
  .progress-step.current .step-label{ font-size:13px; }
}

/* ---- aviso de retiro ---- */
.miscompras-alert{
  display:flex; align-items:flex-start; gap:10px; background:var(--cp-canvas); border:1px solid var(--cp-line);
  border-radius:10px; padding:12px 14px; margin-bottom:16px; font-size:13.3px; color:var(--cp-text);
}
.miscompras-alert svg{ flex-shrink:0; margin-top:2px; color:var(--cp-accent); }

.pd-mini-horarios-toggle{
  display:inline-flex; align-items:center; gap:6px; margin-top:8px; padding:5px 10px; font-size:12px; font-weight:600;
  background:var(--cp-surface); color:var(--cp-accent); border:1px solid var(--cp-line); border-radius:7px; cursor:pointer;
}
.pd-mini-horarios-content{ margin-top:8px; }
.pd-mini-horarios-tabla{ background:var(--cp-surface); border:1px solid var(--cp-line); border-radius:8px; padding:4px; width:100%; }
.pd-mini-horarios-tabla td{ padding:4px 8px; font-size:12px; }
.tabla-horarios-cerrado{ display:inline-flex; align-items:center; gap:4px; color:var(--cp-text-muted); }

/* ---- detalle de compra: tabla ticket, bordes punteados ---- */
.miscompras-products h2{ font-size:15px; font-weight:700; margin-bottom:10px; }
.ticket-responsive{ overflow-x:auto; }
.ticket-table{ width:100%; border-collapse:collapse; min-width:360px; }
.ticket-table th, .ticket-table td{ padding:10px 12px; text-align:left; border:1px dashed var(--cp-line); font-size:13.3px; }
.ticket-table thead th{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--cp-text-muted); font-weight:700; border-top:none; }
.ticket-table a{ color:var(--cp-text); font-weight:600; text-decoration:none; }
.ticket-table a:hover{ color:var(--cp-accent); text-decoration:underline; }
.miscompras-item-variants{ display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.miscompras-item-variants .carrito-variant-chip{ font-size:10px; padding:1px 8px; }
.ticket-table .envio-row td, .ticket-table .total-row td{ font-weight:600; border-bottom:none; }
.ticket-table .total-row td{ font-size:15px; font-weight:700; }

/* ---- botón "Ver factura" (link directo a Cypher Gestión, sin sesión) ---- */
.miscompras-factura-btn{
  display:inline-flex; align-items:center; gap:7px; margin-top:16px; padding:9px 16px;
  border-radius:9px; border:1.5px solid var(--cp-accent); color:var(--cp-accent);
  background:var(--cp-surface); font-size:13.3px; font-weight:700; text-decoration:none;
  transition:background .15s ease, color .15s ease;
}
.miscompras-factura-btn:hover{ background:var(--cp-accent); color:#fff; }

/* ---- pie: contacto de la tienda ---- */
.miscompras-ticket-footer{ padding:18px 20px 26px; border-top:1px dashed var(--cp-line); }
.miscompras-ticket-footer h3{ font-size:13.5px; font-weight:700; margin-bottom:10px; }
.miscompras-contact-rows{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.miscompras-contact-row{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--cp-text-muted);
  text-decoration:none; width:fit-content;
}
a.miscompras-contact-row:hover{ color:var(--cp-accent); }
.miscompras-contact-row svg{ flex-shrink:0; color:var(--cp-text-muted); }

.miscompras-social{ display:flex; gap:8px; }
.miscompras-social-btn{
  display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:9px;
  background:var(--cp-canvas); color:var(--cp-text-muted); transition:background .15s ease, color .15s ease;
}
.miscompras-social-btn:hover{ background:var(--cp-accent); color:#fff; }

/* ---- badge de estado del pedido ---- */
/* nombre propio -no ".badge"- a propósito: esta página carga Bootstrap
   (header-offlog.tpl) DESPUÉS de carrito.css, y el .badge de Bootstrap
   pisaría este estilo por orden de cascada */
.miscompras-badge{
  display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:999px;
  font-size:11.5px; font-weight:700; font-family:'Montserrat','Segoe UI',sans-serif;
}
.miscompras-badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }
.miscompras-badge-neutral{ background:var(--cp-canvas); color:var(--cp-text-muted); }
.miscompras-badge-good{ background:var(--cp-good-soft); color:var(--cp-good); }
.miscompras-badge-bad{ background:var(--cp-danger-soft); color:var(--cp-danger); }

.miscompras-alert-danger{ background:var(--cp-danger-soft); border-color:transparent; color:var(--cp-danger); }
.miscompras-alert-danger svg{ color:var(--cp-danger); }

@media (max-width: 500px){
  .miscompras-ticket-header{ flex-direction:column; align-items:flex-start; }
  .miscompras-ticket-meta{ align-items:flex-start; }
}