/* =========================
   QuVi · Cart Overlay (PRO · inline-compact)
   ========================= */

/* 00) Global drag */
body.cart-dragging,body.cart-dragging *{user-select:none!important;-webkit-user-select:none!important}body.cart-dragging{cursor:grabbing}

/* 01) Backdrop (shared .tools-backdrop) */
html.tools-open .tools-backdrop,html.cart-open .tools-backdrop{opacity:1;pointer-events:auto}

/* 02) Panel */
.cart-panel{position:fixed;inset:0 0 0 auto;width:min(420px,100%);background:var(--surface,#fff);color:var(--label,#0f1422);box-shadow:-24px 0 48px rgba(15,20,34,.18);transform:translateX(100%);transition:transform .24s cubic-bezier(.22,.61,.36,1);z-index:var(--z-drawer-panel,2101);outline:0;display:flex;flex-direction:column}.cart-panel.is-open{transform:translateX(0)}
.cart-body{padding:16px;overflow:auto;flex:1;display:block;color:var(--label,#0f1422)}

/* 03) Empty + list */
.cart-empty{margin:0;padding:18px 14px;border-radius:10px;border:1px dashed var(--separator,#e6eaf0);font:500 13px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--muted,#6b7280);text-align:center}
.cart-item{border:1px solid var(--separator,#e6eaf0);border-radius:10px;padding:10px 12px;display:grid;gap:4px;background:color-mix(in oklch,var(--surface,#fff) 96%,var(--bg,#0f1422) 4%)}.cart-item+.cart-item{margin-top:8px}
.cart-item h5{margin:0;font:600 13px/1.3 system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--label,#0f1422)}
.cart-item-meta{display:flex;flex-wrap:wrap;gap:6px 10px;font:500 12px/1.3 system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--muted,#6b7280)}
.cart-item-actions{margin-top:6px;display:flex;gap:8px;justify-content:flex-end}

/* 04) Summary */
.cart-summary{margin-top:16px;padding-top:14px;border-top:1px solid var(--separator,#e6eaf0);display:grid;gap:8px}
.cart-summary h4{margin:0;font:600 13px/1.3 system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--label,#0f1422)}
.cart-summary-line{margin:0;display:flex;flex-wrap:wrap;gap:6px;font:500 12px/1.3 system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--muted,#6b7280)}.cart-summary-line b{font-weight:600;color:var(--label,#0f1422)}
.cart-summary-actions{margin-top:6px;display:flex;gap:8px;justify-content:space-between;flex-wrap:wrap}
.cart-hint{font:500 11px/1.3 system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--muted,#6b7280)}

/* 05) Chip (button + badge) */
.btn-cart-icon{appearance:none;display:inline-flex;align-items:center;gap:6px;border-radius:999px;border:1px solid var(--separator,#e6eaf0);padding:6px 12px;font:600 13px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial;background:color-mix(in oklch,var(--surface,#fff) 96%,var(--bg,#0f1422) 4%);color:var(--label,#0f1422);cursor:pointer;position:relative;transform:translateZ(0);backface-visibility:hidden;isolation:isolate}
.btn-cart-icon:hover{background:color-mix(in oklch,var(--surface,#fff) 92%,var(--bg,#0f1422) 8%)}
.btn-cart-icon [data-lucide="shopping-cart"]{width:16px;height:16px}
.cart-badge{display:inline-grid;place-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;font:600 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial;background:color-mix(in oklch,var(--bg,#0f1422) 10%,var(--surface,#fff) 90%);border:1px solid var(--separator,#e6eaf0);color:var(--label,#0f1422)}

/* State: has-items (tiñe chip + badge + icon) */
.btn-cart-icon.has-items{color:color-mix(in oklch,var(--brand) 80%,black 20%);background:color-mix(in oklch,var(--brand) 6%,var(--surface));border-color:color-mix(in oklch,var(--brand) 35%,var(--separator,#e6eaf0))}
.btn-cart-icon.has-items svg,.btn-cart-icon.has-items [data-lucide="shopping-cart"]{color:inherit}
.btn-cart-icon.has-items .cart-badge{background:color-mix(in oklch,var(--brand) 10%,var(--surface));border-color:color-mix(in oklch,var(--brand) 35%,var(--separator,#e6eaf0));color:inherit}
.btn-cart-icon.has-items:hover{background:color-mix(in oklch,var(--brand) 8%,var(--surface));border-color:color-mix(in oklch,var(--brand) 40%,var(--separator,#e6eaf0))}

/* 06) Buttons (inside cart) */
.cart-btn{appearance:none;border-radius:999px;border:1px solid var(--separator,#e6eaf0);padding:7px 14px;font:600 13px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial;cursor:pointer;background:var(--tintSoft,color-mix(in oklch,var(--surface,#fff) 90%,var(--tint,#0d99ff) 10%));color:var(--tintText,var(--label,#0f1422))}
.cart-btn--ghost{background:transparent;color:var(--muted,#6b7280)}
.cart-btn:hover{background:color-mix(in oklch,var(--tint,#0d99ff) 18%,var(--surface,#fff) 82%)}
.cart-btn--ghost:hover{background:color-mix(in oklch,var(--surface,#fff) 94%,var(--bg,#0f1422) 6%)}

/* 07) Card CTA (Agregar/Agregado) */
.btn-cta-solicitar{display:inline-flex;align-items:center;gap:6px}
.btn-cta-solicitar.is-in-cart{background:color-mix(in oklch,var(--tint,#0d99ff) 16%,var(--surface,#fff) 84%);border-color:color-mix(in oklch,var(--tint,#0d99ff) 40%,var(--separator,#e6eaf0) 60%)}
.btn-cta-solicitar.is-in-cart:hover{background:color-mix(in oklch,var(--tint,#0d99ff) 22%,var(--surface,#fff) 78%)}

/* 08) Swipe spring (NO toca base de flip-card / tarjeta-plan) */
[data-plan-id].is-swipe-active{z-index:5}
.flip-card.is-swipe-active{z-index:5}
[data-plan-id].swipe-spring,.flip-card.swipe-spring{transition:transform .30s cubic-bezier(.28,1.7,.4,1);will-change:transform}
[data-plan-id].swipe-spring-back,.flip-card.swipe-spring-back{transition:transform .26s cubic-bezier(.20,1.2,.32,1);will-change:transform}

/* CTA spring más lento (solo cuando viene desde click CTA) */
[data-plan-id].cta-spring.swipe-spring,
.flip-card.cta-spring.swipe-spring{
  transition-duration:.50s;
}
@media (prefers-reduced-motion:reduce){
  [data-plan-id].cta-spring.swipe-spring,
  .flip-card.cta-spring.swipe-spring{transition:none}
}

/* 09) Chip “elastic” animation */
.btn-cart-icon.cart-chip-anim{animation:cart-elastic 560ms cubic-bezier(.18,1.25,.2,1);will-change:transform}
.btn-cart-icon.cart-chip-anim .cart-badge{animation:badge-elastic 560ms cubic-bezier(.18,1.25,.2,1);will-change:transform}
@keyframes cart-elastic{0%{transform:scale(1) rotate(0)}16%{transform:scale(1.12) rotate(-8deg)}34%{transform:scale(.98) rotate(5deg)}56%{transform:scale(1.06) rotate(-2deg)}100%{transform:scale(1) rotate(0)}}
@keyframes badge-elastic{0%{transform:scale(1)}20%{transform:scale(1.25)}38%{transform:scale(.95)}62%{transform:scale(1.10)}100%{transform:scale(1)}}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  [data-plan-id].swipe-spring,[data-plan-id].swipe-spring-back,.flip-card.swipe-spring,.flip-card.swipe-spring-back{transition:none}
  .btn-cart-icon.cart-chip-anim,.btn-cart-icon.cart-chip-anim .cart-badge{animation:none!important}
}