/**
 * Los tres avisos de la compra en una caja — excellent-core/includes/avisos-compra.php
 *
 * Solo tokens del tema (`themes/excellent-child/assets/css/tokens.css`): ni un
 * color, ni un tamaño, ni un hueco suelto.
 *
 * Sustituye a la parte de carrito de `diferidos.css` y a `envio-gratis.css`, que
 * pintaban cada aviso como una fila dentro de la tabla del resumen.
 */

/* ── La lista ─────────────────────────────────────────────────────────────── */

/**
 * 🔑 **LA ALINEACIÓN VA EN NUESTRA CLASE, NO EN LA CELDA QUE LA CONTIENE.** Ya
 * costó una corrección en `diferidos.css` y otra en `envio-gratis.css`: el
 * resumen alinea a la derecha desde dos reglas distintas de `checkout.css` —una
 * para el `<tbody>` del carrito y otra para el `<tfoot>` del checkout— y
 * ganarles pedía un selector por pantalla.
 *
 * Ahora la caja vive FUERA de la tabla y en teoría no le llega nada de aquello.
 * La declaración se queda igualmente, porque cuesta una línea y es la única
 * forma de que el aviso no dependa de en qué contenedor acabe mañana.
 */
.avisos-compra {
	text-align: left;
}

.avisos-compra.is-vacio {
	display: none;
}

.avisos-compra__lista {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Cada aviso: su frase y, debajo, la barra de lo que lleva recorrido. */
.avisos-compra__item {
	display: grid;
	gap: var(--space-05);
}

.avisos-compra__texto {
	margin: 0;
	font-size: var(--fs-xs);
	line-height: 1.4;
	color: var(--c-body);
}

.avisos-compra__texto strong {
	color: var(--c-ink);
	font-weight: 600;
}

.avisos-compra__barra {
	height: var(--space-05);
	background: var(--c-line);
	overflow: hidden;
}

.avisos-compra__relleno {
	display: block;
	height: 100%;
	background: var(--c-ink);
}

/* Conseguido: la frase y la barra pasan al verde de «completado» del sitio. */
.avisos-compra__item.is-listo .avisos-compra__texto { color: var(--c-ok); }
.avisos-compra__item.is-listo .avisos-compra__relleno { background: var(--c-ok); }

/* ── El cuadro del carrito y del checkout ─────────────────────────────────── */

/**
 * ⚠️ **MISMO GRIS Y MISMO RELLENO QUE EL RESUMEN, SEPARADOS POR UN HUECO.**
 * Se probó primero en blanco con filete, y es exactamente la trampa que ya está
 * documentada en `checkout.css` para el panel del resumen: blanco con filete da
 * el mismo fondo y el mismo borde que un campo del formulario, y el cuadro se
 * lee como una casilla por rellenar.
 *
 * Dos paneles grises con lienzo blanco entre medias se leen como DOS cajas, que
 * es lo que pidió el cliente: fuera del resumen, en un cuadro aparte, dentro de
 * la misma columna.
 */
.avisos-compra--resumen {
	margin-top: var(--space-2);
	padding: var(--co-card-pad);
	background: var(--cosum-bg, var(--c-soft));
}

/**
 * ⚠️ **EL RESUMEN DEJA DE SER `sticky` AHORA QUE TIENE ALGO DEBAJO, Y NO ES UN
 * CAMBIO DE COMPORTAMIENTO: ES CONSERVARLO.**
 *
 * `.cosum` se declara `position: sticky` en `checkout.css`, pero ese sticky
 * nunca llegaba a engancharse: su columna —`.exc-co__aside` en el checkout,
 * `.cart_totals` en el carrito— medía exactamente lo que el panel, y un sticky
 * cuyo contenedor es de su mismo alto no tiene por dónde moverse. Medido en
 * producción el 21-sep: `.exc-co__grid` va en `align-items: start`.
 *
 * Al añadir esta caja la columna pasa a ser MÁS ALTA que el panel, así que el
 * sticky despertaría solo y el panel se quedaría clavado arriba mientras la caja
 * sube por debajo hasta montársele encima. Se apaga aquí, junto a la caja que lo
 * provoca, para que borrar este archivo lo devuelva todo a como estaba.
 */
.cart_totals .cosum,
.exc-co__aside .cosum {
	position: static;
}

/* ── El cajón lateral ─────────────────────────────────────────────────────── */

/**
 * Sin caja propia: ahí no hay dos columnas de las que salirse y el pie del cajón
 * ya es un bloque aparte. Una caja dentro de la caja no separaría nada.
 */
.avisos-compra--cajon {
	margin-bottom: var(--space-2);
}

/* ── El icono de cada aviso (21-sep) ──────────────────────────────────────────
 * Un camión para el envío y una tarjeta para el diferido. Con tres líneas
 * seguidas del mismo gris, la del envío se perdía entre las otras dos; el
 * dibujo las separa antes de leer una palabra.
 *
 * Va DENTRO del párrafo y alineado a la primera línea, no en una columna
 * propia: si la frase salta a dos renglones —pasa en el móvil— una columna
 * dejaría el icono flotando a media altura. `1.15em` lo ata al tamaño del
 * texto, así que crece y encoge con él sin número suelto. */
.avisos-compra__texto {
	display: flex;
	align-items: flex-start;
	gap: var(--space-1);
}

.avisos-compra__icono {
	flex: none;
	width: 1.15em;
	height: 1.15em;
	/* Baja el dibujo hasta la línea de las mayúsculas: centrado con el texto
	   entero se ve subido, porque la mayúscula no llena todo el renglón. */
	margin-top: 0.1em;
	fill: none;
	stroke: currentColor;
}

/* ── Debajo del método de entrega (28-sep, opción C de la vitrina) ────────────
 * Sin caja propia: va pegado a la fila de «Envío a domicilio», que ya lleva su
 * filete debajo. Sin icono, porque el camión está en esa misma fila un palmo
 * más arriba. La meta a la derecha —«Gratis desde $100,00»— y la barra más
 * gruesa: aquí es la única barra y se lee de un vistazo. */
.avisos-compra--entrega {
	margin-top: var(--space-2);
}

.avisos-compra--entrega .avisos-compra__icono { display: none; }

.avisos-compra--entrega .avisos-compra__texto {
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2);
}

