/* ===========================================================================
   ALVI · TIENDA
   Catálogo, ficha de pieza, pedido, checkout y confirmación.

   AQUÍ NO HAY NI UN COLOR ESCRITO. Todos salen de theme.css como var(--...).
   =========================================================================== */


/* ===========================================================================
   CATÁLOGO
   =========================================================================== */

.catalogo {
  display: grid;
  gap: var(--sp-10);
  margin-top: var(--sp-10);
}

@media (min-width: 60rem) {
  .catalogo {
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: var(--sp-12);
    align-items: start;
  }
}

.catalogo__resultados {
  min-width: 0;
}

.catalogo__cuenta {
  margin: 0 0 var(--sp-6);
  color: var(--text-muted);
}


/* --- Filtros --------------------------------------------------------------
   Son ENLACES con parámetros en la URL, no botones que cambian un estado en
   el navegador. Por eso se pueden compartir por WhatsApp, guardar en favoritos
   y recorrer con el botón de atrás. */

.filtros {
  min-width: 0;
}

@media (min-width: 60rem) {
  .filtros {
    position: sticky;
    top: var(--sp-8);
  }
}

.filtros__grupo {
  margin-bottom: var(--sp-8);
}

.filtros__titulo {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-h3);
  font-weight: 600;
}

.filtros__ayuda {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-meta);
  color: var(--text-muted);
  max-width: none;
}

.filtros__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.filtros__enlace {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);

  min-height: var(--touch);
  padding: var(--sp-2) var(--sp-3);

  color: var(--text-body);
  text-decoration: none;
  border-bottom: 1px solid var(--border-hairline);
}

.filtros__enlace:hover {
  color: var(--text-accent);
  background: var(--bg-alt);
}

/* El filtro puesto se marca con peso y con una barra a la izquierda, no solo
   con color: así se distingue también sin distinguir colores. */
.filtros__enlace--activo {
  font-weight: 600;
  border-left: 4px solid var(--action-bg);
  padding-left: var(--sp-2);
  background: var(--bg-tint);
}

/* Familia sin resultados: se ve, pero no se puede pulsar.
   MEDIDO: esto llevaba `opacity: 0.45` y daba 2,89:1 sobre el crema, cuando
   el mínimo del nivel AA para texto es 4,5:1. La opacidad no perdona: baja el
   contraste de todo lo que toca, y un texto al 45 % es un texto que mucha
   gente no lee.

   Y solo salía en el catálogo FILTRADO, que es el único estado donde alguna
   familia se queda a cero. Una página que nunca se había medido.

   Ahora se distingue por tres cosas que no dependen de ver bien: no está
   subrayado, no es un enlace y lleva el recuento "(0)" al lado. El color es
   el apagado de la casa, que sí cumple. */
.filtros__enlace--vacio {
  color: var(--disabled-text);
  cursor: not-allowed;
  text-decoration: none;
}

.filtros__cuenta {
  flex: none;
  font-size: var(--fs-meta);
  color: var(--text-muted);
}


/* --- Filtros puestos, con su X ------------------------------------------- */

.activos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  margin-bottom: var(--sp-6);
}

.activos__rotulo {
  font-size: var(--fs-meta);
  color: var(--text-muted);
}

.activos__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--touch);
  padding-inline: var(--sp-4);

  background: var(--bg-tint);
  color: var(--text-body);
  border: 1px solid var(--action-ghost-border);
  border-radius: var(--r-pill);
  font-weight: 600;
  text-decoration: none;
}

.activos__chip:hover {
  background: var(--bg-tint-accent);
  color: var(--text-accent);
}

.activos__limpiar {
  min-height: var(--touch);
  display: inline-flex;
  align-items: center;
  color: var(--text-brand);
}


/* --- Rejilla de piezas ---------------------------------------------------- */

