/* Paginador común de las tablas del panel (assets/pager.js). */
.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 12px 16px;
    font-size: .8rem;
    color: var(--muted);
    border-top: 1px solid var(--line);
    background: var(--surface);
}
.pager.hidden { display: none; }
.pager b { color: var(--ink); font-weight: 600; }

.pg-pages { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pg-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.pg-btn:hover:not(:disabled):not(.on) { background: var(--hover); border-color: var(--line-2); }
.pg-btn.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); cursor: default; }
.pg-btn:disabled { opacity: .4; cursor: not-allowed; }
.pg-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.pg-gap { padding: 0 4px; }

.pg-size { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: inherit; font-weight: 400; color: inherit; }
.pg-size select {
    width: auto;
    height: 32px;
    padding: 0 26px 0 10px;
    font-size: .8rem;
}

@media (max-width: 640px) {
    .pager { justify-content: center; }
    .pg-info { width: 100%; text-align: center; }
}

/* La barra de arriba separa hacia abajo (la de abajo, hacia arriba). */
.pager-top { border-top: 0; border-bottom: 1px solid var(--line); }

/* Solo la primera carga anima las filas (pager.js marca la tabla después);
   buscar o paginar repinta sin animación. Igual para las tarjetas de totales. */
table.pg-settled tbody tr,
.stats-settled .stat { animation: none; }