/* ==========================================================================
   COMPONENTE GLOBAL SECCIONES VACÍAS
   ========================================================================== */
/* Contenedor unificado con borde discontinuo */
.app-empty-state {
    background-color: #fbffff;
    border: 2px dashed #dae6e5;
    border-radius: 1rem;
    padding: 3.5rem 1.5rem;
    text-align: center;
    width: 100%;
}

/* Título principal con el color institucional */
.app-empty-state-title {
    color: #20A19A;
    font-weight: 600;
    font-size: 1.35rem;
    margin-bottom: 0.5rem;
}

/* Párrafo descriptivo secundario */
.app-empty-state-text {
    color: #6c757d;
    font-size: 0.95rem;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    line-height: 1.5;
}

/*  ================================================
    BOTON VOLVER PERSONALIZADO
    ================================================ */
.btn-volver-custom {
    color: #20A19A !important;
    border: 1px solid #E2E8F0 !important;
    background-color: #FFFFFF !important;
    font-weight: 500;
    font-size: 13px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(129, 44, 44, 0.02);
}

/* Efecto interactivo al pasar el mouse */
.btn-volver-custom:hover {
    background-color: #E6F6F5 !important;
    color: #177C77 !important;
    border-color: #20A19A !important;
    box-shadow: 0 2px 4px rgba(32, 161, 154, 0.205);
    transform: translateX(-3px);
}

/* =========================================================
   ESTILOS PERSONALIZADOS PARA LA PAGINACIÓN
   ========================================================= */
.pagination-custom .page-link {
    color: #475569;            
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;  
    width: 35px !important;
    height: 35px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 8px !important;
    transition: all 0.2s ease;
}
/* Efecto cuando pasas el cursor por encima (Hover) */
.pagination-custom .page-link:hover {
    color: #20A19A;            /* Cambia a morado/azul institucional */
    background-color: #F8FAFC; /* Fondo sutil gris claro */
    border-color: #CBD5E1;
}

/* Estado Activo (La página donde está parado el usuario actualmente) */
.pagination-custom .page-item.active .page-link {
    color: #FFFFFF !important;
    background-color: #20A19A; /* Color morado de tu identidad o el asignado al tema */
    border-color: #187a7a;
}

/* Estado Deshabilitado (Cuando no hay página anterior o siguiente) */
.pagination-custom .page-item.disabled .page-link {
    color: #94A3B8;
    background-color: #F1F5F9;
    border-color: #E2E8F0;
    cursor: not-allowed;
}