/* =========================================================
   FOOTER (paginación) — estilo “header invertido”
   Mantiene el contenido igual (select + pagination + pageinfo)
   ========================================================= */

/* ===== Footer container (integrado en el board como el header) ===== */
.cards-board-footer{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;

  /* igual que el header */
  padding: 10px 12px;

  /* ✅ pegado al board, no como tarjeta separada */
  margin-top: 0;
  border-radius: 0;

  /* ✅ equivalente al border-bottom del header, pero arriba */
  border-top: 1px solid rgba(255,255,255,.08);

  /* ✅ header invertido (el header usa 180deg) */
  background: linear-gradient(0deg, rgba(255,255,255,.03), rgba(255,255,255,0));

  /* ✅ quitamos “glass” para que no parezca otro componente */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* bloque izquierdo (select + pagination) — más integrado, menos “flotante” */
.cards-footer-controls{
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);

  /* ✅ más a juego con el board */
  background: rgba(255,255,255,.03);
  box-shadow: none;
}

/* ===== Page info a juego (integrado) ===== */
.cards-board-pageinfo{
  font-size: 12px;
  color: rgba(255,255,255,.72);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);

  /* ✅ más a juego con el board */
  background: rgba(255,255,255,.03);
  white-space: nowrap;

  box-shadow: none;
}

/* ===== Select oscuro (dbc.Select -> .form-select) ===== */
.cards-page-size.form-select,
#cards-left-page-size.form-select{
  background-color: rgba(0,0,0,.35) !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 999px !important;

  padding: 6px 34px 6px 12px !important;
  box-shadow: none !important;
}

/* hover/focus del select */
.cards-page-size.form-select:hover,
#cards-left-page-size.form-select:hover{
  border-color: rgba(0,195,255,.35) !important;
}

.cards-page-size.form-select:focus,
#cards-left-page-size.form-select:focus{
  border-color: rgba(0,195,255,.60) !important;
  box-shadow: 0 0 0 .18rem rgba(0,195,255,.18) !important;
}

/* ===== Pagination oscura (dbc.Pagination -> ul.pagination li.page-item a.page-link) ===== */
.cards-pagination.pagination{
  margin: 0 !important;
  gap: 6px;                 /* separación entre “chips” */
}

.cards-pagination .page-item .page-link{
  background: rgba(0,0,0,.30) !important;
  color: rgba(255,255,255,.85) !important;

  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 999px !important;

  padding: 6px 10px !important;
  min-width: 34px;
  text-align: center;

  transition: transform .08s ease, border-color .15s ease, background .15s ease;
  box-shadow: none !important;
}

.cards-pagination .page-item .page-link:hover{
  border-color: rgba(0,195,255,.35) !important;
  background: rgba(0,195,255,.10) !important;
  transform: translateY(-1px);
}

.cards-pagination .page-item.active .page-link{
  background: rgba(0,195,255,.18) !important;
  border-color: rgba(0,195,255,.70) !important;
  color: rgba(255,255,255,.95) !important;
  box-shadow: 0 0 0 .16rem rgba(0,195,255,.14) !important;
}

.cards-pagination .page-item.disabled .page-link{
  opacity: .45 !important;
  cursor: not-allowed;
}

/* si quieres que First/Last/Prev/Next no sean “cuadrados raros” */
.cards-pagination .page-link:focus{
  box-shadow: 0 0 0 .16rem rgba(0,195,255,.14) !important;
}