/* ==========================================================================
   FXLAT · bitacora
   El componente mas importante del sitio.

   Siete columnas en escritorio. En movil la tabla se reorganiza como registro
   apilado: cada fila se convierte en una ficha con la etiqueta de columna
   delante del dato. Sin scroll horizontal y sin ocultar columnas — esconder
   una columna en movil es decidir por el lector que dato le sobra, y en una
   bitacora que existe para no esconder nada eso es una contradiccion.
   ========================================================================== */

/* --- Contador de la cabecera --------------------------------------------
   Lo calcula el sistema. No hay campo donde escribirlo, ni forma de dejar un
   resultado fuera. Va antes de cualquier filtro.
   ------------------------------------------------------------------------ */

.fxlat-contador {
	border-top: var(--fxlat-border-width-vela) solid var(--fxlat-color-linea-fuerte);
	border-bottom: var(--fxlat-border-width-hairline) solid var(--fxlat-color-linea);
	padding-block: var(--fxlat-space-5);
	margin-bottom: var(--fxlat-space-5);
}

.fxlat-contador__lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fxlat-space-6);
	list-style: none;
	margin: 0 0 var(--fxlat-space-4);
	padding: 0;
	max-width: none;
}

.fxlat-contador__lista li {
	margin: 0;
}

.fxlat-contador__cifra {
	display: block;
	font-family: var(--fxlat-font-family-rotulo);
	font-size: var(--fxlat-font-size-titulo-1);
	font-weight: var(--fxlat-font-weight-rotulo-marca);
	line-height: var(--fxlat-line-height-apretado);
	font-variant-numeric: var(--fxlat-font-variant-numeric-tabla);
}

.fxlat-contador__etiqueta {
	display: block;
	font-family: var(--fxlat-font-family-dato);
	font-size: var(--fxlat-font-size-meta);
	font-weight: var(--fxlat-font-weight-dato-fuerte);
	letter-spacing: var(--fxlat-letter-spacing-meta);
	text-transform: uppercase;
	color: var(--fxlat-color-grafito);
	margin-top: var(--fxlat-space-1);
}

/* Las tres cifras con el mismo tamano y el mismo peso, en el mismo orden siempre. */
.fxlat-contador__lista li + li .fxlat-contador__cifra {
	font-size: var(--fxlat-font-size-titulo-1);
}

.fxlat-contador__regla {
	font-size: var(--fxlat-font-size-nota);
	color: var(--fxlat-color-grafito);
	max-width: 76ch;
	margin: 0;
}

/* --- Filtros ------------------------------------------------------------ */

.fxlat-filtros {
	margin-bottom: var(--fxlat-space-6);
}

.fxlat-filtros__grupo {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fxlat-space-4);
	align-items: flex-end;
	margin-bottom: var(--fxlat-space-4);
}

.fxlat-filtros__campo {
	display: flex;
	flex-direction: column;
	gap: var(--fxlat-space-2);
	min-width: 180px;
}

.fxlat-filtros__campo label {
	font-family: var(--fxlat-font-family-dato);
	font-size: var(--fxlat-font-size-meta);
	letter-spacing: var(--fxlat-letter-spacing-meta);
	text-transform: uppercase;
	color: var(--fxlat-color-grafito);
}

.fxlat-filtros select {
	font-family: var(--fxlat-font-family-texto);
	font-size: var(--fxlat-font-size-dato);
	min-height: 44px;
	padding: var(--fxlat-space-2) var(--fxlat-space-3);
	border: var(--fxlat-border-width-hairline) solid var(--fxlat-color-linea-fuerte);
	border-radius: var(--fxlat-radius-none);
	background: var(--fxlat-color-papel-alt);
	color: var(--fxlat-color-tinta);
}

/* --- Tabla · escritorio -------------------------------------------------- */

.fxlat-bitacora {
	width: 100%;
	border-collapse: collapse;
	line-height: var(--fxlat-line-height-tabla);
	font-variant-numeric: var(--fxlat-font-variant-numeric-tabla);
}

