/*
 * =====================================================================
 * Transporte Indicadores: estilos del frontend
 *
 * Idea visual: la caja de "Indicadores" de un periódico impreso,
 * adaptada al tema Newspaper (tagDiv) que usa transporte.com:
 *   - título de bloque con barra roja (como los títulos del tema);
 *   - tira de cotizaciones separadas por filetes de 1 px (sin sombras
 *     ni esquinas redondeadas);
 *   - tabla de cruces fronterizos densa, con cifras alineadas.
 *
 * Reglas para editar este archivo:
 *   1. Todos los colores y fuentes salen de las variables --ti-* de
 *      abajo. Si quieres cambiar el rojo, cámbialo SOLO ahí.
 *   2. Todo está dentro de ".ti" para no afectar al tema.
 *   3. El plugin NO carga fuentes: usa Poppins y Roboto Condensed que
 *      ya carga el tema, con respaldo de fuentes del sistema.
 *   4. Los tamaños se adaptan al ANCHO DEL CONTENEDOR (container
 *      queries), no al de la pantalla: así el mismo bloque funciona en
 *      el sidebar (~300 px), en móvil y en la página completa.
 *   5. El buscador, las pestañas, el orden de tablas y "Ver los 32
 *      estados" los maneja assets/indicadores.js. La clase .ti-js en el
 *      tablero indica que el JavaScript está activo; sin ella todo se ve
 *      apilado y los controles que necesitan JS se ocultan.
 * =====================================================================
 */

/* ---------------------------------------------------------------------
 * 1. Variables (tema claro, igual que transporte.com)
 * ------------------------------------------------------------------- */
.ti {
	/* Colores de marca tomados del tema de transporte.com. */
	--ti-rojo: #e52e2e;          /* Rojo exacto del sitio: filetes y foco. */
	/*
	 * Fondo de la barra del título: el rojo del sitio apenas oscurecido.
	 * Con #e52e2e el texto blanco de 14 px da 4.4:1 (no llega a AA);
	 * con #e02a2a da 4.6:1 y a la vista es el mismo rojo.
	 */
	--ti-rojo-barra: #e02a2a;
	--ti-navy: #131f49;          /* Texto principal del sitio. */

	/* Colores de uso (con contraste AA ≥ 4.5:1 sobre blanco para texto chico). */
	--ti-fondo: #fff;
	--ti-tinta: var(--ti-navy);
	--ti-meta: #66666b;          /* Texto secundario: fechas, fuentes. */
	--ti-filete: #e6e8ec;        /* Divisores finos. */
	--ti-filete-fuerte: #131f49; /* Filete bajo encabezados. */
	--ti-panel: #f1f4f7;         /* Fondo de filas al pasar el mouse. */
	--ti-sube: #c21d1d;          /* Alza (costo mayor para el transportista). */
	--ti-baja: #1b7446;          /* Baja. */
	--ti-medio: #8a5200;         /* Espera moderada. */
	--ti-viejo: #8a5200;         /* Etiqueta "Dato al ..." cuando la fuente falló. */
	--ti-seleccion: rgba(229, 46, 46, 0.16);
	--ti-borde-campo: #868b97;   /* Contorno de buscador y botones (3.4:1, mínimo de WCAG para controles). */

	/* Fuentes (heredadas del tema). */
	--ti-fuente: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--ti-fuente-cond: "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;

	/* Escala tipográfica fija (1.2) en rem. */
	--ti-t-xs: 0.75rem;   /* 12 px: etiquetas en mayúsculas. */
	--ti-t-s: 0.8125rem;  /* 13 px: fechas y fuentes. */
	--ti-t-m: 0.9375rem;  /* 15 px: nombres de cruce. */
	--ti-t-seccion: 1.375rem; /* 22 px: título de sección del tablero. */
	--ti-t-xl: 2rem;      /* 32 px: cifra principal. */

	/* Espaciado (múltiplos de 4 px). */
	--ti-e-1: 0.25rem;
	--ti-e-2: 0.5rem;
	--ti-e-3: 0.75rem;
	--ti-e-4: 1rem;
	--ti-e-6: 1.5rem;
	--ti-e-8: 2rem;
	--ti-e-12: 3rem;

	/* Alto mínimo de todo lo que se toca (botones, pestañas, casillas). */
	--ti-toque: 2.75rem;

	color: var(--ti-tinta);
	font-family: var(--ti-fuente);
	font-size: 1rem;
	line-height: 1.4;
	container-type: inline-size; /* Permite @container más abajo. */
	margin-block: var(--ti-e-6);
}

