.lt-wrap {
	--lt-acento: #e87a1e;
	--lt-texto: #1a1a1a;
	--lt-suave: #555;
	--lt-linea: #ececec;
	--lt-fondo: #fafaf8;
	font-family: inherit;
	color: var(--lt-texto);
	margin: 32px 0;
}

.lt-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.lt-title {
	margin: 0;
	font-size: 20px;
	line-height: 1.3;
}

.lt-search {
	flex: 0 1 280px;
	padding: 10px 14px;
	border: 1px solid var(--lt-linea);
	border-radius: 6px;
	font-size: 14px;
	background: #fff;
	color: var(--lt-texto);
}

.lt-search:focus {
	outline: none;
	border-color: var(--lt-acento);
	box-shadow: 0 0 0 3px rgba(232, 122, 30, .15);
}

.lt-scroll {
	overflow-x: auto;
	border: 1px solid var(--lt-linea);
	border-radius: 8px;
	background: #fff;
}

.lt-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.lt-table th,
.lt-table td {
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid var(--lt-linea);
	vertical-align: top;
}

.lt-table thead th {
	background: var(--lt-fondo);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--lt-suave);
	white-space: nowrap;
	position: sticky;
	top: 0;
	z-index: 1;
}

.lt-wrap[data-orden="1"] thead th {
	cursor: pointer;
	user-select: none;
}

.lt-wrap[data-orden="1"] thead th span::after {
	content: "";
	display: inline-block;
	margin-left: 6px;
	border: 4px solid transparent;
	border-top-color: #cfd4d8;
	transform: translateY(2px);
}

.lt-wrap[data-orden="1"] thead th.lt-asc span::after {
	border-top-color: transparent;
	border-bottom-color: var(--lt-acento);
	transform: translateY(-3px);
}

.lt-wrap[data-orden="1"] thead th.lt-desc span::after {
	border-top-color: var(--lt-acento);
}

.lt-table tbody tr:last-child td {
	border-bottom: 0;
}

.lt-table tbody tr:hover td {
	background: #fffaf5;
}

.lt-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px;
}

.lt-count {
	margin: 0;
	font-size: 13px;
	color: var(--lt-suave);
}

.lt-pager {
	display: flex;
	gap: 6px;
}

.lt-pager button {
	min-width: 34px;
	padding: 6px 10px;
	border: 1px solid var(--lt-linea);
	border-radius: 5px;
	background: #fff;
	color: var(--lt-texto);
	font-size: 13px;
	cursor: pointer;
}

.lt-pager button:hover:not(:disabled) {
	border-color: var(--lt-acento);
	color: var(--lt-acento);
}

.lt-pager button[aria-current="true"] {
	background: var(--lt-acento);
	border-color: var(--lt-acento);
	color: #fff;
}

.lt-pager button:disabled {
	opacity: .45;
	cursor: default;
}

.lt-vacio td {
	padding: 24px 16px;
	text-align: center;
	color: var(--lt-suave);
}

/* En móvil cada fila se apila como ficha, con la cabecera como etiqueta. */
@media (max-width: 640px) {
	.lt-scroll {
		border: 0;
		background: transparent;
	}

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

	.lt-table,
	.lt-table tbody,
	.lt-table tr,
	.lt-table td {
		display: block;
		width: 100%;
	}

	.lt-table tr {
		border: 1px solid var(--lt-linea);
		border-radius: 8px;
		background: #fff;
		margin-bottom: 12px;
		padding: 4px 0;
	}

	.lt-table td {
		border-bottom: 1px solid var(--lt-linea);
		padding: 10px 14px;
	}

	.lt-table tr td:last-child {
		border-bottom: 0;
	}

	.lt-table td[data-label]:not([data-label=""])::before {
		content: attr(data-label);
		display: block;
		font-size: 11px;
		letter-spacing: .04em;
		text-transform: uppercase;
		color: var(--lt-suave);
		margin-bottom: 3px;
	}
}

/* Etiquetas para una columna de estado (disponible, vendido, separado...) */
.lt-estado {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	white-space: nowrap;
	background: #f0f0ec;
	color: var(--lt-suave);
}

.lt-estado[data-estado="disponible"] {
	background: #e8f5ec;
	color: #1d7a41;
}

.lt-estado[data-estado="vendido"] {
	background: #f3f3f3;
	color: #777;
}

.lt-estado[data-estado="separado"],
.lt-estado[data-estado="reservado"] {
	background: #fdf0e2;
	color: #b45c0c;
}