.piezas {
  display: grid;
  /* 13rem y no 15: con 15 solo entraban dos columnas a 1440 y las tarjetas
     quedaban enormes, con el hueco de foto comiéndose la pantalla. Con 13
     entran tres y el catálogo se lee como un catálogo. */
  grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
  gap: var(--sp-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* EL ELEMENTO DE LA REJILLA ES EL <li>, NO LA TARJETA, y ahí estaba el fallo.

   La rejilla estira sus elementos por defecto, así que el <li> sí llegaba al
   alto de la fila. Pero la tarjeta es un <article> DENTRO del <li>, y un bloque
   normal solo mide lo que mide su contenido: se quedaba corta, y con ella el
   "margin-top: auto" del botón, que no tenía contra qué empujar.

   El resultado era el que se veía: en cada fila, la tarjeta de la derecha
   sobresalía por abajo y los botones quedaban a alturas distintas.

   Con el <li> en grid, su único hijo se estira solo. No hace falta height:100%
   en la tarjeta, que depende de que el alto del padre sea definido y es más
   frágil. */
.piezas > li {
  display: grid;
  min-width: 0;
}

.pieza {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
  padding: var(--sp-4);
  background: var(--bg-paper);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-md);
}

/* LA LÍNEA DE DISPONIBILIDAD RESERVA SU SITIO.

   Los tres estados tienen textos de largos distintos —"Disponible · entrega en
   24-48 h" contra "Bajo pedido · te confirmamos el plazo"— y a la anchura de
   una tarjeta unos parten en dos líneas y otros en tres. Sin reservar, cada
   tarjeta empieza el precio y el botón a una altura distinta.

   Dos líneas es lo que ocupa el más corto: se reserva eso y el que pida tres
   crece hacia abajo, que es donde ya no molesta porque el botón va anclado. */
.pieza .stock {
  min-height: calc(2 * var(--lh-body) * 1em);
  align-items: flex-start;
}

.pieza__enlace {
  text-decoration: none;
  color: inherit;
}

.pieza__foto {
  margin-bottom: var(--sp-3);
}

.pieza__foto .hueco__archivo {
  font-size: var(--fs-meta);
}

.pieza__familia {
  margin: 0;
  font-size: var(--fs-meta);
  color: var(--text-muted);
  max-width: none;
}

.pieza__nombre {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-tight);
}

.pieza__enlace:hover .pieza__nombre {
  color: var(--text-accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.pieza__referencia {
  margin: 0;
  font-weight: 600;
  color: var(--text-muted);
  max-width: none;
}

.pieza__maquinas {
  margin: 0;
  font-size: var(--fs-meta);
  color: var(--text-muted);
  max-width: none;
}

.pieza__accion {
  margin-top: auto;
  padding-top: var(--sp-3);
}


/* --- Paginación -----------------------------------------------------------
   Números grandes y separados. Nada de scroll infinito: con scroll infinito no
   se puede volver a "donde estaba" ni decirle a nadie "está en la página 3". */

.paginas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: center;
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border-hairline);
}

.paginas__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.paginas__numero,
.paginas__salto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch);
  min-height: var(--touch);
  padding-inline: var(--sp-3);

  color: var(--text-body);
  border: 2px solid var(--border-strong);
  border-radius: var(--r-md);
  font-weight: 600;
  text-decoration: none;
}

.paginas__numero:hover,
.paginas__salto:hover {
  border-color: var(--action-ghost-border);
  color: var(--text-brand);
}

.paginas__numero--activo {
  background: var(--action-bg);
  border-color: var(--action-bg);
  color: var(--action-text);
}

.paginas__numero--activo:hover {
  background: var(--action-bg-hover);
  border-color: var(--action-bg-hover);
  color: var(--action-text);
}


/* ===========================================================================
   FICHA DE PIEZA
   =========================================================================== */

.ficha-pieza {
  display: grid;
  gap: var(--sp-8);
}

@media (min-width: 60rem) {
  .ficha-pieza {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-12);
    align-items: start;
  }
}

.ficha-pieza__foto,
.ficha-pieza__compra {
  min-width: 0;
}

.ficha-pieza__familia {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-meta);
  color: var(--text-muted);
  text-transform: none;
}

.ficha-pieza__nombre {
  margin: 0 0 var(--sp-5);
}

/* La referencia es lo que el cliente dicta por teléfono: va grande y en cifras
   de ancho fijo. */
.ficha-pieza__ref .albaran__dato {
  font-size: var(--fs-ref);
}

.precio--grande .precio__final {
  font-size: var(--fs-h1);
}

.precio--grande {
  margin-block: var(--sp-5);
}

