html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.main-content-container {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 100vh;
}

.iconR:hover {
    color: #0066cc;
}

.rounded-pill-all {
    border-radius: 40px;
}

.bg-blue {
    background-color: #003366 !important;
}

.bg-gray {
    background-color: #8d8d8d !important;
}

.text-white {
    color: white !important;
}

.body-content {
    background-image: var(--imagen-de-fondo);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow-y: auto;
}

/* Estilo para el fondo gradiente y la forma principal */
.login-bg-shape {
    background: #003467;
    background: linear-gradient(180deg, rgba(0, 52, 103, 1) 0%, rgba(1, 77, 154, 1) 50%, rgba(0, 101, 202, 1) 100%);
    min-height: 100vh;
    clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%);
}

/* En móvil, elimina la forma para evitar que se corte */
@media (max-width: 768px) {
    .login-bg-shape {
        clip-path: none;
    }
}

/* Clases adicionales de utilidad para reemplazar estilos en línea */
.card-login {
    border-radius: 20px;
    border: none;
}

.btn-primary-rounded {
    border-radius: 50px;
}

.input-sin-borde-left {
    border-left: none;
}

.input-round {
    border-radius: 40px 40px 40px 40px !important;
    border-left: none;
}

.group-input-right {
    border-radius: 40px 0px 0px 40px !important;
    border-right: none;
}

.dl-horizontal dt {
    white-space: normal;
}

.color-ACNativa {
    color: #0066cc !important;
}

.color-AONativa {
    color: #003366 !important;
}


.color-Vbanesco {
    color: #046844 !important;
}

.color-Abanesco {
    color: #003366 !important;
}

.color-Rbanesco {
    color: #c7090c !important;
}

.group-input-right {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0px solid #ced4da;
    background-color: #fff;
}

.group-input-left {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 0px solid #ced4da;
    background-color: #fff;
}

.input-sin-borde-id {
    border-left: 0px solid #ced4da;
    border-right: 0px solid #ced4da;
}

.input-sin-borde-i {
    border-left: 0px solid #ced4da;
}

.input-sin-borde-d {
    border-right: 0px solid #ced4da;
}

.errorI {
    border-color: red;
}

.CorrectI {
    border-color: green;
}

.fs-12px {
    font-size: 12px;
}

/* Cambio de clave de Acceso */
.chkicon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    text-align: center;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.chkitrue {
    background-color: #007953 !important;
    border: 1px;
    border-color: black;
    content: "\2713";
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    color: white;
}

    .chkitrue::before {
        content: "\2713";
    }

.chkifalse {
    background-color: #CC0000 !important;
    content: "\0078";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border-radius: 50%;
    color: white;
}

    .chkifalse::before {
        content: "\0078";
    }

.card- {
    padding-top: 0px;
    border: 0px;
    box-shadow: rgba(4, 102, 203, 0.35) 0px 5px 15px;
}

.alert-pin {
    padding: 10px;
    display: none;
    font-size: 0.85rem;
}

.px-14 {
    padding-right: 14% !important;
    padding-left: 14% !important;
}

.txtAyuda {
    font-size: 0.85rem;
    width: 98%;
}

.flexNac {
    flex: 0.1 0 auto !important;
}

.LabelError {
    display: none;
    margin-bottom: 1px;
}

.CTxtD {
    width: 100%;
    background-color: #cbcbcb !important;
}

.dispin {
    background-color: #cbcbcb !important;
}

.btn-primary2 {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0066cc;
    --bs-btn-border-color: #0066cc;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #003366;
    --bs-btn-hover-border-color: #003366;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #003366;
    --bs-btn-active-border-color: #003366;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #003366;
    --bs-btn-disabled-border-color: #003366;
}

.ToUpper {
    text-transform: uppercase;
}

.Nav {
    font-family: Helvetica;
    font-size: 14px;
    color: #333333;
    line-height: 16px;
    margin-bottom: 8px;
}

