/*
 * "Seguí tu pedido" (sub-etapa 11b, auditoría de paridad 14.07).
 *
 * Antes este archivo usaba grises y negros escritos a mano a propósito: el
 * calco del diseño del prototipo era trabajo de la etapa 14, no de la 11b.
 * Esa etapa ya llegó (auditoría de paridad, 14.07): los mismos valores se
 * enganchan ahora a los tokens de marca reales del tema (`--wp--preset--*`,
 * `theme.json`/`TOKENS.md`), mismo criterio que ya usa
 * `ace-order-workflow/assets/css/order-confirmed.css` para "Pedido
 * confirmado" (14.06). Ningún nombre de clase ni layout cambia acá.
 */
/*
 * Etapa 14.14g (rediseño total, 04/09/2026): el cascaron visual (icono +
 * nombre, titulo, ilustracion, grilla de dos columnas) ya NO vive aca -vive
 * en `assets/css/auth-shell.css` (del tema, encolada por
 * `Tracking_Page::enqueue_assets()` ANTES que este archivo), compartida con
 * Mi cuenta y el ingreso de WordPress. `templates/tracking.php` ya usa las
 * clases compartidas (`auth-shell`, `auth-head`, `auth-brand`, `auth-title`,
 * `auth-illustration`, `auth-panel`) en vez de las propias de esta pantalla
 * -asi las tres quedan alineadas de verdad, no parecidas.
 *
 * Lo unico que sigue aca es lo que es EXCLUSIVO de Seguimiento: que el
 * resultado de una busqueda (linea de tiempo, items del pedido) puede ser
 * largo y variable -a diferencia de Mi cuenta, que siempre es un formulario
 * chico-, asi que solo cuando ese resultado esta a la vista la ilustracion
 * pasa a `position:sticky` y la columna deja de centrarse.
 *
 * `.myaccount-guest-body` la agrega `Tracking_Page::add_tracking_body_class()`
 * -mismo nombre de clase que usa "Mi cuenta" sin sesion (tema,
 * `assets/css/account.css`), pero esa hoja de estilos no se carga aca
 * -esta pantalla es del plugin, no pasa por las paginas de WooCommerce-,
 * asi que la regla que esconde cabecera/pie/titulo por defecto se repite
 * aca en vez de depender de que el tema la traiga.
 */
.myaccount-guest-body header.wp-block-template-part,
.myaccount-guest-body footer.wp-block-template-part,
.myaccount-guest-body .wp-block-post-title,
.myaccount-guest-body .wp-block-post-featured-image {
	display: none;
}

/*
 * Mismo hueco muerto que se corrigio en account.css (04/09/2026): el tema le
 * pone `margin-top:24px` a `main` y a `.entry-content`, pensado para separar
 * el contenido de la cabecera normal -con la cabecera escondida, ese margen
 * quedaba como espacio en blanco arriba de todo, muy visible en celular.
 */
.myaccount-guest-body main,
.myaccount-guest-body .entry-content {
	margin-top: 0;
}

@media (min-width: 62rem) {
	.auth-shell:has(#aceTrackResult:not([hidden])) .auth-illustration {
		align-self: start;
		position: sticky;
		top: 32px;
	}

	.auth-shell:has(#aceTrackResult:not([hidden])) .auth-panel {
		align-self: start;
	}

	/*
	 * `.ace-tracking` trae `margin:0 auto` para poder centrarse sola en la
	 * pantalla CHICA (sin columna de ilustracion al lado). Sin este reset
	 * quedaba centrada en su propia columna en vez de pegada contra el
	 * icono de inicio y el titulo de arriba.
	 */
	.auth-panel .ace-tracking {
		margin-left: 0;
		margin-right: 0;
	}
}