/* ---------------------------------------------------------------------
 * 2. Tema oscuro (solo si el admin lo elige: "oscuro" o "auto")
 *    Por defecto es claro porque transporte.com no tiene modo oscuro.
 * ------------------------------------------------------------------- */
.ti[data-ti-tema="oscuro"] {
	--ti-fondo: #0e1430;
	--ti-tinta: #eef1f8;
	--ti-meta: #aab1c5;
	--ti-filete: #262f57;
	--ti-filete-fuerte: #eef1f8;
	--ti-panel: #151d40;
	--ti-sube: #ff8a80;
	--ti-baja: #6fd6a1;
	--ti-medio: #f3bd6b;
	--ti-viejo: #f3bd6b;
	--ti-seleccion: rgba(255, 138, 128, 0.25);
	--ti-borde-campo: #6a7398;
	background: var(--ti-fondo);
	padding: var(--ti-e-4);
}

@media (prefers-color-scheme: dark) {
	.ti[data-ti-tema="auto"] {
		--ti-fondo: #0e1430;
		--ti-tinta: #eef1f8;
		--ti-meta: #aab1c5;
		--ti-filete: #262f57;
		--ti-filete-fuerte: #eef1f8;
		--ti-panel: #151d40;
		--ti-sube: #ff8a80;
		--ti-baja: #6fd6a1;
		--ti-medio: #f3bd6b;
		--ti-viejo: #f3bd6b;
		--ti-seleccion: rgba(255, 138, 128, 0.25);
		--ti-borde-campo: #6a7398;
		background: var(--ti-fondo);
		padding: var(--ti-e-4);
	}
}

/* ---------------------------------------------------------------------
 * 3. Reset local: el tema Newspaper le pone márgenes, bordes y fondos a
 *    h2, p, table, td... Aquí los neutralizamos SOLO dentro del bloque.
 * ------------------------------------------------------------------- */
.ti *,
.ti *::before,
.ti *::after {
	box-sizing: border-box;
}

.ti h2,
.ti h3,
.ti h4,
.ti h5,
.ti p,
.ti dl,
.ti dd {
	margin: 0;
	padding: 0;
	font-family: inherit;
	color: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.ti table,
.ti th,
.ti td {
	border: 0;
	background: none;
	margin: 0;
}

.ti ::selection {
	background: var(--ti-seleccion);
	color: var(--ti-tinta);
}

/* Enlaces: subrayado fino que se vuelve rojo al pasar el mouse. */
.ti a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
	transition: color 150ms ease-out, text-decoration-color 150ms ease-out;
}

.ti a:hover {
	/* Como el sitio: el texto no cambia de color, el subrayado se vuelve rojo. */
	text-decoration-color: var(--ti-rojo);
	text-decoration-thickness: 2px;
}

.ti a:focus-visible,
.ti button:focus-visible,
.ti summary:focus-visible,
.ti input:focus-visible,
.ti [tabindex]:focus-visible {
	outline: 2px solid var(--ti-rojo);
	outline-offset: 2px;
}

/* Lo que el JavaScript oculta se oculta de verdad (algunas reglas fijan display). */
.ti [hidden],
.ti .ti-oculto-espera,
.ti .ti-oculto-limite {
	display: none !important;
}

/* Controles que solo funcionan con JavaScript (buscador, filtro): ocultos sin él. */
.ti-tablero:not(.ti-js) [data-ti-solo-js] {
	display: none;
}

/* Botones del bloque: sin los estilos que el tema pone a <button>. */
.ti button {
	margin: 0;
	border-radius: 0;
	box-shadow: none;
	text-shadow: none;
	font-family: inherit;
	line-height: 1.2;
	-webkit-tap-highlight-color: transparent;
}

