/* ==========================================================================
   COLOR CAROUSEL — componente reutilizable
   Selector giratorio de tonos con una pieza central (esmalte, tinte...)
   y miniaturas sincronizadas. Todas las transiciones son fundidos
   encadenados (cross-fade), nunca deslizamientos ni cortes.
   El clic sobre la pieza central dispara una secuencia de despiece que
   termina en una capa de resultado con backdrop-filter.
   No depende de ningún producto, tono ni texto concreto: todo el
   contenido llega por datos (ver js/color-carousel.js).
   ========================================================================== */

.color-carousel {
  --cc-fade: 0.6s;
}

.color-carousel__stage-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4vw, 2.5rem);
}

.color-carousel__nav {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  /* Cristal esmerilado (glassmorphism), fijo sin importar la sección:
     azul marino oscuro semitransparente + blur del fondo detrás +
     borde blanco tenue, para que el botón se lea como un panel de
     vidrio flotando sobre "Colores a tu Medida" (fondo ceniza frío)
     en vez de un círculo opaco. El <pixel-canvas> va encima de este
     fondo y el ícono encima de ambos (ver reglas siguientes). Paleta
     blanco-azulada de punta a punta (normal y hover): nada de
     dorado/amarillo aquí, ese acento queda solo para el resto del
     sistema de diseño fuera de estos botones. */
  background: rgba(16, 24, 37, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #F2F8FC;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: border-color var(--transition-base);
}

/* <pixel-canvas> de fondo: cubre todo el botón, debajo del chevron,
   sin capturar clics (el click sigue siendo del <button>). En reposo
   no dibuja nada (los pixeles arrancan en tamaño 0); solo se anima al
   hover/focus, disparado por el propio Web Component. */
.color-carousel__nav pixel-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.color-carousel__nav-icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: transform var(--transition-base), color var(--transition-base);
}

.color-carousel__nav:hover {
  border-color: rgba(255, 255, 255, 0.4);
}

.color-carousel__nav:hover .color-carousel__nav-icon {
  transform: scale(1.18);
  color: #EAF3FA;
}

.color-carousel__nav:disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.color-carousel__stage {
  position: relative;
  flex: 0 0 auto;
  width: clamp(200px, 30vw, 300px);
  height: clamp(200px, 30vw, 300px);
  border-radius: 50%;
  background: var(--color-surface);
  /* Sin borde nítido: se despega del fondo con sombra difusa +
     halo dorado tenue, no con un contorno marcado. Sombra más oscura y
     halo más amplio que antes: sin la isla marfil detrás, el círculo
     flota directo sobre el fondo oscuro de la sección y necesita más
     peso propio para no perder profundidad. */
  border: none;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45), 0 0 30px 6px rgba(176, 141, 63, 0.22);
  overflow: hidden;
}

.color-carousel__stage-trigger {
  position: absolute;
  inset: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.color-carousel__stage.is-sequence .color-carousel__stage-trigger {
  transform: scale(1.06);
  /* Zoom corto y con arranque rápido: reacción inmediata al clic,
     no una animación que haya que esperar. */
  transition: transform 0.26s ease-out;
}

.color-carousel__stage-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* cover + center, igual que el recorte de las miniaturas
     (background-size: cover), para que el mismo encuadre quede
     centrado en ambos tamaños. */
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity var(--cc-fade) ease;
}

.color-carousel__stage-img.is-active {
  opacity: 1;
}

/* Durante la secuencia de despiece cada capa tiene su propio
   fundido + zoom sutil sincronizado (1 → 1.045): la capa que entra
   se acerca un poco mientras aparece, la que sale se aleja un poco
   mientras se desvanece. Ambas quedan superpuestas y visibles
   mientras dura la transición (cross-fade real, no un corte). */
.color-carousel__stage.is-sequence .color-carousel__stage-img {
  transform: scale(1);
  /* Debe coincidir con SEQUENCE_FADE_MS en color-carousel.js */
  transition: opacity 0.26s ease-out, transform 0.26s ease-out;
}

.color-carousel__stage.is-sequence .color-carousel__stage-img.is-active {
  transform: scale(1.045);
}

.color-carousel__ref {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
  font-family: var(--font-heading);
}

.color-carousel__ref-number {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-gold-deep);
}

.color-carousel__ref-name {
  font-size: 1.1rem;
  font-weight: 600;
}

.color-carousel__thumbs {
  /* Grid fijo de 6 columnas: con 12 miniaturas caen solas en 2 filas
     de 6, centradas, sin desbordar a los lados. El row-gap es mayor
     que el column-gap porque la placa con el número de referencia
     cuelga por debajo de cada miniatura (ver .color-carousel__thumb-ref)
     y necesita aire para no pisar la fila siguiente. */
  display: grid;
  grid-template-columns: repeat(6, 56px);
  justify-content: center;
  gap: 2rem 0.85rem;
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0.25rem 0.25rem 0.6rem;
}

.color-carousel__thumb-item {
  display: flex;
  justify-content: center;
}

.color-carousel__thumb {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid transparent;
  background-color: var(--color-bg-alt);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}

