/*
 * Compra · Envío · Entrega: los tres plazos con fecha calculada.
 *
 * Sustituye a la tira de confianza «Envío claro · Datos de tienda · Ofertas
 * verificables», que Toni retira el 03/09/2026: decía tres cosas genéricas y
 * ninguna respondía a la única pregunta que se hace quien está a punto de
 * comprar, que es **cuándo lo tengo**. La referencia que da es `gudslip.com`,
 * que pone tres columnas con la fecha real debajo de cada paso.
 *
 * **De dónde salen las fechas.** No son adorno ni promesa nueva: son las que ya
 * están decididas y escritas.
 *
 * - **Compra:** hoy.
 * - **Envío:** hoy si es día laborable y aún no es la hora de corte; si no, el
 *   siguiente día laborable. Sale de «preparación el mismo día» (Joan,
 *   `Operaciones/CATALOGO_MAESTRO_PRODUCTOS.md`).
 * - **Entrega:** de 1 a 2 días laborables desde el envío, que es el plazo
 *   público que Joan fijó el 13/08 y el que ya anuncia la portada.
 *
 * La hora de corte —14:00— es el único número que **todavía no ha decidido
 * nadie**; está en una constante de `assets/js/entrega-estimada.js` y cambiarla
 * es tocar una línea.
 *
 * Se estrenó solo en overgrips el 03/09 para que Toni lo viera montado; ese
 * mismo día dio el visto bueno y pasó a las 16 fichas. La tira de confianza no
 * se oculta con CSS: se ha retirado el marcado, en la preview y en el tema.
 */

/*
 * Proporciones medidas en `gudslip.com` a 390 px el 03/09, después de que Toni
 * viera la primera versión y dijera que la nuestra se veía «muy llena»:
 *
 * - tarjeta de 16 px de aire, esquinas de 12 px, fondo apenas teñido
 * - icono de 20 px **sin círculo**; el círculo relleno de la primera versión
 *   era lo que más peso metía
 * - etiqueta de 14 px en peso medio, sin versalitas ni interletraje
 * - fecha de 12 px en peso normal
 * - los pasos miden lo que mide su texto y la línea que los une se estira con
 *   lo que sobra: así el bloque usa el ancho entero sin desparramar el texto
 *
 * Su bloque mide 96 px de alto; el primero nuestro medía 205.
 */
.gp-preview-product-page .gp-delivery-steps {
  --gp-step-ink: #101114;
  --gp-step-muted: #6b6f76;
  --gp-step-line: #e7e4dc;
  --gp-step-soft: #faf9f6;
  background: var(--gp-step-soft);
  border: 1px solid var(--gp-step-line);
  border-radius: 0.75rem;
  margin: 1.75rem 0 0;
  /*
   * 0,85 rem de aire a los lados y no 1 rem: con 1 rem quedaban 334 px para las
   * tres fechas, que piden 291, y los dos trazos; con los 8 px de separación
   * que llevaba la lista no llegaba por 12 px y «3 de septiembre» se partía en
   * dos líneas. Medido, no ajustado a ojo.
   */
  padding: 0.9rem 0.85rem;
}

.gp-preview-product-page .gp-delivery-steps__list {
  align-items: flex-start;
  display: flex;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* `0 1 auto`: cada paso mide su texto, no un tercio del bloque. */
.gp-preview-product-page .gp-delivery-step {
  align-items: center;
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  text-align: center;
}

/*
 * La línea es lo elástico: se queda con el ancho que sobra. Se cuelga a
 * 0,625 rem del borde de arriba —la mitad del icono— para que caiga justo a su
 * altura sin depender de cuánto texto tenga el paso debajo.
 */
.gp-preview-product-page .gp-delivery-steps__link {
  background: var(--gp-step-line);
  flex: 1 1 auto;
  height: 1px;
  margin: 0.625rem 0 0;
  min-width: 1.25rem;
}

.gp-preview-product-page .gp-delivery-step__icon {
  color: var(--gp-step-ink);
  display: block;
  line-height: 0;
}

.gp-preview-product-page .gp-delivery-step__icon svg {
  fill: none;
  height: 1.25rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
  width: 1.25rem;
}

.gp-preview-product-page .gp-delivery-step__label {
  color: var(--gp-step-ink);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
}

.gp-preview-product-page .gp-delivery-step__date {
  color: var(--gp-step-muted);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.25;
}

.gp-preview-product-page .gp-delivery-steps__note {
  border-top: 1px solid var(--gp-step-line);
  color: var(--gp-step-muted);
  font-size: 0.72rem;
  line-height: 1.5;
  margin: 0.85rem 0 0;
  padding-top: 0.75rem;
  text-align: center;
}

.gp-preview-product-page .gp-delivery-steps__note strong {
  color: var(--gp-step-ink);
  font-weight: 700;
}

@media (max-width: 380px) {
  .gp-preview-product-page .gp-delivery-steps {
    padding: 0.85rem 0.75rem;
  }

  .gp-preview-product-page .gp-delivery-step__label {
    font-size: 0.82rem;
  }
}

/* En las fichas de lienzo oscuro el bloque se lee en claro. */
.gp-preview-product-page[data-gp-product-slug="gladiator-attack"] .gp-delivery-steps,
.gp-preview-product-page[data-gp-product-slug="pack-gladiator-attack"] .gp-delivery-steps {
  --gp-step-ink: #f5f5f7;
  --gp-step-muted: rgba(245, 245, 247, 0.68);
  --gp-step-line: rgba(245, 245, 247, 0.22);
  --gp-step-soft: rgba(245, 245, 247, 0.08);
  background: rgba(245, 245, 247, 0.04);
}