/**
 * ui-layer.css — Capa única de overlays
 * SpeedyRectCore v7.0
 *
 * Reemplaza fix-carrito-zindex.js
 * Todos los overlays salen de #ui-layer-root
 * Un solo z-index de verdad, sin parches JS
 */

/* ── Variables de z-index ── */
:root {
  --z-base:       1;
  --z-sticky:   100;
  --z-drawer:   900;
  --z-modal:   1000;
  --z-toast:   1100;
  --z-loader: 10000;
}

/* ── Capa raíz de overlays ── */
#ui-layer-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-modal);
  isolation: isolate;
}

/* Todos los hijos del layer son interactuables */
#ui-layer-root > * {
  pointer-events: auto;
}

/* ── Drawer del carrito ── */
#carrito-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(380px, 92vw);
  z-index: var(--z-drawer);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

#carrito-drawer.open {
  transform: translateX(0);
}

/* ── Modal de producto ── */
#modal-producto {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

#modal-producto.visible {
  opacity: 1;
  pointer-events: auto;
}

#modal-producto .modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ── Móvil: reducir blur y sombras ── */
@media (max-width: 480px) {
  #modal-producto .modal-backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Reducir animaciones en G30 */
  @media (prefers-reduced-motion: reduce),
         (max-device-memory: 2gb) {
    * {
      animation-duration: 0.01ms !important;
      transition-duration: 0.15ms !important;
    }
  }
}

/* ── Toast / notificaciones ── */
#toast-container {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  width: min(320px, 90vw);
}

.toast {
  background: #1a1a2e;
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.25s ease;
  pointer-events: none;
  text-align: center;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ── TV flotante ── */
#tv-flotante-container {
  position: fixed;
  z-index: var(--z-drawer);
}

/* ── Page loader ── */
#page-loader {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: var(--z-loader);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Botones PDF — en CSS, no en JS ── */
.btn-pdf,
button[data-pdf],
.ver-catalogo-btn {
  background-color: #dc2626 !important;
  color: #fff !important;
  border: none;
  cursor: pointer;
}

.btn-pdf:hover,
button[data-pdf]:hover,
.ver-catalogo-btn:hover {
  background-color: #b91c1c !important;
}