/**
 * ═══════════════════════════════════════════════════════════════
 * PRODUCT CARD - Tarjetas de producto globales reutilizables
 * ═══════════════════════════════════════════════════════════════
 *
 * Archivo global cargado en layout.ejs
 * Usado en: shop, carousel, y cualquier vista de productos
 *
 * CLASES PRINCIPALES:
 * - .product-card-link    → Link contenedor de la tarjeta
 * - .product-card         → Tarjeta de producto
 * - .product-image-*      → Contenedor y elemento de imagen
 * - .product-info         → Información del producto
 * - .product-prices       → Sección de precios
 * - .btn-add-cart         → Botón añadir al carrito
 * - .badge-*              → Badges universales (blackfriday, etc.)
 *
 * Compatible con dark mode automáticamente (usa variables CSS)
 */

/* ═══════════════════════════════════════════════════════════════
   TARJETA DE PRODUCTO - BASE
   ═══════════════════════════════════════════════════════════════ */

.product-card-link {
  position: relative;
  text-decoration: none;
  color: inherit;
  display: block;
}

.product-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition-smooth);
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}

.product-card-link:hover .product-card,
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: var(--primary-color);
}

/* ═══════════════════════════════════════════════════════════════
   CONTENEDOR DE IMAGEN
   ═══════════════════════════════════════════════════════════════ */

.product-image-container {
  position: relative;
  top: 0;
  width: 100%;
  padding-top: 100%; /* Aspect ratio 1:1 */
  /* background: var(--bg-secondary); */
  overflow: hidden;
}

.product-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.product-card-link:hover .product-image,
.product-card:hover .product-image {
  transform: scale(1.05);
}

/* ═══════════════════════════════════════════════════════════════
   BADGES SUPERIORES
   ═══════════════════════════════════════════════════════════════ */