.fxlat-bitacora caption {
	text-align: left;
	font-size: var(--fxlat-font-size-nota);
	color: var(--fxlat-color-grafito);
	margin-bottom: var(--fxlat-space-3);
}

.fxlat-bitacora thead th {
	font-family: var(--fxlat-font-family-dato);
	font-size: var(--fxlat-font-size-meta);
	font-weight: var(--fxlat-font-weight-dato-fuerte);
	letter-spacing: var(--fxlat-letter-spacing-meta);
	text-transform: uppercase;
	text-align: left;
	color: var(--fxlat-color-grafito);
	padding: var(--fxlat-tabla-padding-celda-y) var(--fxlat-tabla-padding-celda-x);
	border-bottom: var(--fxlat-tabla-cabecera);
	white-space: nowrap;
}

.fxlat-bitacora tbody th,
.fxlat-bitacora tbody td {
	padding: var(--fxlat-tabla-padding-celda-y) var(--fxlat-tabla-padding-celda-x);
	border-bottom: var(--fxlat-tabla-separador);
	vertical-align: top;
	text-align: left;
}

.fxlat-bitacora tbody th {
	font-weight: var(--fxlat-font-weight-texto-fuerte);
	max-width: 40ch;
}

.fxlat-bitacora th:first-child,
.fxlat-bitacora td:first-child {
	padding-left: 0;
}

.fxlat-bitacora th:last-child,
.fxlat-bitacora td:last-child {
	padding-right: 0;
}

.fxlat-bitacora__celda-dato {
	font-family: var(--fxlat-font-family-dato);
	font-size: var(--fxlat-font-size-dato);
	white-space: nowrap;
}

.fxlat-bitacora__tesis {
	display: block;
	font-size: var(--fxlat-font-size-nota);
	color: var(--fxlat-color-grafito);
	font-weight: var(--fxlat-font-weight-texto-regular);
	margin-top: var(--fxlat-space-1);
	max-width: 60ch;
}

/* Nota de archivo: visible en la propia fila, no en una pagina aparte. */
.fxlat-archivada {
	display: block;
	margin-top: var(--fxlat-space-2);
	padding: var(--fxlat-space-2) var(--fxlat-space-3);
	border-left: var(--fxlat-border-width-vela) solid var(--fxlat-color-acento-pizarra);
	background: var(--fxlat-color-papel-alt);
	font-size: var(--fxlat-font-size-nota);
	color: var(--fxlat-color-tinta);
}

.fxlat-archivada strong {
	font-family: var(--fxlat-font-family-dato);
	font-size: var(--fxlat-font-size-meta);
	letter-spacing: var(--fxlat-letter-spacing-meta);
	text-transform: uppercase;
	display: block;
	margin-bottom: var(--fxlat-space-1);
}

/* --- Tabla · movil, como registro apilado -------------------------------
   Por debajo de 768 px cada fila se convierte en un registro. La etiqueta de
   columna viaja con el dato en data-etiqueta, de modo que ninguna de las siete
   columnas desaparece y nada se sale del ancho de la pantalla.
   ------------------------------------------------------------------------ */

