/**
 * Estilos de la página pública de seguimiento ([acshp_tracking]) y del mismo
 * bloque en Mi cuenta › Ver pedido.
 *
 * CAPA DE DOMINIO sobre el Australcode Frontend Kit (`assets/acfk/`). Acá vive
 * SOLO lo específico del seguimiento: los pasos, la promesa, el repartidor, la
 * línea de tiempo y el badge de estado. Card, campo, botón, mensaje, miniaturas,
 * texto para lectores de pantalla y el aro de foco los da el kit.
 * Canon: references/frontend.md de la skill plugin-wp (australcode-kit).
 *
 * Los neutros salen del kit (derivados de `currentColor`): la página hereda el
 * contraste del theme de la tienda, claro u oscuro, en vez de imponer el suyo.
 *
 * Para control total del markup, copia templates/tracking/*.php al theme.
 */

/* ── Puente de tokens ────────────────────────────────────────────────────────
   El contrato público del plugin (`--acshp-track-*`) sigue vigente y alimenta
   los tokens del kit. */
.acfk.acshp-track {
	--acfk-accent: var( --acshp-track-accent, var( --acfk-_accent-resolved ) );
	--acfk-radius: var( --acshp-track-radius, 10px );
	--acshp-track-warning: #b45309;

	max-width: 720px;
	margin: 0 auto;
}

.acshp-track__title {
	margin: 0;
	font-size: 1.4em;
	line-height: 1.25;
	text-wrap: balance;
}

.acshp-track__intro,
.acshp-track__empty {
	margin: 0 0 16px;
}

/* ── Cabecera del pedido ─────────────────────────────────────────────────── */
.acshp-track__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
}

.acshp-track__order {
	white-space: nowrap;
}

.acshp-track__refresh-form {
	margin: 0;
}

/* El aviso de «Actualizar»: vacío no ocupa lugar. */
.acshp-track__status {
	min-height: 0;
	margin: 6px 0 12px;
}

.acshp-track__status:empty {
	margin: 0 0 12px;
}

.acshp-track__results[aria-busy="true"] {
	opacity: 0.6;
	transition: opacity 0.2s ease-out;
}

/* ── Envío ───────────────────────────────────────────────────────────────── */
.acshp-track__shipment {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0 0 16px;
}

.acshp-track__shipment > * {
	margin-top: 0;
	margin-bottom: 0;
}

.acshp-track__shipment-top {
	justify-content: space-between;
}

.acshp-track__courier {
	margin: 0;
	font-size: 1em;
	font-weight: 600;
}

/* El estado: el color es un dato del catálogo de estados, no una decisión de
   marca. Va como tinte y un punto, con el texto en el color del theme: con texto
   blanco sobre el color, el gris de «Creado» y el ámbar de «Incidencia» no
   llegaban a 4,5:1. */
.acshp-track__badge {
	--acshp-status: currentColor;
	border-color: color-mix( in srgb, var( --acshp-status ) 45%, transparent );
	background: color-mix( in srgb, var( --acshp-status ) 14%, transparent );
	font-weight: 600;
}

.acshp-track__badge::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var( --acshp-status );
}

/* La promesa: lo primero que el cliente vino a ver. */
.acshp-track__promise {
	margin: 8px 0 0;
	font-size: 1.35em;
	font-weight: 700;
	line-height: 1.25;
	text-wrap: balance;
}

.acshp-track__where {
	margin: 4px 0 0;
}

/* ── Pasos ───────────────────────────────────────────────────────────────────
   La misma idea que los pasos de los correos: una barra por paso, llena hasta
   el actual. */