.blink {
    animation-duration: 1s;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

@keyframes blink {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}




/* Estilos generales */
.select-round-left {
    border-radius: 40px 0px 0px 40px !important;
}

.input-round-right {
    border-radius: 0px 40px 40px 0px !important;
}

.btn-responsive {
    background-color: #0066cc;
    color: white;
    border-radius: 40px;
    width: 100%; /* El botón ocupa todo el ancho en móviles */
}

/* Manejo del icono del calendario */
.date-picker-container {
    position: relative;
}

.calendar-icon {
    left: 10px;
}

/* Media Query para dispositivos más pequeños */
@media (max-width: 767.98px) {
    /* En pantallas pequeñas, los elementos del grupo se ajustan */
    .input-group-responsive {
        flex-wrap: nowrap;
    }

    /* El input de la cédula se ajusta para que todo quepa */
    .input-round-right {
        width: calc(100% - 60px);
    }

    /* Las etiquetas y los campos de fecha se ajustan para móviles */
    .label-responsive {
        width: 70px; /* Ancho fijo para las etiquetas */
        padding-left: 0 !important;
    }

    .input-date-responsive {
        padding-left: 10px !important;
    }

    /* Los elementos dentro del date-picker-container se apilan */
    .date-picker-container {
        flex-direction: column;
    }
}


@media print {
    /* Forzar la impresión de colores de fondo */
    body {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Reemplazar los estilos de fondo de tus clases con un color sólido */
    .bg-blue {
        background-color: #003366 !important;
        color: white !important;
    }

    .bg-gray {
        background-color: #8d8d8d !important;
        color: white !important;
    }
}



#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
    z-index: 9999;
    /* Usar Flexbox para centrar el contenido */
    display: flex;
    justify-content: center; /* Centrado horizontal */
    align-items: center; /* Centrado vertical */
}

/* El tamaño de la imagen se ajustará al 100px en cualquier pantalla */
.preloader-img {
    width: 150px;
    animation: customAni 2s ease 0s infinite normal none;
}

@keyframes customAni {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }

    100% {
        opacity: 1;
    }
}

/* Contenedor principal del encabezado */
.top-header {
    width: 100%;
    background-color: #ffffff;
    padding: 10px 0; /* Agrega un padding vertical para que no se vea pegado */
}

/* Estilo para los enlaces de redes sociales y contacto */
.social-link, .contact-link {
    color: #0066cc;
    text-decoration: none;
    font-size: 14px;
}

/* En pantallas medianas o más grandes, alinea los elementos */
@media (min-width: 768px) {
    .top-header .row {
        flex-wrap: nowrap; /* Evita que los elementos se envuelvan */
    }
}






/* Estilos para el encabezado principal */
.main-header {
    position: sticky; /* La clave para que se mueva con el scroll */
    top: 0; /* Se pega en la parte superior de la ventana */
    z-index: 1020; /* Asegura que esté por encima de otros elementos */

    border: 1px solid #ededed;
    background: linear-gradient(90deg, rgba(0, 52, 103, 1) 0%, rgba(1, 77, 154, 1) 50%, rgba(0, 101, 202, 1) 100%);
}

    .main-header .row {
        height: 65px; /* O el alto que desees */
    }

/* Contenedor del logo */
.logo-container {
    padding-left: 3rem;
}

.header-logo {
    max-width: 130px; /* Ajusta este valor si el logo es demasiado grande */
    width: 100%;
    height: auto;
}

/* Estilos para el icono de usuario */
.user-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #e8e7e9;
    background-color: #fff;
    margin-right: 5px;
}

.user-icon {
    font-size: 1.3rem;
    color: #0066cc;
}