.anadir {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: flex-end;
  margin-top: var(--sp-6);
}

.cantidad {
  flex: none;
}

.cantidad__campo {
  width: 5.5rem;
  min-height: var(--touch);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-lead);
  text-align: center;

  background: var(--field-bg);
  color: var(--text-body);
  border: 2px solid var(--field-border);
  border-radius: var(--r-md);
}

.anadir__boton {
  flex: 1 1 12rem;
}

/* Aviso de stock bajo el selector de cantidad. Lo enseña el JavaScript cuando
   la cantidad pedida pasa de lo que hay; sin JavaScript la línea de stock que
   está justo encima ya dice cuántas unidades hay. */
/* Mismo caso que .linea__aviso: es un plazo, no un fallo. Tinta, no rojo. */
.anadir-aviso {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  margin: var(--sp-3) 0 0;
  color: var(--text-body);
  font-weight: 600;
  max-width: none;
}

.anadir-aviso[hidden] {
  display: none;
}

.anadir-aviso svg {
  flex: none;
  width: 1.3em;
  height: 1.3em;
  margin-top: 0.1em;
}

.ficha-pieza__duda {
  margin-top: var(--sp-4);
  color: var(--text-muted);
  max-width: none;
}

.ficha-pieza__texto {
  margin-top: var(--sp-8);
}

.servicio-fila__precio {
  margin: var(--sp-2) 0 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}


/* ===========================================================================
   PEDIDO
   =========================================================================== */

.pedido {
  display: grid;
  gap: var(--sp-10);
  margin-top: var(--sp-8);
}

@media (min-width: 60rem) {
  .pedido {
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: var(--sp-12);
    align-items: start;
  }
}

.pedido__lineas,
.pedido__totales {
  min-width: 0;
}

/* La columna de líneas se declara CONTENEDOR de consulta. Así cada fila se
   adapta al hueco que de verdad tiene, y no al ancho de la ventana, que es
   otra cosa: a 1024px la ventana es ancha pero el resumen del pedido se lleva
   22rem y a las líneas les quedaban 492px. */
.pedido__lineas {
  container-type: inline-size;
  container-name: lineas;
}

.pedido__vacio-accion {
  margin-top: var(--sp-6);
}

/* --- Una línea del pedido ------------------------------------------------- */

.linea {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--border-hairline);
}

.linea:last-child {
  border-bottom: 1px solid var(--border-hairline);
}

/* MEDIDO: con `grid-template-columns: 5rem minmax(0,1fr) auto auto` y el
   resumen al lado, a 1024px la columna del nombre se quedaba en 13px y
   "Aceite de cadena biodegradable, 5 litros" salía partido en SIETE renglones,
   casi una letra por línea. El minmax(0,·) dejaba que se encogiera hasta
   desaparecer mientras las dos columnas `auto` se llevaban 308px fijos.

   Se arregla con una consulta de contenedor y no con una de ventana: la fila
   pasa a cuatro columnas solo cuando tiene los 660px que necesita de verdad.
   Debajo de eso se queda apilada, que es legible aunque ocupe más.

   Los 660px salen de sumar: 90 de foto + 180 mínimos de nombre + 200 de
   cantidad + 108 de importe + 81 de separaciones. */
@container lineas (min-width: 660px) {
  .linea {
    grid-template-columns: 5rem minmax(11rem, 1fr) auto auto;
    align-items: start;
    gap: var(--sp-6);
  }
}

.linea__foto {
  aspect-ratio: 1 / 1;
  padding: var(--sp-2);
}

.linea__datos {
  min-width: 0;
}

.linea__nombre {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-tight);
}

.linea__nombre a {
  color: var(--text-body);
  text-decoration: none;
}

.linea__nombre a:hover {
  color: var(--text-accent);
  text-decoration: underline;
}

.linea__referencia,
.linea__unitario {
  margin: 0;
  font-size: var(--fs-meta);
  color: var(--text-muted);
  max-width: none;
}

/* Aviso de PLAZO en la línea del pedido. No bloquea: informa.
   Y NO va en rojo. Iba, y estaba mal: que una pieza tarde más no es un error,
   es información normal de un pedido. Un punto rojo ahí dice "algo ha salido
   mal" cuando lo que pasa es que la pieza viene del proveedor.
   El rojo de --c-error es SOLO para validación de formularios. */