.acshp-track__steps {
	display: grid;
	grid-auto-columns: minmax( 0, 1fr );
	grid-auto-flow: column;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.acshp-track__step {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.acshp-track__step-bar {
	height: 4px;
	border-radius: 2px;
	background: var( --acfk-hairline, rgba( 0, 0, 0, 0.12 ) );
}

.acshp-track__step.is-done .acshp-track__step-bar,
.acshp-track__step.is-current .acshp-track__step-bar {
	background: var( --acfk-accent );
}

.acshp-track__step-label {
	font-size: 0.875em;
	line-height: 1.3;
	color: var( --acfk-muted, inherit );
	hyphens: auto;
}

.acshp-track__step.is-done .acshp-track__step-label {
	color: inherit;
}

.acshp-track__step.is-current .acshp-track__step-label {
	color: inherit;
	font-weight: 700;
}

.acshp-track__alert {
	margin: 0;
}

/* Incidencia: el kit trae éxito y error; el aviso ámbar va con el mismo dibujo. */
.acshp-track__msg--warning {
	border-left-color: var( --acshp-track-warning );
	background: color-mix( in srgb, var( --acshp-track-warning ) 9%, transparent );
}

/* ── Bloques (repartidor, entrega, recorrido, evidencia) ─────────────────── */
.acshp-track__block-title {
	margin: 0 0 10px;
	font-size: 0.95em;
	font-weight: 600;
}

.acshp-track__live {
	padding: 14px;
	border-radius: var( --acfk-radius-sm, 6px );
	background: var( --acfk-wash-2, rgba( 0, 0, 0, 0.05 ) );
}

.acshp-track__imminent {
	margin: 0 0 12px;
	font-weight: 600;
}

.acshp-track__driver {
	display: flex;
	align-items: center;
	gap: 12px;
}

.acshp-track__driver-photo {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	background: var( --acfk-hairline, rgba( 0, 0, 0, 0.12 ) );
}

.acshp-track__driver-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.acshp-track__driver-name {
	font-weight: 700;
}

.acshp-track__plate {
	display: inline-block;
	margin-left: 6px;
	padding: 0 6px;
	border: 1px solid var( --acfk-field-line, rgba( 0, 0, 0, 0.28 ) );
	border-radius: 4px;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	color: inherit;
}

.acshp-track__eta {
	margin: 12px 0 0;
	font-weight: 600;
}

.acshp-track__actions {
	margin-top: 12px;
}

.acshp-track__actions + .acfk-card__meta {
	margin: 8px 0 0;
}

/* Datos sueltos: término arriba, valor abajo; en fila cuando caben. */
.acshp-track__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin: 0;
}

.acshp-track__facts dt {
	color: var( --acfk-muted, inherit );
	font-size: 0.85em;
}

.acshp-track__facts dd {
	margin: 0;
	font-weight: 600;
}

.acshp-track__number {
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.acshp-track__delivery .acshp-track__facts {
	margin-bottom: 10px;
}

.acshp-track__external {
	margin: 0;
}

.acshp-track__link {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.acshp-track__link:hover {
	text-decoration-thickness: 2px;
}

/* ── Recorrido ───────────────────────────────────────────────────────────── */
.acshp-track__timeline {
	list-style: none;
	margin: 0;
	padding: 0;
}

.acshp-track__event {
	position: relative;
	display: flex;
	gap: 12px;
	padding: 0 0 16px 4px;
}

.acshp-track__event:last-child {
	padding-bottom: 0;
}

.acshp-track__event:not( :last-child )::before {
	content: "";
	position: absolute;
	top: 16px;
	bottom: 0;
	left: 9px;
	width: 2px;
	background: var( --acfk-hairline, rgba( 0, 0, 0, 0.12 ) );
}

.acshp-track__dot {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	margin-top: 5px;
	border-radius: 50%;
	z-index: var( --acfk-z-base, 1 );
}

.acshp-track__event:not( .is-current ) .acshp-track__dot {
	opacity: 0.55;
}

.acshp-track__event-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.acshp-track__event.is-current .acshp-track__event-status {
	font-weight: 700;
}

.acshp-track__event-desc {
	overflow-wrap: anywhere;
}

.acshp-track__event-meta {
	font-variant-numeric: tabular-nums;
}

.acshp-track__more {
	margin-top: 14px;
}

.acshp-track__more > summary {
	cursor: pointer;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.acshp-track__more > .acshp-track__timeline {
	margin-top: 14px;
}

/* ── Evidencia de entrega ────────────────────────────────────────────────── */
.acshp-track__pod-grid :where( img ) {
	width: 96px;
	height: 96px;
}

@media ( max-width: 600px ) {
	.acshp-track__promise {
		font-size: 1.2em;
	}

	/* Cuatro pasos en 343px: la etiqueta baja un punto para que «En preparación» quepa entera. */
	.acshp-track__step-label {
		font-size: 0.78em;
	}

	.acshp-track__pod-grid :where( img ) {
		width: 72px;
		height: 72px;
	}

	.acshp-track__event {
		gap: 10px;
		padding-bottom: 14px;
	}

	.acshp-track__actions .acfk-btn {
		flex: 1 1 auto;
		justify-content: center;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.acshp-track__results[aria-busy="true"] {
		transition: none;
	}
}