@media (max-width: 767px) {

	.fxlat-bitacora,
	.fxlat-bitacora thead,
	.fxlat-bitacora tbody,
	.fxlat-bitacora tr,
	.fxlat-bitacora th,
	.fxlat-bitacora td {
		display: block;
		width: auto;
	}

	/* La cabecera visual sobra: cada celda lleva su etiqueta. Sigue leyendola el lector de pantalla. */
	.fxlat-bitacora thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.fxlat-bitacora tbody tr {
		border-top: var(--fxlat-border-width-regla) solid var(--fxlat-color-linea-fuerte);
		padding-block: var(--fxlat-space-4);
	}

	.fxlat-bitacora tbody tr:last-child {
		border-bottom: var(--fxlat-border-width-regla) solid var(--fxlat-color-linea-fuerte);
	}

	.fxlat-bitacora tbody th,
	.fxlat-bitacora tbody td {
		display: grid;
		grid-template-columns: 11ch 1fr;
		gap: var(--fxlat-space-3);
		align-items: baseline;
		padding: var(--fxlat-space-2) 0;
		border-bottom: 0;
		max-width: none;
	}

	.fxlat-bitacora tbody th::before,
	.fxlat-bitacora tbody td::before {
		content: attr(data-etiqueta);
		font-family: var(--fxlat-font-family-dato);
		font-size: var(--fxlat-font-size-meta);
		font-weight: var(--fxlat-font-weight-dato-fuerte);
		letter-spacing: var(--fxlat-letter-spacing-meta);
		text-transform: uppercase;
		color: var(--fxlat-color-grafito);
		line-height: var(--fxlat-line-height-texto);
	}

	/* El titulo de la operacion encabeza el registro, a ancho completo. */
	.fxlat-bitacora tbody th[scope="row"] {
		grid-template-columns: 1fr;
		padding-top: 0;
	}

	.fxlat-bitacora tbody th[scope="row"]::before {
		margin-bottom: var(--fxlat-space-1);
	}

	.fxlat-bitacora__celda-dato {
		white-space: normal;
	}

	.fxlat-archivada {
		grid-column: 1 / -1;
	}
}

/* La tabla de la escalera y las tablas de contenido usan el mismo patron. */
@media (max-width: 767px) {

	.fxlat-tabla,
	.fxlat-tabla thead,
	.fxlat-tabla tbody,
	.fxlat-tabla tr,
	.fxlat-tabla th,
	.fxlat-tabla td {
		display: block;
		width: auto;
	}

	.fxlat-tabla thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	.fxlat-tabla tbody tr {
		border-top: var(--fxlat-border-width-regla) solid var(--fxlat-color-linea-fuerte);
		padding-block: var(--fxlat-space-4);
	}

	.fxlat-tabla tbody th,
	.fxlat-tabla tbody td {
		display: grid;
		grid-template-columns: 11ch 1fr;
		gap: var(--fxlat-space-3);
		padding: var(--fxlat-space-2) 0;
		border-bottom: 0;
	}

	.fxlat-tabla tbody th::before,
	.fxlat-tabla tbody td::before {
		content: attr(data-etiqueta);
		font-family: var(--fxlat-font-family-dato);
		font-size: var(--fxlat-font-size-meta);
		letter-spacing: var(--fxlat-letter-spacing-meta);
		text-transform: uppercase;
		color: var(--fxlat-color-grafito);
	}
}

/* --- Ficha de una operacion --------------------------------------------- */

.fxlat-operacion__datos {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fxlat-space-4);
	border-top: var(--fxlat-border-width-vela) solid var(--fxlat-color-linea-fuerte);
	border-bottom: var(--fxlat-border-width-hairline) solid var(--fxlat-color-linea);
	padding-block: var(--fxlat-space-5);
	margin-bottom: var(--fxlat-space-7);
}

@media (min-width: 768px) {
	.fxlat-operacion__datos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--fxlat-calle);
	}
}

@media (min-width: 1024px) {
	.fxlat-operacion__datos {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.fxlat-operacion__dato dt {
	font-family: var(--fxlat-font-family-dato);
	font-size: var(--fxlat-font-size-meta);
	font-weight: var(--fxlat-font-weight-dato-fuerte);
	letter-spacing: var(--fxlat-letter-spacing-meta);
	text-transform: uppercase;
	color: var(--fxlat-color-grafito);
	margin-bottom: var(--fxlat-space-2);
}

.fxlat-operacion__dato dd {
	margin: 0;
	font-family: var(--fxlat-font-family-dato);
	font-size: var(--fxlat-font-size-dato);
	font-variant-numeric: var(--fxlat-font-variant-numeric-tabla);
}

.fxlat-bloque-registro {
	margin-bottom: var(--fxlat-space-7);
}

.fxlat-bloque-registro h2 {
	font-size: var(--fxlat-font-size-titulo-3);
	padding-bottom: var(--fxlat-space-2);
	border-bottom: var(--fxlat-border-width-hairline) solid var(--fxlat-color-linea);
}