{{-- Tarjeta indicador (KPI) del kit ui-ctc: título, valor "de total", porcentaje, barra de avance y alerta.
     Es un botón: el filtro que aplica va en los atributos (wire:click…). Props:
     titulo, valor, total (opcional), porcentaje (número 0–100, opcional), color (hex de la barra),
     alerta (número; si > 0 sale el contador rojo), activo (bool: filtro aplicado), barra (bool),
     estatico (bool: solo muestra un dato, sin acción; se pinta como <div>), ayuda (texto bajo el valor, opcional),
     ayudaAviso (bool: la ayuda en ámbar, para una advertencia), href (la tarjeta es un enlace a otra pantalla),
     insignia (bool: muestra el % como insignia verde/ámbar de avance; false cuando el % es una proporción y solo
     va la barra). Slot opcional: enlaces o texto al pie (con estatico, para no anidar enlaces). --}}
@props(['titulo', 'valor', 'total' => null, 'porcentaje' => null, 'color' => null, 'alerta' => 0, 'activo' => false, 'barra' => true, 'estatico' => false, 'ayuda' => null, 'ayudaAviso' => false, 'href' => null, 'insignia' => true])
@php
    $pct = $porcentaje === null ? null : max(0, min(100, (float) $porcentaje));
    $color = $color ?: 'var(--acento)';
@endphp
@php $etiqueta = $estatico ? 'div' : ($href ? 'a' : 'button'); @endphp
<{{ $etiqueta }} @if ($etiqueta === 'button') type="button" data-indicador aria-pressed="{{ $activo ? 'true' : 'false' }}" @elseif ($href) href="{{ $href }}" data-indicador @endif
    {{ $attributes->merge(['class' => 'relative flex min-h-[124px] flex-col gap-2.5 rounded-xl border bg-[var(--superficie)] p-4 pb-3.5 text-left transition
        focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--acento)] '
        . ($activo ? 'border-[var(--acento)] shadow-[0_0_0_3px_var(--acento-suave)]' : 'border-[var(--borde)] shadow-sm' . ($estatico ? '' : ' hover:border-[var(--acento-borde)]'))]) }}>
    <span class="flex items-start justify-between gap-2">
        <span class="text-[11px] font-semibold uppercase leading-snug tracking-[0.06em] text-[var(--texto-suave)]">{{ $titulo }}</span>
        @if ($alerta > 0)
            <span title="Con pendientes" class="flex h-5 min-w-5 flex-none items-center justify-center rounded-full bg-red-500 px-1.5 text-[11px] font-bold text-white">{{ $alerta }}</span>
        @endif
    </span>
    <span class="mt-auto flex items-baseline gap-1.5">
        <span class="text-[28px] font-bold leading-none tabular-nums text-[var(--texto)]">{{ is_numeric($valor) ? number_format((float) $valor, 0, ',', '.') : $valor }}</span>
        @if ($total !== null)<span class="text-[12px] text-[var(--texto-tenue)]">de {{ is_numeric($total) ? number_format((float) $total, 0, ',', '.') : $total }}</span>@endif
        @if ($pct !== null && $insignia)
            <span class="ml-auto rounded-full px-2 py-0.5 text-[12px] font-semibold tabular-nums
                {{ $pct >= 1 ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300' : 'bg-amber-50 text-amber-700 dark:bg-amber-500/10 dark:text-amber-300' }}">{{ number_format($pct, 1, ',', '.') }}%</span>
        @endif
    </span>
    @if ($ayuda)<span class="text-[12px] {{ $ayudaAviso ? 'font-medium text-amber-700 dark:text-amber-300' : 'text-[var(--texto-tenue)]' }}">{{ $ayuda }}</span>@endif
    @if (trim($slot) !== '')<span class="text-[12px]">{{ $slot }}</span>@endif
    @if ($barra && $pct !== null)
        <span class="block h-1 overflow-hidden rounded-sm bg-[var(--superficie-2)]" aria-hidden="true">
            <span class="block h-full rounded-sm" style="width: {{ $pct }}%; background: {{ $color }};"></span>
        </span>
    @endif
</{{ $etiqueta }}>