/* ===========================================================
   JuntoCompra — Panel lateral (FICHA LATERAL.ai)
   =========================================================== */

/* Mismo mecanismo que el panel de la web actual (JUNTO COMPRA ACTUAL):
   el panel vive siempre en el DOM, fuera de pantalla, y lo único que se
   anima es `transform` con una sola transición que sirve para entrar y
   para salir. Dos detalles copiados literalmente de ahí, porque son los
   que lo hacen funcionar:
     · el estado abierto es translateX(0), NO `transform: none`
     · el fondo oscuro anima `background`, no `opacity`
   Nada de `visibility`, que no se interpola y rompía el cierre. */

.overlay{
  position:fixed;inset:0;z-index:80;
  background:rgba(36,36,68,0);
  pointer-events:none;
  transition:background .3s;
}
.overlay.is-open{
  background:rgba(36,36,68,.45);
  pointer-events:all;
}

/* Móvil primero: hoja que sube desde abajo */
.drawer{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  max-height:92dvh;
  display:flex;flex-direction:column;
  background:var(--bg);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:0 -8px 40px rgba(36,36,68,.18);
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.drawer.is-open{transform:translateY(0)}

/* Escritorio: cajón lateral que entra por la derecha */
@media (min-width:800px){
  .drawer{
    left:auto;top:0;bottom:0;right:0;
    width:min(400px,100%);
    max-height:100dvh;
    border-radius:0;
    box-shadow:var(--sh-panel);
    transform:translateX(100%);
  }
  .drawer.is-open{transform:translateX(0)}
}

/* El foco entra al panel, no a la "x": foco programático, sin anillo */
.drawer:focus,
.drawer:focus-visible{outline:none}

.drawer__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s5) var(--s6);
  border-bottom:1px solid rgba(36,36,68,.08);
  flex:none;
}
.drawer__head h2{font-size:var(--fs-body);font-weight:800}
.drawer__close{
  width:36px;height:36px;flex:none;
  display:grid;place-items:center;
  border-radius:var(--r-pill);
  transition:background var(--t-fast);
}
.drawer__close:hover{background:rgba(36,36,68,.08)}
.drawer__close svg{width:17px;height:17px}

.drawer__body{
  flex:1;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:var(--s6) var(--s6) var(--s8);
  -webkit-overflow-scrolling:touch;
}

/* Pie fijo: la acción principal no debería depender de cuánto scroll
   haya hecho el cliente. Vive fuera del cuerpo desplazable. */
.drawer__foot{
  flex:none;
  padding:var(--s4) var(--s6) var(--s5);
  background:var(--bg);
  border-top:1px solid rgba(36,36,68,.08);
  box-shadow:0 -8px 22px rgba(36,36,68,.07);
}
.drawer__foot .drawer__fine{margin-top:10px}

/* — Media — */
/* La imagen ocupaba tanto que había que hacer scroll para llegar a la
   tabla de tramos y al botón. Aquí va más contenida:
     · proporción 1.26, la de la ficha de la diseñadora (era 4:3)
     · tope en altura para que en pantallas bajas no se coma el panel
     · sin el reborde inferior extra que necesitaba la tarjeta para sus
       puntos e iconos, que aquí no existen */
.drawer__media{
  position:relative;
  /* Altura directa, no `aspect-ratio` con tope: al limitar la altura, la
     proporción encogía también el ancho y la imagen quedaba estrecha. */
  height:clamp(148px,20dvh,196px);
  background:var(--white);
  border-radius:var(--r-lg);
  overflow:hidden;
  margin-bottom:var(--s5);
}
.drawer__media .pcard__img{padding:20px}
.drawer__media .pcard__img--placeholder{font-size:clamp(44px,6vw,60px)}
.drawer__media .pcard__save{top:12px;right:12px}

/* — Cabecera — */
.drawer__meta{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  margin-bottom:6px;
}
.drawer__title{font-size:1.35rem;margin-bottom:var(--s2)}
.drawer__desc{font-size:var(--fs-sm);line-height:1.5;color:var(--ink-60);margin-bottom:var(--s5)}

.drawer__link{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;
  padding:.95em 1.3em;
  margin-bottom:var(--s6);
  border-radius:var(--r-sm);
  background:var(--red);color:var(--white);
  font-size:var(--fs-sm);font-weight:700;
  transition:background var(--t-fast);
}
.drawer__link:hover{background:var(--red-hover)}
.drawer__link svg{width:22px;height:14px}