.linea__aviso {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-meta);
  color: var(--text-muted);
  max-width: none;
}

.linea__aviso svg {
  flex: none;
  width: 1.2em;
  height: 1.2em;
  margin-top: 0.15em;
}

.linea__total-nota {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: 400;
  color: var(--text-muted);
}

.albaran-doc__nota {
  margin: calc(-1 * var(--sp-4)) 0 var(--sp-6);
  font-size: var(--fs-meta);
  color: var(--text-muted);
  max-width: none;
}

.linea__cantidad {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

@media (min-width: 48rem) {
  .linea__cantidad {
    grid-column: auto;
    flex-direction: column;
    align-items: flex-start;
  }
}

.linea__form {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

.linea__total {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--font-title);
  font-size: var(--fs-h3);
  font-weight: 700;
  text-align: right;
}

@media (min-width: 48rem) {
  .linea__total {
    grid-column: auto;
    min-width: 6rem;
  }
}


/* --- Totales -------------------------------------------------------------- */

.pedido__totales {
  padding: var(--sp-6);
  background: var(--bg-alt);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-md);
}

@media (min-width: 60rem) {
  .pedido__totales {
    position: sticky;
    top: var(--sp-8);
  }
}

.pedido__totales-titulo {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-h3);
  font-weight: 600;
}

.pedido__total-final {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin: var(--sp-4) 0 var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 2px solid var(--border-strong);

  font-family: var(--font-title);
  font-size: var(--fs-h3);
  font-weight: 600;
}

.pedido__total-final strong {
  font-size: var(--fs-h2);
  font-weight: 700;
}

.pedido__seguir,
.pedido__vaciar {
  margin: var(--sp-3) 0 0;
}

.pedido__duda {
  margin: var(--sp-6) 0 0;
  font-size: var(--fs-meta);
  color: var(--text-muted);
  max-width: none;
}


/* ===========================================================================
   CHECKOUT
   =========================================================================== */

.checkout {
  display: grid;
  gap: var(--sp-10);
  margin-top: var(--sp-8);
}

@media (min-width: 60rem) {
  .checkout {
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: var(--sp-12);
    align-items: start;
  }

  .checkout__resumen {
    position: sticky;
    top: var(--sp-8);
  }
}

.checkout__datos,
.checkout__resumen {
  min-width: 0;
}

.checkout__datos .campo {
  max-width: var(--w-prose);
}

.checkout__resumen {
  padding: var(--sp-6);
  background: var(--bg-alt);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-md);
}

/* --- Forma de entrega ----------------------------------------------------- */

.entrega {
  border: 0;
  margin: 0 0 var(--sp-6);
  padding: 0;
}

.entrega__opcion {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;

  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  max-width: var(--w-prose);

  background: var(--bg-paper);
  border: 2px solid var(--field-border);
  border-radius: var(--r-md);
  cursor: pointer;
}

.entrega__opcion:hover {
  border-color: var(--field-border-active);
}

.entrega__opcion input {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.1rem;
  accent-color: var(--action-bg);
}

.entrega__opcion > span {
  display: block;
}

.entrega__nota {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-meta);
  color: var(--text-muted);
}


/* --- Pago de mentira ------------------------------------------------------
   Los campos están deshabilitados y se ven deshabilitados. No se pide ni se
   guarda ni un dígito de una tarjeta, ni siquiera de mentira. */

.pago-falso {
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
  max-width: var(--w-prose);
  background: var(--bg-alt);
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-md);
}

/* El aviso de que el pago es una maqueta. Va en tinta y con peso, no en rojo:
   no es un error, es una advertencia de contexto. Lo que lo hace visible es el
   recuadro, no el color de la letra. */
.pago-falso__aviso {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  margin: 0 0 var(--sp-5);
  color: var(--text-body);
  font-weight: 600;
  max-width: none;
}

.pago-falso__aviso svg {
  flex: none;
  width: 1.4em;
  height: 1.4em;
  margin-top: 0.1em;
}

.pago-falso .campo {
  margin-bottom: var(--sp-4);
  max-width: none;
}

