/* Componente blog-paginacion (contenidos). Solo tokens de style.css.
 * Misma forma que la paginación de la búsqueda (T-05): cuadros de 44px con
 * borde, la página actual rellena. */

.pf-blog-paginacion {
    margin-top: var(--pf-space-xl);
}

.pf-blog-paginacion__lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--pf-space-2xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-blog-paginacion__pagina {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 var(--pf-space-xs);
    font-weight: var(--pf-weight-bold);
    color: var(--pf-color-heading);
    text-decoration: none;
    border: 1px solid var(--pf-color-border);
    border-radius: var(--pf-radius-control);
}

a.pf-blog-paginacion__pagina:hover {
    color: var(--pf-color-brand-strong);
    background-color: var(--pf-color-brand-soft);
    border-color: var(--pf-color-brand-strong);
}

.pf-blog-paginacion__pagina--actual {
    color: var(--pf-color-on-accent);
    background-color: var(--pf-color-brand-strong);
    border-color: var(--pf-color-brand-strong);
}

.pf-blog-paginacion__puntos {
    padding-inline: var(--pf-space-3xs);
    color: var(--pf-color-text-muted);
}