.color-carousel__thumb:hover {
  transform: translateY(-2px);
  /* Halo difuminado en vez de un borde nítido: se siente como un
     resplandor suave, no como un contorno duro. */
  box-shadow: 0 0 14px 3px rgba(176, 141, 63, 0.45);
}

.color-carousel__thumb:disabled {
  cursor: default;
}

.color-carousel__thumb.is-active {
  /* Indicador compacto: un anillo fino de 1.5px + un resplandor muy
     corto (6px de blur, 1px de spread) — contenido pegado al borde
     del círculo, no un aura grande. Negro ceniza (#3A3A3A) en vez de
     dorado, para diferenciarlo del halo de hover. Se suma al halo de
     hover (no lo reemplaza) en la regla de abajo. */
  box-shadow: 0 0 6px 1px rgba(58, 58, 58, 0.5), 0 0 0 1.5px rgba(58, 58, 58, 0.85);
}

.color-carousel__thumb.is-active:hover {
  box-shadow: 0 0 14px 3px rgba(176, 141, 63, 0.45), 0 0 6px 1px rgba(58, 58, 58, 0.5), 0 0 0 1.5px rgba(58, 58, 58, 0.85);
}

.color-carousel__thumb-ref {
  position: absolute;
  left: 50%;
  bottom: -0.6rem;
  transform: translateX(-50%);
  background: var(--color-surface);
  /* Borde y texto fijos (no var(--color-border)/var(--color-gold-deep)):
     esta placa siempre es --color-surface (blanco), igual razón que
     .color-carousel__nav arriba — no debe heredar el tema oscuro de la
     sección que la rodea. */
  border: 1px solid #E3D7BC;
  border-radius: 999px;
  padding: 0.05rem 0.4rem;
  font-size: 0.65rem;
  font-weight: 700;
  color: #5C5148;
  white-space: nowrap;
}

/* ---------- Capa de resultado ---------- */
.color-carousel__overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.color-carousel__overlay[hidden] {
  display: none;
}

.color-carousel__overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 23, 18, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  transition: opacity 0.55s ease-in-out;
}

.color-carousel__overlay-frame {
  position: relative;
  max-width: min(420px, 90vw);
  width: 100%;
}

.color-carousel__overlay-panel {
  background: var(--color-surface);
  /* Mismo criterio que el círculo central: contorno difuminado
     (sombra + halo dorado tenue) en vez de un borde definido. */
  border: none;
  box-shadow: 0 20px 50px rgba(20, 15, 10, 0.28), 0 0 26px 6px rgba(176, 141, 63, 0.22);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  opacity: 0;
  /* Expansión desde el centro: arranca notablemente más chico y
     crece hasta su tamaño final, en vez de aparecer estático. */
  transform: scale(0.65);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}

.color-carousel__overlay.is-open .color-carousel__overlay-backdrop {
  opacity: 1;
}

.color-carousel__overlay.is-open .color-carousel__overlay-panel {
  opacity: 1;
  transform: scale(1);
}

.color-carousel__overlay.is-open .color-carousel__overlay-close {
  opacity: 1;
  transform: scale(1);
}

.color-carousel__overlay-close {
  /* Fuera del marco de la foto, flotando sobre el fondo desenfocado
     del overlay, para que nunca se solape con la imagen ni dificulte
     el clic. */
  position: absolute;
  top: -18px;
  right: -18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: 0 4px 12px rgba(28, 23, 18, 0.25);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  /* Mismo fundido + escala que el panel (opacity/transform 0.45s
     ease-out): entran y salen como una sola unidad visual, sin
     desfase entre foto y botón. */
  opacity: 0;
  transform: scale(0.65);
  transition: background-color var(--transition-base), color var(--transition-base),
    opacity 0.45s ease-out, transform 0.45s ease-out;
}

.color-carousel__overlay-close:hover {
  background: var(--color-gold);
  color: var(--color-black);
}

.color-carousel__overlay-img {
  display: block;
  width: 100%;
  max-height: 55vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  /* Blur-a-foco integrado en el mismo movimiento que el panel (misma
     duración/easing): imagen y panel enfocan y aparecen juntos, como
     un único resurgir gradual, no como una capa que salta encima de
     la anterior. */
  filter: blur(18px);
  transition: filter 0.45s ease-out;
}

.color-carousel__overlay.is-open .color-carousel__overlay-img {
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .color-carousel__stage-img,
  .color-carousel__thumb,
  .color-carousel__nav,
  .color-carousel__nav-icon,
  .color-carousel__overlay-backdrop,
  .color-carousel__overlay-panel,
  .color-carousel__overlay-close,
  .color-carousel__overlay-img,
  .color-carousel__stage.is-sequence .color-carousel__stage-trigger {
    transition: none !important;
  }
}

@media (max-width: 560px) {
  .color-carousel__stage-row {
    gap: 0.75rem;
  }

  .color-carousel__nav {
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
  }

  /* Menos columnas en pantallas chicas para que las 12 miniaturas no
     se aprieten ni se corten: 4x3 en vez de 6x2. */
  .color-carousel__thumbs {
    grid-template-columns: repeat(4, 56px);
    gap: 1.75rem 0.6rem;
  }
}

@media (max-width: 360px) {
  .color-carousel__thumbs {
    grid-template-columns: repeat(3, 56px);
  }
}