/* TDP Tracking — formulario público de seguimiento */

.tdp-tracking {
	max-width: 640px;
	margin: 0 auto;
}

.tdp-tracking__title {
	margin-bottom: 1rem;
}

.tdp-tracking__tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 1.25rem;
	border-bottom: 2px solid #e5e5e5;
}

.tdp-tracking__tab {
	appearance: none;
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	padding: 10px 14px;
	font-size: 1rem;
	font-weight: 600;
	color: #666;
	cursor: pointer;
}

.tdp-tracking__tab.is-active {
	color: #111;
	border-bottom-color: currentColor;
}

.tdp-tracking__hint {
	color: #666;
	font-size: 0.925rem;
	margin-bottom: 1rem;
}

.tdp-tracking__fields {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 1rem;
}

.tdp-tracking__field {
	flex: 1 1 220px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 0.875rem;
	font-weight: 600;
}

.tdp-tracking__field--wide {
	flex-basis: 100%;
}

.tdp-tracking__field input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 1rem;
	font-weight: 400;
}

.tdp-tracking__field input:focus {
	outline: 2px solid #111;
	outline-offset: 1px;
}

.tdp-tracking__submit {
	display: inline-block;
	padding: 12px 24px;
	border: none;
	border-radius: 6px;
	background: #111;
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

.tdp-tracking__submit:hover {
	opacity: 0.85;
}

.tdp-tracking__submit:disabled {
	opacity: 0.6;
	cursor: wait;
}

.tdp-tracking__results {
	margin-top: 1.5rem;
	transition: opacity 0.2s ease;
}

.tdp-tracking__results.is-loading {
	opacity: 0.4;
}

.tdp-tracking__order-title {
	margin: 0 0 0.25rem;
}

.tdp-tracking__order-meta {
	color: #666;
	font-size: 0.925rem;
	margin: 0 0 1rem;
}

/* ── Guías del pedido ─────────────────────────────────────────────────── */

@keyframes tdp-card-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

.tdp-tracking__carrier {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	background: #f0f0f0;
	color: #333;
}

.tdp-tracking__carrier--mrw {
	background: #e8f0fe;
	color: #1a4fa0;
}

.tdp-tracking__carrier--ctt {
	background: #fdeaea;
	color: #b0272c;
}

.tdp-tracking__number {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1rem;
	word-break: break-all;
}

.tdp-tracking__desc {
	color: #666;
	font-size: 0.9rem;
	margin: 0 0 4px;
}

.tdp-tracking__route {
	margin: 4px 0 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: #444;
	letter-spacing: 0.01em;
}

@keyframes tdp-event-in {
	from { opacity: 0; transform: translateX(-8px); }
	to   { opacity: 1; transform: none; }
}

.tdp-tracking__notice {
	background: #f7f7f7;
	border-radius: 8px;
	padding: 14px 16px;
	color: #444;
}

.tdp-tracking__error {
	background: #fdeaea;
	border-radius: 8px;
	padding: 14px 16px;
	color: #b0272c;
}

/* ── Plantilla pantalla completa ──────────────────────────────────────── */

.tdp-tracking-fs {
	max-width: 100%;
	min-height: 70vh;
	padding: 0 20px 80px;
}

.tdp-tracking-fs__hero {
	text-align: center;
	padding: 56px 16px 8px;
	animation: tdp-card-in 0.5s ease both;
}

.tdp-tracking-fs__title {
	margin: 0 0 10px;
	font-size: clamp(2rem, 5vw, 3.25rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.tdp-tracking-fs__subtitle {
	margin: 0 auto;
	max-width: 560px;
	color: #666;
	font-size: 1.05rem;
	line-height: 1.5;
}

.tdp-tracking-fs__content {
	margin-top: 28px;
}

.tdp-tracking-fs .tdp-tracking {
	max-width: 720px;
}

/* El título propio del formulario sobra: ya está el grande del hero. */
.tdp-tracking-fs .tdp-tracking__title {
	display: none;
}

.tdp-tracking-fs .tdp-tracking__tabs {
	justify-content: center;
}

/* ── FAQ ──────────────────────────────────────────────────────────────── */

.tdp-tracking-faq {
	max-width: 720px;
	margin: 72px auto 0;
}

.tdp-tracking-faq__title {
	text-align: center;
	font-size: 1.6rem;
	margin: 0 0 22px;
}

.tdp-tracking-faq__item {
	border: 1px solid #e5e5e5;
	border-radius: 10px;
	margin-bottom: 10px;
	background: #fff;
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.tdp-tracking-faq__item[open] {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.tdp-tracking-faq__item summary {
	list-style: none;
	cursor: pointer;
	padding: 16px 44px 16px 18px;
	font-weight: 600;
	font-size: 1rem;
	position: relative;
	user-select: none;
}

.tdp-tracking-faq__item summary::-webkit-details-marker {
	display: none;
}

.tdp-tracking-faq__item summary::after {
	content: '+';
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.4rem;
	font-weight: 400;
	color: #999;
	transition: transform 0.25s ease;
}

.tdp-tracking-faq__item[open] summary::after {
	transform: translateY(-50%) rotate(45deg);
	color: #16a34a;
}

.tdp-tracking-faq__item p {
	margin: 0;
	padding: 0 18px 18px;
	color: #555;
	line-height: 1.6;
	animation: tdp-event-in 0.3s ease both;
}

/* ── Por qué está tardando (va dentro del nodo actual) ─────────────────── */

/* El punto que late. Es lo que dice «esto está vivo, no es una foto vieja».
   Un parpadeo duro (opacidad 0/1) marea al leerlo y lo desaconseja WCAG;
   el latido cuenta lo mismo y se puede mirar. */
@keyframes tdp-phase-pulse {
	0% {
		transform: scale(1);
		opacity: 0.7;
	}
	100% {
		transform: scale(3.2);
		opacity: 0;
	}
}

.tdp-tracking__phase-calm {
	margin-top: 16px;
	padding: 14px 16px;
	border-radius: 9px;
	background: #fbfaf5;
	border: 1px solid #f0e9d2;
}

.tdp-tracking__phase-calm-title {
	margin: 0 0 6px;
	font-size: 0.875rem;
	font-weight: 700;
	color: #8a6d1f;
}

.tdp-tracking__phase-calm-text {
	margin: 0;
	color: #4a4a4a;
	font-size: 0.925rem;
	line-height: 1.6;
}

/* ───────────────────────────────────────────────────────────────────────────
   Las guías del pedido: qué paquetes hay y por dónde van.
   Va aparte del recorrido porque responde a otra pregunta ("¿en cuántas cajas
   viene?") y porque con dos etiquetas hay que poder mirar el número sin
   bucear por la línea de tiempo.
   ─────────────────────────────────────────────────────────────────────────── */

.tdp-tracking__guias {
	margin-bottom: 1.75rem;
}

.tdp-tracking__guias-title {
	margin: 0 0 12px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #888;
}

.tdp-tracking__guias-hint {
	margin: -6px 0 12px;
	font-size: 0.875rem;
	color: #777;
}

.tdp-tracking__guia {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	margin-bottom: 8px;
	border: 1px solid #e5e5e5;
	border-left: 4px solid #cfcfcf;
	border-radius: 10px;
	background: #fff;
	animation: tdp-card-in 0.4s ease both;
}

/* El mismo azul y el mismo naranja que marcan sus pasos en el recorrido: el
   color es lo único que dice de quién es cada cosa, así que tiene que ser el
   mismo en los dos sitios. */
.tdp-tracking__guia--mrw { border-left-color: #2563eb; }
.tdp-tracking__guia--ctt { border-left-color: #f47216; }

.tdp-tracking__guia .tdp-tracking__route {
	flex-basis: 100%;
	margin: 0;
}

.tdp-tracking__guia .tdp-tracking__desc {
	flex-basis: 100%;
	margin: 0;
}

/* ───────────────────────────────────────────────────────────────────────────
   El recorrido: UN solo hilo, del movimiento más reciente al más antiguo.

   Nuestros estados y los del transportista van mezclados a propósito. Para
   quien espera un paquete todo es el mismo mecanismo, y partirlo en dos
   bloques le obliga a reconstruir el orden en su cabeza. Lo que distingue de
   quién es cada paso es el COLOR del nodo, no su sitio en la página.
   ─────────────────────────────────────────────────────────────────────────── */

.tdp-tracking__journey {
	margin-bottom: 1.5rem;
}

.tdp-tracking__journey-title {
	margin: 0 0 14px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #888;
}

.tdp-tracking__trail {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0 0 0 40px;
}

/* La línea se dibuja creciendo hacia abajo: es lo que da la sensación de que
   el recorrido se va armando al consultarlo. */
.tdp-tracking__trail::before {
	content: "";
	position: absolute;
	left: 13px;
	top: 10px;
	bottom: 10px;
	width: 2px;
	background: #e5e5e5;
	transform-origin: top center;
	animation: tdp-line-grow 0.6s ease both;
	/* El árbol pone en cada tramo el número por el que empieza a animarse, para
	   que su carril crezca cuando le toca y no todos a la vez. */
	animation-delay: calc(var(--tdp-i, 0) * 90ms);
}

@keyframes tdp-line-grow {
	from { transform: scaleY(0); }
	to   { transform: scaleY(1); }
}

.tdp-tracking__trail-step {
	position: relative;
	padding: 0 0 22px;
	animation: tdp-event-in 0.45s ease both;
	animation-delay: calc(var(--tdp-i, 0) * 90ms);
}

.tdp-tracking__trail-step:last-child {
	padding-bottom: 0;
}

.tdp-tracking__trail-dot {
	position: absolute;
	left: -40px;
	top: -2px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid #d8d8d8;
	background: #fff;
	font-size: 0.8rem;
	line-height: 1;
}

/* De quién es cada paso, por color. Un halo, no un relleno: el nodo tiene que
   seguir leyéndose como parte del mismo hilo. */
.tdp-tracking__trail-step.is-mrw .tdp-tracking__trail-dot {
	border-color: #2563eb;
	box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.16);
}

.tdp-tracking__trail-step.is-ctt .tdp-tracking__trail-dot {
	border-color: #f47216;
	box-shadow: 0 0 0 4px rgba(244, 114, 22, 0.16);
}

/* El paso de arriba es donde está el pedido AHORA, y late para decir que esto
   no es una foto vieja. Un parpadeo duro de opacidad marea al leerlo y lo
   desaconseja WCAG; el latido cuenta lo mismo y se puede mirar. */
.tdp-tracking__trail-step.is-current .tdp-tracking__trail-dot {
	border-color: var(--tdp-node, #cfcfcf);
	box-shadow: 0 0 0 4px #f1f1f1;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--tdp-node, #cfcfcf) 18%, #fff);
}

/* El aro que se expande. Va en el color del nodo, no en `currentColor`: el
   texto del punto es el emoji del estado y su color no tiene nada que ver. */
.tdp-tracking__trail-step.is-current .tdp-tracking__trail-dot::after {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	border: 2px solid var(--tdp-node, #cfcfcf);
	animation: tdp-phase-pulse 1.8s ease-out infinite;
	pointer-events: none;
}

.tdp-tracking__trail-step.is-current.is-mrw .tdp-tracking__trail-dot,
.tdp-tracking__trail-step.is-current.is-mrw .tdp-tracking__trail-dot::after { border-color: #2563eb; }

.tdp-tracking__trail-step.is-current.is-ctt .tdp-tracking__trail-dot,
.tdp-tracking__trail-step.is-current.is-ctt .tdp-tracking__trail-dot::after { border-color: #f47216; }

.tdp-tracking__trail-title {
	margin: 0;
	color: #666;
	line-height: 1.35;
}

.tdp-tracking__trail-step.is-current .tdp-tracking__trail-title {
	color: #111;
	font-weight: 700;
	font-size: 1.05rem;
}

.tdp-tracking__trail-meta {
	margin: 3px 0 0;
	font-size: 0.8125rem;
	color: #999;
}

/* Lo que significa la fase, dentro del nodo de arriba: es lo que el cliente
   está mirando, y repetirlo en un panel aparte sobraba. */
.tdp-tracking__trail-what {
	margin: 10px 0 0;
	color: #333;
	line-height: 1.6;
}

.tdp-tracking__trail-step.is-alert .tdp-tracking__trail-dot {
	border-color: #d97706;
}

.tdp-tracking__trail-step.is-alert .tdp-tracking__trail-title {
	color: #b45309;
	font-weight: 600;
}

.tdp-tracking__pack {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 999px;
	background: #111;
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.03em;
}

/* ==========================================================================
   El árbol: un tronco común y una rama por envío.

   Lo del pedido (que es de todo el pedido, no de un bulto) va en el tronco y se
   cuenta UNA vez; cada guía cuelga de su rama. Las ramas son columnas de igual
   ancho SIN hueco de rejilla a propósito: así el carril de la columna i cae
   exactamente en `i/n * 100% + 13px`, que es lo que deja dibujar la horquilla
   con un calc() y sin medir nada por JavaScript. La separación entre columnas
   la pone el padding de cada una.
   ========================================================================== */

.tdp-tracking__tree {
	position: relative;
}

.tdp-tracking__fork {
	margin: 0;
}

.tdp-tracking__fork-note {
	position: relative;
	margin: 0;
	padding: 4px 0 4px 40px;
	font-size: 0.75rem;
	color: #aaa;
	font-style: italic;
}

/* El carril sigue por detrás del texto. Sin esto la línea se parte justo aquí. */
.tdp-tracking__fork-note::before {
	content: "";
	position: absolute;
	left: 13px;
	top: 0;
	bottom: -2px;
	width: 2px;
	background: #e5e5e5;
}

.tdp-tracking__fork-lines {
	position: relative;
	height: 42px;
}

.tdp-tracking__fork-line {
	position: absolute;
	left: 13px;
	top: 0;
	bottom: 0;
	min-width: 2px;
}

.tdp-tracking__fork-line svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* Se dibuja sola. `pathLength="1"` deja la cuenta exacta sin medir el trazo. */
.tdp-tracking__fork-line path {
	fill: none;
	stroke: #dcdcdc;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: tdp-root-draw 0.75s ease both;
	animation-delay: calc(var(--tdp-i, 0) * 90ms);
}

@keyframes tdp-root-draw {
	to { stroke-dashoffset: 0; }
}

/* Cada raíz lleva el color de su transportista: se ve de un vistazo hacia dónde
   va cada rama antes de leer nada. */
.tdp-tracking__fork-line.is-mrw path { stroke: rgba(37, 99, 235, 0.55); }
.tdp-tracking__fork-line.is-ctt path { stroke: rgba(244, 114, 22, 0.55); }

/* Las ramas se apartan del tronco: si la primera cayera sobre su mismo carril,
   el árbol parecería un hilo con un apéndice colgando. Los 30px son los mismos
   que la SANGRIA del JS, que es quien calcula el ancho de cada raíz. */
.tdp-tracking__branches {
	display: grid;
	grid-template-columns: repeat(var(--tdp-ramas, 2), minmax(0, 1fr));
	padding-left: 30px;
}

.tdp-tracking__branch {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding-right: 16px;
}

/* La rama corta estira su carril hasta abajo. Si no, el envío con un solo
   movimiento se queda flotando y la raíz de abajo arranca del aire. */
.tdp-tracking__branch .tdp-tracking__trail {
	flex: 1 1 auto;
}

/* Las líneas van enteras: el carril de la rama llega hasta el borde de abajo,
   donde empieza la raíz, y el del tronco arranca en su borde de arriba, donde
   la raíz termina. Los 10px de respiro que lleva el carril suelto dejaban un
   corte justo en las dos junturas. */
.tdp-tracking__branch .tdp-tracking__trail::before {
	bottom: 0;
}

.tdp-tracking__trail--trunk::before {
	top: 0;
}

.tdp-tracking__branch:last-child {
	padding-right: 0;
}

.tdp-tracking__branch-head {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0 0 12px;
	padding-left: 40px;
}

/* El puente: la raíz muere arriba de la cabecera y el carril de la rama empieza
   debajo. Sin este trocito quedaría un salto justo donde el ojo sigue la línea. */
.tdp-tracking__branch-head {
	animation: tdp-event-in 0.45s ease both;
	animation-delay: calc(var(--tdp-i, 0) * 90ms);
}

/* Una guía ENTREGADA termina ahí: encima de su punta no hay línea, porque no
   hay nada más que contar. La que sigue esperando lleva un carril que se
   desvanece hacia arriba — el viaje continúa, solo que todavía no sabemos qué
   pone. */
.tdp-tracking__branch.is-espera .tdp-tracking__branch-head::before {
	content: "";
	position: absolute;
	left: 13px;
	top: 0;
	bottom: -14px;
	width: 2px;
	background: linear-gradient(to bottom, rgba(229, 229, 229, 0), #e5e5e5);
}

.tdp-tracking__branch-head .tdp-tracking__number {
	font-size: 0.8rem;
}

/* En estrecho, dos columnas de recorrido no caben: se apilan y la horquilla se
   reduce a un trazo, que ahí ya no separa nada. Cada rama conserva su cabecera,
   que es lo que dice de quién es cada tramo. */
@media (max-width: 640px) {
	.tdp-tracking__branches {
		grid-template-columns: minmax(0, 1fr);
	}

	.tdp-tracking__branch {
		padding-right: 0;
		padding-bottom: 18px;
	}

	/* Apiladas, todas las ramas comparten carril, así que todas las raíces
	   miden lo mismo: solo la sangría. */
	.tdp-tracking__fork-line {
		width: 30px !important;
	}

	.tdp-tracking__fork-line:not(:first-child) {
		display: none;
	}
}

.tdp-tracking__waiting {
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px dashed #e5e5e5;
	font-size: 0.875rem;
	color: #888;
	line-height: 1.5;
}

/* Menos animación para quien la tiene desactivada en su sistema. */
@media (prefers-reduced-motion: reduce) {
	.tdp-tracking__trail::before,
	.tdp-tracking__trail-step,
	.tdp-tracking__guia,
	.tdp-tracking__branch,
	.tdp-tracking-fs__hero {
		animation: none;
	}
	/* La raíz se queda dibujada, sin dibujarse. */
	.tdp-tracking__fork-line path {
		animation: none;
		stroke-dashoffset: 0;
	}
	.tdp-tracking__trail-step.is-current .tdp-tracking__trail-dot::after {
		animation: none;
	}
}