.product-badges {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

.badges-container {
  position: relative;
  text-transform: uppercase;
  color: white;
}

/* ═══════════════════════════════════════════════════════════════
   INFORMACIÓN DEL PRODUCTO
   ═══════════════════════════════════════════════════════════════ */

.product-info {
  padding: 0.875rem; /* 20px */
  display: flex;
  flex-direction: column;
  /* gap: 0.75rem; */
  flex: 1;
  user-select: none; /* ✅ Prevenir selección de texto al arrastrar */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.product-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.product-category {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.product-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}

.product-code {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  font-family: 'Courier New', monospace;
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════
   SECCIÓN DE PRECIOS
   ═══════════════════════════════════════════════════════════════ */

.product-prices {
  display: flex;
  flex-direction: column;
  /* gap: 0.375rem; */
  margin-top: auto;
}

.price-original {
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-decoration: line-through;
  font-weight: 500;
}

.price-final {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

.price-currency {
  font-size: 1rem;
  font-weight: 600;
}

.price-savings {
  font-size: 0.8125rem;
  color: var(--accent-color);
  font-weight: 600;
  /* background: rgba(255, 48, 0, 0.1); */
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  /* margin-top: 0.25rem; */
  display: inline-block;
}

/* ═══════════════════════════════════════════════════════════════
   BOTÓN AÑADIR AL CARRITO
   ═══════════════════════════════════════════════════════════════ */

.btn-add-cart {
  width: 100%;
  padding: 0.875rem 1.25rem;
  background: var(--primary-color);
  color: #ffffff;
  border: none;
  border-radius: var(--cm-btn-radius);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* margin-top: 0.75rem; */
  transition: var(--transition-smooth);
  position: relative;
  z-index: 10; /* ✅ Asegurar que esté sobre el carousel drag */
  pointer-events: auto; /* ✅ Permitir clicks aunque el padre tenga eventos */
}

.btn-add-cart:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-add-cart:disabled {
  background: var(--bg-tertiary);
  cursor: not-allowed;
  opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════════
   BADGES UNIVERSALES (EVENTOS, DESCUENTOS, STOCK)
   ═══════════════════════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}

/* Badge Black Friday */
.badge-blackfriday {
  position: absolute;
  top: 15px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #ffcc00, #ffb300);
  border-radius: 0 8px 8px 0;
  box-shadow: -1px 2px 3px rgba(0,0,0,.3);
  display: flex;
  gap: 5px;
}

.badge-blackfriday .black {
  color: #000000;
  font-weight: bold;
  font-style: italic;
}

.badge-blackfriday .friday {
  color: #ffffff;
  background: #000000;
  border-radius: 5px;
  padding: 2px 5px;
  font-weight: bold;
  font-style: italic;
}

.badge-blackfriday:before, .badge-blackfriday:after {
  content: "";
  position: absolute;
}

.badge-blackfriday:before {
  width: 7px;
  height: 100%;
  top: 0;
  left: -6.5px;
  padding: 0 0 7px;
  background: inherit;
  border-radius: 5px 0 0 5px;
}

.badge-blackfriday:after {
  width: 5px;
  height: 5px;
  bottom: -5px;
  left: -4.5px;
  background: rgb(255, 255, 255);
  border-radius: 5px 0 0 5px;
}

/* Badge Back to School */
.badge-backtoschool {
  position: absolute;
  top: 15px;
  padding: 8px 10px;
  background:
    radial-gradient(120px 70px at 18% 10%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(200px 90px at 80% 0%, rgba(255,255,255,.25), transparent 70%),
    linear-gradient(90deg, #ffd24d 0%, #ffb800 35%, #ff8a00 100%);
  border-radius: 0 8px 8px 0;
  box-shadow: -1px 2px 3px rgba(0,0,0,.3);
  display: flex;
  gap: 5px;
}

.badge-backtoschool .back {
  color: #1157ee;
  font-weight: bold;
  font-size: 0.8rem;
}

.badge-backtoschool .school {
  color: #ffffff;
  background:linear-gradient(180deg, #ff4d66, #e9003a);
  border-radius: 5px;
  padding: 2px 5px;
  font-weight: bold; 
}

.badge-backtoschool .school::after{
  content:"";
  position:absolute; inset:8px;
  border-radius:14px;
  border:1px dashed rgba(255,255,255,.35);
  pointer-events:none;
}


.badge-backtoschool:before, .badge-backtoschool:after {
  content: "";
  position: absolute;
}

.badge-backtoschool:before {
  width: 7px;
  height: 100%;
  top: 0;
  left: -6.5px;
  padding: 0 0 7px;
  background: linear-gradient(-180deg, #ffe496 0%, #fed96d 100%);
  border-radius: 5px 0 0 5px;
}

.badge-backtoschool:after {
  width: 5px;
  height: 5px;
  bottom: -5px;
  left: -4.5px;
  background: rgb(255, 255, 255);
  border-radius: 5px 0 0 5px;
}

/* Badge Promo Aniversario */
.badge-promoaniversario {
  position: absolute;
  top: 15px;
  padding: 8px 10px;
  background: linear-gradient(105deg, #a06200 0%, #e8c432 35%, #f7e06a 50%, #e8c432 65%, #a06200 100%);
  background-size: 250% 100%;
  border-radius: 0 8px 8px 0;
  box-shadow: -1px 2px 4px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25);
  display: flex;
  gap: 5px;
  align-items: center;
}

.badge-promoaniversario .promo {
  color: #3d1800;
  font-weight: bold;
  font-style: italic;
  text-shadow: 0 1px 0 rgba(255,255,255,.2);
}

.badge-promoaniversario .aniversario {
  color: #fff8d6;
  background: linear-gradient(180deg, #6b3e00, #3d1800);
  border-radius: 5px;
  padding: 2px 5px;
  font-weight: bold;
  font-style: italic;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}

.badge-promoaniversario:before,
.badge-promoaniversario:after {
  content: "";
  position: absolute;
}

.badge-promoaniversario:before {
  width: 7px;
  height: 100%;
  top: 0;
  left: -6.5px;
  padding: 0 0 7px;
  background: linear-gradient(180deg, #e8c432, #a06200);
  border-radius: 5px 0 0 5px;
}

.badge-promoaniversario:after {
  width: 5px;
  height: 5px;
  bottom: -5px;
  left: -4.5px;
  background: rgb(255, 255, 255);
  border-radius: 5px 0 0 5px;
}

@keyframes pa-shimmer {
  0%   { background-position: 150% center; }
  100% { background-position: -150% center; }
}

.product-card-link:hover .badge-promoaniversario {
  animation: pa-shimmer 1.8s ease-in-out infinite;
}

@keyframes pulse-badge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ═══════════════════════════════════════════════════════════════
   BADGE BLACK FRIDAY — rectángulos degradados (exclusivo blackfriday)
   ═══════════════════════════════════════════════════════════════ */

.badge-blackfriday-rects {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Base compartida */
.bf-rect {
  position: absolute;
  width: 30px;
  height: 100px;
  pointer-events: none;
}

.bf-rect::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  background: linear-gradient(180deg, #f72586, #3b0da4);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.bf-rect--inv::before {
  background: linear-gradient(180deg, #3b0da4, #f72586);
}

/* ── Grupo inferior izquierdo ── */
.bf-rect--l1 { bottom:  20px;  left: -10px; transform: rotate(-135deg); }
.bf-rect--l2 { bottom: -30px; left:  5px; transform: rotate(-135deg); }
.bf-rect--l3 { bottom: -60px; left:  45px; transform: rotate(-135deg); }

/* ── Grupo superior derecho ── */
.bf-rect--r1 { top:  20px;  right: -5px; transform: rotate(45deg); }
.bf-rect--r2 { top: -30px; right:  15px; transform: rotate(45deg); }
.bf-rect--r3 { top: -45px; right:  70px; transform: rotate(45deg); }

/* Keyframes — desplazamiento a lo largo del eje local de cada grupo */
@keyframes bf-slide-r {
  0%, 100% { transform: rotate(45deg)    translateY(0); }
  50%      { transform: rotate(45deg)    translateY(-10px); }
}

@keyframes bf-slide-l {
  0%, 100% { transform: rotate(-135deg) translateY(0); }
  50%      { transform: rotate(-135deg) translateY(-10px); }
}

/* Hover — cada rectángulo entra/sale con stagger independiente */
.product-card-link:hover .bf-rect--r1 { animation: bf-slide-r 2.0s ease-in-out infinite; }
.product-card-link:hover .bf-rect--r2 { animation: bf-slide-r 2.0s ease-in-out infinite 0.25s; }
.product-card-link:hover .bf-rect--r3 { animation: bf-slide-r 2.0s ease-in-out infinite 0.5s; }

.product-card-link:hover .bf-rect--l1 { animation: bf-slide-l 2.0s ease-in-out infinite 0.15s; }
.product-card-link:hover .bf-rect--l2 { animation: bf-slide-l 2.0s ease-in-out infinite 0.4s; }
.product-card-link:hover .bf-rect--l3 { animation: bf-slide-l 2.0s ease-in-out infinite 0.6s; }

/* ═══════════════════════════════════════════════════════════════
   BADGE BACK TO SCHOOL — íconos flotantes (exclusivo backtoschool)
   ═══════════════════════════════════════════════════════════════ */

.badge-backtoschool-icons {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 10px;
  z-index: 3;
  pointer-events: none;
}

.badge-backtoschool-icons img {
  width: 44px;
  height: 44px;
}

/* Libro — izquierda, inclinado, altura base */
.badge-backtoschool-icons img:nth-child(1) {
  transform: rotate(-35deg) translateY(4px);
  filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.38));
}

/* Compás — centro, inclinado, más arriba */
.badge-backtoschool-icons img:nth-child(2) {
  transform: rotate(7deg) translateY(1px);
  filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.42));
}

/* Lápiz — derecha, inclinado, más abajo */
.badge-backtoschool-icons img:nth-child(3) {
  transform: rotate(-9deg) translateY(-2px);
  filter: drop-shadow(-3px 3px 5px rgba(0, 0, 0, 0.35));
}

/* Keyframes — cada ícono mantiene su rotación y oscila verticalmente */
@keyframes bts-float-1 {
  0%, 100% { transform: rotate(-35deg) translateY(4px); }
  50%      { transform: rotate(-35deg) translateY(-4px); }
}

@keyframes bts-float-2 {
  0%, 100% { transform: rotate(7deg) translateY(1px); }
  50%      { transform: rotate(7deg) translateY(-7px); }
}

@keyframes bts-float-3 {
  0%, 100% { transform: rotate(-9deg) translateY(-2px); }
  50%      { transform: rotate(-9deg) translateY(-9px); }
}

/* Hover sobre la tarjeta — cada ícono flota con ritmo independiente */
.product-card-link:hover .badge-backtoschool-icons img:nth-child(1) {
  animation: bts-float-1 2.0s ease-in-out infinite;
}

.product-card-link:hover .badge-backtoschool-icons img:nth-child(2) {
  animation: bts-float-2 2.4s ease-in-out infinite 0.25s;
}

.product-card-link:hover .badge-backtoschool-icons img:nth-child(3) {
  animation: bts-float-3 1.9s ease-in-out infinite 0.5s;
}

/* ═══════════════════════════════════════════════════════════════
   BADGE PROMO ANIVERSARIO — íconos flotantes (exclusivo promoaniversario)
   ═══════════════════════════════════════════════════════════════ */

.badge-promoaniversario-icons {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 10px;
  z-index: 3;
  pointer-events: none;
}

.badge-promoaniversario-icons img {
  width: 44px;
  height: 44px;
}

/* stars — izquierda, inclinado hacia adentro */
.badge-promoaniversario-icons img:nth-child(1) {
  transform: rotate(-20deg) translateY(4px);
  filter: drop-shadow(2px 3px 5px rgba(0, 0, 0, 0.35));
}

/* star — centro, más alto, ligero escala */
.badge-promoaniversario-icons img:nth-child(2) {
  transform: scale(1.15) translateY(-4px);
  filter: drop-shadow(0px 3px 7px rgba(200, 145, 10, 0.55));
}

/* stars — derecha, espejado, inclinado en sentido opuesto */
.badge-promoaniversario-icons img:nth-child(3) {
  transform: rotate(20deg) translateY(4px) scaleX(-1);
  filter: drop-shadow(-2px 3px 5px rgba(0, 0, 0, 0.35));
}

/* Keyframes — cada ícono mantiene su transform base y sube */
@keyframes pa-float-l {
  0%, 100% { transform: rotate(-20deg) translateY(4px); }
  50%      { transform: rotate(-20deg) translateY(-6px); }
}

@keyframes pa-float-center {
  0%, 100% { transform: scale(1.15) translateY(-4px) rotate(0deg); }
  50%      { transform: scale(1.15) translateY(-12px) rotate(15deg); }
}

@keyframes pa-float-r {
  0%, 100% { transform: rotate(20deg) translateY(4px) scaleX(-1); }
  50%      { transform: rotate(20deg) translateY(-6px) scaleX(-1); }
}

/* Hover sobre la tarjeta — cada ícono flota con ritmo independiente */
.product-card-link:hover .badge-promoaniversario-icons img:nth-child(1) {
  animation: pa-float-l 2.2s ease-in-out infinite;
}

.product-card-link:hover .badge-promoaniversario-icons img:nth-child(2) {
  animation: pa-float-center 1.8s ease-in-out infinite 0.2s;
}

.product-card-link:hover .badge-promoaniversario-icons img:nth-child(3) {
  animation: pa-float-r 2.2s ease-in-out infinite 0.4s;
}

/* Badge de Descuento */
.badge-discount {
  background: var(--accent-color);
  color: #ffffff;
}

/* Badge de Stock Alto */
.badge-stock-high {
  background: #10b981;
  color: #ffffff;
}

/* Badge de Stock Bajo */
.badge-stock-low {
  background: #f59e0b;
  color: #ffffff;
}

/* Badge Sin Stock */
.badge-out-stock {
  background: var(--bg-tertiary);
  color: var(--text-light);
}

/* Badge Nuevo */
.badge-new {
  background: var(--primary-color);
  color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE - MOBILE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 992px) {
  .product-info {
    padding: 1rem;
  }

  .product-title {
    font-size: 0.9375rem;
  }

  .price-final {
    font-size: 1.25rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   OVERLAY DE CONFIRMACIÓN AL AÑADIR AL CARRITO
   ═══════════════════════════════════════════════════════════════ */

.product-card-added-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  border-radius: var(--radius-lg);
}

.product-card-added-overlay.active {
  opacity: 1;
  visibility: visible;
}

.product-card-added-check {
  width: 80px;
  height: 80px;
  background: #22c55e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(34, 197, 94, 0.3);
  transform: scale(0);
  animation: checkPop 0.5s ease forwards;
}

.product-card-added-check svg {
  width: 48px;
  height: 48px;
  stroke: white;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

@keyframes checkPop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Dark mode para overlay */
.dark_mode .product-card-added-overlay {
  background: rgba(15, 23, 42, 0.95);
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════════ */

/* No se necesitan estilos adicionales para dark mode,
   ya que todas las variables CSS se ajustan automáticamente
   cuando body.dark_mode está activo */