/*
 * Etapa 14.14g: se saca el ancho (640px), el radio (8px/6px) y la tipografia
 * a mano de aca -eran propios de esta pantalla, distintos a los de "Mi
 * cuenta" (440px, 10px, tipografia del tema)-, y en su lugar se usan los
 * MISMOS valores que `.auth-card`/`.field input` de account.css -corrige el
 * reporte de Adriano (04/09/2026) de que Seguimiento "no tiene el mismo
 * estilo" que Mi cuenta-. Sin `font-family` propio: hereda la tipografia del
 * tema (DM Sans, `theme.json`) en vez de pisarla con una pila de sistema.
 */
/*
 * `.auth-card`/`.auth-field`/`.auth-btn` (auth-shell.css) ya resuelven el
 * ancho (440px), el color, el radio y el tipo de letra de la tarjeta, los
 * campos y el boton -exactamente lo mismo que usa Mi cuenta, no una copia
 * parecida-. Aca solo queda lo que ninguna otra pantalla necesita: el ancho
 * mayor para el resultado de un pedido encontrado, y el contenido propio de
 * Seguimiento (texto de ayuda, enlace de recuperacion, cartel de resultado).
 */
/*
 * `width:100%` explicito, no solo `max-width` -sin esto, dentro de
 * `.auth-panel` (`display:flex;flex-direction:column`, auth-shell.css) el
 * navegador encoge esta caja al ancho que su CONTENIDO necesita en vez de
 * estirarla hasta el maximo: en pantallas de ancho intermedio (tablet, ni
 * celular ni el escritorio de 62rem+) la tarjeta quedaba de 249px en vez de
 * 440px -mucho mas angosta que Mi cuenta en el mismo ancho de pantalla,
 * la etiqueta de un campo se veia cortada con puntos suspensivos (reporte de
 * Adriano, 04/09/2026, con captura a 900px de ancho)-.
 */
