/* ── CONFIGURACIÓN GLOBAL Y VARIABLES ── */
:root {
     --white: #ffffff;
     --off-white: #f8f8f6;
     --gray-50: #f5f5f4;
     --gray-100: #eeeeec;
     --gray-200: #ddddd9;
     --gray-300: #c4c4be;
     --gray-400: #9d9d96;
     --gray-500: #737370;
     --gray-700: #3d3d3a;
     --gray-900: #1a1a18;
     --accent: #2d2d2a;
     --accent-light: #4a4a46;
     --gold: #b8935a;
     --gold-light: #d4aa72;
     --danger: #c0392b;
     --success-color: #27ae60;
     --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
     --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
     --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.06);
     --radius: 12px;
     --radius-sm: 8px;
}

* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}

body {
     font-family: 'DM Sans', sans-serif;
     background: var(--off-white);
     color: var(--gray-900);
     min-height: 100vh;
}


/* ═══════════════════════════════════════════════════════
   PAGINACIÓN PERSONALIZADA - Bootstrap 5
   Tema: Elegante Blanco/Gris para VMS
   ═══════════════════════════════════════════════════════ */

:root {
     --white: #ffffff;
     --gray-50: #f5f5f4;
     --gray-100: #eeeeec;
     --gray-200: #ddddd9;
     --gray-300: #c4c4be;
     --gray-400: #9d9d96;
     --gray-500: #737370;
     --gray-700: #3d3d3a;
     --accent: #2d2d2a;
     --accent-light: #4a4a46;
     --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
     --radius-sm: 8px;
}

.pagination {
     display: flex;
     gap: 0.4rem;
     margin: 0;
     padding: 0;
     list-style: none;
}

.page-item {
     list-style: none;
}

.page-link {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     min-width: 38px;
     height: 38px;
     padding: 0.5rem 0.75rem;
     font-size: 0.875rem;
     font-weight: 500;
     color: var(--gray-500);
     background: var(--white);
     border: 1px solid var(--gray-200);
     border-radius: var(--radius-sm);
     transition: all 0.2s ease;
     text-decoration: none;
     font-family: 'DM Sans', sans-serif;
}

.page-link:hover {
     color: var(--accent);
     background: var(--gray-50);
     border-color: var(--gray-300);
     transform: translateY(-1px);
     box-shadow: var(--shadow-sm);
}

.page-link:focus {
     z-index: 3;
     outline: none;
     box-shadow: 0 0 0 3px rgba(45, 45, 42, 0.1);
}

.page-item.active .page-link {
     z-index: 1;
     color: white;
     background: var(--accent);
     border-color: var(--accent);
     font-weight: 600;
     box-shadow: 0 2px 8px rgba(45, 45, 42, 0.25);
}

.page-item.active .page-link:hover {
     background: var(--accent-light);
     border-color: var(--accent-light);
     transform: translateY(-1px);
}

.page-item.disabled .page-link {
     color: var(--gray-300);
     background: var(--gray-50);
     border-color: var(--gray-200);
     cursor: not-allowed;
     pointer-events: none;
}

/* Flechas de navegación */
.page-item:first-child .page-link,
.page-item:last-child .page-link {
     font-weight: 600;
     min-width: 42px;
}

.page-item:first-child .page-link {
     padding-left: 0.6rem;
}

.page-item:last-child .page-link {
     padding-right: 0.6rem;
}

/* Puntos suspensivos */
.page-item.disabled .page-link span {
     color: var(--gray-300);
}

/* Contenedor de paginación */
.pagination-wrapper {
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: 2.5rem;
     padding: 1.5rem 0;
     border-top: 1px solid var(--gray-100);
}

.pagination-info {
     font-size: 0.85rem;
     color: var(--gray-400);
     margin-bottom: 1rem;
     text-align: center;
}

.pagination-info strong {
     color: var(--gray-700);
     font-weight: 600;
}

/* Responsive para paginación */
@media (max-width: 576px) {
     .page-link {
          min-width: 34px;
          height: 34px;
          padding: 0.4rem 0.6rem;
          font-size: 0.8rem;
     }

     .page-item:first-child .page-link,
     .page-item:last-child .page-link {
          min-width: 38px;
     }

     .pagination {
          gap: 0.3rem;
     }

     .pagination-info {
          font-size: 0.8rem;
     }
}