{{-- Um número da régua: valor grande + rótulo pequeno, cor por significado. --}}
@props(['valor', 'rotulo', 'cor' => '#111827'])
<div class="px-3 py-2 bg-white border rounded-lg">
    <p class="text-lg font-bold" style="color:{{ $cor }}">{{ $valor }}</p>
    <p class="text-[11px] text-gray-500">{{ $rotulo }}</p>
</div>