.ace-tracking {
	width: 100%;
	max-width: 440px;
	margin: 0;
	box-sizing: border-box;
	color: var(--wp--preset--color--contrast, #1c1c1c);
}

/*
 * El resultado de un pedido encontrado (linea de tiempo, items, totales)
 * necesita mas ancho que el paso de busqueda -a diferencia de Mi cuenta, que
 * siempre es un formulario chico-, asi que solo esta variante especifica se
 * ensancha.
 */
.ace-tracking:has(#aceTrackResult:not([hidden])) {
	max-width: 640px;
}
.ace-tracking h1 { font-size: 1.5rem; margin: 0 0 0.4rem; }

/*
 * `.track-form` y otros elementos de aca abajo fijan su propio `display`
 * (flex, etc.). El atributo HTML `hidden` que pone `tracking.js` normalmente
 * esconde el elemento con una regla del navegador de muy poca prioridad, asi
 * que cualquier `display` propio la pisa y el elemento queda a la vista
 * igual -asi se detecto: el formulario seguia mostrandose debajo del
 * resultado del pedido-. Esta regla le da a `hidden` la ultima palabra
 * siempre, dentro de esta pantalla.
 */
.ace-tracking [hidden] { display: none !important; }
/* Mismo margen que `.auth-card .sub` de account.css (18px): este texto vive DENTRO de la tarjeta, igual que en Mi cuenta. */
.track-hero p { color: var(--wp--preset--color--contrast-muted, #6b6b6b); margin: 0 0 18px; font-size: 1rem; }

.track-error { color: var(--wp--preset--color--danger, #b3261e); font-size: 0.9rem; margin: 8px 0 0; }
.track-loading { color: var(--wp--preset--color--contrast-muted, #6b6b6b); padding: 1rem 0; }

/*
 * Enlace de recuperación de código (14.07): mismo criterio visual que el
 * resto de textos de apoyo de la pantalla, sin competir con el botón
 * principal "Buscar pedido".
 */
.track-recovery { margin: 1rem 0 0; text-align: center; }
.track-recovery-toggle { background: none; border: 0; color: #ce2731; cursor: pointer; font-size: 0.85rem; padding: 0.4rem; text-decoration: underline; }
.track-recovery-toggle:hover { color: #a61f27; }

/* Sin flex/gap propio: cada `.auth-field` ya trae su margen inferior (auth-shell.css), igual que en Mi cuenta -un gap extra aca hubiera duplicado ese espacio. */
.track-recovery-back { display: block; background: none; border: 0; color: var(--wp--preset--color--contrast-muted, #6b6b6b); cursor: pointer; font-size: 0.8rem; margin: 10px auto 0; padding: 0.3rem; text-align: center; text-decoration: underline; }
.track-recovery-back:hover { color: var(--wp--preset--color--contrast, #1c1c1c); }

/*
 * Cartel de confirmación (segunda corrección de Adriano, 3 de septiembre de
 * 2026): reemplaza al formulario entero apenas se manda la consulta, para
 * que quede claro que la acción se concretó -mismo criterio visual que el
 * círculo de ícono de "Pedido confirmado" (`order-confirmed.css`,
 * `--success`/`--success-surface`), no un texto chico perdido debajo del
 * formulario que sigue intacto-. El copy sigue siendo el mismo texto neutro
 * de siempre (`Tracking_Controller::recuperar()`); esto sólo cambia cómo se
 * ve.
 */
.track-recovery-sent { text-align: center; }

.track-recovery-sent-icon { align-items: center; background: var(--wp--preset--color--success-surface, #e9f7ee); border-radius: 50%; color: var(--wp--preset--color--success, #1b7a38); display: inline-flex; inline-size: 3rem; block-size: 3rem; justify-content: center; margin-block-end: 0.75rem; }
.track-recovery-sent-icon svg { inline-size: 1.5rem; block-size: 1.5rem; }

.track-recovery-sent-message { font-size: 1rem; font-weight: 500; color: var(--wp--preset--color--contrast, #1c1c1c); margin: 0 auto 1rem; max-width: 38ch; }

.track-recovery-sent.is-error .track-recovery-sent-icon { background: var(--wp--preset--color--danger-surface, #fdecea); color: var(--wp--preset--color--danger, #b3261e); }

.track-recovery-sent-actions { display: flex; flex-direction: column; gap: 0.4rem; }
.track-recovery-retry { background: none; border: 0; color: #ce2731; cursor: pointer; font-size: 0.85rem; padding: 0.3rem; text-decoration: underline; }
.track-recovery-retry:hover { color: #a61f27; }

.track-result { margin-top: 2rem; }
.track-result-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.track-result-head .label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wp--preset--color--contrast-muted, #6b6b6b); }
.track-result-head h2 { margin: 0.1rem 0; }
.track-date { font-size: 0.85rem; color: var(--wp--preset--color--contrast-muted, #6b6b6b); }

/*
 * Boton "Ver comprobante": pedido puntual de Adriano (26 de agosto de 2026)
 * para que no compita en atencion con el resto de la pantalla. Mismo criterio
 * que el boton "Agregar al pedido" del tema (`.ace-btn--dark`,
 * foundations.css): sin borde, fondo del token `hairline`, texto del token
 * `contrast-alt`. No se reusa esa clase de CSS porque este paquete arma su
 * propio marcado (ver comentario al inicio del archivo); se calca el mismo
 * VALOR (el token, no un color a mano) a mano.
 */
.track-result-head .btn-outline {
	background: var(--wp--preset--color--hairline, #e2e1de);
	border: 0;
	color: var(--wp--preset--color--contrast-alt, #3a3a3a);
	font-weight: 500;
}
.track-result-head .btn-outline:hover {
	background: var(--wp--preset--color--contrast-alt, #3a3a3a);
	color: var(--wp--preset--color--surface, #fff);
}

.btn-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; gap: 0.4rem; }
.btn-icon-svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }

/*
 * En movil el boton pasa a ser solo el icono, circular: en una pantalla
 * angosta "Ver comprobante" en texto compite por ancho con el numero de
 * pedido. El texto sigue en el HTML (accesible via `aria-label` en el link)
 * para que un lector de pantalla lo siga anunciando.
 */
@media (max-width: 480px) {
	.track-result-head .btn-icon {
		box-sizing: border-box;
		padding: 0;
		width: 2.75rem;
		height: 2.75rem;
		min-block-size: 2.75rem;
		border-radius: 50%;
	}
	.btn-icon-text { display: none; }
}

.track-notice { margin-bottom: 1.5rem; padding: 0.9rem 1rem; border-radius: 6px; font-weight: 600; }
.track-notice.is-cancelado { background: var(--wp--preset--color--danger-surface, #fdecea); color: var(--wp--preset--color--danger, #b3261e); }
.track-notice.is-atencion { background: var(--wp--preset--color--notice-surface, #fff4e5); color: var(--wp--preset--color--notice, #8a5a00); }

/*
 * Un icono por paso, pedido puntual de Adriano (26 de agosto de 2026):
 * arriba de la linea en escritorio, a la izquierda de la etiqueta cuando la
 * fila pasa a columna en movil (ver media query mas abajo).
 */
.track-timeline { display: flex; margin: 0 0 2rem; padding: 0; list-style: none; }
.track-timeline li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; position: relative; font-size: 0.75rem; color: var(--wp--preset--color--contrast-muted, #6b6b6b); }

.track-step-icon { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 28px; height: 28px; border-radius: 50%; background: var(--wp--preset--color--surface, #fff); border: 2px solid var(--wp--preset--color--hairline, #e2e1de); color: var(--wp--preset--color--contrast-muted, #6b6b6b); flex-shrink: 0; }
.track-step-icon svg { width: 15px; height: 15px; }

.track-timeline li::after { content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px; background: var(--wp--preset--color--hairline, #e2e1de); z-index: 0; }
.track-timeline li:first-child::after { display: none; }
.track-timeline li.is-hecho { color: var(--wp--preset--color--accent, #3f4a5a); }
.track-timeline li.is-hecho .track-step-icon { background: var(--wp--preset--color--accent, #3f4a5a); border-color: var(--wp--preset--color--accent, #3f4a5a); color: var(--wp--preset--color--accent-contrast, #fff); }
.track-timeline li.is-hecho::after { background: var(--wp--preset--color--accent, #3f4a5a); }
.track-timeline li.is-actual { color: var(--wp--preset--color--accent, #3f4a5a); font-weight: 600; }
.track-timeline li.is-actual .track-step-icon { border-color: var(--wp--preset--color--accent, #3f4a5a); color: var(--wp--preset--color--accent, #3f4a5a); }

@media (max-width: 480px) {
	.track-timeline { flex-direction: column; align-items: stretch; gap: 0; }
	.track-timeline li {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 0.75rem;
		text-align: left;
		padding-bottom: 1.5rem;
	}
	.track-timeline li:last-child { padding-bottom: 0; }
	.track-timeline li::after { top: 28px; left: 13px; bottom: 0; width: 2px; height: auto; }
	.track-timeline li:first-child::after { display: block; }
	.track-timeline li:last-child::after { display: none; }
}

.confirm-steps { display: flex; gap: 1.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.confirm-step { flex: 1; min-width: 200px; }
.confirm-step h3 { font-size: 0.9rem; margin: 0 0 0.3rem; }
.confirm-step p { margin: 0; color: var(--wp--preset--color--contrast-muted, #6b6b6b); font-size: 0.9rem; }

.confirm-order-box { border-top: 1px solid var(--wp--preset--color--hairline, #e2e1de); padding-top: 1rem; }
.track-item { display: flex; justify-content: space-between; font-size: 0.9rem; padding: 0.2rem 0; }
.summary-row { display: flex; justify-content: space-between; font-size: 0.9rem; padding: 0.2rem 0; }
.summary-row.total { font-weight: 700; font-size: 1.05rem; border-top: 1px solid var(--wp--preset--color--contrast, #1c1c1c); margin-top: 0.4rem; padding-top: 0.5rem; }