/* Estilos para el nombre de usuario y el enlace de logout */
.user-name {
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.logout-link {
    font-size: 2rem; /* Tamaño del ícono, ajusta según necesidad */
    color: white;
}

/* Media query para móviles */
@media (max-width: 767.98px) {
    .logo-container {
        padding: 0.5rem;
        text-align: center;
    }

    .header-logo {
        width: 180px;
    }

    .main-header .row {
        flex-direction: column; /* Apila los elementos en móviles */
        text-align: center;
    }

    .main-header .col-6 {
        text-align: center;
    }

    .user-name, .logout-link {
        margin-right: 0.5rem;
    }
}

.errorNativa {
    color: red;
    font-size: 1rem;
}


#cardMensaje {
    max-width: 550px; /* Establece un ancho máximo fijo para la tarjeta */
    margin-left: auto; /* Estos dos se aseguran de que la tarjeta se centre dentro de su columna */
    margin-right: auto;
    float: none; /* Evita alineaciones no deseadas */
}

/* --- ESTILO PARA EL INPUT GROUP INVÁLIDO --- */

/* 1. Dibuja el borde rojo exterior en todo el grupo */
.input-group.is-invalid {
    border: 1px solid #dc3545; /* Rojo de Bootstrap */
    border-radius: 0.375rem; /* Redondeado estándar */
}

    /* 2. Remueve los bordes individuales de los elementos internos para evitar duplicidad */
    .input-group.is-invalid .form-control,
    .input-group.is-invalid .input-group-text {
        border-color: transparent !important;
    }

        /* 3. Asegura que el input no muestre su propia sombra de foco cuando hay error */
        .input-group.is-invalid .form-control:focus {
            box-shadow: none;
        }

        /* 4. Pinta el ícono dentro del span de color rojo */
        .input-group.is-invalid .input-group-text .fa-solid {
            color: #dc3545;
        }


/* --- ESTILO PARA EL INPUT GROUP VÁLIDO (RECOMENDADO) --- */

/* Estilos para los bordes de los inputs */
.form-control.is-valid {
    border-color: #28a745 ;
    /* Elimina el padding-right que crea espacio para el ícono */
    /* padding-right: calc(1.5em + 0.75rem); */
    background-image: none; /* ¡ESTO ES CLAVE! Elimina el ícono de validación de Bootstrap */
    /* Las siguientes líneas ya no son necesarias si background-image es none,
           pero no hacen daño si se dejan: */
    /* background-repeat: no-repeat;
        background-position: right calc(0.375em + 0.1875rem) center;
        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); */
}

.form-control.is-invalid {
    border-color: #dc3545;
    /* Elimina el padding-right que crea espacio para el ícono */
    /* padding-right: calc(1.5em + 0.75rem); */
    background-image: none; /* ¡ESTO ES CLAVE! Elimina el ícono de validación de Bootstrap */
    /* Las siguientes líneas ya no son necesarias si background-image es none: */
    /* background-repeat: no-repeat;
        background-position: right calc(0.375em + 0.1875rem) center;
        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); */
}

.input-group.is-invalid {
    border: 1px solid #dc3545 !important;
    border-radius: 0.375rem;
    /* Elimina el padding-right que crea espacio para el ícono */
    /* padding-right: calc(1.5em + 0.75rem); */
    background-image: none; /* ¡ESTO ES CLAVE! Elimina el ícono de validación de Bootstrap */
    /* Las siguientes líneas ya no son necesarias si background-image es none: */
    /* background-repeat: no-repeat;
        background-position: right calc(0.375em + 0.1875rem) center;
        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); */
}

.input-group.is-valid {
    border: 1px solid #28a745 !important;
    border-radius: 0.375rem;
    background-image: none;
}

/* Ajuste para el input-group-text para evitar que el ícono de validación se superponga */
/* Este estilo ya no es tan crítico si quitas los íconos de background,
       pero puede ser útil para otros propósitos del input-group */
.input-group .form-control.is-valid ~ .input-group-text,
.input-group .form-control.is-invalid ~ .input-group-text {
    border-left: 0; /* Asegura que el borde del input-group-text se una correctamente */
}

