/* ==========================================================================
   PROSERMAT — Premium CART DRAWER 2026
   --------------------------------------------------------------------------
   FASE 3 · Sección 10 del plan UX/UI 2026.
   Drawer lateral del carrito (cart drawer). Slide-in desde la derecha con
   overlay backdrop-blur.

   ESTADO DE ESTA INTEGRACIÓN (sprint actual):
     - El sitio ya tiene una página /carrito completa, así que el drawer
       NO está conectado al JS en este sprint.
     - Sólo se entregan los estilos + el markup HTML (en layout.php) listos
       para que un sprint posterior los active con un disparador
       (ej. click en el botón "Carrito" del header → toggle .open).
     - Por defecto el drawer permanece OCULTO (translateX(100%) y overlay
       opacity 0 + pointer-events none).

   API esperada para activación futura:
     document.getElementById('cart-drawer').classList.add('open');
     document.getElementById('cart-overlay').classList.add('open');
   ========================================================================== */

/* ── Drawer (panel deslizante) ────────────────────────────────────────── */
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 100vw);
  max-width: 100vw;
  z-index: var(--z-drawer, 800);

  display: flex;
  flex-direction: column;
  background: var(--surface-card, #fff);
  box-shadow:
    -16px 0 32px rgba(15, 23, 42, 0.12),
    -4px 0 12px rgba(15, 23, 42, 0.06);

  /* Estado por defecto: oculto fuera de pantalla */
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;

  /* Transición suave (cubic-bezier estándar Material) */
  transition:
    transform var(--duration-slow, 320ms) cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear var(--duration-slow, 320ms);

  will-change: transform;
}

.cart-drawer.open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition:
    transform var(--duration-slow, 320ms) cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 0s;
}

/* ── Cabecera del drawer ──────────────────────────────────────────────── */
.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5, 20px) var(--space-6, 24px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  flex-shrink: 0;
  background: linear-gradient(180deg,
    var(--color-brand-50, #edfaf3) 0%,
    transparent 100%);
}

.cart-drawer__head h3 {
  margin: 0;
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-brand-900, #0f4529);
  letter-spacing: var(--tracking-tight, -0.02em);
}

.cart-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: var(--radius-full, 50%);
  color: var(--color-neutral-500, #6b6b62);
  font-size: 1.2rem;
  cursor: pointer;
  transition:
    background var(--duration-fast, 150ms) ease,
    color var(--duration-fast, 150ms) ease,
    transform var(--duration-fast, 150ms) var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1));
}
.cart-drawer__close:hover {
  background: var(--color-neutral-100, #f2f2ee);
  color: var(--color-brand-700, #1a7344);
  transform: rotate(90deg);
}
.cart-drawer__close:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(31, 122, 77, 0.35));
}

/* ── Cuerpo (lista de items o link al carrito completo) ───────────────── */
.cart-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-4, 16px) var(--space-6, 24px);
  -webkit-overflow-scrolling: touch;
}

.cart-drawer__body::-webkit-scrollbar { width: 8px; }
.cart-drawer__body::-webkit-scrollbar-thumb {
  background: var(--color-neutral-300, #b4b4a8);
  border-radius: var(--radius-pill, 999px);
}
.cart-drawer__body::-webkit-scrollbar-thumb:hover {
  background: var(--color-neutral-500, #6b6b62);
}

/* ── Overlay backdrop con blur ────────────────────────────────────────── */
.cart-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer, 800) - 1);
  background: rgba(10, 46, 26, 0.45);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--duration-base, 220ms) cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear var(--duration-base, 220ms);
}

.cart-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity var(--duration-base, 220ms) cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 0s;
}

/* ── Bloqueo de scroll del body cuando el drawer está abierto ────────── */
/* La clase .cart-drawer-open se agregaría al <body> desde JS futuro */
body.cart-drawer-open {
  overflow: hidden;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .cart-drawer {
    width: 100vw;
  }
  .cart-drawer__head {
    padding: var(--space-4, 16px) var(--space-5, 20px);
  }
  .cart-drawer__body {
    padding: var(--space-4, 16px) var(--space-5, 20px);
  }
}

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cart-drawer,
  .cart-overlay {
    transition-duration: 1ms !important;
  }
  .cart-drawer__close:hover { transform: none; }
}