{{--
	Las tarjetas de serie. Cada una sustituye a un par column+pie de la V1: el
	gráfico es la barra apilada mensual y la leyenda de abajo lleva el valor y el
	porcentaje anual que antes exigía una dona aparte (§2.3).
--}}
{{--
	`data-regimen` en la raíz dice al dibujante del shell qué rampa de color usar
	para todo lo que hay dentro. Sin ese alcance, el bloque de exportaciones
	repintaba las leyendas del de importaciones con la rampa de arcilla.

	Aquí NO va ningún <script>: Livewire no vuelve a ejecutar los scripts que
	están dentro de un componente cuando lo re-renderiza, así que al filtrar se
	perdían los gráficos. Todo el dibujo vive en el shell y se relanza con el
	hook `message.processed`.
--}}
<div id="series-{{ $regimen }}" data-regimen="{{ $regimen }}"
	style="display:flex; flex-direction:column; gap:18px;">

	@if (count($tarjetas) > 0)
		{{-- Con una sola tarjeta ocupa la fila entera: es el caso de exportaciones,
		     donde el gráfico «Tipos de carga» del diseño no existe en el ERP
		     (decisión O). --}}
		<div class="{{ count($tarjetas) > 1 ? 'rejilla-2' : '' }}">
			@foreach ($tarjetas as $tarjeta)
				<div class="panel" style="gap:16px;" wire:key="serie-{{ $tarjeta['codigo'] }}">
					<div style="display:flex; flex-direction:column; gap:3px;">
						<div style="font-size:15px; font-weight:600;">{{ $tarjeta['titulo'] }}</div>
						@if ($tarjeta['subtitulo'])
							<div style="font-size:12px; color:var(--texto-tenue);">{{ $tarjeta['subtitulo'] }}</div>
						@endif
					</div>

					@if ($tarjeta['vacia'])
						<div class="vacio">Sin datos en el periodo</div>
					@else
						<div id="gr-{{ $tarjeta['codigo'] }}" style="width:100%; min-height:280px;"
							data-configuracion="{{ json_encode($tarjeta['configuracion']) }}"></div>

						<div style="display:flex; flex-direction:column; gap:7px; border-top:1px solid var(--borde-tenue); padding-top:12px;">
							@foreach ($tarjeta['participacion'] as $indice => $parte)
								<div style="display:flex; align-items:center; gap:9px; font-size:13px;">
									<i class="marca-serie" data-indice="{{ $indice }}"
										style="width:9px; height:9px; border-radius:2px; display:block; flex:none;"></i>
									<span style="flex:1;">{{ $parte['nombre'] }}</span>
									<span class="mono">{{ number_format($parte['valor'], 0, ',', '.') }}</span>
									<span class="mono" style="color:var(--texto-tenue); width:48px; text-align:right;">
										{{ number_format($parte['porcentaje'], 1, ',', '.') }}%
									</span>
								</div>
							@endforeach
						</div>
					@endif
				</div>
			@endforeach
		</div>
	@endif

	{{-- Mapas --}}
	@foreach ($mapas as $mapa)
		<div class="panel" wire:key="mapa-{{ $mapa['codigo'] }}">
			<div style="display:flex; justify-content:space-between; align-items:baseline; gap:16px;">
				<div style="font-size:15px; font-weight:600;">{{ $mapa['titulo'] }}</div>
				@if (!$mapa['vacia'])
					<div class="mono" style="font-size:12px; color:var(--texto-tenue);">
						1 → {{ number_format($mapa['maximo'], 0, ',', '.') }} operaciones
					</div>
				@endif
			</div>

			@if ($mapa['vacia'])
				<div class="vacio">Sin países registrados en el periodo</div>
			@else
				<div id="mp-{{ $mapa['codigo'] }}" style="width:100%; height:300px;"
					data-mapa="{{ json_encode($mapa['datos']) }}"
					data-regimen="{{ $regimen }}"></div>

				<div style="display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--borde-tenue); padding-top:12px;">
					@foreach ($mapa['principales'] as $pais)
						<div style="display:flex; align-items:center; gap:10px;">
							<div style="width:150px; font-size:13px;">{{ $pais['nombre'] }}</div>
							<div class="pista" style="flex:1; height:9px;">
								<div class="llenado"
									style="--ancho: {{ $mapa['maximo'] > 0 ? round($pais['total'] / $mapa['maximo'] * 100, 1) : 0 }}%; background: var({{ $regimen === 'E' ? '--secundario' : '--primario' }});">
								</div>
							</div>
							<div class="mono" style="width:52px; text-align:right; font-size:13px;">
								{{ number_format($pais['total'], 0, ',', '.') }}
							</div>
						</div>
					@endforeach
				</div>
			@endif
		</div>
	@endforeach



</div>