/* =========================================================================
 * CERVO — EL RANGO EN EL CARRITO (CAPA 22)
 *
 * NO se parece a la ventana de rangos, y es a propósito. Aquella es una
 * superficie oscura que se abre encima de todo: un momento. Esta vive DENTRO
 * del carrito, entre el resumen y el botón de pagar, y ahí una tarjeta negra
 * gritaría más que el propio botón. Aquí el trabajo es susurrar justo antes
 * de decidir, no interrumpir.
 *
 * Por eso: fondo hueso, una regla de oro a la izquierda —el mismo recurso de
 * los avisos del área de cliente— y nada más. El único color saturado de la
 * pieza es la barra de progreso.
 * ========================================================================= */

.cvrg {
	--cvrg-ink:  #141210;
	--cvrg-mut:  #6d6a66;
	--cvrg-gold: #c8a96e;
	--cvrg-goldd:#8a6d3b;

	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 0 0 14px;
	padding: 13px 14px;
	background: #fdfcfa;
	border: 1px solid #ece7de;
	border-left: 2px solid var(--cvrg-goldd);
	border-radius: 0 4px 4px 0;
	box-sizing: border-box;
	font-family: var(--cv-sans, 'Jost', 'Segoe UI', Helvetica, Arial, sans-serif);
	line-height: 1.45;
}
.cvrg * { box-sizing: border-box; }

/* La cornamenta en pequeño, como sello. Es la marca del programa: quien ya
   vio la ventana de rangos la reconoce sin leer. */
.cvrg__ico {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	margin-top: 0;
	background: var(--cvrg-ink);
	-webkit-mask: url("../img/cervo-logo.svg") center / contain no-repeat;
	        mask: url("../img/cervo-logo.svg") center / contain no-repeat;
}

.cvrg__txt { flex: 1; min-width: 0; }

.cvrg__txt b {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--cvrg-ink);
	letter-spacing: .005em;
}
.cvrg__txt span {
	display: block;
	font-size: 11.5px;
	color: var(--cvrg-mut);
	margin-top: 2px;
}

/* ── La barra ── */
.cvrg__barra {
	display: block;
	height: 4px;
	margin-top: 9px;
	border-radius: 2px;
	background: rgba(20, 18, 16, .08);
	overflow: hidden;
}
.cvrg__barra i {
	display: block;
	height: 100%;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--cvrg-goldd), var(--cvrg-gold));
	transition: width .4s cubic-bezier(.16, 1, .3, 1);
}

/* ── Ya llega con este pedido ──
   El único momento en que la pieza levanta la voz, porque es el único en que
   tiene algo que celebrar. Verde y no oro: el oro aquí significa "te falta",
   y usar el mismo color para "lo lograste" borraría la diferencia. */
.cvrg.is-llega {
	background: #f3faf6;
	border-color: #d6ece0;
	border-left-color: #1D9E75;
}
.cvrg.is-llega .cvrg__ico { background: #1D9E75; }
.cvrg.is-llega .cvrg__barra i { background: #1D9E75; }

/* ── Rango máximo ── */
.cvrg--tope { background: #fdfaf3; }

/* ── Tiene descuento pero no se le aplica (todo en oferta) ──
   Ni celebración ni alarma: es una explicación. Gris, sin oro, sin verde. */
.cvrg--nota { background: #f7f6f4; border-left-color: #b9b2a8; }
.cvrg--nota .cvrg__ico { background: #8a8279; }

/* ── Invitado ──
   ⚠️ EL BOTÓN VA SIEMPRE ABAJO, en su propia línea.
   Primero lo puse al lado del texto y solo lo bajaba por debajo de 420px de
   PANTALLA. Error: lo que manda aquí no es la pantalla sino el CONTENEDOR, y
   la columna del resumen del carrito mide ~260px también en escritorio. El
   texto salía a dos palabras por renglón en un monitor de 27 pulgadas.
   Apilado siempre funciona a cualquier ancho y no hay que adivinar. */
.cvrg--invitado { flex-wrap: wrap; }

.cvrg__cta {
	flex: 1 0 100%;
	margin-top: 11px;
	display: block;
	text-align: center;
	padding: 11px 15px;
	background: var(--cvrg-ink);
	border: 1px solid var(--cvrg-ink);
	border-radius: 3px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}
/* :visited y :hover declarados: orchid-store trae `a:visited{color:inherit}`
   y `a:hover{text-decoration:underline}` con peso (0,1,1), y a una clase
   suelta le ganan. Sin esto el botón salía con el texto oscuro sobre fondo
   oscuro en cuanto alguien ya había visitado /mi-cuenta/. */
.cvrg__cta,
.cvrg__cta:visited,
.cvrg__cta:hover,
.cvrg__cta:focus,
.cvrg__cta:active { color: #faf9f7; text-decoration: none; }
.cvrg__cta:hover { background: var(--cvrg-goldd); border-color: var(--cvrg-goldd); }
.cvrg__cta:focus-visible { outline: 2px solid var(--cvrg-ink); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.cvrg__barra i { transition: none; }
}

/* ── El reloj en el carrito ──
   Dos estados que no existían: el rango a punto de caducar y el ya perdido.
   Comparten forma con el resto del aviso —misma caja, mismo sello— y solo
   cambian de color, porque son el mismo objeto diciendo algo distinto. */

/* Quedan 15 días o menos: oro fuerte, no rojo. Todavía no ha perdido nada. */
.cvrg--urge { background: #fdf8ee; border-color: #e8d9b8; border-left-color: var(--cvrg-gold); }
.cvrg--urge .cvrg__ico { background: var(--cvrg-goldd); }

/* Ya lo perdió: aquí sí, rojo apagado. Es una pérdida, no una advertencia. */
.cvrg--rescate { background: #fdf5f4; border-color: #f0dcd8; border-left-color: #c0392b; }
.cvrg--rescate .cvrg__ico { background: #c0392b; }
.cvrg--rescate .cvrg__txt b { color: #a5342a; }