<div>
    {{-- FILTROS --}}
    <div class="bg-white shadow-sm rounded-lg p-4 mb-4">
        <div class="flex flex-col md:flex-row items-center gap-4">
            <div class="flex items-center gap-2">
                <button wire:click="mesAnterior" class="p-2 hover:bg-gray-100 rounded">◀</button>
                <h2 class="text-lg font-bold capitalize min-w-[180px] text-center">{{ $mesLabel }}</h2>
                <button wire:click="mesSiguiente" class="p-2 hover:bg-gray-100 rounded">▶</button>
            </div>
            <div class="flex gap-3 flex-1">
                <select wire:model.live="filtroUsuario" class="text-sm border-gray-300 rounded-md shadow-sm">
                    <option value="">Todos los usuarios</option>
                    @foreach($usuarios as $u)
                        <option value="{{ $u->id }}">{{ $u->name }}</option>
                    @endforeach
                </select>
                <select wire:model.live="filtroEstado" class="text-sm border-gray-300 rounded-md shadow-sm">
                    <option value="">Todos los estados</option>
                    @foreach($estados as $key => $label)
                        <option value="{{ $key }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
        {{-- CALENDARIO --}}
        <div class="lg:col-span-2 bg-white shadow-sm rounded-lg p-4">
            <div class="grid grid-cols-7 gap-px bg-gray-200 rounded overflow-hidden">
                @foreach(['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'] as $dia)
                <div class="bg-gray-100 text-center text-xs font-semibold py-2 text-gray-600">{{ $dia }}</div>
                @endforeach

                @foreach($dias as $dia)
                <div class="bg-white min-h-[80px] p-1 {{ !$dia['esMesActual'] ? 'opacity-40' : '' }} {{ $dia['esHoy'] ? 'ring-2 ring-indigo-500 ring-inset' : '' }}">
                    <div class="flex items-center justify-between mb-1">
                        <span class="text-xs font-medium {{ $dia['esHoy'] ? 'text-indigo-600 font-bold' : 'text-gray-500' }}">
                            {{ $dia['fecha']->day }}
                        </span>
                        @if($dia['esLunesOJueves'] && $dia['esMesActual'])
                        <span class="text-[9px] bg-blue-100 text-blue-600 px-1 rounded">Rev</span>
                        @endif
                    </div>
                    @foreach($dia['procesos']->take(3) as $p)
                    <a href="{{ route('procesos.show', $p) }}"
                        class="block text-[10px] px-1 py-0.5 mb-0.5 rounded truncate
                        {{ $p->fecha_vencimiento_terminos->isPast() ? 'bg-red-100 text-red-700' : ($p->fecha_vencimiento_terminos->isToday() ? 'bg-orange-100 text-orange-700' : 'bg-yellow-100 text-yellow-700') }}">
                        {{ $p->radicado_interno }}
                    </a>
                    @endforeach
                    @if($dia['procesos']->count() > 3)
                    <span class="text-[9px] text-gray-400">+{{ $dia['procesos']->count() - 3 }} más</span>
                    @endif
                </div>
                @endforeach
            </div>

            <div class="mt-3 flex gap-4 text-xs text-gray-500">
                <span><span class="inline-block w-3 h-3 bg-red-100 rounded mr-1"></span>Vencido</span>
                <span><span class="inline-block w-3 h-3 bg-orange-100 rounded mr-1"></span>Vence hoy</span>
                <span><span class="inline-block w-3 h-3 bg-yellow-100 rounded mr-1"></span>Próximo</span>
                <span><span class="inline-block w-3 h-3 bg-blue-100 rounded mr-1 text-center text-blue-600" style="font-size:8px">Rev</span>Revisión L/J</span>
            </div>
        </div>

        {{-- PANEL LATERAL: Alertas del mes --}}
        <div class="bg-white shadow-sm rounded-lg p-4">
            <h3 class="font-semibold text-gray-800 mb-3">🔔 Alertas del Mes</h3>
            <div class="space-y-2 max-h-[500px] overflow-y-auto">
                @forelse($alertasMes as $alerta)
                <div class="p-2 rounded-lg border text-sm {{ match($alerta->prioridad) {
                    'critica' => 'border-red-300 bg-red-50',
                    'alta' => 'border-orange-300 bg-orange-50',
                    'media' => 'border-yellow-300 bg-yellow-50',
                    default => 'border-gray-200 bg-gray-50',
                } }}">
                    <div class="flex items-center justify-between">
                        <span class="text-xs font-medium">{{ $alerta->tipo_label }}</span>
                        <span class="text-[10px] text-gray-400">{{ $alerta->fecha_disparo->format('d/m') }}</span>
                    </div>
                    <div class="text-xs mt-1">{{ $alerta->titulo }}</div>
                    @if($alerta->proceso)
                    <a href="{{ route('procesos.show', $alerta->proceso) }}" class="text-[10px] text-indigo-600 hover:underline">
                        Ver proceso →
                    </a>
                    @endif
                </div>
                @empty
                <div class="text-center text-gray-400 text-sm py-4">Sin alertas este mes.</div>
                @endforelse
            </div>
        </div>
    </div>
</div>
