/* === Carrusel Home (theme-aware) === */
#productosCarousel.products-carousel { --pc-indicator-size: 10px; }

:root{
  /* lee del bridge */
  --pc-primary: var(--bs-primary);
  --pc-on-primary: var(--bs-primary-contrast, #fff);
  --pc-primary-weak: color-mix(in oklab, var(--pc-primary) 35%, transparent);
}

/* Indicadores (puntitos) */
#productosCarousel.products-carousel .carousel-indicators{
  position: static;
  margin: .75rem 0 1.25rem;
  gap: .45rem;
}
#productosCarousel.products-carousel .carousel-indicators [data-bs-target]{
  width: var(--pc-indicator-size);
  height: var(--pc-indicator-size);
  border-radius: 999px;
  background: var(--pc-primary-weak);
  border: 0;
  opacity: 1;
  transition: transform .15s ease;
}
#productosCarousel.products-carousel .carousel-indicators [data-bs-target].active{
  background: var(--pc-primary);
  outline: 3px solid color-mix(in oklab, var(--pc-primary) 25%, transparent);
  transform: scale(1.05);
}

/* Flechas laterales */
#productosCarousel.products-carousel .carousel-control-prev,
#productosCarousel.products-carousel .carousel-control-next{
  width: 3.5rem; z-index: 5; opacity: 1;
}
#productosCarousel.products-carousel .carousel-control-prev::after,
#productosCarousel.products-carousel .carousel-control-next::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:999px;
  background: color-mix(in oklab, var(--pc-primary) 85%, transparent);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
#productosCarousel.products-carousel .carousel-control-prev-icon,
#productosCarousel.products-carousel .carousel-control-next-icon{
  filter: drop-shadow(0 0 6px rgba(0,0,0,.55)) invert(1) contrast(1.25);
}
#productosCarousel.products-carousel .carousel-control-prev::after{ left:.5rem; }
#productosCarousel.products-carousel .carousel-control-next::after{ right:.5rem; }
#productosCarousel.products-carousel .carousel-control-prev:hover::after,
#productosCarousel.products-carousel .carousel-control-next:hover::after{
  background: var(--pc-primary);
}

/* Botones */
.btn.btn-brand{
  --bs-btn-bg: var(--pc-primary);
  --bs-btn-border-color: var(--pc-primary);
  --bs-btn-color: var(--pc-on-primary);
  --bs-btn-hover-bg: color-mix(in oklab, var(--pc-primary) 92%, black 8%);
  --bs-btn-hover-border-color: color-mix(in oklab, var(--pc-primary) 92%, black 8%);
  --bs-btn-active-bg: color-mix(in oklab, var(--pc-primary) 85%, black 15%);
  --bs-btn-active-border-color: color-mix(in oklab, var(--pc-primary) 85%, black 15%);
}
.btn-outline-primary{
  --bs-btn-color: var(--pc-primary);
  --bs-btn-border-color: var(--pc-primary);
  --bs-btn-hover-bg: var(--pc-primary);
  --bs-btn-hover-border-color: var(--pc-primary);
  --bs-btn-hover-color: var(--pc-on-primary);
}

/* Botón primario dentro de las cards del carrusel: usa el color del tema */
#productosCarousel.products-carousel .card .btn-primary{
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-color: var(--brand-ink);
  --bs-btn-hover-bg: color-mix(in srgb, var(--brand) 92%, #000 8%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--brand) 92%, #000 8%);
  --bs-btn-active-bg: color-mix(in srgb, var(--brand) 85%, #000 15%);
  --bs-btn-active-border-color: color-mix(in srgb, var(--brand) 85%, #000 15%);
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.06);
}
#productosCarousel.products-carousel .card .btn-primary:focus{
  box-shadow: 0 0 0 .2rem var(--focus-ring);
}

/* Responsive */
@media (max-width: 576px){
  #productosCarousel.products-carousel .carousel-indicators{ margin: .5rem 0 .75rem; }
}

[x-cloak] { display: none !important; }