/* Ocultar el ícono de validación predeterminado de Bootstrap en el input-group */
/* Este es redundante con las reglas de .form-control.is-valid/invalid de arriba,
       pero lo puedes mantener por si acaso. */
.input-group > .form-control.is-valid,
.input-group > .form-control.is-invalid {
    background-image: none; /* Eliminar el ícono de validación del propio input */
}


/*-------------------------------------------------------------------------------------------------------*/
/* --- ESTILOS DE LA LISTA DE AFILIADOS --- */

/* Estilo para la tarjeta principal (el contenedor blanco general de cada fila) */
.affiliate-item {
    background-color: #ffffff;
    /* Quitamos el borde y la sombra de aquí, ahora van en el info-box */
    border-radius: 0.5rem; /* Pequeño redondeo general */
    padding: 0; /* Quitamos padding aquí para que el info-box y el botón controlen el espacio */
}

/* El nuevo contenedor para la información de texto que tiene el borde */
.info-box {
    border: 1px solid #003366; /* Borde gris claro como en la imagen */
    border-radius: 0.5rem; /* Bordes redondeados */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    padding: 0.50rem 1.5rem; /* Padding interno */
    margin-right: -1px; /* Para que el borde del botón se solape ligeramente y no haya doble línea */
}

/* Estilos para el texto */
.affiliate-info, .debt-info {
    font-size: 1rem;
    color: #495057;
    white-space: nowrap; /* Evita que el texto de la info se rompa en varias líneas */
}

.debt-amount {
    font-weight: 600;
    color: #212529;
}

/* Estilo para el contenedor de los botones de acción */
.action-buttons {
    /* El contenedor ahora es el que maneja su propio fondo y bordes */
    border-left: none; /* Quitamos el borde izquierdo para que se fusione con el info-box */
    border-radius: 0 0.5rem 0.5rem 0; /* Solo bordes redondeados a la derecha */
    display: flex;
    align-items: center;
    justify-content: center;
    padding : 0.3rem 0rem 0.3rem 1.25rem;
}


    /* Colores específicos para el botón 'Ver' */
    .action-buttons .btn-view {
        background-color: #8BC34A; /* Verde */
        color: white;
        width: 42px;
        height: 42px;
        font-size: 1.3rem;
        border-radius: 0.25rem; /* Menos redondeado para ser más cuadrado */
        padding: 0; /* Asegura que el icono se centre bien */
    }

        .action-buttons .btn-view:hover {
            filter: brightness(1.1); /* Se ilumina un poco al pasar el mouse */
        }

/* Contenedor principal que nos permite posicionar el ícono adentro */
.search-bar-wrapper {
    position: relative;
}

/* Estilos para el campo de búsqueda (input) */
.search-bar-input {
    background-color: #f0f2f5; /* Fondo gris muy claro */
    border-radius: 50px; /* ¡La clave para la forma de píldora! */
    border: none; /* Quitamos el borde por defecto */
    padding-left: 45px; /* MUY IMPORTANTE: Crea espacio a la izquierda para el ícono */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075); /* Sombra interna sutil */
    transition: background-color 0.2s ease;
}

    /* Cambia ligeramente el color de fondo cuando se hace clic */
    .search-bar-input:focus {
        background-color: #e9ecef;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075); /* Mantenemos la misma sombra */
    }

/* Estilos para el ícono de búsqueda */
.search-bar-icon {
    position: absolute; /* Lo sacamos del flujo normal */
    top: 50%; /* Lo posicionamos a la mitad de la altura */
    left: 18px; /* Lo separamos un poco de la izquierda */
    transform: translateY(-50%); /* Truco para centrarlo verticalmente perfecto */
    color: #adb5bd; /* Color gris para el ícono */
    pointer-events: none; /* Permite hacer clic "a través" del ícono en el input */
}

