{{--
	Agentes, navieras y aduanas. Van en HTML y no en Highcharts: son listas
	ordenadas de etiqueta + barra + cifra, es decir tablas (§4.2).
--}}
<div class="{{ count($bloques) > 1 ? 'rejilla-2' : '' }}">

	@foreach ($bloques as $bloque)
		<div class="panel" wire:key="part-{{ $bloque['codigo'] }}">

			<div style="display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap;">
				<div style="display:flex; flex-direction:column; gap:3px;">
					<div style="font-size:15px; font-weight:600;">{{ $bloque['titulo'] }}</div>
					@if ($bloque['subtitulo'])
						<div style="font-size:12px; color:var(--texto-tenue);">{{ $bloque['subtitulo'] }}</div>
					@endif
				</div>
				@if (!$bloque['vacia'])
					<div class="mono" style="font-size:12px; color:var(--texto-tenue);">
						{{ number_format($bloque['total'], 0, ',', '.') }}
						{{ $bloque['unidad'] === 'contenedores' ? 'contenedores' : 'operaciones' }}
					</div>
				@endif
			</div>

			@if ($bloque['vacia'])
				<div class="vacio">Sin datos en el periodo</div>
			@elseif ($bloque['tipo'] === 'tabla')
				<table class="tabla">
					<thead>
						<tr>
							<th style="width:150px;">Aduana</th>
							<th>Participación</th>
							<th class="num" style="width:78px;">Oper.</th>
							<th class="num" style="width:62px;">%</th>
						</tr>
					</thead>
					<tbody>
						@foreach ($bloque['filas'] as $fila)
							<tr>
								<td>{{ $fila['nombre'] }}</td>
								<td>
									<div class="pista">
										<div class="llenado"
											style="--ancho: {{ $fila['ancho'] }}%; background: var({{ $regimen === 'E' ? '--secundario' : '--primario' }});">
										</div>
									</div>
								</td>
								<td class="num mono">{{ number_format($fila['valor'], 0, ',', '.') }}</td>
								<td class="num mono" style="color:var(--texto-tenue);">
									{{ number_format($fila['porcentaje'], 1, ',', '.') }}%
								</td>
							</tr>
						@endforeach
					</tbody>
				</table>
			@else
				<div style="display:flex; flex-direction:column; gap:10px;">
					@foreach ($bloque['filas'] as $fila)
						<div style="display:flex; align-items:center; gap:10px;">
							<div style="width:190px; font-size:13px; line-height:1.3;">{{ $fila['nombre'] }}</div>
							<div class="pista" style="flex:1;">
								<div class="llenado"
									style="--ancho: {{ $fila['ancho'] }}%; background: var({{ $regimen === 'E' ? '--secundario' : '--primario' }});">
								</div>
							</div>
							<div class="mono" style="width:52px; text-align:right; font-size:13px;">
								{{ number_format($fila['valor'], 0, ',', '.') }}
							</div>
							<div class="mono" style="width:50px; text-align:right; font-size:13px; color:var(--texto-tenue);">
								{{ number_format($fila['porcentaje'], 1, ',', '.') }}%
							</div>
						</div>
					@endforeach
				</div>
			@endif

		</div>
	@endforeach

</div>