/* Texto solo para lectores de pantalla. */
.ti .ti-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Cifras siempre con numerales tabulares (todas del mismo ancho). */
.ti data,
.ti .ti-num,
.ti time {
	font-variant-numeric: tabular-nums lining-nums;
}

/* ---------------------------------------------------------------------
 * 4. Encabezado del tablero: título con barra roja estilo Newspaper
 * ------------------------------------------------------------------- */
.ti-tablero__cabecera {
	margin-bottom: var(--ti-e-4);
}

.ti .ti-titulo {
	display: flex;
	border-bottom: 2px solid var(--ti-rojo);
	margin-bottom: var(--ti-e-2);
	font-size: var(--ti-t-s);
	line-height: 1;
}

.ti .ti-titulo span {
	display: inline-block;
	background: var(--ti-rojo-barra);
	color: #fff;
	font-family: var(--ti-fuente-cond);
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.5rem 0.75rem 0.4375rem;
}


/* ---------------------------------------------------------------------
 * 4b. Barra de herramientas: buscador + pestañas de sección
 * ------------------------------------------------------------------- */
.ti-herramientas {
	margin-bottom: var(--ti-e-6);
}

.ti-buscador {
	margin-bottom: var(--ti-e-3);
}

.ti .ti-buscador__etiqueta {
	display: block;
	margin-bottom: var(--ti-e-2);
	font-family: var(--ti-fuente-cond);
	font-size: var(--ti-t-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ti .ti-buscador__campo {
	position: relative;
	display: flex;
	align-items: center;
	border: 1px solid var(--ti-borde-campo);
	background: var(--ti-fondo);
	transition: border-color 150ms ease-out;
}

.ti .ti-buscador__campo:hover {
	border-color: var(--ti-tinta);
}

/* El foco se dibuja en el campo completo (incluye la lupa y el botón de borrar). */
.ti .ti-buscador__campo:focus-within {
	border-color: var(--ti-tinta);
	outline: 2px solid var(--ti-rojo);
	outline-offset: 2px;
}

.ti .ti-buscador__campo > .ti-icono--lupa {
	position: absolute;
	left: 0.875rem;
	color: var(--ti-meta);
	pointer-events: none;
}

/* Reset del input: el tema Newspaper le pone borde, alto y relleno propios. */
.ti .ti-buscador__input {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: auto;
	min-height: var(--ti-toque);
	margin: 0;
	padding: 0.625rem 2.75rem 0.625rem 2.625rem;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	color: var(--ti-tinta);
	font-family: var(--ti-fuente);
	font-size: 1rem; /* 16 px: en iPhone, menos de esto hace zoom al escribir. */
	line-height: 1.4;
	caret-color: var(--ti-rojo);
}

.ti .ti-buscador__input::placeholder {
	color: var(--ti-meta);
	opacity: 1;
}

.ti .ti-buscador__input:focus,
.ti .ti-buscador__input:focus-visible {
	outline: none; /* Lo dibuja el contenedor (:focus-within). */
}

/*
 * Se quitan la "x" nativa y la flecha de sugerencias que Chrome dibuja dentro
 * del campo: usamos un botón propio, igual en todos los navegadores. Las
 * sugerencias (datalist) siguen apareciendo al escribir.
 */
.ti .ti-buscador__input::-webkit-calendar-picker-indicator {
	display: none !important;
}

.ti .ti-buscador__input::-webkit-search-cancel-button,
.ti .ti-buscador__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.ti .ti-buscador__limpiar {
	position: absolute;
	right: 0.125rem;
	display: grid;
	place-items: center;
	width: var(--ti-toque);
	height: var(--ti-toque);
	padding: 0;
	border: 0;
	background: none;
	color: var(--ti-meta);
	cursor: pointer;
}

.ti .ti-buscador__limpiar:hover {
	color: var(--ti-tinta);
}

.ti .ti-buscador__estado {
	margin-top: var(--ti-e-2);
	font-family: var(--ti-fuente-cond);
	font-size: var(--ti-t-s);
	color: var(--ti-meta);
}

.ti .ti-buscador__estado:empty {
	display: none;
}

/*
 * Pestañas de sección, como los filtros de categoría de los bloques del
 * tema Newspaper: texto condensado en mayúsculas y la activa subrayada en
 * rojo. Si no caben, se desplazan de lado (sin barra visible).
 */
.ti .ti-secciones {
	display: flex;
	gap: var(--ti-e-6);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	border-bottom: 1px solid var(--ti-filete);
}

.ti .ti-secciones::-webkit-scrollbar {
	display: none;
}

.ti .ti-secciones__item {
	flex: none;
	display: inline-flex;
	align-items: center;
	min-height: var(--ti-toque);
	margin: 0 0 -1px; /* La línea activa se monta sobre el filete de la barra. */
	padding: 0;
	border: 0;
	border-bottom: 3px solid transparent;
	background: none;
	color: var(--ti-meta);
	font-family: var(--ti-fuente-cond);
	font-size: var(--ti-t-s);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: color 150ms ease-out, border-color 150ms ease-out;
}

.ti a.ti-secciones__item {
	text-decoration: none; /* Sin JavaScript son enlaces: sin subrayado. */
}

.ti .ti-secciones__item:hover {
	color: var(--ti-tinta);
	border-bottom-color: var(--ti-filete-fuerte);
}

.ti .ti-secciones__item[aria-pressed="true"] {
	color: var(--ti-tinta);
	border-bottom-color: var(--ti-rojo);
}

/*
 * Si las pestañas no caben, el borde por donde hay más se desvanece
 * (el JavaScript pone ti-mas-izq / ti-mas-der según el desplazamiento).
 */
.ti .ti-secciones.ti-mas-der {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}

.ti .ti-secciones.ti-mas-izq {
	-webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
	mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
}

.ti .ti-secciones.ti-mas-izq.ti-mas-der {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
	mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
}

/*
 * Durante una búsqueda ninguna pestaña está activa: las secciones con
 * resultados se ven en tinta con su número de coincidencias y las que no
 * tienen quedan en gris. Tocar una con resultados lleva a esos resultados.
 */
.ti-buscando .ti-secciones__item.ti-con-resultados {
	color: var(--ti-tinta);
}

.ti .ti-cuenta {
	margin-left: 0.3125rem;
	padding: 0.0625rem 0.3125rem;
	border: 1px solid currentColor;
	font-size: var(--ti-t-xs);
	line-height: 1.2;
	letter-spacing: 0;
}

/* En celular las cinco pestañas caben si se compactan un poco. */
@container (max-width: 24rem) {
	.ti .ti-secciones {
		gap: var(--ti-e-4);
	}

	.ti .ti-secciones__item {
		font-size: var(--ti-t-xs);
		letter-spacing: 0.04em;
	}
}

/* ---------------------------------------------------------------------
 * 4c. Secciones (paneles) y subgrupos del tablero
 * ------------------------------------------------------------------- */
.ti-panel {
	margin: 0;
}

/* Al cambiar de pestaña la sección aparece con un fundido corto (estado, no adorno). */
.ti-js .ti-panel {
	animation: ti-aparecer 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ti-aparecer {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Entre secciones (vista "Todo" o búsqueda): filete navy grueso y aire, como un cambio de sección del diario. */
.ti .ti-panel--siguiente,
.ti-tablero:not(.ti-js) .ti-panel + .ti-panel {
	margin-top: var(--ti-e-12);
	padding-top: var(--ti-e-4);
	border-top: 2px solid var(--ti-filete-fuerte);
}

.ti-panel__cabecera {
	margin-bottom: var(--ti-e-6);
}

.ti .ti-panel__titulo {
	font-size: var(--ti-t-seccion);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.ti .ti-panel__resumen {
	margin-top: var(--ti-e-1);
	font-family: var(--ti-fuente-cond);
	font-size: var(--ti-t-s);
	color: var(--ti-meta);
}

.ti-subgrupo + .ti-subgrupo {
	margin-top: var(--ti-e-8);
}

/* Título de subgrupo ("México", "Tipo de cambio"): encabezado con filete que corre a la derecha. */
.ti .ti-subgrupo__titulo {
	display: flex;
	align-items: center;
	gap: var(--ti-e-3);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
}

.ti .ti-subgrupo__titulo::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--ti-filete-fuerte);
}

/* Dentro del tablero el filete del subgrupo ya separa: la tira no lleva el suyo. */
.ti-subgrupo .ti-tarjetas {
	background: none;
}

/* Tabla dentro de un subgrupo ("Diésel por estado"). */
.ti-bloque-tabla {
	margin-top: var(--ti-e-6);
}

.ti .ti-bloque-tabla__titulo {
	margin-bottom: var(--ti-e-2);
	font-size: var(--ti-t-m);
	font-weight: 500;
	line-height: 1.25;
}

/* Botón "Ver los 32 estados" / "Ver menos". */
.ti .ti-mas {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: var(--ti-toque);
	margin-top: var(--ti-e-3);
	padding: 0 var(--ti-e-4);
	border: 1px solid var(--ti-borde-campo);
	background: none;
	color: var(--ti-tinta);
	font-family: var(--ti-fuente-cond);
	font-size: var(--ti-t-s);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color 150ms ease-out;
}

.ti .ti-mas:hover {
	border-color: var(--ti-tinta);
}

.ti .ti-mas .ti-icono {
	transition: transform 150ms ease-out;
}

.ti .ti-mas[aria-expanded="true"] .ti-icono {
	transform: rotate(180deg);
}

/* Encabezados ordenables: el texto se vuelve botón con un indicador de dos triángulos. */
.ti .ti-orden {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 1.5rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
}

.ti .ti-orden__icono path {
	fill: currentColor;
	opacity: 0.3;
	transition: opacity 150ms ease-out;
}

.ti .ti-orden:hover .ti-orden__icono path {
	opacity: 0.6;
}

.ti th[aria-sort="ascending"] .ti-orden__arriba,
.ti th[aria-sort="descending"] .ti-orden__abajo {
	opacity: 1;
}

/* "Cómo leer estos datos" al final de cada sección. */
.ti-glosario {
	margin-top: var(--ti-e-8);
	border-top: 1px solid var(--ti-filete);
}

.ti .ti-glosario > summary {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: var(--ti-toque);
	list-style: none;
	cursor: pointer;
	font-family: var(--ti-fuente-cond);
	font-size: var(--ti-t-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ti .ti-glosario > summary::-webkit-details-marker {
	display: none;
}

.ti .ti-glosario > summary .ti-icono {
	width: 1rem;
	height: 1rem;
	transition: transform 150ms ease-out;
}

.ti .ti-glosario[open] > summary .ti-icono {
	transform: rotate(90deg);
}

.ti .ti-glosario dl {
	display: grid;
	gap: var(--ti-e-4) var(--ti-e-8);
	padding-bottom: var(--ti-e-2);
}

.ti .ti-glosario dt {
	font-size: var(--ti-t-m);
	font-weight: 500;
	line-height: 1.3;
}

.ti .ti-glosario dd {
	max-width: 68ch;
	margin-top: var(--ti-e-1);
	font-family: var(--ti-fuente-cond);
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--ti-meta);
}

@container (min-width: 40rem) {
	.ti .ti-glosario dl {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------------
 * 5. Tira de cotizaciones (FX, diésel, crudo...)
 *    Celdas separadas por filetes, sin cajas. Se acomodan solas en
 *    1, 2 o más columnas según el ancho disponible.
 * ------------------------------------------------------------------- */
.ti-tarjetas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
	/*
	 * Truco de los filetes: cada celda lleva filete a la izquierda y el
	 * contenedor se sale 1rem por cada lado con overflow oculto. Así el
	 * filete de la primera columna queda fuera de la vista y el texto de
	 * la primera celda queda alineado con el título.
	 */
	margin-inline: calc(-1 * var(--ti-e-4));
	overflow: hidden;
	/* Filete superior dibujado como fondo, al ancho del texto (sin salirse del margen). */
	background: linear-gradient(var(--ti-filete-fuerte), var(--ti-filete-fuerte)) var(--ti-e-4) 0 / calc(100% - 2 * var(--ti-e-4)) 1px no-repeat;
}

.ti-tarjeta {
	container-type: inline-size;
	position: relative;
	/* Columna flexible: el filete inferior de tarjetas vecinas queda a la misma altura. */
	display: flex;
	flex-direction: column;
}

.ti .ti-tarjeta__cuerpo {
	flex: 1;
}

/*
 * El cuerpo lleva el relleno vertical y el filete inferior; así los
 * filetes horizontales miden lo que el texto de su columna, con un
 * hueco entre columnas donde cae el filete vertical (como en un diario).
 */
.ti .ti-tarjeta__cuerpo {
	padding-block: var(--ti-e-4);
	border-bottom: 1px solid var(--ti-filete);
}

/* En la tira: filete fino a la izquierda (el de la primera columna queda oculto). */
.ti-tarjetas .ti-tarjeta {
	padding-inline: var(--ti-e-4);
	margin-left: -1px;
	border-left: 1px solid var(--ti-filete);
}

/* Tarjeta suelta (sidebar o dentro de una nota). */
.ti-suelto > .ti-tarjeta {
	border-top: 2px solid var(--ti-filete-fuerte);
}

.ti .ti-tarjeta__etiqueta {
	font-family: var(--ti-fuente-cond);
	font-size: var(--ti-t-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.2;
	margin-bottom: var(--ti-e-2);
}

.ti .ti-tarjeta__valor {
	font-size: var(--ti-t-xl);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.ti .ti-tarjeta__unidad {
	font-family: var(--ti-fuente-cond);
	font-size: var(--ti-t-s);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--ti-meta);
	margin-left: 0.125rem;
}

.ti .ti-variacion {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0 var(--ti-e-1);
	margin-top: var(--ti-e-2);
	font-family: var(--ti-fuente-cond);
	font-size: var(--ti-t-s);
	font-weight: 700;
}

.ti .ti-variacion--sube { color: var(--ti-sube); }
.ti .ti-variacion--baja { color: var(--ti-baja); }
.ti .ti-variacion--igual { color: var(--ti-meta); font-weight: 400; }

.ti .ti-variacion__ref {
	color: var(--ti-meta);
	font-weight: 400;
}

.ti .ti-flecha {
	flex: none;
	width: 0.625rem;
	height: 0.625rem;
}

/* "Promedio de 10,451 gasolineras". */
.ti .ti-tarjeta__nota {
	margin-top: var(--ti-e-1);
	font-family: var(--ti-fuente-cond);
	font-size: var(--ti-t-s);
	color: var(--ti-meta);
}

.ti .ti-tarjeta__meta {
	margin-top: var(--ti-e-2);
	font-family: var(--ti-fuente-cond);
	font-size: var(--ti-t-s);
	color: var(--ti-meta);
	line-height: 1.35;
}

/* "Dato al DD/MM/AAAA HH:mm": la fuente está fallando y mostramos el último valor bueno. */
.ti .ti-fecha--vieja {
	color: var(--ti-viejo);
	font-weight: 700;
}

.ti .ti-tarjeta__vacio {
	font-family: var(--ti-fuente-cond);
	font-size: var(--ti-t-s);
	color: var(--ti-meta);
	padding-block: var(--ti-e-2);
}

.ti-tarjeta--vacia .ti-tarjeta__etiqueta {
	color: var(--ti-meta);
}

/*
 * Con 2 columnas (móvil) y un número impar de tarjetas, la última ocupa
 * la fila completa en lugar de dejar un hueco a la derecha.
 */
@container (max-width: 30rem) {
	.ti-tablero:not(.ti-js) .ti-tarjetas > .ti-tarjeta:last-child:nth-child(odd),
	.ti-tarjetas > .ti-tarjeta--ancha {
		grid-column: 1 / -1;
	}
}

/* Celda angosta (2 columnas en móvil): la cifra baja un poco para que no se corte. */
@container (max-width: 12rem) {
	.ti .ti-tarjeta__valor {
		font-size: 1.625rem;
	}
}

/*
 * Celda ancha (p. ej. un solo indicador ocupando toda la fila):
 * etiqueta y fecha a la izquierda, cifra y variación a la derecha,
 * como una línea de la tabla de indicadores de un periódico.
 */
@container (min-width: 30rem) {
	.ti .ti-tarjeta__cuerpo {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"etiqueta valor"
			"meta     variacion";
		align-items: baseline;
		column-gap: var(--ti-e-6);
	}

	/* Con nota ("Promedio de 10,508 gasolineras") el orden es el mismo que en angosto: nota y luego fecha/fuente. */
	.ti .ti-tarjeta__cuerpo:has(.ti-tarjeta__nota) {
		grid-template-areas:
			"etiqueta valor"
			"nota     variacion"
			"meta     meta";
	}

	.ti .ti-tarjeta__etiqueta { grid-area: etiqueta; margin: 0; font-size: 0.8125rem; }
	.ti .ti-tarjeta__valor { grid-area: valor; text-align: right; }
	.ti .ti-variacion { grid-area: variacion; justify-content: flex-end; }
	.ti .ti-tarjeta__nota { grid-area: nota; }
	.ti .ti-tarjeta__meta { grid-area: meta; }
}

/* ---------------------------------------------------------------------
 * 6. Frontera: tabla de cruces
 * ------------------------------------------------------------------- */
.ti-frontera {
	margin-top: var(--ti-e-8);
}

.ti-suelto > .ti-frontera {
	margin-top: 0;
}

/* En la vista suelta el título de bloque ya separa; la tabla arranca sin filete doble. */
.ti-suelto .ti-titulo + .ti-tabla-scroll .ti-tabla thead th {
	padding-top: var(--ti-e-2);
}

/* Contenedor con scroll horizontal por si la tabla no cabe. */
.ti .ti-tabla-scroll {
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--ti-filete) transparent;
}

.ti .ti-tabla {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--ti-t-m);
}

.ti .ti-tabla thead th {
	font-family: var(--ti-fuente-cond);
	font-size: var(--ti-t-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: left;
	color: var(--ti-tinta);
	padding: 0 var(--ti-e-3) var(--ti-e-2) 0;
	border-bottom: 2px solid var(--ti-filete-fuerte);
	white-space: nowrap;
}

.ti .ti-tabla tbody th,
.ti .ti-tabla td {
	padding: var(--ti-e-3) var(--ti-e-3) var(--ti-e-3) 0;
	border-bottom: 1px solid var(--ti-filete);
	vertical-align: baseline;
	text-align: left;
}

.ti .ti-tabla th:last-child,
.ti .ti-tabla td:last-child {
	padding-right: 0;
}

.ti .ti-tabla tbody tr {
	transition: background-color 150ms ease-out;
}

.ti .ti-tabla tbody tr:hover {
	background: var(--ti-panel);
}

.ti .ti-tabla tbody th {
	font-weight: 500; /* El tema carga Poppins 500 y 700; 600 se sintetizaría. */
	line-height: 1.25;
}

.ti .ti-cruce {
	display: block;
}

.ti .ti-cruce__detalle {
	display: block;
	margin-top: 0.125rem;
	font-family: var(--ti-fuente-cond);
	font-size: var(--ti-t-s);
	font-weight: 400;
	color: var(--ti-meta);
}

.ti .ti-tabla .ti-num {
	text-align: right;
	white-space: nowrap;
}

.ti .ti-espera {
	font-weight: 700;
}

.ti .ti-espera--bajo { color: var(--ti-baja); }
.ti .ti-espera--medio { color: var(--ti-medio); }
.ti .ti-espera--alto { color: var(--ti-sube); }

.ti .ti-unidad {
	font-family: var(--ti-fuente-cond);
	font-size: var(--ti-t-xs);
	font-weight: 400;
	color: var(--ti-meta);
}

/* "Sin reporte", "Cerrado", "Sin dato", "—". Pueden partirse en dos líneas en columnas angostas. */
.ti .ti-tabla .ti-na,
.ti .ti-na {
	white-space: normal;
	font-family: var(--ti-fuente-cond);
	font-size: var(--ti-t-s);
	color: var(--ti-meta);
}

/* Cruce cerrado: se atenúa para que los abiertos destaquen. */
.ti .ti-cerrado th {
	color: var(--ti-meta);
	font-weight: 400;
}

.ti .ti-frontera__pie {
	margin-top: var(--ti-e-3);
}

/* Fila de grupo: el estado mexicano ("Tamaulipas · 1 de 8 con espera"). */
.ti .ti-tabla .ti-fila-grupo th {
	padding: var(--ti-e-6) 0 var(--ti-e-2);
	border-bottom: 1px solid var(--ti-filete-fuerte);
	font-family: var(--ti-fuente-cond);
	font-size: var(--ti-t-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: left;
}

.ti .ti-tabla tbody:first-of-type .ti-fila-grupo th {
	padding-top: var(--ti-e-3);
}

.ti .ti-tabla tbody tr.ti-fila-grupo:hover {
	background: none;
}

.ti .ti-fila-grupo__cuenta {
	margin-left: var(--ti-e-2);
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--ti-meta);
}

.ti-filtros {
	margin-bottom: var(--ti-e-2);
}

.ti .ti-casilla {
	display: inline-flex;
	align-items: center;
	gap: var(--ti-e-2);
	min-height: var(--ti-toque);
	font-size: var(--ti-t-m);
	cursor: pointer;
}

.ti .ti-casilla input {
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	accent-color: var(--ti-navy);
	cursor: pointer;
}

.ti .ti-frontera__vacio {
	padding: var(--ti-e-4) 0;
	border-top: 2px solid var(--ti-filete-fuerte);
	border-bottom: 1px solid var(--ti-filete);
	font-family: var(--ti-fuente-cond);
	font-size: var(--ti-t-s);
	color: var(--ti-meta);
}

/*
 * Columna angosta (sidebar de ~300 px): la tabla se mantiene como tabla
 * (una sola fila de encabezados, esperas alineadas a la derecha) pero más
 * compacta, y el encabezado "Carga FAST" se acorta a "FAST".
 */
@container (max-width: 22rem) {
	.ti .ti-tabla {
		font-size: 0.875rem;
	}

	.ti .ti-tabla tbody th,
	.ti .ti-tabla td {
		padding-block: var(--ti-e-2);
		padding-right: var(--ti-e-2);
	}

	.ti .ti-tabla .ti-ancho {
		display: none;
	}
}

/*
 * Columnas opcionales (p. ej. "Gasolineras"): en celular no caben junto a
 * las demás; se ocultan y su dato aparece como segunda línea del renglón.
 */
.ti .ti-solo-angosto {
	display: none;
}

@container (max-width: 24rem) {
	.ti .ti-tabla .ti-opcional {
		display: none;
	}

	.ti .ti-tabla .ti-solo-angosto {
		display: block;
	}
}

/* ---------------------------------------------------------------------
 * 6b. Tablas de desglose sueltas ([ti_diesel_estados], [ti_robo_transportista]...)
 * ------------------------------------------------------------------- */
.ti-suelto > .ti-estados {
	margin-top: 0;
}

.ti .ti-dif {
	font-weight: 700;
	font-size: var(--ti-t-s);
}

.ti .ti-dif.ti-sube { color: var(--ti-sube); }
.ti .ti-dif.ti-baja { color: var(--ti-baja); }

/* ---------------------------------------------------------------------
 * 7. Avisos (solo los ven editores: p. ej. ID de shortcode inválido)
 * ------------------------------------------------------------------- */
.ti.ti-aviso {
	font-family: var(--ti-fuente-cond);
	font-size: var(--ti-t-s);
	color: var(--ti-sube);
	border-top: 2px solid var(--ti-rojo);
	padding-top: var(--ti-e-2);
}

/* ---------------------------------------------------------------------
 * 8. Movimiento reducido: sin transiciones.
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.ti a,
	.ti button,
	.ti .ti-tabla tbody tr,
	.ti .ti-icono,
	.ti .ti-orden__icono path,
	.ti .ti-buscador__campo {
		transition: none;
	}

	.ti-js .ti-panel {
		animation: none;
	}
}