/* Estilo para el texto del placeholder */
.search-bar-input::placeholder {
    color: #adb5bd;
}

/* --- ESTILOS DE LA NUEVA PAGINACIÓN --- */

/* Contenedor principal de la paginación */
.pagination-custom {
    padding: 1rem;
}

/* Grupo que contiene botón y texto (ej. [ < ] Atrás) */
.pagination-group {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Espacio entre el botón y el texto */
}

/* Estilo para el texto "Atrás" y "Siguiente" */
.pagination-text {
    color: #6c757d; /* Gris suave */
    font-size: 1rem;
}

/* Estilo para el indicador de página "X de Y" */
.page-info {
    color: #212529; /* Negro */
    font-size: 1.1rem;
}

/* Estilo base para los botones de flecha */
.pagination-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 0.5rem; /* Bordes redondeados */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    background-color: #f1f3f5; /* Gris claro por defecto */
    color: #868e96;
}

    /* Estilo específico para el botón "Siguiente" */
    .pagination-btn.next {
        background-color: #0d6efd; /* Azul de Bootstrap */
        color: white;
    }

    /* Estilo para los botones cuando están deshabilitados */
    .pagination-btn:disabled {
        background-color: #f1f3f5;
        color: #ced4da;
        cursor: not-allowed;
    }

.company-name {
    font-size: 1.4rem; /* Tamaño de fuente base para escritorio */
    font-weight: bold;
    color: #212529; /* O tu color corporativo */
    margin: 0; /* Quitamos el margen por defecto de los encabezados */
}

.total-debt-box {
    background-color: #003366 !important;
    color: white !important;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 0.5rem !important; /* Añadimos un poco de padding */
} 

/* --- LA MAGIA DEL RESPONSIVE --- */
/* Estilos que se aplican SOLO en pantallas pequeñas (móviles) */
@media (max-width: 767.98px) {
    .company-name {
        font-size: 1.2rem; /* Reducimos la fuente en móvil */
        text-align: center; /* Centramos el nombre de la empresa */
        width: 100%; /* Aseguramos que ocupe todo el ancho */
    }

    .total-debt-box {
        font-size: 1rem; /* Reducimos la fuente de la deuda */
        border-radius: 10px; /* Redondeamos todas las esquinas en móvil */
        justify-content: space-between !important; /* Espaciamos el texto para que no se apriete */
    }
}

/* --- ESTILOS PARA EL MODAL DE DETALLES --- */

.modal-custom {
    border-radius: 1rem; /* Bordes redondeados */
    border: none;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.modal-header-custom {
    background-color: #003366; /* Azul oscuro corporativo */
    color: white;
    padding: 1rem 1.5rem;
    border-bottom: none;
    border-radius: 1rem 1rem 0 0;
}

.modal-logo {
    height: 50px; /* Ajusta el tamaño de tu logo */
}

.modal-header-custom .modal-title {
    font-weight: 600;
}

.client-info-header p {
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
    color: #495057;
}

.client-info-header h4 {
    color: #003366;
    margin-bottom: 1rem;
}

.date-picker-section {
    background-color: #f8f9fa; /* Fondo gris claro */
    border-radius: 0.5rem;
}

    .date-picker-section .form-control {
        width: auto; /* Permite que los inputs de fecha se ajusten a su contenido */
    }

    .date-picker-section i {
        color: #003366; /* Azul para los íconos de calendario */
    }


.otp-container {
    display: flex; /* o flex-wrap para permitir que los campos se coloquen en varias líneas si es necesario */
    gap: 10px; /* Espacio entre los cuadritos */
}

.otp-input {
    width: 35px;
    height: 35px;
    padding: 0;
    text-align: center;
    font-size: 1.20rem;
    border-radius: 8px;
    border-color: #6cb1f5;
}

    /* Opcional: Aplicar un estilo cuando el campo está enfocado */
    .otp-input:focus {
        outline: none; /* Elimina el borde de foco predeterminado */
        border-color: #007bff; /* Cambia el color del borde al enfocar */
        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); /* Añade una sombra al enfocar */
    }

    /* Opcional: Aplicar un estilo al texto ingresado */
    .otp-input::placeholder {
        /* Cambia el estilo del placeholder */
        color: #ccc; /* Cambia el color del placeholder */
        font-size: 12px; /* Cambia el tamaño de la fuente del placeholder */
    }

