@props(['rotulo', 'valor', 'explicacao' => null, 'nota' => null, 'tom' => 'text-tinta'])

{{-- Um número sem comparativo: o rótulo em versalete, o valor grande e, quando
     houver, o "?" que diz de onde ele vem. Onde existe base de comparação, o
     cartão certo é <x-cartao-comparado>. --}}
<div class="flex flex-col rounded-lg border border-fio bg-superficie p-4">
    <dt class="flex items-center gap-1.5 text-[0.7rem] font-semibold uppercase tracking-[0.08em] text-suave">
        {{ $rotulo }}
        <x-explicacao :chave="$explicacao"/>
    </dt>
    <dd class="mt-1.5 font-display text-2xl font-semibold tracking-tight tabular-nums {{ $tom }}">{{ $valor }}</dd>
    @if ($nota)
        <dd class="mt-auto pt-2 text-xs text-suave">{{ $nota }}</dd>
    @endif
</div>