/* Componente contador (shell, #53). Solo tokens de style.css.
 * La cifra, en verde ACANDA (texto ≥ 24px: 3:1 en los dos temas) y con cifras
 * tabulares, para que el ancho no baile mientras cuenta. */

.pf-contador {
    display: grid;
    justify-items: start;
    gap: var(--pf-space-2xs);
}

.pf-contador--tarjeta {
    padding: var(--pf-space-md);
    background-color: var(--pf-color-surface);
    border: 1px solid var(--pf-color-border);
    border-radius: var(--pf-radius-card);
    box-shadow: var(--pf-shadow-md);
}

.pf-contador__icono {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    color: var(--pf-color-brand-strong);
    background-color: var(--pf-color-brand-soft);
    border-radius: var(--pf-radius-round);
}

.pf-contador__cifra {
    display: grid;
    gap: var(--pf-space-3xs);
    margin: 0;
}

.pf-contador__valor {
    font-size: var(--pf-text-4xl);
    font-weight: var(--pf-weight-black);
    font-variant-numeric: tabular-nums;
    line-height: var(--pf-leading-tight);
    letter-spacing: -0.01em;
    color: var(--pf-color-brand);
}

.pf-contador__etiqueta {
    font-size: var(--pf-text-md);
    font-weight: var(--pf-weight-bold);
    line-height: var(--pf-leading-snug);
    color: var(--pf-color-heading);
}

.pf-contador__descripcion {
    margin: 0;
    font-size: var(--pf-text-sm);
    color: var(--pf-color-text-muted);
}