#resendButton:disabled {
    background-color: #a0a0a0 !important; /* Gris */
    cursor: not-allowed;
    color: #e0e0e0;
}




#tablaMovimientos { /* Asegúrate de que este sea el ID de tu tabla */
    border-collapse: separate; /* IMPRESCINDIBLE para que border-radius funcione en tablas */
    border-spacing: 0; /* Opcional, pero ayuda a controlar el espaciado de celdas */
    border-radius: 10px; /* Redondea las esquinas */
    overflow: hidden; /* Oculta cualquier contenido que se desborde de las esquinas redondeadas */
}

    #tablaMovimientos thead th {
        background-color: #0066CC;
        color: white;
        /* No necesitas border-radius aquí directamente */
    }

table.dataTable tbody tr.even {
    background-color: #ffffff !important; /* Color de fondo blanco */
}




/* Estilo para el contenedor principal de la paginación */
.dt-layout-end {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Alinea a la derecha, si no está ya alineado */
    padding: 10px 0;
}

/* Oculta los botones "Primero" y "Último" */
.dt-paging-button.first,
.dt-paging-button.last {
    display: none;
}

/* Estilo para todos los botones de la paginación */
.dt-paging-button button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    margin: 0 4px;
    border-radius: 8px; /* Bordes redondeados */
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    border: 1px solid transparent;
}

/* Estilo para el botón "Anterior" deshabilitado */
.dt-paging-button.disabled button {
    background-color: #f0f2f5; /* Color de fondo gris claro */
    color: #a0a2a4; /* Color del texto gris */
    cursor: not-allowed;
    border: 1px solid transparent;
}

/* Estilo para el botón "Siguiente" no deshabilitado */
.dt-paging-button.next:not(.disabled) button {
    background-color: #007bff; /* Color de fondo azul */
    color: #fff; /* Color del texto blanco */
    border-color: #007bff;
}

/* Estilo para los botones numéricos (1, 2, etc.) */
.dt-paging-button:not(.disabled) button {
    background-color: transparent; /* Fondo transparente */
    color: #555;
    border: none;
    padding: 8px 12px; /* Ajusta el padding para los números */
}

/* Estilo para el botón numérico activo (página actual) */
.dt-paging-button.active button {
    background-color: #007bff; /* Color de fondo azul */
    color: #fff; /* Color del texto blanco */
    border-radius: 8px;
    padding: 8px 16px;
}

/* Ocultar el texto de los botones "Anterior" y "Siguiente" */
.dt-paging-button.previous button,
.dt-paging-button.next button {
    padding: 8px; /* Un padding uniforme para los botones de flecha */
}

    .dt-paging-button.previous button::before {
        content: '‹'; /* Icono de flecha para "Anterior" */
        font-size: 20px;
        color: #a0a2a4; /* Color gris */
        margin-right: -8px; /* Ajusta para centrar la flecha */
    }

    .dt-paging-button.next button::before {
        content: '›'; /* Icono de flecha para "Siguiente" */
        font-size: 20px;
        color: #fff; /* Color blanco para la flecha del botón azul */
        margin-left: -8px; /* Ajusta para centrar la flecha */
    }

/* Ocultar el texto "Anterior" y "Siguiente" de los botones */
.dt-paging-button.previous button,
.dt-paging-button.next button {
    font-size: 0; /* Oculta el texto sin usar display: none */
}