<div class="historial-container">
	<div class="historial-header">
		<mat-icon>history</mat-icon>
		<h4>Historial de Cambios</h4>
	</div>

	<div *ngIf="isLoading" class="loading-container">
		<mat-spinner diameter="30"></mat-spinner>
		<span>Cargando historial...</span>
	</div>

	<div *ngIf="error" class="error-container">
		<mat-icon>error_outline</mat-icon>
		<span>{{ error }}</span>
	</div>

	<div *ngIf="!isLoading && !error && historial.length === 0" class="empty-container">
		<mat-icon>inbox</mat-icon>
		<span>No hay cambios registrados</span>
	</div>

	<div *ngIf="!isLoading && historial.length > 0" class="historial-list">
		<div class="historial-item" *ngFor="let item of historial">
			<div class="item-icon" [style.background-color]="getColorAccion(item.accion)">
				<mat-icon>{{ getIconoAccion(item.accion) }}</mat-icon>
			</div>
			<div class="item-content">
				<div class="item-header">
					<span class="usuario">{{ item.usuario_completo }}</span>
					<span class="tiempo">{{ item.tiempo_transcurrido }}</span>
				</div>
				<div class="item-body">
					<span *ngIf="item.accion === 'crear'" class="accion-texto">
						Creó el servicio
					</span>
					<span *ngIf="item.accion === 'actualizar'" class="accion-texto">
						Cambió <strong>{{ item.campo_legible }}</strong>
						de <span class="valor-anterior">{{ item.valor_anterior || 'Sin valor' }}</span>
						a <span class="valor-nuevo">{{ item.valor_nuevo }}</span>
					</span>
					<span *ngIf="item.accion === 'eliminar'" class="accion-texto">
						Eliminó el servicio
					</span>
				</div>
			</div>
		</div>
	</div>
</div>