.pago-falso__fila {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
}


/* --- Aviso de demostración ------------------------------------------------
   Rojo ladrillo y grande. Es el único sitio donde el acento se usa en algo que
   no es un botón, y es a propósito: aquí la advertencia ES la acción. */

.aviso-demo {
  padding: var(--sp-6);
  margin-block: var(--sp-8);
  background: var(--bg-tint-accent);
  border: 3px solid var(--action-bg);
  border-radius: var(--r-md);
}

.aviso-demo p {
  max-width: none;
}

.aviso-demo p:last-child {
  margin-bottom: 0;
}

/* El titular del resguardo va en TINTA, no en rojo.
   Dos motivos: no es un error —es una advertencia de que esto es una
   demostración— y, sobre el fondo verde claro del recuadro, rojo sobre verde
   es la peor combinación de esta paleta. Lo que señala el aviso es el
   recuadro, no el color de la letra. */
.aviso-demo__titulo {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--text-body);
}


/* ===========================================================================
   CONFIRMACIÓN · el albarán
   =========================================================================== */

.albaran-doc {
  padding: var(--sp-8);
  background: var(--bg-paper);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
}

.albaran-doc__cabecera {
  display: grid;
  gap: var(--sp-6);
  padding-bottom: var(--sp-6);
  margin-bottom: var(--sp-6);
  border-bottom: 2px solid var(--border-strong);
}

@media (min-width: 40rem) {
  .albaran-doc__cabecera {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
}

.albaran-doc__marca {
  margin: 0;
  font-family: var(--font-title);
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.albaran-doc__oficio {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-meta);
  color: var(--text-muted);
  max-width: none;
}

.albaran-doc__dato {
  margin: 0;
  font-size: var(--fs-meta);
  color: var(--text-muted);
  max-width: none;
}

.albaran-doc__numero {
  min-width: 0;
}

.albaran-doc__rotulo {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-meta);
  color: var(--text-muted);
  max-width: none;
}

.albaran-doc__valor {
  margin: 0;
  font-family: var(--font-title);
  font-size: var(--fs-h3);
  font-weight: 700;
}

.albaran-doc__titulo {
  margin: 0 0 var(--sp-6);
  font-size: var(--fs-h2);
}

/* La caja que se desplaza, no la página. */
.albaran-doc__scroll {
  overflow-x: auto;
  margin-bottom: var(--sp-6);
}

.albaran-doc__tabla {
  margin-bottom: 0;
  font-size: var(--fs-meta);
  min-width: 26rem;
}

.albaran-doc__tabla th,
.albaran-doc__tabla td {
  padding: var(--sp-2) var(--sp-2);
  text-align: left;
  border-bottom: 1px solid var(--border-hairline);
  vertical-align: top;
}

.albaran-doc__tabla thead th {
  border-bottom: 2px solid var(--border-strong);
  font-weight: 600;
}

.albaran-doc__num {
  text-align: right;
}

.albaran-doc__totales {
  max-width: 26rem;
  margin-left: auto;
}

.albaran-doc__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  max-width: 26rem;
  margin: var(--sp-3) 0 var(--sp-8) auto;
  padding-top: var(--sp-3);
  border-top: 2px solid var(--border-strong);

  font-family: var(--font-title);
  font-size: var(--fs-h3);
  font-weight: 600;
}

.albaran-doc__total strong {
  font-size: var(--fs-h2);
  font-weight: 700;
}

.albaran-doc__pie {
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border-hairline);
}

.albaran-doc__sello {
  margin: var(--sp-6) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--border-strong);
  font-size: var(--fs-meta);
  color: var(--text-muted);
  text-align: center;
  max-width: none;
}

.confirmado__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

/* La nota de plazo del checkout. Va junto a la forma de entrega porque es
   justo ahí donde el cliente se hace una idea de cuándo tendrá la pieza, y
   ALVI no puede prometer una fecha que depende del proveedor. */
.entrega__plazo {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  background: var(--aviso-bg);
  color: var(--aviso-text);
  border-left: 4px solid var(--aviso-linea);
  font-size: var(--fs-meta);
  line-height: var(--lh-body);
}

.entrega__plazo svg {
  flex: 0 0 auto;
  margin-top: 0.15em;
}