.avisos-compra--entrega .avisos-compra__meta {
	flex: none;
	color: var(--c-muted);
	white-space: nowrap;
}

.avisos-compra--entrega .avisos-compra__barra { height: var(--space-1); }

/* Con las puntas redondas (28-sep, Sebas eligió «extremos redondeados»).
   ⚠️ Es la ÚNICA esquina redonda del sitio, que va recto (`--radius: 0`): la
   pidió él para esta barra y no es un permiso para las demás. El radio es el
   alto de la barra, así sale en píldora sin número suelto; el fondo recorta al
   relleno (`overflow: hidden`) y el relleno redondea su punta de avance. */
.avisos-compra--entrega .avisos-compra__barra,
.avisos-compra--entrega .avisos-compra__relleno {
	border-radius: var(--space-1);
}

/* Y animada, «como que esté cargando» (28-sep, Sebas): al aparecer se llena
   desde cero hasta lo que lleva, y luego la recorre el brillo de los esqueletos
   de las tarjetas (`esqueleto-brillo`, con su color y su velocidad de
   `tokens.css`), para que las dos cosas que «cargan» en el sitio se muevan igual.

   ⚠️ Vuelve a llenarse en cada recálculo del checkout: la caja llega nueva por
   fragmentos, así que para el navegador es una barra recién puesta.

   Conseguido el envío gratis, la regla `.is-listo` de arriba pinta el relleno
   en verde con `background` abreviado, que borra el degradado: se llena y se
   queda quieta, porque ya no hay nada que cargar. */
.avisos-compra--entrega .avisos-compra__relleno {
	transform-origin: left center;
	background-image: linear-gradient(90deg, transparent 0%, var(--esqueleto-brillo) 50%, transparent 100%);
	background-size: 220% 100%;
	background-repeat: no-repeat;
	animation:
		avisos-compra-llena .9s var(--ease) both,
		esqueleto-brillo var(--esqueleto-vel) ease-in-out .9s infinite;
}

@keyframes avisos-compra-llena {
	from { transform: scaleX(0); }
}

/* El gesto se va, el dato se queda: la barra sale ya llena hasta donde toca. */
@media (prefers-reduced-motion: reduce) {
	.avisos-compra--entrega .avisos-compra__relleno {
		animation: none;
		background-image: none;
	}
}

@media (max-width: 480px) {
	.avisos-compra--entrega .avisos-compra__texto {
		flex-direction: column;
		gap: var(--space-05);
	}
}