/* ═══ TABLA DE TRAMOS — versión ampliada ══════════════════ */
.tierlist{
  background:var(--surface);
  border-radius:var(--r-lg);
  overflow:hidden;
  margin-bottom:var(--s5);
}
.tierlist__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s5) var(--s5) var(--s3);
  font-size:var(--fs-body);font-weight:800;
}
.tierrow{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:var(--s4);
  padding:13px var(--s5);
  border-top:1px solid rgba(36,36,68,.07);
}
.tierrow__badge{
  width:30px;height:30px;flex:none;
  display:grid;place-items:center;
  border-radius:var(--r-pill);
  background:rgba(36,36,68,.14);
  color:var(--ink-40);
  font-size:12px;font-weight:800;
}
.tierrow__badge svg{width:14px;height:14px}
.tierrow__range{display:block;font-size:var(--fs-body);font-weight:700;line-height:1.2}
.tierrow__state{display:block;font-size:11.5px;color:var(--ink-40);margin-top:1px}
.tierrow__right{text-align:right}
.tierrow__price{display:block;font-size:var(--fs-body);font-weight:700;line-height:1.2}
.tierrow__chip{
  display:inline-block;margin-top:4px;
  padding:2px 7px;
  border-radius:5px;
  background:rgba(36,36,68,.18);color:var(--ink-60);
  font-size:9.5px;font-weight:800;letter-spacing:.01em;
}

/* Tramo alcanzado */
.tierrow.is-done .tierrow__badge{background:var(--ink);color:var(--white)}
.tierrow.is-done .tierrow__chip{background:var(--ink);color:var(--white)}
.tierrow.is-done .tierrow__state{color:var(--ink-60)}

/* Tramo actual */
.tierrow.is-current{
  background:var(--red-soft);
  border-top:1.5px solid var(--red);
}
.tierrow.is-current .tierrow__badge{
  background:var(--red);color:var(--white);
  /* Mismo latido que en la web actual (tierPulse): el número del nivel
     activo late y suelta un halo que se expande y se desvanece. */
  animation:tierPulse 1.6s ease-out infinite;
}
@keyframes tierPulse{
  0%   {box-shadow:0 0 0 0 rgba(216,56,92,.55); transform:scale(1)}
  50%  {transform:scale(1.07)}
  70%  {box-shadow:0 0 0 9px rgba(216,56,92,0)}
  100% {box-shadow:0 0 0 0 rgba(216,56,92,0);  transform:scale(1)}
}
/* Quien haya pedido menos movimiento ve un aro fijo en lugar del latido */
@media (prefers-reduced-motion: reduce){
  .tierrow.is-current .tierrow__badge{
    animation:none;
    box-shadow:0 0 0 3px rgba(216,56,92,.25);
  }
}
.tierrow.is-current .tierrow__chip{background:var(--red);color:var(--white)}
.tierrow.is-current .tierrow__state{color:var(--red);font-weight:700}

/* — Unidades reservadas — */
.drawer__reserved{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  margin-bottom:var(--s5);
}
.drawer__reserved-txt{
  position:relative;padding-left:14px;
  font-size:1.05rem;font-weight:700;
}
.drawer__reserved-txt::before{
  content:'';position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--red);
}
.chip-dark{
  padding:5px 11px;
  border-radius:var(--r-xs);
  background:var(--ink);color:var(--white);
  font-size:11px;font-weight:800;
  white-space:nowrap;
}

/* — Precio — */
.drawer__pricing{
  display:grid;
  /* El precio ocupa lo que necesita y el aviso se queda con el resto.
     Apilarlos disparaba el alto del pie en móvil. */
  grid-template-columns:auto 1fr;
  gap:var(--s4);
  align-items:center;
  margin-bottom:var(--s4);
}
.drawer__price-now{font-size:2.05rem;font-weight:800;letter-spacing:-.035em;line-height:1}
.drawer__price-was{
  font-size:var(--fs-body);font-weight:500;color:var(--red);
  text-decoration:line-through;margin-left:8px;
}
/* Misma píldora oscura que llevaba el "ahorro" junto a las unidades
   reservadas, que ya no está. El aspecto lo pone .chip-dark; aquí solo
   lo que necesita por ser un párrafo. */
/* Bloque para que caiga debajo del precio, pero con el ancho justo del
   texto: `inline-block` lo dejaba en la misma línea que el 249€. */
.drawer__price-save{display:block;width:max-content;margin-top:8px}
.drawer__hint{
  padding:11px 13px;
  border-radius:var(--r-md);
  background:var(--surface);
}
.drawer__hint b{display:block;font-size:var(--fs-sm);line-height:1.25;margin-bottom:3px}
/* En bloque, si no la altura de línea del span heredaba la del contenedor
   y el aviso quedaba con demasiado aire para un pie fijo. */
.drawer__hint span{display:block;font-size:11.5px;line-height:1.35;color:var(--ink-60)}

.drawer__fine{
  margin-top:var(--s4);
  text-align:center;
  font-size:10.5px;line-height:1.5;
  color:var(--ink-40);
}